Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@fluentui/react-theme

Package Overview
Dependencies
Maintainers
13
Versions
755
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-theme - npm Package Compare versions

Comparing version 0.0.0-nightly050f89bf0020211102.1 to 0.0.0-nightly07d9ed6d1b20211221.1

84

CHANGELOG.json

@@ -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",

33

CHANGELOG.md
# 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 @@

167

dist/react-theme.d.ts

@@ -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 @@

269

lib-commonjs/alias/dark.js

@@ -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

269

lib-commonjs/alias/highContrast.js

@@ -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

269

lib-commonjs/alias/light.js

@@ -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

269

lib-commonjs/alias/teamsDark.js

@@ -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

1

lib-commonjs/global/brandColors.d.ts
import type { BrandVariants } from '../types';
export declare const brandWeb: BrandVariants;
export declare const brandTeams: BrandVariants;
export declare const brandOffice: BrandVariants;

82

lib-commonjs/global/brandColors.js

@@ -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

4

lib-commonjs/global/colors.d.ts
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";

226

lib-commonjs/global/colors.js

@@ -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

2

lib-commonjs/global/index.js

@@ -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);

2

lib-commonjs/index.d.ts
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';

2

lib-commonjs/index.js

@@ -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);

2

lib-commonjs/themes/index.js

@@ -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);

4

lib-commonjs/themes/teams/darkTheme.js

@@ -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

2

lib-commonjs/themes/teams/highContrastTheme.js

@@ -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

2

lib-commonjs/themes/teams/index.js

@@ -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);

4

lib-commonjs/themes/teams/lightTheme.js

@@ -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

4

lib-commonjs/themes/web/darkTheme.js

@@ -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

2

lib-commonjs/themes/web/highContrastTheme.js

@@ -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

2

lib-commonjs/themes/web/index.js

@@ -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);

4

lib-commonjs/themes/web/lightTheme.js

@@ -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

168

lib-commonjs/types.d.ts

@@ -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>;

24

lib-commonjs/utils/createDarkTheme.js

@@ -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 @@

24

lib-commonjs/utils/createHighContrastTheme.js

@@ -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 @@

24

lib-commonjs/utils/createLightTheme.js

@@ -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 @@

24

lib-commonjs/utils/createTeamsDarkTheme.js

@@ -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 @@

1

lib-commonjs/utils/index.d.ts

@@ -6,2 +6,1 @@ export * from './createLightTheme';

export { mergeThemes } from './mergeThemes';
export * from './themeToCSSVariables';

4

lib-commonjs/utils/index.js

@@ -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

6

lib-commonjs/utils/mergeThemes.js

@@ -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 @@

3

lib-commonjs/utils/shadows.d.ts

@@ -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;

14

lib-commonjs/utils/shadows.js

@@ -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 @@ }

268

lib/alias/dark.js

@@ -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

268

lib/alias/highContrast.js

@@ -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

268

lib/alias/light.js

@@ -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

268

lib/alias/teamsDark.js

@@ -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

2

lib/global/borderRadius.js

@@ -1,2 +0,2 @@

export var borderRadius = {
export const borderRadius = {
borderRadiusNone: '0',

@@ -3,0 +3,0 @@ borderRadiusSmall: '2px',

1

lib/global/brandColors.d.ts
import type { BrandVariants } from '../types';
export declare const brandWeb: BrandVariants;
export declare const brandTeams: BrandVariants;
export declare const brandOffice: BrandVariants;

84

lib/global/brandColors.js

@@ -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

4

lib/global/colors.d.ts
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";

248

lib/global/colors.js

@@ -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

8

lib/global/fonts.js

@@ -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",

2

lib/global/strokeWidths.js

@@ -1,2 +0,2 @@

export var strokeWidths = {
export const strokeWidths = {
strokeWidthThin: '1px',

@@ -3,0 +3,0 @@ strokeWidthThick: '2px',

2

lib/index.d.ts
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';

2

lib/themes/teams/darkTheme.js
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

2

lib/themes/teams/highContrastTheme.js
import { createHighContrastTheme } from '../../utils/createHighContrastTheme';
export var teamsHighContrastTheme = /*#__PURE__*/createHighContrastTheme();
export const teamsHighContrastTheme = /*#__PURE__*/createHighContrastTheme();
//# sourceMappingURL=highContrastTheme.js.map

2

lib/themes/teams/lightTheme.js
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

2

lib/themes/web/darkTheme.js
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

2

lib/themes/web/highContrastTheme.js
import { createHighContrastTheme } from '../../utils/createHighContrastTheme';
export var webHighContrastTheme = /*#__PURE__*/createHighContrastTheme();
export const webHighContrastTheme = /*#__PURE__*/createHighContrastTheme();
//# sourceMappingURL=highContrastTheme.js.map

2

lib/themes/web/lightTheme.js
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

168

lib/types.d.ts

@@ -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>;

17

lib/utils/createDarkTheme.js

@@ -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

17

lib/utils/createHighContrastTheme.js

@@ -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

17

lib/utils/createLightTheme.js

@@ -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

17

lib/utils/createTeamsDarkTheme.js

@@ -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

1

lib/utils/index.d.ts

@@ -6,2 +6,1 @@ export * from './createLightTheme';

export { mergeThemes } from './mergeThemes';
export * from './themeToCSSVariables';

1

lib/utils/index.js

@@ -6,3 +6,2 @@ export * from './createLightTheme';

export { mergeThemes } from './mergeThemes';
export * from './themeToCSSVariables';
//# sourceMappingURL=index.js.map

5

lib/utils/mergeThemes.js

@@ -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 @@

3

lib/utils/shadows.d.ts

@@ -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;

14

lib/utils/shadows.js

@@ -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

8

package.json
{
"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",

lib-commonjs/utils/themeToCSSVariables.d.ts
lib-commonjs/utils/themeToCSSVariables.js
lib-commonjs/utils/themeToCSSVariables.js.map
lib/utils/themeToCSSVariables.d.ts
lib/utils/themeToCSSVariables.js
lib/utils/themeToCSSVariables.js.map
lib-commonjs/alias/dark.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/alias/highContrast.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/alias/light.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/alias/teamsDark.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/global/brandColors.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/global/colors.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/teams/darkTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/teams/highContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/teams/lightTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/web/darkTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/web/highContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/themes/web/lightTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/createDarkTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/createHighContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/createLightTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/createTeamsDarkTheme.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/index.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/mergeThemes.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/shadows.js.map

Sorry, the diff of this file is not supported yet

lib/alias/dark.js.map

Sorry, the diff of this file is not supported yet

lib/alias/highContrast.js.map

Sorry, the diff of this file is not supported yet

lib/alias/light.js.map

Sorry, the diff of this file is not supported yet

lib/alias/teamsDark.js.map

Sorry, the diff of this file is not supported yet

lib/global/borderRadius.js.map

Sorry, the diff of this file is not supported yet

lib/global/brandColors.js.map

Sorry, the diff of this file is not supported yet

lib/global/colors.js.map

Sorry, the diff of this file is not supported yet

lib/global/fonts.js.map

Sorry, the diff of this file is not supported yet

lib/global/strokeWidths.js.map

Sorry, the diff of this file is not supported yet

lib/themes/teams/darkTheme.js.map

Sorry, the diff of this file is not supported yet

lib/themes/teams/highContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib/themes/teams/lightTheme.js.map

Sorry, the diff of this file is not supported yet

lib/themes/web/darkTheme.js.map

Sorry, the diff of this file is not supported yet

lib/themes/web/highContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib/themes/web/lightTheme.js.map

Sorry, the diff of this file is not supported yet

lib/utils/createDarkTheme.js.map

Sorry, the diff of this file is not supported yet

lib/utils/createHighContrastTheme.js.map

Sorry, the diff of this file is not supported yet

lib/utils/createLightTheme.js.map

Sorry, the diff of this file is not supported yet

lib/utils/createTeamsDarkTheme.js.map

Sorry, the diff of this file is not supported yet

lib/utils/index.js.map

Sorry, the diff of this file is not supported yet

lib/utils/mergeThemes.js.map

Sorry, the diff of this file is not supported yet

lib/utils/shadows.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc