feat(react-theme): Use direct values in alias tokens (#19660)

* feat(react-theme): Use direct values in alias tokens

* Change files

* fix snapshot in UT

change/@fluentui-react-theme-ab736bf5-9ecb-4070-a27a-893044b601b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Use direct values in alias tokens",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-theme/etc/react-theme.api.md

@@ -68,7 +68,7 @@ export type ColorVariants = {
 export const createDarkTheme: (brand: BrandVariants) => Theme;
 
 // @public (undocumented)
-export const createGlobalTheme: (brand: BrandVariants) => Theme['global'];
+export const createGlobalTheme: (brand: BrandVariants, globalSharedColors: GlobalSharedColors) => Theme['global'];
 
 // @public (undocumented)
 export const createHighContrastTheme: (brand: BrandVariants) => Theme;

packages/react-theme/src/global/utils.ts

@@ -1,6 +1,5 @@
 import { borderRadius } from './borderRadius';
 import {
-  sharedColors,
   black,
   white,
   grey,
@@ -17,9 +16,9 @@ import {
 } from './colors';
 import { textAlignments, fontFamilies, fontWeights, fontSizes, lineHeights } from './fonts';
 import { strokeWidths } from './strokeWidths';
-import type { Theme, BrandVariants } from '../types';
+import type { BrandVariants, GlobalSharedColors, Theme } from '../types';
 
-export const createGlobalTheme = (brand: BrandVariants): Theme['global'] => {
+export const createGlobalTheme = (brand: BrandVariants, globalSharedColors: GlobalSharedColors): Theme['global'] => {
   return {
     color: {
       white,
@@ -34,7 +33,7 @@ export const createGlobalTheme = (brand: BrandVariants): Theme['global'] => {
       hcButtonFace,
     },
     palette: {
-      ...sharedColors,
+      ...globalSharedColors,
       brand: brand,
       grey,
       whiteAlpha,

packages/react-theme/src/themes/AliasColor.stories.tsx

@@ -83,12 +83,8 @@ export const AliasColors = () => {
             color: theme.dark.alias.color.neutral.neutralForeground1,
           }}
         />
-        {Object.keys(theme.light.global.palette)
-          // TODO: We iterate global.palette to show color swatches.
-          //       The selected swatch then is used to populate the alias grid.
-          //       But, global.palette has 'grey' and there is no alias.color.grey so it throws.
-          //       Filtering grey out here, but this means our structure is wrong.
-          .filter(key => key !== 'grey' && key !== 'brand')
+        {Object.keys(theme.light.alias.color)
+          .filter(key => key !== 'neutral')
           .map((colorName: Exclude<keyof Theme['global']['palette'], 'grey' | 'brand'>) => (
             <ColorButton
               key={colorName}

packages/react-theme/src/utils/createDarkTheme.ts

@@ -1,18 +1,20 @@
 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';
 import type { BrandVariants, Theme } from '../types';
 
 export const createDarkTheme: (brand: BrandVariants) => Theme = brand => {
-  const global = createGlobalTheme(brand);
+  const global = createGlobalTheme(brand, globalSharedColors);
+  const neutral = generateNeutralColorTokens(global);
   return {
     global,
     alias: {
       color: {
-        ...generateSharedColorTokens(global.palette),
-        neutral: neutralColorTokens,
+        ...generateSharedColorTokens(globalSharedColors),
+        neutral,
       } as Theme['alias']['color'],
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey),
     },
   };
 };

packages/react-theme/src/utils/createHighContrastTheme.ts

@@ -1,18 +1,20 @@
 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';
 import type { BrandVariants, Theme } from '../types';
 
 export const createHighContrastTheme: (brand: BrandVariants) => Theme = brand => {
-  const global = createGlobalTheme(brand);
+  const global = createGlobalTheme(brand, globalSharedColors);
+  const neutral = generateNeutralColorTokens(global);
   return {
     global,
     alias: {
       color: {
-        ...generateSharedColorTokens(global.palette),
-        neutral: neutralColorTokens,
+        ...generateSharedColorTokens(globalSharedColors, global.color),
+        neutral,
       } as Theme['alias']['color'],
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey),
     },
   };
 };

packages/react-theme/src/utils/createLightTheme.ts

@@ -1,18 +1,20 @@
 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';
 import type { BrandVariants, Theme } from '../types';
 
 export const createLightTheme: (brand: BrandVariants) => Theme = brand => {
-  const global = createGlobalTheme(brand);
+  const global = createGlobalTheme(brand, globalSharedColors);
+  const neutral = generateNeutralColorTokens(global);
   return {
     global,
     alias: {
       color: {
-        ...generateSharedColorTokens(global.palette),
-        neutral: neutralColorTokens,
+        ...generateSharedColorTokens(globalSharedColors),
+        neutral,
       } as Theme['alias']['color'],
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey),
     },
   };
 };

packages/react-theme/src/utils/createTeamsDarkTheme.ts

@@ -1,18 +1,20 @@
 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';
 import type { BrandVariants, Theme } from '../types';
 
 export const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => {
-  const global = createGlobalTheme(brand);
+  const global = createGlobalTheme(brand, globalSharedColors);
+  const neutral = generateNeutralColorTokens(global);
   return {
     global,
     alias: {
       color: {
-        ...generateSharedColorTokens(global.palette),
-        neutral: neutralColorTokens,
+        ...generateSharedColorTokens(globalSharedColors),
+        neutral,
       } as Theme['alias']['color'],
-      shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+      shadow: createShadowLevelTokens(neutral.neutralShadowAmbient, neutral.neutralShadowKey),
     },
   };
 };

packages/react-theme/src/utils/themeToCSSVariables.test.ts

@@ -4,9 +4,9 @@ import { themeToCSSVariables } from './themeToCSSVariables';
 describe('themeToCSSVariables', () => {
   it('returns a flat object with CSS variables', () => {
     expect(themeToCSSVariables(teamsLightTheme)).toMatchObject({
-      '--alias-color-blue-foreground1': 'var(--global-palette-blue-shade10)',
-      '--alias-color-blue-foreground2': 'var(--global-palette-blue-shade30)',
-      '--alias-color-blue-foreground3': 'var(--global-palette-blue-primary)',
+      '--alias-color-blue-foreground1': '#006cbf',
+      '--alias-color-blue-foreground2': '#004377',
+      '--alias-color-blue-foreground3': '#0078d4',
     });
   });
 });