@fluentui/react-theme - npm Package Compare versions

Comparing version 0.0.0-nightlyfbae36b19b20211111.1 to 0.0.0-nightlyfe9829e48120211112.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Thu, 11 Nov 2021 04:19:01 GMT",
-      "tag": "@fluentui/react-theme_v0.0.0-nightlyfbae36b19b20211111.1",
-      "version": "0.0.0-nightlyfbae36b19b20211111.1",
+      "date": "Fri, 12 Nov 2021 04:20:25 GMT",
+      "tag": "@fluentui/react-theme_v0.0.0-nightlyfe9829e48120211112.1",
+      "version": "0.0.0-nightlyfe9829e48120211112.1",
       "comments": {
@@ -14,3 +14,3 @@ "prerelease": [
             "package": "@fluentui/react-theme",
-            "commit": "b913f5d66978b4e311c72ff6ba9f00d5817ab025",
+            "commit": "142a7cc99189d401f2f98ff0ee2f1db652df8b72",
             "comment": "Release nightly v9"
@@ -23,2 +23,8 @@ },
             "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"
           }
@@ -25,0 +31,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Thu, 11 Nov 2021 04:19:01 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Nov 2021 04:20:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlyfbae36b19b20211111.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlyfbae36b19b20211111.1)
+## [0.0.0-nightlyfe9829e48120211112.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlyfe9829e48120211112.1)
 
-Thu, 11 Nov 2021 04:19:01 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v0.0.0-nightlyfbae36b19b20211111.1)
+Fri, 12 Nov 2021 04:20:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v0.0.0-nightlyfe9829e48120211112.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/b913f5d66978b4e311c72ff6ba9f00d5817ab025) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/142a7cc99189d401f2f98ff0ee2f1db652df8b72) by email not defined)
 - 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 +18,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

@@ -119,2 +119,5 @@ export declare type BorderRadiusTokens = {
     colorNeutralForeground1: string;
+    colorNeutralForeground1Hover: string;
+    colorNeutralForeground1Pressed: string;
+    colorNeutralForeground1Selected: string;
     colorNeutralForeground2: string;
@@ -136,2 +139,3 @@ colorNeutralForeground2Hover: string;
     colorNeutralForegroundDisabled: string;
+    colorNeutralForegroundInvertedDisabled: string;
     colorBrandForegroundLink: string;
@@ -147,2 +151,5 @@ colorBrandForegroundLinkHover: string;
     colorNeutralForegroundInverted: string;
+    colorNeutralForegroundInvertedHover: string;
+    colorNeutralForegroundInvertedPressed: string;
+    colorNeutralForegroundInvertedSelected: string;
     colorNeutralForegroundOnBrand: string;
@@ -153,2 +160,9 @@ colorNeutralForegroundInvertedLink: string;
     colorNeutralForegroundInvertedLinkSelected: string;
+    colorBrandForegroundInverted: string;
+    colorBrandForegroundInvertedHover: string;
+    colorBrandForegroundInvertedPressed: string;
+    colorBrandForegroundOnLight: string;
+    colorBrandForegroundOnLightHover: string;
+    colorBrandForegroundOnLightPressed: string;
+    colorBrandForegroundOnLightSelected: string;
     colorNeutralBackground1: string;
@@ -180,2 +194,9 @@ colorNeutralBackground1Hover: string;
     colorSubtleBackgroundSelected: string;
+    colorSubtleBackgroundLightAlphaHover: string;
+    colorSubtleBackgroundLightAlphaPressed: string;
+    colorSubtleBackgroundLightAlphaSelected: string;
+    colorSubtleBackgroundInverted: string;
+    colorSubtleBackgroundInvertedHover: string;
+    colorSubtleBackgroundInvertedPressed: string;
+    colorSubtleBackgroundInvertedSelected: string;
     colorTransparentBackground: string;
@@ -186,2 +207,3 @@ colorTransparentBackgroundHover: string;
     colorNeutralBackgroundDisabled: string;
+    colorNeutralBackgroundInvertedDisabled: string;
     colorNeutralStencil1: string;
@@ -198,2 +220,6 @@ colorNeutralStencil2: string;
     colorBrandBackground2: string;
+    colorBrandBackgroundInverted: string;
+    colorBrandBackgroundInvertedHover: string;
+    colorBrandBackgroundInvertedPressed: string;
+    colorBrandBackgroundInvertedSelected: string;
     colorNeutralStrokeAccessible: string;
@@ -209,2 +235,7 @@ colorNeutralStrokeAccessibleHover: string;
     colorNeutralStroke3: string;
+    colorNeutralStrokeOnBrand: string;
+    colorNeutralStrokeOnBrand2: string;
+    colorNeutralStrokeOnBrand2Hover: string;
+    colorNeutralStrokeOnBrand2Pressed: string;
+    colorNeutralStrokeOnBrand2Selected: string;
     colorBrandStroke1: string;
@@ -216,2 +247,3 @@ colorBrandStroke2: string;
     colorNeutralStrokeDisabled: string;
+    colorNeutralStrokeInvertedDisabled: string;
     colorTransparentStroke: string;
@@ -218,0 +250,0 @@ colorTransparentStrokeInteractive: string;

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],
@@ -29,2 +32,3 @@ colorNeutralForeground2Hover: colors_1.white,
   colorNeutralForegroundDisabled: colors_1.grey[36],
+  colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40],
   colorBrandForegroundLink: brand.tint10,
@@ -39,3 +43,6 @@ colorBrandForegroundLinkHover: brand.tint30,
   colorBrandForeground2: brand.tint30,
-  colorNeutralForegroundInverted: colors_1.grey[14],
+  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.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +101,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[8],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   colorNeutralStencil1: colors_1.grey[20],
@@ -92,2 +114,6 @@ colorNeutralStencil2: colors_1.grey[34],
   colorBrandBackground2: brand.shade40,
+  colorBrandBackgroundInverted: colors_1.white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: colors_1.grey[68],
@@ -103,2 +129,7 @@ colorNeutralStrokeAccessibleHover: colors_1.grey[74],
   colorNeutralStroke3: colors_1.grey[24],
+  colorNeutralStrokeOnBrand: colors_1.grey[16],
+  colorNeutralStrokeOnBrand2: colors_1.white,
+  colorNeutralStrokeOnBrand2Hover: colors_1.white,
+  colorNeutralStrokeOnBrand2Pressed: colors_1.white,
+  colorNeutralStrokeOnBrand2Selected: colors_1.white,
   colorBrandStroke1: brand.tint10,
@@ -110,2 +141,3 @@ colorBrandStroke2: brand.shade30,
   colorNeutralStrokeDisabled: colors_1.grey[26],
+  colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -112,0 +144,0 @@ colorTransparentStrokeInteractive: 'transparent',

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,
@@ -112,0 +144,0 @@ colorTransparentStrokeInteractive: colors_1.hcHighlight,

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],
@@ -29,2 +32,3 @@ colorNeutralForeground2Hover: colors_1.grey[14],
   colorNeutralForegroundDisabled: colors_1.grey[74],
+  colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40],
   colorBrandForegroundLink: brand.shade10,
@@ -40,2 +44,5 @@ colorBrandForegroundLinkHover: brand.shade20,
   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.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +101,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[94],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   colorNeutralStencil1: colors_1.grey[90],
@@ -92,2 +114,6 @@ colorNeutralStencil2: colors_1.grey[98],
   colorBrandBackground2: brand.tint60,
+  colorBrandBackgroundInverted: colors_1.white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: colors_1.grey[38],
@@ -103,2 +129,7 @@ colorNeutralStrokeAccessibleHover: colors_1.grey[34],
   colorNeutralStroke3: colors_1.grey[94],
+  colorNeutralStrokeOnBrand: colors_1.white,
+  colorNeutralStrokeOnBrand2: colors_1.white,
+  colorNeutralStrokeOnBrand2Hover: colors_1.white,
+  colorNeutralStrokeOnBrand2Pressed: colors_1.white,
+  colorNeutralStrokeOnBrand2Selected: colors_1.white,
   colorBrandStroke1: brand.primary,
@@ -110,2 +141,3 @@ colorBrandStroke2: brand.tint40,
   colorNeutralStrokeDisabled: colors_1.grey[88],
+  colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -112,0 +144,0 @@ colorTransparentStrokeInteractive: 'transparent',

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],
@@ -29,2 +32,3 @@ colorNeutralForeground2Hover: colors_1.white,
   colorNeutralForegroundDisabled: colors_1.grey[36],
+  colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40],
   colorBrandForegroundLink: brand.tint10,
@@ -40,2 +44,5 @@ colorBrandForegroundLinkHover: brand.tint30,
   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.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +101,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: colors_1.grey[8],
+  colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
   colorNeutralStencil1: colors_1.grey[20],
@@ -92,2 +114,6 @@ colorNeutralStencil2: colors_1.grey[34],
   colorBrandBackground2: brand.shade40,
+  colorBrandBackgroundInverted: colors_1.white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: colors_1.grey[68],
@@ -103,2 +129,7 @@ colorNeutralStrokeAccessibleHover: colors_1.grey[74],
   colorNeutralStroke3: colors_1.grey[24],
+  colorNeutralStrokeOnBrand: colors_1.grey[16],
+  colorNeutralStrokeOnBrand2: colors_1.white,
+  colorNeutralStrokeOnBrand2Hover: colors_1.white,
+  colorNeutralStrokeOnBrand2Pressed: colors_1.white,
+  colorNeutralStrokeOnBrand2Selected: colors_1.white,
   colorBrandStroke1: brand.tint10,
@@ -110,2 +141,3 @@ colorBrandStroke2: brand.shade30,
   colorNeutralStrokeDisabled: colors_1.grey[26],
+  colorNeutralStrokeInvertedDisabled: colors_1.whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -112,0 +144,0 @@ colorTransparentStrokeInteractive: 'transparent',

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/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;
@@ -105,0 +137,0 @@ colorTransparentStrokeInteractive: string;

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],
@@ -20,2 +23,3 @@ colorNeutralForeground2Hover: white,
   colorNeutralForegroundDisabled: grey[36],
+  colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
   colorBrandForegroundLink: brand.tint10,
@@ -30,3 +34,6 @@ colorBrandForegroundLinkHover: brand.tint30,
   colorBrandForeground2: brand.tint30,
-  colorNeutralForegroundInverted: grey[14],
+  colorNeutralForegroundInverted: white,
+  colorNeutralForegroundInvertedHover: white,
+  colorNeutralForegroundInvertedPressed: white,
+  colorNeutralForegroundInvertedSelected: white,
   colorNeutralForegroundOnBrand: white,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: white,
   colorNeutralForegroundInvertedLinkSelected: white,
+  colorBrandForegroundInverted: brand.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +92,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[8],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   colorNeutralStencil1: grey[20],
@@ -83,2 +105,6 @@ colorNeutralStencil2: grey[34],
   colorBrandBackground2: brand.shade40,
+  colorBrandBackgroundInverted: white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: grey[68],
@@ -94,2 +120,7 @@ colorNeutralStrokeAccessibleHover: grey[74],
   colorNeutralStroke3: grey[24],
+  colorNeutralStrokeOnBrand: grey[16],
+  colorNeutralStrokeOnBrand2: white,
+  colorNeutralStrokeOnBrand2Hover: white,
+  colorNeutralStrokeOnBrand2Pressed: white,
+  colorNeutralStrokeOnBrand2Selected: white,
   colorBrandStroke1: brand.tint10,
@@ -101,2 +132,3 @@ colorBrandStroke2: brand.shade30,
   colorNeutralStrokeDisabled: grey[26],
+  colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -103,0 +135,0 @@ colorTransparentStrokeInteractive: 'transparent',

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,
@@ -103,0 +135,0 @@ colorTransparentStrokeInteractive: hcHighlight,

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],
@@ -20,2 +23,3 @@ colorNeutralForeground2Hover: grey[14],
   colorNeutralForegroundDisabled: grey[74],
+  colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
   colorBrandForegroundLink: brand.shade10,
@@ -31,2 +35,5 @@ colorBrandForegroundLinkHover: brand.shade20,
   colorNeutralForegroundInverted: white,
+  colorNeutralForegroundInvertedHover: white,
+  colorNeutralForegroundInvertedPressed: white,
+  colorNeutralForegroundInvertedSelected: white,
   colorNeutralForegroundOnBrand: white,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: white,
   colorNeutralForegroundInvertedLinkSelected: white,
+  colorBrandForegroundInverted: brand.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +92,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[94],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   colorNeutralStencil1: grey[90],
@@ -83,2 +105,6 @@ colorNeutralStencil2: grey[98],
   colorBrandBackground2: brand.tint60,
+  colorBrandBackgroundInverted: white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: grey[38],
@@ -94,2 +120,7 @@ colorNeutralStrokeAccessibleHover: grey[34],
   colorNeutralStroke3: grey[94],
+  colorNeutralStrokeOnBrand: white,
+  colorNeutralStrokeOnBrand2: white,
+  colorNeutralStrokeOnBrand2Hover: white,
+  colorNeutralStrokeOnBrand2Pressed: white,
+  colorNeutralStrokeOnBrand2Selected: white,
   colorBrandStroke1: brand.primary,
@@ -101,2 +132,3 @@ colorBrandStroke2: brand.tint40,
   colorNeutralStrokeDisabled: grey[88],
+  colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -103,0 +135,0 @@ colorTransparentStrokeInteractive: 'transparent',

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],
@@ -20,2 +23,3 @@ colorNeutralForeground2Hover: white,
   colorNeutralForegroundDisabled: grey[36],
+  colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
   colorBrandForegroundLink: brand.tint10,
@@ -31,2 +35,5 @@ colorBrandForegroundLinkHover: brand.tint30,
   colorNeutralForegroundInverted: white,
+  colorNeutralForegroundInvertedHover: white,
+  colorNeutralForegroundInvertedPressed: white,
+  colorNeutralForegroundInvertedSelected: white,
   colorNeutralForegroundOnBrand: white,
@@ -37,2 +44,9 @@ colorNeutralForegroundInvertedLink: white,
   colorNeutralForegroundInvertedLinkSelected: white,
+  colorBrandForegroundInverted: brand.tint20,
+  colorBrandForegroundInvertedHover: brand.tint30,
+  colorBrandForegroundInvertedPressed: brand.tint20,
+  colorBrandForegroundOnLight: brand.primary,
+  colorBrandForegroundOnLightHover: brand.shade10,
+  colorBrandForegroundOnLightPressed: brand.shade30,
+  colorBrandForegroundOnLightSelected: brand.shade20,
   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,2 +92,3 @@ colorTransparentBackgroundHover: 'transparent',
   colorNeutralBackgroundDisabled: grey[8],
+  colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
   colorNeutralStencil1: grey[20],
@@ -83,2 +105,6 @@ colorNeutralStencil2: grey[34],
   colorBrandBackground2: brand.shade40,
+  colorBrandBackgroundInverted: white,
+  colorBrandBackgroundInvertedHover: brand.tint60,
+  colorBrandBackgroundInvertedPressed: brand.tint40,
+  colorBrandBackgroundInvertedSelected: brand.tint50,
   colorNeutralStrokeAccessible: grey[68],
@@ -94,2 +120,7 @@ colorNeutralStrokeAccessibleHover: grey[74],
   colorNeutralStroke3: grey[24],
+  colorNeutralStrokeOnBrand: grey[16],
+  colorNeutralStrokeOnBrand2: white,
+  colorNeutralStrokeOnBrand2Hover: white,
+  colorNeutralStrokeOnBrand2Pressed: white,
+  colorNeutralStrokeOnBrand2Selected: white,
   colorBrandStroke1: brand.tint10,
@@ -101,2 +132,3 @@ colorBrandStroke2: brand.shade30,
   colorNeutralStrokeDisabled: grey[26],
+  colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
   colorTransparentStroke: 'transparent',
@@ -103,0 +135,0 @@ colorTransparentStrokeInteractive: 'transparent',

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/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;
@@ -105,0 +137,0 @@ colorTransparentStrokeInteractive: string;

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "0.0.0-nightlyfbae36b19b20211111.1",
+  "version": "0.0.0-nightlyfe9829e48120211112.1",
   "description": "Fluent UI themes",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

365070

increased by8.63%

Lines of code

5694

increased by6.71%

No dependency changes