From f5fd39b72a14da485b14b5c2edb179245ff8896c Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Mon, 27 Jul 2026 12:31:02 +0200 Subject: [PATCH] chore: Break circular dependency between themes' color palettes --- style-dictionary/core/color-palette.ts | 271 +---------------- style-dictionary/core/palette-values.ts | 275 ++++++++++++++++++ style-dictionary/one-theme/color-palette.ts | 2 +- style-dictionary/one-theme/index.ts | 3 - .../visual-refresh/color-palette.ts | 2 +- style-dictionary/visual-refresh/colors.ts | 2 +- 6 files changed, 279 insertions(+), 276 deletions(-) create mode 100644 style-dictionary/core/palette-values.ts diff --git a/style-dictionary/core/color-palette.ts b/style-dictionary/core/color-palette.ts index 8c8e174125..11ed52bd46 100644 --- a/style-dictionary/core/color-palette.ts +++ b/style-dictionary/core/color-palette.ts @@ -3,276 +3,7 @@ import { expandColorDictionary } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; import { referenceTokens as vrReferenceTokens } from '../visual-refresh/color-palette.js'; - -const paletteTokens: StyleDictionary.ColorPaletteDictionary = { - colorGrey50: '#fcfcfd', - colorGrey100: '#f9f9fa', - colorGrey150: '#f6f6f9', - colorGrey200: '#f3f3f7', - colorGrey250: '#ebebf0', - colorGrey300: '#dedee3', - colorGrey350: '#c6c6cd', - colorGrey400: '#b4b4bb', - colorGrey450: '#a4a4ad', - colorGrey500: '#8c8c94', - colorGrey550: '#72747e', - colorGrey600: '#656871', - colorGrey650: '#424650', - colorGrey700: '#333843', - colorGrey750: '#232b37', - colorGrey800: '#1b232d', - colorGrey850: '#161d26', - colorGrey900: '#131920', - colorGrey950: '#0f141a', - colorGrey1000: '#06080a', - - colorNeutralGrey50: '#fcfcfc', - colorNeutralGrey100: '#f9f9f9', - colorNeutralGrey150: '#f8f8f8', - colorNeutralGrey200: '#f5f5f5', - colorNeutralGrey250: '#ededed', - colorNeutralGrey300: '#e1e1e1', - colorNeutralGrey350: '#c9c9c9', - colorNeutralGrey400: '#b7b7b7', - colorNeutralGrey450: '#a9a9a9', - colorNeutralGrey500: '#909090', - colorNeutralGrey550: '#808080', - colorNeutralGrey600: '#6b6b6b', - colorNeutralGrey650: '#494949', - colorNeutralGrey700: '#3b3b3b', - colorNeutralGrey750: '#2d2d2d', - colorNeutralGrey800: '#242424', - colorNeutralGrey850: '#1e1e1e', - colorNeutralGrey900: '#1a1a1a', - colorNeutralGrey950: '#151515', - colorNeutralGrey1000: '#080808', - - colorLime50: '#f7ffeb', - colorLime100: '#ebffcc', - colorLime200: '#d1ff8a', - colorLime300: '#acff2e', - colorLime400: '#7ae500', - colorLime500: '#31b800', - colorLime600: '#008a00', - colorLime700: '#007000', - colorLime800: '#005700', - colorLime900: '#003d00', - colorLime950: '#002e00', - colorLime1000: '#001400', - - colorGreen50: '#effff1', - colorGreen100: '#d9ffd6', - colorGreen200: '#aeffa8', - colorGreen300: '#62ff57', - colorGreen400: '#00e500', - colorGreen500: '#2bb534', - colorGreen600: '#00802f', - colorGreen700: '#007029', - colorGreen800: '#005c26', - colorGreen900: '#00471e', - colorGreen950: '#003311', - colorGreen1000: '#001401', - - colorMint50: '#ebfff6', - colorMint100: '#ccffe9', - colorMint200: '#8fffce', - colorMint300: '#3dff9e', - colorMint400: '#00e582', - colorMint500: '#00bd6b', - colorMint600: '#008559', - colorMint700: '#006b48', - colorMint800: '#005237', - colorMint900: '#00422c', - colorMint950: '#003322', - colorMint1000: '#00140e', - - colorTeal50: '#ebfffe', - colorTeal100: '#ccfffc', - colorTeal200: '#8ffff8', - colorTeal300: '#00f5e4', - colorTeal400: '#00d6c8', - colorTeal500: '#00ada2', - colorTeal600: '#008077', - colorTeal700: '#00665f', - colorTeal800: '#00524c', - colorTeal900: '#003d39', - colorTeal950: '#003330', - colorTeal1000: '#001413', - - colorCyan50: '#f0feff', - colorCyan100: '#d1fbff', - colorCyan200: '#99f7ff', - colorCyan300: '#3defff', - colorCyan400: '#00d2e5', - colorCyan500: '#00a4bd', - colorCyan600: '#007e94', - colorCyan700: '#00627a', - colorCyan800: '#004761', - colorCyan900: '#003652', - colorCyan950: '#00293d', - colorCyan1000: '#00111a', - - colorBlue50: '#f0fbff', - colorBlue100: '#d1f1ff', - colorBlue200: '#b8e7ff', - colorBlue300: '#75cfff', - colorBlue400: '#42b4ff', - colorBlue500: '#0099ff', - colorBlue600: '#006ce0', - colorBlue700: '#004a9e', - colorBlue800: '#003b8f', - colorBlue900: '#002b66', - colorBlue950: '#00204d', - colorBlue1000: '#001129', - - colorIndigo50: '#f5f7ff', - colorIndigo100: '#dbe4ff', - colorIndigo200: '#c2d1ff', - colorIndigo300: '#94afff', - colorIndigo400: '#7598ff', - colorIndigo500: '#5c7fff', - colorIndigo600: '#295eff', - colorIndigo700: '#003efa', - colorIndigo800: '#0033cc', - colorIndigo900: '#001a99', - colorIndigo950: '#001475', - colorIndigo1000: '#000833', - - colorViolet50: '#f6f5ff', - colorViolet100: '#e8e5ff', - colorViolet200: '#d2ccff', - colorViolet300: '#b2a8ff', - colorViolet400: '#978aff', - colorViolet500: '#8575ff', - colorViolet600: '#6842ff', - colorViolet700: '#5724ff', - colorViolet800: '#4200db', - colorViolet900: '#35009e', - colorViolet950: '#250070', - colorViolet1000: '#110033', - - colorPurple50: '#faf5ff', - colorPurple100: '#f2e5ff', - colorPurple200: '#e8d1ff', - colorPurple300: '#d4a8ff', - colorPurple400: '#bf80ff', - colorPurple500: '#ad5cff', - colorPurple600: '#962eff', - colorPurple700: '#7300e5', - colorPurple800: '#5900b2', - colorPurple900: '#45008a', - colorPurple950: '#300061', - colorPurple1000: '#1a0033', - - colorFuchsia50: '#fff5fe', - colorFuchsia100: '#fce5ff', - colorFuchsia200: '#f8c7ff', - colorFuchsia300: '#f299ff', - colorFuchsia400: '#ec70ff', - colorFuchsia500: '#e433ff', - colorFuchsia600: '#c300e0', - colorFuchsia700: '#a000b8', - colorFuchsia800: '#78008a', - colorFuchsia900: '#590066', - colorFuchsia950: '#43004d', - colorFuchsia1000: '#1f0024', - - colorMagenta50: '#fff5fe', - colorMagenta100: '#ffe0fb', - colorMagenta200: '#ffccf8', - colorMagenta300: '#ff94f1', - colorMagenta400: '#ff57e9', - colorMagenta500: '#ff1ae0', - colorMagenta600: '#d600ba', - colorMagenta700: '#b2008f', - colorMagenta800: '#8f0072', - colorMagenta900: '#660052', - colorMagenta950: '#470039', - colorMagenta1000: '#24001d', - - colorPink50: '#fff5fa', - colorPink100: '#ffe0f0', - colorPink200: '#ffc7e3', - colorPink300: '#ff99cc', - colorPink400: '#ff66b2', - colorPink500: '#ff3399', - colorPink600: '#e5006f', - colorPink700: '#bb005d', - colorPink800: '#8f0047', - colorPink900: '#660033', - colorPink950: '#4d0020', - colorPink1000: '#24000f', - - colorRose50: '#fff5f8', - colorRose100: '#ffe0e8', - colorRose200: '#ffc2d1', - colorRose300: '#ff8fab', - colorRose400: '#ff5c85', - colorRose500: '#ff386a', - colorRose600: '#eb003b', - colorRose700: '#c20030', - colorRose800: '#940025', - colorRose900: '#6b001b', - colorRose950: '#4d0013', - colorRose1000: '#1f0008', - - colorRed50: '#fff5f5', - colorRed100: '#ffe0e0', - colorRed200: '#ffc2c2', - colorRed300: '#ff9e9e', - colorRed400: '#ff7a7a', - colorRed500: '#ff3d3d', - colorRed600: '#db0000', - colorRed700: '#c20000', - colorRed800: '#990000', - colorRed900: '#700000', - colorRed950: '#520000', - colorRed1000: '#1f0000', - - colorOrange50: '#fff7f5', - colorOrange100: '#ffe0d6', - colorOrange200: '#ffc0ad', - colorOrange300: '#ff997a', - colorOrange400: '#ff6a3d', - colorOrange500: '#ff4b14', - colorOrange600: '#db3300', - colorOrange700: '#a82700', - colorOrange800: '#8a2000', - colorOrange900: '#661800', - colorOrange950: '#471100', - colorOrange1000: '#1f0700', - - colorAmber50: '#fff7e6', - colorAmber100: '#ffe8bd', - colorAmber200: '#ffd78a', - colorAmber300: '#ffbb45', - colorAmber400: '#ff9900', - colorAmber500: '#fa6f00', - colorAmber600: '#d14600', - colorAmber700: '#9e3700', - colorAmber800: '#7a2b00', - colorAmber900: '#5c1b00', - colorAmber950: '#471500', - colorAmber1000: '#1a0800', - - colorYellow50: '#fffef0', - colorYellow100: '#fffbbd', - colorYellow200: '#fef571', - colorYellow300: '#ffed4d', - colorYellow400: '#ffe347', - colorYellow500: '#fbd332', - colorYellow600: '#f2b100', - colorYellow700: '#db9200', - colorYellow800: '#9e6900', - colorYellow900: '#855900', - colorYellow950: '#573a00', - colorYellow1000: '#191100', - - colorAwsSquidInk: '#232f3e', - colorTransparent: 'transparent', - colorBlack: '#000000', - colorWhite: '#ffffff', -}; +import { paletteTokens } from './palette-values.js'; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(paletteTokens); diff --git a/style-dictionary/core/palette-values.ts b/style-dictionary/core/palette-values.ts new file mode 100644 index 0000000000..f06827aa07 --- /dev/null +++ b/style-dictionary/core/palette-values.ts @@ -0,0 +1,275 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { StyleDictionary } from '../utils/interfaces.js'; + +const paletteTokens: StyleDictionary.ColorPaletteDictionary = { + colorGrey50: '#fcfcfd', + colorGrey100: '#f9f9fa', + colorGrey150: '#f6f6f9', + colorGrey200: '#f3f3f7', + colorGrey250: '#ebebf0', + colorGrey300: '#dedee3', + colorGrey350: '#c6c6cd', + colorGrey400: '#b4b4bb', + colorGrey450: '#a4a4ad', + colorGrey500: '#8c8c94', + colorGrey550: '#72747e', + colorGrey600: '#656871', + colorGrey650: '#424650', + colorGrey700: '#333843', + colorGrey750: '#232b37', + colorGrey800: '#1b232d', + colorGrey850: '#161d26', + colorGrey900: '#131920', + colorGrey950: '#0f141a', + colorGrey1000: '#06080a', + + colorNeutralGrey50: '#fcfcfc', + colorNeutralGrey100: '#f9f9f9', + colorNeutralGrey150: '#f8f8f8', + colorNeutralGrey200: '#f5f5f5', + colorNeutralGrey250: '#ededed', + colorNeutralGrey300: '#e1e1e1', + colorNeutralGrey350: '#c9c9c9', + colorNeutralGrey400: '#b7b7b7', + colorNeutralGrey450: '#a9a9a9', + colorNeutralGrey500: '#909090', + colorNeutralGrey550: '#808080', + colorNeutralGrey600: '#6b6b6b', + colorNeutralGrey650: '#494949', + colorNeutralGrey700: '#3b3b3b', + colorNeutralGrey750: '#2d2d2d', + colorNeutralGrey800: '#242424', + colorNeutralGrey850: '#1e1e1e', + colorNeutralGrey900: '#1a1a1a', + colorNeutralGrey950: '#151515', + colorNeutralGrey1000: '#080808', + + colorLime50: '#f7ffeb', + colorLime100: '#ebffcc', + colorLime200: '#d1ff8a', + colorLime300: '#acff2e', + colorLime400: '#7ae500', + colorLime500: '#31b800', + colorLime600: '#008a00', + colorLime700: '#007000', + colorLime800: '#005700', + colorLime900: '#003d00', + colorLime950: '#002e00', + colorLime1000: '#001400', + + colorGreen50: '#effff1', + colorGreen100: '#d9ffd6', + colorGreen200: '#aeffa8', + colorGreen300: '#62ff57', + colorGreen400: '#00e500', + colorGreen500: '#2bb534', + colorGreen600: '#00802f', + colorGreen700: '#007029', + colorGreen800: '#005c26', + colorGreen900: '#00471e', + colorGreen950: '#003311', + colorGreen1000: '#001401', + + colorMint50: '#ebfff6', + colorMint100: '#ccffe9', + colorMint200: '#8fffce', + colorMint300: '#3dff9e', + colorMint400: '#00e582', + colorMint500: '#00bd6b', + colorMint600: '#008559', + colorMint700: '#006b48', + colorMint800: '#005237', + colorMint900: '#00422c', + colorMint950: '#003322', + colorMint1000: '#00140e', + + colorTeal50: '#ebfffe', + colorTeal100: '#ccfffc', + colorTeal200: '#8ffff8', + colorTeal300: '#00f5e4', + colorTeal400: '#00d6c8', + colorTeal500: '#00ada2', + colorTeal600: '#008077', + colorTeal700: '#00665f', + colorTeal800: '#00524c', + colorTeal900: '#003d39', + colorTeal950: '#003330', + colorTeal1000: '#001413', + + colorCyan50: '#f0feff', + colorCyan100: '#d1fbff', + colorCyan200: '#99f7ff', + colorCyan300: '#3defff', + colorCyan400: '#00d2e5', + colorCyan500: '#00a4bd', + colorCyan600: '#007e94', + colorCyan700: '#00627a', + colorCyan800: '#004761', + colorCyan900: '#003652', + colorCyan950: '#00293d', + colorCyan1000: '#00111a', + + colorBlue50: '#f0fbff', + colorBlue100: '#d1f1ff', + colorBlue200: '#b8e7ff', + colorBlue300: '#75cfff', + colorBlue400: '#42b4ff', + colorBlue500: '#0099ff', + colorBlue600: '#006ce0', + colorBlue700: '#004a9e', + colorBlue800: '#003b8f', + colorBlue900: '#002b66', + colorBlue950: '#00204d', + colorBlue1000: '#001129', + + colorIndigo50: '#f5f7ff', + colorIndigo100: '#dbe4ff', + colorIndigo200: '#c2d1ff', + colorIndigo300: '#94afff', + colorIndigo400: '#7598ff', + colorIndigo500: '#5c7fff', + colorIndigo600: '#295eff', + colorIndigo700: '#003efa', + colorIndigo800: '#0033cc', + colorIndigo900: '#001a99', + colorIndigo950: '#001475', + colorIndigo1000: '#000833', + + colorViolet50: '#f6f5ff', + colorViolet100: '#e8e5ff', + colorViolet200: '#d2ccff', + colorViolet300: '#b2a8ff', + colorViolet400: '#978aff', + colorViolet500: '#8575ff', + colorViolet600: '#6842ff', + colorViolet700: '#5724ff', + colorViolet800: '#4200db', + colorViolet900: '#35009e', + colorViolet950: '#250070', + colorViolet1000: '#110033', + + colorPurple50: '#faf5ff', + colorPurple100: '#f2e5ff', + colorPurple200: '#e8d1ff', + colorPurple300: '#d4a8ff', + colorPurple400: '#bf80ff', + colorPurple500: '#ad5cff', + colorPurple600: '#962eff', + colorPurple700: '#7300e5', + colorPurple800: '#5900b2', + colorPurple900: '#45008a', + colorPurple950: '#300061', + colorPurple1000: '#1a0033', + + colorFuchsia50: '#fff5fe', + colorFuchsia100: '#fce5ff', + colorFuchsia200: '#f8c7ff', + colorFuchsia300: '#f299ff', + colorFuchsia400: '#ec70ff', + colorFuchsia500: '#e433ff', + colorFuchsia600: '#c300e0', + colorFuchsia700: '#a000b8', + colorFuchsia800: '#78008a', + colorFuchsia900: '#590066', + colorFuchsia950: '#43004d', + colorFuchsia1000: '#1f0024', + + colorMagenta50: '#fff5fe', + colorMagenta100: '#ffe0fb', + colorMagenta200: '#ffccf8', + colorMagenta300: '#ff94f1', + colorMagenta400: '#ff57e9', + colorMagenta500: '#ff1ae0', + colorMagenta600: '#d600ba', + colorMagenta700: '#b2008f', + colorMagenta800: '#8f0072', + colorMagenta900: '#660052', + colorMagenta950: '#470039', + colorMagenta1000: '#24001d', + + colorPink50: '#fff5fa', + colorPink100: '#ffe0f0', + colorPink200: '#ffc7e3', + colorPink300: '#ff99cc', + colorPink400: '#ff66b2', + colorPink500: '#ff3399', + colorPink600: '#e5006f', + colorPink700: '#bb005d', + colorPink800: '#8f0047', + colorPink900: '#660033', + colorPink950: '#4d0020', + colorPink1000: '#24000f', + + colorRose50: '#fff5f8', + colorRose100: '#ffe0e8', + colorRose200: '#ffc2d1', + colorRose300: '#ff8fab', + colorRose400: '#ff5c85', + colorRose500: '#ff386a', + colorRose600: '#eb003b', + colorRose700: '#c20030', + colorRose800: '#940025', + colorRose900: '#6b001b', + colorRose950: '#4d0013', + colorRose1000: '#1f0008', + + colorRed50: '#fff5f5', + colorRed100: '#ffe0e0', + colorRed200: '#ffc2c2', + colorRed300: '#ff9e9e', + colorRed400: '#ff7a7a', + colorRed500: '#ff3d3d', + colorRed600: '#db0000', + colorRed700: '#c20000', + colorRed800: '#990000', + colorRed900: '#700000', + colorRed950: '#520000', + colorRed1000: '#1f0000', + + colorOrange50: '#fff7f5', + colorOrange100: '#ffe0d6', + colorOrange200: '#ffc0ad', + colorOrange300: '#ff997a', + colorOrange400: '#ff6a3d', + colorOrange500: '#ff4b14', + colorOrange600: '#db3300', + colorOrange700: '#a82700', + colorOrange800: '#8a2000', + colorOrange900: '#661800', + colorOrange950: '#471100', + colorOrange1000: '#1f0700', + + colorAmber50: '#fff7e6', + colorAmber100: '#ffe8bd', + colorAmber200: '#ffd78a', + colorAmber300: '#ffbb45', + colorAmber400: '#ff9900', + colorAmber500: '#fa6f00', + colorAmber600: '#d14600', + colorAmber700: '#9e3700', + colorAmber800: '#7a2b00', + colorAmber900: '#5c1b00', + colorAmber950: '#471500', + colorAmber1000: '#1a0800', + + colorYellow50: '#fffef0', + colorYellow100: '#fffbbd', + colorYellow200: '#fef571', + colorYellow300: '#ffed4d', + colorYellow400: '#ffe347', + colorYellow500: '#fbd332', + colorYellow600: '#f2b100', + colorYellow700: '#db9200', + colorYellow800: '#9e6900', + colorYellow900: '#855900', + colorYellow950: '#573a00', + colorYellow1000: '#191100', + + colorAwsSquidInk: '#232f3e', + colorTransparent: 'transparent', + colorBlack: '#000000', + colorWhite: '#ffffff', +}; + +export { paletteTokens }; diff --git a/style-dictionary/one-theme/color-palette.ts b/style-dictionary/one-theme/color-palette.ts index c35e285648..a468e3ade0 100644 --- a/style-dictionary/one-theme/color-palette.ts +++ b/style-dictionary/one-theme/color-palette.ts @@ -5,7 +5,7 @@ import pick from 'lodash/pick.js'; import { ReferenceTokens } from '@cloudscape-design/theming-build'; -import { paletteTokens as brand } from '../core/color-palette.js'; +import { paletteTokens as brand } from '../core/palette-values.js'; import { expandColorDictionary, expandReferenceTokens } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; import { referenceTokens as vrReferenceTokens, tokens as parentTokens } from '../visual-refresh/color-palette.js'; diff --git a/style-dictionary/one-theme/index.ts b/style-dictionary/one-theme/index.ts index 383a6127cb..3799038475 100644 --- a/style-dictionary/one-theme/index.ts +++ b/style-dictionary/one-theme/index.ts @@ -2,9 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import { ThemeBuilder } from '@cloudscape-design/theming-build'; -// visual-refresh/color-palette and core/color-palette form an import cycle; evaluating -// visual-refresh first ensures core's `brand` is initialized before one-theme/color-palette.ts. -import '../visual-refresh/color-palette.js'; import { createAlertContext, createAppLayoutToolbarContext, diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts index 41eb730e03..0ed4901808 100644 --- a/style-dictionary/visual-refresh/color-palette.ts +++ b/style-dictionary/visual-refresh/color-palette.ts @@ -4,7 +4,7 @@ import pick from 'lodash/pick.js'; import { ReferenceTokens } from '@cloudscape-design/theming-build'; -import { paletteTokens as brand } from '../core/color-palette.js'; +import { paletteTokens as brand } from '../core/palette-values.js'; import { expandColorDictionary, expandReferenceTokens } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index a66d124b99..8e12282a2f 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { paletteTokens } from '../core/color-palette.js'; +import { paletteTokens } from '../core/palette-values.js'; import { expandColorDictionary } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js';