From 8373faee368153f4f46942dd6d8f1678e077ee3a Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 2 Oct 2026 09:11:32 +0200 Subject: [PATCH 1/3] change core color tokens --- packages/lib/src/styles/variables.css | 178 +++++++++++++------------- 1 file changed, 89 insertions(+), 89 deletions(-) diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index d668cd7971..5a33cc15ca 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -37,95 +37,95 @@ /* Core tokens */ --color-absolutes-black: #000000; --color-absolutes-white: #ffffff; - --color-alpha-100-a: #ebebeb1a; - --color-alpha-200-a: #dedede33; - --color-alpha-300-a: #d1d1d14d; - --color-alpha-400-a: #b5b5b566; - --color-alpha-500-a: #9a9a9a80; - --color-alpha-600-a: #79797999; - --color-alpha-700-a: #5b5b5bb2; - --color-alpha-800-a: #494949cc; - --color-alpha-900-a: #333333e5; - --color-primary-50: #fcfbfe; - --color-primary-100: #f0e8fa; - --color-primary-200: #e7d9f6; - --color-primary-300: #ddc9f3; - --color-primary-400: #c8a7eb; - --color-primary-500: #b487e4; - --color-primary-600: #9363c8; - --color-primary-700: #6f4b97; - --color-primary-800: #5a3c7a; - --color-primary-900: #3e2a55; - --color-secondary-50: #f8fcff; - --color-secondary-100: #d9efff; - --color-secondary-200: #bce3ff; - --color-secondary-300: #a0d7ff; - --color-secondary-400: #61bdff; - --color-secondary-500: #30a1f1; - --color-secondary-600: #267fbf; - --color-secondary-700: #1d6091; - --color-secondary-800: #174e74; - --color-secondary-900: #103651; - --color-tertiary-50: #fefbef; - --color-tertiary-100: #fcedae; - --color-tertiary-200: #f9de6e; - --color-tertiary-300: #f5cd2b; - --color-tertiary-400: #d4b226; - --color-tertiary-500: #b6981f; - --color-tertiary-600: #8f7818; - --color-tertiary-700: #6c5a12; - --color-tertiary-800: #57490f; - --color-tertiary-900: #3d3309; - --color-semantic01-50: #f8fcff; - --color-semantic01-100: #d9efff; - --color-semantic01-200: #bce3ff; - --color-semantic01-300: #a0d7ff; - --color-semantic01-400: #61bdff; - --color-semantic01-500: #30a1f1; - --color-semantic01-600: #267fbf; - --color-semantic01-700: #1d6091; - --color-semantic01-800: #174e74; - --color-semantic01-900: #103651; - --color-semantic02-50: #f3fcf5; - --color-semantic02-100: #d1f5db; - --color-semantic02-200: #acecbe; - --color-semantic02-300: #87e3a0; - --color-semantic02-400: #53cb75; - --color-semantic02-500: #47ae64; - --color-semantic02-600: #39884f; - --color-semantic02-700: #2a673b; - --color-semantic02-800: #225230; - --color-semantic02-900: #183921; - --color-semantic03-50: #fffbf6; - --color-semantic03-100: #fde9d2; - --color-semantic03-200: #fbd9b3; - --color-semantic03-300: #f9c78f; - --color-semantic03-400: #f5a344; - --color-semantic03-500: #d58a35; - --color-semantic03-600: #a76d2b; - --color-semantic03-700: #7f5121; - --color-semantic03-800: #66421a; - --color-semantic03-900: #3d3309; - --color-semantic04-50: #fff7f6; - --color-semantic04-100: #ffe6e4; - --color-semantic04-200: #ffd3d0; - --color-semantic04-300: #ffc1bd; - --color-semantic04-400: #ff9896; - --color-semantic04-500: #ff696f; - --color-semantic04-600: #e33248; - --color-semantic04-700: #a92c37; - --color-semantic04-800: #87262d; - --color-semantic04-900: #5b1f21; - --color-neutral-50: #fbfbfb; - --color-neutral-100: #ebebeb; - --color-neutral-200: #dedede; - --color-neutral-300: #d1d1d1; - --color-neutral-400: #b5b5b5; - --color-neutral-500: #9a9a9a; - --color-neutral-600: #797979; - --color-neutral-700: #5b5b5b; - --color-neutral-800: #494949; - --color-neutral-900: #333333; + --color-alpha-100-a: #e1e2e41a; + --color-alpha-200-a: #d5d5d933; + --color-alpha-300-a: #c8c8cc4d; + --color-alpha-400-a: #adadb466; + --color-alpha-500-a: #92939b80; + --color-alpha-600-a: #72737e99; + --color-alpha-700-a: #545662b2; + --color-alpha-800-a: #414250cc; + --color-alpha-900-a: #2b2d3ce5; + --color-primary-50: #f1f1f9; + --color-primary-100: #e0e1f3; + --color-primary-200: #d2d3ed; + --color-primary-300: #c5c7e8; + --color-primary-400: #a6aadb; + --color-primary-500: #878fcf; + --color-primary-600: #5c6fbf; + --color-primary-700: #2351b0; + --color-primary-800: #003c9b; + --color-primary-900: #00247c; + --color-secondary-50: #ffeee7; + --color-secondary-100: #ffdacb; + --color-secondary-200: #fecab5; + --color-secondary-300: #fbba9f; + --color-secondary-400: #f29770; + --color-secondary-500: #e57443; + --color-secondary-600: #cf4400; + --color-secondary-700: #a82000; + --color-secondary-800: #8d0000; + --color-secondary-900: #640000; + --color-tertiary-50: #fef1c7; + --color-tertiary-100: #f8e288; + --color-tertiary-200: #eed557; + --color-tertiary-300: #e1c94c; + --color-tertiary-400: #c3ae2f; + --color-tertiary-500: #a7940c; + --color-tertiary-600: #837400; + --color-tertiary-700: #625600; + --color-tertiary-800: #4e4400; + --color-tertiary-900: #392c00; + --color-semantic01-50: #e9f2fb; + --color-semantic01-100: #d1e5f6; + --color-semantic01-200: #bcd9f2; + --color-semantic01-300: #a6ceee; + --color-semantic01-400: #70b5e5; + --color-semantic01-500: #159ddb; + --color-semantic01-600: #007ab6; + --color-semantic01-700: #005991; + --color-semantic01-800: #00457b; + --color-semantic01-900: #002d60; + --color-semantic02-50: #e7f5eb; + --color-semantic02-100: #cde9d5; + --color-semantic02-200: #b8dfc5; + --color-semantic02-300: #a0d5b2; + --color-semantic02-400: #6cbe8c; + --color-semantic02-500: #2aa868; + --color-semantic02-600: #008548; + --color-semantic02-700: #00642a; + --color-semantic02-800: #005018; + --color-semantic02-900: #003700; + --color-semantic03-50: #ffefda; + --color-semantic03-100: #ffddb1; + --color-semantic03-200: #ffcd8d; + --color-semantic03-300: #ffbc66; + --color-semantic03-400: #ec9d2f; + --color-semantic03-500: #cd840d; + --color-semantic03-600: #a76400; + --color-semantic03-700: #834700; + --color-semantic03-800: #6d3300; + --color-semantic03-900: #541c00; + --color-semantic04-50: #ffede7; + --color-semantic04-100: #ffdad0; + --color-semantic04-200: #ffc9bb; + --color-semantic04-300: #ffb8a6; + --color-semantic04-400: #fe8f75; + --color-semantic04-500: #f4674b; + --color-semantic04-600: #df2a19; + --color-semantic04-700: #b10000; + --color-semantic04-800: #8d0000; + --color-semantic04-900: #640000; + --color-neutral-50: #f1f1f2; + --color-neutral-100: #e1e2e4; + --color-neutral-200: #d5d5d9; + --color-neutral-300: #c8c8cc; + --color-neutral-400: #adadb4; + --color-neutral-500: #92939b; + --color-neutral-600: #72737e; + --color-neutral-700: #545662; + --color-neutral-800: #414250; + --color-neutral-900: #2b2d3c; --dimensions-0: 0px; --dimensions-1: 1px; --dimensions-2: 2px; From 57972e75cb2d5efb322c16bc0f28119d6ae1578e Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 2 Oct 2026 11:19:07 +0200 Subject: [PATCH 2/3] Update tokens.ts --- packages/lib/src/styles/tokens.ts | 178 +++++++++++++++--------------- 1 file changed, 89 insertions(+), 89 deletions(-) diff --git a/packages/lib/src/styles/tokens.ts b/packages/lib/src/styles/tokens.ts index f634b6c097..f5face5beb 100644 --- a/packages/lib/src/styles/tokens.ts +++ b/packages/lib/src/styles/tokens.ts @@ -37,95 +37,95 @@ export const coreTokens: Record = { /* Core tokens */ "--color-absolutes-black": "#000000", "--color-absolutes-white": "#ffffff", - "--color-alpha-100-a": "#ebebeb1a", - "--color-alpha-200-a": "#dedede33", - "--color-alpha-300-a": "#d1d1d14d", - "--color-alpha-400-a": "#b5b5b566", - "--color-alpha-500-a": "#9a9a9a80", - "--color-alpha-600-a": "#79797999", - "--color-alpha-700-a": "#5b5b5bb2", - "--color-alpha-800-a": "#494949cc", - "--color-alpha-900-a": "#333333e5", - "--color-primary-50": "#fcfbfe", - "--color-primary-100": "#f0e8fa", - "--color-primary-200": "#e7d9f6", - "--color-primary-300": "#ddc9f3", - "--color-primary-400": "#c8a7eb", - "--color-primary-500": "#b487e4", - "--color-primary-600": "#9363c8", - "--color-primary-700": "#6f4b97", - "--color-primary-800": "#5a3c7a", - "--color-primary-900": "#3e2a55", - "--color-secondary-50": "#f8fcff", - "--color-secondary-100": "#d9efff", - "--color-secondary-200": "#bce3ff", - "--color-secondary-300": "#a0d7ff", - "--color-secondary-400": "#61bdff", - "--color-secondary-500": "#30a1f1", - "--color-secondary-600": "#267fbf", - "--color-secondary-700": "#1d6091", - "--color-secondary-800": "#174e74", - "--color-secondary-900": "#103651", - "--color-tertiary-50": "#fefbef", - "--color-tertiary-100": "#fcedae", - "--color-tertiary-200": "#f9de6e", - "--color-tertiary-300": "#f5cd2b", - "--color-tertiary-400": "#d4b226", - "--color-tertiary-500": "#b6981f", - "--color-tertiary-600": "#8f7818", - "--color-tertiary-700": "#6c5a12", - "--color-tertiary-800": "#57490f", - "--color-tertiary-900": "#3d3309", - "--color-semantic01-50": "#f8fcff", - "--color-semantic01-100": "#d9efff", - "--color-semantic01-200": "#bce3ff", - "--color-semantic01-300": "#a0d7ff", - "--color-semantic01-400": "#61bdff", - "--color-semantic01-500": "#30a1f1", - "--color-semantic01-600": "#267fbf", - "--color-semantic01-700": "#1d6091", - "--color-semantic01-800": "#174e74", - "--color-semantic01-900": "#103651", - "--color-semantic02-50": "#f3fcf5", - "--color-semantic02-100": "#d1f5db", - "--color-semantic02-200": "#acecbe", - "--color-semantic02-300": "#87e3a0", - "--color-semantic02-400": "#53cb75", - "--color-semantic02-500": "#47ae64", - "--color-semantic02-600": "#39884f", - "--color-semantic02-700": "#2a673b", - "--color-semantic02-800": "#225230", - "--color-semantic02-900": "#183921", - "--color-semantic03-50": "#fffbf6", - "--color-semantic03-100": "#fde9d2", - "--color-semantic03-200": "#fbd9b3", - "--color-semantic03-300": "#f9c78f", - "--color-semantic03-400": "#f5a344", - "--color-semantic03-500": "#d58a35", - "--color-semantic03-600": "#a76d2b", - "--color-semantic03-700": "#7f5121", - "--color-semantic03-800": "#66421a", - "--color-semantic03-900": "#3d3309", - "--color-semantic04-50": "#fff7f6", - "--color-semantic04-100": "#ffe6e4", - "--color-semantic04-200": "#ffd3d0", - "--color-semantic04-300": "#ffc1bd", - "--color-semantic04-400": "#ff9896", - "--color-semantic04-500": "#ff696f", - "--color-semantic04-600": "#e33248", - "--color-semantic04-700": "#a92c37", - "--color-semantic04-800": "#87262d", - "--color-semantic04-900": "#5b1f21", - "--color-neutral-50": "#fbfbfb", - "--color-neutral-100": "#ebebeb", - "--color-neutral-200": "#dedede", - "--color-neutral-300": "#d1d1d1", - "--color-neutral-400": "#b5b5b5", - "--color-neutral-500": "#9a9a9a", - "--color-neutral-600": "#797979", - "--color-neutral-700": "#5b5b5b", - "--color-neutral-800": "#494949", - "--color-neutral-900": "#333333", + "--color-alpha-100-a": "#e1e2e41a", + "--color-alpha-200-a": "#d5d5d933", + "--color-alpha-300-a": "#c8c8cc4d", + "--color-alpha-400-a": "#adadb466", + "--color-alpha-500-a": "#92939b80", + "--color-alpha-600-a": "#72737e99", + "--color-alpha-700-a": "#545662b2", + "--color-alpha-800-a": "#414250cc", + "--color-alpha-900-a": "#2b2d3ce5", + "--color-primary-50": "#f1f1f9", + "--color-primary-100": "#e0e1f3", + "--color-primary-200": "#d2d3ed", + "--color-primary-300": "#c5c7e8", + "--color-primary-400": "#a6aadb", + "--color-primary-500": "#878fcf", + "--color-primary-600": "#5c6fbf", + "--color-primary-700": "#2351b0", + "--color-primary-800": "#003c9b", + "--color-primary-900": "#00247c", + "--color-secondary-50": "#ffeee7", + "--color-secondary-100": "#ffdacb", + "--color-secondary-200": "#fecab5", + "--color-secondary-300": "#fbba9f", + "--color-secondary-400": "#f29770", + "--color-secondary-500": "#e57443", + "--color-secondary-600": "#cf4400", + "--color-secondary-700": "#a82000", + "--color-secondary-800": "#8d0000", + "--color-secondary-900": "#640000", + "--color-tertiary-50": "#fef1c7", + "--color-tertiary-100": "#f8e288", + "--color-tertiary-200": "#eed557", + "--color-tertiary-300": "#e1c94c", + "--color-tertiary-400": "#c3ae2f", + "--color-tertiary-500": "#a7940c", + "--color-tertiary-600": "#837400", + "--color-tertiary-700": "#625600", + "--color-tertiary-800": "#4e4400", + "--color-tertiary-900": "#392c00", + "--color-semantic01-50": "#e9f2fb", + "--color-semantic01-100": "#d1e5f6", + "--color-semantic01-200": "#bcd9f2", + "--color-semantic01-300": "#a6ceee", + "--color-semantic01-400": "#70b5e5", + "--color-semantic01-500": "#159ddb", + "--color-semantic01-600": "#007ab6", + "--color-semantic01-700": "#005991", + "--color-semantic01-800": "#00457b", + "--color-semantic01-900": "#002d60", + "--color-semantic02-50": "#e7f5eb", + "--color-semantic02-100": "#cde9d5", + "--color-semantic02-200": "#b8dfc5", + "--color-semantic02-300": "#a0d5b2", + "--color-semantic02-400": "#6cbe8c", + "--color-semantic02-500": "#2aa868", + "--color-semantic02-600": "#008548", + "--color-semantic02-700": "#00642a", + "--color-semantic02-800": "#005018", + "--color-semantic02-900": "#003700", + "--color-semantic03-50": "#ffefda", + "--color-semantic03-100": "#ffddb1", + "--color-semantic03-200": "#ffcd8d", + "--color-semantic03-300": "#ffbc66", + "--color-semantic03-400": "#ec9d2f", + "--color-semantic03-500": "#cd840d", + "--color-semantic03-600": "#a76400", + "--color-semantic03-700": "#834700", + "--color-semantic03-800": "#6d3300", + "--color-semantic03-900": "#541c00", + "--color-semantic04-50": "#ffede7", + "--color-semantic04-100": "#ffdad0", + "--color-semantic04-200": "#ffc9bb", + "--color-semantic04-300": "#ffb8a6", + "--color-semantic04-400": "#fe8f75", + "--color-semantic04-500": "#f4674b", + "--color-semantic04-600": "#df2a19", + "--color-semantic04-700": "#b10000", + "--color-semantic04-800": "#8d0000", + "--color-semantic04-900": "#640000", + "--color-neutral-50": "#f1f1f2", + "--color-neutral-100": "#e1e2e4", + "--color-neutral-200": "#d5d5d9", + "--color-neutral-300": "#c8c8cc", + "--color-neutral-400": "#adadb4", + "--color-neutral-500": "#92939b", + "--color-neutral-600": "#72737e", + "--color-neutral-700": "#545662", + "--color-neutral-800": "#414250", + "--color-neutral-900": "#2b2d3c", "--dimensions-0": "0px", "--dimensions-1": "1px", "--dimensions-2": "2px", From 358dd97802e0bd32f2257b8d29cce2015deea3b5 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 2 Oct 2026 11:25:16 +0200 Subject: [PATCH 3/3] Remove references to old primary-strong token --- apps/website/screens/foundations/tokens/TokensPage.tsx | 2 +- .../screens/migration/components/examples/previous.tsx | 2 +- apps/website/screens/theme-generator/steps/icons.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx index bede23b016..8f2dabff11 100644 --- a/apps/website/screens/foundations/tokens/TokensPage.tsx +++ b/apps/website/screens/foundations/tokens/TokensPage.tsx @@ -176,7 +176,7 @@ const sections = [ For example: color/bg/primary/strong → maps to a core token like{" "} - color/primary/700 (#6F4B97) + color/primary/700 (#2351b0) By separating raw values from their semantic role, we not only enable easy theming and quick adjustments diff --git a/apps/website/screens/migration/components/examples/previous.tsx b/apps/website/screens/migration/components/examples/previous.tsx index aaf7d28e72..bfaa263ed7 100644 --- a/apps/website/screens/migration/components/examples/previous.tsx +++ b/apps/website/screens/migration/components/examples/previous.tsx @@ -12,7 +12,7 @@ const code = `() => { @@ -17,14 +17,14 @@ export const paletteIcon = ( ); export const infoIcon = ( - + ); export const brandingIcon = ( - +