@fluentui/react-theme
Advanced tools
Comparing version 0.0.0-nightly050f89bf0020211102.1 to 0.0.0-nightly07d9ed6d1b20211221.1
@@ -5,5 +5,5 @@ { | ||
{ | ||
"date": "Tue, 02 Nov 2021 08:40:41 GMT", | ||
"tag": "@fluentui/react-theme_v0.0.0-nightly050f89bf0020211102.1", | ||
"version": "0.0.0-nightly050f89bf0020211102.1", | ||
"date": "Tue, 21 Dec 2021 04:16:38 GMT", | ||
"tag": "@fluentui/react-theme_v0.0.0-nightly07d9ed6d1b20211221.1", | ||
"version": "0.0.0-nightly07d9ed6d1b20211221.1", | ||
"comments": { | ||
@@ -14,4 +14,28 @@ "prerelease": [ | ||
"package": "@fluentui/react-theme", | ||
"commit": "40469cc9aef788dfd49e97df32d6aed267c2cc26", | ||
"commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8", | ||
"comment": "Release nightly v9" | ||
}, | ||
{ | ||
"author": "andmarti@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "3ca42a594827a2ce3d5d18fcd4a399c92fda3bd7", | ||
"comment": "updating brand colors" | ||
}, | ||
{ | ||
"author": "miroslav.stastny@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "d7479a7414e636731b678aebb6bf6295fd607fda", | ||
"comment": "Extend brand ramp from 13 to 16 tokens" | ||
}, | ||
{ | ||
"author": "bsunderhus@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "c9a03954ffd5d1a85284fb36ef4cd103ed8aa927", | ||
"comment": "Remove `themeToCSSVariables` function" | ||
}, | ||
{ | ||
"author": "miroslav.stastny@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "8985d65f0aac448c6766d27800922224555be0f4", | ||
"comment": "feat(react-theme) Add border1 color token for shared colors" | ||
} | ||
@@ -22,2 +46,54 @@ ] | ||
{ | ||
"date": "Thu, 25 Nov 2021 08:34:16 GMT", | ||
"tag": "@fluentui/react-theme_v9.0.0-beta.4", | ||
"version": "9.0.0-beta.4", | ||
"comments": { | ||
"none": [ | ||
{ | ||
"author": "olfedias@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "66670cf47c716e284c7ac7ae5f25d1f77f3aced3", | ||
"comment": "update tooling configs" | ||
} | ||
], | ||
"prerelease": [ | ||
{ | ||
"author": "miroslav.stastny@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "0a328c7a57bfa78ff9a4cd896f17e2887da64bec", | ||
"comment": "feat(react-theme): update shadow design tokens" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Fri, 12 Nov 2021 13:25:09 GMT", | ||
"tag": "@fluentui/react-theme_v9.0.0-beta.3", | ||
"version": "9.0.0-beta.3", | ||
"comments": { | ||
"prerelease": [ | ||
{ | ||
"author": "gcox@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "c9bd5b5a02ae94a8239ce1b56cac2f0d0dbd3586", | ||
"comment": "Updated beta and RC components to ES2019" | ||
}, | ||
{ | ||
"author": "miroslav.stastny@microsoft.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "fe9829e4818f9bb7206df37747d5da332706ae4b", | ||
"comment": "feat(react-theme): add/update design tokens" | ||
} | ||
], | ||
"none": [ | ||
{ | ||
"author": "lingfangao@hotmail.com", | ||
"package": "@fluentui/react-theme", | ||
"commit": "00f70581480b536e723fb69edf0ae617beac4807", | ||
"comment": "Remove beta release tag" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Wed, 27 Oct 2021 12:14:23 GMT", | ||
@@ -24,0 +100,0 @@ "tag": "@fluentui/react-theme_v9.0.0-beta.2", |
# Change Log - @fluentui/react-theme | ||
This log was last generated on Tue, 02 Nov 2021 08:40:41 GMT and should not be manually modified. | ||
This log was last generated on Tue, 21 Dec 2021 04:16:38 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [0.0.0-nightly050f89bf0020211102.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly050f89bf0020211102.1) | ||
## [0.0.0-nightly07d9ed6d1b20211221.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly07d9ed6d1b20211221.1) | ||
Tue, 02 Nov 2021 08:40:41 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v0.0.0-nightly050f89bf0020211102.1) | ||
Tue, 21 Dec 2021 04:16:38 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightly07d9ed6d1b20211221.1) | ||
### Changes | ||
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/40469cc9aef788dfd49e97df32d6aed267c2cc26) by email not defined) | ||
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by email not defined) | ||
- updating brand colors ([PR #20140](https://github.com/microsoft/fluentui/pull/20140) by andmarti@microsoft.com) | ||
- Extend brand ramp from 13 to 16 tokens ([PR #20884](https://github.com/microsoft/fluentui/pull/20884) by miroslav.stastny@microsoft.com) | ||
- Remove `themeToCSSVariables` function ([PR #20828](https://github.com/microsoft/fluentui/pull/20828) by bsunderhus@microsoft.com) | ||
- feat(react-theme) Add border1 color token for shared colors ([PR #20963](https://github.com/microsoft/fluentui/pull/20963) by miroslav.stastny@microsoft.com) | ||
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-beta.4) | ||
Thu, 25 Nov 2021 08:34:16 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.3..@fluentui/react-theme_v9.0.0-beta.4) | ||
### Changes | ||
- feat(react-theme): update shadow design tokens ([PR #20604](https://github.com/microsoft/fluentui/pull/20604) by miroslav.stastny@microsoft.com) | ||
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-beta.3) | ||
Fri, 12 Nov 2021 13:25:09 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v9.0.0-beta.3) | ||
### Changes | ||
- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com) | ||
- feat(react-theme): add/update design tokens ([PR #20569](https://github.com/microsoft/fluentui/pull/20569) by miroslav.stastny@microsoft.com) | ||
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-beta.2) | ||
@@ -17,0 +40,0 @@ |
@@ -10,105 +10,105 @@ export declare type BorderRadiusTokens = { | ||
export declare type BrandVariants = ColorVariants & { | ||
shade60: string; | ||
}; | ||
export declare type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160; | ||
declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder2'; | ||
export declare type BrandVariants = Record<Brands, string>; | ||
declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder2'; | ||
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder1' | 'colorPaletteAnchorBorder2'; | ||
declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder2'; | ||
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder1' | 'colorPaletteBeigeBorder2'; | ||
declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder2'; | ||
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2'; | ||
declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder2'; | ||
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder1' | 'colorPaletteBlueBorder2'; | ||
declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder2'; | ||
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder1' | 'colorPaletteBrassBorder2'; | ||
declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder2'; | ||
export declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder1' | 'colorPaletteBronzeBorder2'; | ||
declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder2'; | ||
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder1' | 'colorPaletteBrownBorder2'; | ||
declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder2'; | ||
export declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder1' | 'colorPaletteBurgundyBorder2'; | ||
declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder2'; | ||
export declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder1' | 'colorPaletteCharcoalBorder2'; | ||
declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder2'; | ||
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder1' | 'colorPaletteCornflowerBorder2'; | ||
declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder2'; | ||
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder1' | 'colorPaletteCranberryBorder2'; | ||
declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder2'; | ||
export declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder1' | 'colorPaletteCyanBorder2'; | ||
declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder2'; | ||
export declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder1' | 'colorPaletteDarkBlueBorder2'; | ||
declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder2'; | ||
export declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder1' | 'colorPaletteDarkBrownBorder2'; | ||
declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder2'; | ||
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder1' | 'colorPaletteDarkGreenBorder2'; | ||
declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder2'; | ||
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2'; | ||
declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder2'; | ||
export declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder1' | 'colorPaletteDarkPurpleBorder2'; | ||
declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder2'; | ||
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder1' | 'colorPaletteDarkRedBorder2'; | ||
declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder2'; | ||
export declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder1' | 'colorPaletteDarkTealBorder2'; | ||
declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder2'; | ||
export declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder1' | 'colorPaletteForestBorder2'; | ||
declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder2'; | ||
export declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder1' | 'colorPaletteGoldBorder2'; | ||
declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder2'; | ||
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder1' | 'colorPaletteGrapeBorder2'; | ||
declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder2'; | ||
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2'; | ||
declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder2'; | ||
export declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder1' | 'colorPaletteHotPinkBorder2'; | ||
declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder2'; | ||
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder1' | 'colorPaletteLavenderBorder2'; | ||
declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder2'; | ||
export declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder1' | 'colorPaletteLightBlueBorder2'; | ||
declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder2'; | ||
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2'; | ||
declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder2'; | ||
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder1' | 'colorPaletteLightTealBorder2'; | ||
declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder2'; | ||
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder1' | 'colorPaletteLilacBorder2'; | ||
declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder2'; | ||
export declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder1' | 'colorPaletteLimeBorder2'; | ||
declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder2'; | ||
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder1' | 'colorPaletteMagentaBorder2'; | ||
declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder2'; | ||
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2'; | ||
declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder2'; | ||
export declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder1' | 'colorPaletteMinkBorder2'; | ||
declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder2'; | ||
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder1' | 'colorPaletteNavyBorder2'; | ||
declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder2'; | ||
export declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder1' | 'colorPaletteOrangeBorder2'; | ||
declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder2'; | ||
export declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder1' | 'colorPaletteOrchidBorder2'; | ||
declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder2'; | ||
export declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder1' | 'colorPalettePeachBorder2'; | ||
declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder2'; | ||
export declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder1' | 'colorPalettePinkBorder2'; | ||
declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder2'; | ||
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder1' | 'colorPalettePlatinumBorder2'; | ||
declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder2'; | ||
export declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder1' | 'colorPalettePlumBorder2'; | ||
declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder2'; | ||
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder1' | 'colorPalettePumpkinBorder2'; | ||
declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder2'; | ||
export declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder1' | 'colorPalettePurpleBorder2'; | ||
declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder2'; | ||
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2'; | ||
declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder2'; | ||
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder1' | 'colorPaletteRoyalBlueBorder2'; | ||
declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder2'; | ||
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder1' | 'colorPaletteSeafoamBorder2'; | ||
declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder1' | 'colorPaletteSilverBorder2'; | ||
declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder1' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder1' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteTokens = Record<ColorPaletteDarkRed | ColorPaletteBurgundy | ColorPaletteCranberry | ColorPaletteRed | ColorPaletteDarkOrange | ColorPaletteBronze | ColorPalettePumpkin | ColorPaletteOrange | ColorPalettePeach | ColorPaletteMarigold | ColorPaletteYellow | ColorPaletteGold | ColorPaletteBrass | ColorPaletteBrown | ColorPaletteDarkBrown | ColorPaletteLime | ColorPaletteForest | ColorPaletteSeafoam | ColorPaletteLightGreen | ColorPaletteGreen | ColorPaletteDarkGreen | ColorPaletteLightTeal | ColorPaletteTeal | ColorPaletteDarkTeal | ColorPaletteCyan | ColorPaletteSteel | ColorPaletteLightBlue | ColorPaletteBlue | ColorPaletteRoyalBlue | ColorPaletteDarkBlue | ColorPaletteCornflower | ColorPaletteNavy | ColorPaletteLavender | ColorPalettePurple | ColorPaletteDarkPurple | ColorPaletteOrchid | ColorPaletteGrape | ColorPaletteBerry | ColorPaletteLilac | ColorPalettePink | ColorPaletteHotPink | ColorPaletteMagenta | ColorPalettePlum | ColorPaletteBeige | ColorPaletteMink | ColorPaletteSilver | ColorPalettePlatinum | ColorPaletteAnchor | ColorPaletteCharcoal, string>; | ||
declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder2'; | ||
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2'; | ||
@@ -120,2 +120,5 @@ /** | ||
colorNeutralForeground1: string; | ||
colorNeutralForeground1Hover: string; | ||
colorNeutralForeground1Pressed: string; | ||
colorNeutralForeground1Selected: string; | ||
colorNeutralForeground2: string; | ||
@@ -137,2 +140,3 @@ colorNeutralForeground2Hover: string; | ||
colorNeutralForegroundDisabled: string; | ||
colorNeutralForegroundInvertedDisabled: string; | ||
colorBrandForegroundLink: string; | ||
@@ -148,2 +152,5 @@ colorBrandForegroundLinkHover: string; | ||
colorNeutralForegroundInverted: string; | ||
colorNeutralForegroundInvertedHover: string; | ||
colorNeutralForegroundInvertedPressed: string; | ||
colorNeutralForegroundInvertedSelected: string; | ||
colorNeutralForegroundOnBrand: string; | ||
@@ -154,2 +161,9 @@ colorNeutralForegroundInvertedLink: string; | ||
colorNeutralForegroundInvertedLinkSelected: string; | ||
colorBrandForegroundInverted: string; | ||
colorBrandForegroundInvertedHover: string; | ||
colorBrandForegroundInvertedPressed: string; | ||
colorBrandForegroundOnLight: string; | ||
colorBrandForegroundOnLightHover: string; | ||
colorBrandForegroundOnLightPressed: string; | ||
colorBrandForegroundOnLightSelected: string; | ||
colorNeutralBackground1: string; | ||
@@ -181,2 +195,9 @@ colorNeutralBackground1Hover: string; | ||
colorSubtleBackgroundSelected: string; | ||
colorSubtleBackgroundLightAlphaHover: string; | ||
colorSubtleBackgroundLightAlphaPressed: string; | ||
colorSubtleBackgroundLightAlphaSelected: string; | ||
colorSubtleBackgroundInverted: string; | ||
colorSubtleBackgroundInvertedHover: string; | ||
colorSubtleBackgroundInvertedPressed: string; | ||
colorSubtleBackgroundInvertedSelected: string; | ||
colorTransparentBackground: string; | ||
@@ -187,2 +208,3 @@ colorTransparentBackgroundHover: string; | ||
colorNeutralBackgroundDisabled: string; | ||
colorNeutralBackgroundInvertedDisabled: string; | ||
colorNeutralStencil1: string; | ||
@@ -199,2 +221,6 @@ colorNeutralStencil2: string; | ||
colorBrandBackground2: string; | ||
colorBrandBackgroundInverted: string; | ||
colorBrandBackgroundInvertedHover: string; | ||
colorBrandBackgroundInvertedPressed: string; | ||
colorBrandBackgroundInvertedSelected: string; | ||
colorNeutralStrokeAccessible: string; | ||
@@ -210,2 +236,7 @@ colorNeutralStrokeAccessibleHover: string; | ||
colorNeutralStroke3: string; | ||
colorNeutralStrokeOnBrand: string; | ||
colorNeutralStrokeOnBrand2: string; | ||
colorNeutralStrokeOnBrand2Hover: string; | ||
colorNeutralStrokeOnBrand2Pressed: string; | ||
colorNeutralStrokeOnBrand2Selected: string; | ||
colorBrandStroke1: string; | ||
@@ -217,2 +248,3 @@ colorBrandStroke2: string; | ||
colorNeutralStrokeDisabled: string; | ||
colorNeutralStrokeInvertedDisabled: string; | ||
colorTransparentStroke: string; | ||
@@ -233,20 +265,2 @@ colorTransparentStrokeInteractive: string; | ||
/** | ||
* Possible color variant values | ||
*/ | ||
declare type ColorVariants = { | ||
shade50: string; | ||
shade40: string; | ||
shade30: string; | ||
shade20: string; | ||
shade10: string; | ||
primary: string; | ||
tint10: string; | ||
tint20: string; | ||
tint30: string; | ||
tint40: string; | ||
tint50: string; | ||
tint60: string; | ||
}; | ||
export declare const createDarkTheme: (brand: BrandVariants) => Theme; | ||
@@ -302,2 +316,11 @@ | ||
export declare type ShadowBrandTokens = { | ||
shadow2Brand: string; | ||
shadow4Brand: string; | ||
shadow8Brand: string; | ||
shadow16Brand: string; | ||
shadow28Brand: string; | ||
shadow64Brand: string; | ||
}; | ||
/** | ||
@@ -328,6 +351,4 @@ * Design tokens for shadow levels | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare function themeToCSSVariables(theme: Theme): Record<string, string | number>; | ||
export declare const webDarkTheme: Theme; | ||
@@ -334,0 +355,0 @@ |
@@ -8,122 +8,161 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const colors_1 = /*#__PURE__*/require("../global/colors"); | ||
var colors_1 = /*#__PURE__*/require("../global/colors"); | ||
const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: colors_1.white, | ||
colorNeutralForeground1Hover: colors_1.white, | ||
colorNeutralForeground1Pressed: colors_1.white, | ||
colorNeutralForeground1Selected: colors_1.white, | ||
colorNeutralForeground2: colors_1.grey[84], | ||
colorNeutralForeground2Hover: colors_1.white, | ||
colorNeutralForeground2Pressed: colors_1.white, | ||
colorNeutralForeground2Selected: colors_1.white, | ||
colorNeutralForeground2BrandHover: brand[100], | ||
colorNeutralForeground2BrandPressed: brand[90], | ||
colorNeutralForeground2BrandSelected: brand[100], | ||
colorNeutralForeground3: colors_1.grey[68], | ||
colorNeutralForeground3Hover: colors_1.grey[84], | ||
colorNeutralForeground3Pressed: colors_1.grey[84], | ||
colorNeutralForeground3Selected: colors_1.grey[84], | ||
colorNeutralForeground3BrandHover: brand[100], | ||
colorNeutralForeground3BrandPressed: brand[90], | ||
colorNeutralForeground3BrandSelected: brand[100], | ||
colorNeutralForeground4: colors_1.grey[60], | ||
colorNeutralForegroundDisabled: colors_1.grey[36], | ||
colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorBrandForegroundLink: brand[90], | ||
colorBrandForegroundLinkHover: brand[110], | ||
colorBrandForegroundLinkPressed: brand[100], | ||
colorBrandForegroundLinkSelected: brand[90], | ||
colorCompoundBrandForeground1: brand[90], | ||
colorCompoundBrandForeground1Hover: brand[100], | ||
colorCompoundBrandForeground1Pressed: brand[80], | ||
colorBrandForeground1: brand[100], | ||
colorBrandForeground2: brand[110], | ||
colorNeutralForegroundInverted: colors_1.white, | ||
colorNeutralForegroundInvertedHover: colors_1.white, | ||
colorNeutralForegroundInvertedPressed: colors_1.white, | ||
colorNeutralForegroundInvertedSelected: colors_1.white, | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: colors_1.grey[16], | ||
colorNeutralBackground1Hover: colors_1.grey[24], | ||
colorNeutralBackground1Pressed: colors_1.grey[12], | ||
colorNeutralBackground1Selected: colors_1.grey[22], | ||
colorNeutralBackground2: colors_1.grey[12], | ||
colorNeutralBackground2Hover: colors_1.grey[20], | ||
colorNeutralBackground2Pressed: colors_1.grey[8], | ||
colorNeutralBackground2Selected: colors_1.grey[18], | ||
colorNeutralBackground3: colors_1.grey[8], | ||
colorNeutralBackground3Hover: colors_1.grey[16], | ||
colorNeutralBackground3Pressed: colors_1.grey[4], | ||
colorNeutralBackground3Selected: colors_1.grey[14], | ||
colorNeutralBackground4: colors_1.grey[4], | ||
colorNeutralBackground4Hover: colors_1.grey[12], | ||
colorNeutralBackground4Pressed: colors_1.black, | ||
colorNeutralBackground4Selected: colors_1.grey[10], | ||
colorNeutralBackground5: colors_1.black, | ||
colorNeutralBackground5Hover: colors_1.grey[8], | ||
colorNeutralBackground5Pressed: colors_1.grey[2], | ||
colorNeutralBackground5Selected: colors_1.grey[6], | ||
colorNeutralBackground6: colors_1.grey[20], | ||
colorNeutralBackgroundInverted: colors_1.grey[24], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[22], | ||
colorSubtleBackgroundPressed: colors_1.grey[18], | ||
colorSubtleBackgroundSelected: colors_1.grey[20], | ||
colorSubtleBackgroundLightAlphaHover: colors_1.whiteAlpha[10], | ||
colorSubtleBackgroundLightAlphaPressed: colors_1.whiteAlpha[5], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: colors_1.blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: colors_1.blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: colors_1.blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[8], | ||
colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10], | ||
colorNeutralStencil1: colors_1.grey[20], | ||
colorNeutralStencil2: colors_1.grey[34], | ||
colorBrandBackground: brand[70], | ||
colorBrandBackgroundHover: brand[80], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[90], | ||
colorCompoundBrandBackgroundHover: brand[100], | ||
colorCompoundBrandBackgroundPressed: brand[80], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[40], | ||
colorBrandBackgroundInverted: colors_1.white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: colors_1.grey[68], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[74], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand[100], | ||
colorNeutralStroke1: colors_1.grey[40], | ||
colorNeutralStroke1Hover: colors_1.grey[46], | ||
colorNeutralStroke1Pressed: colors_1.grey[42], | ||
colorNeutralStroke1Selected: colors_1.grey[44], | ||
colorNeutralStroke2: colors_1.grey[32], | ||
colorNeutralStroke3: colors_1.grey[24], | ||
colorNeutralStrokeOnBrand: colors_1.grey[16], | ||
colorNeutralStrokeOnBrand2: colors_1.white, | ||
colorNeutralStrokeOnBrand2Hover: colors_1.white, | ||
colorNeutralStrokeOnBrand2Pressed: colors_1.white, | ||
colorNeutralStrokeOnBrand2Selected: colors_1.white, | ||
colorBrandStroke1: brand[90], | ||
colorBrandStroke2: brand[50], | ||
colorCompoundBrandStroke: brand[90], | ||
colorCompoundBrandStrokeHover: brand[100], | ||
colorCompoundBrandStrokePressed: brand[80], | ||
colorNeutralStrokeDisabled: colors_1.grey[26], | ||
colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.black, | ||
colorStrokeFocus2: colors_1.white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: colors_1.white, | ||
colorNeutralForeground2: colors_1.grey[84], | ||
colorNeutralForeground2Hover: colors_1.white, | ||
colorNeutralForeground2Pressed: colors_1.white, | ||
colorNeutralForeground2Selected: colors_1.white, | ||
colorNeutralForeground2BrandHover: brand.tint20, | ||
colorNeutralForeground2BrandPressed: brand.tint10, | ||
colorNeutralForeground2BrandSelected: brand.tint20, | ||
colorNeutralForeground3: colors_1.grey[68], | ||
colorNeutralForeground3Hover: colors_1.grey[84], | ||
colorNeutralForeground3Pressed: colors_1.grey[84], | ||
colorNeutralForeground3Selected: colors_1.grey[84], | ||
colorNeutralForeground3BrandHover: brand.tint20, | ||
colorNeutralForeground3BrandPressed: brand.tint10, | ||
colorNeutralForeground3BrandSelected: brand.tint20, | ||
colorNeutralForeground4: colors_1.grey[60], | ||
colorNeutralForegroundDisabled: colors_1.grey[36], | ||
colorBrandForegroundLink: brand.tint10, | ||
colorBrandForegroundLinkHover: brand.tint30, | ||
colorBrandForegroundLinkPressed: brand.tint20, | ||
colorBrandForegroundLinkSelected: brand.tint10, | ||
colorCompoundBrandForeground1: brand.tint10, | ||
colorCompoundBrandForeground1Hover: brand.tint20, | ||
colorCompoundBrandForeground1Pressed: brand.primary, | ||
colorBrandForeground1: brand.tint20, | ||
colorBrandForeground2: brand.tint30, | ||
colorNeutralForegroundInverted: colors_1.grey[14], | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorNeutralBackground1: colors_1.grey[16], | ||
colorNeutralBackground1Hover: colors_1.grey[24], | ||
colorNeutralBackground1Pressed: colors_1.grey[12], | ||
colorNeutralBackground1Selected: colors_1.grey[22], | ||
colorNeutralBackground2: colors_1.grey[12], | ||
colorNeutralBackground2Hover: colors_1.grey[20], | ||
colorNeutralBackground2Pressed: colors_1.grey[8], | ||
colorNeutralBackground2Selected: colors_1.grey[18], | ||
colorNeutralBackground3: colors_1.grey[8], | ||
colorNeutralBackground3Hover: colors_1.grey[16], | ||
colorNeutralBackground3Pressed: colors_1.grey[4], | ||
colorNeutralBackground3Selected: colors_1.grey[14], | ||
colorNeutralBackground4: colors_1.grey[4], | ||
colorNeutralBackground4Hover: colors_1.grey[12], | ||
colorNeutralBackground4Pressed: colors_1.black, | ||
colorNeutralBackground4Selected: colors_1.grey[10], | ||
colorNeutralBackground5: colors_1.black, | ||
colorNeutralBackground5Hover: colors_1.grey[8], | ||
colorNeutralBackground5Pressed: colors_1.grey[2], | ||
colorNeutralBackground5Selected: colors_1.grey[6], | ||
colorNeutralBackground6: colors_1.grey[20], | ||
colorNeutralBackgroundInverted: colors_1.white, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[22], | ||
colorSubtleBackgroundPressed: colors_1.grey[18], | ||
colorSubtleBackgroundSelected: colors_1.grey[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[8], | ||
colorNeutralStencil1: colors_1.grey[20], | ||
colorNeutralStencil2: colors_1.grey[34], | ||
colorBrandBackground: brand.shade10, | ||
colorBrandBackgroundHover: brand.primary, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.tint10, | ||
colorCompoundBrandBackgroundHover: brand.tint20, | ||
colorCompoundBrandBackgroundPressed: brand.primary, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.shade40, | ||
colorNeutralStrokeAccessible: colors_1.grey[68], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[74], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand.tint20, | ||
colorNeutralStroke1: colors_1.grey[40], | ||
colorNeutralStroke1Hover: colors_1.grey[46], | ||
colorNeutralStroke1Pressed: colors_1.grey[42], | ||
colorNeutralStroke1Selected: colors_1.grey[44], | ||
colorNeutralStroke2: colors_1.grey[32], | ||
colorNeutralStroke3: colors_1.grey[24], | ||
colorBrandStroke1: brand.tint10, | ||
colorBrandStroke2: brand.shade30, | ||
colorCompoundBrandStroke: brand.tint10, | ||
colorCompoundBrandStrokeHover: brand.tint20, | ||
colorCompoundBrandStrokePressed: brand.primary, | ||
colorNeutralStrokeDisabled: colors_1.grey[26], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.black, | ||
colorStrokeFocus2: colors_1.white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
}; | ||
}; | ||
}); | ||
exports.generateColorTokens = generateColorTokens; | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = colors_1.sharedColors[sharedColor].shade40, _a["colorPalette" + color + "Background2"] = colors_1.sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Background3"] = colors_1.sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = colors_1.sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Foreground2"] = colors_1.sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Foreground3"] = colors_1.sharedColors[sharedColor].tint20, _a["colorPalette" + color + "BorderActive"] = colors_1.sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Border2"] = colors_1.sharedColors[sharedColor].tint20, _a); | ||
return tslib_1.__assign(tslib_1.__assign({}, acc), sharedColorTokens); | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: colors_1.sharedColors[sharedColor].shade40, | ||
[`colorPalette${color}Background2`]: colors_1.sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Background3`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: colors_1.sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Foreground2`]: colors_1.sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Foreground3`]: colors_1.sharedColors[sharedColor].tint20, | ||
[`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].tint20 | ||
}; | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=dark.js.map |
@@ -8,122 +8,161 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const colors_1 = /*#__PURE__*/require("../global/colors"); | ||
var colors_1 = /*#__PURE__*/require("../global/colors"); | ||
const generateColorTokens = () => ({ | ||
colorNeutralForeground1: colors_1.hcCanvasText, | ||
colorNeutralForeground1Hover: colors_1.hcHighlightText, | ||
colorNeutralForeground1Pressed: colors_1.hcHighlightText, | ||
colorNeutralForeground1Selected: colors_1.hcHighlightText, | ||
colorNeutralForeground2: colors_1.hcCanvasText, | ||
colorNeutralForeground2Hover: colors_1.hcHighlightText, | ||
colorNeutralForeground2Pressed: colors_1.hcHighlightText, | ||
colorNeutralForeground2Selected: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandHover: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandPressed: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandSelected: colors_1.hcHighlightText, | ||
colorNeutralForeground3: colors_1.hcCanvasText, | ||
colorNeutralForeground3Hover: colors_1.hcHighlightText, | ||
colorNeutralForeground3Pressed: colors_1.hcHighlightText, | ||
colorNeutralForeground3Selected: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandHover: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandPressed: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandSelected: colors_1.hcHighlightText, | ||
colorNeutralForeground4: colors_1.hcCanvasText, | ||
colorNeutralForegroundDisabled: colors_1.hcDisabled, | ||
colorNeutralForegroundInvertedDisabled: colors_1.hcDisabled, | ||
colorBrandForegroundLink: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkHover: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkPressed: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkSelected: colors_1.hcHyperlink, | ||
colorCompoundBrandForeground1: colors_1.hcHighlight, | ||
colorCompoundBrandForeground1Hover: colors_1.hcHighlight, | ||
colorCompoundBrandForeground1Pressed: colors_1.hcHighlight, | ||
colorBrandForeground1: colors_1.hcCanvasText, | ||
colorBrandForeground2: colors_1.hcButtonText, | ||
colorNeutralForegroundInverted: colors_1.hcCanvasText, | ||
colorNeutralForegroundInvertedHover: colors_1.hcHighlightText, | ||
colorNeutralForegroundInvertedPressed: colors_1.hcHighlightText, | ||
colorNeutralForegroundInvertedSelected: colors_1.hcHighlightText, | ||
colorNeutralForegroundOnBrand: colors_1.hcButtonText, | ||
colorNeutralForegroundInvertedLink: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.hcHyperlink, | ||
colorBrandForegroundInverted: colors_1.hcCanvasText, | ||
colorBrandForegroundInvertedHover: colors_1.hcCanvasText, | ||
colorBrandForegroundInvertedPressed: colors_1.hcCanvasText, | ||
colorBrandForegroundOnLight: colors_1.hcButtonText, | ||
colorBrandForegroundOnLightHover: colors_1.hcHighlightText, | ||
colorBrandForegroundOnLightPressed: colors_1.hcHighlightText, | ||
colorBrandForegroundOnLightSelected: colors_1.hcHighlightText, | ||
colorNeutralBackground1: colors_1.hcCanvas, | ||
colorNeutralBackground1Hover: colors_1.hcHighlight, | ||
colorNeutralBackground1Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground1Selected: colors_1.hcHighlight, | ||
colorNeutralBackground2: colors_1.hcCanvas, | ||
colorNeutralBackground2Hover: colors_1.hcHighlight, | ||
colorNeutralBackground2Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground2Selected: colors_1.hcHighlight, | ||
colorNeutralBackground3: colors_1.hcCanvas, | ||
colorNeutralBackground3Hover: colors_1.hcHighlight, | ||
colorNeutralBackground3Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground3Selected: colors_1.hcHighlight, | ||
colorNeutralBackground4: colors_1.hcCanvas, | ||
colorNeutralBackground4Hover: colors_1.hcHighlight, | ||
colorNeutralBackground4Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground4Selected: colors_1.hcHighlight, | ||
colorNeutralBackground5: colors_1.hcCanvas, | ||
colorNeutralBackground5Hover: colors_1.hcHighlight, | ||
colorNeutralBackground5Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground5Selected: colors_1.hcHighlight, | ||
colorNeutralBackground6: colors_1.hcCanvas, | ||
colorNeutralBackgroundInverted: colors_1.hcCanvas, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.hcHighlight, | ||
colorSubtleBackgroundPressed: colors_1.hcHighlight, | ||
colorSubtleBackgroundSelected: colors_1.hcHighlight, | ||
colorSubtleBackgroundLightAlphaHover: colors_1.hcHighlight, | ||
colorSubtleBackgroundLightAlphaPressed: colors_1.hcHighlight, | ||
colorSubtleBackgroundLightAlphaSelected: colors_1.hcHighlight, | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: colors_1.hcHighlight, | ||
colorSubtleBackgroundInvertedPressed: colors_1.hcHighlight, | ||
colorSubtleBackgroundInvertedSelected: colors_1.hcHighlight, | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: colors_1.hcHighlight, | ||
colorTransparentBackgroundPressed: colors_1.hcHighlight, | ||
colorTransparentBackgroundSelected: colors_1.hcHighlight, | ||
colorNeutralBackgroundDisabled: colors_1.hcCanvas, | ||
colorNeutralBackgroundInvertedDisabled: colors_1.hcCanvas, | ||
colorNeutralStencil1: colors_1.grey[8], | ||
colorNeutralStencil2: colors_1.grey[52], | ||
colorBrandBackground: colors_1.hcButtonFace, | ||
colorBrandBackgroundHover: colors_1.hcHighlight, | ||
colorBrandBackgroundPressed: colors_1.hcHighlight, | ||
colorBrandBackgroundSelected: colors_1.hcHighlight, | ||
colorCompoundBrandBackground: colors_1.hcHighlight, | ||
colorCompoundBrandBackgroundHover: colors_1.hcHighlight, | ||
colorCompoundBrandBackgroundPressed: colors_1.hcHighlight, | ||
colorBrandBackgroundStatic: colors_1.hcCanvas, | ||
colorBrandBackground2: colors_1.hcButtonFace, | ||
colorBrandBackgroundInverted: colors_1.hcButtonFace, | ||
colorBrandBackgroundInvertedHover: colors_1.hcHighlight, | ||
colorBrandBackgroundInvertedPressed: colors_1.hcHighlight, | ||
colorBrandBackgroundInvertedSelected: colors_1.hcHighlight, | ||
colorNeutralStrokeAccessible: colors_1.hcCanvasText, | ||
colorNeutralStrokeAccessibleHover: colors_1.hcHighlight, | ||
colorNeutralStrokeAccessiblePressed: colors_1.hcHighlight, | ||
colorNeutralStrokeAccessibleSelected: colors_1.hcHighlight, | ||
colorNeutralStroke1: colors_1.hcCanvasText, | ||
colorNeutralStroke1Hover: colors_1.hcHighlight, | ||
colorNeutralStroke1Pressed: colors_1.hcHighlight, | ||
colorNeutralStroke1Selected: colors_1.hcHighlight, | ||
colorNeutralStroke2: colors_1.hcCanvasText, | ||
colorNeutralStroke3: colors_1.hcCanvasText, | ||
colorNeutralStrokeOnBrand: colors_1.hcCanvas, | ||
colorNeutralStrokeOnBrand2: colors_1.hcCanvasText, | ||
colorNeutralStrokeOnBrand2Hover: colors_1.hcCanvasText, | ||
colorNeutralStrokeOnBrand2Pressed: colors_1.hcCanvasText, | ||
colorNeutralStrokeOnBrand2Selected: colors_1.hcCanvasText, | ||
colorBrandStroke1: colors_1.hcCanvasText, | ||
colorBrandStroke2: colors_1.hcCanvas, | ||
colorCompoundBrandStroke: colors_1.hcHighlight, | ||
colorCompoundBrandStrokeHover: colors_1.hcHighlight, | ||
colorCompoundBrandStrokePressed: colors_1.hcHighlight, | ||
colorNeutralStrokeDisabled: colors_1.hcDisabled, | ||
colorNeutralStrokeInvertedDisabled: colors_1.hcDisabled, | ||
colorTransparentStroke: colors_1.hcCanvasText, | ||
colorTransparentStrokeInteractive: colors_1.hcHighlight, | ||
colorTransparentStrokeDisabled: colors_1.hcDisabled, | ||
colorStrokeFocus1: colors_1.hcCanvas, | ||
colorStrokeFocus2: colors_1.hcHighlight, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
var generateColorTokens = function () { | ||
return { | ||
colorNeutralForeground1: colors_1.hcCanvasText, | ||
colorNeutralForeground2: colors_1.hcCanvasText, | ||
colorNeutralForeground2Hover: colors_1.hcHighlightText, | ||
colorNeutralForeground2Pressed: colors_1.hcHighlightText, | ||
colorNeutralForeground2Selected: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandHover: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandPressed: colors_1.hcHighlightText, | ||
colorNeutralForeground2BrandSelected: colors_1.hcHighlightText, | ||
colorNeutralForeground3: colors_1.hcCanvasText, | ||
colorNeutralForeground3Hover: colors_1.hcHighlightText, | ||
colorNeutralForeground3Pressed: colors_1.hcHighlightText, | ||
colorNeutralForeground3Selected: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandHover: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandPressed: colors_1.hcHighlightText, | ||
colorNeutralForeground3BrandSelected: colors_1.hcHighlightText, | ||
colorNeutralForeground4: colors_1.hcCanvasText, | ||
colorNeutralForegroundDisabled: colors_1.hcDisabled, | ||
colorBrandForegroundLink: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkHover: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkPressed: colors_1.hcHyperlink, | ||
colorBrandForegroundLinkSelected: colors_1.hcHyperlink, | ||
colorCompoundBrandForeground1: colors_1.hcHighlight, | ||
colorCompoundBrandForeground1Hover: colors_1.hcHighlight, | ||
colorCompoundBrandForeground1Pressed: colors_1.hcHighlight, | ||
colorBrandForeground1: colors_1.hcCanvasText, | ||
colorBrandForeground2: colors_1.hcButtonText, | ||
colorNeutralForegroundInverted: colors_1.hcCanvas, | ||
colorNeutralForegroundOnBrand: colors_1.hcButtonText, | ||
colorNeutralForegroundInvertedLink: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.hcHyperlink, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.hcHyperlink, | ||
colorNeutralBackground1: colors_1.hcCanvas, | ||
colorNeutralBackground1Hover: colors_1.hcHighlight, | ||
colorNeutralBackground1Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground1Selected: colors_1.hcHighlight, | ||
colorNeutralBackground2: colors_1.hcCanvas, | ||
colorNeutralBackground2Hover: colors_1.hcHighlight, | ||
colorNeutralBackground2Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground2Selected: colors_1.hcHighlight, | ||
colorNeutralBackground3: colors_1.hcCanvas, | ||
colorNeutralBackground3Hover: colors_1.hcHighlight, | ||
colorNeutralBackground3Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground3Selected: colors_1.hcHighlight, | ||
colorNeutralBackground4: colors_1.hcCanvas, | ||
colorNeutralBackground4Hover: colors_1.hcHighlight, | ||
colorNeutralBackground4Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground4Selected: colors_1.hcHighlight, | ||
colorNeutralBackground5: colors_1.hcCanvas, | ||
colorNeutralBackground5Hover: colors_1.hcHighlight, | ||
colorNeutralBackground5Pressed: colors_1.hcHighlight, | ||
colorNeutralBackground5Selected: colors_1.hcHighlight, | ||
colorNeutralBackground6: colors_1.hcCanvas, | ||
colorNeutralBackgroundInverted: colors_1.hcCanvasText, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.hcHighlight, | ||
colorSubtleBackgroundPressed: colors_1.hcHighlight, | ||
colorSubtleBackgroundSelected: colors_1.hcHighlight, | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: colors_1.hcHighlight, | ||
colorTransparentBackgroundPressed: colors_1.hcHighlight, | ||
colorTransparentBackgroundSelected: colors_1.hcHighlight, | ||
colorNeutralBackgroundDisabled: colors_1.hcCanvas, | ||
colorNeutralStencil1: colors_1.grey[8], | ||
colorNeutralStencil2: colors_1.grey[52], | ||
colorBrandBackground: colors_1.hcButtonFace, | ||
colorBrandBackgroundHover: colors_1.hcHighlight, | ||
colorBrandBackgroundPressed: colors_1.hcHighlight, | ||
colorBrandBackgroundSelected: colors_1.hcHighlight, | ||
colorCompoundBrandBackground: colors_1.hcHighlight, | ||
colorCompoundBrandBackgroundHover: colors_1.hcHighlight, | ||
colorCompoundBrandBackgroundPressed: colors_1.hcHighlight, | ||
colorBrandBackgroundStatic: colors_1.hcCanvas, | ||
colorBrandBackground2: colors_1.hcButtonFace, | ||
colorNeutralStrokeAccessible: colors_1.hcCanvasText, | ||
colorNeutralStrokeAccessibleHover: colors_1.hcHighlight, | ||
colorNeutralStrokeAccessiblePressed: colors_1.hcHighlight, | ||
colorNeutralStrokeAccessibleSelected: colors_1.hcHighlight, | ||
colorNeutralStroke1: colors_1.hcCanvasText, | ||
colorNeutralStroke1Hover: colors_1.hcHighlight, | ||
colorNeutralStroke1Pressed: colors_1.hcHighlight, | ||
colorNeutralStroke1Selected: colors_1.hcHighlight, | ||
colorNeutralStroke2: colors_1.hcCanvasText, | ||
colorNeutralStroke3: colors_1.hcCanvasText, | ||
colorBrandStroke1: colors_1.hcCanvasText, | ||
colorBrandStroke2: colors_1.hcCanvas, | ||
colorCompoundBrandStroke: colors_1.hcHighlight, | ||
colorCompoundBrandStrokeHover: colors_1.hcHighlight, | ||
colorCompoundBrandStrokePressed: colors_1.hcHighlight, | ||
colorNeutralStrokeDisabled: colors_1.hcDisabled, | ||
colorTransparentStroke: colors_1.hcCanvasText, | ||
colorTransparentStrokeInteractive: colors_1.hcHighlight, | ||
colorTransparentStrokeDisabled: colors_1.hcDisabled, | ||
colorStrokeFocus1: colors_1.hcCanvas, | ||
colorStrokeFocus2: colors_1.hcHighlight, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
}; | ||
}; | ||
}); | ||
exports.generateColorTokens = generateColorTokens; | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = colors_1.white, _a["colorPalette" + color + "Background2"] = colors_1.black, _a["colorPalette" + color + "Background3"] = colors_1.white, _a["colorPalette" + color + "Foreground1"] = colors_1.black, _a["colorPalette" + color + "Foreground2"] = colors_1.white, _a["colorPalette" + color + "Foreground3"] = colors_1.white, _a["colorPalette" + color + "BorderActive"] = colors_1.hcHighlight, _a["colorPalette" + color + "Border2"] = colors_1.white, _a); | ||
return tslib_1.__assign(tslib_1.__assign({}, acc), sharedColorTokens); | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: colors_1.white, | ||
[`colorPalette${color}Background2`]: colors_1.black, | ||
[`colorPalette${color}Background3`]: colors_1.white, | ||
[`colorPalette${color}Foreground1`]: colors_1.black, | ||
[`colorPalette${color}Foreground2`]: colors_1.white, | ||
[`colorPalette${color}Foreground3`]: colors_1.white, | ||
[`colorPalette${color}BorderActive`]: colors_1.hcHighlight, | ||
[`colorPalette${color}Border1`]: colors_1.white, | ||
[`colorPalette${color}Border2`]: colors_1.white | ||
}; | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=highContrast.js.map |
@@ -8,122 +8,161 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const colors_1 = /*#__PURE__*/require("../global/colors"); | ||
var colors_1 = /*#__PURE__*/require("../global/colors"); | ||
const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: colors_1.grey[14], | ||
colorNeutralForeground1Hover: colors_1.grey[14], | ||
colorNeutralForeground1Pressed: colors_1.grey[14], | ||
colorNeutralForeground1Selected: colors_1.grey[14], | ||
colorNeutralForeground2: colors_1.grey[26], | ||
colorNeutralForeground2Hover: colors_1.grey[14], | ||
colorNeutralForeground2Pressed: colors_1.grey[14], | ||
colorNeutralForeground2Selected: colors_1.grey[14], | ||
colorNeutralForeground2BrandHover: brand[80], | ||
colorNeutralForeground2BrandPressed: brand[70], | ||
colorNeutralForeground2BrandSelected: brand[80], | ||
colorNeutralForeground3: colors_1.grey[38], | ||
colorNeutralForeground3Hover: colors_1.grey[26], | ||
colorNeutralForeground3Pressed: colors_1.grey[26], | ||
colorNeutralForeground3Selected: colors_1.grey[26], | ||
colorNeutralForeground3BrandHover: brand[80], | ||
colorNeutralForeground3BrandPressed: brand[70], | ||
colorNeutralForeground3BrandSelected: brand[80], | ||
colorNeutralForeground4: colors_1.grey[44], | ||
colorNeutralForegroundDisabled: colors_1.grey[74], | ||
colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorBrandForegroundLink: brand[70], | ||
colorBrandForegroundLinkHover: brand[60], | ||
colorBrandForegroundLinkPressed: brand[40], | ||
colorBrandForegroundLinkSelected: brand[70], | ||
colorCompoundBrandForeground1: brand[80], | ||
colorCompoundBrandForeground1Hover: brand[70], | ||
colorCompoundBrandForeground1Pressed: brand[60], | ||
colorBrandForeground1: brand[80], | ||
colorBrandForeground2: brand[70], | ||
colorNeutralForegroundInverted: colors_1.white, | ||
colorNeutralForegroundInvertedHover: colors_1.white, | ||
colorNeutralForegroundInvertedPressed: colors_1.white, | ||
colorNeutralForegroundInvertedSelected: colors_1.white, | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: colors_1.white, | ||
colorNeutralBackground1Hover: colors_1.grey[96], | ||
colorNeutralBackground1Pressed: colors_1.grey[88], | ||
colorNeutralBackground1Selected: colors_1.grey[92], | ||
colorNeutralBackground2: colors_1.grey[98], | ||
colorNeutralBackground2Hover: colors_1.grey[94], | ||
colorNeutralBackground2Pressed: colors_1.grey[86], | ||
colorNeutralBackground2Selected: colors_1.grey[90], | ||
colorNeutralBackground3: colors_1.grey[96], | ||
colorNeutralBackground3Hover: colors_1.grey[92], | ||
colorNeutralBackground3Pressed: colors_1.grey[84], | ||
colorNeutralBackground3Selected: colors_1.grey[88], | ||
colorNeutralBackground4: colors_1.grey[94], | ||
colorNeutralBackground4Hover: colors_1.grey[98], | ||
colorNeutralBackground4Pressed: colors_1.grey[96], | ||
colorNeutralBackground4Selected: colors_1.white, | ||
colorNeutralBackground5: colors_1.grey[92], | ||
colorNeutralBackground5Hover: colors_1.grey[96], | ||
colorNeutralBackground5Pressed: colors_1.grey[94], | ||
colorNeutralBackground5Selected: colors_1.grey[98], | ||
colorNeutralBackground6: colors_1.grey[90], | ||
colorNeutralBackgroundInverted: colors_1.grey[20], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[96], | ||
colorSubtleBackgroundPressed: colors_1.grey[88], | ||
colorSubtleBackgroundSelected: colors_1.grey[92], | ||
colorSubtleBackgroundLightAlphaHover: colors_1.whiteAlpha[80], | ||
colorSubtleBackgroundLightAlphaPressed: colors_1.whiteAlpha[50], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: colors_1.blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: colors_1.blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: colors_1.blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[94], | ||
colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10], | ||
colorNeutralStencil1: colors_1.grey[90], | ||
colorNeutralStencil2: colors_1.grey[98], | ||
colorBrandBackground: brand[80], | ||
colorBrandBackgroundHover: brand[70], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[80], | ||
colorCompoundBrandBackgroundHover: brand[70], | ||
colorCompoundBrandBackgroundPressed: brand[60], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[160], | ||
colorBrandBackgroundInverted: colors_1.white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: colors_1.grey[38], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[34], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[30], | ||
colorNeutralStrokeAccessibleSelected: brand[80], | ||
colorNeutralStroke1: colors_1.grey[82], | ||
colorNeutralStroke1Hover: colors_1.grey[78], | ||
colorNeutralStroke1Pressed: colors_1.grey[70], | ||
colorNeutralStroke1Selected: colors_1.grey[74], | ||
colorNeutralStroke2: colors_1.grey[88], | ||
colorNeutralStroke3: colors_1.grey[94], | ||
colorNeutralStrokeOnBrand: colors_1.white, | ||
colorNeutralStrokeOnBrand2: colors_1.white, | ||
colorNeutralStrokeOnBrand2Hover: colors_1.white, | ||
colorNeutralStrokeOnBrand2Pressed: colors_1.white, | ||
colorNeutralStrokeOnBrand2Selected: colors_1.white, | ||
colorBrandStroke1: brand[80], | ||
colorBrandStroke2: brand[140], | ||
colorCompoundBrandStroke: brand[80], | ||
colorCompoundBrandStrokeHover: brand[70], | ||
colorCompoundBrandStrokePressed: brand[60], | ||
colorNeutralStrokeDisabled: colors_1.grey[88], | ||
colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.white, | ||
colorStrokeFocus2: colors_1.black, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: colors_1.grey[14], | ||
colorNeutralForeground2: colors_1.grey[26], | ||
colorNeutralForeground2Hover: colors_1.grey[14], | ||
colorNeutralForeground2Pressed: colors_1.grey[14], | ||
colorNeutralForeground2Selected: colors_1.grey[14], | ||
colorNeutralForeground2BrandHover: brand.primary, | ||
colorNeutralForeground2BrandPressed: brand.shade10, | ||
colorNeutralForeground2BrandSelected: brand.primary, | ||
colorNeutralForeground3: colors_1.grey[38], | ||
colorNeutralForeground3Hover: colors_1.grey[26], | ||
colorNeutralForeground3Pressed: colors_1.grey[26], | ||
colorNeutralForeground3Selected: colors_1.grey[26], | ||
colorNeutralForeground3BrandHover: brand.primary, | ||
colorNeutralForeground3BrandPressed: brand.shade10, | ||
colorNeutralForeground3BrandSelected: brand.primary, | ||
colorNeutralForeground4: colors_1.grey[44], | ||
colorNeutralForegroundDisabled: colors_1.grey[74], | ||
colorBrandForegroundLink: brand.shade10, | ||
colorBrandForegroundLinkHover: brand.shade20, | ||
colorBrandForegroundLinkPressed: brand.shade40, | ||
colorBrandForegroundLinkSelected: brand.shade10, | ||
colorCompoundBrandForeground1: brand.primary, | ||
colorCompoundBrandForeground1Hover: brand.shade10, | ||
colorCompoundBrandForeground1Pressed: brand.shade20, | ||
colorBrandForeground1: brand.primary, | ||
colorBrandForeground2: brand.shade10, | ||
colorNeutralForegroundInverted: colors_1.white, | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorNeutralBackground1: colors_1.white, | ||
colorNeutralBackground1Hover: colors_1.grey[96], | ||
colorNeutralBackground1Pressed: colors_1.grey[88], | ||
colorNeutralBackground1Selected: colors_1.grey[92], | ||
colorNeutralBackground2: colors_1.grey[98], | ||
colorNeutralBackground2Hover: colors_1.grey[94], | ||
colorNeutralBackground2Pressed: colors_1.grey[86], | ||
colorNeutralBackground2Selected: colors_1.grey[90], | ||
colorNeutralBackground3: colors_1.grey[96], | ||
colorNeutralBackground3Hover: colors_1.grey[92], | ||
colorNeutralBackground3Pressed: colors_1.grey[84], | ||
colorNeutralBackground3Selected: colors_1.grey[88], | ||
colorNeutralBackground4: colors_1.grey[94], | ||
colorNeutralBackground4Hover: colors_1.grey[98], | ||
colorNeutralBackground4Pressed: colors_1.grey[96], | ||
colorNeutralBackground4Selected: colors_1.white, | ||
colorNeutralBackground5: colors_1.grey[92], | ||
colorNeutralBackground5Hover: colors_1.grey[96], | ||
colorNeutralBackground5Pressed: colors_1.grey[94], | ||
colorNeutralBackground5Selected: colors_1.grey[98], | ||
colorNeutralBackground6: colors_1.grey[90], | ||
colorNeutralBackgroundInverted: colors_1.grey[38], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[96], | ||
colorSubtleBackgroundPressed: colors_1.grey[88], | ||
colorSubtleBackgroundSelected: colors_1.grey[92], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[94], | ||
colorNeutralStencil1: colors_1.grey[90], | ||
colorNeutralStencil2: colors_1.grey[98], | ||
colorBrandBackground: brand.primary, | ||
colorBrandBackgroundHover: brand.shade10, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.primary, | ||
colorCompoundBrandBackgroundHover: brand.shade10, | ||
colorCompoundBrandBackgroundPressed: brand.shade20, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.tint60, | ||
colorNeutralStrokeAccessible: colors_1.grey[38], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[34], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[30], | ||
colorNeutralStrokeAccessibleSelected: brand.primary, | ||
colorNeutralStroke1: colors_1.grey[82], | ||
colorNeutralStroke1Hover: colors_1.grey[78], | ||
colorNeutralStroke1Pressed: colors_1.grey[70], | ||
colorNeutralStroke1Selected: colors_1.grey[74], | ||
colorNeutralStroke2: colors_1.grey[88], | ||
colorNeutralStroke3: colors_1.grey[94], | ||
colorBrandStroke1: brand.primary, | ||
colorBrandStroke2: brand.tint40, | ||
colorCompoundBrandStroke: brand.primary, | ||
colorCompoundBrandStrokeHover: brand.shade10, | ||
colorCompoundBrandStrokePressed: brand.shade20, | ||
colorNeutralStrokeDisabled: colors_1.grey[88], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.white, | ||
colorStrokeFocus2: colors_1.black, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
}; | ||
}; | ||
}); | ||
exports.generateColorTokens = generateColorTokens; | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = colors_1.sharedColors[sharedColor].tint60, _a["colorPalette" + color + "Background2"] = colors_1.sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Background3"] = colors_1.sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = colors_1.sharedColors[sharedColor].shade10, _a["colorPalette" + color + "Foreground2"] = colors_1.sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Foreground3"] = colors_1.sharedColors[sharedColor].primary, _a["colorPalette" + color + "BorderActive"] = colors_1.sharedColors[sharedColor].primary, _a["colorPalette" + color + "Border2"] = colors_1.sharedColors[sharedColor].primary, _a); | ||
return tslib_1.__assign(tslib_1.__assign({}, acc), sharedColorTokens); | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: colors_1.sharedColors[sharedColor].tint60, | ||
[`colorPalette${color}Background2`]: colors_1.sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Background3`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: colors_1.sharedColors[sharedColor].shade10, | ||
[`colorPalette${color}Foreground2`]: colors_1.sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Foreground3`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].primary | ||
}; | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=light.js.map |
@@ -8,122 +8,161 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const colors_1 = /*#__PURE__*/require("../global/colors"); | ||
var colors_1 = /*#__PURE__*/require("../global/colors"); | ||
const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: colors_1.white, | ||
colorNeutralForeground1Hover: colors_1.white, | ||
colorNeutralForeground1Pressed: colors_1.white, | ||
colorNeutralForeground1Selected: colors_1.white, | ||
colorNeutralForeground2: colors_1.grey[84], | ||
colorNeutralForeground2Hover: colors_1.white, | ||
colorNeutralForeground2Pressed: colors_1.white, | ||
colorNeutralForeground2Selected: colors_1.white, | ||
colorNeutralForeground2BrandHover: brand[100], | ||
colorNeutralForeground2BrandPressed: brand[90], | ||
colorNeutralForeground2BrandSelected: brand[100], | ||
colorNeutralForeground3: colors_1.grey[68], | ||
colorNeutralForeground3Hover: colors_1.grey[84], | ||
colorNeutralForeground3Pressed: colors_1.grey[84], | ||
colorNeutralForeground3Selected: colors_1.grey[84], | ||
colorNeutralForeground3BrandHover: brand[100], | ||
colorNeutralForeground3BrandPressed: brand[90], | ||
colorNeutralForeground3BrandSelected: brand[100], | ||
colorNeutralForeground4: colors_1.grey[60], | ||
colorNeutralForegroundDisabled: colors_1.grey[36], | ||
colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorBrandForegroundLink: brand[90], | ||
colorBrandForegroundLinkHover: brand[110], | ||
colorBrandForegroundLinkPressed: brand[100], | ||
colorBrandForegroundLinkSelected: brand[90], | ||
colorCompoundBrandForeground1: brand[90], | ||
colorCompoundBrandForeground1Hover: brand[100], | ||
colorCompoundBrandForeground1Pressed: brand[80], | ||
colorBrandForeground1: brand[100], | ||
colorBrandForeground2: brand[110], | ||
colorNeutralForegroundInverted: colors_1.white, | ||
colorNeutralForegroundInvertedHover: colors_1.white, | ||
colorNeutralForegroundInvertedPressed: colors_1.white, | ||
colorNeutralForegroundInvertedSelected: colors_1.white, | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: colors_1.grey[16], | ||
colorNeutralBackground1Hover: colors_1.grey[24], | ||
colorNeutralBackground1Pressed: colors_1.grey[12], | ||
colorNeutralBackground1Selected: colors_1.grey[22], | ||
colorNeutralBackground2: colors_1.grey[14], | ||
colorNeutralBackground2Hover: colors_1.grey[22], | ||
colorNeutralBackground2Pressed: colors_1.grey[10], | ||
colorNeutralBackground2Selected: colors_1.grey[20], | ||
colorNeutralBackground3: colors_1.grey[12], | ||
colorNeutralBackground3Hover: colors_1.grey[20], | ||
colorNeutralBackground3Pressed: colors_1.grey[8], | ||
colorNeutralBackground3Selected: colors_1.grey[18], | ||
colorNeutralBackground4: colors_1.grey[8], | ||
colorNeutralBackground4Hover: colors_1.grey[16], | ||
colorNeutralBackground4Pressed: colors_1.grey[4], | ||
colorNeutralBackground4Selected: colors_1.grey[14], | ||
colorNeutralBackground5: colors_1.grey[4], | ||
colorNeutralBackground5Hover: colors_1.grey[12], | ||
colorNeutralBackground5Pressed: colors_1.black, | ||
colorNeutralBackground5Selected: colors_1.grey[10], | ||
colorNeutralBackground6: colors_1.grey[20], | ||
colorNeutralBackgroundInverted: colors_1.grey[24], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[22], | ||
colorSubtleBackgroundPressed: colors_1.grey[18], | ||
colorSubtleBackgroundSelected: colors_1.grey[20], | ||
colorSubtleBackgroundLightAlphaHover: colors_1.whiteAlpha[10], | ||
colorSubtleBackgroundLightAlphaPressed: colors_1.whiteAlpha[5], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: colors_1.blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: colors_1.blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: colors_1.blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[8], | ||
colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10], | ||
colorNeutralStencil1: colors_1.grey[20], | ||
colorNeutralStencil2: colors_1.grey[34], | ||
colorBrandBackground: brand[70], | ||
colorBrandBackgroundHover: brand[80], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[90], | ||
colorCompoundBrandBackgroundHover: brand[100], | ||
colorCompoundBrandBackgroundPressed: brand[80], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[40], | ||
colorBrandBackgroundInverted: colors_1.white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: colors_1.grey[68], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[74], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand[100], | ||
colorNeutralStroke1: colors_1.grey[40], | ||
colorNeutralStroke1Hover: colors_1.grey[46], | ||
colorNeutralStroke1Pressed: colors_1.grey[42], | ||
colorNeutralStroke1Selected: colors_1.grey[44], | ||
colorNeutralStroke2: colors_1.grey[32], | ||
colorNeutralStroke3: colors_1.grey[24], | ||
colorNeutralStrokeOnBrand: colors_1.grey[16], | ||
colorNeutralStrokeOnBrand2: colors_1.white, | ||
colorNeutralStrokeOnBrand2Hover: colors_1.white, | ||
colorNeutralStrokeOnBrand2Pressed: colors_1.white, | ||
colorNeutralStrokeOnBrand2Selected: colors_1.white, | ||
colorBrandStroke1: brand[90], | ||
colorBrandStroke2: brand[50], | ||
colorCompoundBrandStroke: brand[90], | ||
colorCompoundBrandStrokeHover: brand[100], | ||
colorCompoundBrandStrokePressed: brand[80], | ||
colorNeutralStrokeDisabled: colors_1.grey[26], | ||
colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.black, | ||
colorStrokeFocus2: colors_1.white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: colors_1.white, | ||
colorNeutralForeground2: colors_1.grey[84], | ||
colorNeutralForeground2Hover: colors_1.white, | ||
colorNeutralForeground2Pressed: colors_1.white, | ||
colorNeutralForeground2Selected: colors_1.white, | ||
colorNeutralForeground2BrandHover: brand.tint20, | ||
colorNeutralForeground2BrandPressed: brand.tint10, | ||
colorNeutralForeground2BrandSelected: brand.tint20, | ||
colorNeutralForeground3: colors_1.grey[68], | ||
colorNeutralForeground3Hover: colors_1.grey[84], | ||
colorNeutralForeground3Pressed: colors_1.grey[84], | ||
colorNeutralForeground3Selected: colors_1.grey[84], | ||
colorNeutralForeground3BrandHover: brand.tint20, | ||
colorNeutralForeground3BrandPressed: brand.tint10, | ||
colorNeutralForeground3BrandSelected: brand.tint20, | ||
colorNeutralForeground4: colors_1.grey[60], | ||
colorNeutralForegroundDisabled: colors_1.grey[36], | ||
colorBrandForegroundLink: brand.tint10, | ||
colorBrandForegroundLinkHover: brand.tint30, | ||
colorBrandForegroundLinkPressed: brand.tint20, | ||
colorBrandForegroundLinkSelected: brand.tint10, | ||
colorCompoundBrandForeground1: brand.tint10, | ||
colorCompoundBrandForeground1Hover: brand.tint20, | ||
colorCompoundBrandForeground1Pressed: brand.primary, | ||
colorBrandForeground1: brand.tint20, | ||
colorBrandForeground2: brand.tint30, | ||
colorNeutralForegroundInverted: colors_1.white, | ||
colorNeutralForegroundOnBrand: colors_1.white, | ||
colorNeutralForegroundInvertedLink: colors_1.white, | ||
colorNeutralForegroundInvertedLinkHover: colors_1.white, | ||
colorNeutralForegroundInvertedLinkPressed: colors_1.white, | ||
colorNeutralForegroundInvertedLinkSelected: colors_1.white, | ||
colorNeutralBackground1: colors_1.grey[16], | ||
colorNeutralBackground1Hover: colors_1.grey[24], | ||
colorNeutralBackground1Pressed: colors_1.grey[12], | ||
colorNeutralBackground1Selected: colors_1.grey[22], | ||
colorNeutralBackground2: colors_1.grey[14], | ||
colorNeutralBackground2Hover: colors_1.grey[22], | ||
colorNeutralBackground2Pressed: colors_1.grey[10], | ||
colorNeutralBackground2Selected: colors_1.grey[20], | ||
colorNeutralBackground3: colors_1.grey[12], | ||
colorNeutralBackground3Hover: colors_1.grey[20], | ||
colorNeutralBackground3Pressed: colors_1.grey[8], | ||
colorNeutralBackground3Selected: colors_1.grey[18], | ||
colorNeutralBackground4: colors_1.grey[8], | ||
colorNeutralBackground4Hover: colors_1.grey[16], | ||
colorNeutralBackground4Pressed: colors_1.grey[4], | ||
colorNeutralBackground4Selected: colors_1.grey[14], | ||
colorNeutralBackground5: colors_1.grey[4], | ||
colorNeutralBackground5Hover: colors_1.grey[12], | ||
colorNeutralBackground5Pressed: colors_1.black, | ||
colorNeutralBackground5Selected: colors_1.grey[10], | ||
colorNeutralBackground6: colors_1.grey[20], | ||
colorNeutralBackgroundInverted: colors_1.white, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: colors_1.grey[22], | ||
colorSubtleBackgroundPressed: colors_1.grey[18], | ||
colorSubtleBackgroundSelected: colors_1.grey[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: colors_1.grey[8], | ||
colorNeutralStencil1: colors_1.grey[20], | ||
colorNeutralStencil2: colors_1.grey[34], | ||
colorBrandBackground: brand.shade10, | ||
colorBrandBackgroundHover: brand.primary, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.tint10, | ||
colorCompoundBrandBackgroundHover: brand.tint20, | ||
colorCompoundBrandBackgroundPressed: brand.primary, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.shade40, | ||
colorNeutralStrokeAccessible: colors_1.grey[68], | ||
colorNeutralStrokeAccessibleHover: colors_1.grey[74], | ||
colorNeutralStrokeAccessiblePressed: colors_1.grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand.tint20, | ||
colorNeutralStroke1: colors_1.grey[40], | ||
colorNeutralStroke1Hover: colors_1.grey[46], | ||
colorNeutralStroke1Pressed: colors_1.grey[42], | ||
colorNeutralStroke1Selected: colors_1.grey[44], | ||
colorNeutralStroke2: colors_1.grey[32], | ||
colorNeutralStroke3: colors_1.grey[24], | ||
colorBrandStroke1: brand.tint10, | ||
colorBrandStroke2: brand.shade30, | ||
colorCompoundBrandStroke: brand.tint10, | ||
colorCompoundBrandStrokeHover: brand.tint20, | ||
colorCompoundBrandStrokePressed: brand.primary, | ||
colorNeutralStrokeDisabled: colors_1.grey[26], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: colors_1.black, | ||
colorStrokeFocus2: colors_1.white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
}; | ||
}; | ||
}); | ||
exports.generateColorTokens = generateColorTokens; | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = colors_1.sharedColors[sharedColor].shade40, _a["colorPalette" + color + "Background2"] = colors_1.sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Background3"] = colors_1.sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = colors_1.sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Foreground2"] = colors_1.sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Foreground3"] = colors_1.sharedColors[sharedColor].tint20, _a["colorPalette" + color + "BorderActive"] = colors_1.sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Border2"] = colors_1.sharedColors[sharedColor].tint20, _a); | ||
return tslib_1.__assign(tslib_1.__assign({}, acc), sharedColorTokens); | ||
exports.colorPaletteTokens = /*#__PURE__*/Object.keys(colors_1.sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: colors_1.sharedColors[sharedColor].shade40, | ||
[`colorPalette${color}Background2`]: colors_1.sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Background3`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: colors_1.sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Foreground2`]: colors_1.sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Foreground3`]: colors_1.sharedColors[sharedColor].tint20, | ||
[`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].tint20 | ||
}; | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=teamsDark.js.map |
import type { BrandVariants } from '../types'; | ||
export declare const brandWeb: BrandVariants; | ||
export declare const brandTeams: BrandVariants; | ||
export declare const brandOffice: BrandVariants; |
@@ -6,35 +6,57 @@ "use strict"; | ||
}); | ||
exports.brandTeams = exports.brandWeb = void 0; // TODO: values should be set per product theme | ||
exports.brandOffice = exports.brandTeams = exports.brandWeb = void 0; | ||
exports.brandWeb = { | ||
shade60: '#092C47', | ||
shade50: '#043862', | ||
shade40: '#004578', | ||
shade30: '#004C87', | ||
shade20: '#005A9E', | ||
shade10: '#106EBE', | ||
primary: '#0078D4', | ||
tint10: '#2899F5', | ||
tint20: '#3AA0F3', | ||
tint30: '#6CB8F6', | ||
tint40: '#C7E0F4', | ||
tint50: '#DEECF9', | ||
tint60: '#EFF6FC' | ||
}; // TODO: these colors are not approved yet | ||
10: `#001526`, | ||
20: `#002848`, | ||
30: `#043862`, | ||
40: `#004578`, | ||
50: `#004c87`, | ||
60: `#005a9e`, | ||
70: `#106ebe`, | ||
80: `#0078d4`, | ||
90: `#1890f1`, | ||
100: `#2899f5`, | ||
110: `#3aa0f3`, | ||
120: `#6cb8f6`, | ||
130: `#82c7ff`, | ||
140: `#c7e0f4`, | ||
150: `#deecf9`, | ||
160: `#eff6fc` | ||
}; | ||
exports.brandTeams = { | ||
shade60: '#323348', | ||
shade50: '#393b5d', | ||
shade40: '#3D3E66', | ||
shade30: '#464775', | ||
shade20: '#494B83', | ||
shade10: '#52558f', | ||
primary: '#6264A7', | ||
tint10: '#8f95f8', | ||
tint20: '#9EA2FF', | ||
tint30: '#B2B5FF', | ||
tint40: '#C7C9FF', | ||
tint50: '#DBDCF0', | ||
tint60: '#E9EAF6' | ||
10: `#2b2b40`, | ||
20: `#2f2f4a`, | ||
30: `#333357`, | ||
40: `#383966`, | ||
50: `#3d3e78`, | ||
60: `#444791`, | ||
70: `#4f52b2`, | ||
80: `#5b5fc7`, | ||
90: `#7579eb`, | ||
100: `#7f85f5`, | ||
110: `#9299f7`, | ||
120: `#aab1fa`, | ||
130: `#b6bcfa`, | ||
140: `#c5cbfa`, | ||
150: `#dce0fa`, | ||
160: `#e8ebfa` | ||
}; | ||
exports.brandOffice = { | ||
10: `#29130b`, | ||
20: `#4d2415`, | ||
30: `#792000`, | ||
40: `#99482b`, | ||
50: `#a52c00`, | ||
60: `#c33400`, | ||
70: `#e06a3f`, | ||
80: `#d83b01`, | ||
90: `#dd4f1b`, | ||
100: `#fe7948`, | ||
110: `#ff865a`, | ||
120: `#ff9973`, | ||
130: `#e8825d`, | ||
140: `#ffb498`, | ||
150: `#f4beaa`, | ||
160: `#f9dcd1` | ||
}; | ||
//# sourceMappingURL=brandColors.js.map |
import type { GlobalSharedColors, Greys, AlphaColors } from '../types'; | ||
export declare const grey: Record<Greys, string>; | ||
export declare const whiteAlpha: Record<AlphaColors, string>; | ||
export declare const blackAlpha: Record<AlphaColors, string>; | ||
export declare const white = "#ffffff"; | ||
export declare const black = "#000000"; | ||
export declare const whiteAlpha: Record<AlphaColors, string>; | ||
export declare const blackAlpha: Record<AlphaColors, string>; | ||
export declare const hcHyperlink = "#ffff00"; | ||
@@ -8,0 +8,0 @@ export declare const hcHighlight = "#1aebff"; |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.sharedColors = exports.hcButtonFace = exports.hcButtonText = exports.hcHighlightText = exports.hcCanvasText = exports.hcCanvas = exports.hcDisabled = exports.hcHighlight = exports.hcHyperlink = exports.blackAlpha = exports.whiteAlpha = exports.black = exports.white = exports.grey = void 0; | ||
exports.sharedColors = exports.hcButtonFace = exports.hcButtonText = exports.hcHighlightText = exports.hcCanvasText = exports.hcCanvas = exports.hcDisabled = exports.hcHighlight = exports.hcHyperlink = exports.black = exports.white = exports.blackAlpha = exports.whiteAlpha = exports.grey = void 0; | ||
exports.grey = { | ||
@@ -61,4 +61,2 @@ '0': '#000000', | ||
}; | ||
exports.white = '#ffffff'; | ||
exports.black = '#000000'; | ||
exports.whiteAlpha = { | ||
@@ -88,2 +86,4 @@ '5': 'rgba(255, 255, 255, 0.05)', | ||
}; | ||
exports.white = '#ffffff'; | ||
exports.black = '#000000'; | ||
exports.hcHyperlink = '#ffff00'; | ||
@@ -97,3 +97,3 @@ exports.hcHighlight = '#1aebff'; | ||
exports.hcButtonFace = '#ffffff'; | ||
var darkRed = { | ||
const darkRed = { | ||
shade50: '#130204', | ||
@@ -112,3 +112,3 @@ shade40: '#230308', | ||
}; | ||
var burgundy = { | ||
const burgundy = { | ||
shade50: '#1a0607', | ||
@@ -127,3 +127,3 @@ shade40: '#310b0d', | ||
}; | ||
var cranberry = { | ||
const cranberry = { | ||
shade50: '#200205', | ||
@@ -142,3 +142,3 @@ shade40: '#3b0509', | ||
}; | ||
var red = { | ||
const red = { | ||
shade50: '#210809', | ||
@@ -157,3 +157,3 @@ shade40: '#3f1011', | ||
}; | ||
var darkOrange = { | ||
const darkOrange = { | ||
shade50: '#230900', | ||
@@ -172,3 +172,3 @@ shade40: '#411200', | ||
}; | ||
var bronze = { | ||
const bronze = { | ||
shade50: '#1b0a01', | ||
@@ -187,3 +187,3 @@ shade40: '#321303', | ||
}; | ||
var pumpkin = { | ||
const pumpkin = { | ||
shade50: '#200d03', | ||
@@ -202,3 +202,3 @@ shade40: '#3d1805', | ||
}; | ||
var orange = { | ||
const orange = { | ||
shade50: '#271002', | ||
@@ -217,3 +217,3 @@ shade40: '#4a1e04', | ||
}; | ||
var peach = { | ||
const peach = { | ||
shade50: '#291600', | ||
@@ -232,3 +232,3 @@ shade40: '#4d2a00', | ||
}; | ||
var marigold = { | ||
const marigold = { | ||
shade50: '#251a00', | ||
@@ -247,3 +247,3 @@ shade40: '#463100', | ||
}; | ||
var yellow = { | ||
const yellow = { | ||
shade50: '#282400', | ||
@@ -262,3 +262,3 @@ shade40: '#4c4400', | ||
}; | ||
var gold = { | ||
const gold = { | ||
shade50: '#1f1900', | ||
@@ -277,3 +277,3 @@ shade40: '#3a2f00', | ||
}; | ||
var brass = { | ||
const brass = { | ||
shade50: '#181202', | ||
@@ -292,3 +292,3 @@ shade40: '#2e2103', | ||
}; | ||
var brown = { | ||
const brown = { | ||
shade50: '#170e07', | ||
@@ -307,3 +307,3 @@ shade40: '#2b1a0e', | ||
}; | ||
var darkBrown = { | ||
const darkBrown = { | ||
shade50: '#0c0704', | ||
@@ -322,3 +322,3 @@ shade40: '#170c08', | ||
}; | ||
var lime = { | ||
const lime = { | ||
shade50: '#121b06', | ||
@@ -337,3 +337,3 @@ shade40: '#23330b', | ||
}; | ||
var forest = { | ||
const forest = { | ||
shade50: '#0c1501', | ||
@@ -352,3 +352,3 @@ shade40: '#162702', | ||
}; | ||
var seafoam = { | ||
const seafoam = { | ||
shade50: '#002111', | ||
@@ -367,3 +367,3 @@ shade40: '#003d20', | ||
}; | ||
var lightGreen = { | ||
const lightGreen = { | ||
shade50: '#031a02', | ||
@@ -382,3 +382,3 @@ shade40: '#063004', | ||
}; | ||
var green = { | ||
const green = { | ||
shade50: '#031403', | ||
@@ -397,3 +397,3 @@ shade40: '#052505', | ||
}; | ||
var darkGreen = { | ||
const darkGreen = { | ||
shade50: '#021102', | ||
@@ -412,3 +412,3 @@ shade40: '#032003', | ||
}; | ||
var lightTeal = { | ||
const lightTeal = { | ||
shade50: '#001d1f', | ||
@@ -427,3 +427,3 @@ shade40: '#00373a', | ||
}; | ||
var teal = { | ||
const teal = { | ||
shade50: '#001516', | ||
@@ -442,3 +442,3 @@ shade40: '#012728', | ||
}; | ||
var darkTeal = { | ||
const darkTeal = { | ||
shade50: '#001010', | ||
@@ -457,3 +457,3 @@ shade40: '#001f1f', | ||
}; | ||
var cyan = { | ||
const cyan = { | ||
shade50: '#00181e', | ||
@@ -472,3 +472,3 @@ shade40: '#002e38', | ||
}; | ||
var steel = { | ||
const steel = { | ||
shade50: '#000f12', | ||
@@ -487,3 +487,3 @@ shade40: '#001b22', | ||
}; | ||
var lightBlue = { | ||
const lightBlue = { | ||
shade50: '#091823', | ||
@@ -502,3 +502,3 @@ shade40: '#112d42', | ||
}; | ||
var blue = { | ||
const blue = { | ||
shade50: '#001322', | ||
@@ -517,3 +517,3 @@ shade40: '#002440', | ||
}; | ||
var royalBlue = { | ||
const royalBlue = { | ||
shade50: '#000c16', | ||
@@ -532,3 +532,3 @@ shade40: '#00172a', | ||
}; | ||
var darkBlue = { | ||
const darkBlue = { | ||
shade50: '#000910', | ||
@@ -547,3 +547,3 @@ shade40: '#00111f', | ||
}; | ||
var cornflower = { | ||
const cornflower = { | ||
shade50: '#0d1126', | ||
@@ -562,3 +562,3 @@ shade40: '#182047', | ||
}; | ||
var navy = { | ||
const navy = { | ||
shade50: '#00061d', | ||
@@ -577,3 +577,3 @@ shade40: '#000c36', | ||
}; | ||
var lavender = { | ||
const lavender = { | ||
shade50: '#120f25', | ||
@@ -592,3 +592,3 @@ shade40: '#221d46', | ||
}; | ||
var purple = { | ||
const purple = { | ||
shade50: '#0f0717', | ||
@@ -607,3 +607,3 @@ shade40: '#1c0e2b', | ||
}; | ||
var darkPurple = { | ||
const darkPurple = { | ||
shade50: '#0a0411', | ||
@@ -622,3 +622,3 @@ shade40: '#130820', | ||
}; | ||
var orchid = { | ||
const orchid = { | ||
shade50: '#16101d', | ||
@@ -637,3 +637,3 @@ shade40: '#281e37', | ||
}; | ||
var grape = { | ||
const grape = { | ||
shade50: '#160418', | ||
@@ -652,3 +652,3 @@ shade40: '#29072e', | ||
}; | ||
var berry = { | ||
const berry = { | ||
shade50: '#1f091d', | ||
@@ -667,3 +667,3 @@ shade40: '#3a1136', | ||
}; | ||
var lilac = { | ||
const lilac = { | ||
shade50: '#1c0b1f', | ||
@@ -682,3 +682,3 @@ shade40: '#35153a', | ||
}; | ||
var pink = { | ||
const pink = { | ||
shade50: '#24091b', | ||
@@ -697,3 +697,3 @@ shade40: '#441232', | ||
}; | ||
var hotPink = { | ||
const hotPink = { | ||
shade50: '#240016', | ||
@@ -712,3 +712,3 @@ shade40: '#44002a', | ||
}; | ||
var magenta = { | ||
const magenta = { | ||
shade50: '#1f0013', | ||
@@ -727,3 +727,3 @@ shade40: '#390024', | ||
}; | ||
var plum = { | ||
const plum = { | ||
shade50: '#13000c', | ||
@@ -742,3 +742,3 @@ shade40: '#240017', | ||
}; | ||
var beige = { | ||
const beige = { | ||
shade50: '#141313', | ||
@@ -757,3 +757,3 @@ shade40: '#252323', | ||
}; | ||
var mink = { | ||
const mink = { | ||
shade50: '#0f0e0e', | ||
@@ -772,3 +772,3 @@ shade40: '#1c1b1a', | ||
}; | ||
var silver = { | ||
const silver = { | ||
shade50: '#151818', | ||
@@ -787,3 +787,3 @@ shade40: '#282d2e', | ||
}; | ||
var platinum = { | ||
const platinum = { | ||
shade50: '#111314', | ||
@@ -802,3 +802,3 @@ shade40: '#1f2426', | ||
}; | ||
var anchor = { | ||
const anchor = { | ||
shade50: '#090a0b', | ||
@@ -817,67 +817,67 @@ shade40: '#111315', | ||
}; | ||
var charcoal = { | ||
shade50: '#130204', | ||
shade40: '#230308', | ||
shade30: '#420610', | ||
shade20: '#590815', | ||
shade10: '#690a19', | ||
primary: '#750b1c', | ||
tint10: '#861b2c', | ||
tint20: '#962f3f', | ||
tint30: '#ac4f5e', | ||
tint40: '#d69ca5', | ||
tint50: '#e9c7cd', | ||
tint60: '#f9f0f2' | ||
const charcoal = { | ||
shade50: '#090909', | ||
shade40: '#111111', | ||
shade30: '#202020', | ||
shade20: '#2b2b2b', | ||
shade10: '#333333', | ||
primary: '#393939', | ||
tint10: '#515151', | ||
tint20: '#686868', | ||
tint30: '#888888', | ||
tint40: '#c4c4c4', | ||
tint50: '#dfdfdf', | ||
tint60: '#f7f7f7' | ||
}; | ||
exports.sharedColors = { | ||
darkRed: darkRed, | ||
burgundy: burgundy, | ||
cranberry: cranberry, | ||
red: red, | ||
darkOrange: darkOrange, | ||
bronze: bronze, | ||
pumpkin: pumpkin, | ||
orange: orange, | ||
peach: peach, | ||
marigold: marigold, | ||
yellow: yellow, | ||
gold: gold, | ||
brass: brass, | ||
brown: brown, | ||
darkBrown: darkBrown, | ||
lime: lime, | ||
forest: forest, | ||
seafoam: seafoam, | ||
lightGreen: lightGreen, | ||
green: green, | ||
darkGreen: darkGreen, | ||
lightTeal: lightTeal, | ||
teal: teal, | ||
darkTeal: darkTeal, | ||
cyan: cyan, | ||
steel: steel, | ||
lightBlue: lightBlue, | ||
blue: blue, | ||
royalBlue: royalBlue, | ||
darkBlue: darkBlue, | ||
cornflower: cornflower, | ||
navy: navy, | ||
lavender: lavender, | ||
purple: purple, | ||
darkPurple: darkPurple, | ||
orchid: orchid, | ||
grape: grape, | ||
berry: berry, | ||
lilac: lilac, | ||
pink: pink, | ||
hotPink: hotPink, | ||
magenta: magenta, | ||
plum: plum, | ||
beige: beige, | ||
mink: mink, | ||
silver: silver, | ||
platinum: platinum, | ||
anchor: anchor, | ||
charcoal: charcoal | ||
darkRed, | ||
burgundy, | ||
cranberry, | ||
red, | ||
darkOrange, | ||
bronze, | ||
pumpkin, | ||
orange, | ||
peach, | ||
marigold, | ||
yellow, | ||
gold, | ||
brass, | ||
brown, | ||
darkBrown, | ||
lime, | ||
forest, | ||
seafoam, | ||
lightGreen, | ||
green, | ||
darkGreen, | ||
lightTeal, | ||
teal, | ||
darkTeal, | ||
cyan, | ||
steel, | ||
lightBlue, | ||
blue, | ||
royalBlue, | ||
darkBlue, | ||
cornflower, | ||
navy, | ||
lavender, | ||
purple, | ||
darkPurple, | ||
orchid, | ||
grape, | ||
berry, | ||
lilac, | ||
pink, | ||
hotPink, | ||
magenta, | ||
plum, | ||
beige, | ||
mink, | ||
silver, | ||
platinum, | ||
anchor, | ||
charcoal | ||
}; | ||
//# sourceMappingURL=colors.js.map |
@@ -7,3 +7,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -10,0 +10,0 @@ tslib_1.__exportStar(require("./colors"), exports); |
export * from './themes/index'; | ||
export * from './utils/index'; | ||
export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types'; | ||
export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types'; |
@@ -7,3 +7,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -10,0 +10,0 @@ tslib_1.__exportStar(require("./themes/index"), exports); |
@@ -7,3 +7,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -10,0 +10,0 @@ tslib_1.__exportStar(require("./teams/index"), exports); |
@@ -8,7 +8,7 @@ "use strict"; | ||
var createTeamsDarkTheme_1 = /*#__PURE__*/require("../../utils/createTeamsDarkTheme"); | ||
const createTeamsDarkTheme_1 = /*#__PURE__*/require("../../utils/createTeamsDarkTheme"); | ||
var brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
const brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
exports.teamsDarkTheme = /*#__PURE__*/createTeamsDarkTheme_1.createTeamsDarkTheme(brandColors_1.brandTeams); | ||
//# sourceMappingURL=darkTheme.js.map |
@@ -8,5 +8,5 @@ "use strict"; | ||
var createHighContrastTheme_1 = /*#__PURE__*/require("../../utils/createHighContrastTheme"); | ||
const createHighContrastTheme_1 = /*#__PURE__*/require("../../utils/createHighContrastTheme"); | ||
exports.teamsHighContrastTheme = /*#__PURE__*/createHighContrastTheme_1.createHighContrastTheme(); | ||
//# sourceMappingURL=highContrastTheme.js.map |
@@ -7,3 +7,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -10,0 +10,0 @@ tslib_1.__exportStar(require("./lightTheme"), exports); |
@@ -8,7 +8,7 @@ "use strict"; | ||
var createLightTheme_1 = /*#__PURE__*/require("../../utils/createLightTheme"); | ||
const createLightTheme_1 = /*#__PURE__*/require("../../utils/createLightTheme"); | ||
var brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
const brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
exports.teamsLightTheme = /*#__PURE__*/createLightTheme_1.createLightTheme(brandColors_1.brandTeams); | ||
//# sourceMappingURL=lightTheme.js.map |
@@ -8,7 +8,7 @@ "use strict"; | ||
var createDarkTheme_1 = /*#__PURE__*/require("../../utils/createDarkTheme"); | ||
const createDarkTheme_1 = /*#__PURE__*/require("../../utils/createDarkTheme"); | ||
var brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
const brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
exports.webDarkTheme = /*#__PURE__*/createDarkTheme_1.createDarkTheme(brandColors_1.brandWeb); | ||
//# sourceMappingURL=darkTheme.js.map |
@@ -8,5 +8,5 @@ "use strict"; | ||
var createHighContrastTheme_1 = /*#__PURE__*/require("../../utils/createHighContrastTheme"); | ||
const createHighContrastTheme_1 = /*#__PURE__*/require("../../utils/createHighContrastTheme"); | ||
exports.webHighContrastTheme = /*#__PURE__*/createHighContrastTheme_1.createHighContrastTheme(); | ||
//# sourceMappingURL=highContrastTheme.js.map |
@@ -7,3 +7,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -10,0 +10,0 @@ tslib_1.__exportStar(require("./lightTheme"), exports); |
@@ -8,7 +8,7 @@ "use strict"; | ||
var createLightTheme_1 = /*#__PURE__*/require("../../utils/createLightTheme"); | ||
const createLightTheme_1 = /*#__PURE__*/require("../../utils/createLightTheme"); | ||
var brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
const brandColors_1 = /*#__PURE__*/require("../../global/brandColors"); | ||
exports.webLightTheme = /*#__PURE__*/createLightTheme_1.createLightTheme(brandColors_1.brandWeb); | ||
//# sourceMappingURL=lightTheme.js.map |
@@ -6,2 +6,5 @@ /** | ||
colorNeutralForeground1: string; | ||
colorNeutralForeground1Hover: string; | ||
colorNeutralForeground1Pressed: string; | ||
colorNeutralForeground1Selected: string; | ||
colorNeutralForeground2: string; | ||
@@ -23,2 +26,3 @@ colorNeutralForeground2Hover: string; | ||
colorNeutralForegroundDisabled: string; | ||
colorNeutralForegroundInvertedDisabled: string; | ||
colorBrandForegroundLink: string; | ||
@@ -34,2 +38,5 @@ colorBrandForegroundLinkHover: string; | ||
colorNeutralForegroundInverted: string; | ||
colorNeutralForegroundInvertedHover: string; | ||
colorNeutralForegroundInvertedPressed: string; | ||
colorNeutralForegroundInvertedSelected: string; | ||
colorNeutralForegroundOnBrand: string; | ||
@@ -40,2 +47,9 @@ colorNeutralForegroundInvertedLink: string; | ||
colorNeutralForegroundInvertedLinkSelected: string; | ||
colorBrandForegroundInverted: string; | ||
colorBrandForegroundInvertedHover: string; | ||
colorBrandForegroundInvertedPressed: string; | ||
colorBrandForegroundOnLight: string; | ||
colorBrandForegroundOnLightHover: string; | ||
colorBrandForegroundOnLightPressed: string; | ||
colorBrandForegroundOnLightSelected: string; | ||
colorNeutralBackground1: string; | ||
@@ -67,2 +81,9 @@ colorNeutralBackground1Hover: string; | ||
colorSubtleBackgroundSelected: string; | ||
colorSubtleBackgroundLightAlphaHover: string; | ||
colorSubtleBackgroundLightAlphaPressed: string; | ||
colorSubtleBackgroundLightAlphaSelected: string; | ||
colorSubtleBackgroundInverted: string; | ||
colorSubtleBackgroundInvertedHover: string; | ||
colorSubtleBackgroundInvertedPressed: string; | ||
colorSubtleBackgroundInvertedSelected: string; | ||
colorTransparentBackground: string; | ||
@@ -73,2 +94,3 @@ colorTransparentBackgroundHover: string; | ||
colorNeutralBackgroundDisabled: string; | ||
colorNeutralBackgroundInvertedDisabled: string; | ||
colorNeutralStencil1: string; | ||
@@ -85,2 +107,6 @@ colorNeutralStencil2: string; | ||
colorBrandBackground2: string; | ||
colorBrandBackgroundInverted: string; | ||
colorBrandBackgroundInvertedHover: string; | ||
colorBrandBackgroundInvertedPressed: string; | ||
colorBrandBackgroundInvertedSelected: string; | ||
colorNeutralStrokeAccessible: string; | ||
@@ -96,2 +122,7 @@ colorNeutralStrokeAccessibleHover: string; | ||
colorNeutralStroke3: string; | ||
colorNeutralStrokeOnBrand: string; | ||
colorNeutralStrokeOnBrand2: string; | ||
colorNeutralStrokeOnBrand2Hover: string; | ||
colorNeutralStrokeOnBrand2Pressed: string; | ||
colorNeutralStrokeOnBrand2Selected: string; | ||
colorBrandStroke1: string; | ||
@@ -103,2 +134,3 @@ colorBrandStroke2: string; | ||
colorNeutralStrokeDisabled: string; | ||
colorNeutralStrokeInvertedDisabled: string; | ||
colorTransparentStroke: string; | ||
@@ -118,51 +150,51 @@ colorTransparentStrokeInteractive: string; | ||
}; | ||
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder2'; | ||
export declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder2'; | ||
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder2'; | ||
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder2'; | ||
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder2'; | ||
export declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder2'; | ||
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder2'; | ||
export declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder2'; | ||
export declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder2'; | ||
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder2'; | ||
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder2'; | ||
export declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder2'; | ||
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder2'; | ||
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder2'; | ||
export declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder2'; | ||
export declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder2'; | ||
export declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder2'; | ||
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder2'; | ||
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder2'; | ||
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder2'; | ||
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder2'; | ||
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder2'; | ||
export declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder2'; | ||
export declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder2'; | ||
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder2'; | ||
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder2'; | ||
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder2'; | ||
export declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder2'; | ||
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder2'; | ||
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder2'; | ||
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder2'; | ||
export declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder2'; | ||
export declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder2'; | ||
export declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder2'; | ||
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder2'; | ||
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder2'; | ||
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder2'; | ||
export declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder2'; | ||
export declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder2'; | ||
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder2'; | ||
export declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder2'; | ||
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder2'; | ||
export declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder2'; | ||
export declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder2'; | ||
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder2'; | ||
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder2'; | ||
export declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder2'; | ||
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder1' | 'colorPaletteDarkRedBorder2'; | ||
export declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder1' | 'colorPaletteBurgundyBorder2'; | ||
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder1' | 'colorPaletteCranberryBorder2'; | ||
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2'; | ||
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2'; | ||
export declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder1' | 'colorPaletteBronzeBorder2'; | ||
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder1' | 'colorPalettePumpkinBorder2'; | ||
export declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder1' | 'colorPaletteOrangeBorder2'; | ||
export declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder1' | 'colorPalettePeachBorder2'; | ||
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2'; | ||
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2'; | ||
export declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder1' | 'colorPaletteGoldBorder2'; | ||
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder1' | 'colorPaletteBrassBorder2'; | ||
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder1' | 'colorPaletteBrownBorder2'; | ||
export declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder1' | 'colorPaletteDarkBrownBorder2'; | ||
export declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder1' | 'colorPaletteLimeBorder2'; | ||
export declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder1' | 'colorPaletteForestBorder2'; | ||
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder1' | 'colorPaletteSeafoamBorder2'; | ||
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2'; | ||
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2'; | ||
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder1' | 'colorPaletteDarkGreenBorder2'; | ||
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder1' | 'colorPaletteLightTealBorder2'; | ||
export declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder1' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder1' | 'colorPaletteDarkTealBorder2'; | ||
export declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder1' | 'colorPaletteCyanBorder2'; | ||
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder1' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder1' | 'colorPaletteLightBlueBorder2'; | ||
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder1' | 'colorPaletteBlueBorder2'; | ||
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder1' | 'colorPaletteRoyalBlueBorder2'; | ||
export declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder1' | 'colorPaletteDarkBlueBorder2'; | ||
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder1' | 'colorPaletteCornflowerBorder2'; | ||
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder1' | 'colorPaletteNavyBorder2'; | ||
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder1' | 'colorPaletteLavenderBorder2'; | ||
export declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder1' | 'colorPalettePurpleBorder2'; | ||
export declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder1' | 'colorPaletteDarkPurpleBorder2'; | ||
export declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder1' | 'colorPaletteOrchidBorder2'; | ||
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder1' | 'colorPaletteGrapeBorder2'; | ||
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2'; | ||
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder1' | 'colorPaletteLilacBorder2'; | ||
export declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder1' | 'colorPalettePinkBorder2'; | ||
export declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder1' | 'colorPaletteHotPinkBorder2'; | ||
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder1' | 'colorPaletteMagentaBorder2'; | ||
export declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder1' | 'colorPalettePlumBorder2'; | ||
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder1' | 'colorPaletteBeigeBorder2'; | ||
export declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder1' | 'colorPaletteMinkBorder2'; | ||
export declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder1' | 'colorPaletteSilverBorder2'; | ||
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder1' | 'colorPalettePlatinumBorder2'; | ||
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder1' | 'colorPaletteAnchorBorder2'; | ||
export declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder1' | 'colorPaletteCharcoalBorder2'; | ||
export declare type ColorPaletteTokens = Record<ColorPaletteDarkRed | ColorPaletteBurgundy | ColorPaletteCranberry | ColorPaletteRed | ColorPaletteDarkOrange | ColorPaletteBronze | ColorPalettePumpkin | ColorPaletteOrange | ColorPalettePeach | ColorPaletteMarigold | ColorPaletteYellow | ColorPaletteGold | ColorPaletteBrass | ColorPaletteBrown | ColorPaletteDarkBrown | ColorPaletteLime | ColorPaletteForest | ColorPaletteSeafoam | ColorPaletteLightGreen | ColorPaletteGreen | ColorPaletteDarkGreen | ColorPaletteLightTeal | ColorPaletteTeal | ColorPaletteDarkTeal | ColorPaletteCyan | ColorPaletteSteel | ColorPaletteLightBlue | ColorPaletteBlue | ColorPaletteRoyalBlue | ColorPaletteDarkBlue | ColorPaletteCornflower | ColorPaletteNavy | ColorPaletteLavender | ColorPalettePurple | ColorPaletteDarkPurple | ColorPaletteOrchid | ColorPaletteGrape | ColorPaletteBerry | ColorPaletteLilac | ColorPalettePink | ColorPaletteHotPink | ColorPaletteMagenta | ColorPalettePlum | ColorPaletteBeige | ColorPaletteMink | ColorPaletteSilver | ColorPalettePlatinum | ColorPaletteAnchor | ColorPaletteCharcoal, string>; | ||
@@ -186,5 +218,4 @@ /** | ||
}; | ||
export declare type BrandVariants = ColorVariants & { | ||
shade60: string; | ||
}; | ||
export declare type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160; | ||
export declare type BrandVariants = Record<Brands, string>; | ||
/** | ||
@@ -310,30 +341,13 @@ * All the global shared colors and their shade/tint variants | ||
}; | ||
export declare type GhostColorTokens = { | ||
ghostBackground: string; | ||
ghostBackgroundHover: string; | ||
ghostBackgroundPressed: string; | ||
ghostBackgroundSelected: string; | ||
export declare type ShadowBrandTokens = { | ||
shadow2Brand: string; | ||
shadow4Brand: string; | ||
shadow8Brand: string; | ||
shadow16Brand: string; | ||
shadow28Brand: string; | ||
shadow64Brand: string; | ||
}; | ||
export declare type TransparentColorTokens = { | ||
transparentBackground: string; | ||
transparentBackgroundHover: string; | ||
transparentBackgroundPressed: string; | ||
transparentBackgroundSelected: string; | ||
}; | ||
export declare type BackgroundColorTokens = { | ||
background: string; | ||
backgroundHover: string; | ||
backgroundPressed: string; | ||
backgroundSelected: string; | ||
}; | ||
export declare type BrandColorTokens = { | ||
brandBackground: string; | ||
brandBackgroundHover: string; | ||
brandBackgroundPressed: string; | ||
brandBackgroundSelected: string; | ||
brandBackgroundStatic: string; | ||
}; | ||
export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100; | ||
export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare type PartialTheme = Partial<Theme>; |
@@ -8,13 +8,21 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const dark_1 = /*#__PURE__*/require("../alias/dark"); | ||
var dark_1 = /*#__PURE__*/require("../alias/dark"); | ||
const index_1 = /*#__PURE__*/require("../global/index"); | ||
var index_1 = /*#__PURE__*/require("../global/index"); | ||
const shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var createDarkTheme = function (brand) { | ||
var colorTokens = dark_1.generateColorTokens(brand); | ||
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, index_1.borderRadius), index_1.fontSizes), index_1.lineHeights), index_1.fontFamilies), index_1.fontWeights), index_1.strokeWidths), colorTokens), dark_1.colorPaletteTokens), shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
const createDarkTheme = brand => { | ||
const colorTokens = dark_1.generateColorTokens(brand); | ||
return { ...index_1.borderRadius, | ||
...index_1.fontSizes, | ||
...index_1.lineHeights, | ||
...index_1.fontFamilies, | ||
...index_1.fontWeights, | ||
...index_1.strokeWidths, | ||
...colorTokens, | ||
...dark_1.colorPaletteTokens, | ||
...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
@@ -21,0 +29,0 @@ |
@@ -8,13 +8,21 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const highContrast_1 = /*#__PURE__*/require("../alias/highContrast"); | ||
var highContrast_1 = /*#__PURE__*/require("../alias/highContrast"); | ||
const index_1 = /*#__PURE__*/require("../global/index"); | ||
var index_1 = /*#__PURE__*/require("../global/index"); | ||
const shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var createHighContrastTheme = function () { | ||
var colorTokens = highContrast_1.generateColorTokens(); | ||
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, index_1.borderRadius), index_1.fontSizes), index_1.lineHeights), index_1.fontFamilies), index_1.fontWeights), index_1.strokeWidths), colorTokens), highContrast_1.colorPaletteTokens), shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
const createHighContrastTheme = () => { | ||
const colorTokens = highContrast_1.generateColorTokens(); | ||
return { ...index_1.borderRadius, | ||
...index_1.fontSizes, | ||
...index_1.lineHeights, | ||
...index_1.fontFamilies, | ||
...index_1.fontWeights, | ||
...index_1.strokeWidths, | ||
...colorTokens, | ||
...highContrast_1.colorPaletteTokens, | ||
...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
@@ -21,0 +29,0 @@ |
@@ -8,13 +8,21 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const light_1 = /*#__PURE__*/require("../alias/light"); | ||
var light_1 = /*#__PURE__*/require("../alias/light"); | ||
const index_1 = /*#__PURE__*/require("../global/index"); | ||
var index_1 = /*#__PURE__*/require("../global/index"); | ||
const shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var createLightTheme = function (brand) { | ||
var colorTokens = light_1.generateColorTokens(brand); | ||
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, index_1.borderRadius), index_1.fontSizes), index_1.lineHeights), index_1.fontFamilies), index_1.fontWeights), index_1.strokeWidths), colorTokens), light_1.colorPaletteTokens), shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
const createLightTheme = brand => { | ||
const colorTokens = light_1.generateColorTokens(brand); | ||
return { ...index_1.borderRadius, | ||
...index_1.fontSizes, | ||
...index_1.lineHeights, | ||
...index_1.fontFamilies, | ||
...index_1.fontWeights, | ||
...index_1.strokeWidths, | ||
...colorTokens, | ||
...light_1.colorPaletteTokens, | ||
...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
@@ -21,0 +29,0 @@ |
@@ -8,13 +8,21 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const teamsDark_1 = /*#__PURE__*/require("../alias/teamsDark"); | ||
var teamsDark_1 = /*#__PURE__*/require("../alias/teamsDark"); | ||
const index_1 = /*#__PURE__*/require("../global/index"); | ||
var index_1 = /*#__PURE__*/require("../global/index"); | ||
const shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var shadows_1 = /*#__PURE__*/require("./shadows"); | ||
var createTeamsDarkTheme = function (brand) { | ||
var colorTokens = teamsDark_1.generateColorTokens(brand); | ||
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, index_1.borderRadius), index_1.fontSizes), index_1.lineHeights), index_1.fontFamilies), index_1.fontWeights), index_1.strokeWidths), colorTokens), teamsDark_1.colorPaletteTokens), shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
const createTeamsDarkTheme = brand => { | ||
const colorTokens = teamsDark_1.generateColorTokens(brand); | ||
return { ...index_1.borderRadius, | ||
...index_1.fontSizes, | ||
...index_1.lineHeights, | ||
...index_1.fontFamilies, | ||
...index_1.fontWeights, | ||
...index_1.strokeWidths, | ||
...colorTokens, | ||
...teamsDark_1.colorPaletteTokens, | ||
...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
@@ -21,0 +29,0 @@ |
@@ -6,2 +6,1 @@ export * from './createLightTheme'; | ||
export { mergeThemes } from './mergeThemes'; | ||
export * from './themeToCSSVariables'; |
@@ -8,3 +8,3 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
const tslib_1 = /*#__PURE__*/require("tslib"); | ||
@@ -27,4 +27,2 @@ tslib_1.__exportStar(require("./createLightTheme"), exports); | ||
}); | ||
tslib_1.__exportStar(require("./themeToCSSVariables"), exports); | ||
//# sourceMappingURL=index.js.map |
@@ -8,8 +8,8 @@ "use strict"; | ||
var tslib_1 = /*#__PURE__*/require("tslib"); | ||
function mergeThemes(a, b) { | ||
// Merge impacts perf: we should like to avoid it if it's possible | ||
if (a && b) { | ||
return tslib_1.__assign(tslib_1.__assign({}, a), b); | ||
return { ...a, | ||
...b | ||
}; | ||
} | ||
@@ -16,0 +16,0 @@ |
@@ -1,2 +0,3 @@ | ||
import type { ShadowTokens } from '../types'; | ||
import type { ShadowBrandTokens, ShadowTokens } from '../types'; | ||
export declare function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens; | ||
export declare function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens; |
@@ -8,10 +8,10 @@ "use strict"; | ||
function createShadowTokens(ambientColor, keyColor) { | ||
function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') { | ||
return { | ||
shadow2: "0 0 2px " + ambientColor + ", 0 1px 2px " + keyColor, | ||
shadow4: "0 0 2px " + ambientColor + ", 0 2px 4px " + keyColor, | ||
shadow8: "0 0 2px " + ambientColor + ", 0 4px 8px " + keyColor, | ||
shadow16: "0 0 2px " + ambientColor + ", 0 6px 16px " + keyColor, | ||
shadow28: "0 0 8px " + ambientColor + ", 0 14px 28px " + keyColor, | ||
shadow64: "0 0 8px " + ambientColor + ", 0 32px 64px " + keyColor | ||
[`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`, | ||
[`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`, | ||
[`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`, | ||
[`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`, | ||
[`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`, | ||
[`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}` | ||
}; | ||
@@ -18,0 +18,0 @@ } |
@@ -1,117 +0,157 @@ | ||
import { __assign } from "tslib"; | ||
import { black, grey, white, sharedColors } from '../global/colors'; | ||
export var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: white, | ||
colorNeutralForeground2: grey[84], | ||
colorNeutralForeground2Hover: white, | ||
colorNeutralForeground2Pressed: white, | ||
colorNeutralForeground2Selected: white, | ||
colorNeutralForeground2BrandHover: brand.tint20, | ||
colorNeutralForeground2BrandPressed: brand.tint10, | ||
colorNeutralForeground2BrandSelected: brand.tint20, | ||
colorNeutralForeground3: grey[68], | ||
colorNeutralForeground3Hover: grey[84], | ||
colorNeutralForeground3Pressed: grey[84], | ||
colorNeutralForeground3Selected: grey[84], | ||
colorNeutralForeground3BrandHover: brand.tint20, | ||
colorNeutralForeground3BrandPressed: brand.tint10, | ||
colorNeutralForeground3BrandSelected: brand.tint20, | ||
colorNeutralForeground4: grey[60], | ||
colorNeutralForegroundDisabled: grey[36], | ||
colorBrandForegroundLink: brand.tint10, | ||
colorBrandForegroundLinkHover: brand.tint30, | ||
colorBrandForegroundLinkPressed: brand.tint20, | ||
colorBrandForegroundLinkSelected: brand.tint10, | ||
colorCompoundBrandForeground1: brand.tint10, | ||
colorCompoundBrandForeground1Hover: brand.tint20, | ||
colorCompoundBrandForeground1Pressed: brand.primary, | ||
colorBrandForeground1: brand.tint20, | ||
colorBrandForeground2: brand.tint30, | ||
colorNeutralForegroundInverted: grey[14], | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorNeutralBackground1: grey[16], | ||
colorNeutralBackground1Hover: grey[24], | ||
colorNeutralBackground1Pressed: grey[12], | ||
colorNeutralBackground1Selected: grey[22], | ||
colorNeutralBackground2: grey[12], | ||
colorNeutralBackground2Hover: grey[20], | ||
colorNeutralBackground2Pressed: grey[8], | ||
colorNeutralBackground2Selected: grey[18], | ||
colorNeutralBackground3: grey[8], | ||
colorNeutralBackground3Hover: grey[16], | ||
colorNeutralBackground3Pressed: grey[4], | ||
colorNeutralBackground3Selected: grey[14], | ||
colorNeutralBackground4: grey[4], | ||
colorNeutralBackground4Hover: grey[12], | ||
colorNeutralBackground4Pressed: black, | ||
colorNeutralBackground4Selected: grey[10], | ||
colorNeutralBackground5: black, | ||
colorNeutralBackground5Hover: grey[8], | ||
colorNeutralBackground5Pressed: grey[2], | ||
colorNeutralBackground5Selected: grey[6], | ||
colorNeutralBackground6: grey[20], | ||
colorNeutralBackgroundInverted: white, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[22], | ||
colorSubtleBackgroundPressed: grey[18], | ||
colorSubtleBackgroundSelected: grey[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[8], | ||
colorNeutralStencil1: grey[20], | ||
colorNeutralStencil2: grey[34], | ||
colorBrandBackground: brand.shade10, | ||
colorBrandBackgroundHover: brand.primary, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.tint10, | ||
colorCompoundBrandBackgroundHover: brand.tint20, | ||
colorCompoundBrandBackgroundPressed: brand.primary, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.shade40, | ||
colorNeutralStrokeAccessible: grey[68], | ||
colorNeutralStrokeAccessibleHover: grey[74], | ||
colorNeutralStrokeAccessiblePressed: grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand.tint20, | ||
colorNeutralStroke1: grey[40], | ||
colorNeutralStroke1Hover: grey[46], | ||
colorNeutralStroke1Pressed: grey[42], | ||
colorNeutralStroke1Selected: grey[44], | ||
colorNeutralStroke2: grey[32], | ||
colorNeutralStroke3: grey[24], | ||
colorBrandStroke1: brand.tint10, | ||
colorBrandStroke2: brand.shade30, | ||
colorCompoundBrandStroke: brand.tint10, | ||
colorCompoundBrandStrokeHover: brand.tint20, | ||
colorCompoundBrandStrokePressed: brand.primary, | ||
colorNeutralStrokeDisabled: grey[26], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: black, | ||
colorStrokeFocus2: white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors'; | ||
export const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: white, | ||
colorNeutralForeground1Hover: white, | ||
colorNeutralForeground1Pressed: white, | ||
colorNeutralForeground1Selected: white, | ||
colorNeutralForeground2: grey[84], | ||
colorNeutralForeground2Hover: white, | ||
colorNeutralForeground2Pressed: white, | ||
colorNeutralForeground2Selected: white, | ||
colorNeutralForeground2BrandHover: brand[100], | ||
colorNeutralForeground2BrandPressed: brand[90], | ||
colorNeutralForeground2BrandSelected: brand[100], | ||
colorNeutralForeground3: grey[68], | ||
colorNeutralForeground3Hover: grey[84], | ||
colorNeutralForeground3Pressed: grey[84], | ||
colorNeutralForeground3Selected: grey[84], | ||
colorNeutralForeground3BrandHover: brand[100], | ||
colorNeutralForeground3BrandPressed: brand[90], | ||
colorNeutralForeground3BrandSelected: brand[100], | ||
colorNeutralForeground4: grey[60], | ||
colorNeutralForegroundDisabled: grey[36], | ||
colorNeutralForegroundInvertedDisabled: whiteAlpha[40], | ||
colorBrandForegroundLink: brand[90], | ||
colorBrandForegroundLinkHover: brand[110], | ||
colorBrandForegroundLinkPressed: brand[100], | ||
colorBrandForegroundLinkSelected: brand[90], | ||
colorCompoundBrandForeground1: brand[90], | ||
colorCompoundBrandForeground1Hover: brand[100], | ||
colorCompoundBrandForeground1Pressed: brand[80], | ||
colorBrandForeground1: brand[100], | ||
colorBrandForeground2: brand[110], | ||
colorNeutralForegroundInverted: white, | ||
colorNeutralForegroundInvertedHover: white, | ||
colorNeutralForegroundInvertedPressed: white, | ||
colorNeutralForegroundInvertedSelected: white, | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: grey[16], | ||
colorNeutralBackground1Hover: grey[24], | ||
colorNeutralBackground1Pressed: grey[12], | ||
colorNeutralBackground1Selected: grey[22], | ||
colorNeutralBackground2: grey[12], | ||
colorNeutralBackground2Hover: grey[20], | ||
colorNeutralBackground2Pressed: grey[8], | ||
colorNeutralBackground2Selected: grey[18], | ||
colorNeutralBackground3: grey[8], | ||
colorNeutralBackground3Hover: grey[16], | ||
colorNeutralBackground3Pressed: grey[4], | ||
colorNeutralBackground3Selected: grey[14], | ||
colorNeutralBackground4: grey[4], | ||
colorNeutralBackground4Hover: grey[12], | ||
colorNeutralBackground4Pressed: black, | ||
colorNeutralBackground4Selected: grey[10], | ||
colorNeutralBackground5: black, | ||
colorNeutralBackground5Hover: grey[8], | ||
colorNeutralBackground5Pressed: grey[2], | ||
colorNeutralBackground5Selected: grey[6], | ||
colorNeutralBackground6: grey[20], | ||
colorNeutralBackgroundInverted: grey[24], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[22], | ||
colorSubtleBackgroundPressed: grey[18], | ||
colorSubtleBackgroundSelected: grey[20], | ||
colorSubtleBackgroundLightAlphaHover: whiteAlpha[10], | ||
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[8], | ||
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], | ||
colorNeutralStencil1: grey[20], | ||
colorNeutralStencil2: grey[34], | ||
colorBrandBackground: brand[70], | ||
colorBrandBackgroundHover: brand[80], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[90], | ||
colorCompoundBrandBackgroundHover: brand[100], | ||
colorCompoundBrandBackgroundPressed: brand[80], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[40], | ||
colorBrandBackgroundInverted: white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: grey[68], | ||
colorNeutralStrokeAccessibleHover: grey[74], | ||
colorNeutralStrokeAccessiblePressed: grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand[100], | ||
colorNeutralStroke1: grey[40], | ||
colorNeutralStroke1Hover: grey[46], | ||
colorNeutralStroke1Pressed: grey[42], | ||
colorNeutralStroke1Selected: grey[44], | ||
colorNeutralStroke2: grey[32], | ||
colorNeutralStroke3: grey[24], | ||
colorNeutralStrokeOnBrand: grey[16], | ||
colorNeutralStrokeOnBrand2: white, | ||
colorNeutralStrokeOnBrand2Hover: white, | ||
colorNeutralStrokeOnBrand2Pressed: white, | ||
colorNeutralStrokeOnBrand2Selected: white, | ||
colorBrandStroke1: brand[90], | ||
colorBrandStroke2: brand[50], | ||
colorCompoundBrandStroke: brand[90], | ||
colorCompoundBrandStrokeHover: brand[100], | ||
colorCompoundBrandStrokePressed: brand[80], | ||
colorNeutralStrokeDisabled: grey[26], | ||
colorNeutralStrokeInvertedDisabled: whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: black, | ||
colorStrokeFocus2: white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
}); | ||
export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: sharedColors[sharedColor].shade40, | ||
[`colorPalette${color}Background2`]: sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Foreground2`]: sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Foreground3`]: sharedColors[sharedColor].tint20, | ||
[`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Border1`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20 | ||
}; | ||
}; | ||
export var colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = sharedColors[sharedColor].shade40, _a["colorPalette" + color + "Background2"] = sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Background3"] = sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Foreground2"] = sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Foreground3"] = sharedColors[sharedColor].tint20, _a["colorPalette" + color + "BorderActive"] = sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Border2"] = sharedColors[sharedColor].tint20, _a); | ||
return __assign(__assign({}, acc), sharedColorTokens); | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=dark.js.map |
@@ -1,117 +0,157 @@ | ||
import { __assign } from "tslib"; | ||
import { hcCanvasText, hcHighlightText, hcDisabled, hcHyperlink, hcHighlight, hcButtonText, hcCanvas, hcButtonFace, grey, sharedColors, white, black } from '../global/colors'; | ||
export var generateColorTokens = function () { | ||
return { | ||
colorNeutralForeground1: hcCanvasText, | ||
colorNeutralForeground2: hcCanvasText, | ||
colorNeutralForeground2Hover: hcHighlightText, | ||
colorNeutralForeground2Pressed: hcHighlightText, | ||
colorNeutralForeground2Selected: hcHighlightText, | ||
colorNeutralForeground2BrandHover: hcHighlightText, | ||
colorNeutralForeground2BrandPressed: hcHighlightText, | ||
colorNeutralForeground2BrandSelected: hcHighlightText, | ||
colorNeutralForeground3: hcCanvasText, | ||
colorNeutralForeground3Hover: hcHighlightText, | ||
colorNeutralForeground3Pressed: hcHighlightText, | ||
colorNeutralForeground3Selected: hcHighlightText, | ||
colorNeutralForeground3BrandHover: hcHighlightText, | ||
colorNeutralForeground3BrandPressed: hcHighlightText, | ||
colorNeutralForeground3BrandSelected: hcHighlightText, | ||
colorNeutralForeground4: hcCanvasText, | ||
colorNeutralForegroundDisabled: hcDisabled, | ||
colorBrandForegroundLink: hcHyperlink, | ||
colorBrandForegroundLinkHover: hcHyperlink, | ||
colorBrandForegroundLinkPressed: hcHyperlink, | ||
colorBrandForegroundLinkSelected: hcHyperlink, | ||
colorCompoundBrandForeground1: hcHighlight, | ||
colorCompoundBrandForeground1Hover: hcHighlight, | ||
colorCompoundBrandForeground1Pressed: hcHighlight, | ||
colorBrandForeground1: hcCanvasText, | ||
colorBrandForeground2: hcButtonText, | ||
colorNeutralForegroundInverted: hcCanvas, | ||
colorNeutralForegroundOnBrand: hcButtonText, | ||
colorNeutralForegroundInvertedLink: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkHover: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkPressed: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkSelected: hcHyperlink, | ||
colorNeutralBackground1: hcCanvas, | ||
colorNeutralBackground1Hover: hcHighlight, | ||
colorNeutralBackground1Pressed: hcHighlight, | ||
colorNeutralBackground1Selected: hcHighlight, | ||
colorNeutralBackground2: hcCanvas, | ||
colorNeutralBackground2Hover: hcHighlight, | ||
colorNeutralBackground2Pressed: hcHighlight, | ||
colorNeutralBackground2Selected: hcHighlight, | ||
colorNeutralBackground3: hcCanvas, | ||
colorNeutralBackground3Hover: hcHighlight, | ||
colorNeutralBackground3Pressed: hcHighlight, | ||
colorNeutralBackground3Selected: hcHighlight, | ||
colorNeutralBackground4: hcCanvas, | ||
colorNeutralBackground4Hover: hcHighlight, | ||
colorNeutralBackground4Pressed: hcHighlight, | ||
colorNeutralBackground4Selected: hcHighlight, | ||
colorNeutralBackground5: hcCanvas, | ||
colorNeutralBackground5Hover: hcHighlight, | ||
colorNeutralBackground5Pressed: hcHighlight, | ||
colorNeutralBackground5Selected: hcHighlight, | ||
colorNeutralBackground6: hcCanvas, | ||
colorNeutralBackgroundInverted: hcCanvasText, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: hcHighlight, | ||
colorSubtleBackgroundPressed: hcHighlight, | ||
colorSubtleBackgroundSelected: hcHighlight, | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: hcHighlight, | ||
colorTransparentBackgroundPressed: hcHighlight, | ||
colorTransparentBackgroundSelected: hcHighlight, | ||
colorNeutralBackgroundDisabled: hcCanvas, | ||
colorNeutralStencil1: grey[8], | ||
colorNeutralStencil2: grey[52], | ||
colorBrandBackground: hcButtonFace, | ||
colorBrandBackgroundHover: hcHighlight, | ||
colorBrandBackgroundPressed: hcHighlight, | ||
colorBrandBackgroundSelected: hcHighlight, | ||
colorCompoundBrandBackground: hcHighlight, | ||
colorCompoundBrandBackgroundHover: hcHighlight, | ||
colorCompoundBrandBackgroundPressed: hcHighlight, | ||
colorBrandBackgroundStatic: hcCanvas, | ||
colorBrandBackground2: hcButtonFace, | ||
colorNeutralStrokeAccessible: hcCanvasText, | ||
colorNeutralStrokeAccessibleHover: hcHighlight, | ||
colorNeutralStrokeAccessiblePressed: hcHighlight, | ||
colorNeutralStrokeAccessibleSelected: hcHighlight, | ||
colorNeutralStroke1: hcCanvasText, | ||
colorNeutralStroke1Hover: hcHighlight, | ||
colorNeutralStroke1Pressed: hcHighlight, | ||
colorNeutralStroke1Selected: hcHighlight, | ||
colorNeutralStroke2: hcCanvasText, | ||
colorNeutralStroke3: hcCanvasText, | ||
colorBrandStroke1: hcCanvasText, | ||
colorBrandStroke2: hcCanvas, | ||
colorCompoundBrandStroke: hcHighlight, | ||
colorCompoundBrandStrokeHover: hcHighlight, | ||
colorCompoundBrandStrokePressed: hcHighlight, | ||
colorNeutralStrokeDisabled: hcDisabled, | ||
colorTransparentStroke: hcCanvasText, | ||
colorTransparentStrokeInteractive: hcHighlight, | ||
colorTransparentStrokeDisabled: hcDisabled, | ||
colorStrokeFocus1: hcCanvas, | ||
colorStrokeFocus2: hcHighlight, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
import { grey, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, black } from '../global/colors'; | ||
export const generateColorTokens = () => ({ | ||
colorNeutralForeground1: hcCanvasText, | ||
colorNeutralForeground1Hover: hcHighlightText, | ||
colorNeutralForeground1Pressed: hcHighlightText, | ||
colorNeutralForeground1Selected: hcHighlightText, | ||
colorNeutralForeground2: hcCanvasText, | ||
colorNeutralForeground2Hover: hcHighlightText, | ||
colorNeutralForeground2Pressed: hcHighlightText, | ||
colorNeutralForeground2Selected: hcHighlightText, | ||
colorNeutralForeground2BrandHover: hcHighlightText, | ||
colorNeutralForeground2BrandPressed: hcHighlightText, | ||
colorNeutralForeground2BrandSelected: hcHighlightText, | ||
colorNeutralForeground3: hcCanvasText, | ||
colorNeutralForeground3Hover: hcHighlightText, | ||
colorNeutralForeground3Pressed: hcHighlightText, | ||
colorNeutralForeground3Selected: hcHighlightText, | ||
colorNeutralForeground3BrandHover: hcHighlightText, | ||
colorNeutralForeground3BrandPressed: hcHighlightText, | ||
colorNeutralForeground3BrandSelected: hcHighlightText, | ||
colorNeutralForeground4: hcCanvasText, | ||
colorNeutralForegroundDisabled: hcDisabled, | ||
colorNeutralForegroundInvertedDisabled: hcDisabled, | ||
colorBrandForegroundLink: hcHyperlink, | ||
colorBrandForegroundLinkHover: hcHyperlink, | ||
colorBrandForegroundLinkPressed: hcHyperlink, | ||
colorBrandForegroundLinkSelected: hcHyperlink, | ||
colorCompoundBrandForeground1: hcHighlight, | ||
colorCompoundBrandForeground1Hover: hcHighlight, | ||
colorCompoundBrandForeground1Pressed: hcHighlight, | ||
colorBrandForeground1: hcCanvasText, | ||
colorBrandForeground2: hcButtonText, | ||
colorNeutralForegroundInverted: hcCanvasText, | ||
colorNeutralForegroundInvertedHover: hcHighlightText, | ||
colorNeutralForegroundInvertedPressed: hcHighlightText, | ||
colorNeutralForegroundInvertedSelected: hcHighlightText, | ||
colorNeutralForegroundOnBrand: hcButtonText, | ||
colorNeutralForegroundInvertedLink: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkHover: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkPressed: hcHyperlink, | ||
colorNeutralForegroundInvertedLinkSelected: hcHyperlink, | ||
colorBrandForegroundInverted: hcCanvasText, | ||
colorBrandForegroundInvertedHover: hcCanvasText, | ||
colorBrandForegroundInvertedPressed: hcCanvasText, | ||
colorBrandForegroundOnLight: hcButtonText, | ||
colorBrandForegroundOnLightHover: hcHighlightText, | ||
colorBrandForegroundOnLightPressed: hcHighlightText, | ||
colorBrandForegroundOnLightSelected: hcHighlightText, | ||
colorNeutralBackground1: hcCanvas, | ||
colorNeutralBackground1Hover: hcHighlight, | ||
colorNeutralBackground1Pressed: hcHighlight, | ||
colorNeutralBackground1Selected: hcHighlight, | ||
colorNeutralBackground2: hcCanvas, | ||
colorNeutralBackground2Hover: hcHighlight, | ||
colorNeutralBackground2Pressed: hcHighlight, | ||
colorNeutralBackground2Selected: hcHighlight, | ||
colorNeutralBackground3: hcCanvas, | ||
colorNeutralBackground3Hover: hcHighlight, | ||
colorNeutralBackground3Pressed: hcHighlight, | ||
colorNeutralBackground3Selected: hcHighlight, | ||
colorNeutralBackground4: hcCanvas, | ||
colorNeutralBackground4Hover: hcHighlight, | ||
colorNeutralBackground4Pressed: hcHighlight, | ||
colorNeutralBackground4Selected: hcHighlight, | ||
colorNeutralBackground5: hcCanvas, | ||
colorNeutralBackground5Hover: hcHighlight, | ||
colorNeutralBackground5Pressed: hcHighlight, | ||
colorNeutralBackground5Selected: hcHighlight, | ||
colorNeutralBackground6: hcCanvas, | ||
colorNeutralBackgroundInverted: hcCanvas, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: hcHighlight, | ||
colorSubtleBackgroundPressed: hcHighlight, | ||
colorSubtleBackgroundSelected: hcHighlight, | ||
colorSubtleBackgroundLightAlphaHover: hcHighlight, | ||
colorSubtleBackgroundLightAlphaPressed: hcHighlight, | ||
colorSubtleBackgroundLightAlphaSelected: hcHighlight, | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: hcHighlight, | ||
colorSubtleBackgroundInvertedPressed: hcHighlight, | ||
colorSubtleBackgroundInvertedSelected: hcHighlight, | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: hcHighlight, | ||
colorTransparentBackgroundPressed: hcHighlight, | ||
colorTransparentBackgroundSelected: hcHighlight, | ||
colorNeutralBackgroundDisabled: hcCanvas, | ||
colorNeutralBackgroundInvertedDisabled: hcCanvas, | ||
colorNeutralStencil1: grey[8], | ||
colorNeutralStencil2: grey[52], | ||
colorBrandBackground: hcButtonFace, | ||
colorBrandBackgroundHover: hcHighlight, | ||
colorBrandBackgroundPressed: hcHighlight, | ||
colorBrandBackgroundSelected: hcHighlight, | ||
colorCompoundBrandBackground: hcHighlight, | ||
colorCompoundBrandBackgroundHover: hcHighlight, | ||
colorCompoundBrandBackgroundPressed: hcHighlight, | ||
colorBrandBackgroundStatic: hcCanvas, | ||
colorBrandBackground2: hcButtonFace, | ||
colorBrandBackgroundInverted: hcButtonFace, | ||
colorBrandBackgroundInvertedHover: hcHighlight, | ||
colorBrandBackgroundInvertedPressed: hcHighlight, | ||
colorBrandBackgroundInvertedSelected: hcHighlight, | ||
colorNeutralStrokeAccessible: hcCanvasText, | ||
colorNeutralStrokeAccessibleHover: hcHighlight, | ||
colorNeutralStrokeAccessiblePressed: hcHighlight, | ||
colorNeutralStrokeAccessibleSelected: hcHighlight, | ||
colorNeutralStroke1: hcCanvasText, | ||
colorNeutralStroke1Hover: hcHighlight, | ||
colorNeutralStroke1Pressed: hcHighlight, | ||
colorNeutralStroke1Selected: hcHighlight, | ||
colorNeutralStroke2: hcCanvasText, | ||
colorNeutralStroke3: hcCanvasText, | ||
colorNeutralStrokeOnBrand: hcCanvas, | ||
colorNeutralStrokeOnBrand2: hcCanvasText, | ||
colorNeutralStrokeOnBrand2Hover: hcCanvasText, | ||
colorNeutralStrokeOnBrand2Pressed: hcCanvasText, | ||
colorNeutralStrokeOnBrand2Selected: hcCanvasText, | ||
colorBrandStroke1: hcCanvasText, | ||
colorBrandStroke2: hcCanvas, | ||
colorCompoundBrandStroke: hcHighlight, | ||
colorCompoundBrandStrokeHover: hcHighlight, | ||
colorCompoundBrandStrokePressed: hcHighlight, | ||
colorNeutralStrokeDisabled: hcDisabled, | ||
colorNeutralStrokeInvertedDisabled: hcDisabled, | ||
colorTransparentStroke: hcCanvasText, | ||
colorTransparentStrokeInteractive: hcHighlight, | ||
colorTransparentStrokeDisabled: hcDisabled, | ||
colorStrokeFocus1: hcCanvas, | ||
colorStrokeFocus2: hcHighlight, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
}); | ||
export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: white, | ||
[`colorPalette${color}Background2`]: black, | ||
[`colorPalette${color}Background3`]: white, | ||
[`colorPalette${color}Foreground1`]: black, | ||
[`colorPalette${color}Foreground2`]: white, | ||
[`colorPalette${color}Foreground3`]: white, | ||
[`colorPalette${color}BorderActive`]: hcHighlight, | ||
[`colorPalette${color}Border1`]: white, | ||
[`colorPalette${color}Border2`]: white | ||
}; | ||
}; | ||
export var colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = white, _a["colorPalette" + color + "Background2"] = black, _a["colorPalette" + color + "Background3"] = white, _a["colorPalette" + color + "Foreground1"] = black, _a["colorPalette" + color + "Foreground2"] = white, _a["colorPalette" + color + "Foreground3"] = white, _a["colorPalette" + color + "BorderActive"] = hcHighlight, _a["colorPalette" + color + "Border2"] = white, _a); | ||
return __assign(__assign({}, acc), sharedColorTokens); | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=highContrast.js.map |
@@ -1,117 +0,157 @@ | ||
import { __assign } from "tslib"; | ||
import { black, grey, white, sharedColors } from '../global/colors'; | ||
export var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: grey[14], | ||
colorNeutralForeground2: grey[26], | ||
colorNeutralForeground2Hover: grey[14], | ||
colorNeutralForeground2Pressed: grey[14], | ||
colorNeutralForeground2Selected: grey[14], | ||
colorNeutralForeground2BrandHover: brand.primary, | ||
colorNeutralForeground2BrandPressed: brand.shade10, | ||
colorNeutralForeground2BrandSelected: brand.primary, | ||
colorNeutralForeground3: grey[38], | ||
colorNeutralForeground3Hover: grey[26], | ||
colorNeutralForeground3Pressed: grey[26], | ||
colorNeutralForeground3Selected: grey[26], | ||
colorNeutralForeground3BrandHover: brand.primary, | ||
colorNeutralForeground3BrandPressed: brand.shade10, | ||
colorNeutralForeground3BrandSelected: brand.primary, | ||
colorNeutralForeground4: grey[44], | ||
colorNeutralForegroundDisabled: grey[74], | ||
colorBrandForegroundLink: brand.shade10, | ||
colorBrandForegroundLinkHover: brand.shade20, | ||
colorBrandForegroundLinkPressed: brand.shade40, | ||
colorBrandForegroundLinkSelected: brand.shade10, | ||
colorCompoundBrandForeground1: brand.primary, | ||
colorCompoundBrandForeground1Hover: brand.shade10, | ||
colorCompoundBrandForeground1Pressed: brand.shade20, | ||
colorBrandForeground1: brand.primary, | ||
colorBrandForeground2: brand.shade10, | ||
colorNeutralForegroundInverted: white, | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorNeutralBackground1: white, | ||
colorNeutralBackground1Hover: grey[96], | ||
colorNeutralBackground1Pressed: grey[88], | ||
colorNeutralBackground1Selected: grey[92], | ||
colorNeutralBackground2: grey[98], | ||
colorNeutralBackground2Hover: grey[94], | ||
colorNeutralBackground2Pressed: grey[86], | ||
colorNeutralBackground2Selected: grey[90], | ||
colorNeutralBackground3: grey[96], | ||
colorNeutralBackground3Hover: grey[92], | ||
colorNeutralBackground3Pressed: grey[84], | ||
colorNeutralBackground3Selected: grey[88], | ||
colorNeutralBackground4: grey[94], | ||
colorNeutralBackground4Hover: grey[98], | ||
colorNeutralBackground4Pressed: grey[96], | ||
colorNeutralBackground4Selected: white, | ||
colorNeutralBackground5: grey[92], | ||
colorNeutralBackground5Hover: grey[96], | ||
colorNeutralBackground5Pressed: grey[94], | ||
colorNeutralBackground5Selected: grey[98], | ||
colorNeutralBackground6: grey[90], | ||
colorNeutralBackgroundInverted: grey[38], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[96], | ||
colorSubtleBackgroundPressed: grey[88], | ||
colorSubtleBackgroundSelected: grey[92], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[94], | ||
colorNeutralStencil1: grey[90], | ||
colorNeutralStencil2: grey[98], | ||
colorBrandBackground: brand.primary, | ||
colorBrandBackgroundHover: brand.shade10, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.primary, | ||
colorCompoundBrandBackgroundHover: brand.shade10, | ||
colorCompoundBrandBackgroundPressed: brand.shade20, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.tint60, | ||
colorNeutralStrokeAccessible: grey[38], | ||
colorNeutralStrokeAccessibleHover: grey[34], | ||
colorNeutralStrokeAccessiblePressed: grey[30], | ||
colorNeutralStrokeAccessibleSelected: brand.primary, | ||
colorNeutralStroke1: grey[82], | ||
colorNeutralStroke1Hover: grey[78], | ||
colorNeutralStroke1Pressed: grey[70], | ||
colorNeutralStroke1Selected: grey[74], | ||
colorNeutralStroke2: grey[88], | ||
colorNeutralStroke3: grey[94], | ||
colorBrandStroke1: brand.primary, | ||
colorBrandStroke2: brand.tint40, | ||
colorCompoundBrandStroke: brand.primary, | ||
colorCompoundBrandStrokeHover: brand.shade10, | ||
colorCompoundBrandStrokePressed: brand.shade20, | ||
colorNeutralStrokeDisabled: grey[88], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: white, | ||
colorStrokeFocus2: black, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors'; | ||
export const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: grey[14], | ||
colorNeutralForeground1Hover: grey[14], | ||
colorNeutralForeground1Pressed: grey[14], | ||
colorNeutralForeground1Selected: grey[14], | ||
colorNeutralForeground2: grey[26], | ||
colorNeutralForeground2Hover: grey[14], | ||
colorNeutralForeground2Pressed: grey[14], | ||
colorNeutralForeground2Selected: grey[14], | ||
colorNeutralForeground2BrandHover: brand[80], | ||
colorNeutralForeground2BrandPressed: brand[70], | ||
colorNeutralForeground2BrandSelected: brand[80], | ||
colorNeutralForeground3: grey[38], | ||
colorNeutralForeground3Hover: grey[26], | ||
colorNeutralForeground3Pressed: grey[26], | ||
colorNeutralForeground3Selected: grey[26], | ||
colorNeutralForeground3BrandHover: brand[80], | ||
colorNeutralForeground3BrandPressed: brand[70], | ||
colorNeutralForeground3BrandSelected: brand[80], | ||
colorNeutralForeground4: grey[44], | ||
colorNeutralForegroundDisabled: grey[74], | ||
colorNeutralForegroundInvertedDisabled: whiteAlpha[40], | ||
colorBrandForegroundLink: brand[70], | ||
colorBrandForegroundLinkHover: brand[60], | ||
colorBrandForegroundLinkPressed: brand[40], | ||
colorBrandForegroundLinkSelected: brand[70], | ||
colorCompoundBrandForeground1: brand[80], | ||
colorCompoundBrandForeground1Hover: brand[70], | ||
colorCompoundBrandForeground1Pressed: brand[60], | ||
colorBrandForeground1: brand[80], | ||
colorBrandForeground2: brand[70], | ||
colorNeutralForegroundInverted: white, | ||
colorNeutralForegroundInvertedHover: white, | ||
colorNeutralForegroundInvertedPressed: white, | ||
colorNeutralForegroundInvertedSelected: white, | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: white, | ||
colorNeutralBackground1Hover: grey[96], | ||
colorNeutralBackground1Pressed: grey[88], | ||
colorNeutralBackground1Selected: grey[92], | ||
colorNeutralBackground2: grey[98], | ||
colorNeutralBackground2Hover: grey[94], | ||
colorNeutralBackground2Pressed: grey[86], | ||
colorNeutralBackground2Selected: grey[90], | ||
colorNeutralBackground3: grey[96], | ||
colorNeutralBackground3Hover: grey[92], | ||
colorNeutralBackground3Pressed: grey[84], | ||
colorNeutralBackground3Selected: grey[88], | ||
colorNeutralBackground4: grey[94], | ||
colorNeutralBackground4Hover: grey[98], | ||
colorNeutralBackground4Pressed: grey[96], | ||
colorNeutralBackground4Selected: white, | ||
colorNeutralBackground5: grey[92], | ||
colorNeutralBackground5Hover: grey[96], | ||
colorNeutralBackground5Pressed: grey[94], | ||
colorNeutralBackground5Selected: grey[98], | ||
colorNeutralBackground6: grey[90], | ||
colorNeutralBackgroundInverted: grey[20], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[96], | ||
colorSubtleBackgroundPressed: grey[88], | ||
colorSubtleBackgroundSelected: grey[92], | ||
colorSubtleBackgroundLightAlphaHover: whiteAlpha[80], | ||
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[94], | ||
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], | ||
colorNeutralStencil1: grey[90], | ||
colorNeutralStencil2: grey[98], | ||
colorBrandBackground: brand[80], | ||
colorBrandBackgroundHover: brand[70], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[80], | ||
colorCompoundBrandBackgroundHover: brand[70], | ||
colorCompoundBrandBackgroundPressed: brand[60], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[160], | ||
colorBrandBackgroundInverted: white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: grey[38], | ||
colorNeutralStrokeAccessibleHover: grey[34], | ||
colorNeutralStrokeAccessiblePressed: grey[30], | ||
colorNeutralStrokeAccessibleSelected: brand[80], | ||
colorNeutralStroke1: grey[82], | ||
colorNeutralStroke1Hover: grey[78], | ||
colorNeutralStroke1Pressed: grey[70], | ||
colorNeutralStroke1Selected: grey[74], | ||
colorNeutralStroke2: grey[88], | ||
colorNeutralStroke3: grey[94], | ||
colorNeutralStrokeOnBrand: white, | ||
colorNeutralStrokeOnBrand2: white, | ||
colorNeutralStrokeOnBrand2Hover: white, | ||
colorNeutralStrokeOnBrand2Pressed: white, | ||
colorNeutralStrokeOnBrand2Selected: white, | ||
colorBrandStroke1: brand[80], | ||
colorBrandStroke2: brand[140], | ||
colorCompoundBrandStroke: brand[80], | ||
colorCompoundBrandStrokeHover: brand[70], | ||
colorCompoundBrandStrokePressed: brand[60], | ||
colorNeutralStrokeDisabled: grey[88], | ||
colorNeutralStrokeInvertedDisabled: whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: white, | ||
colorStrokeFocus2: black, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
}); | ||
export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: sharedColors[sharedColor].tint60, | ||
[`colorPalette${color}Background2`]: sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: sharedColors[sharedColor].shade10, | ||
[`colorPalette${color}Foreground2`]: sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Foreground3`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}BorderActive`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border1`]: sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Border2`]: sharedColors[sharedColor].primary | ||
}; | ||
}; | ||
export var colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = sharedColors[sharedColor].tint60, _a["colorPalette" + color + "Background2"] = sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Background3"] = sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = sharedColors[sharedColor].shade10, _a["colorPalette" + color + "Foreground2"] = sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Foreground3"] = sharedColors[sharedColor].primary, _a["colorPalette" + color + "BorderActive"] = sharedColors[sharedColor].primary, _a["colorPalette" + color + "Border2"] = sharedColors[sharedColor].primary, _a); | ||
return __assign(__assign({}, acc), sharedColorTokens); | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=light.js.map |
@@ -1,117 +0,157 @@ | ||
import { __assign } from "tslib"; | ||
import { black, grey, white, sharedColors } from '../global/colors'; | ||
export var generateColorTokens = function (brand) { | ||
return { | ||
colorNeutralForeground1: white, | ||
colorNeutralForeground2: grey[84], | ||
colorNeutralForeground2Hover: white, | ||
colorNeutralForeground2Pressed: white, | ||
colorNeutralForeground2Selected: white, | ||
colorNeutralForeground2BrandHover: brand.tint20, | ||
colorNeutralForeground2BrandPressed: brand.tint10, | ||
colorNeutralForeground2BrandSelected: brand.tint20, | ||
colorNeutralForeground3: grey[68], | ||
colorNeutralForeground3Hover: grey[84], | ||
colorNeutralForeground3Pressed: grey[84], | ||
colorNeutralForeground3Selected: grey[84], | ||
colorNeutralForeground3BrandHover: brand.tint20, | ||
colorNeutralForeground3BrandPressed: brand.tint10, | ||
colorNeutralForeground3BrandSelected: brand.tint20, | ||
colorNeutralForeground4: grey[60], | ||
colorNeutralForegroundDisabled: grey[36], | ||
colorBrandForegroundLink: brand.tint10, | ||
colorBrandForegroundLinkHover: brand.tint30, | ||
colorBrandForegroundLinkPressed: brand.tint20, | ||
colorBrandForegroundLinkSelected: brand.tint10, | ||
colorCompoundBrandForeground1: brand.tint10, | ||
colorCompoundBrandForeground1Hover: brand.tint20, | ||
colorCompoundBrandForeground1Pressed: brand.primary, | ||
colorBrandForeground1: brand.tint20, | ||
colorBrandForeground2: brand.tint30, | ||
colorNeutralForegroundInverted: white, | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorNeutralBackground1: grey[16], | ||
colorNeutralBackground1Hover: grey[24], | ||
colorNeutralBackground1Pressed: grey[12], | ||
colorNeutralBackground1Selected: grey[22], | ||
colorNeutralBackground2: grey[14], | ||
colorNeutralBackground2Hover: grey[22], | ||
colorNeutralBackground2Pressed: grey[10], | ||
colorNeutralBackground2Selected: grey[20], | ||
colorNeutralBackground3: grey[12], | ||
colorNeutralBackground3Hover: grey[20], | ||
colorNeutralBackground3Pressed: grey[8], | ||
colorNeutralBackground3Selected: grey[18], | ||
colorNeutralBackground4: grey[8], | ||
colorNeutralBackground4Hover: grey[16], | ||
colorNeutralBackground4Pressed: grey[4], | ||
colorNeutralBackground4Selected: grey[14], | ||
colorNeutralBackground5: grey[4], | ||
colorNeutralBackground5Hover: grey[12], | ||
colorNeutralBackground5Pressed: black, | ||
colorNeutralBackground5Selected: grey[10], | ||
colorNeutralBackground6: grey[20], | ||
colorNeutralBackgroundInverted: white, | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[22], | ||
colorSubtleBackgroundPressed: grey[18], | ||
colorSubtleBackgroundSelected: grey[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[8], | ||
colorNeutralStencil1: grey[20], | ||
colorNeutralStencil2: grey[34], | ||
colorBrandBackground: brand.shade10, | ||
colorBrandBackgroundHover: brand.primary, | ||
colorBrandBackgroundPressed: brand.shade40, | ||
colorBrandBackgroundSelected: brand.shade20, | ||
colorCompoundBrandBackground: brand.tint10, | ||
colorCompoundBrandBackgroundHover: brand.tint20, | ||
colorCompoundBrandBackgroundPressed: brand.primary, | ||
colorBrandBackgroundStatic: brand.primary, | ||
colorBrandBackground2: brand.shade40, | ||
colorNeutralStrokeAccessible: grey[68], | ||
colorNeutralStrokeAccessibleHover: grey[74], | ||
colorNeutralStrokeAccessiblePressed: grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand.tint20, | ||
colorNeutralStroke1: grey[40], | ||
colorNeutralStroke1Hover: grey[46], | ||
colorNeutralStroke1Pressed: grey[42], | ||
colorNeutralStroke1Selected: grey[44], | ||
colorNeutralStroke2: grey[32], | ||
colorNeutralStroke3: grey[24], | ||
colorBrandStroke1: brand.tint10, | ||
colorBrandStroke2: brand.shade30, | ||
colorCompoundBrandStroke: brand.tint10, | ||
colorCompoundBrandStrokeHover: brand.tint20, | ||
colorCompoundBrandStrokePressed: brand.primary, | ||
colorNeutralStrokeDisabled: grey[26], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: black, | ||
colorStrokeFocus2: white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' | ||
import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors'; | ||
export const generateColorTokens = brand => ({ | ||
colorNeutralForeground1: white, | ||
colorNeutralForeground1Hover: white, | ||
colorNeutralForeground1Pressed: white, | ||
colorNeutralForeground1Selected: white, | ||
colorNeutralForeground2: grey[84], | ||
colorNeutralForeground2Hover: white, | ||
colorNeutralForeground2Pressed: white, | ||
colorNeutralForeground2Selected: white, | ||
colorNeutralForeground2BrandHover: brand[100], | ||
colorNeutralForeground2BrandPressed: brand[90], | ||
colorNeutralForeground2BrandSelected: brand[100], | ||
colorNeutralForeground3: grey[68], | ||
colorNeutralForeground3Hover: grey[84], | ||
colorNeutralForeground3Pressed: grey[84], | ||
colorNeutralForeground3Selected: grey[84], | ||
colorNeutralForeground3BrandHover: brand[100], | ||
colorNeutralForeground3BrandPressed: brand[90], | ||
colorNeutralForeground3BrandSelected: brand[100], | ||
colorNeutralForeground4: grey[60], | ||
colorNeutralForegroundDisabled: grey[36], | ||
colorNeutralForegroundInvertedDisabled: whiteAlpha[40], | ||
colorBrandForegroundLink: brand[90], | ||
colorBrandForegroundLinkHover: brand[110], | ||
colorBrandForegroundLinkPressed: brand[100], | ||
colorBrandForegroundLinkSelected: brand[90], | ||
colorCompoundBrandForeground1: brand[90], | ||
colorCompoundBrandForeground1Hover: brand[100], | ||
colorCompoundBrandForeground1Pressed: brand[80], | ||
colorBrandForeground1: brand[100], | ||
colorBrandForeground2: brand[110], | ||
colorNeutralForegroundInverted: white, | ||
colorNeutralForegroundInvertedHover: white, | ||
colorNeutralForegroundInvertedPressed: white, | ||
colorNeutralForegroundInvertedSelected: white, | ||
colorNeutralForegroundOnBrand: white, | ||
colorNeutralForegroundInvertedLink: white, | ||
colorNeutralForegroundInvertedLinkHover: white, | ||
colorNeutralForegroundInvertedLinkPressed: white, | ||
colorNeutralForegroundInvertedLinkSelected: white, | ||
colorBrandForegroundInverted: brand[100], | ||
colorBrandForegroundInvertedHover: brand[110], | ||
colorBrandForegroundInvertedPressed: brand[100], | ||
colorBrandForegroundOnLight: brand[80], | ||
colorBrandForegroundOnLightHover: brand[70], | ||
colorBrandForegroundOnLightPressed: brand[50], | ||
colorBrandForegroundOnLightSelected: brand[60], | ||
colorNeutralBackground1: grey[16], | ||
colorNeutralBackground1Hover: grey[24], | ||
colorNeutralBackground1Pressed: grey[12], | ||
colorNeutralBackground1Selected: grey[22], | ||
colorNeutralBackground2: grey[14], | ||
colorNeutralBackground2Hover: grey[22], | ||
colorNeutralBackground2Pressed: grey[10], | ||
colorNeutralBackground2Selected: grey[20], | ||
colorNeutralBackground3: grey[12], | ||
colorNeutralBackground3Hover: grey[20], | ||
colorNeutralBackground3Pressed: grey[8], | ||
colorNeutralBackground3Selected: grey[18], | ||
colorNeutralBackground4: grey[8], | ||
colorNeutralBackground4Hover: grey[16], | ||
colorNeutralBackground4Pressed: grey[4], | ||
colorNeutralBackground4Selected: grey[14], | ||
colorNeutralBackground5: grey[4], | ||
colorNeutralBackground5Hover: grey[12], | ||
colorNeutralBackground5Pressed: black, | ||
colorNeutralBackground5Selected: grey[10], | ||
colorNeutralBackground6: grey[20], | ||
colorNeutralBackgroundInverted: grey[24], | ||
colorSubtleBackground: 'transparent', | ||
colorSubtleBackgroundHover: grey[22], | ||
colorSubtleBackgroundPressed: grey[18], | ||
colorSubtleBackgroundSelected: grey[20], | ||
colorSubtleBackgroundLightAlphaHover: whiteAlpha[10], | ||
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5], | ||
colorSubtleBackgroundLightAlphaSelected: 'transparent', | ||
colorSubtleBackgroundInverted: 'transparent', | ||
colorSubtleBackgroundInvertedHover: blackAlpha[10], | ||
colorSubtleBackgroundInvertedPressed: blackAlpha[30], | ||
colorSubtleBackgroundInvertedSelected: blackAlpha[20], | ||
colorTransparentBackground: 'transparent', | ||
colorTransparentBackgroundHover: 'transparent', | ||
colorTransparentBackgroundPressed: 'transparent', | ||
colorTransparentBackgroundSelected: 'transparent', | ||
colorNeutralBackgroundDisabled: grey[8], | ||
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], | ||
colorNeutralStencil1: grey[20], | ||
colorNeutralStencil2: grey[34], | ||
colorBrandBackground: brand[70], | ||
colorBrandBackgroundHover: brand[80], | ||
colorBrandBackgroundPressed: brand[40], | ||
colorBrandBackgroundSelected: brand[60], | ||
colorCompoundBrandBackground: brand[90], | ||
colorCompoundBrandBackgroundHover: brand[100], | ||
colorCompoundBrandBackgroundPressed: brand[80], | ||
colorBrandBackgroundStatic: brand[80], | ||
colorBrandBackground2: brand[40], | ||
colorBrandBackgroundInverted: white, | ||
colorBrandBackgroundInvertedHover: brand[160], | ||
colorBrandBackgroundInvertedPressed: brand[140], | ||
colorBrandBackgroundInvertedSelected: brand[150], | ||
colorNeutralStrokeAccessible: grey[68], | ||
colorNeutralStrokeAccessibleHover: grey[74], | ||
colorNeutralStrokeAccessiblePressed: grey[70], | ||
colorNeutralStrokeAccessibleSelected: brand[100], | ||
colorNeutralStroke1: grey[40], | ||
colorNeutralStroke1Hover: grey[46], | ||
colorNeutralStroke1Pressed: grey[42], | ||
colorNeutralStroke1Selected: grey[44], | ||
colorNeutralStroke2: grey[32], | ||
colorNeutralStroke3: grey[24], | ||
colorNeutralStrokeOnBrand: grey[16], | ||
colorNeutralStrokeOnBrand2: white, | ||
colorNeutralStrokeOnBrand2Hover: white, | ||
colorNeutralStrokeOnBrand2Pressed: white, | ||
colorNeutralStrokeOnBrand2Selected: white, | ||
colorBrandStroke1: brand[90], | ||
colorBrandStroke2: brand[50], | ||
colorCompoundBrandStroke: brand[90], | ||
colorCompoundBrandStrokeHover: brand[100], | ||
colorCompoundBrandStrokePressed: brand[80], | ||
colorNeutralStrokeDisabled: grey[26], | ||
colorNeutralStrokeInvertedDisabled: whiteAlpha[40], | ||
colorTransparentStroke: 'transparent', | ||
colorTransparentStrokeInteractive: 'transparent', | ||
colorTransparentStrokeDisabled: 'transparent', | ||
colorStrokeFocus1: black, | ||
colorStrokeFocus2: white, | ||
colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', | ||
colorNeutralShadowKey: 'rgba(0,0,0,0.28)', | ||
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', | ||
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', | ||
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', | ||
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', | ||
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', | ||
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined | ||
}); | ||
export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => { | ||
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
const sharedColorTokens = { | ||
[`colorPalette${color}Background1`]: sharedColors[sharedColor].shade40, | ||
[`colorPalette${color}Background2`]: sharedColors[sharedColor].shade30, | ||
[`colorPalette${color}Background3`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Foreground1`]: sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Foreground2`]: sharedColors[sharedColor].tint40, | ||
[`colorPalette${color}Foreground3`]: sharedColors[sharedColor].tint20, | ||
[`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30, | ||
[`colorPalette${color}Border1`]: sharedColors[sharedColor].primary, | ||
[`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20 | ||
}; | ||
}; | ||
export var colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce(function (acc, sharedColor) { | ||
var _a; | ||
var color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1); | ||
var sharedColorTokens = (_a = {}, _a["colorPalette" + color + "Background1"] = sharedColors[sharedColor].shade40, _a["colorPalette" + color + "Background2"] = sharedColors[sharedColor].shade30, _a["colorPalette" + color + "Background3"] = sharedColors[sharedColor].primary, _a["colorPalette" + color + "Foreground1"] = sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Foreground2"] = sharedColors[sharedColor].tint40, _a["colorPalette" + color + "Foreground3"] = sharedColors[sharedColor].tint20, _a["colorPalette" + color + "BorderActive"] = sharedColors[sharedColor].tint30, _a["colorPalette" + color + "Border2"] = sharedColors[sharedColor].tint20, _a); | ||
return __assign(__assign({}, acc), sharedColorTokens); | ||
return { ...acc, | ||
...sharedColorTokens | ||
}; | ||
}, {}); | ||
//# sourceMappingURL=teamsDark.js.map |
@@ -1,2 +0,2 @@ | ||
export var borderRadius = { | ||
export const borderRadius = { | ||
borderRadiusNone: '0', | ||
@@ -3,0 +3,0 @@ borderRadiusSmall: '2px', |
import type { BrandVariants } from '../types'; | ||
export declare const brandWeb: BrandVariants; | ||
export declare const brandTeams: BrandVariants; | ||
export declare const brandOffice: BrandVariants; |
@@ -1,33 +0,55 @@ | ||
// TODO: values should be set per product theme | ||
export var brandWeb = { | ||
shade60: '#092C47', | ||
shade50: '#043862', | ||
shade40: '#004578', | ||
shade30: '#004C87', | ||
shade20: '#005A9E', | ||
shade10: '#106EBE', | ||
primary: '#0078D4', | ||
tint10: '#2899F5', | ||
tint20: '#3AA0F3', | ||
tint30: '#6CB8F6', | ||
tint40: '#C7E0F4', | ||
tint50: '#DEECF9', | ||
tint60: '#EFF6FC' | ||
}; // TODO: these colors are not approved yet | ||
export var brandTeams = { | ||
shade60: '#323348', | ||
shade50: '#393b5d', | ||
shade40: '#3D3E66', | ||
shade30: '#464775', | ||
shade20: '#494B83', | ||
shade10: '#52558f', | ||
primary: '#6264A7', | ||
tint10: '#8f95f8', | ||
tint20: '#9EA2FF', | ||
tint30: '#B2B5FF', | ||
tint40: '#C7C9FF', | ||
tint50: '#DBDCF0', | ||
tint60: '#E9EAF6' | ||
export const brandWeb = { | ||
10: `#001526`, | ||
20: `#002848`, | ||
30: `#043862`, | ||
40: `#004578`, | ||
50: `#004c87`, | ||
60: `#005a9e`, | ||
70: `#106ebe`, | ||
80: `#0078d4`, | ||
90: `#1890f1`, | ||
100: `#2899f5`, | ||
110: `#3aa0f3`, | ||
120: `#6cb8f6`, | ||
130: `#82c7ff`, | ||
140: `#c7e0f4`, | ||
150: `#deecf9`, | ||
160: `#eff6fc` | ||
}; | ||
export const brandTeams = { | ||
10: `#2b2b40`, | ||
20: `#2f2f4a`, | ||
30: `#333357`, | ||
40: `#383966`, | ||
50: `#3d3e78`, | ||
60: `#444791`, | ||
70: `#4f52b2`, | ||
80: `#5b5fc7`, | ||
90: `#7579eb`, | ||
100: `#7f85f5`, | ||
110: `#9299f7`, | ||
120: `#aab1fa`, | ||
130: `#b6bcfa`, | ||
140: `#c5cbfa`, | ||
150: `#dce0fa`, | ||
160: `#e8ebfa` | ||
}; | ||
export const brandOffice = { | ||
10: `#29130b`, | ||
20: `#4d2415`, | ||
30: `#792000`, | ||
40: `#99482b`, | ||
50: `#a52c00`, | ||
60: `#c33400`, | ||
70: `#e06a3f`, | ||
80: `#d83b01`, | ||
90: `#dd4f1b`, | ||
100: `#fe7948`, | ||
110: `#ff865a`, | ||
120: `#ff9973`, | ||
130: `#e8825d`, | ||
140: `#ffb498`, | ||
150: `#f4beaa`, | ||
160: `#f9dcd1` | ||
}; | ||
//# sourceMappingURL=brandColors.js.map |
import type { GlobalSharedColors, Greys, AlphaColors } from '../types'; | ||
export declare const grey: Record<Greys, string>; | ||
export declare const whiteAlpha: Record<AlphaColors, string>; | ||
export declare const blackAlpha: Record<AlphaColors, string>; | ||
export declare const white = "#ffffff"; | ||
export declare const black = "#000000"; | ||
export declare const whiteAlpha: Record<AlphaColors, string>; | ||
export declare const blackAlpha: Record<AlphaColors, string>; | ||
export declare const hcHyperlink = "#ffff00"; | ||
@@ -8,0 +8,0 @@ export declare const hcHighlight = "#1aebff"; |
@@ -1,2 +0,2 @@ | ||
export var grey = { | ||
export const grey = { | ||
'0': '#000000', | ||
@@ -54,5 +54,3 @@ '2': '#050505', | ||
}; | ||
export var white = '#ffffff'; | ||
export var black = '#000000'; | ||
export var whiteAlpha = { | ||
export const whiteAlpha = { | ||
'5': 'rgba(255, 255, 255, 0.05)', | ||
@@ -69,3 +67,3 @@ '10': 'rgba(255, 255, 255, 0.1)', | ||
}; | ||
export var blackAlpha = { | ||
export const blackAlpha = { | ||
'5': 'rgba(0, 0, 0, 0.05)', | ||
@@ -82,11 +80,13 @@ '10': 'rgba(0, 0, 0, 0.1)', | ||
}; | ||
export var hcHyperlink = '#ffff00'; | ||
export var hcHighlight = '#1aebff'; | ||
export var hcDisabled = '#3ff23f'; | ||
export var hcCanvas = '#000000'; | ||
export var hcCanvasText = '#ffffff'; | ||
export var hcHighlightText = '#000000'; | ||
export var hcButtonText = '#000000'; | ||
export var hcButtonFace = '#ffffff'; | ||
var darkRed = { | ||
export const white = '#ffffff'; | ||
export const black = '#000000'; | ||
export const hcHyperlink = '#ffff00'; | ||
export const hcHighlight = '#1aebff'; | ||
export const hcDisabled = '#3ff23f'; | ||
export const hcCanvas = '#000000'; | ||
export const hcCanvasText = '#ffffff'; | ||
export const hcHighlightText = '#000000'; | ||
export const hcButtonText = '#000000'; | ||
export const hcButtonFace = '#ffffff'; | ||
const darkRed = { | ||
shade50: '#130204', | ||
@@ -105,3 +105,3 @@ shade40: '#230308', | ||
}; | ||
var burgundy = { | ||
const burgundy = { | ||
shade50: '#1a0607', | ||
@@ -120,3 +120,3 @@ shade40: '#310b0d', | ||
}; | ||
var cranberry = { | ||
const cranberry = { | ||
shade50: '#200205', | ||
@@ -135,3 +135,3 @@ shade40: '#3b0509', | ||
}; | ||
var red = { | ||
const red = { | ||
shade50: '#210809', | ||
@@ -150,3 +150,3 @@ shade40: '#3f1011', | ||
}; | ||
var darkOrange = { | ||
const darkOrange = { | ||
shade50: '#230900', | ||
@@ -165,3 +165,3 @@ shade40: '#411200', | ||
}; | ||
var bronze = { | ||
const bronze = { | ||
shade50: '#1b0a01', | ||
@@ -180,3 +180,3 @@ shade40: '#321303', | ||
}; | ||
var pumpkin = { | ||
const pumpkin = { | ||
shade50: '#200d03', | ||
@@ -195,3 +195,3 @@ shade40: '#3d1805', | ||
}; | ||
var orange = { | ||
const orange = { | ||
shade50: '#271002', | ||
@@ -210,3 +210,3 @@ shade40: '#4a1e04', | ||
}; | ||
var peach = { | ||
const peach = { | ||
shade50: '#291600', | ||
@@ -225,3 +225,3 @@ shade40: '#4d2a00', | ||
}; | ||
var marigold = { | ||
const marigold = { | ||
shade50: '#251a00', | ||
@@ -240,3 +240,3 @@ shade40: '#463100', | ||
}; | ||
var yellow = { | ||
const yellow = { | ||
shade50: '#282400', | ||
@@ -255,3 +255,3 @@ shade40: '#4c4400', | ||
}; | ||
var gold = { | ||
const gold = { | ||
shade50: '#1f1900', | ||
@@ -270,3 +270,3 @@ shade40: '#3a2f00', | ||
}; | ||
var brass = { | ||
const brass = { | ||
shade50: '#181202', | ||
@@ -285,3 +285,3 @@ shade40: '#2e2103', | ||
}; | ||
var brown = { | ||
const brown = { | ||
shade50: '#170e07', | ||
@@ -300,3 +300,3 @@ shade40: '#2b1a0e', | ||
}; | ||
var darkBrown = { | ||
const darkBrown = { | ||
shade50: '#0c0704', | ||
@@ -315,3 +315,3 @@ shade40: '#170c08', | ||
}; | ||
var lime = { | ||
const lime = { | ||
shade50: '#121b06', | ||
@@ -330,3 +330,3 @@ shade40: '#23330b', | ||
}; | ||
var forest = { | ||
const forest = { | ||
shade50: '#0c1501', | ||
@@ -345,3 +345,3 @@ shade40: '#162702', | ||
}; | ||
var seafoam = { | ||
const seafoam = { | ||
shade50: '#002111', | ||
@@ -360,3 +360,3 @@ shade40: '#003d20', | ||
}; | ||
var lightGreen = { | ||
const lightGreen = { | ||
shade50: '#031a02', | ||
@@ -375,3 +375,3 @@ shade40: '#063004', | ||
}; | ||
var green = { | ||
const green = { | ||
shade50: '#031403', | ||
@@ -390,3 +390,3 @@ shade40: '#052505', | ||
}; | ||
var darkGreen = { | ||
const darkGreen = { | ||
shade50: '#021102', | ||
@@ -405,3 +405,3 @@ shade40: '#032003', | ||
}; | ||
var lightTeal = { | ||
const lightTeal = { | ||
shade50: '#001d1f', | ||
@@ -420,3 +420,3 @@ shade40: '#00373a', | ||
}; | ||
var teal = { | ||
const teal = { | ||
shade50: '#001516', | ||
@@ -435,3 +435,3 @@ shade40: '#012728', | ||
}; | ||
var darkTeal = { | ||
const darkTeal = { | ||
shade50: '#001010', | ||
@@ -450,3 +450,3 @@ shade40: '#001f1f', | ||
}; | ||
var cyan = { | ||
const cyan = { | ||
shade50: '#00181e', | ||
@@ -465,3 +465,3 @@ shade40: '#002e38', | ||
}; | ||
var steel = { | ||
const steel = { | ||
shade50: '#000f12', | ||
@@ -480,3 +480,3 @@ shade40: '#001b22', | ||
}; | ||
var lightBlue = { | ||
const lightBlue = { | ||
shade50: '#091823', | ||
@@ -495,3 +495,3 @@ shade40: '#112d42', | ||
}; | ||
var blue = { | ||
const blue = { | ||
shade50: '#001322', | ||
@@ -510,3 +510,3 @@ shade40: '#002440', | ||
}; | ||
var royalBlue = { | ||
const royalBlue = { | ||
shade50: '#000c16', | ||
@@ -525,3 +525,3 @@ shade40: '#00172a', | ||
}; | ||
var darkBlue = { | ||
const darkBlue = { | ||
shade50: '#000910', | ||
@@ -540,3 +540,3 @@ shade40: '#00111f', | ||
}; | ||
var cornflower = { | ||
const cornflower = { | ||
shade50: '#0d1126', | ||
@@ -555,3 +555,3 @@ shade40: '#182047', | ||
}; | ||
var navy = { | ||
const navy = { | ||
shade50: '#00061d', | ||
@@ -570,3 +570,3 @@ shade40: '#000c36', | ||
}; | ||
var lavender = { | ||
const lavender = { | ||
shade50: '#120f25', | ||
@@ -585,3 +585,3 @@ shade40: '#221d46', | ||
}; | ||
var purple = { | ||
const purple = { | ||
shade50: '#0f0717', | ||
@@ -600,3 +600,3 @@ shade40: '#1c0e2b', | ||
}; | ||
var darkPurple = { | ||
const darkPurple = { | ||
shade50: '#0a0411', | ||
@@ -615,3 +615,3 @@ shade40: '#130820', | ||
}; | ||
var orchid = { | ||
const orchid = { | ||
shade50: '#16101d', | ||
@@ -630,3 +630,3 @@ shade40: '#281e37', | ||
}; | ||
var grape = { | ||
const grape = { | ||
shade50: '#160418', | ||
@@ -645,3 +645,3 @@ shade40: '#29072e', | ||
}; | ||
var berry = { | ||
const berry = { | ||
shade50: '#1f091d', | ||
@@ -660,3 +660,3 @@ shade40: '#3a1136', | ||
}; | ||
var lilac = { | ||
const lilac = { | ||
shade50: '#1c0b1f', | ||
@@ -675,3 +675,3 @@ shade40: '#35153a', | ||
}; | ||
var pink = { | ||
const pink = { | ||
shade50: '#24091b', | ||
@@ -690,3 +690,3 @@ shade40: '#441232', | ||
}; | ||
var hotPink = { | ||
const hotPink = { | ||
shade50: '#240016', | ||
@@ -705,3 +705,3 @@ shade40: '#44002a', | ||
}; | ||
var magenta = { | ||
const magenta = { | ||
shade50: '#1f0013', | ||
@@ -720,3 +720,3 @@ shade40: '#390024', | ||
}; | ||
var plum = { | ||
const plum = { | ||
shade50: '#13000c', | ||
@@ -735,3 +735,3 @@ shade40: '#240017', | ||
}; | ||
var beige = { | ||
const beige = { | ||
shade50: '#141313', | ||
@@ -750,3 +750,3 @@ shade40: '#252323', | ||
}; | ||
var mink = { | ||
const mink = { | ||
shade50: '#0f0e0e', | ||
@@ -765,3 +765,3 @@ shade40: '#1c1b1a', | ||
}; | ||
var silver = { | ||
const silver = { | ||
shade50: '#151818', | ||
@@ -780,3 +780,3 @@ shade40: '#282d2e', | ||
}; | ||
var platinum = { | ||
const platinum = { | ||
shade50: '#111314', | ||
@@ -795,3 +795,3 @@ shade40: '#1f2426', | ||
}; | ||
var anchor = { | ||
const anchor = { | ||
shade50: '#090a0b', | ||
@@ -810,67 +810,67 @@ shade40: '#111315', | ||
}; | ||
var charcoal = { | ||
shade50: '#130204', | ||
shade40: '#230308', | ||
shade30: '#420610', | ||
shade20: '#590815', | ||
shade10: '#690a19', | ||
primary: '#750b1c', | ||
tint10: '#861b2c', | ||
tint20: '#962f3f', | ||
tint30: '#ac4f5e', | ||
tint40: '#d69ca5', | ||
tint50: '#e9c7cd', | ||
tint60: '#f9f0f2' | ||
const charcoal = { | ||
shade50: '#090909', | ||
shade40: '#111111', | ||
shade30: '#202020', | ||
shade20: '#2b2b2b', | ||
shade10: '#333333', | ||
primary: '#393939', | ||
tint10: '#515151', | ||
tint20: '#686868', | ||
tint30: '#888888', | ||
tint40: '#c4c4c4', | ||
tint50: '#dfdfdf', | ||
tint60: '#f7f7f7' | ||
}; | ||
export var sharedColors = { | ||
darkRed: darkRed, | ||
burgundy: burgundy, | ||
cranberry: cranberry, | ||
red: red, | ||
darkOrange: darkOrange, | ||
bronze: bronze, | ||
pumpkin: pumpkin, | ||
orange: orange, | ||
peach: peach, | ||
marigold: marigold, | ||
yellow: yellow, | ||
gold: gold, | ||
brass: brass, | ||
brown: brown, | ||
darkBrown: darkBrown, | ||
lime: lime, | ||
forest: forest, | ||
seafoam: seafoam, | ||
lightGreen: lightGreen, | ||
green: green, | ||
darkGreen: darkGreen, | ||
lightTeal: lightTeal, | ||
teal: teal, | ||
darkTeal: darkTeal, | ||
cyan: cyan, | ||
steel: steel, | ||
lightBlue: lightBlue, | ||
blue: blue, | ||
royalBlue: royalBlue, | ||
darkBlue: darkBlue, | ||
cornflower: cornflower, | ||
navy: navy, | ||
lavender: lavender, | ||
purple: purple, | ||
darkPurple: darkPurple, | ||
orchid: orchid, | ||
grape: grape, | ||
berry: berry, | ||
lilac: lilac, | ||
pink: pink, | ||
hotPink: hotPink, | ||
magenta: magenta, | ||
plum: plum, | ||
beige: beige, | ||
mink: mink, | ||
silver: silver, | ||
platinum: platinum, | ||
anchor: anchor, | ||
charcoal: charcoal | ||
export const sharedColors = { | ||
darkRed, | ||
burgundy, | ||
cranberry, | ||
red, | ||
darkOrange, | ||
bronze, | ||
pumpkin, | ||
orange, | ||
peach, | ||
marigold, | ||
yellow, | ||
gold, | ||
brass, | ||
brown, | ||
darkBrown, | ||
lime, | ||
forest, | ||
seafoam, | ||
lightGreen, | ||
green, | ||
darkGreen, | ||
lightTeal, | ||
teal, | ||
darkTeal, | ||
cyan, | ||
steel, | ||
lightBlue, | ||
blue, | ||
royalBlue, | ||
darkBlue, | ||
cornflower, | ||
navy, | ||
lavender, | ||
purple, | ||
darkPurple, | ||
orchid, | ||
grape, | ||
berry, | ||
lilac, | ||
pink, | ||
hotPink, | ||
magenta, | ||
plum, | ||
beige, | ||
mink, | ||
silver, | ||
platinum, | ||
anchor, | ||
charcoal | ||
}; | ||
//# sourceMappingURL=colors.js.map |
@@ -1,2 +0,2 @@ | ||
export var fontSizes = { | ||
export const fontSizes = { | ||
fontSizeBase100: '10px', | ||
@@ -13,3 +13,3 @@ fontSizeBase200: '12px', | ||
}; | ||
export var lineHeights = { | ||
export const lineHeights = { | ||
lineHeightBase100: '14px', | ||
@@ -26,3 +26,3 @@ lineHeightBase200: '16px', | ||
}; | ||
export var fontWeights = { | ||
export const fontWeights = { | ||
fontWeightRegular: 400, | ||
@@ -32,3 +32,3 @@ fontWeightMedium: 500, | ||
}; | ||
export var fontFamilies = { | ||
export const fontFamilies = { | ||
fontFamilyBase: // eslint-disable-next-line @fluentui/max-len | ||
@@ -35,0 +35,0 @@ "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", |
@@ -1,2 +0,2 @@ | ||
export var strokeWidths = { | ||
export const strokeWidths = { | ||
strokeWidthThin: '1px', | ||
@@ -3,0 +3,0 @@ strokeWidthThick: '2px', |
export * from './themes/index'; | ||
export * from './utils/index'; | ||
export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types'; | ||
export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types'; |
import { createTeamsDarkTheme } from '../../utils/createTeamsDarkTheme'; | ||
import { brandTeams } from '../../global/brandColors'; | ||
export var teamsDarkTheme = /*#__PURE__*/createTeamsDarkTheme(brandTeams); | ||
export const teamsDarkTheme = /*#__PURE__*/createTeamsDarkTheme(brandTeams); | ||
//# sourceMappingURL=darkTheme.js.map |
import { createHighContrastTheme } from '../../utils/createHighContrastTheme'; | ||
export var teamsHighContrastTheme = /*#__PURE__*/createHighContrastTheme(); | ||
export const teamsHighContrastTheme = /*#__PURE__*/createHighContrastTheme(); | ||
//# sourceMappingURL=highContrastTheme.js.map |
import { createLightTheme } from '../../utils/createLightTheme'; | ||
import { brandTeams } from '../../global/brandColors'; | ||
export var teamsLightTheme = /*#__PURE__*/createLightTheme(brandTeams); | ||
export const teamsLightTheme = /*#__PURE__*/createLightTheme(brandTeams); | ||
//# sourceMappingURL=lightTheme.js.map |
import { createDarkTheme } from '../../utils/createDarkTheme'; | ||
import { brandWeb } from '../../global/brandColors'; | ||
export var webDarkTheme = /*#__PURE__*/createDarkTheme(brandWeb); | ||
export const webDarkTheme = /*#__PURE__*/createDarkTheme(brandWeb); | ||
//# sourceMappingURL=darkTheme.js.map |
import { createHighContrastTheme } from '../../utils/createHighContrastTheme'; | ||
export var webHighContrastTheme = /*#__PURE__*/createHighContrastTheme(); | ||
export const webHighContrastTheme = /*#__PURE__*/createHighContrastTheme(); | ||
//# sourceMappingURL=highContrastTheme.js.map |
import { createLightTheme } from '../../utils/createLightTheme'; | ||
import { brandWeb } from '../../global/brandColors'; | ||
export var webLightTheme = /*#__PURE__*/createLightTheme(brandWeb); | ||
export const webLightTheme = /*#__PURE__*/createLightTheme(brandWeb); | ||
//# sourceMappingURL=lightTheme.js.map |
@@ -6,2 +6,5 @@ /** | ||
colorNeutralForeground1: string; | ||
colorNeutralForeground1Hover: string; | ||
colorNeutralForeground1Pressed: string; | ||
colorNeutralForeground1Selected: string; | ||
colorNeutralForeground2: string; | ||
@@ -23,2 +26,3 @@ colorNeutralForeground2Hover: string; | ||
colorNeutralForegroundDisabled: string; | ||
colorNeutralForegroundInvertedDisabled: string; | ||
colorBrandForegroundLink: string; | ||
@@ -34,2 +38,5 @@ colorBrandForegroundLinkHover: string; | ||
colorNeutralForegroundInverted: string; | ||
colorNeutralForegroundInvertedHover: string; | ||
colorNeutralForegroundInvertedPressed: string; | ||
colorNeutralForegroundInvertedSelected: string; | ||
colorNeutralForegroundOnBrand: string; | ||
@@ -40,2 +47,9 @@ colorNeutralForegroundInvertedLink: string; | ||
colorNeutralForegroundInvertedLinkSelected: string; | ||
colorBrandForegroundInverted: string; | ||
colorBrandForegroundInvertedHover: string; | ||
colorBrandForegroundInvertedPressed: string; | ||
colorBrandForegroundOnLight: string; | ||
colorBrandForegroundOnLightHover: string; | ||
colorBrandForegroundOnLightPressed: string; | ||
colorBrandForegroundOnLightSelected: string; | ||
colorNeutralBackground1: string; | ||
@@ -67,2 +81,9 @@ colorNeutralBackground1Hover: string; | ||
colorSubtleBackgroundSelected: string; | ||
colorSubtleBackgroundLightAlphaHover: string; | ||
colorSubtleBackgroundLightAlphaPressed: string; | ||
colorSubtleBackgroundLightAlphaSelected: string; | ||
colorSubtleBackgroundInverted: string; | ||
colorSubtleBackgroundInvertedHover: string; | ||
colorSubtleBackgroundInvertedPressed: string; | ||
colorSubtleBackgroundInvertedSelected: string; | ||
colorTransparentBackground: string; | ||
@@ -73,2 +94,3 @@ colorTransparentBackgroundHover: string; | ||
colorNeutralBackgroundDisabled: string; | ||
colorNeutralBackgroundInvertedDisabled: string; | ||
colorNeutralStencil1: string; | ||
@@ -85,2 +107,6 @@ colorNeutralStencil2: string; | ||
colorBrandBackground2: string; | ||
colorBrandBackgroundInverted: string; | ||
colorBrandBackgroundInvertedHover: string; | ||
colorBrandBackgroundInvertedPressed: string; | ||
colorBrandBackgroundInvertedSelected: string; | ||
colorNeutralStrokeAccessible: string; | ||
@@ -96,2 +122,7 @@ colorNeutralStrokeAccessibleHover: string; | ||
colorNeutralStroke3: string; | ||
colorNeutralStrokeOnBrand: string; | ||
colorNeutralStrokeOnBrand2: string; | ||
colorNeutralStrokeOnBrand2Hover: string; | ||
colorNeutralStrokeOnBrand2Pressed: string; | ||
colorNeutralStrokeOnBrand2Selected: string; | ||
colorBrandStroke1: string; | ||
@@ -103,2 +134,3 @@ colorBrandStroke2: string; | ||
colorNeutralStrokeDisabled: string; | ||
colorNeutralStrokeInvertedDisabled: string; | ||
colorTransparentStroke: string; | ||
@@ -118,51 +150,51 @@ colorTransparentStrokeInteractive: string; | ||
}; | ||
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder2'; | ||
export declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder2'; | ||
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder2'; | ||
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder2'; | ||
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder2'; | ||
export declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder2'; | ||
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder2'; | ||
export declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder2'; | ||
export declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder2'; | ||
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder2'; | ||
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder2'; | ||
export declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder2'; | ||
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder2'; | ||
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder2'; | ||
export declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder2'; | ||
export declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder2'; | ||
export declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder2'; | ||
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder2'; | ||
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder2'; | ||
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder2'; | ||
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder2'; | ||
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder2'; | ||
export declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder2'; | ||
export declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder2'; | ||
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder2'; | ||
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder2'; | ||
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder2'; | ||
export declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder2'; | ||
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder2'; | ||
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder2'; | ||
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder2'; | ||
export declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder2'; | ||
export declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder2'; | ||
export declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder2'; | ||
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder2'; | ||
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder2'; | ||
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder2'; | ||
export declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder2'; | ||
export declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder2'; | ||
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder2'; | ||
export declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder2'; | ||
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder2'; | ||
export declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder2'; | ||
export declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder2'; | ||
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder2'; | ||
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder2'; | ||
export declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder2'; | ||
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground1' | 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedBackground3' | 'colorPaletteDarkRedForeground1' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedForeground3' | 'colorPaletteDarkRedBorderActive' | 'colorPaletteDarkRedBorder1' | 'colorPaletteDarkRedBorder2'; | ||
export declare type ColorPaletteBurgundy = 'colorPaletteBurgundyBackground1' | 'colorPaletteBurgundyBackground2' | 'colorPaletteBurgundyBackground3' | 'colorPaletteBurgundyForeground1' | 'colorPaletteBurgundyForeground2' | 'colorPaletteBurgundyForeground3' | 'colorPaletteBurgundyBorderActive' | 'colorPaletteBurgundyBorder1' | 'colorPaletteBurgundyBorder2'; | ||
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground1' | 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryBackground3' | 'colorPaletteCranberryForeground1' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryForeground3' | 'colorPaletteCranberryBorderActive' | 'colorPaletteCranberryBorder1' | 'colorPaletteCranberryBorder2'; | ||
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2'; | ||
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2'; | ||
export declare type ColorPaletteBronze = 'colorPaletteBronzeBackground1' | 'colorPaletteBronzeBackground2' | 'colorPaletteBronzeBackground3' | 'colorPaletteBronzeForeground1' | 'colorPaletteBronzeForeground2' | 'colorPaletteBronzeForeground3' | 'colorPaletteBronzeBorderActive' | 'colorPaletteBronzeBorder1' | 'colorPaletteBronzeBorder2'; | ||
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground1' | 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinBackground3' | 'colorPalettePumpkinForeground1' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinForeground3' | 'colorPalettePumpkinBorderActive' | 'colorPalettePumpkinBorder1' | 'colorPalettePumpkinBorder2'; | ||
export declare type ColorPaletteOrange = 'colorPaletteOrangeBackground1' | 'colorPaletteOrangeBackground2' | 'colorPaletteOrangeBackground3' | 'colorPaletteOrangeForeground1' | 'colorPaletteOrangeForeground2' | 'colorPaletteOrangeForeground3' | 'colorPaletteOrangeBorderActive' | 'colorPaletteOrangeBorder1' | 'colorPaletteOrangeBorder2'; | ||
export declare type ColorPalettePeach = 'colorPalettePeachBackground1' | 'colorPalettePeachBackground2' | 'colorPalettePeachBackground3' | 'colorPalettePeachForeground1' | 'colorPalettePeachForeground2' | 'colorPalettePeachForeground3' | 'colorPalettePeachBorderActive' | 'colorPalettePeachBorder1' | 'colorPalettePeachBorder2'; | ||
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2'; | ||
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2'; | ||
export declare type ColorPaletteGold = 'colorPaletteGoldBackground1' | 'colorPaletteGoldBackground2' | 'colorPaletteGoldBackground3' | 'colorPaletteGoldForeground1' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldForeground3' | 'colorPaletteGoldBorderActive' | 'colorPaletteGoldBorder1' | 'colorPaletteGoldBorder2'; | ||
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground1' | 'colorPaletteBrassBackground2' | 'colorPaletteBrassBackground3' | 'colorPaletteBrassForeground1' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassForeground3' | 'colorPaletteBrassBorderActive' | 'colorPaletteBrassBorder1' | 'colorPaletteBrassBorder2'; | ||
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground1' | 'colorPaletteBrownBackground2' | 'colorPaletteBrownBackground3' | 'colorPaletteBrownForeground1' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownForeground3' | 'colorPaletteBrownBorderActive' | 'colorPaletteBrownBorder1' | 'colorPaletteBrownBorder2'; | ||
export declare type ColorPaletteDarkBrown = 'colorPaletteDarkBrownBackground1' | 'colorPaletteDarkBrownBackground2' | 'colorPaletteDarkBrownBackground3' | 'colorPaletteDarkBrownForeground1' | 'colorPaletteDarkBrownForeground2' | 'colorPaletteDarkBrownForeground3' | 'colorPaletteDarkBrownBorderActive' | 'colorPaletteDarkBrownBorder1' | 'colorPaletteDarkBrownBorder2'; | ||
export declare type ColorPaletteLime = 'colorPaletteLimeBackground1' | 'colorPaletteLimeBackground2' | 'colorPaletteLimeBackground3' | 'colorPaletteLimeForeground1' | 'colorPaletteLimeForeground2' | 'colorPaletteLimeForeground3' | 'colorPaletteLimeBorderActive' | 'colorPaletteLimeBorder1' | 'colorPaletteLimeBorder2'; | ||
export declare type ColorPaletteForest = 'colorPaletteForestBackground1' | 'colorPaletteForestBackground2' | 'colorPaletteForestBackground3' | 'colorPaletteForestForeground1' | 'colorPaletteForestForeground2' | 'colorPaletteForestForeground3' | 'colorPaletteForestBorderActive' | 'colorPaletteForestBorder1' | 'colorPaletteForestBorder2'; | ||
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground1' | 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamBackground3' | 'colorPaletteSeafoamForeground1' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamForeground3' | 'colorPaletteSeafoamBorderActive' | 'colorPaletteSeafoamBorder1' | 'colorPaletteSeafoamBorder2'; | ||
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2'; | ||
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2'; | ||
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground1' | 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenBackground3' | 'colorPaletteDarkGreenForeground1' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenForeground3' | 'colorPaletteDarkGreenBorderActive' | 'colorPaletteDarkGreenBorder1' | 'colorPaletteDarkGreenBorder2'; | ||
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground1' | 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealBackground3' | 'colorPaletteLightTealForeground1' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealForeground3' | 'colorPaletteLightTealBorderActive' | 'colorPaletteLightTealBorder1' | 'colorPaletteLightTealBorder2'; | ||
export declare type ColorPaletteTeal = 'colorPaletteTealBackground1' | 'colorPaletteTealBackground2' | 'colorPaletteTealBackground3' | 'colorPaletteTealForeground1' | 'colorPaletteTealForeground2' | 'colorPaletteTealForeground3' | 'colorPaletteTealBorderActive' | 'colorPaletteTealBorder1' | 'colorPaletteTealBorder2'; | ||
export declare type ColorPaletteDarkTeal = 'colorPaletteDarkTealBackground1' | 'colorPaletteDarkTealBackground2' | 'colorPaletteDarkTealBackground3' | 'colorPaletteDarkTealForeground1' | 'colorPaletteDarkTealForeground2' | 'colorPaletteDarkTealForeground3' | 'colorPaletteDarkTealBorderActive' | 'colorPaletteDarkTealBorder1' | 'colorPaletteDarkTealBorder2'; | ||
export declare type ColorPaletteCyan = 'colorPaletteCyanBackground1' | 'colorPaletteCyanBackground2' | 'colorPaletteCyanBackground3' | 'colorPaletteCyanForeground1' | 'colorPaletteCyanForeground2' | 'colorPaletteCyanForeground3' | 'colorPaletteCyanBorderActive' | 'colorPaletteCyanBorder1' | 'colorPaletteCyanBorder2'; | ||
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground1' | 'colorPaletteSteelBackground2' | 'colorPaletteSteelBackground3' | 'colorPaletteSteelForeground1' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelForeground3' | 'colorPaletteSteelBorderActive' | 'colorPaletteSteelBorder1' | 'colorPaletteSteelBorder2'; | ||
export declare type ColorPaletteLightBlue = 'colorPaletteLightBlueBackground1' | 'colorPaletteLightBlueBackground2' | 'colorPaletteLightBlueBackground3' | 'colorPaletteLightBlueForeground1' | 'colorPaletteLightBlueForeground2' | 'colorPaletteLightBlueForeground3' | 'colorPaletteLightBlueBorderActive' | 'colorPaletteLightBlueBorder1' | 'colorPaletteLightBlueBorder2'; | ||
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground1' | 'colorPaletteBlueBackground2' | 'colorPaletteBlueBackground3' | 'colorPaletteBlueForeground1' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueForeground3' | 'colorPaletteBlueBorderActive' | 'colorPaletteBlueBorder1' | 'colorPaletteBlueBorder2'; | ||
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground1' | 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueBackground3' | 'colorPaletteRoyalBlueForeground1' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueForeground3' | 'colorPaletteRoyalBlueBorderActive' | 'colorPaletteRoyalBlueBorder1' | 'colorPaletteRoyalBlueBorder2'; | ||
export declare type ColorPaletteDarkBlue = 'colorPaletteDarkBlueBackground1' | 'colorPaletteDarkBlueBackground2' | 'colorPaletteDarkBlueBackground3' | 'colorPaletteDarkBlueForeground1' | 'colorPaletteDarkBlueForeground2' | 'colorPaletteDarkBlueForeground3' | 'colorPaletteDarkBlueBorderActive' | 'colorPaletteDarkBlueBorder1' | 'colorPaletteDarkBlueBorder2'; | ||
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground1' | 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerBackground3' | 'colorPaletteCornflowerForeground1' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerForeground3' | 'colorPaletteCornflowerBorderActive' | 'colorPaletteCornflowerBorder1' | 'colorPaletteCornflowerBorder2'; | ||
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground1' | 'colorPaletteNavyBackground2' | 'colorPaletteNavyBackground3' | 'colorPaletteNavyForeground1' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyForeground3' | 'colorPaletteNavyBorderActive' | 'colorPaletteNavyBorder1' | 'colorPaletteNavyBorder2'; | ||
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground1' | 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderBackground3' | 'colorPaletteLavenderForeground1' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderForeground3' | 'colorPaletteLavenderBorderActive' | 'colorPaletteLavenderBorder1' | 'colorPaletteLavenderBorder2'; | ||
export declare type ColorPalettePurple = 'colorPalettePurpleBackground1' | 'colorPalettePurpleBackground2' | 'colorPalettePurpleBackground3' | 'colorPalettePurpleForeground1' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleForeground3' | 'colorPalettePurpleBorderActive' | 'colorPalettePurpleBorder1' | 'colorPalettePurpleBorder2'; | ||
export declare type ColorPaletteDarkPurple = 'colorPaletteDarkPurpleBackground1' | 'colorPaletteDarkPurpleBackground2' | 'colorPaletteDarkPurpleBackground3' | 'colorPaletteDarkPurpleForeground1' | 'colorPaletteDarkPurpleForeground2' | 'colorPaletteDarkPurpleForeground3' | 'colorPaletteDarkPurpleBorderActive' | 'colorPaletteDarkPurpleBorder1' | 'colorPaletteDarkPurpleBorder2'; | ||
export declare type ColorPaletteOrchid = 'colorPaletteOrchidBackground1' | 'colorPaletteOrchidBackground2' | 'colorPaletteOrchidBackground3' | 'colorPaletteOrchidForeground1' | 'colorPaletteOrchidForeground2' | 'colorPaletteOrchidForeground3' | 'colorPaletteOrchidBorderActive' | 'colorPaletteOrchidBorder1' | 'colorPaletteOrchidBorder2'; | ||
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground1' | 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeBackground3' | 'colorPaletteGrapeForeground1' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeForeground3' | 'colorPaletteGrapeBorderActive' | 'colorPaletteGrapeBorder1' | 'colorPaletteGrapeBorder2'; | ||
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2'; | ||
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground1' | 'colorPaletteLilacBackground2' | 'colorPaletteLilacBackground3' | 'colorPaletteLilacForeground1' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacForeground3' | 'colorPaletteLilacBorderActive' | 'colorPaletteLilacBorder1' | 'colorPaletteLilacBorder2'; | ||
export declare type ColorPalettePink = 'colorPalettePinkBackground1' | 'colorPalettePinkBackground2' | 'colorPalettePinkBackground3' | 'colorPalettePinkForeground1' | 'colorPalettePinkForeground2' | 'colorPalettePinkForeground3' | 'colorPalettePinkBorderActive' | 'colorPalettePinkBorder1' | 'colorPalettePinkBorder2'; | ||
export declare type ColorPaletteHotPink = 'colorPaletteHotPinkBackground1' | 'colorPaletteHotPinkBackground2' | 'colorPaletteHotPinkBackground3' | 'colorPaletteHotPinkForeground1' | 'colorPaletteHotPinkForeground2' | 'colorPaletteHotPinkForeground3' | 'colorPaletteHotPinkBorderActive' | 'colorPaletteHotPinkBorder1' | 'colorPaletteHotPinkBorder2'; | ||
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground1' | 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaBackground3' | 'colorPaletteMagentaForeground1' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaForeground3' | 'colorPaletteMagentaBorderActive' | 'colorPaletteMagentaBorder1' | 'colorPaletteMagentaBorder2'; | ||
export declare type ColorPalettePlum = 'colorPalettePlumBackground1' | 'colorPalettePlumBackground2' | 'colorPalettePlumBackground3' | 'colorPalettePlumForeground1' | 'colorPalettePlumForeground2' | 'colorPalettePlumForeground3' | 'colorPalettePlumBorderActive' | 'colorPalettePlumBorder1' | 'colorPalettePlumBorder2'; | ||
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground1' | 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeBackground3' | 'colorPaletteBeigeForeground1' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeForeground3' | 'colorPaletteBeigeBorderActive' | 'colorPaletteBeigeBorder1' | 'colorPaletteBeigeBorder2'; | ||
export declare type ColorPaletteMink = 'colorPaletteMinkBackground1' | 'colorPaletteMinkBackground2' | 'colorPaletteMinkBackground3' | 'colorPaletteMinkForeground1' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkForeground3' | 'colorPaletteMinkBorderActive' | 'colorPaletteMinkBorder1' | 'colorPaletteMinkBorder2'; | ||
export declare type ColorPaletteSilver = 'colorPaletteSilverBackground1' | 'colorPaletteSilverBackground2' | 'colorPaletteSilverBackground3' | 'colorPaletteSilverForeground1' | 'colorPaletteSilverForeground2' | 'colorPaletteSilverForeground3' | 'colorPaletteSilverBorderActive' | 'colorPaletteSilverBorder1' | 'colorPaletteSilverBorder2'; | ||
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground1' | 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumBackground3' | 'colorPalettePlatinumForeground1' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumForeground3' | 'colorPalettePlatinumBorderActive' | 'colorPalettePlatinumBorder1' | 'colorPalettePlatinumBorder2'; | ||
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground1' | 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorBackground3' | 'colorPaletteAnchorForeground1' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorForeground3' | 'colorPaletteAnchorBorderActive' | 'colorPaletteAnchorBorder1' | 'colorPaletteAnchorBorder2'; | ||
export declare type ColorPaletteCharcoal = 'colorPaletteCharcoalBackground1' | 'colorPaletteCharcoalBackground2' | 'colorPaletteCharcoalBackground3' | 'colorPaletteCharcoalForeground1' | 'colorPaletteCharcoalForeground2' | 'colorPaletteCharcoalForeground3' | 'colorPaletteCharcoalBorderActive' | 'colorPaletteCharcoalBorder1' | 'colorPaletteCharcoalBorder2'; | ||
export declare type ColorPaletteTokens = Record<ColorPaletteDarkRed | ColorPaletteBurgundy | ColorPaletteCranberry | ColorPaletteRed | ColorPaletteDarkOrange | ColorPaletteBronze | ColorPalettePumpkin | ColorPaletteOrange | ColorPalettePeach | ColorPaletteMarigold | ColorPaletteYellow | ColorPaletteGold | ColorPaletteBrass | ColorPaletteBrown | ColorPaletteDarkBrown | ColorPaletteLime | ColorPaletteForest | ColorPaletteSeafoam | ColorPaletteLightGreen | ColorPaletteGreen | ColorPaletteDarkGreen | ColorPaletteLightTeal | ColorPaletteTeal | ColorPaletteDarkTeal | ColorPaletteCyan | ColorPaletteSteel | ColorPaletteLightBlue | ColorPaletteBlue | ColorPaletteRoyalBlue | ColorPaletteDarkBlue | ColorPaletteCornflower | ColorPaletteNavy | ColorPaletteLavender | ColorPalettePurple | ColorPaletteDarkPurple | ColorPaletteOrchid | ColorPaletteGrape | ColorPaletteBerry | ColorPaletteLilac | ColorPalettePink | ColorPaletteHotPink | ColorPaletteMagenta | ColorPalettePlum | ColorPaletteBeige | ColorPaletteMink | ColorPaletteSilver | ColorPalettePlatinum | ColorPaletteAnchor | ColorPaletteCharcoal, string>; | ||
@@ -186,5 +218,4 @@ /** | ||
}; | ||
export declare type BrandVariants = ColorVariants & { | ||
shade60: string; | ||
}; | ||
export declare type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160; | ||
export declare type BrandVariants = Record<Brands, string>; | ||
/** | ||
@@ -310,30 +341,13 @@ * All the global shared colors and their shade/tint variants | ||
}; | ||
export declare type GhostColorTokens = { | ||
ghostBackground: string; | ||
ghostBackgroundHover: string; | ||
ghostBackgroundPressed: string; | ||
ghostBackgroundSelected: string; | ||
export declare type ShadowBrandTokens = { | ||
shadow2Brand: string; | ||
shadow4Brand: string; | ||
shadow8Brand: string; | ||
shadow16Brand: string; | ||
shadow28Brand: string; | ||
shadow64Brand: string; | ||
}; | ||
export declare type TransparentColorTokens = { | ||
transparentBackground: string; | ||
transparentBackgroundHover: string; | ||
transparentBackgroundPressed: string; | ||
transparentBackgroundSelected: string; | ||
}; | ||
export declare type BackgroundColorTokens = { | ||
background: string; | ||
backgroundHover: string; | ||
backgroundPressed: string; | ||
backgroundSelected: string; | ||
}; | ||
export declare type BrandColorTokens = { | ||
brandBackground: string; | ||
brandBackgroundHover: string; | ||
brandBackgroundPressed: string; | ||
brandBackgroundSelected: string; | ||
brandBackgroundStatic: string; | ||
}; | ||
export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100; | ||
export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens; | ||
export declare type PartialTheme = Partial<Theme>; |
@@ -1,9 +0,18 @@ | ||
import { __assign } from "tslib"; | ||
import { colorPaletteTokens, generateColorTokens } from '../alias/dark'; | ||
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; | ||
import { createShadowTokens } from './shadows'; | ||
export var createDarkTheme = function (brand) { | ||
var colorTokens = generateColorTokens(brand); | ||
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, borderRadius), fontSizes), lineHeights), fontFamilies), fontWeights), strokeWidths), colorTokens), colorPaletteTokens), createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
export const createDarkTheme = brand => { | ||
const colorTokens = generateColorTokens(brand); | ||
return { ...borderRadius, | ||
...fontSizes, | ||
...lineHeights, | ||
...fontFamilies, | ||
...fontWeights, | ||
...strokeWidths, | ||
...colorTokens, | ||
...colorPaletteTokens, | ||
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
//# sourceMappingURL=createDarkTheme.js.map |
@@ -1,9 +0,18 @@ | ||
import { __assign } from "tslib"; | ||
import { colorPaletteTokens, generateColorTokens } from '../alias/highContrast'; | ||
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; | ||
import { createShadowTokens } from './shadows'; | ||
export var createHighContrastTheme = function () { | ||
var colorTokens = generateColorTokens(); | ||
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, borderRadius), fontSizes), lineHeights), fontFamilies), fontWeights), strokeWidths), colorTokens), colorPaletteTokens), createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
export const createHighContrastTheme = () => { | ||
const colorTokens = generateColorTokens(); | ||
return { ...borderRadius, | ||
...fontSizes, | ||
...lineHeights, | ||
...fontFamilies, | ||
...fontWeights, | ||
...strokeWidths, | ||
...colorTokens, | ||
...colorPaletteTokens, | ||
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
//# sourceMappingURL=createHighContrastTheme.js.map |
@@ -1,9 +0,18 @@ | ||
import { __assign } from "tslib"; | ||
import { colorPaletteTokens, generateColorTokens } from '../alias/light'; | ||
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; | ||
import { createShadowTokens } from './shadows'; | ||
export var createLightTheme = function (brand) { | ||
var colorTokens = generateColorTokens(brand); | ||
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, borderRadius), fontSizes), lineHeights), fontFamilies), fontWeights), strokeWidths), colorTokens), colorPaletteTokens), createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
export const createLightTheme = brand => { | ||
const colorTokens = generateColorTokens(brand); | ||
return { ...borderRadius, | ||
...fontSizes, | ||
...lineHeights, | ||
...fontFamilies, | ||
...fontWeights, | ||
...strokeWidths, | ||
...colorTokens, | ||
...colorPaletteTokens, | ||
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
//# sourceMappingURL=createLightTheme.js.map |
@@ -1,9 +0,18 @@ | ||
import { __assign } from "tslib"; | ||
import { colorPaletteTokens, generateColorTokens } from '../alias/teamsDark'; | ||
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index'; | ||
import { createShadowTokens } from './shadows'; | ||
export var createTeamsDarkTheme = function (brand) { | ||
var colorTokens = generateColorTokens(brand); | ||
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, borderRadius), fontSizes), lineHeights), fontFamilies), fontWeights), strokeWidths), colorTokens), colorPaletteTokens), createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)); | ||
export const createTeamsDarkTheme = brand => { | ||
const colorTokens = generateColorTokens(brand); | ||
return { ...borderRadius, | ||
...fontSizes, | ||
...lineHeights, | ||
...fontFamilies, | ||
...fontWeights, | ||
...strokeWidths, | ||
...colorTokens, | ||
...colorPaletteTokens, | ||
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey), | ||
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand') | ||
}; | ||
}; | ||
//# sourceMappingURL=createTeamsDarkTheme.js.map |
@@ -6,2 +6,1 @@ export * from './createLightTheme'; | ||
export { mergeThemes } from './mergeThemes'; | ||
export * from './themeToCSSVariables'; |
@@ -6,3 +6,2 @@ export * from './createLightTheme'; | ||
export { mergeThemes } from './mergeThemes'; | ||
export * from './themeToCSSVariables'; | ||
//# sourceMappingURL=index.js.map |
@@ -1,6 +0,7 @@ | ||
import { __assign } from "tslib"; | ||
export function mergeThemes(a, b) { | ||
// Merge impacts perf: we should like to avoid it if it's possible | ||
if (a && b) { | ||
return __assign(__assign({}, a), b); | ||
return { ...a, | ||
...b | ||
}; | ||
} | ||
@@ -7,0 +8,0 @@ |
@@ -1,2 +0,3 @@ | ||
import type { ShadowTokens } from '../types'; | ||
import type { ShadowBrandTokens, ShadowTokens } from '../types'; | ||
export declare function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens; | ||
export declare function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens; |
@@ -1,11 +0,11 @@ | ||
export function createShadowTokens(ambientColor, keyColor) { | ||
export function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') { | ||
return { | ||
shadow2: "0 0 2px " + ambientColor + ", 0 1px 2px " + keyColor, | ||
shadow4: "0 0 2px " + ambientColor + ", 0 2px 4px " + keyColor, | ||
shadow8: "0 0 2px " + ambientColor + ", 0 4px 8px " + keyColor, | ||
shadow16: "0 0 2px " + ambientColor + ", 0 6px 16px " + keyColor, | ||
shadow28: "0 0 8px " + ambientColor + ", 0 14px 28px " + keyColor, | ||
shadow64: "0 0 8px " + ambientColor + ", 0 32px 64px " + keyColor | ||
[`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`, | ||
[`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`, | ||
[`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`, | ||
[`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`, | ||
[`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`, | ||
[`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}` | ||
}; | ||
} | ||
//# sourceMappingURL=shadows.js.map |
{ | ||
"name": "@fluentui/react-theme", | ||
"version": "0.0.0-nightly050f89bf0020211102.1", | ||
"version": "0.0.0-nightly07d9ed6d1b20211221.1", | ||
"description": "Fluent UI themes", | ||
@@ -21,7 +21,8 @@ "main": "lib-commonjs/index.js", | ||
"lint": "just-scripts lint", | ||
"start": "storybook", | ||
"start": "yarn storybook", | ||
"storybook": "start-storybook", | ||
"test": "jest", | ||
"docs": "api-extractor run --config=config/api-extractor.local.json --local", | ||
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-theme/src && yarn docs" | ||
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-theme/src && yarn docs", | ||
"type-check": "tsc -b tsconfig.json" | ||
}, | ||
@@ -46,3 +47,2 @@ "devDependencies": { | ||
"beachball": { | ||
"tag": "beta", | ||
"disallowedChangeTypes": [ | ||
@@ -49,0 +49,0 @@ "major", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
377352
5755
45
175