chore: Add official reference token theme API support to components package

style-dictionary/classic/color-palette.ts

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils/index.js';
+import { ReferenceTokens } from '@cloudscape-design/theming-build';
+
 import { StyleDictionary } from '../utils/interfaces.js';
-import { tokens as parentTokens } from '../visual-refresh/color-palette.js';
+import { referenceTokens as vrReferenceTokens, tokens as parentTokens } from '../visual-refresh/color-palette.js';
 
 /**
  * @deprecated These color palette tokens are deprecated and may be removed in a future version.
@@ -50,50 +51,61 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorYellow900: '#906806',
 };
 
-const referenceTokens: StyleDictionary.ReferenceDictionary = {
-  colorPrimary50: tokens.colorBlue50,
-  colorPrimary200: tokens.colorBlue200,
-  colorPrimary300: tokens.colorBlue300,
-  colorPrimary400: tokens.colorBlue400,
-  colorPrimary600: tokens.colorBlue600,
-  colorPrimary700: tokens.colorBlue700,
-  colorPrimary1000: tokens.colorBlue1000,
-  colorNeutral100: tokens.colorGrey100,
-  colorNeutral200: tokens.colorGrey200,
-  colorNeutral250: tokens.colorGrey250,
-  colorNeutral300: tokens.colorGrey300,
-  colorNeutral400: tokens.colorGrey400,
-  colorNeutral450: tokens.colorGrey450,
-  colorNeutral500: tokens.colorGrey500,
-  colorNeutral600: tokens.colorGrey600,
-  colorNeutral650: tokens.colorGrey650,
-  colorNeutral700: tokens.colorGrey700,
-  colorNeutral750: tokens.colorGrey750,
-  colorNeutral800: tokens.colorGrey800,
-  colorNeutral850: tokens.colorGrey850,
-  colorNeutral950: tokens.colorGrey950,
-  colorError50: tokens.colorRed50,
-  colorError400: tokens.colorRed400,
-  colorError600: tokens.colorRed600,
-  colorError1000: tokens.colorRed1000,
-  colorInfo50: tokens.colorBlue50,
-  colorInfo300: tokens.colorBlue300,
-  colorInfo400: tokens.colorBlue400,
-  colorInfo600: tokens.colorBlue600,
-  colorInfo1000: tokens.colorBlue1000,
-  colorSuccess50: tokens.colorGreen50,
-  colorSuccess500: tokens.colorGreen500,
-  colorSuccess600: tokens.colorGreen600,
-  colorSuccess1000: tokens.colorGreen1000,
-  colorWarning900: tokens.colorYellow900,
-};
-
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
-  {},
-  parentTokens,
-  tokens,
-  expandColorDictionary(referenceTokens)
-);
+// Reference tokens for classic theme
+const referenceTokens: ReferenceTokens = merge({}, vrReferenceTokens, {
+  color: {
+    primary: {
+      50: tokens.colorBlue50,
+      200: tokens.colorBlue200,
+      300: tokens.colorBlue300,
+      400: tokens.colorBlue400,
+      600: tokens.colorBlue600,
+      700: tokens.colorBlue700,
+      1000: tokens.colorBlue1000,
+    },
+    neutral: {
+      100: tokens.colorGrey100,
+      200: tokens.colorGrey200,
+      250: tokens.colorGrey250,
+      300: tokens.colorGrey300,
+      400: tokens.colorGrey400,
+      450: tokens.colorGrey450,
+      500: tokens.colorGrey500,
+      600: tokens.colorGrey600,
+      650: tokens.colorGrey650,
+      700: tokens.colorGrey700,
+      750: tokens.colorGrey750,
+      800: tokens.colorGrey800,
+      850: tokens.colorGrey850,
+      950: tokens.colorGrey950,
+    },
+    error: {
+      50: tokens.colorRed50,
+      400: tokens.colorRed400,
+      600: tokens.colorRed600,
+      1000: tokens.colorRed1000,
+    },
+    success: {
+      50: tokens.colorGreen50,
+      500: tokens.colorGreen500,
+      600: tokens.colorGreen600,
+      1000: tokens.colorGreen1000,
+    },
+    warning: {
+      900: tokens.colorYellow900,
+    },
+    info: {
+      50: tokens.colorBlue50,
+      300: tokens.colorBlue300,
+      400: tokens.colorBlue400,
+      600: tokens.colorBlue600,
+      1000: tokens.colorBlue1000,
+    },
+  },
+});
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, parentTokens, tokens);
 
 export { expandedTokens as tokens };
+export { referenceTokens };
+
 export const mode: StyleDictionary.ModeIdentifier = 'color';

style-dictionary/classic/index.ts

@@ -33,6 +33,9 @@ const tokenCategories: Array<StyleDictionary.CategoryModule> = [
 ];
 
 export async function buildClassicOpenSource(builder: ThemeBuilder) {
+  // Add reference tokens first to generate palette tokens
+  builder.addReferenceTokens((await import('./color-palette.js')).referenceTokens);
+
   tokenCategories.forEach(({ tokens, mode: modeId }) => {
     const mode = modes.find(mode => mode.id === modeId);
     builder.addTokens(tokens, mode);

style-dictionary/core/color-palette.ts

@@ -1,7 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
-
 import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
@@ -254,88 +252,9 @@ const paletteTokens: StyleDictionary.ColorPaletteDictionary = {
   colorWhite: '#ffffff',
 };
 
-const referenceTokens: StyleDictionary.ReferenceDictionary = {
-  colorPrimary50: paletteTokens.colorBlue50,
-  colorPrimary100: paletteTokens.colorBlue100,
-  colorPrimary200: paletteTokens.colorBlue200,
-  colorPrimary300: paletteTokens.colorBlue300,
-  colorPrimary400: paletteTokens.colorBlue400,
-  colorPrimary500: paletteTokens.colorBlue500,
-  colorPrimary600: paletteTokens.colorBlue600,
-  colorPrimary700: paletteTokens.colorBlue700,
-  colorPrimary800: paletteTokens.colorBlue800,
-  colorPrimary900: paletteTokens.colorBlue900,
-  colorPrimary1000: paletteTokens.colorBlue1000,
-  colorNeutral50: paletteTokens.colorGrey50,
-  colorNeutral100: paletteTokens.colorGrey100,
-  colorNeutral150: paletteTokens.colorGrey150,
-  colorNeutral200: paletteTokens.colorGrey200,
-  colorNeutral250: paletteTokens.colorGrey250,
-  colorNeutral300: paletteTokens.colorGrey300,
-  colorNeutral350: paletteTokens.colorGrey350,
-  colorNeutral400: paletteTokens.colorGrey400,
-  colorNeutral450: paletteTokens.colorGrey450,
-  colorNeutral500: paletteTokens.colorGrey500,
-  colorNeutral550: paletteTokens.colorGrey550,
-  colorNeutral600: paletteTokens.colorGrey600,
-  colorNeutral650: paletteTokens.colorGrey650,
-  colorNeutral700: paletteTokens.colorGrey700,
-  colorNeutral750: paletteTokens.colorGrey750,
-  colorNeutral800: paletteTokens.colorGrey800,
-  colorNeutral850: paletteTokens.colorGrey850,
-  colorNeutral900: paletteTokens.colorGrey900,
-  colorNeutral950: paletteTokens.colorGrey950,
-  colorNeutral1000: paletteTokens.colorGrey1000,
-  colorError50: paletteTokens.colorRed50,
-  colorError100: paletteTokens.colorRed100,
-  colorError200: paletteTokens.colorRed200,
-  colorError300: paletteTokens.colorRed300,
-  colorError400: paletteTokens.colorRed400,
-  colorError500: paletteTokens.colorRed500,
-  colorError600: paletteTokens.colorRed600,
-  colorError700: paletteTokens.colorRed700,
-  colorError800: paletteTokens.colorRed800,
-  colorError900: paletteTokens.colorRed900,
-  colorError1000: paletteTokens.colorRed1000,
-  colorInfo50: paletteTokens.colorBlue50,
-  colorInfo100: paletteTokens.colorBlue100,
-  colorInfo200: paletteTokens.colorBlue200,
-  colorInfo300: paletteTokens.colorBlue300,
-  colorInfo400: paletteTokens.colorBlue400,
-  colorInfo500: paletteTokens.colorBlue500,
-  colorInfo600: paletteTokens.colorBlue600,
-  colorInfo700: paletteTokens.colorBlue700,
-  colorInfo800: paletteTokens.colorBlue800,
-  colorInfo900: paletteTokens.colorBlue900,
-  colorInfo1000: paletteTokens.colorBlue1000,
-  colorSuccess50: paletteTokens.colorGreen50,
-  colorSuccess100: paletteTokens.colorGreen100,
-  colorSuccess200: paletteTokens.colorGreen200,
-  colorSuccess300: paletteTokens.colorGreen300,
-  colorSuccess400: paletteTokens.colorGreen400,
-  colorSuccess500: paletteTokens.colorGreen500,
-  colorSuccess600: paletteTokens.colorGreen600,
-  colorSuccess700: paletteTokens.colorGreen700,
-  colorSuccess800: paletteTokens.colorGreen800,
-  colorSuccess900: paletteTokens.colorGreen900,
-  colorSuccess1000: paletteTokens.colorGreen1000,
-  colorWarning50: paletteTokens.colorYellow50,
-  colorWarning100: paletteTokens.colorYellow100,
-  colorWarning200: paletteTokens.colorYellow200,
-  colorWarning300: paletteTokens.colorYellow300,
-  colorWarning400: paletteTokens.colorYellow400,
-  colorWarning500: paletteTokens.colorYellow500,
-  colorWarning600: paletteTokens.colorYellow600,
-  colorWarning700: paletteTokens.colorYellow700,
-  colorWarning800: paletteTokens.colorYellow800,
-  colorWarning900: paletteTokens.colorYellow900,
-  colorWarning1000: paletteTokens.colorYellow1000,
-};
-
-const expandedReferenceTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(referenceTokens);
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, paletteTokens, expandedReferenceTokens);
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(paletteTokens);
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 
 export { expandedTokens as tokens };
-export { paletteTokens, expandedReferenceTokens };
+export { paletteTokens };

style-dictionary/visual-refresh/color-palette.ts

@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge.js';
 import pick from 'lodash/pick.js';
 
-import { expandedReferenceTokens, paletteTokens as brand } from '../core/color-palette.js';
+import { ReferenceTokens } from '@cloudscape-design/theming-build';
+
+import { paletteTokens as brand } from '../core/color-palette.js';
+import { expandColorDictionary } from '../utils/index.js';
 import { StyleDictionary } from '../utils/interfaces.js';
 
 /**
@@ -73,8 +75,77 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
   ]),
 };
 
-const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, tokens, expandedReferenceTokens);
+// Reference tokens for visual-refresh theme
+const referenceTokens: ReferenceTokens = {
+  color: {
+    primary: {
+      50: brand.colorBlue50,
+      100: brand.colorBlue100,
+      200: brand.colorBlue200,
+      300: brand.colorBlue300,
+      400: brand.colorBlue400,
+      500: brand.colorBlue500,
+      600: brand.colorBlue600, // a11y
+      700: brand.colorBlue700,
+      800: brand.colorBlue800,
+      900: brand.colorBlue900,
+      1000: brand.colorBlue1000,
+    },
+    neutral: {
+      50: brand.colorGrey50,
+      100: brand.colorGrey100,
+      150: brand.colorGrey150,
+      200: brand.colorGrey200,
+      250: brand.colorGrey250,
+      300: brand.colorGrey300,
+      350: brand.colorGrey350,
+      400: brand.colorGrey400,
+      450: brand.colorGrey450,
+      500: brand.colorGrey500, // a11y
+      550: brand.colorGrey550,
+      600: brand.colorGrey600,
+      650: brand.colorGrey650,
+      700: brand.colorGrey700,
+      750: brand.colorGrey750,
+      800: brand.colorGrey800,
+      850: brand.colorGrey850,
+      900: brand.colorGrey900,
+      950: brand.colorGrey950,
+      1000: brand.colorGrey1000,
+    },
+    error: {
+      50: brand.colorRed50,
+      400: brand.colorRed400,
+      600: brand.colorRed600,
+      900: brand.colorRed900,
+      1000: brand.colorRed1000,
+    },
+    success: {
+      50: brand.colorGreen50,
+      500: brand.colorGreen500,
+      600: brand.colorGreen600,
+      1000: brand.colorGreen1000,
+    },
+    warning: {
+      50: brand.colorYellow50,
+      400: brand.colorYellow400,
+      500: brand.colorYellow500,
+      900: brand.colorYellow900,
+      1000: brand.colorYellow1000,
+    },
+    info: {
+      50: brand.colorBlue50,
+      300: brand.colorBlue300,
+      400: brand.colorBlue400,
+      600: brand.colorBlue600,
+      1000: brand.colorBlue1000,
+    },
+  },
+};
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
 
 export const mode: StyleDictionary.ModeIdentifier = 'color';
 
 export { expandedTokens as tokens };
+export { referenceTokens };

style-dictionary/visual-refresh/index.ts

@@ -22,7 +22,7 @@ const modes = [
 ];
 
 const tokenCategories: Array<StyleDictionary.CategoryModule> = [
-  await import('./color-palette.js'),
+  await import('./color-palette.js'), // Still needed for now for non-deprecated palette tokens like colorWhite, colorBlack
   await import('./color-charts.js'),
   await import('./color-severity.js'),
   await import('./colors.js'),
@@ -35,11 +35,16 @@ const tokenCategories: Array<StyleDictionary.CategoryModule> = [
 ];
 
 export async function buildVisualRefresh(builder: ThemeBuilder) {
+  // Add reference tokens first to generate palette tokens
+  builder.addReferenceTokens((await import('./color-palette.js')).referenceTokens);
+
+  // Add existing token categories
   tokenCategories.forEach(({ tokens, mode: modeId }) => {
     const mode = modes.find(mode => mode.id === modeId);
     builder.addTokens(tokens, mode);
   });
 
+  // Add contexts for component-specific overrides
   builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens));
   builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens));
   builder.addContext(createHeaderContext((await import('./contexts/header.js')).tokens));