From 5d2b1bde5b6bfae7914d36a8ee14d5182d5f030a Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Sat, 1 Nov 2025 16:26:23 -0700 Subject: [PATCH 1/2] chore: Add official reference token theme API support to components package --- style-dictionary/classic/color-palette.ts | 4 + .../visual-refresh/color-palette.ts | 6 +- style-dictionary/visual-refresh/index.ts | 88 ++++++++++++++++++- 3 files changed, 93 insertions(+), 5 deletions(-) diff --git a/style-dictionary/classic/color-palette.ts b/style-dictionary/classic/color-palette.ts index 4f6f2eb811..6729de64ec 100644 --- a/style-dictionary/classic/color-palette.ts +++ b/style-dictionary/classic/color-palette.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import merge from 'lodash/merge.js'; +import { expandedReferenceTokens } from '../core/color-palette.js'; import { expandColorDictionary } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; import { tokens as parentTokens } from '../visual-refresh/color-palette.js'; @@ -51,6 +52,9 @@ const tokens: StyleDictionary.ColorPaletteDictionary = { }; const referenceTokens: StyleDictionary.ReferenceDictionary = { + // Start with all reference tokens from core + ...expandedReferenceTokens, + // Override with classic-specific mappings colorPrimary50: tokens.colorBlue50, colorPrimary200: tokens.colorBlue200, colorPrimary300: tokens.colorBlue300, diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts index 83b8c7800a..4747d935e6 100644 --- a/style-dictionary/visual-refresh/color-palette.ts +++ b/style-dictionary/visual-refresh/color-palette.ts @@ -1,9 +1,9 @@ // 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 { paletteTokens as brand } from '../core/color-palette.js'; +import { expandColorDictionary } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; /** @@ -73,7 +73,7 @@ const tokens: StyleDictionary.ColorPaletteDictionary = { ]), }; -const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge({}, tokens, expandedReferenceTokens); +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); export const mode: StyleDictionary.ModeIdentifier = 'color'; diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts index caef303197..8a4dd9e6b3 100644 --- a/style-dictionary/visual-refresh/index.ts +++ b/style-dictionary/visual-refresh/index.ts @@ -1,7 +1,8 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { ThemeBuilder } from '@cloudscape-design/theming-build'; +import { ReferenceTokens, ThemeBuilder } from '@cloudscape-design/theming-build'; +import { paletteTokens } from '../core/color-palette.js'; import { createAlertContext, createAppLayoutToolbarContext, @@ -22,7 +23,7 @@ const modes = [ ]; const tokenCategories: Array = [ - 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'), @@ -34,12 +35,95 @@ const tokenCategories: Array = [ await import('./shadows.js'), ]; +// Reference tokens for visual-refresh theme using new structured format +// This will eventually replace the flat referenceTokens in core/color-palette.ts +const referenceTokens: ReferenceTokens = { + color: { + primary: { + 50: paletteTokens.colorBlue50, + 100: paletteTokens.colorBlue100, + 200: paletteTokens.colorBlue200, + 300: paletteTokens.colorBlue300, + 400: paletteTokens.colorBlue400, + 500: paletteTokens.colorBlue500, + 600: paletteTokens.colorBlue600, // a11y + 700: paletteTokens.colorBlue700, + 800: paletteTokens.colorBlue800, + 900: paletteTokens.colorBlue900, + 1000: paletteTokens.colorBlue1000, + }, + neutral: { + 50: paletteTokens.colorGrey50, + 100: paletteTokens.colorGrey100, + 150: paletteTokens.colorGrey150, + 200: paletteTokens.colorGrey200, + 250: paletteTokens.colorGrey250, + 300: paletteTokens.colorGrey300, + 350: paletteTokens.colorGrey350, + 400: paletteTokens.colorGrey400, + 450: paletteTokens.colorGrey450, + 500: paletteTokens.colorGrey500, // a11y + 550: paletteTokens.colorGrey550, + 600: paletteTokens.colorGrey600, + 650: paletteTokens.colorGrey650, + 700: paletteTokens.colorGrey700, + 750: paletteTokens.colorGrey750, + 800: paletteTokens.colorGrey800, + 850: paletteTokens.colorGrey850, + 900: paletteTokens.colorGrey900, + 950: paletteTokens.colorGrey950, + 1000: paletteTokens.colorGrey1000, + }, + error: { + 50: paletteTokens.colorRed50, + 300: paletteTokens.colorRed300, + 400: paletteTokens.colorRed400, + 500: paletteTokens.colorRed500, + 600: paletteTokens.colorRed600, + 900: paletteTokens.colorRed900, + 1000: paletteTokens.colorRed1000, + }, + success: { + 50: paletteTokens.colorGreen50, + 300: paletteTokens.colorGreen300, + 400: paletteTokens.colorGreen400, + 500: paletteTokens.colorGreen500, + 600: paletteTokens.colorGreen600, + 900: paletteTokens.colorGreen900, + 1000: paletteTokens.colorGreen1000, + }, + warning: { + 50: paletteTokens.colorYellow50, + 300: paletteTokens.colorYellow300, + 400: paletteTokens.colorYellow400, + 500: paletteTokens.colorYellow500, + 600: paletteTokens.colorYellow600, + 900: paletteTokens.colorYellow900, + 1000: paletteTokens.colorYellow1000, + }, + info: { + 50: paletteTokens.colorBlue50, + 300: paletteTokens.colorBlue300, + 400: paletteTokens.colorBlue400, + 500: paletteTokens.colorBlue500, + 600: paletteTokens.colorBlue600, + 900: paletteTokens.colorBlue900, + 1000: paletteTokens.colorBlue1000, + }, + }, +}; + export async function buildVisualRefresh(builder: ThemeBuilder) { + // Add reference tokens first to generate palette tokens + builder.addReferenceTokens(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)); From 47f3f8985301b3373a21c959db2349982804e33c Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Tue, 4 Nov 2025 16:45:10 -0800 Subject: [PATCH 2/2] refactor: Reference tokens --- style-dictionary/classic/color-palette.ts | 108 ++++++++++-------- style-dictionary/classic/index.ts | 3 + style-dictionary/core/color-palette.ts | 85 +------------- .../visual-refresh/color-palette.ts | 71 ++++++++++++ style-dictionary/visual-refresh/index.ts | 83 +------------- 5 files changed, 136 insertions(+), 214 deletions(-) diff --git a/style-dictionary/classic/color-palette.ts b/style-dictionary/classic/color-palette.ts index 6729de64ec..85d04b4edf 100644 --- a/style-dictionary/classic/color-palette.ts +++ b/style-dictionary/classic/color-palette.ts @@ -2,10 +2,10 @@ // SPDX-License-Identifier: Apache-2.0 import merge from 'lodash/merge.js'; -import { expandedReferenceTokens } from '../core/color-palette.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. @@ -51,53 +51,61 @@ const tokens: StyleDictionary.ColorPaletteDictionary = { colorYellow900: '#906806', }; -const referenceTokens: StyleDictionary.ReferenceDictionary = { - // Start with all reference tokens from core - ...expandedReferenceTokens, - // Override with classic-specific mappings - 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'; diff --git a/style-dictionary/classic/index.ts b/style-dictionary/classic/index.ts index 1419e519e6..127fd4f6a6 100644 --- a/style-dictionary/classic/index.ts +++ b/style-dictionary/classic/index.ts @@ -33,6 +33,9 @@ const tokenCategories: Array = [ ]; 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); diff --git a/style-dictionary/core/color-palette.ts b/style-dictionary/core/color-palette.ts index 7f76f54d31..8c9a1dd39a 100644 --- a/style-dictionary/core/color-palette.ts +++ b/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 }; diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts index 4747d935e6..acfc88801e 100644 --- a/style-dictionary/visual-refresh/color-palette.ts +++ b/style-dictionary/visual-refresh/color-palette.ts @@ -2,6 +2,8 @@ // SPDX-License-Identifier: Apache-2.0 import pick from 'lodash/pick.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 = { ]), }; +// 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 }; diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts index 8a4dd9e6b3..9f970077c6 100644 --- a/style-dictionary/visual-refresh/index.ts +++ b/style-dictionary/visual-refresh/index.ts @@ -1,8 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { ReferenceTokens, ThemeBuilder } from '@cloudscape-design/theming-build'; +import { ThemeBuilder } from '@cloudscape-design/theming-build'; -import { paletteTokens } from '../core/color-palette.js'; import { createAlertContext, createAppLayoutToolbarContext, @@ -35,87 +34,9 @@ const tokenCategories: Array = [ await import('./shadows.js'), ]; -// Reference tokens for visual-refresh theme using new structured format -// This will eventually replace the flat referenceTokens in core/color-palette.ts -const referenceTokens: ReferenceTokens = { - color: { - primary: { - 50: paletteTokens.colorBlue50, - 100: paletteTokens.colorBlue100, - 200: paletteTokens.colorBlue200, - 300: paletteTokens.colorBlue300, - 400: paletteTokens.colorBlue400, - 500: paletteTokens.colorBlue500, - 600: paletteTokens.colorBlue600, // a11y - 700: paletteTokens.colorBlue700, - 800: paletteTokens.colorBlue800, - 900: paletteTokens.colorBlue900, - 1000: paletteTokens.colorBlue1000, - }, - neutral: { - 50: paletteTokens.colorGrey50, - 100: paletteTokens.colorGrey100, - 150: paletteTokens.colorGrey150, - 200: paletteTokens.colorGrey200, - 250: paletteTokens.colorGrey250, - 300: paletteTokens.colorGrey300, - 350: paletteTokens.colorGrey350, - 400: paletteTokens.colorGrey400, - 450: paletteTokens.colorGrey450, - 500: paletteTokens.colorGrey500, // a11y - 550: paletteTokens.colorGrey550, - 600: paletteTokens.colorGrey600, - 650: paletteTokens.colorGrey650, - 700: paletteTokens.colorGrey700, - 750: paletteTokens.colorGrey750, - 800: paletteTokens.colorGrey800, - 850: paletteTokens.colorGrey850, - 900: paletteTokens.colorGrey900, - 950: paletteTokens.colorGrey950, - 1000: paletteTokens.colorGrey1000, - }, - error: { - 50: paletteTokens.colorRed50, - 300: paletteTokens.colorRed300, - 400: paletteTokens.colorRed400, - 500: paletteTokens.colorRed500, - 600: paletteTokens.colorRed600, - 900: paletteTokens.colorRed900, - 1000: paletteTokens.colorRed1000, - }, - success: { - 50: paletteTokens.colorGreen50, - 300: paletteTokens.colorGreen300, - 400: paletteTokens.colorGreen400, - 500: paletteTokens.colorGreen500, - 600: paletteTokens.colorGreen600, - 900: paletteTokens.colorGreen900, - 1000: paletteTokens.colorGreen1000, - }, - warning: { - 50: paletteTokens.colorYellow50, - 300: paletteTokens.colorYellow300, - 400: paletteTokens.colorYellow400, - 500: paletteTokens.colorYellow500, - 600: paletteTokens.colorYellow600, - 900: paletteTokens.colorYellow900, - 1000: paletteTokens.colorYellow1000, - }, - info: { - 50: paletteTokens.colorBlue50, - 300: paletteTokens.colorBlue300, - 400: paletteTokens.colorBlue400, - 500: paletteTokens.colorBlue500, - 600: paletteTokens.colorBlue600, - 900: paletteTokens.colorBlue900, - 1000: paletteTokens.colorBlue1000, - }, - }, -}; - export async function buildVisualRefresh(builder: ThemeBuilder) { // Add reference tokens first to generate palette tokens - builder.addReferenceTokens(referenceTokens); + builder.addReferenceTokens((await import('./color-palette.js')).referenceTokens); // Add existing token categories tokenCategories.forEach(({ tokens, mode: modeId }) => {