@fluentui/react-theme - npm Package Compare versions

Comparing version 0.0.0-nightlyed2d7c8d6320211111.1 to 0.0.0-nightlyf1be0a972820211214.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Thu, 11 Nov 2021 13:12:44 GMT",
-      "tag": "@fluentui/react-theme_v0.0.0-nightlyed2d7c8d6320211111.1",
-      "version": "0.0.0-nightlyed2d7c8d6320211111.1",
+      "date": "Tue, 14 Dec 2021 04:16:19 GMT",
+      "tag": "@fluentui/react-theme_v0.0.0-nightlyf1be0a972820211214.1",
+      "version": "0.0.0-nightlyf1be0a972820211214.1",
       "comments": {
@@ -14,6 +14,62 @@ "prerelease": [
             "package": "@fluentui/react-theme",
-            "commit": "69054b5abc9c52ffb203f51ad40b49d9729af7d9",
+            "commit": "3bda806f2deef1997fc6c070450a4a7aacb036ca",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "3ca42a594827a2ce3d5d18fcd4a399c92fda3bd7",
+            "comment": "updating brand colors"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "d7479a7414e636731b678aebb6bf6295fd607fda",
+            "comment": "Extend brand ramp from 13 to 16 tokens"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "c9a03954ffd5d1a85284fb36ef4cd103ed8aa927",
+            "comment": "Remove `themeToCSSVariables` function"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "8985d65f0aac448c6766d27800922224555be0f4",
+            "comment": "feat(react-theme) Add border1 color token for shared colors"
+          }
+        ]
+      }
+    },
+    {
+      "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": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "66670cf47c716e284c7ac7ae5f25d1f77f3aced3",
+            "comment": "update tooling configs"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "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": "[e-mail]",
@@ -23,3 +79,17 @@ "package": "@fluentui/react-theme",
             "comment": "Updated beta and RC components to ES2019"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "fe9829e4818f9bb7206df37747d5da332706ae4b",
+            "comment": "feat(react-theme): add/update design tokens"
           }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "00f70581480b536e723fb69edf0ae617beac4807",
+            "comment": "Remove beta release tag"
+          }
         ]
@@ -26,0 +96,0 @@ }

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Thu, 11 Nov 2021 13:12:44 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Dec 2021 04:16:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlyed2d7c8d6320211111.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlyed2d7c8d6320211111.1)
+## [0.0.0-nightlyf1be0a972820211214.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlyf1be0a972820211214.1)
 
-Thu, 11 Nov 2021 13:12:44 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v0.0.0-nightlyed2d7c8d6320211111.1)
+Tue, 14 Dec 2021 04:16:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightlyf1be0a972820211214.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/69054b5abc9c52ffb203f51ad40b49d9729af7d9) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/3bda806f2deef1997fc6c070450a4a7aacb036ca) by email not defined)
+- updating brand colors ([PR #20140](https://github.com/microsoft/fluentui/pull/20140) by [e-mail])
+- Extend brand ramp from 13 to 16 tokens ([PR #20884](https://github.com/microsoft/fluentui/pull/20884) by [e-mail])
+- Remove `themeToCSSVariables` function ([PR #20828](https://github.com/microsoft/fluentui/pull/20828) by [e-mail])
+- feat(react-theme) Add border1 color token for shared colors ([PR #20963](https://github.com/microsoft/fluentui/pull/20963) by [e-mail])
+
+## [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 [e-mail])
+
+## [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 [e-mail])
+- feat(react-theme): add/update design tokens ([PR #20569](https://github.com/microsoft/fluentui/pull/20569) by [e-mail])
 
@@ -17,0 +39,0 @@ ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-beta.2)

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

lib-commonjs/alias/dark.js

@@ -12,2 +12,5 @@ "use strict";
   colorNeutralForeground1: colors_1.white,
+  colorNeutralForeground1Hover: colors_1.white,
+  colorNeutralForeground1Pressed: colors_1.white,
+  colorNeutralForeground1Selected: colors_1.white,
   colorNeutralForeground2: colors_1.grey[84],
@@ -17,5 +20,5 @@ colorNeutralForeground2Hover: colors_1.white,
   colorNeutralForeground2Selected: colors_1.white,
-  colorNeutralForeground2BrandHover: brand.tint20,
-  colorNeutralForeground2BrandPressed: brand.tint10,
-  colorNeutralForeground2BrandSelected: brand.tint20,
+  colorNeutralForeground2BrandHover: brand[100],
+  colorNeutralForeground2BrandPressed: brand[90],
+  colorNeutralForeground2BrandSelected: brand[100],
   colorNeutralForeground3: colors_1.grey[68],
@@ -25,17 +28,21 @@ colorNeutralForeground3Hover: colors_1.grey[84],
   colorNeutralForeground3Selected: colors_1.grey[84],
-  colorNeutralForeground3BrandHover: brand.tint20,
-  colorNeutralForeground3BrandPressed: brand.tint10,
-  colorNeutralForeground3BrandSelected: brand.tint20,
+  colorNeutralForeground3BrandHover: brand[100],
+  colorNeutralForeground3BrandPressed: brand[90],
+  colorNeutralForeground3BrandSelected: brand[100],
   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],
+  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,
@@ -46,2 +53,9 @@ colorNeutralForegroundInvertedLink: 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],
@@ -68,3 +82,3 @@ colorNeutralBackground1Hover: colors_1.grey[24],
   colorNeutralBackground6: colors_1.grey[20],
-  colorNeutralBackgroundInverted: colors_1.white,
+  colorNeutralBackgroundInverted: colors_1.grey[24],
   colorSubtleBackground: 'transparent',
@@ -74,2 +88,9 @@ colorSubtleBackgroundHover: colors_1.grey[22],
   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',
@@ -80,17 +101,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[8],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   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,
+  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.tint20,
+  colorNeutralStrokeAccessibleSelected: brand[100],
   colorNeutralStroke1: colors_1.grey[40],
@@ -102,8 +128,14 @@ colorNeutralStroke1Hover: colors_1.grey[46],
   colorNeutralStroke3: colors_1.grey[24],
-  colorBrandStroke1: brand.tint10,
-  colorBrandStroke2: brand.shade30,
-  colorCompoundBrandStroke: brand.tint10,
-  colorCompoundBrandStrokeHover: brand.tint20,
-  colorCompoundBrandStrokePressed: brand.primary,
+  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',
@@ -121,3 +153,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -136,2 +169,3 @@
     [`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].tint30,
+    [`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].primary,
     [`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].tint20
@@ -138,0 +172,0 @@ };

lib-commonjs/alias/highContrast.js

@@ -12,2 +12,5 @@ "use strict";
   colorNeutralForeground1: colors_1.hcCanvasText,
+  colorNeutralForeground1Hover: colors_1.hcHighlightText,
+  colorNeutralForeground1Pressed: colors_1.hcHighlightText,
+  colorNeutralForeground1Selected: colors_1.hcHighlightText,
   colorNeutralForeground2: colors_1.hcCanvasText,
@@ -29,2 +32,3 @@ colorNeutralForeground2Hover: colors_1.hcHighlightText,
   colorNeutralForegroundDisabled: colors_1.hcDisabled,
+  colorNeutralForegroundInvertedDisabled: colors_1.hcDisabled,
   colorBrandForegroundLink: colors_1.hcHyperlink,
@@ -39,3 +43,6 @@ colorBrandForegroundLinkHover: colors_1.hcHyperlink,
   colorBrandForeground2: colors_1.hcButtonText,
-  colorNeutralForegroundInverted: colors_1.hcCanvas,
+  colorNeutralForegroundInverted: colors_1.hcCanvasText,
+  colorNeutralForegroundInvertedHover: colors_1.hcHighlightText,
+  colorNeutralForegroundInvertedPressed: colors_1.hcHighlightText,
+  colorNeutralForegroundInvertedSelected: colors_1.hcHighlightText,
   colorNeutralForegroundOnBrand: colors_1.hcButtonText,
@@ -46,2 +53,9 @@ colorNeutralForegroundInvertedLink: 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,
@@ -68,3 +82,3 @@ colorNeutralBackground1Hover: colors_1.hcHighlight,
   colorNeutralBackground6: colors_1.hcCanvas,
-  colorNeutralBackgroundInverted: colors_1.hcCanvasText,
+  colorNeutralBackgroundInverted: colors_1.hcCanvas,
   colorSubtleBackground: 'transparent',
@@ -74,2 +88,9 @@ colorSubtleBackgroundHover: 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',
@@ -80,2 +101,3 @@ colorTransparentBackgroundHover: colors_1.hcHighlight,
   colorNeutralBackgroundDisabled: colors_1.hcCanvas,
+  colorNeutralBackgroundInvertedDisabled: colors_1.hcCanvas,
   colorNeutralStencil1: colors_1.grey[8],
@@ -92,2 +114,6 @@ colorNeutralStencil2: colors_1.grey[52],
   colorBrandBackground2: colors_1.hcButtonFace,
+  colorBrandBackgroundInverted: colors_1.hcButtonFace,
+  colorBrandBackgroundInvertedHover: colors_1.hcHighlight,
+  colorBrandBackgroundInvertedPressed: colors_1.hcHighlight,
+  colorBrandBackgroundInvertedSelected: colors_1.hcHighlight,
   colorNeutralStrokeAccessible: colors_1.hcCanvasText,
@@ -103,2 +129,7 @@ colorNeutralStrokeAccessibleHover: colors_1.hcHighlight,
   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,
@@ -110,2 +141,3 @@ colorBrandStroke2: colors_1.hcCanvas,
   colorNeutralStrokeDisabled: colors_1.hcDisabled,
+  colorNeutralStrokeInvertedDisabled: colors_1.hcDisabled,
   colorTransparentStroke: colors_1.hcCanvasText,
@@ -123,3 +155,4 @@ colorTransparentStrokeInteractive: colors_1.hcHighlight,
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -138,2 +171,3 @@
     [`colorPalette${color}BorderActive`]: colors_1.hcHighlight,
+    [`colorPalette${color}Border1`]: colors_1.white,
     [`colorPalette${color}Border2`]: colors_1.white
@@ -140,0 +174,0 @@ };

lib-commonjs/alias/light.js

@@ -12,2 +12,5 @@ "use strict";
   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],
@@ -17,5 +20,5 @@ colorNeutralForeground2Hover: colors_1.grey[14],
   colorNeutralForeground2Selected: colors_1.grey[14],
-  colorNeutralForeground2BrandHover: brand.primary,
-  colorNeutralForeground2BrandPressed: brand.shade10,
-  colorNeutralForeground2BrandSelected: brand.primary,
+  colorNeutralForeground2BrandHover: brand[80],
+  colorNeutralForeground2BrandPressed: brand[70],
+  colorNeutralForeground2BrandSelected: brand[80],
   colorNeutralForeground3: colors_1.grey[38],
@@ -25,17 +28,21 @@ colorNeutralForeground3Hover: colors_1.grey[26],
   colorNeutralForeground3Selected: colors_1.grey[26],
-  colorNeutralForeground3BrandHover: brand.primary,
-  colorNeutralForeground3BrandPressed: brand.shade10,
-  colorNeutralForeground3BrandSelected: brand.primary,
+  colorNeutralForeground3BrandHover: brand[80],
+  colorNeutralForeground3BrandPressed: brand[70],
+  colorNeutralForeground3BrandSelected: brand[80],
   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,
+  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,
@@ -46,2 +53,9 @@ colorNeutralForegroundInvertedLink: 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,
@@ -68,3 +82,3 @@ colorNeutralBackground1Hover: colors_1.grey[96],
   colorNeutralBackground6: colors_1.grey[90],
-  colorNeutralBackgroundInverted: colors_1.grey[38],
+  colorNeutralBackgroundInverted: colors_1.grey[20],
   colorSubtleBackground: 'transparent',
@@ -74,2 +88,9 @@ colorSubtleBackgroundHover: colors_1.grey[96],
   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',
@@ -80,17 +101,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[94],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   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,
+  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.primary,
+  colorNeutralStrokeAccessibleSelected: brand[80],
   colorNeutralStroke1: colors_1.grey[82],
@@ -102,8 +128,14 @@ colorNeutralStroke1Hover: colors_1.grey[78],
   colorNeutralStroke3: colors_1.grey[94],
-  colorBrandStroke1: brand.primary,
-  colorBrandStroke2: brand.tint40,
-  colorCompoundBrandStroke: brand.primary,
-  colorCompoundBrandStrokeHover: brand.shade10,
-  colorCompoundBrandStrokePressed: brand.shade20,
+  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',
@@ -121,3 +153,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -136,2 +169,3 @@
     [`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].primary,
+    [`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].tint40,
     [`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].primary
@@ -138,0 +172,0 @@ };

lib-commonjs/alias/teamsDark.js

@@ -12,2 +12,5 @@ "use strict";
   colorNeutralForeground1: colors_1.white,
+  colorNeutralForeground1Hover: colors_1.white,
+  colorNeutralForeground1Pressed: colors_1.white,
+  colorNeutralForeground1Selected: colors_1.white,
   colorNeutralForeground2: colors_1.grey[84],
@@ -17,5 +20,5 @@ colorNeutralForeground2Hover: colors_1.white,
   colorNeutralForeground2Selected: colors_1.white,
-  colorNeutralForeground2BrandHover: brand.tint20,
-  colorNeutralForeground2BrandPressed: brand.tint10,
-  colorNeutralForeground2BrandSelected: brand.tint20,
+  colorNeutralForeground2BrandHover: brand[100],
+  colorNeutralForeground2BrandPressed: brand[90],
+  colorNeutralForeground2BrandSelected: brand[100],
   colorNeutralForeground3: colors_1.grey[68],
@@ -25,17 +28,21 @@ colorNeutralForeground3Hover: colors_1.grey[84],
   colorNeutralForeground3Selected: colors_1.grey[84],
-  colorNeutralForeground3BrandHover: brand.tint20,
-  colorNeutralForeground3BrandPressed: brand.tint10,
-  colorNeutralForeground3BrandSelected: brand.tint20,
+  colorNeutralForeground3BrandHover: brand[100],
+  colorNeutralForeground3BrandPressed: brand[90],
+  colorNeutralForeground3BrandSelected: brand[100],
   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,
+  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,
@@ -46,2 +53,9 @@ colorNeutralForegroundInvertedLink: 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],
@@ -68,3 +82,3 @@ colorNeutralBackground1Hover: colors_1.grey[24],
   colorNeutralBackground6: colors_1.grey[20],
-  colorNeutralBackgroundInverted: colors_1.white,
+  colorNeutralBackgroundInverted: colors_1.grey[24],
   colorSubtleBackground: 'transparent',
@@ -74,2 +88,9 @@ colorSubtleBackgroundHover: colors_1.grey[22],
   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',
@@ -80,17 +101,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[8],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   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,
+  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.tint20,
+  colorNeutralStrokeAccessibleSelected: brand[100],
   colorNeutralStroke1: colors_1.grey[40],
@@ -102,8 +128,14 @@ colorNeutralStroke1Hover: colors_1.grey[46],
   colorNeutralStroke3: colors_1.grey[24],
-  colorBrandStroke1: brand.tint10,
-  colorBrandStroke2: brand.shade30,
-  colorCompoundBrandStroke: brand.tint10,
-  colorCompoundBrandStrokeHover: brand.tint20,
-  colorCompoundBrandStrokePressed: brand.primary,
+  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',
@@ -121,3 +153,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -136,2 +169,3 @@
     [`colorPalette${color}BorderActive`]: colors_1.sharedColors[sharedColor].tint30,
+    [`colorPalette${color}Border1`]: colors_1.sharedColors[sharedColor].primary,
     [`colorPalette${color}Border2`]: colors_1.sharedColors[sharedColor].tint20
@@ -138,0 +172,0 @@ };

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;

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

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

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';
@@ -770,14 +770,14 @@ exports.hcHighlight = '#1aebff';
 const 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'
+  shade50: '#090909',
+  shade40: '#111111',
+  shade30: '#202020',
+  shade20: '#2b2b2b',
+  shade10: '#333333',
+  primary: '#393939',
+  tint10: '#515151',
+  tint20: '#686868',
+  tint30: '#888888',
+  tint40: '#c4c4c4',
+  tint50: '#dfdfdf',
+  tint60: '#f7f7f7'
 };
@@ -784,0 +784,0 @@ exports.sharedColors = {

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

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

lib-commonjs/utils/createDarkTheme.js

@@ -24,3 +24,4 @@ "use strict";
     ...dark_1.colorPaletteTokens,
-    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
@@ -27,0 +28,0 @@ };

lib-commonjs/utils/createHighContrastTheme.js

@@ -24,3 +24,4 @@ "use strict";
     ...highContrast_1.colorPaletteTokens,
-    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
@@ -27,0 +28,0 @@ };

lib-commonjs/utils/createLightTheme.js

@@ -24,3 +24,4 @@ "use strict";
     ...light_1.colorPaletteTokens,
-    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
@@ -27,0 +28,0 @@ };

lib-commonjs/utils/createTeamsDarkTheme.js

@@ -24,3 +24,4 @@ "use strict";
     ...teamsDark_1.colorPaletteTokens,
-    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
@@ -27,0 +28,0 @@ };

lib-commonjs/utils/index.d.ts

@@ -6,2 +6,1 @@ export * from './createLightTheme';
 export { mergeThemes } from './mergeThemes';
-export * from './themeToCSSVariables';

lib-commonjs/utils/index.js

@@ -26,4 +26,2 @@ "use strict";
 });
-
-tslib_1.__exportStar(require("./themeToCSSVariables"), exports);
 //# sourceMappingURL=index.js.map

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;

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

lib/alias/dark.js

@@ -1,4 +0,7 @@
-import { black, grey, white, sharedColors } from '../global/colors';
+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],
@@ -8,5 +11,5 @@ colorNeutralForeground2Hover: white,
   colorNeutralForeground2Selected: white,
-  colorNeutralForeground2BrandHover: brand.tint20,
-  colorNeutralForeground2BrandPressed: brand.tint10,
-  colorNeutralForeground2BrandSelected: brand.tint20,
+  colorNeutralForeground2BrandHover: brand[100],
+  colorNeutralForeground2BrandPressed: brand[90],
+  colorNeutralForeground2BrandSelected: brand[100],
   colorNeutralForeground3: grey[68],
@@ -16,17 +19,21 @@ colorNeutralForeground3Hover: grey[84],
   colorNeutralForeground3Selected: grey[84],
-  colorNeutralForeground3BrandHover: brand.tint20,
-  colorNeutralForeground3BrandPressed: brand.tint10,
-  colorNeutralForeground3BrandSelected: brand.tint20,
+  colorNeutralForeground3BrandHover: brand[100],
+  colorNeutralForeground3BrandPressed: brand[90],
+  colorNeutralForeground3BrandSelected: brand[100],
   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],
+  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,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: 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],
@@ -59,3 +73,3 @@ colorNeutralBackground1Hover: grey[24],
   colorNeutralBackground6: grey[20],
-  colorNeutralBackgroundInverted: white,
+  colorNeutralBackgroundInverted: grey[24],
   colorSubtleBackground: 'transparent',
@@ -65,2 +79,9 @@ colorSubtleBackgroundHover: grey[22],
   colorSubtleBackgroundSelected: grey[20],
+  colorSubtleBackgroundLightAlphaHover: whiteAlpha[10],
+  colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5],
+  colorSubtleBackgroundLightAlphaSelected: 'transparent',
+  colorSubtleBackgroundInverted: 'transparent',
+  colorSubtleBackgroundInvertedHover: blackAlpha[10],
+  colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+  colorSubtleBackgroundInvertedSelected: blackAlpha[20],
   colorTransparentBackground: 'transparent',
@@ -71,17 +92,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[8],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   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,
+  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.tint20,
+  colorNeutralStrokeAccessibleSelected: brand[100],
   colorNeutralStroke1: grey[40],
@@ -93,8 +119,14 @@ colorNeutralStroke1Hover: grey[46],
   colorNeutralStroke3: grey[24],
-  colorBrandStroke1: brand.tint10,
-  colorBrandStroke2: brand.shade30,
-  colorCompoundBrandStroke: brand.tint10,
-  colorCompoundBrandStrokeHover: brand.tint20,
-  colorCompoundBrandStrokePressed: brand.primary,
+  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',
@@ -112,3 +144,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -125,2 +158,3 @@ export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => {
     [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30,
+    [`colorPalette${color}Border1`]: sharedColors[sharedColor].primary,
     [`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20
@@ -127,0 +161,0 @@ };

lib/alias/highContrast.js

@@ -1,4 +0,7 @@
-import { hcCanvasText, hcHighlightText, hcDisabled, hcHyperlink, hcHighlight, hcButtonText, hcCanvas, hcButtonFace, grey, sharedColors, white, black } from '../global/colors';
+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,
@@ -20,2 +23,3 @@ colorNeutralForeground2Hover: hcHighlightText,
   colorNeutralForegroundDisabled: hcDisabled,
+  colorNeutralForegroundInvertedDisabled: hcDisabled,
   colorBrandForegroundLink: hcHyperlink,
@@ -30,3 +34,6 @@ colorBrandForegroundLinkHover: hcHyperlink,
   colorBrandForeground2: hcButtonText,
-  colorNeutralForegroundInverted: hcCanvas,
+  colorNeutralForegroundInverted: hcCanvasText,
+  colorNeutralForegroundInvertedHover: hcHighlightText,
+  colorNeutralForegroundInvertedPressed: hcHighlightText,
+  colorNeutralForegroundInvertedSelected: hcHighlightText,
   colorNeutralForegroundOnBrand: hcButtonText,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: hcHyperlink,
   colorNeutralForegroundInvertedLinkSelected: hcHyperlink,
+  colorBrandForegroundInverted: hcCanvasText,
+  colorBrandForegroundInvertedHover: hcCanvasText,
+  colorBrandForegroundInvertedPressed: hcCanvasText,
+  colorBrandForegroundOnLight: hcButtonText,
+  colorBrandForegroundOnLightHover: hcHighlightText,
+  colorBrandForegroundOnLightPressed: hcHighlightText,
+  colorBrandForegroundOnLightSelected: hcHighlightText,
   colorNeutralBackground1: hcCanvas,
@@ -59,3 +73,3 @@ colorNeutralBackground1Hover: hcHighlight,
   colorNeutralBackground6: hcCanvas,
-  colorNeutralBackgroundInverted: hcCanvasText,
+  colorNeutralBackgroundInverted: hcCanvas,
   colorSubtleBackground: 'transparent',
@@ -65,2 +79,9 @@ colorSubtleBackgroundHover: hcHighlight,
   colorSubtleBackgroundSelected: hcHighlight,
+  colorSubtleBackgroundLightAlphaHover: hcHighlight,
+  colorSubtleBackgroundLightAlphaPressed: hcHighlight,
+  colorSubtleBackgroundLightAlphaSelected: hcHighlight,
+  colorSubtleBackgroundInverted: 'transparent',
+  colorSubtleBackgroundInvertedHover: hcHighlight,
+  colorSubtleBackgroundInvertedPressed: hcHighlight,
+  colorSubtleBackgroundInvertedSelected: hcHighlight,
   colorTransparentBackground: 'transparent',
@@ -71,2 +92,3 @@ colorTransparentBackgroundHover: hcHighlight,
   colorNeutralBackgroundDisabled: hcCanvas,
+  colorNeutralBackgroundInvertedDisabled: hcCanvas,
   colorNeutralStencil1: grey[8],
@@ -83,2 +105,6 @@ colorNeutralStencil2: grey[52],
   colorBrandBackground2: hcButtonFace,
+  colorBrandBackgroundInverted: hcButtonFace,
+  colorBrandBackgroundInvertedHover: hcHighlight,
+  colorBrandBackgroundInvertedPressed: hcHighlight,
+  colorBrandBackgroundInvertedSelected: hcHighlight,
   colorNeutralStrokeAccessible: hcCanvasText,
@@ -94,2 +120,7 @@ colorNeutralStrokeAccessibleHover: hcHighlight,
   colorNeutralStroke3: hcCanvasText,
+  colorNeutralStrokeOnBrand: hcCanvas,
+  colorNeutralStrokeOnBrand2: hcCanvasText,
+  colorNeutralStrokeOnBrand2Hover: hcCanvasText,
+  colorNeutralStrokeOnBrand2Pressed: hcCanvasText,
+  colorNeutralStrokeOnBrand2Selected: hcCanvasText,
   colorBrandStroke1: hcCanvasText,
@@ -101,2 +132,3 @@ colorBrandStroke2: hcCanvas,
   colorNeutralStrokeDisabled: hcDisabled,
+  colorNeutralStrokeInvertedDisabled: hcDisabled,
   colorTransparentStroke: hcCanvasText,
@@ -114,3 +146,4 @@ colorTransparentStrokeInteractive: hcHighlight,
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -127,2 +160,3 @@ export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => {
     [`colorPalette${color}BorderActive`]: hcHighlight,
+    [`colorPalette${color}Border1`]: white,
     [`colorPalette${color}Border2`]: white
@@ -129,0 +163,0 @@ };

lib/alias/light.js

@@ -1,4 +0,7 @@
-import { black, grey, white, sharedColors } from '../global/colors';
+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],
@@ -8,5 +11,5 @@ colorNeutralForeground2Hover: grey[14],
   colorNeutralForeground2Selected: grey[14],
-  colorNeutralForeground2BrandHover: brand.primary,
-  colorNeutralForeground2BrandPressed: brand.shade10,
-  colorNeutralForeground2BrandSelected: brand.primary,
+  colorNeutralForeground2BrandHover: brand[80],
+  colorNeutralForeground2BrandPressed: brand[70],
+  colorNeutralForeground2BrandSelected: brand[80],
   colorNeutralForeground3: grey[38],
@@ -16,17 +19,21 @@ colorNeutralForeground3Hover: grey[26],
   colorNeutralForeground3Selected: grey[26],
-  colorNeutralForeground3BrandHover: brand.primary,
-  colorNeutralForeground3BrandPressed: brand.shade10,
-  colorNeutralForeground3BrandSelected: brand.primary,
+  colorNeutralForeground3BrandHover: brand[80],
+  colorNeutralForeground3BrandPressed: brand[70],
+  colorNeutralForeground3BrandSelected: brand[80],
   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,
+  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,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: 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,
@@ -59,3 +73,3 @@ colorNeutralBackground1Hover: grey[96],
   colorNeutralBackground6: grey[90],
-  colorNeutralBackgroundInverted: grey[38],
+  colorNeutralBackgroundInverted: grey[20],
   colorSubtleBackground: 'transparent',
@@ -65,2 +79,9 @@ colorSubtleBackgroundHover: grey[96],
   colorSubtleBackgroundSelected: grey[92],
+  colorSubtleBackgroundLightAlphaHover: whiteAlpha[80],
+  colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50],
+  colorSubtleBackgroundLightAlphaSelected: 'transparent',
+  colorSubtleBackgroundInverted: 'transparent',
+  colorSubtleBackgroundInvertedHover: blackAlpha[10],
+  colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+  colorSubtleBackgroundInvertedSelected: blackAlpha[20],
   colorTransparentBackground: 'transparent',
@@ -71,17 +92,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[94],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   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,
+  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.primary,
+  colorNeutralStrokeAccessibleSelected: brand[80],
   colorNeutralStroke1: grey[82],
@@ -93,8 +119,14 @@ colorNeutralStroke1Hover: grey[78],
   colorNeutralStroke3: grey[94],
-  colorBrandStroke1: brand.primary,
-  colorBrandStroke2: brand.tint40,
-  colorCompoundBrandStroke: brand.primary,
-  colorCompoundBrandStrokeHover: brand.shade10,
-  colorCompoundBrandStrokePressed: brand.shade20,
+  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',
@@ -112,3 +144,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -125,2 +158,3 @@ export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => {
     [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].primary,
+    [`colorPalette${color}Border1`]: sharedColors[sharedColor].tint40,
     [`colorPalette${color}Border2`]: sharedColors[sharedColor].primary
@@ -127,0 +161,0 @@ };

lib/alias/teamsDark.js

@@ -1,4 +0,7 @@
-import { black, grey, white, sharedColors } from '../global/colors';
+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],
@@ -8,5 +11,5 @@ colorNeutralForeground2Hover: white,
   colorNeutralForeground2Selected: white,
-  colorNeutralForeground2BrandHover: brand.tint20,
-  colorNeutralForeground2BrandPressed: brand.tint10,
-  colorNeutralForeground2BrandSelected: brand.tint20,
+  colorNeutralForeground2BrandHover: brand[100],
+  colorNeutralForeground2BrandPressed: brand[90],
+  colorNeutralForeground2BrandSelected: brand[100],
   colorNeutralForeground3: grey[68],
@@ -16,17 +19,21 @@ colorNeutralForeground3Hover: grey[84],
   colorNeutralForeground3Selected: grey[84],
-  colorNeutralForeground3BrandHover: brand.tint20,
-  colorNeutralForeground3BrandPressed: brand.tint10,
-  colorNeutralForeground3BrandSelected: brand.tint20,
+  colorNeutralForeground3BrandHover: brand[100],
+  colorNeutralForeground3BrandPressed: brand[90],
+  colorNeutralForeground3BrandSelected: brand[100],
   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,
+  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,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: 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],
@@ -59,3 +73,3 @@ colorNeutralBackground1Hover: grey[24],
   colorNeutralBackground6: grey[20],
-  colorNeutralBackgroundInverted: white,
+  colorNeutralBackgroundInverted: grey[24],
   colorSubtleBackground: 'transparent',
@@ -65,2 +79,9 @@ colorSubtleBackgroundHover: grey[22],
   colorSubtleBackgroundSelected: grey[20],
+  colorSubtleBackgroundLightAlphaHover: whiteAlpha[10],
+  colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5],
+  colorSubtleBackgroundLightAlphaSelected: 'transparent',
+  colorSubtleBackgroundInverted: 'transparent',
+  colorSubtleBackgroundInvertedHover: blackAlpha[10],
+  colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+  colorSubtleBackgroundInvertedSelected: blackAlpha[20],
   colorTransparentBackground: 'transparent',
@@ -71,17 +92,22 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[8],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   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,
+  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.tint20,
+  colorNeutralStrokeAccessibleSelected: brand[100],
   colorNeutralStroke1: grey[40],
@@ -93,8 +119,14 @@ colorNeutralStroke1Hover: grey[46],
   colorNeutralStroke3: grey[24],
-  colorBrandStroke1: brand.tint10,
-  colorBrandStroke2: brand.shade30,
-  colorCompoundBrandStroke: brand.tint10,
-  colorCompoundBrandStrokeHover: brand.tint20,
-  colorCompoundBrandStrokePressed: brand.primary,
+  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',
@@ -112,3 +144,4 @@ colorTransparentStrokeInteractive: 'transparent',
   colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-  colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+  colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
+
 });
@@ -125,2 +158,3 @@ export const colorPaletteTokens = /*#__PURE__*/Object.keys(sharedColors).reduce((acc, sharedColor) => {
     [`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30,
+    [`colorPalette${color}Border1`]: sharedColors[sharedColor].primary,
     [`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20
@@ -127,0 +161,0 @@ };

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;

lib/global/brandColors.js

@@ -1,33 +0,55 @@
-// TODO: values should be set per product theme
 export const 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`
+};
 export const 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`
 };
+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

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

lib/global/colors.js

@@ -54,4 +54,2 @@ export const grey = {
 };
-export const white = '#ffffff';
-export const black = '#000000';
 export const whiteAlpha = {
@@ -81,2 +79,4 @@ '5': 'rgba(255, 255, 255, 0.05)',
 };
+export const white = '#ffffff';
+export const black = '#000000';
 export const hcHyperlink = '#ffff00';
@@ -763,14 +763,14 @@ export const hcHighlight = '#1aebff';
 const 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'
+  shade50: '#090909',
+  shade40: '#111111',
+  shade30: '#202020',
+  shade20: '#2b2b2b',
+  shade10: '#333333',
+  primary: '#393939',
+  tint10: '#515151',
+  tint20: '#686868',
+  tint30: '#888888',
+  tint40: '#c4c4c4',
+  tint50: '#dfdfdf',
+  tint60: '#f7f7f7'
 };
@@ -777,0 +777,0 @@ export const sharedColors = {

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

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

lib/utils/createDarkTheme.js

@@ -14,5 +14,6 @@ import { colorPaletteTokens, generateColorTokens } from '../alias/dark';
     ...colorPaletteTokens,
-    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
 };
 //# sourceMappingURL=createDarkTheme.js.map

lib/utils/createHighContrastTheme.js

@@ -14,5 +14,6 @@ import { colorPaletteTokens, generateColorTokens } from '../alias/highContrast';
     ...colorPaletteTokens,
-    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
 };
 //# sourceMappingURL=createHighContrastTheme.js.map

lib/utils/createLightTheme.js

@@ -14,5 +14,6 @@ import { colorPaletteTokens, generateColorTokens } from '../alias/light';
     ...colorPaletteTokens,
-    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
 };
 //# sourceMappingURL=createLightTheme.js.map

lib/utils/createTeamsDarkTheme.js

@@ -14,5 +14,6 @@ import { colorPaletteTokens, generateColorTokens } from '../alias/teamsDark';
     ...colorPaletteTokens,
-    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
+    ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
   };
 };
 //# sourceMappingURL=createTeamsDarkTheme.js.map

lib/utils/index.d.ts

@@ -6,2 +6,1 @@ export * from './createLightTheme';
 export { mergeThemes } from './mergeThemes';
-export * from './themeToCSSVariables';

lib/utils/index.js

@@ -6,3 +6,2 @@ export * from './createLightTheme';
 export { mergeThemes } from './mergeThemes';
-export * from './themeToCSSVariables';
 //# sourceMappingURL=index.js.map

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;

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

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "0.0.0-nightlyed2d7c8d6320211111.1",
+  "version": "0.0.0-nightlyf1be0a972820211214.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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

377352

increased by12.29%

Lines of code

5755

increased by7.85%

Worsened metrics

Number of package files

175

decreased by-3.31%

No dependency changes