@fluentui/react-theme - npm Package Compare versions

Comparing version 9.0.0-alpha.23 to 9.0.0-alpha.24

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Tue, 21 Sep 2021 07:40:35 GMT",
+      "date": "Wed, 29 Sep 2021 08:05:12 GMT",
+      "tag": "@fluentui/react-theme_v9.0.0-alpha.24",
+      "version": "9.0.0-alpha.24",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "comment": "Use direct values in alias tokens",
+            "commit": "ede1575b3a5c8f893124af9415c53968564fb923"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Sep 2021 07:42:34 GMT",
       "tag": "@fluentui/react-theme_v9.0.0-alpha.23",
@@ -15,3 +30,3 @@ "version": "9.0.0-alpha.23",
             "comment": "Theme: Updating value of borderRadius global token.",
-            "commit": "7ac237dbe5b9a3e452581f7478f811f43bba9f19"
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
           }
@@ -18,0 +33,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Tue, 21 Sep 2021 07:40:35 GMT and should not be manually modified.
+This log was last generated on Wed, 29 Sep 2021 08:05:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-alpha.24)
+
+Wed, 29 Sep 2021 08:05:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.23..@fluentui/react-theme_v9.0.0-alpha.24)
+
+### Changes
+
+- Use direct values in alias tokens ([PR #19660](https://github.com/microsoft/fluentui/pull/19660) by [e-mail])
+
 ## [9.0.0-alpha.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-alpha.23)
 
-Tue, 21 Sep 2021 07:40:35 GMT 
+Tue, 21 Sep 2021 07:42:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.22..@fluentui/react-theme_v9.0.0-alpha.23)
@@ -14,3 +23,3 @@
 
-- Theme: Updating value of borderRadius global token. ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by [e-mail])
+- Theme: Updating value of borderRadius global token. ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by [e-mail])
 
@@ -17,0 +26,0 @@ ## [9.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-alpha.22)

dist/react-theme.d.ts

@@ -57,3 +57,3 @@ export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
 
-export declare const createGlobalTheme: (brand: BrandVariants) => Theme['global'];
+export declare const createGlobalTheme: (brand: BrandVariants, globalSharedColors: GlobalSharedColors) => Theme['global'];
 
@@ -60,0 +60,0 @@ export declare const createHighContrastTheme: (brand: BrandVariants) => Theme;

lib-commonjs/alias/dark.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-commonjs/alias/dark.js

@@ -6,122 +6,125 @@ "use strict";
 });
-exports.generateSharedColorTokens = exports.neutralColorTokens = void 0;
-exports.neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-white)',
-  neutralForeground2: 'var(--global-palette-grey-84)',
-  neutralForeground2Hover: 'var(--global-color-white)',
-  neutralForeground2Pressed: 'var(--global-color-white)',
-  neutralForeground2Selected: 'var(--global-color-white)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground3: 'var(--global-palette-grey-68)',
-  neutralForeground3Hover: 'var(--global-palette-grey-84)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-84)',
-  neutralForeground3Selected: 'var(--global-palette-grey-84)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground4: 'var(--global-palette-grey-60)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-36)',
-  brandForegroundLink: 'var(--global-palette-brand-tint10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-tint30)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-tint20)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-tint20)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-primary)',
-  brandForeground1: 'var(--global-palette-brand-tint20)',
-  brandForeground2: 'var(--global-palette-brand-tint30)',
-  neutralForegroundInverted: 'var(--global-palette-grey-14)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-palette-grey-16)',
-  neutralBackground1Hover: 'var(--global-palette-grey-24)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-12)',
-  neutralBackground1Selected: 'var(--global-palette-grey-22)',
-  neutralBackground2: 'var(--global-palette-grey-12)',
-  neutralBackground2Hover: 'var(--global-palette-grey-20)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-8)',
-  neutralBackground2Selected: 'var(--global-palette-grey-18)',
-  neutralBackground3: 'var(--global-palette-grey-8)',
-  neutralBackground3Hover: 'var(--global-palette-grey-16)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-4)',
-  neutralBackground3Selected: 'var(--global-palette-grey-14)',
-  neutralBackground4: 'var(--global-palette-grey-4)',
-  neutralBackground4Hover: 'var(--global-palette-grey-12)',
-  neutralBackground4Pressed: 'var(--global-color-black)',
-  neutralBackground4Selected: 'var(--global-palette-grey-10)',
-  neutralBackground5: 'var(--global-color-black)',
-  neutralBackground5Hover: 'var(--global-palette-grey-8)',
-  neutralBackground5Pressed: 'var(--global-palette-grey-2)',
-  neutralBackground5Selected: 'var(--global-palette-grey-6)',
-  neutralBackground6: 'var(--global-palette-grey-20)',
-  neutralBackgroundInverted: 'var(--global-color-white)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-22)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-18)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-20)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-8)',
-  neutralStencil1: 'var(--global-palette-grey-20)',
-  neutralStencil2: 'var(--global-palette-grey-34)',
-  brandBackground: 'var(--global-palette-brand-shade10)',
-  brandBackgroundHover: 'var(--global-palette-brand-primary)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-tint10)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-primary)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-shade40)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-68)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-74)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-70)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-tint20)',
-  neutralStroke1: 'var(--global-palette-grey-40)',
-  neutralStroke1Hover: 'var(--global-palette-grey-46)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-42)',
-  neutralStroke1Selected: 'var(--global-palette-grey-44)',
-  neutralStroke2: 'var(--global-palette-grey-32)',
-  neutralStroke3: 'var(--global-palette-grey-24)',
-  brandStroke1: 'var(--global-palette-brand-tint10)',
-  brandStroke2: 'var(--global-palette-brand-shade30)',
-  compoundBrandStroke: 'var(--global-palette-brand-tint10)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-primary)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-26)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-black)',
-  strokeFocus2: 'var(--global-color-white)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+exports.generateSharedColorTokens = exports.generateNeutralColorTokens = void 0;
+
+var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.white,
+    neutralForeground2: global.palette.grey[84],
+    neutralForeground2Hover: global.color.white,
+    neutralForeground2Pressed: global.color.white,
+    neutralForeground2Selected: global.color.white,
+    neutralForeground2BrandHover: global.palette.brand.tint20,
+    neutralForeground2BrandPressed: global.palette.brand.tint10,
+    neutralForeground2BrandSelected: global.palette.brand.tint20,
+    neutralForeground3: global.palette.grey[68],
+    neutralForeground3Hover: global.palette.grey[84],
+    neutralForeground3Pressed: global.palette.grey[84],
+    neutralForeground3Selected: global.palette.grey[84],
+    neutralForeground3BrandHover: global.palette.brand.tint20,
+    neutralForeground3BrandPressed: global.palette.brand.tint10,
+    neutralForeground3BrandSelected: global.palette.brand.tint20,
+    neutralForeground4: global.palette.grey[60],
+    neutralForegroundDisabled: global.palette.grey[36],
+    brandForegroundLink: global.palette.brand.tint10,
+    brandForegroundLinkHover: global.palette.brand.tint30,
+    brandForegroundLinkPressed: global.palette.brand.tint20,
+    brandForegroundLinkSelected: global.palette.brand.tint10,
+    compoundBrandForeground1: global.palette.brand.tint10,
+    compoundBrandForeground1Hover: global.palette.brand.tint20,
+    compoundBrandForeground1Pressed: global.palette.brand.primary,
+    brandForeground1: global.palette.brand.tint20,
+    brandForeground2: global.palette.brand.tint30,
+    neutralForegroundInverted: global.palette.grey[14],
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.palette.grey[16],
+    neutralBackground1Hover: global.palette.grey[24],
+    neutralBackground1Pressed: global.palette.grey[12],
+    neutralBackground1Selected: global.palette.grey[22],
+    neutralBackground2: global.palette.grey[12],
+    neutralBackground2Hover: global.palette.grey[20],
+    neutralBackground2Pressed: global.palette.grey[8],
+    neutralBackground2Selected: global.palette.grey[18],
+    neutralBackground3: global.palette.grey[8],
+    neutralBackground3Hover: global.palette.grey[16],
+    neutralBackground3Pressed: global.palette.grey[4],
+    neutralBackground3Selected: global.palette.grey[14],
+    neutralBackground4: global.palette.grey[4],
+    neutralBackground4Hover: global.palette.grey[12],
+    neutralBackground4Pressed: global.color.black,
+    neutralBackground4Selected: global.palette.grey[10],
+    neutralBackground5: global.color.black,
+    neutralBackground5Hover: global.palette.grey[8],
+    neutralBackground5Pressed: global.palette.grey[2],
+    neutralBackground5Selected: global.palette.grey[6],
+    neutralBackground6: global.palette.grey[20],
+    neutralBackgroundInverted: global.color.white,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[22],
+    subtleBackgroundPressed: global.palette.grey[18],
+    subtleBackgroundSelected: global.palette.grey[20],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[8],
+    neutralStencil1: global.palette.grey[20],
+    neutralStencil2: global.palette.grey[34],
+    brandBackground: global.palette.brand.shade10,
+    brandBackgroundHover: global.palette.brand.primary,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.tint10,
+    compoundBrandBackgroundHover: global.palette.brand.tint20,
+    compoundBrandBackgroundPressed: global.palette.brand.primary,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.shade40,
+    neutralStrokeAccessible: global.palette.grey[68],
+    neutralStrokeAccessibleHover: global.palette.grey[74],
+    neutralStrokeAccessiblePressed: global.palette.grey[70],
+    neutralStrokeAccessibleSelected: global.palette.brand.tint20,
+    neutralStroke1: global.palette.grey[40],
+    neutralStroke1Hover: global.palette.grey[46],
+    neutralStroke1Pressed: global.palette.grey[42],
+    neutralStroke1Selected: global.palette.grey[44],
+    neutralStroke2: global.palette.grey[32],
+    neutralStroke3: global.palette.grey[24],
+    brandStroke1: global.palette.brand.tint10,
+    brandStroke2: global.palette.brand.shade30,
+    compoundBrandStroke: global.palette.brand.tint10,
+    compoundBrandStrokeHover: global.palette.brand.tint20,
+    compoundBrandStrokePressed: global.palette.brand.primary,
+    neutralStrokeDisabled: global.palette.grey[26],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.black,
+    strokeFocus2: global.color.white,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 
+exports.generateNeutralColorTokens = generateNeutralColorTokens;
+
 var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-shade40)",
-      background2: "var(--global-palette-" + sharedColor + "-shade30)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-tint30)",
-      foreground2: "var(--global-palette-" + sharedColor + "-tint40)",
-      foreground3: "var(--global-palette-" + sharedColor + "-tint20)",
-      borderActive: "var(--global-palette-" + sharedColor + "-tint30)",
-      border2: "var(--global-palette-" + sharedColor + "-tint20)"
+      background1: globalSharedTokens[sharedColor].shade40,
+      background2: globalSharedTokens[sharedColor].shade30,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].tint30,
+      foreground2: globalSharedTokens[sharedColor].tint40,
+      foreground3: globalSharedTokens[sharedColor].tint20,
+      borderActive: globalSharedTokens[sharedColor].tint30,
+      border2: globalSharedTokens[sharedColor].tint20
     };
@@ -128,0 +131,0 @@ return acc;

lib-commonjs/alias/highContrast.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
-export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
+export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors, globalColors: Theme['global']['color']) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-commonjs/alias/highContrast.js

@@ -6,122 +6,125 @@ "use strict";
 });
-exports.generateSharedColorTokens = exports.neutralColorTokens = void 0;
-exports.neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-hcCanvasText)',
-  neutralForeground2: 'var(--global-color-hcCanvasText)',
-  neutralForeground2Hover: 'var(--global-color-hcHighlightText)',
-  neutralForeground2Pressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground2Selected: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandHover: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandPressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandSelected: 'var(--global-color-hcHighlightText)',
-  neutralForeground3: 'var(--global-color-hcCanvasText)',
-  neutralForeground3Hover: 'var(--global-color-hcHighlightText)',
-  neutralForeground3Pressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground3Selected: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandHover: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandPressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandSelected: 'var(--global-color-hcHighlightText)',
-  neutralForeground4: 'var(--global-color-hcCanvasText)',
-  neutralForegroundDisabled: 'var(--global-color-hcDisabled)',
-  brandForegroundLink: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkHover: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkPressed: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkSelected: 'var(--global-color-hcHyperlink)',
-  compoundBrandForeground1: 'var(--global-color-hcHighlight)',
-  compoundBrandForeground1Hover: 'var(--global-color-hcHighlight)',
-  compoundBrandForeground1Pressed: 'var(--global-color-hcHighlight)',
-  brandForeground1: 'var(--global-color-hcCanvasText)',
-  brandForeground2: 'var(--global-color-hcButtonText)',
-  neutralForegroundInverted: 'var(--global-color-hcCanvas)',
-  neutralForegroundOnBrand: 'var(--global-color-hcButtonText)',
-  neutralForegroundInvertedLink: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-hcHyperlink)',
-  neutralBackground1: 'var(--global-color-hcCanvas)',
-  neutralBackground1Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground1Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground1Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground2: 'var(--global-color-hcCanvas)',
-  neutralBackground2Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground2Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground2Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground3: 'var(--global-color-hcCanvas)',
-  neutralBackground3Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground3Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground3Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground4: 'var(--global-color-hcCanvas)',
-  neutralBackground4Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground4Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground4Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground5: 'var(--global-color-hcCanvas)',
-  neutralBackground5Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground5Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground5Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground6: 'var(--global-color-hcCanvas)',
-  neutralBackgroundInverted: 'var(--global-color-hcCanvasText)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-color-hcHighlight)',
-  subtleBackgroundPressed: 'var(--global-color-hcHighlight)',
-  subtleBackgroundSelected: 'var(--global-color-hcHighlight)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'var(--global-color-hcHighlight)',
-  transparentBackgroundPressed: 'var(--global-color-hcHighlight)',
-  transparentBackgroundSelected: 'var(--global-color-hcHighlight)',
-  neutralBackgroundDisabled: 'var(--global-color-hcCanvas)',
-  neutralStencil1: 'var(--global-palette-grey-8)',
-  neutralStencil2: 'var(--global-palette-grey-52)',
-  brandBackground: 'var(--global-color-hcButtonFace)',
-  brandBackgroundHover: 'var(--global-color-hcHighlight)',
-  brandBackgroundPressed: 'var(--global-color-hcHighlight)',
-  brandBackgroundSelected: 'var(--global-color-hcHighlight)',
-  compoundBrandBackground: 'var(--global-color-hcHighlight)',
-  compoundBrandBackgroundHover: 'var(--global-color-hcHighlight)',
-  compoundBrandBackgroundPressed: 'var(--global-color-hcHighlight)',
-  brandBackgroundStatic: 'var(--global-color-hcCanvas)',
-  brandBackground2: 'var(--global-color-hcButtonFace)',
-  neutralStrokeAccessible: 'var(--global-color-hcCanvasText)',
-  neutralStrokeAccessibleHover: 'var(--global-color-hcHighlight)',
-  neutralStrokeAccessiblePressed: 'var(--global-color-hcHighlight)',
-  neutralStrokeAccessibleSelected: 'var(--global-color-hcHighlight)',
-  neutralStroke1: 'var(--global-color-hcCanvasText)',
-  neutralStroke1Hover: 'var(--global-color-hcHighlight)',
-  neutralStroke1Pressed: 'var(--global-color-hcHighlight)',
-  neutralStroke1Selected: 'var(--global-color-hcHighlight)',
-  neutralStroke2: 'var(--global-color-hcCanvasText)',
-  neutralStroke3: 'var(--global-color-hcCanvasText)',
-  brandStroke1: 'var(--global-color-hcCanvasText)',
-  brandStroke2: 'var(--global-color-hcCanvas)',
-  compoundBrandStroke: 'var(--global-color-hcHighlight)',
-  compoundBrandStrokeHover: 'var(--global-color-hcHighlight)',
-  compoundBrandStrokePressed: 'var(--global-color-hcHighlight)',
-  neutralStrokeDisabled: 'var(--global-color-hcDisabled)',
-  transparentStroke: 'var(--global-color-hcCanvasText)',
-  transparentStrokeInteractive: 'var(--global-color-hcHighlight)',
-  transparentStrokeDisabled: 'var(--global-color-hcDisabled)',
-  strokeFocus1: 'var(--global-color-hcCanvas)',
-  strokeFocus2: 'var(--global-color-hcHighlight)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+exports.generateSharedColorTokens = exports.generateNeutralColorTokens = void 0;
+
+var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.hcCanvasText,
+    neutralForeground2: global.color.hcCanvasText,
+    neutralForeground2Hover: global.color.hcHighlightText,
+    neutralForeground2Pressed: global.color.hcHighlightText,
+    neutralForeground2Selected: global.color.hcHighlightText,
+    neutralForeground2BrandHover: global.color.hcHighlightText,
+    neutralForeground2BrandPressed: global.color.hcHighlightText,
+    neutralForeground2BrandSelected: global.color.hcHighlightText,
+    neutralForeground3: global.color.hcCanvasText,
+    neutralForeground3Hover: global.color.hcHighlightText,
+    neutralForeground3Pressed: global.color.hcHighlightText,
+    neutralForeground3Selected: global.color.hcHighlightText,
+    neutralForeground3BrandHover: global.color.hcHighlightText,
+    neutralForeground3BrandPressed: global.color.hcHighlightText,
+    neutralForeground3BrandSelected: global.color.hcHighlightText,
+    neutralForeground4: global.color.hcCanvasText,
+    neutralForegroundDisabled: global.color.hcDisabled,
+    brandForegroundLink: global.color.hcHyperlink,
+    brandForegroundLinkHover: global.color.hcHyperlink,
+    brandForegroundLinkPressed: global.color.hcHyperlink,
+    brandForegroundLinkSelected: global.color.hcHyperlink,
+    compoundBrandForeground1: global.color.hcHighlight,
+    compoundBrandForeground1Hover: global.color.hcHighlight,
+    compoundBrandForeground1Pressed: global.color.hcHighlight,
+    brandForeground1: global.color.hcCanvasText,
+    brandForeground2: global.color.hcButtonText,
+    neutralForegroundInverted: global.color.hcCanvas,
+    neutralForegroundOnBrand: global.color.hcButtonText,
+    neutralForegroundInvertedLink: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkHover: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkPressed: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkSelected: global.color.hcHyperlink,
+    neutralBackground1: global.color.hcCanvas,
+    neutralBackground1Hover: global.color.hcHighlight,
+    neutralBackground1Pressed: global.color.hcHighlight,
+    neutralBackground1Selected: global.color.hcHighlight,
+    neutralBackground2: global.color.hcCanvas,
+    neutralBackground2Hover: global.color.hcHighlight,
+    neutralBackground2Pressed: global.color.hcHighlight,
+    neutralBackground2Selected: global.color.hcHighlight,
+    neutralBackground3: global.color.hcCanvas,
+    neutralBackground3Hover: global.color.hcHighlight,
+    neutralBackground3Pressed: global.color.hcHighlight,
+    neutralBackground3Selected: global.color.hcHighlight,
+    neutralBackground4: global.color.hcCanvas,
+    neutralBackground4Hover: global.color.hcHighlight,
+    neutralBackground4Pressed: global.color.hcHighlight,
+    neutralBackground4Selected: global.color.hcHighlight,
+    neutralBackground5: global.color.hcCanvas,
+    neutralBackground5Hover: global.color.hcHighlight,
+    neutralBackground5Pressed: global.color.hcHighlight,
+    neutralBackground5Selected: global.color.hcHighlight,
+    neutralBackground6: global.color.hcCanvas,
+    neutralBackgroundInverted: global.color.hcCanvasText,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.color.hcHighlight,
+    subtleBackgroundPressed: global.color.hcHighlight,
+    subtleBackgroundSelected: global.color.hcHighlight,
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: global.color.hcHighlight,
+    transparentBackgroundPressed: global.color.hcHighlight,
+    transparentBackgroundSelected: global.color.hcHighlight,
+    neutralBackgroundDisabled: global.color.hcCanvas,
+    neutralStencil1: global.palette.grey[8],
+    neutralStencil2: global.palette.grey[52],
+    brandBackground: global.color.hcButtonFace,
+    brandBackgroundHover: global.color.hcHighlight,
+    brandBackgroundPressed: global.color.hcHighlight,
+    brandBackgroundSelected: global.color.hcHighlight,
+    compoundBrandBackground: global.color.hcHighlight,
+    compoundBrandBackgroundHover: global.color.hcHighlight,
+    compoundBrandBackgroundPressed: global.color.hcHighlight,
+    brandBackgroundStatic: global.color.hcCanvas,
+    brandBackground2: global.color.hcButtonFace,
+    neutralStrokeAccessible: global.color.hcCanvasText,
+    neutralStrokeAccessibleHover: global.color.hcHighlight,
+    neutralStrokeAccessiblePressed: global.color.hcHighlight,
+    neutralStrokeAccessibleSelected: global.color.hcHighlight,
+    neutralStroke1: global.color.hcCanvasText,
+    neutralStroke1Hover: global.color.hcHighlight,
+    neutralStroke1Pressed: global.color.hcHighlight,
+    neutralStroke1Selected: global.color.hcHighlight,
+    neutralStroke2: global.color.hcCanvasText,
+    neutralStroke3: global.color.hcCanvasText,
+    brandStroke1: global.color.hcCanvasText,
+    brandStroke2: global.color.hcCanvas,
+    compoundBrandStroke: global.color.hcHighlight,
+    compoundBrandStrokeHover: global.color.hcHighlight,
+    compoundBrandStrokePressed: global.color.hcHighlight,
+    neutralStrokeDisabled: global.color.hcDisabled,
+    transparentStroke: global.color.hcCanvasText,
+    transparentStrokeInteractive: global.color.hcHighlight,
+    transparentStrokeDisabled: global.color.hcDisabled,
+    strokeFocus1: global.color.hcCanvas,
+    strokeFocus2: global.color.hcHighlight,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 
-var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+exports.generateNeutralColorTokens = generateNeutralColorTokens;
+
+var generateSharedColorTokens = function (globalSharedTokens, globalColors) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-color-white)",
-      background2: "var(--global-color-black)",
-      background3: "var(--global-color-white)",
-      foreground1: "var(--global-color-black)",
-      foreground2: "var(--global-color-white)",
-      foreground3: "var(--global-color-white)",
-      borderActive: "var(--global-color-hcHighlight)",
-      border2: "var(--global-color-white)"
+      background1: globalColors.white,
+      background2: globalColors.black,
+      background3: globalColors.white,
+      foreground1: globalColors.black,
+      foreground2: globalColors.white,
+      foreground3: globalColors.white,
+      borderActive: globalColors.hcHighlight,
+      border2: globalColors.white
     };
@@ -128,0 +131,0 @@ return acc;

lib-commonjs/alias/light.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-commonjs/alias/light.js

@@ -6,122 +6,125 @@ "use strict";
 });
-exports.generateSharedColorTokens = exports.neutralColorTokens = void 0;
-exports.neutralColorTokens = {
-  neutralForeground1: 'var(--global-palette-grey-14)',
-  neutralForeground2: 'var(--global-palette-grey-26)',
-  neutralForeground2Hover: 'var(--global-palette-grey-14)',
-  neutralForeground2Pressed: 'var(--global-palette-grey-14)',
-  neutralForeground2Selected: 'var(--global-palette-grey-14)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-primary)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-shade10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-primary)',
-  neutralForeground3: 'var(--global-palette-grey-38)',
-  neutralForeground3Hover: 'var(--global-palette-grey-26)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-26)',
-  neutralForeground3Selected: 'var(--global-palette-grey-26)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-primary)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-shade10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-primary)',
-  neutralForeground4: 'var(--global-palette-grey-44)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-74)',
-  brandForegroundLink: 'var(--global-palette-brand-shade10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-shade20)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-shade40)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-shade10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-primary)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-shade10)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-shade20)',
-  brandForeground1: 'var(--global-palette-brand-primary)',
-  brandForeground2: 'var(--global-palette-brand-shade10)',
-  neutralForegroundInverted: 'var(--global-color-white)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-color-white)',
-  neutralBackground1Hover: 'var(--global-palette-grey-96)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-88)',
-  neutralBackground1Selected: 'var(--global-palette-grey-92)',
-  neutralBackground2: 'var(--global-palette-grey-98)',
-  neutralBackground2Hover: 'var(--global-palette-grey-94)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-86)',
-  neutralBackground2Selected: 'var(--global-palette-grey-90)',
-  neutralBackground3: 'var(--global-palette-grey-96)',
-  neutralBackground3Hover: 'var(--global-palette-grey-92)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-84)',
-  neutralBackground3Selected: 'var(--global-palette-grey-88)',
-  neutralBackground4: 'var(--global-palette-grey-94)',
-  neutralBackground4Hover: 'var(--global-palette-grey-98)',
-  neutralBackground4Pressed: 'var(--global-palette-grey-96)',
-  neutralBackground4Selected: 'var(--global-color-white)',
-  neutralBackground5: 'var(--global-palette-grey-92)',
-  neutralBackground5Hover: 'var(--global-palette-grey-96)',
-  neutralBackground5Pressed: 'var(--global-palette-grey-94)',
-  neutralBackground5Selected: 'var(--global-palette-grey-98)',
-  neutralBackground6: 'var(--global-palette-grey-90)',
-  neutralBackgroundInverted: 'var(--global-palette-grey-38)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-96)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-88)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-92)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-94)',
-  neutralStencil1: 'var(--global-palette-grey-90)',
-  neutralStencil2: 'var(--global-palette-grey-98)',
-  brandBackground: 'var(--global-palette-brand-primary)',
-  brandBackgroundHover: 'var(--global-palette-brand-shade10)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-primary)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-shade10)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-shade20)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-tint60)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-38)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-34)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-30)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-primary)',
-  neutralStroke1: 'var(--global-palette-grey-82)',
-  neutralStroke1Hover: 'var(--global-palette-grey-78)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-70)',
-  neutralStroke1Selected: 'var(--global-palette-grey-74)',
-  neutralStroke2: 'var(--global-palette-grey-88)',
-  neutralStroke3: 'var(--global-palette-grey-94)',
-  brandStroke1: 'var(--global-palette-brand-primary)',
-  brandStroke2: 'var(--global-palette-brand-tint40)',
-  compoundBrandStroke: 'var(--global-palette-brand-primary)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-shade10)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-shade20)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-88)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-white)',
-  strokeFocus2: 'var(--global-color-black)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.12)',
-  neutralShadowKey: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+exports.generateSharedColorTokens = exports.generateNeutralColorTokens = void 0;
+
+var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.palette.grey[14],
+    neutralForeground2: global.palette.grey[26],
+    neutralForeground2Hover: global.palette.grey[14],
+    neutralForeground2Pressed: global.palette.grey[14],
+    neutralForeground2Selected: global.palette.grey[14],
+    neutralForeground2BrandHover: global.palette.brand.primary,
+    neutralForeground2BrandPressed: global.palette.brand.shade10,
+    neutralForeground2BrandSelected: global.palette.brand.primary,
+    neutralForeground3: global.palette.grey[38],
+    neutralForeground3Hover: global.palette.grey[26],
+    neutralForeground3Pressed: global.palette.grey[26],
+    neutralForeground3Selected: global.palette.grey[26],
+    neutralForeground3BrandHover: global.palette.brand.primary,
+    neutralForeground3BrandPressed: global.palette.brand.shade10,
+    neutralForeground3BrandSelected: global.palette.brand.primary,
+    neutralForeground4: global.palette.grey[44],
+    neutralForegroundDisabled: global.palette.grey[74],
+    brandForegroundLink: global.palette.brand.shade10,
+    brandForegroundLinkHover: global.palette.brand.shade20,
+    brandForegroundLinkPressed: global.palette.brand.shade40,
+    brandForegroundLinkSelected: global.palette.brand.shade10,
+    compoundBrandForeground1: global.palette.brand.primary,
+    compoundBrandForeground1Hover: global.palette.brand.shade10,
+    compoundBrandForeground1Pressed: global.palette.brand.shade20,
+    brandForeground1: global.palette.brand.primary,
+    brandForeground2: global.palette.brand.shade10,
+    neutralForegroundInverted: global.color.white,
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.color.white,
+    neutralBackground1Hover: global.palette.grey[96],
+    neutralBackground1Pressed: global.palette.grey[88],
+    neutralBackground1Selected: global.palette.grey[92],
+    neutralBackground2: global.palette.grey[98],
+    neutralBackground2Hover: global.palette.grey[94],
+    neutralBackground2Pressed: global.palette.grey[86],
+    neutralBackground2Selected: global.palette.grey[90],
+    neutralBackground3: global.palette.grey[96],
+    neutralBackground3Hover: global.palette.grey[92],
+    neutralBackground3Pressed: global.palette.grey[84],
+    neutralBackground3Selected: global.palette.grey[88],
+    neutralBackground4: global.palette.grey[94],
+    neutralBackground4Hover: global.palette.grey[98],
+    neutralBackground4Pressed: global.palette.grey[96],
+    neutralBackground4Selected: global.color.white,
+    neutralBackground5: global.palette.grey[92],
+    neutralBackground5Hover: global.palette.grey[96],
+    neutralBackground5Pressed: global.palette.grey[94],
+    neutralBackground5Selected: global.palette.grey[98],
+    neutralBackground6: global.palette.grey[90],
+    neutralBackgroundInverted: global.palette.grey[38],
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[96],
+    subtleBackgroundPressed: global.palette.grey[88],
+    subtleBackgroundSelected: global.palette.grey[92],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[94],
+    neutralStencil1: global.palette.grey[90],
+    neutralStencil2: global.palette.grey[98],
+    brandBackground: global.palette.brand.primary,
+    brandBackgroundHover: global.palette.brand.shade10,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.primary,
+    compoundBrandBackgroundHover: global.palette.brand.shade10,
+    compoundBrandBackgroundPressed: global.palette.brand.shade20,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.tint60,
+    neutralStrokeAccessible: global.palette.grey[38],
+    neutralStrokeAccessibleHover: global.palette.grey[34],
+    neutralStrokeAccessiblePressed: global.palette.grey[30],
+    neutralStrokeAccessibleSelected: global.palette.brand.primary,
+    neutralStroke1: global.palette.grey[82],
+    neutralStroke1Hover: global.palette.grey[78],
+    neutralStroke1Pressed: global.palette.grey[70],
+    neutralStroke1Selected: global.palette.grey[74],
+    neutralStroke2: global.palette.grey[88],
+    neutralStroke3: global.palette.grey[94],
+    brandStroke1: global.palette.brand.primary,
+    brandStroke2: global.palette.brand.tint40,
+    compoundBrandStroke: global.palette.brand.primary,
+    compoundBrandStrokeHover: global.palette.brand.shade10,
+    compoundBrandStrokePressed: global.palette.brand.shade20,
+    neutralStrokeDisabled: global.palette.grey[88],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.white,
+    strokeFocus2: global.color.black,
+    neutralShadowAmbient: 'rgba(0,0,0,0.12)',
+    neutralShadowKey: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 
+exports.generateNeutralColorTokens = generateNeutralColorTokens;
+
 var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-tint60)",
-      background2: "var(--global-palette-" + sharedColor + "-tint40)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-shade10)",
-      foreground2: "var(--global-palette-" + sharedColor + "-shade30)",
-      foreground3: "var(--global-palette-" + sharedColor + "-primary)",
-      borderActive: "var(--global-palette-" + sharedColor + "-primary)",
-      border2: "var(--global-palette-" + sharedColor + "-primary)"
+      background1: globalSharedTokens[sharedColor].tint60,
+      background2: globalSharedTokens[sharedColor].tint40,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].shade10,
+      foreground2: globalSharedTokens[sharedColor].shade30,
+      foreground3: globalSharedTokens[sharedColor].primary,
+      borderActive: globalSharedTokens[sharedColor].primary,
+      border2: globalSharedTokens[sharedColor].primary
     };
@@ -128,0 +131,0 @@ return acc;

lib-commonjs/alias/teamsDark.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-commonjs/alias/teamsDark.js

@@ -6,122 +6,125 @@ "use strict";
 });
-exports.generateSharedColorTokens = exports.neutralColorTokens = void 0;
-exports.neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-white)',
-  neutralForeground2: 'var(--global-palette-grey-84)',
-  neutralForeground2Hover: 'var(--global-color-white)',
-  neutralForeground2Pressed: 'var(--global-color-white)',
-  neutralForeground2Selected: 'var(--global-color-white)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground3: 'var(--global-palette-grey-68)',
-  neutralForeground3Hover: 'var(--global-palette-grey-84)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-84)',
-  neutralForeground3Selected: 'var(--global-palette-grey-84)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground4: 'var(--global-palette-grey-60)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-36)',
-  brandForegroundLink: 'var(--global-palette-brand-tint10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-tint30)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-tint20)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-tint20)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-primary)',
-  brandForeground1: 'var(--global-palette-brand-tint20)',
-  brandForeground2: 'var(--global-palette-brand-tint30)',
-  neutralForegroundInverted: 'var(--global-color-white)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-palette-grey-16)',
-  neutralBackground1Hover: 'var(--global-palette-grey-24)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-12)',
-  neutralBackground1Selected: 'var(--global-palette-grey-22)',
-  neutralBackground2: 'var(--global-palette-grey-14)',
-  neutralBackground2Hover: 'var(--global-palette-grey-22)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-10)',
-  neutralBackground2Selected: 'var(--global-palette-grey-20)',
-  neutralBackground3: 'var(--global-palette-grey-12)',
-  neutralBackground3Hover: 'var(--global-palette-grey-20)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-8)',
-  neutralBackground3Selected: 'var(--global-palette-grey-18)',
-  neutralBackground4: 'var(--global-palette-grey-8)',
-  neutralBackground4Hover: 'var(--global-palette-grey-16)',
-  neutralBackground4Pressed: 'var(--global-palette-grey-4)',
-  neutralBackground4Selected: 'var(--global-palette-grey-14)',
-  neutralBackground5: 'var(--global-palette-grey-4)',
-  neutralBackground5Hover: 'var(--global-palette-grey-12)',
-  neutralBackground5Pressed: 'var(--global-color-black)',
-  neutralBackground5Selected: 'var(--global-palette-grey-10)',
-  neutralBackground6: 'var(--global-palette-grey-20)',
-  neutralBackgroundInverted: 'var(--global-color-white)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-22)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-18)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-20)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-8)',
-  neutralStencil1: 'var(--global-palette-grey-20)',
-  neutralStencil2: 'var(--global-palette-grey-34)',
-  brandBackground: 'var(--global-palette-brand-shade10)',
-  brandBackgroundHover: 'var(--global-palette-brand-primary)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-tint10)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-primary)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-shade40)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-68)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-74)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-70)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-tint20)',
-  neutralStroke1: 'var(--global-palette-grey-40)',
-  neutralStroke1Hover: 'var(--global-palette-grey-46)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-42)',
-  neutralStroke1Selected: 'var(--global-palette-grey-44)',
-  neutralStroke2: 'var(--global-palette-grey-32)',
-  neutralStroke3: 'var(--global-palette-grey-24)',
-  brandStroke1: 'var(--global-palette-brand-tint10)',
-  brandStroke2: 'var(--global-palette-brand-shade30)',
-  compoundBrandStroke: 'var(--global-palette-brand-tint10)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-primary)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-26)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-black)',
-  strokeFocus2: 'var(--global-color-white)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+exports.generateSharedColorTokens = exports.generateNeutralColorTokens = void 0;
+
+var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.white,
+    neutralForeground2: global.palette.grey[84],
+    neutralForeground2Hover: global.color.white,
+    neutralForeground2Pressed: global.color.white,
+    neutralForeground2Selected: global.color.white,
+    neutralForeground2BrandHover: global.palette.brand.tint20,
+    neutralForeground2BrandPressed: global.palette.brand.tint10,
+    neutralForeground2BrandSelected: global.palette.brand.tint20,
+    neutralForeground3: global.palette.grey[68],
+    neutralForeground3Hover: global.palette.grey[84],
+    neutralForeground3Pressed: global.palette.grey[84],
+    neutralForeground3Selected: global.palette.grey[84],
+    neutralForeground3BrandHover: global.palette.brand.tint20,
+    neutralForeground3BrandPressed: global.palette.brand.tint10,
+    neutralForeground3BrandSelected: global.palette.brand.tint20,
+    neutralForeground4: global.palette.grey[60],
+    neutralForegroundDisabled: global.palette.grey[36],
+    brandForegroundLink: global.palette.brand.tint10,
+    brandForegroundLinkHover: global.palette.brand.tint30,
+    brandForegroundLinkPressed: global.palette.brand.tint20,
+    brandForegroundLinkSelected: global.palette.brand.tint10,
+    compoundBrandForeground1: global.palette.brand.tint10,
+    compoundBrandForeground1Hover: global.palette.brand.tint20,
+    compoundBrandForeground1Pressed: global.palette.brand.primary,
+    brandForeground1: global.palette.brand.tint20,
+    brandForeground2: global.palette.brand.tint30,
+    neutralForegroundInverted: global.color.white,
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.palette.grey[16],
+    neutralBackground1Hover: global.palette.grey[24],
+    neutralBackground1Pressed: global.palette.grey[12],
+    neutralBackground1Selected: global.palette.grey[22],
+    neutralBackground2: global.palette.grey[14],
+    neutralBackground2Hover: global.palette.grey[22],
+    neutralBackground2Pressed: global.palette.grey[10],
+    neutralBackground2Selected: global.palette.grey[20],
+    neutralBackground3: global.palette.grey[12],
+    neutralBackground3Hover: global.palette.grey[20],
+    neutralBackground3Pressed: global.palette.grey[8],
+    neutralBackground3Selected: global.palette.grey[18],
+    neutralBackground4: global.palette.grey[8],
+    neutralBackground4Hover: global.palette.grey[16],
+    neutralBackground4Pressed: global.palette.grey[4],
+    neutralBackground4Selected: global.palette.grey[14],
+    neutralBackground5: global.palette.grey[4],
+    neutralBackground5Hover: global.palette.grey[12],
+    neutralBackground5Pressed: global.color.black,
+    neutralBackground5Selected: global.palette.grey[10],
+    neutralBackground6: global.palette.grey[20],
+    neutralBackgroundInverted: global.color.white,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[22],
+    subtleBackgroundPressed: global.palette.grey[18],
+    subtleBackgroundSelected: global.palette.grey[20],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[8],
+    neutralStencil1: global.palette.grey[20],
+    neutralStencil2: global.palette.grey[34],
+    brandBackground: global.palette.brand.shade10,
+    brandBackgroundHover: global.palette.brand.primary,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.tint10,
+    compoundBrandBackgroundHover: global.palette.brand.tint20,
+    compoundBrandBackgroundPressed: global.palette.brand.primary,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.shade40,
+    neutralStrokeAccessible: global.palette.grey[68],
+    neutralStrokeAccessibleHover: global.palette.grey[74],
+    neutralStrokeAccessiblePressed: global.palette.grey[70],
+    neutralStrokeAccessibleSelected: global.palette.brand.tint20,
+    neutralStroke1: global.palette.grey[40],
+    neutralStroke1Hover: global.palette.grey[46],
+    neutralStroke1Pressed: global.palette.grey[42],
+    neutralStroke1Selected: global.palette.grey[44],
+    neutralStroke2: global.palette.grey[32],
+    neutralStroke3: global.palette.grey[24],
+    brandStroke1: global.palette.brand.tint10,
+    brandStroke2: global.palette.brand.shade30,
+    compoundBrandStroke: global.palette.brand.tint10,
+    compoundBrandStrokeHover: global.palette.brand.tint20,
+    compoundBrandStrokePressed: global.palette.brand.primary,
+    neutralStrokeDisabled: global.palette.grey[26],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.black,
+    strokeFocus2: global.color.white,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 
+exports.generateNeutralColorTokens = generateNeutralColorTokens;
+
 var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-shade40)",
-      background2: "var(--global-palette-" + sharedColor + "-shade30)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-tint30)",
-      foreground2: "var(--global-palette-" + sharedColor + "-tint40)",
-      foreground3: "var(--global-palette-" + sharedColor + "-tint20)",
-      borderActive: "var(--global-palette-" + sharedColor + "-tint30)",
-      border2: "var(--global-palette-" + sharedColor + "-tint20)"
+      background1: globalSharedTokens[sharedColor].shade40,
+      background2: globalSharedTokens[sharedColor].shade30,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].tint30,
+      foreground2: globalSharedTokens[sharedColor].tint40,
+      foreground3: globalSharedTokens[sharedColor].tint20,
+      borderActive: globalSharedTokens[sharedColor].tint30,
+      border2: globalSharedTokens[sharedColor].tint20
     };
@@ -128,0 +131,0 @@ return acc;

lib-commonjs/global/utils.d.ts

@@ -1,2 +0,2 @@
-import type { Theme, BrandVariants } from '../types';
-export declare const createGlobalTheme: (brand: BrandVariants) => Theme['global'];
+import type { BrandVariants, GlobalSharedColors, Theme } from '../types';
+export declare const createGlobalTheme: (brand: BrandVariants, globalSharedColors: GlobalSharedColors) => Theme['global'];

lib-commonjs/global/utils.js

@@ -18,3 +18,3 @@ "use strict";
 
-var createGlobalTheme = function (brand) {
+var createGlobalTheme = function (brand, globalSharedColors) {
   return {
@@ -33,3 +33,3 @@ color: {
     },
-    palette: tslib_1.__assign(tslib_1.__assign({}, colors_1.sharedColors), {
+    palette: tslib_1.__assign(tslib_1.__assign({}, globalSharedColors), {
       brand: brand,
@@ -36,0 +36,0 @@ grey: colors_1.grey,

lib-commonjs/utils/createDarkTheme.js

@@ -16,11 +16,14 @@ "use strict";
 
+var colors_1 = /*#__PURE__*/require("../global/colors");
+
 var createDarkTheme = function (brand) {
-  var global = utils_1.createGlobalTheme(brand);
+  var global = utils_1.createGlobalTheme(brand, colors_1.sharedColors);
+  var neutral = dark_1.generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: tslib_1.__assign(tslib_1.__assign({}, dark_1.generateSharedColorTokens(global.palette)), {
-        neutral: dark_1.neutralColorTokens
+      color: tslib_1.__assign(tslib_1.__assign({}, dark_1.generateSharedColorTokens(colors_1.sharedColors)), {
+        neutral: neutral
       }),
-      shadow: shadows_1.createShadowLevelTokens(dark_1.neutralColorTokens.neutralShadowAmbient, dark_1.neutralColorTokens.neutralShadowKey)
+      shadow: shadows_1.createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -27,0 +30,0 @@ };

lib-commonjs/utils/createHighContrastTheme.js

@@ -16,11 +16,14 @@ "use strict";
 
+var colors_1 = /*#__PURE__*/require("../global/colors");
+
 var createHighContrastTheme = function (brand) {
-  var global = utils_1.createGlobalTheme(brand);
+  var global = utils_1.createGlobalTheme(brand, colors_1.sharedColors);
+  var neutral = highContrast_1.generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: tslib_1.__assign(tslib_1.__assign({}, highContrast_1.generateSharedColorTokens(global.palette)), {
-        neutral: highContrast_1.neutralColorTokens
+      color: tslib_1.__assign(tslib_1.__assign({}, highContrast_1.generateSharedColorTokens(colors_1.sharedColors, global.color)), {
+        neutral: neutral
       }),
-      shadow: shadows_1.createShadowLevelTokens(highContrast_1.neutralColorTokens.neutralShadowAmbient, highContrast_1.neutralColorTokens.neutralShadowKey)
+      shadow: shadows_1.createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -27,0 +30,0 @@ };

lib-commonjs/utils/createLightTheme.js

@@ -16,11 +16,14 @@ "use strict";
 
+var colors_1 = /*#__PURE__*/require("../global/colors");
+
 var createLightTheme = function (brand) {
-  var global = utils_1.createGlobalTheme(brand);
+  var global = utils_1.createGlobalTheme(brand, colors_1.sharedColors);
+  var neutral = light_1.generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: tslib_1.__assign(tslib_1.__assign({}, light_1.generateSharedColorTokens(global.palette)), {
-        neutral: light_1.neutralColorTokens
+      color: tslib_1.__assign(tslib_1.__assign({}, light_1.generateSharedColorTokens(colors_1.sharedColors)), {
+        neutral: neutral
       }),
-      shadow: shadows_1.createShadowLevelTokens(light_1.neutralColorTokens.neutralShadowAmbient, light_1.neutralColorTokens.neutralShadowKey)
+      shadow: shadows_1.createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -27,0 +30,0 @@ };

lib-commonjs/utils/createTeamsDarkTheme.js

@@ -16,11 +16,14 @@ "use strict";
 
+var colors_1 = /*#__PURE__*/require("../global/colors");
+
 var createTeamsDarkTheme = function (brand) {
-  var global = utils_1.createGlobalTheme(brand);
+  var global = utils_1.createGlobalTheme(brand, colors_1.sharedColors);
+  var neutral = teamsDark_1.generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: tslib_1.__assign(tslib_1.__assign({}, teamsDark_1.generateSharedColorTokens(global.palette)), {
-        neutral: teamsDark_1.neutralColorTokens
+      color: tslib_1.__assign(tslib_1.__assign({}, teamsDark_1.generateSharedColorTokens(colors_1.sharedColors)), {
+        neutral: neutral
       }),
-      shadow: shadows_1.createShadowLevelTokens(teamsDark_1.neutralColorTokens.neutralShadowAmbient, teamsDark_1.neutralColorTokens.neutralShadowKey)
+      shadow: shadows_1.createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -27,0 +30,0 @@ };

lib/alias/dark.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib/alias/dark.js

@@ -1,119 +0,119 @@
-export var neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-white)',
-  neutralForeground2: 'var(--global-palette-grey-84)',
-  neutralForeground2Hover: 'var(--global-color-white)',
-  neutralForeground2Pressed: 'var(--global-color-white)',
-  neutralForeground2Selected: 'var(--global-color-white)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground3: 'var(--global-palette-grey-68)',
-  neutralForeground3Hover: 'var(--global-palette-grey-84)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-84)',
-  neutralForeground3Selected: 'var(--global-palette-grey-84)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground4: 'var(--global-palette-grey-60)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-36)',
-  brandForegroundLink: 'var(--global-palette-brand-tint10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-tint30)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-tint20)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-tint20)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-primary)',
-  brandForeground1: 'var(--global-palette-brand-tint20)',
-  brandForeground2: 'var(--global-palette-brand-tint30)',
-  neutralForegroundInverted: 'var(--global-palette-grey-14)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-palette-grey-16)',
-  neutralBackground1Hover: 'var(--global-palette-grey-24)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-12)',
-  neutralBackground1Selected: 'var(--global-palette-grey-22)',
-  neutralBackground2: 'var(--global-palette-grey-12)',
-  neutralBackground2Hover: 'var(--global-palette-grey-20)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-8)',
-  neutralBackground2Selected: 'var(--global-palette-grey-18)',
-  neutralBackground3: 'var(--global-palette-grey-8)',
-  neutralBackground3Hover: 'var(--global-palette-grey-16)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-4)',
-  neutralBackground3Selected: 'var(--global-palette-grey-14)',
-  neutralBackground4: 'var(--global-palette-grey-4)',
-  neutralBackground4Hover: 'var(--global-palette-grey-12)',
-  neutralBackground4Pressed: 'var(--global-color-black)',
-  neutralBackground4Selected: 'var(--global-palette-grey-10)',
-  neutralBackground5: 'var(--global-color-black)',
-  neutralBackground5Hover: 'var(--global-palette-grey-8)',
-  neutralBackground5Pressed: 'var(--global-palette-grey-2)',
-  neutralBackground5Selected: 'var(--global-palette-grey-6)',
-  neutralBackground6: 'var(--global-palette-grey-20)',
-  neutralBackgroundInverted: 'var(--global-color-white)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-22)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-18)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-20)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-8)',
-  neutralStencil1: 'var(--global-palette-grey-20)',
-  neutralStencil2: 'var(--global-palette-grey-34)',
-  brandBackground: 'var(--global-palette-brand-shade10)',
-  brandBackgroundHover: 'var(--global-palette-brand-primary)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-tint10)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-primary)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-shade40)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-68)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-74)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-70)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-tint20)',
-  neutralStroke1: 'var(--global-palette-grey-40)',
-  neutralStroke1Hover: 'var(--global-palette-grey-46)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-42)',
-  neutralStroke1Selected: 'var(--global-palette-grey-44)',
-  neutralStroke2: 'var(--global-palette-grey-32)',
-  neutralStroke3: 'var(--global-palette-grey-24)',
-  brandStroke1: 'var(--global-palette-brand-tint10)',
-  brandStroke2: 'var(--global-palette-brand-shade30)',
-  compoundBrandStroke: 'var(--global-palette-brand-tint10)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-primary)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-26)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-black)',
-  strokeFocus2: 'var(--global-color-white)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+export var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.white,
+    neutralForeground2: global.palette.grey[84],
+    neutralForeground2Hover: global.color.white,
+    neutralForeground2Pressed: global.color.white,
+    neutralForeground2Selected: global.color.white,
+    neutralForeground2BrandHover: global.palette.brand.tint20,
+    neutralForeground2BrandPressed: global.palette.brand.tint10,
+    neutralForeground2BrandSelected: global.palette.brand.tint20,
+    neutralForeground3: global.palette.grey[68],
+    neutralForeground3Hover: global.palette.grey[84],
+    neutralForeground3Pressed: global.palette.grey[84],
+    neutralForeground3Selected: global.palette.grey[84],
+    neutralForeground3BrandHover: global.palette.brand.tint20,
+    neutralForeground3BrandPressed: global.palette.brand.tint10,
+    neutralForeground3BrandSelected: global.palette.brand.tint20,
+    neutralForeground4: global.palette.grey[60],
+    neutralForegroundDisabled: global.palette.grey[36],
+    brandForegroundLink: global.palette.brand.tint10,
+    brandForegroundLinkHover: global.palette.brand.tint30,
+    brandForegroundLinkPressed: global.palette.brand.tint20,
+    brandForegroundLinkSelected: global.palette.brand.tint10,
+    compoundBrandForeground1: global.palette.brand.tint10,
+    compoundBrandForeground1Hover: global.palette.brand.tint20,
+    compoundBrandForeground1Pressed: global.palette.brand.primary,
+    brandForeground1: global.palette.brand.tint20,
+    brandForeground2: global.palette.brand.tint30,
+    neutralForegroundInverted: global.palette.grey[14],
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.palette.grey[16],
+    neutralBackground1Hover: global.palette.grey[24],
+    neutralBackground1Pressed: global.palette.grey[12],
+    neutralBackground1Selected: global.palette.grey[22],
+    neutralBackground2: global.palette.grey[12],
+    neutralBackground2Hover: global.palette.grey[20],
+    neutralBackground2Pressed: global.palette.grey[8],
+    neutralBackground2Selected: global.palette.grey[18],
+    neutralBackground3: global.palette.grey[8],
+    neutralBackground3Hover: global.palette.grey[16],
+    neutralBackground3Pressed: global.palette.grey[4],
+    neutralBackground3Selected: global.palette.grey[14],
+    neutralBackground4: global.palette.grey[4],
+    neutralBackground4Hover: global.palette.grey[12],
+    neutralBackground4Pressed: global.color.black,
+    neutralBackground4Selected: global.palette.grey[10],
+    neutralBackground5: global.color.black,
+    neutralBackground5Hover: global.palette.grey[8],
+    neutralBackground5Pressed: global.palette.grey[2],
+    neutralBackground5Selected: global.palette.grey[6],
+    neutralBackground6: global.palette.grey[20],
+    neutralBackgroundInverted: global.color.white,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[22],
+    subtleBackgroundPressed: global.palette.grey[18],
+    subtleBackgroundSelected: global.palette.grey[20],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[8],
+    neutralStencil1: global.palette.grey[20],
+    neutralStencil2: global.palette.grey[34],
+    brandBackground: global.palette.brand.shade10,
+    brandBackgroundHover: global.palette.brand.primary,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.tint10,
+    compoundBrandBackgroundHover: global.palette.brand.tint20,
+    compoundBrandBackgroundPressed: global.palette.brand.primary,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.shade40,
+    neutralStrokeAccessible: global.palette.grey[68],
+    neutralStrokeAccessibleHover: global.palette.grey[74],
+    neutralStrokeAccessiblePressed: global.palette.grey[70],
+    neutralStrokeAccessibleSelected: global.palette.brand.tint20,
+    neutralStroke1: global.palette.grey[40],
+    neutralStroke1Hover: global.palette.grey[46],
+    neutralStroke1Pressed: global.palette.grey[42],
+    neutralStroke1Selected: global.palette.grey[44],
+    neutralStroke2: global.palette.grey[32],
+    neutralStroke3: global.palette.grey[24],
+    brandStroke1: global.palette.brand.tint10,
+    brandStroke2: global.palette.brand.shade30,
+    compoundBrandStroke: global.palette.brand.tint10,
+    compoundBrandStrokeHover: global.palette.brand.tint20,
+    compoundBrandStrokePressed: global.palette.brand.primary,
+    neutralStrokeDisabled: global.palette.grey[26],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.black,
+    strokeFocus2: global.color.white,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 export var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-shade40)",
-      background2: "var(--global-palette-" + sharedColor + "-shade30)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-tint30)",
-      foreground2: "var(--global-palette-" + sharedColor + "-tint40)",
-      foreground3: "var(--global-palette-" + sharedColor + "-tint20)",
-      borderActive: "var(--global-palette-" + sharedColor + "-tint30)",
-      border2: "var(--global-palette-" + sharedColor + "-tint20)"
+      background1: globalSharedTokens[sharedColor].shade40,
+      background2: globalSharedTokens[sharedColor].shade30,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].tint30,
+      foreground2: globalSharedTokens[sharedColor].tint40,
+      foreground3: globalSharedTokens[sharedColor].tint20,
+      borderActive: globalSharedTokens[sharedColor].tint30,
+      border2: globalSharedTokens[sharedColor].tint20
     };
@@ -120,0 +120,0 @@ return acc;

lib/alias/highContrast.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
-export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
+export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors, globalColors: Theme['global']['color']) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib/alias/highContrast.js

@@ -1,119 +0,119 @@
-export var neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-hcCanvasText)',
-  neutralForeground2: 'var(--global-color-hcCanvasText)',
-  neutralForeground2Hover: 'var(--global-color-hcHighlightText)',
-  neutralForeground2Pressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground2Selected: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandHover: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandPressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground2BrandSelected: 'var(--global-color-hcHighlightText)',
-  neutralForeground3: 'var(--global-color-hcCanvasText)',
-  neutralForeground3Hover: 'var(--global-color-hcHighlightText)',
-  neutralForeground3Pressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground3Selected: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandHover: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandPressed: 'var(--global-color-hcHighlightText)',
-  neutralForeground3BrandSelected: 'var(--global-color-hcHighlightText)',
-  neutralForeground4: 'var(--global-color-hcCanvasText)',
-  neutralForegroundDisabled: 'var(--global-color-hcDisabled)',
-  brandForegroundLink: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkHover: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkPressed: 'var(--global-color-hcHyperlink)',
-  brandForegroundLinkSelected: 'var(--global-color-hcHyperlink)',
-  compoundBrandForeground1: 'var(--global-color-hcHighlight)',
-  compoundBrandForeground1Hover: 'var(--global-color-hcHighlight)',
-  compoundBrandForeground1Pressed: 'var(--global-color-hcHighlight)',
-  brandForeground1: 'var(--global-color-hcCanvasText)',
-  brandForeground2: 'var(--global-color-hcButtonText)',
-  neutralForegroundInverted: 'var(--global-color-hcCanvas)',
-  neutralForegroundOnBrand: 'var(--global-color-hcButtonText)',
-  neutralForegroundInvertedLink: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-hcHyperlink)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-hcHyperlink)',
-  neutralBackground1: 'var(--global-color-hcCanvas)',
-  neutralBackground1Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground1Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground1Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground2: 'var(--global-color-hcCanvas)',
-  neutralBackground2Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground2Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground2Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground3: 'var(--global-color-hcCanvas)',
-  neutralBackground3Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground3Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground3Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground4: 'var(--global-color-hcCanvas)',
-  neutralBackground4Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground4Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground4Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground5: 'var(--global-color-hcCanvas)',
-  neutralBackground5Hover: 'var(--global-color-hcHighlight)',
-  neutralBackground5Pressed: 'var(--global-color-hcHighlight)',
-  neutralBackground5Selected: 'var(--global-color-hcHighlight)',
-  neutralBackground6: 'var(--global-color-hcCanvas)',
-  neutralBackgroundInverted: 'var(--global-color-hcCanvasText)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-color-hcHighlight)',
-  subtleBackgroundPressed: 'var(--global-color-hcHighlight)',
-  subtleBackgroundSelected: 'var(--global-color-hcHighlight)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'var(--global-color-hcHighlight)',
-  transparentBackgroundPressed: 'var(--global-color-hcHighlight)',
-  transparentBackgroundSelected: 'var(--global-color-hcHighlight)',
-  neutralBackgroundDisabled: 'var(--global-color-hcCanvas)',
-  neutralStencil1: 'var(--global-palette-grey-8)',
-  neutralStencil2: 'var(--global-palette-grey-52)',
-  brandBackground: 'var(--global-color-hcButtonFace)',
-  brandBackgroundHover: 'var(--global-color-hcHighlight)',
-  brandBackgroundPressed: 'var(--global-color-hcHighlight)',
-  brandBackgroundSelected: 'var(--global-color-hcHighlight)',
-  compoundBrandBackground: 'var(--global-color-hcHighlight)',
-  compoundBrandBackgroundHover: 'var(--global-color-hcHighlight)',
-  compoundBrandBackgroundPressed: 'var(--global-color-hcHighlight)',
-  brandBackgroundStatic: 'var(--global-color-hcCanvas)',
-  brandBackground2: 'var(--global-color-hcButtonFace)',
-  neutralStrokeAccessible: 'var(--global-color-hcCanvasText)',
-  neutralStrokeAccessibleHover: 'var(--global-color-hcHighlight)',
-  neutralStrokeAccessiblePressed: 'var(--global-color-hcHighlight)',
-  neutralStrokeAccessibleSelected: 'var(--global-color-hcHighlight)',
-  neutralStroke1: 'var(--global-color-hcCanvasText)',
-  neutralStroke1Hover: 'var(--global-color-hcHighlight)',
-  neutralStroke1Pressed: 'var(--global-color-hcHighlight)',
-  neutralStroke1Selected: 'var(--global-color-hcHighlight)',
-  neutralStroke2: 'var(--global-color-hcCanvasText)',
-  neutralStroke3: 'var(--global-color-hcCanvasText)',
-  brandStroke1: 'var(--global-color-hcCanvasText)',
-  brandStroke2: 'var(--global-color-hcCanvas)',
-  compoundBrandStroke: 'var(--global-color-hcHighlight)',
-  compoundBrandStrokeHover: 'var(--global-color-hcHighlight)',
-  compoundBrandStrokePressed: 'var(--global-color-hcHighlight)',
-  neutralStrokeDisabled: 'var(--global-color-hcDisabled)',
-  transparentStroke: 'var(--global-color-hcCanvasText)',
-  transparentStrokeInteractive: 'var(--global-color-hcHighlight)',
-  transparentStrokeDisabled: 'var(--global-color-hcDisabled)',
-  strokeFocus1: 'var(--global-color-hcCanvas)',
-  strokeFocus2: 'var(--global-color-hcHighlight)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+export var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.hcCanvasText,
+    neutralForeground2: global.color.hcCanvasText,
+    neutralForeground2Hover: global.color.hcHighlightText,
+    neutralForeground2Pressed: global.color.hcHighlightText,
+    neutralForeground2Selected: global.color.hcHighlightText,
+    neutralForeground2BrandHover: global.color.hcHighlightText,
+    neutralForeground2BrandPressed: global.color.hcHighlightText,
+    neutralForeground2BrandSelected: global.color.hcHighlightText,
+    neutralForeground3: global.color.hcCanvasText,
+    neutralForeground3Hover: global.color.hcHighlightText,
+    neutralForeground3Pressed: global.color.hcHighlightText,
+    neutralForeground3Selected: global.color.hcHighlightText,
+    neutralForeground3BrandHover: global.color.hcHighlightText,
+    neutralForeground3BrandPressed: global.color.hcHighlightText,
+    neutralForeground3BrandSelected: global.color.hcHighlightText,
+    neutralForeground4: global.color.hcCanvasText,
+    neutralForegroundDisabled: global.color.hcDisabled,
+    brandForegroundLink: global.color.hcHyperlink,
+    brandForegroundLinkHover: global.color.hcHyperlink,
+    brandForegroundLinkPressed: global.color.hcHyperlink,
+    brandForegroundLinkSelected: global.color.hcHyperlink,
+    compoundBrandForeground1: global.color.hcHighlight,
+    compoundBrandForeground1Hover: global.color.hcHighlight,
+    compoundBrandForeground1Pressed: global.color.hcHighlight,
+    brandForeground1: global.color.hcCanvasText,
+    brandForeground2: global.color.hcButtonText,
+    neutralForegroundInverted: global.color.hcCanvas,
+    neutralForegroundOnBrand: global.color.hcButtonText,
+    neutralForegroundInvertedLink: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkHover: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkPressed: global.color.hcHyperlink,
+    neutralForegroundInvertedLinkSelected: global.color.hcHyperlink,
+    neutralBackground1: global.color.hcCanvas,
+    neutralBackground1Hover: global.color.hcHighlight,
+    neutralBackground1Pressed: global.color.hcHighlight,
+    neutralBackground1Selected: global.color.hcHighlight,
+    neutralBackground2: global.color.hcCanvas,
+    neutralBackground2Hover: global.color.hcHighlight,
+    neutralBackground2Pressed: global.color.hcHighlight,
+    neutralBackground2Selected: global.color.hcHighlight,
+    neutralBackground3: global.color.hcCanvas,
+    neutralBackground3Hover: global.color.hcHighlight,
+    neutralBackground3Pressed: global.color.hcHighlight,
+    neutralBackground3Selected: global.color.hcHighlight,
+    neutralBackground4: global.color.hcCanvas,
+    neutralBackground4Hover: global.color.hcHighlight,
+    neutralBackground4Pressed: global.color.hcHighlight,
+    neutralBackground4Selected: global.color.hcHighlight,
+    neutralBackground5: global.color.hcCanvas,
+    neutralBackground5Hover: global.color.hcHighlight,
+    neutralBackground5Pressed: global.color.hcHighlight,
+    neutralBackground5Selected: global.color.hcHighlight,
+    neutralBackground6: global.color.hcCanvas,
+    neutralBackgroundInverted: global.color.hcCanvasText,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.color.hcHighlight,
+    subtleBackgroundPressed: global.color.hcHighlight,
+    subtleBackgroundSelected: global.color.hcHighlight,
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: global.color.hcHighlight,
+    transparentBackgroundPressed: global.color.hcHighlight,
+    transparentBackgroundSelected: global.color.hcHighlight,
+    neutralBackgroundDisabled: global.color.hcCanvas,
+    neutralStencil1: global.palette.grey[8],
+    neutralStencil2: global.palette.grey[52],
+    brandBackground: global.color.hcButtonFace,
+    brandBackgroundHover: global.color.hcHighlight,
+    brandBackgroundPressed: global.color.hcHighlight,
+    brandBackgroundSelected: global.color.hcHighlight,
+    compoundBrandBackground: global.color.hcHighlight,
+    compoundBrandBackgroundHover: global.color.hcHighlight,
+    compoundBrandBackgroundPressed: global.color.hcHighlight,
+    brandBackgroundStatic: global.color.hcCanvas,
+    brandBackground2: global.color.hcButtonFace,
+    neutralStrokeAccessible: global.color.hcCanvasText,
+    neutralStrokeAccessibleHover: global.color.hcHighlight,
+    neutralStrokeAccessiblePressed: global.color.hcHighlight,
+    neutralStrokeAccessibleSelected: global.color.hcHighlight,
+    neutralStroke1: global.color.hcCanvasText,
+    neutralStroke1Hover: global.color.hcHighlight,
+    neutralStroke1Pressed: global.color.hcHighlight,
+    neutralStroke1Selected: global.color.hcHighlight,
+    neutralStroke2: global.color.hcCanvasText,
+    neutralStroke3: global.color.hcCanvasText,
+    brandStroke1: global.color.hcCanvasText,
+    brandStroke2: global.color.hcCanvas,
+    compoundBrandStroke: global.color.hcHighlight,
+    compoundBrandStrokeHover: global.color.hcHighlight,
+    compoundBrandStrokePressed: global.color.hcHighlight,
+    neutralStrokeDisabled: global.color.hcDisabled,
+    transparentStroke: global.color.hcCanvasText,
+    transparentStrokeInteractive: global.color.hcHighlight,
+    transparentStrokeDisabled: global.color.hcDisabled,
+    strokeFocus1: global.color.hcCanvas,
+    strokeFocus2: global.color.hcHighlight,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
-export var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+export var generateSharedColorTokens = function (globalSharedTokens, globalColors) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-color-white)",
-      background2: "var(--global-color-black)",
-      background3: "var(--global-color-white)",
-      foreground1: "var(--global-color-black)",
-      foreground2: "var(--global-color-white)",
-      foreground3: "var(--global-color-white)",
-      borderActive: "var(--global-color-hcHighlight)",
-      border2: "var(--global-color-white)"
+      background1: globalColors.white,
+      background2: globalColors.black,
+      background3: globalColors.white,
+      foreground1: globalColors.black,
+      foreground2: globalColors.white,
+      foreground3: globalColors.white,
+      borderActive: globalColors.hcHighlight,
+      border2: globalColors.white
     };
@@ -120,0 +120,0 @@ return acc;

lib/alias/light.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib/alias/light.js

@@ -1,119 +0,119 @@
-export var neutralColorTokens = {
-  neutralForeground1: 'var(--global-palette-grey-14)',
-  neutralForeground2: 'var(--global-palette-grey-26)',
-  neutralForeground2Hover: 'var(--global-palette-grey-14)',
-  neutralForeground2Pressed: 'var(--global-palette-grey-14)',
-  neutralForeground2Selected: 'var(--global-palette-grey-14)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-primary)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-shade10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-primary)',
-  neutralForeground3: 'var(--global-palette-grey-38)',
-  neutralForeground3Hover: 'var(--global-palette-grey-26)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-26)',
-  neutralForeground3Selected: 'var(--global-palette-grey-26)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-primary)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-shade10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-primary)',
-  neutralForeground4: 'var(--global-palette-grey-44)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-74)',
-  brandForegroundLink: 'var(--global-palette-brand-shade10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-shade20)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-shade40)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-shade10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-primary)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-shade10)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-shade20)',
-  brandForeground1: 'var(--global-palette-brand-primary)',
-  brandForeground2: 'var(--global-palette-brand-shade10)',
-  neutralForegroundInverted: 'var(--global-color-white)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-color-white)',
-  neutralBackground1Hover: 'var(--global-palette-grey-96)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-88)',
-  neutralBackground1Selected: 'var(--global-palette-grey-92)',
-  neutralBackground2: 'var(--global-palette-grey-98)',
-  neutralBackground2Hover: 'var(--global-palette-grey-94)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-86)',
-  neutralBackground2Selected: 'var(--global-palette-grey-90)',
-  neutralBackground3: 'var(--global-palette-grey-96)',
-  neutralBackground3Hover: 'var(--global-palette-grey-92)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-84)',
-  neutralBackground3Selected: 'var(--global-palette-grey-88)',
-  neutralBackground4: 'var(--global-palette-grey-94)',
-  neutralBackground4Hover: 'var(--global-palette-grey-98)',
-  neutralBackground4Pressed: 'var(--global-palette-grey-96)',
-  neutralBackground4Selected: 'var(--global-color-white)',
-  neutralBackground5: 'var(--global-palette-grey-92)',
-  neutralBackground5Hover: 'var(--global-palette-grey-96)',
-  neutralBackground5Pressed: 'var(--global-palette-grey-94)',
-  neutralBackground5Selected: 'var(--global-palette-grey-98)',
-  neutralBackground6: 'var(--global-palette-grey-90)',
-  neutralBackgroundInverted: 'var(--global-palette-grey-38)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-96)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-88)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-92)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-94)',
-  neutralStencil1: 'var(--global-palette-grey-90)',
-  neutralStencil2: 'var(--global-palette-grey-98)',
-  brandBackground: 'var(--global-palette-brand-primary)',
-  brandBackgroundHover: 'var(--global-palette-brand-shade10)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-primary)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-shade10)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-shade20)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-tint60)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-38)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-34)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-30)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-primary)',
-  neutralStroke1: 'var(--global-palette-grey-82)',
-  neutralStroke1Hover: 'var(--global-palette-grey-78)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-70)',
-  neutralStroke1Selected: 'var(--global-palette-grey-74)',
-  neutralStroke2: 'var(--global-palette-grey-88)',
-  neutralStroke3: 'var(--global-palette-grey-94)',
-  brandStroke1: 'var(--global-palette-brand-primary)',
-  brandStroke2: 'var(--global-palette-brand-tint40)',
-  compoundBrandStroke: 'var(--global-palette-brand-primary)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-shade10)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-shade20)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-88)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-white)',
-  strokeFocus2: 'var(--global-color-black)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.12)',
-  neutralShadowKey: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+export var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.palette.grey[14],
+    neutralForeground2: global.palette.grey[26],
+    neutralForeground2Hover: global.palette.grey[14],
+    neutralForeground2Pressed: global.palette.grey[14],
+    neutralForeground2Selected: global.palette.grey[14],
+    neutralForeground2BrandHover: global.palette.brand.primary,
+    neutralForeground2BrandPressed: global.palette.brand.shade10,
+    neutralForeground2BrandSelected: global.palette.brand.primary,
+    neutralForeground3: global.palette.grey[38],
+    neutralForeground3Hover: global.palette.grey[26],
+    neutralForeground3Pressed: global.palette.grey[26],
+    neutralForeground3Selected: global.palette.grey[26],
+    neutralForeground3BrandHover: global.palette.brand.primary,
+    neutralForeground3BrandPressed: global.palette.brand.shade10,
+    neutralForeground3BrandSelected: global.palette.brand.primary,
+    neutralForeground4: global.palette.grey[44],
+    neutralForegroundDisabled: global.palette.grey[74],
+    brandForegroundLink: global.palette.brand.shade10,
+    brandForegroundLinkHover: global.palette.brand.shade20,
+    brandForegroundLinkPressed: global.palette.brand.shade40,
+    brandForegroundLinkSelected: global.palette.brand.shade10,
+    compoundBrandForeground1: global.palette.brand.primary,
+    compoundBrandForeground1Hover: global.palette.brand.shade10,
+    compoundBrandForeground1Pressed: global.palette.brand.shade20,
+    brandForeground1: global.palette.brand.primary,
+    brandForeground2: global.palette.brand.shade10,
+    neutralForegroundInverted: global.color.white,
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.color.white,
+    neutralBackground1Hover: global.palette.grey[96],
+    neutralBackground1Pressed: global.palette.grey[88],
+    neutralBackground1Selected: global.palette.grey[92],
+    neutralBackground2: global.palette.grey[98],
+    neutralBackground2Hover: global.palette.grey[94],
+    neutralBackground2Pressed: global.palette.grey[86],
+    neutralBackground2Selected: global.palette.grey[90],
+    neutralBackground3: global.palette.grey[96],
+    neutralBackground3Hover: global.palette.grey[92],
+    neutralBackground3Pressed: global.palette.grey[84],
+    neutralBackground3Selected: global.palette.grey[88],
+    neutralBackground4: global.palette.grey[94],
+    neutralBackground4Hover: global.palette.grey[98],
+    neutralBackground4Pressed: global.palette.grey[96],
+    neutralBackground4Selected: global.color.white,
+    neutralBackground5: global.palette.grey[92],
+    neutralBackground5Hover: global.palette.grey[96],
+    neutralBackground5Pressed: global.palette.grey[94],
+    neutralBackground5Selected: global.palette.grey[98],
+    neutralBackground6: global.palette.grey[90],
+    neutralBackgroundInverted: global.palette.grey[38],
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[96],
+    subtleBackgroundPressed: global.palette.grey[88],
+    subtleBackgroundSelected: global.palette.grey[92],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[94],
+    neutralStencil1: global.palette.grey[90],
+    neutralStencil2: global.palette.grey[98],
+    brandBackground: global.palette.brand.primary,
+    brandBackgroundHover: global.palette.brand.shade10,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.primary,
+    compoundBrandBackgroundHover: global.palette.brand.shade10,
+    compoundBrandBackgroundPressed: global.palette.brand.shade20,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.tint60,
+    neutralStrokeAccessible: global.palette.grey[38],
+    neutralStrokeAccessibleHover: global.palette.grey[34],
+    neutralStrokeAccessiblePressed: global.palette.grey[30],
+    neutralStrokeAccessibleSelected: global.palette.brand.primary,
+    neutralStroke1: global.palette.grey[82],
+    neutralStroke1Hover: global.palette.grey[78],
+    neutralStroke1Pressed: global.palette.grey[70],
+    neutralStroke1Selected: global.palette.grey[74],
+    neutralStroke2: global.palette.grey[88],
+    neutralStroke3: global.palette.grey[94],
+    brandStroke1: global.palette.brand.primary,
+    brandStroke2: global.palette.brand.tint40,
+    compoundBrandStroke: global.palette.brand.primary,
+    compoundBrandStrokeHover: global.palette.brand.shade10,
+    compoundBrandStrokePressed: global.palette.brand.shade20,
+    neutralStrokeDisabled: global.palette.grey[88],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.white,
+    strokeFocus2: global.color.black,
+    neutralShadowAmbient: 'rgba(0,0,0,0.12)',
+    neutralShadowKey: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 export var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-tint60)",
-      background2: "var(--global-palette-" + sharedColor + "-tint40)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-shade10)",
-      foreground2: "var(--global-palette-" + sharedColor + "-shade30)",
-      foreground3: "var(--global-palette-" + sharedColor + "-primary)",
-      borderActive: "var(--global-palette-" + sharedColor + "-primary)",
-      border2: "var(--global-palette-" + sharedColor + "-primary)"
+      background1: globalSharedTokens[sharedColor].tint60,
+      background2: globalSharedTokens[sharedColor].tint40,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].shade10,
+      foreground2: globalSharedTokens[sharedColor].shade30,
+      foreground3: globalSharedTokens[sharedColor].primary,
+      borderActive: globalSharedTokens[sharedColor].primary,
+      border2: globalSharedTokens[sharedColor].primary
     };
@@ -120,0 +120,0 @@ return acc;

lib/alias/teamsDark.d.ts

@@ -1,3 +0,3 @@
-import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';
-export declare const neutralColorTokens: NeutralColorTokens;
+import type { GlobalSharedColors, NeutralColorTokens, SharedColorTokens, Theme } from '../types';
+export declare const generateNeutralColorTokens: (global: Theme['global']) => NeutralColorTokens;
 export declare const generateSharedColorTokens: (globalSharedTokens: GlobalSharedColors) => Record<keyof GlobalSharedColors, SharedColorTokens>;

lib/alias/teamsDark.js

@@ -1,119 +0,119 @@
-export var neutralColorTokens = {
-  neutralForeground1: 'var(--global-color-white)',
-  neutralForeground2: 'var(--global-palette-grey-84)',
-  neutralForeground2Hover: 'var(--global-color-white)',
-  neutralForeground2Pressed: 'var(--global-color-white)',
-  neutralForeground2Selected: 'var(--global-color-white)',
-  neutralForeground2BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground2BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground2BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground3: 'var(--global-palette-grey-68)',
-  neutralForeground3Hover: 'var(--global-palette-grey-84)',
-  neutralForeground3Pressed: 'var(--global-palette-grey-84)',
-  neutralForeground3Selected: 'var(--global-palette-grey-84)',
-  neutralForeground3BrandHover: 'var(--global-palette-brand-tint20)',
-  neutralForeground3BrandPressed: 'var(--global-palette-brand-tint10)',
-  neutralForeground3BrandSelected: 'var(--global-palette-brand-tint20)',
-  neutralForeground4: 'var(--global-palette-grey-60)',
-  neutralForegroundDisabled: 'var(--global-palette-grey-36)',
-  brandForegroundLink: 'var(--global-palette-brand-tint10)',
-  brandForegroundLinkHover: 'var(--global-palette-brand-tint30)',
-  brandForegroundLinkPressed: 'var(--global-palette-brand-tint20)',
-  brandForegroundLinkSelected: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1: 'var(--global-palette-brand-tint10)',
-  compoundBrandForeground1Hover: 'var(--global-palette-brand-tint20)',
-  compoundBrandForeground1Pressed: 'var(--global-palette-brand-primary)',
-  brandForeground1: 'var(--global-palette-brand-tint20)',
-  brandForeground2: 'var(--global-palette-brand-tint30)',
-  neutralForegroundInverted: 'var(--global-color-white)',
-  neutralForegroundOnBrand: 'var(--global-color-white)',
-  neutralForegroundInvertedLink: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkHover: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkPressed: 'var(--global-color-white)',
-  neutralForegroundInvertedLinkSelected: 'var(--global-color-white)',
-  neutralBackground1: 'var(--global-palette-grey-16)',
-  neutralBackground1Hover: 'var(--global-palette-grey-24)',
-  neutralBackground1Pressed: 'var(--global-palette-grey-12)',
-  neutralBackground1Selected: 'var(--global-palette-grey-22)',
-  neutralBackground2: 'var(--global-palette-grey-14)',
-  neutralBackground2Hover: 'var(--global-palette-grey-22)',
-  neutralBackground2Pressed: 'var(--global-palette-grey-10)',
-  neutralBackground2Selected: 'var(--global-palette-grey-20)',
-  neutralBackground3: 'var(--global-palette-grey-12)',
-  neutralBackground3Hover: 'var(--global-palette-grey-20)',
-  neutralBackground3Pressed: 'var(--global-palette-grey-8)',
-  neutralBackground3Selected: 'var(--global-palette-grey-18)',
-  neutralBackground4: 'var(--global-palette-grey-8)',
-  neutralBackground4Hover: 'var(--global-palette-grey-16)',
-  neutralBackground4Pressed: 'var(--global-palette-grey-4)',
-  neutralBackground4Selected: 'var(--global-palette-grey-14)',
-  neutralBackground5: 'var(--global-palette-grey-4)',
-  neutralBackground5Hover: 'var(--global-palette-grey-12)',
-  neutralBackground5Pressed: 'var(--global-color-black)',
-  neutralBackground5Selected: 'var(--global-palette-grey-10)',
-  neutralBackground6: 'var(--global-palette-grey-20)',
-  neutralBackgroundInverted: 'var(--global-color-white)',
-  subtleBackground: 'transparent',
-  subtleBackgroundHover: 'var(--global-palette-grey-22)',
-  subtleBackgroundPressed: 'var(--global-palette-grey-18)',
-  subtleBackgroundSelected: 'var(--global-palette-grey-20)',
-  transparentBackground: 'transparent',
-  transparentBackgroundHover: 'transparent',
-  transparentBackgroundPressed: 'transparent',
-  transparentBackgroundSelected: 'transparent',
-  neutralBackgroundDisabled: 'var(--global-palette-grey-8)',
-  neutralStencil1: 'var(--global-palette-grey-20)',
-  neutralStencil2: 'var(--global-palette-grey-34)',
-  brandBackground: 'var(--global-palette-brand-shade10)',
-  brandBackgroundHover: 'var(--global-palette-brand-primary)',
-  brandBackgroundPressed: 'var(--global-palette-brand-shade40)',
-  brandBackgroundSelected: 'var(--global-palette-brand-shade20)',
-  compoundBrandBackground: 'var(--global-palette-brand-tint10)',
-  compoundBrandBackgroundHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandBackgroundPressed: 'var(--global-palette-brand-primary)',
-  brandBackgroundStatic: 'var(--global-palette-brand-primary)',
-  brandBackground2: 'var(--global-palette-brand-shade40)',
-  neutralStrokeAccessible: 'var(--global-palette-grey-68)',
-  neutralStrokeAccessibleHover: 'var(--global-palette-grey-74)',
-  neutralStrokeAccessiblePressed: 'var(--global-palette-grey-70)',
-  neutralStrokeAccessibleSelected: 'var(--global-palette-brand-tint20)',
-  neutralStroke1: 'var(--global-palette-grey-40)',
-  neutralStroke1Hover: 'var(--global-palette-grey-46)',
-  neutralStroke1Pressed: 'var(--global-palette-grey-42)',
-  neutralStroke1Selected: 'var(--global-palette-grey-44)',
-  neutralStroke2: 'var(--global-palette-grey-32)',
-  neutralStroke3: 'var(--global-palette-grey-24)',
-  brandStroke1: 'var(--global-palette-brand-tint10)',
-  brandStroke2: 'var(--global-palette-brand-shade30)',
-  compoundBrandStroke: 'var(--global-palette-brand-tint10)',
-  compoundBrandStrokeHover: 'var(--global-palette-brand-tint20)',
-  compoundBrandStrokePressed: 'var(--global-palette-brand-primary)',
-  neutralStrokeDisabled: 'var(--global-palette-grey-26)',
-  transparentStroke: 'transparent',
-  transparentStrokeInteractive: 'transparent',
-  transparentStrokeDisabled: 'transparent',
-  strokeFocus1: 'var(--global-color-black)',
-  strokeFocus2: 'var(--global-color-white)',
-  neutralShadowAmbient: 'rgba(0,0,0,0.24)',
-  neutralShadowKey: 'rgba(0,0,0,0.28)',
-  neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
-  neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
-  neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
-  neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
-  brandShadowAmbient: 'rgba(0,0,0,0.30)',
-  brandShadowKey: 'rgba(0,0,0,0.25)'
+export var generateNeutralColorTokens = function (global) {
+  return {
+    neutralForeground1: global.color.white,
+    neutralForeground2: global.palette.grey[84],
+    neutralForeground2Hover: global.color.white,
+    neutralForeground2Pressed: global.color.white,
+    neutralForeground2Selected: global.color.white,
+    neutralForeground2BrandHover: global.palette.brand.tint20,
+    neutralForeground2BrandPressed: global.palette.brand.tint10,
+    neutralForeground2BrandSelected: global.palette.brand.tint20,
+    neutralForeground3: global.palette.grey[68],
+    neutralForeground3Hover: global.palette.grey[84],
+    neutralForeground3Pressed: global.palette.grey[84],
+    neutralForeground3Selected: global.palette.grey[84],
+    neutralForeground3BrandHover: global.palette.brand.tint20,
+    neutralForeground3BrandPressed: global.palette.brand.tint10,
+    neutralForeground3BrandSelected: global.palette.brand.tint20,
+    neutralForeground4: global.palette.grey[60],
+    neutralForegroundDisabled: global.palette.grey[36],
+    brandForegroundLink: global.palette.brand.tint10,
+    brandForegroundLinkHover: global.palette.brand.tint30,
+    brandForegroundLinkPressed: global.palette.brand.tint20,
+    brandForegroundLinkSelected: global.palette.brand.tint10,
+    compoundBrandForeground1: global.palette.brand.tint10,
+    compoundBrandForeground1Hover: global.palette.brand.tint20,
+    compoundBrandForeground1Pressed: global.palette.brand.primary,
+    brandForeground1: global.palette.brand.tint20,
+    brandForeground2: global.palette.brand.tint30,
+    neutralForegroundInverted: global.color.white,
+    neutralForegroundOnBrand: global.color.white,
+    neutralForegroundInvertedLink: global.color.white,
+    neutralForegroundInvertedLinkHover: global.color.white,
+    neutralForegroundInvertedLinkPressed: global.color.white,
+    neutralForegroundInvertedLinkSelected: global.color.white,
+    neutralBackground1: global.palette.grey[16],
+    neutralBackground1Hover: global.palette.grey[24],
+    neutralBackground1Pressed: global.palette.grey[12],
+    neutralBackground1Selected: global.palette.grey[22],
+    neutralBackground2: global.palette.grey[14],
+    neutralBackground2Hover: global.palette.grey[22],
+    neutralBackground2Pressed: global.palette.grey[10],
+    neutralBackground2Selected: global.palette.grey[20],
+    neutralBackground3: global.palette.grey[12],
+    neutralBackground3Hover: global.palette.grey[20],
+    neutralBackground3Pressed: global.palette.grey[8],
+    neutralBackground3Selected: global.palette.grey[18],
+    neutralBackground4: global.palette.grey[8],
+    neutralBackground4Hover: global.palette.grey[16],
+    neutralBackground4Pressed: global.palette.grey[4],
+    neutralBackground4Selected: global.palette.grey[14],
+    neutralBackground5: global.palette.grey[4],
+    neutralBackground5Hover: global.palette.grey[12],
+    neutralBackground5Pressed: global.color.black,
+    neutralBackground5Selected: global.palette.grey[10],
+    neutralBackground6: global.palette.grey[20],
+    neutralBackgroundInverted: global.color.white,
+    subtleBackground: 'transparent',
+    subtleBackgroundHover: global.palette.grey[22],
+    subtleBackgroundPressed: global.palette.grey[18],
+    subtleBackgroundSelected: global.palette.grey[20],
+    transparentBackground: 'transparent',
+    transparentBackgroundHover: 'transparent',
+    transparentBackgroundPressed: 'transparent',
+    transparentBackgroundSelected: 'transparent',
+    neutralBackgroundDisabled: global.palette.grey[8],
+    neutralStencil1: global.palette.grey[20],
+    neutralStencil2: global.palette.grey[34],
+    brandBackground: global.palette.brand.shade10,
+    brandBackgroundHover: global.palette.brand.primary,
+    brandBackgroundPressed: global.palette.brand.shade40,
+    brandBackgroundSelected: global.palette.brand.shade20,
+    compoundBrandBackground: global.palette.brand.tint10,
+    compoundBrandBackgroundHover: global.palette.brand.tint20,
+    compoundBrandBackgroundPressed: global.palette.brand.primary,
+    brandBackgroundStatic: global.palette.brand.primary,
+    brandBackground2: global.palette.brand.shade40,
+    neutralStrokeAccessible: global.palette.grey[68],
+    neutralStrokeAccessibleHover: global.palette.grey[74],
+    neutralStrokeAccessiblePressed: global.palette.grey[70],
+    neutralStrokeAccessibleSelected: global.palette.brand.tint20,
+    neutralStroke1: global.palette.grey[40],
+    neutralStroke1Hover: global.palette.grey[46],
+    neutralStroke1Pressed: global.palette.grey[42],
+    neutralStroke1Selected: global.palette.grey[44],
+    neutralStroke2: global.palette.grey[32],
+    neutralStroke3: global.palette.grey[24],
+    brandStroke1: global.palette.brand.tint10,
+    brandStroke2: global.palette.brand.shade30,
+    compoundBrandStroke: global.palette.brand.tint10,
+    compoundBrandStrokeHover: global.palette.brand.tint20,
+    compoundBrandStrokePressed: global.palette.brand.primary,
+    neutralStrokeDisabled: global.palette.grey[26],
+    transparentStroke: 'transparent',
+    transparentStrokeInteractive: 'transparent',
+    transparentStrokeDisabled: 'transparent',
+    strokeFocus1: global.color.black,
+    strokeFocus2: global.color.white,
+    neutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    neutralShadowKey: 'rgba(0,0,0,0.28)',
+    neutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    neutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    neutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    neutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    brandShadowAmbient: 'rgba(0,0,0,0.30)',
+    brandShadowKey: 'rgba(0,0,0,0.25)'
+  };
 };
 export var generateSharedColorTokens = function (globalSharedTokens) {
-  return Object.keys(globalSharedTokens).filter(function (sharedColor) {
-    return sharedColor !== 'brand' && sharedColor !== 'grey';
-  }).reduce(function (acc, sharedColor) {
+  return Object.keys(globalSharedTokens).reduce(function (acc, sharedColor) {
     acc[sharedColor] = {
-      background1: "var(--global-palette-" + sharedColor + "-shade40)",
-      background2: "var(--global-palette-" + sharedColor + "-shade30)",
-      background3: "var(--global-palette-" + sharedColor + "-primary)",
-      foreground1: "var(--global-palette-" + sharedColor + "-tint30)",
-      foreground2: "var(--global-palette-" + sharedColor + "-tint40)",
-      foreground3: "var(--global-palette-" + sharedColor + "-tint20)",
-      borderActive: "var(--global-palette-" + sharedColor + "-tint30)",
-      border2: "var(--global-palette-" + sharedColor + "-tint20)"
+      background1: globalSharedTokens[sharedColor].shade40,
+      background2: globalSharedTokens[sharedColor].shade30,
+      background3: globalSharedTokens[sharedColor].primary,
+      foreground1: globalSharedTokens[sharedColor].tint30,
+      foreground2: globalSharedTokens[sharedColor].tint40,
+      foreground3: globalSharedTokens[sharedColor].tint20,
+      borderActive: globalSharedTokens[sharedColor].tint30,
+      border2: globalSharedTokens[sharedColor].tint20
     };
@@ -120,0 +120,0 @@ return acc;

lib/global/utils.d.ts

@@ -1,2 +0,2 @@
-import type { Theme, BrandVariants } from '../types';
-export declare const createGlobalTheme: (brand: BrandVariants) => Theme['global'];
+import type { BrandVariants, GlobalSharedColors, Theme } from '../types';
+export declare const createGlobalTheme: (brand: BrandVariants, globalSharedColors: GlobalSharedColors) => Theme['global'];

lib/global/utils.js

 import { __assign } from "tslib";
 import { borderRadius } from './borderRadius';
-import { sharedColors, black, white, grey, whiteAlpha, blackAlpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink } from './colors';
+import { black, white, grey, whiteAlpha, blackAlpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink } from './colors';
 import { textAlignments, fontFamilies, fontWeights, fontSizes, lineHeights } from './fonts';
 import { strokeWidths } from './strokeWidths';
-export var createGlobalTheme = function (brand) {
+export var createGlobalTheme = function (brand, globalSharedColors) {
   return {
@@ -20,3 +20,3 @@ color: {
     },
-    palette: __assign(__assign({}, sharedColors), {
+    palette: __assign(__assign({}, globalSharedColors), {
       brand: brand,
@@ -23,0 +23,0 @@ grey: grey,

lib/utils/createDarkTheme.js

 import { __assign } from "tslib";
 import { createShadowLevelTokens } from './shadows';
-import { generateSharedColorTokens, neutralColorTokens } from '../alias/dark';
+import { generateSharedColorTokens, generateNeutralColorTokens } from '../alias/dark';
 import { createGlobalTheme } from '../global/utils';
+import { sharedColors as globalSharedColors } from '../global/colors';
 export var createDarkTheme = function (brand) {
-  var global = createGlobalTheme(brand);
+  var global = createGlobalTheme(brand, globalSharedColors);
+  var neutral = generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: __assign(__assign({}, generateSharedColorTokens(global.palette)), {
-        neutral: neutralColorTokens
+      color: __assign(__assign({}, generateSharedColorTokens(globalSharedColors)), {
+        neutral: neutral
       }),
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey)
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -15,0 +17,0 @@ };

lib/utils/createHighContrastTheme.js

 import { __assign } from "tslib";
 import { createShadowLevelTokens } from './shadows';
-import { generateSharedColorTokens, neutralColorTokens } from '../alias/highContrast';
+import { generateSharedColorTokens, generateNeutralColorTokens } from '../alias/highContrast';
 import { createGlobalTheme } from '../global/utils';
+import { sharedColors as globalSharedColors } from '../global/colors';
 export var createHighContrastTheme = function (brand) {
-  var global = createGlobalTheme(brand);
+  var global = createGlobalTheme(brand, globalSharedColors);
+  var neutral = generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: __assign(__assign({}, generateSharedColorTokens(global.palette)), {
-        neutral: neutralColorTokens
+      color: __assign(__assign({}, generateSharedColorTokens(globalSharedColors, global.color)), {
+        neutral: neutral
       }),
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey)
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -15,0 +17,0 @@ };

lib/utils/createLightTheme.js

 import { __assign } from "tslib";
 import { createShadowLevelTokens } from './shadows';
-import { generateSharedColorTokens, neutralColorTokens } from '../alias/light';
+import { generateSharedColorTokens, generateNeutralColorTokens } from '../alias/light';
 import { createGlobalTheme } from '../global/utils';
+import { sharedColors as globalSharedColors } from '../global/colors';
 export var createLightTheme = function (brand) {
-  var global = createGlobalTheme(brand);
+  var global = createGlobalTheme(brand, globalSharedColors);
+  var neutral = generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: __assign(__assign({}, generateSharedColorTokens(global.palette)), {
-        neutral: neutralColorTokens
+      color: __assign(__assign({}, generateSharedColorTokens(globalSharedColors)), {
+        neutral: neutral
       }),
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey)
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -15,0 +17,0 @@ };

lib/utils/createTeamsDarkTheme.js

 import { __assign } from "tslib";
 import { createShadowLevelTokens } from './shadows';
-import { generateSharedColorTokens, neutralColorTokens } from '../alias/teamsDark';
+import { generateSharedColorTokens, generateNeutralColorTokens } from '../alias/teamsDark';
 import { createGlobalTheme } from '../global/utils';
+import { sharedColors as globalSharedColors } from '../global/colors';
 export var createTeamsDarkTheme = function (brand) {
-  var global = createGlobalTheme(brand);
+  var global = createGlobalTheme(brand, globalSharedColors);
+  var neutral = generateNeutralColorTokens(global);
   return {
     global: global,
     alias: {
-      color: __assign(__assign({}, generateSharedColorTokens(global.palette)), {
-        neutral: neutralColorTokens
+      color: __assign(__assign({}, generateSharedColorTokens(globalSharedColors)), {
+        neutral: neutral
       }),
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey)
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey)
     }
@@ -15,0 +17,0 @@ };

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "9.0.0-alpha.23",
+  "version": "9.0.0-alpha.24",
   "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

Worsened metrics

Total package byte prevSize

321785

decreased by-52.38%

Number of package files

187

decreased by-32.49%

Lines of code

5514

decreased by-28.1%

No dependency changes