From 6e84c6eea528f7b8ead287daf8a15d58ac1135c3 Mon Sep 17 00:00:00 2001 From: Reza Rahman <13340707+rezrah@users.noreply.github.com> Date: Mon, 29 Sep 2025 13:38:14 +0100 Subject: [PATCH 1/4] test new color scales for gray, green, blue and lime --- package-lock.json | 20 +- .../src/tokens/base/colors/dark.json | 260 +++++++++--------- .../src/tokens/base/colors/light.json | 200 ++++++++------ .../src/tokens/functional/colors/global.json | 8 +- 4 files changed, 260 insertions(+), 228 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6645ea3b7f..aea8d1027c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ }, "apps/next-docs": { "name": "@primer/brand-docs", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "dependencies": { "@primer/doctocat-nextjs": "0.7.0", @@ -58,9 +58,9 @@ }, "devDependencies": { "@github/prettier-config": "^0.0.6", - "@primer/brand-primitives": "^0.57.2", + "@primer/brand-primitives": "^0.58.1", "@primer/react": "37.11.2", - "@primer/react-brand": "0.57.2", + "@primer/react-brand": "0.58.1", "@swc/core": "^1.13.5", "@types/node": "22.18.1", "eslint-config-next": "15.5.2", @@ -93,7 +93,7 @@ }, "apps/storybook": { "name": "@primer/brand-storybook", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "devDependencies": { "@babel/preset-env": "7.26.9", @@ -34116,7 +34116,7 @@ }, "packages/css": { "name": "@primer/brand-css", - "version": "0.57.2", + "version": "0.58.1", "license": "UNLICENSED", "devDependencies": { "autoprefixer": "10.4.20", @@ -34131,7 +34131,7 @@ }, "packages/design-tokens": { "name": "@primer/brand-primitives", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "devDependencies": { "@primer/primitives": "9.1.1", @@ -34144,7 +34144,7 @@ }, "packages/e2e": { "name": "@primer/brand-e2e", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "devDependencies": { "@github/axe-github": "^0.5.0", @@ -34159,7 +34159,7 @@ }, "packages/fonts": { "name": "@primer/brand-fonts", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "engines": { "node": ">=22.0.0", @@ -34168,7 +34168,7 @@ }, "packages/react": { "name": "@primer/react-brand", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT", "dependencies": { "@oddbird/popover-polyfill": "0.5.2", @@ -34322,7 +34322,7 @@ }, "packages/repo-configs": { "name": "@primer/brand-config", - "version": "0.57.2", + "version": "0.58.1", "license": "MIT" } } diff --git a/packages/design-tokens/src/tokens/base/colors/dark.json b/packages/design-tokens/src/tokens/base/colors/dark.json index 8a80532563..b88d57aa5b 100644 --- a/packages/design-tokens/src/tokens/base/colors/dark.json +++ b/packages/design-tokens/src/tokens/base/colors/dark.json @@ -17,418 +17,418 @@ }, "gray": { "0": { - "value": "#f0f6fc" + "value": "#eef5f0" }, "1": { - "value": "#c9d1d9" + "value": "#e4ebe6" }, "2": { - "value": "#b1bac4" + "value": "#d0d6d2" }, "3": { - "value": "#8b949e" + "value": "#b6bfb8" }, "4": { - "value": "#6e7681" + "value": "#909692" }, "5": { - "value": "#484f58" + "value": "#6e7370" }, "6": { - "value": "#30363d" + "value": "#5a615c" }, "7": { - "value": "#21262d" + "value": "#323834" }, "8": { - "value": "#161b22" + "value": "#232925" }, "9": { - "value": "#0d1117" + "value": "#121613" } }, "blue": { "0": { - "value": "#cae8ff" + "value": "#ddf4ff" }, "1": { - "value": "#a5d6ff" + "value": "#bcecff" }, "2": { - "value": "#79c0ff" + "value": "#8dd6ff" }, "3": { - "value": "#58a6ff" + "value": "#5fb9ff" }, "4": { - "value": "#388bfd" + "value": "#3094ff" }, "5": { - "value": "#1f6feb" + "value": "#1a61fe" }, "6": { - "value": "#1158c7" + "value": "#0527fc" }, "7": { - "value": "#0d419d" + "value": "#0831c7" }, "8": { - "value": "#0c2d6b" + "value": "#0b3292" }, "9": { - "value": "#051d4d" + "value": "#001c4d" } }, "green": { "0": { - "value": "#aff5b4" + "value": "#dafbe1" }, "1": { - "value": "#7ee787" + "value": "#bfffd1" }, "2": { - "value": "#56d364" + "value": "#8df3a9" }, "3": { - "value": "#3fb950" + "value": "#5fed83" }, "4": { - "value": "#2ea043" + "value": "#17dd4c" }, "5": { - "value": "#238636" + "value": "#00a62d" }, "6": { - "value": "#196c2e" + "value": "#0b763b" }, "7": { - "value": "#0f5323" + "value": "#104c35" }, "8": { - "value": "#033a16" + "value": "#0d3828" }, "9": { - "value": "#04260f" + "value": "#0a241b" } }, "yellow": { "0": { - "value": "#f8e3a1" + "value": "#fff8c5" }, "1": { - "value": "#f2cc60" + "value": "#fae17d" }, "2": { - "value": "#e3b341" + "value": "#eac54f" }, "3": { - "value": "#d29922" + "value": "#d8bd0e" }, "4": { - "value": "#bb8009" + "value": "#db9d00" }, "5": { - "value": "#9e6a03" + "value": "#9a6700" }, "6": { - "value": "#845306" + "value": "#7d4e00" }, "7": { - "value": "#693e00" + "value": "#633c01" }, "8": { - "value": "#4b2900" + "value": "#4d2d00" }, "9": { - "value": "#341a00" + "value": "#3b2300" } }, "orange": { "0": { - "value": "#ffdfb6" + "value": "#fff1e5" }, "1": { - "value": "#ffc680" + "value": "#ffd8b5" }, "2": { - "value": "#ffa657" + "value": "#ffac82" }, "3": { - "value": "#f0883e" + "value": "#ff8e40" }, "4": { - "value": "#db6d28" + "value": "#d67200" }, "5": { - "value": "#bd561d" + "value": "#bc4c00" }, "6": { - "value": "#9b4215" + "value": "#953800" }, "7": { - "value": "#762d0a" + "value": "#703100" }, "8": { - "value": "#5a1e02" + "value": "#5c2200" }, "9": { - "value": "#3d1300" + "value": "#471700" } }, "red": { "0": { - "value": "#ffdcd7" + "value": "#ffebe9" }, "1": { - "value": "#ffc1ba" + "value": "#ffcecb" }, "2": { - "value": "#ffa198" + "value": "#ffaba8" }, "3": { - "value": "#ff7b72" + "value": "#ff8182" }, "4": { - "value": "#f85149" + "value": "#fa4549" }, "5": { - "value": "#da3633" + "value": "#cf222e" }, "6": { - "value": "#b62324" + "value": "#a40e26" }, "7": { - "value": "#8e1519" + "value": "#82071e" }, "8": { - "value": "#67060c" + "value": "#660018" }, "9": { - "value": "#490202" + "value": "#4c0014" } }, "purple": { "0": { - "value": "#eddeff" + "value": "#f1e3ff" }, "1": { - "value": "#e2c5ff" + "value": "#e6ccff" }, "2": { - "value": "#d2a8ff" + "value": "#d0b0ff" }, "3": { - "value": "#bc8cff" + "value": "#c06eff" }, "4": { - "value": "#a371f7" + "value": "#b975f9" }, "5": { - "value": "#8957e5" + "value": "#8342fa" }, "6": { - "value": "#6e40c9" + "value": "#6639ba" }, "7": { - "value": "#553098" + "value": "#501daf" }, "8": { - "value": "#3c1e70" + "value": "#341f74" }, "9": { - "value": "#271052" + "value": "#000240" } }, "pink": { "0": { - "value": "#ffdaec" + "value": "#ffeff7" }, "1": { - "value": "#ffbedd" + "value": "#ffc8fe" }, "2": { - "value": "#ff9bce" + "value": "#ffadda" }, "3": { - "value": "#f778ba" + "value": "#ff80d2" }, "4": { - "value": "#db61a2" + "value": "#ff4ac0" }, "5": { - "value": "#bf4b8a" + "value": "#bf3989" }, "6": { - "value": "#9e3670" + "value": "#952866" }, "7": { - "value": "#7d2457" + "value": "#721a4d" }, "8": { - "value": "#5e103e" + "value": "#611347" }, "9": { - "value": "#42062a" + "value": "#2f0821" } }, "coral": { "0": { - "value": "#ffddd2" + "value": "#fff0eb" }, "1": { - "value": "#ffc2b2" + "value": "#ffd6cc" }, "2": { - "value": "#ffa28b" + "value": "#ffb4a1" }, "3": { - "value": "#f78166" + "value": "#fd8c73" }, "4": { - "value": "#ea6045" + "value": "#fe4c25" }, "5": { - "value": "#cf462d" + "value": "#c53211" }, "6": { - "value": "#ac3220" + "value": "#9e2f1c" }, "7": { - "value": "#872012" + "value": "#801e0f" }, "8": { - "value": "#640d04" + "value": "#691105" }, "9": { - "value": "#460701" + "value": "#500a00" } }, "lemon": { "0": { - "value": "#FFF6A6" + "value": "#fdf5b3" }, "1": { - "value": "#FAE85A" + "value": "#f4e162" }, "2": { - "value": "#E1CD41" + "value": "#dec741" }, "3": { - "value": "#C5AE13" + "value": "#c5aa20" }, "4": { - "value": "#A69000" + "value": "#a88d02" }, "5": { - "value": "#8C7600" + "value": "#866d00" }, "6": { - "value": "#705D00" + "value": "#685400" }, "7": { - "value": "#564500" + "value": "#534100" }, "8": { - "value": "#3D2F00" + "value": "#413200" }, "9": { - "value": "#2A1E00" + "value": "#322400" } }, "lime": { "0": { - "value": "#D9EF95" + "value": "#f2ffd9" }, "1": { - "value": "#BEDC6C" + "value": "#dcff96" }, "2": { - "value": "#A4C847" + "value": "#d9fc6c" }, "3": { - "value": "#8AB034" + "value": "#d3fa37" }, "4": { - "value": "#739826" + "value": "#b2de28" }, "5": { - "value": "#5C8118" + "value": "#92c219" }, "6": { - "value": "#46680F" + "value": "#698e17" }, "7": { - "value": "#314F07" + "value": "#425e13" }, "8": { - "value": "#1E3703" + "value": "#2c440b" }, "9": { - "value": "#102401" + "value": "#182c01" } }, "teal": { "0": { - "value": "#BDEEE8" + "value": "#defefa" }, "1": { - "value": "#8ADFD7" + "value": "#b0eae3" }, "2": { - "value": "#57CCC5" + "value": "#6bd6d0" }, "3": { - "value": "#33B3AE" + "value": "#49bcb7" }, "4": { - "value": "#2A9D9A" + "value": "#339d9b" }, "5": { - "value": "#1D8281" + "value": "#197b7b" }, "6": { - "value": "#14696A" + "value": "#136061" }, "7": { - "value": "#0B5051" + "value": "#024b4d" }, "8": { - "value": "#053738" + "value": "#063a3c" }, "9": { - "value": "#022425" + "value": "#052b2c" } }, "indigo": { "0": { - "value": "#DBE3FF" + "value": "#eff2ff" }, "1": { - "value": "#C5CFFF" + "value": "#d7ddff" }, "2": { - "value": "#ABB4FF" + "value": "#b9c2ff" }, "3": { - "value": "#939AFF" + "value": "#9aa4ff" }, "4": { - "value": "#797EF9" + "value": "#7683ff" }, "5": { - "value": "#5D63F0" + "value": "#545df0" }, "6": { - "value": "#464ED1" + "value": "#3c42d0" }, "7": { - "value": "#3238A7" + "value": "#2c33a5" }, "8": { - "value": "#1E267C" + "value": "#212183" }, "9": { - "value": "#131759" + "value": "#191f5c" } } } diff --git a/packages/design-tokens/src/tokens/base/colors/light.json b/packages/design-tokens/src/tokens/base/colors/light.json index c1a767bae3..9f9b42bc77 100644 --- a/packages/design-tokens/src/tokens/base/colors/light.json +++ b/packages/design-tokens/src/tokens/base/colors/light.json @@ -4,7 +4,7 @@ "scale": { "black": { "0": { - "value": "#1f2328" + "value": "#000000" } }, "transparent": { @@ -17,34 +17,34 @@ }, "gray": { "0": { - "value": "#f6f8fa" + "value": "#eef5f0" }, "1": { - "value": "#eaeef2" + "value": "#e4ebe6" }, "2": { - "value": "#d0d7de" + "value": "#d0d6d2" }, "3": { - "value": "#afb8c1" + "value": "#b6bfb8" }, "4": { - "value": "#8c959f" + "value": "#909692" }, "5": { - "value": "#6e7781" + "value": "#6e7370" }, "6": { - "value": "#57606a" + "value": "#5a615c" }, "7": { - "value": "#424a53" + "value": "#323834" }, "8": { - "value": "#32383f" + "value": "#232925" }, "9": { - "value": "#24292f" + "value": "#121613" } }, "blue": { @@ -76,7 +76,7 @@ "value": "#0a3069" }, "9": { - "value": "#002155" + "value": "#001c4d" } }, "green": { @@ -84,13 +84,13 @@ "value": "#dafbe1" }, "1": { - "value": "#aceebb" + "value": "#acf2bd" }, "2": { - "value": "#6fdd8b" + "value": "#7ce18b" }, "3": { - "value": "#4ac26b" + "value": "#4ac54e" }, "4": { "value": "#2da44e" @@ -102,13 +102,13 @@ "value": "#116329" }, "7": { - "value": "#044f1e" + "value": "#044317" }, "8": { - "value": "#003d16" + "value": "#0d2818" }, "9": { - "value": "#002d11" + "value": "#0a241b" } }, "yellow": { @@ -122,10 +122,10 @@ "value": "#eac54f" }, "3": { - "value": "#d4a72c" + "value": "#d8bd0e" }, "4": { - "value": "#bf8700" + "value": "#db9d00" }, "5": { "value": "#9a6700" @@ -143,6 +143,38 @@ "value": "#3b2300" } }, + "cyan": { + "0": { + "value": "#cffaff" + }, + "1": { + "value": "#a0f0ff" + }, + "2": { + "value": "#76e5ff" + }, + "3": { + "value": "#46d8ff" + }, + "4": { + "value": "#9eecff" + }, + "5": { + "value": "#00b8d4" + }, + "6": { + "value": "#0095a8" + }, + "7": { + "value": "#00717f" + }, + "8": { + "value": "#004f5a" + }, + "9": { + "value": "#002f36" + } + }, "orange": { "0": { "value": "#fff1e5" @@ -151,13 +183,13 @@ "value": "#ffd8b5" }, "2": { - "value": "#ffb77c" + "value": "#ffac82" }, "3": { - "value": "#fb8f44" + "value": "#ff8e40" }, "4": { - "value": "#e16f24" + "value": "#d67200" }, "5": { "value": "#bc4c00" @@ -166,7 +198,7 @@ "value": "#953800" }, "7": { - "value": "#762c00" + "value": "#703100" }, "8": { "value": "#5c2200" @@ -209,34 +241,34 @@ }, "purple": { "0": { - "value": "#fbefff" + "value": "#f1e3ff" }, "1": { - "value": "#ecd8ff" + "value": "#e6ccff" }, "2": { - "value": "#d8b9ff" + "value": "#d0b0ff" }, "3": { - "value": "#c297ff" + "value": "#c06eff" }, "4": { - "value": "#a475f9" + "value": "#b975f9" }, "5": { - "value": "#8250df" + "value": "#8342fa" }, "6": { "value": "#6639ba" }, "7": { - "value": "#512a97" + "value": "#501daf" }, "8": { - "value": "#3e1f79" + "value": "#341f74" }, "9": { - "value": "#2e1461" + "value": "#000240" } }, "pink": { @@ -244,83 +276,83 @@ "value": "#ffeff7" }, "1": { - "value": "#ffd3eb" + "value": "#ffc8fe" }, "2": { "value": "#ffadda" }, "3": { - "value": "#ff80c8" + "value": "#ff80d2" }, "4": { - "value": "#e85aad" + "value": "#ff4ac0" }, "5": { "value": "#bf3989" }, "6": { - "value": "#99286e" + "value": "#952866" }, "7": { - "value": "#772057" + "value": "#721a4d" }, "8": { "value": "#611347" }, "9": { - "value": "#4d0336" + "value": "#2f0821" } }, "coral": { "0": { - "value": "#fff0eb" + "value": "#fff5f2" }, "1": { - "value": "#ffd6cc" + "value": "#ffe3dc" }, "2": { - "value": "#ffb4a1" + "value": "#ffcdc4" }, "3": { - "value": "#fd8c73" + "value": "#ffb3a5" }, "4": { - "value": "#ec6547" + "value": "#fd7c6e" }, "5": { - "value": "#c4432b" + "value": "#f85149" }, "6": { - "value": "#9e2f1c" + "value": "#cf222e" }, "7": { - "value": "#801f0f" + "value": "#a40e26" }, "8": { - "value": "#691105" + "value": "#82071e" }, "9": { - "value": "#510901" + "value": "#8c0721" } }, "lemon": { "0": { - "value": "#FDF5B3" + "value": "#fdf5b3" }, "1": { - "value": "#F4E162" + "value": "#f4e162" }, "2": { - "value": "#DEC741" + "value": "#dec741" }, "3": { - "value": "#C5AA20" + "value": "#c5aa20" }, "4": { - "value": "#A88D02" + "value": "#a88d02" }, "5": { - "value": "#866D00" + "value": "#866d00" }, "6": { "value": "#685400" @@ -337,98 +369,98 @@ }, "lime": { "0": { - "value": "#EAFABA" + "value": "#f1f7e8" }, "1": { - "value": "#CDEC78" + "value": "#e4efcc" }, "2": { - "value": "#B1D353" + "value": "#d3e5a9" }, "3": { - "value": "#94B83B" + "value": "#c1db87" }, "4": { - "value": "#799A2A" + "value": "#a5cd5c" }, "5": { - "value": "#5A791B" + "value": "#8cb130" }, "6": { - "value": "#425E13" + "value": "#739821" }, "7": { - "value": "#2F4A06" + "value": "#5c7e16" }, "8": { - "value": "#233B03" + "value": "#4a5e0c" }, "9": { - "value": "#182C01" + "value": "#364609" } }, "teal": { "0": { - "value": "#DAF9F5" + "value": "#defefa" }, "1": { - "value": "#B0EAE3" + "value": "#b0eae3" }, "2": { - "value": "#6BD6D0" + "value": "#6bd6d0" }, "3": { - "value": "#49BCB7" + "value": "#49bcb7" }, "4": { - "value": "#339D9B" + "value": "#339d9b" }, "5": { - "value": "#197B7B" + "value": "#197b7b" }, "6": { "value": "#136061" }, "7": { - "value": "#024B4D" + "value": "#024b4d" }, "8": { - "value": "#063A3C" + "value": "#063a3c" }, "9": { - "value": "#052B2C" + "value": "#052b2c" } }, "indigo": { "0": { - "value": "#EFF2FF" + "value": "#eff2ff" }, "1": { - "value": "#D7DDFF" + "value": "#d7ddff" }, "2": { - "value": "#B9C2FF" + "value": "#b9c2ff" }, "3": { - "value": "#9AA4FF" + "value": "#9aa4ff" }, "4": { - "value": "#7683FF" + "value": "#7683ff" }, "5": { - "value": "#545DF0" + "value": "#545df0" }, "6": { - "value": "#3C42D0" + "value": "#3c42d0" }, "7": { - "value": "#2C33A5" + "value": "#2c33a5" }, "8": { - "value": "#22297F" + "value": "#212183" }, "9": { - "value": "#191F5C" + "value": "#191f5c" } } } diff --git a/packages/design-tokens/src/tokens/functional/colors/global.json b/packages/design-tokens/src/tokens/functional/colors/global.json index 6bb1e72b79..8799f99c49 100644 --- a/packages/design-tokens/src/tokens/functional/colors/global.json +++ b/packages/design-tokens/src/tokens/functional/colors/global.json @@ -97,21 +97,21 @@ }, "subtle": { "value": "var(--base-color-scale-gray-0)", - "dark": "var(--base-color-scale-gray-8)" + "dark": "var(--base-color-scale-gray-9)" } }, "border": { "default": { "value": "var(--base-color-scale-gray-3)", - "dark": "var(--base-color-scale-gray-6)" + "dark": "var(--base-color-scale-gray-7)" }, "muted": { "value": "#d3d9dffe", - "dark": "var(--base-color-scale-gray-7)" + "dark": "var(--base-color-scale-gray-8)" }, "subtle": { "value": "#e9edf1fe", - "dark": "var(--base-color-scale-gray-8)" + "dark": "var(--base-color-scale-gray-9)" } }, "focus": { From f00fa1937b0ccd495e6fd8a00312ac277f1bbb1f Mon Sep 17 00:00:00 2001 From: Reza Rahman <13340707+rezrah@users.noreply.github.com> Date: Tue, 30 Sep 2025 17:37:40 +0100 Subject: [PATCH 2/4] upgdate greens --- .../src/tokens/base/colors/light.json | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/design-tokens/src/tokens/base/colors/light.json b/packages/design-tokens/src/tokens/base/colors/light.json index 9f9b42bc77..3e06c697e3 100644 --- a/packages/design-tokens/src/tokens/base/colors/light.json +++ b/packages/design-tokens/src/tokens/base/colors/light.json @@ -52,28 +52,28 @@ "value": "#ddf4ff" }, "1": { - "value": "#b6e3ff" + "value": "#bcecff" }, "2": { - "value": "#80ccff" + "value": "#8dd6ff" }, "3": { - "value": "#54aeff" + "value": "#5fb9ff" }, "4": { - "value": "#218bff" + "value": "#3094ff" }, "5": { - "value": "#0969da" + "value": "#1a61fe" }, "6": { - "value": "#0550ae" + "value": "#0527fc" }, "7": { - "value": "#033d8b" + "value": "#0831c7" }, "8": { - "value": "#0a3069" + "value": "#0b3292" }, "9": { "value": "#001c4d" @@ -84,28 +84,28 @@ "value": "#dafbe1" }, "1": { - "value": "#acf2bd" + "value": "#bfffd1" }, "2": { - "value": "#7ce18b" + "value": "#8df3a9" }, "3": { - "value": "#4ac54e" + "value": "#5fed83" }, "4": { - "value": "#2da44e" + "value": "#17dd4c" }, "5": { - "value": "#1a7f37" + "value": "#00a62d" }, "6": { - "value": "#116329" + "value": "#0b763b" }, "7": { - "value": "#044317" + "value": "#104c35" }, "8": { - "value": "#0d2818" + "value": "#0d3828" }, "9": { "value": "#0a241b" @@ -305,34 +305,34 @@ }, "coral": { "0": { - "value": "#fff5f2" + "value": "#fff0eb" }, "1": { - "value": "#ffe3dc" + "value": "#ffd6cc" }, "2": { - "value": "#ffcdc4" + "value": "#ffb4a1" }, "3": { - "value": "#ffb3a5" + "value": "#fd8c73" }, "4": { - "value": "#fd7c6e" + "value": "#fe4c25" }, "5": { - "value": "#f85149" + "value": "#c53211" }, "6": { - "value": "#cf222e" + "value": "#9e2f1c" }, "7": { - "value": "#a40e26" + "value": "#801e0f" }, "8": { - "value": "#82071e" + "value": "#691105" }, "9": { - "value": "#8c0721" + "value": "#500a00" } }, "lemon": { @@ -369,34 +369,34 @@ }, "lime": { "0": { - "value": "#f1f7e8" + "value": "#f2ffd9" }, "1": { - "value": "#e4efcc" + "value": "#dcff96" }, "2": { - "value": "#d3e5a9" + "value": "#d9fc6c" }, "3": { - "value": "#c1db87" + "value": "#d3fa37" }, "4": { - "value": "#a5cd5c" + "value": "#b2de28" }, "5": { - "value": "#8cb130" + "value": "#92c219" }, "6": { - "value": "#739821" + "value": "#698e17" }, "7": { - "value": "#5c7e16" + "value": "#425e13" }, "8": { - "value": "#4a5e0c" + "value": "#2c440b" }, "9": { - "value": "#364609" + "value": "#182c01" } }, "teal": { From 4a9f74fbf595273deec28b56ed4caef1a12f7996 Mon Sep 17 00:00:00 2001 From: Reza Rahman <13340707+rezrah@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:54:32 +0100 Subject: [PATCH 3/4] update all scales --- .../tokens/base/colors/FIGMA_UPDATE_GUIDE.md | 95 +++++++ .../src/tokens/base/colors/dark.json | 236 +++++++++--------- .../src/tokens/base/colors/light.json | 132 +++++----- 3 files changed, 279 insertions(+), 184 deletions(-) create mode 100644 packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md diff --git a/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md b/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md new file mode 100644 index 0000000000..9edcaaf93a --- /dev/null +++ b/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md @@ -0,0 +1,95 @@ +# Figma Color Token Update Guide + +## Important: Understanding Figma Modes + +When extracting color values from Figma, **each color scale has TWO modes**: +- **Mode 1** (left chip) = `light.json` values +- **Mode 2** (right chip) = `dark.json` values + +The color values are **DIFFERENT** between light and dark modes! + +## How to Extract Values from Figma + +### Step 1: Select the Color Scale in Figma +Select the entire color scale row (all 10 values from 0-9) in the Figma design file. + +### Step 2: Use get_code Tool +Use the `mcp_figma_dev_mod_get_code` tool to extract the design. This will return code with both mode values. + +### Step 3: Identify Mode-Specific Values +Look for the two color chips in each color slot: +```jsx +
// light.json +
// dark.json +``` + +### Step 4: Extract Both Sets of Values +From the code output, extract: +- **Mode 1 values** (left chip, `color-chip-Mode 1`) → Update `light.json` +- **Mode 2 values** (right chip, `color-chip-Mode 2`) → Update `dark.json` + +## Example: Blue Color Scale + +### From Figma Code Output: +```jsx +// Blue/0 +
// light.json: #ddf4ff +
// dark.json: #ccf0ff + +// Blue/1 +
// light.json: #bcecff +
// dark.json: #a2daff + +// ... and so on for Blue/2 through Blue/9 +``` + +### Result in JSON Files: + +**light.json:** +```json +"blue": { + "0": { "value": "#ddf4ff" }, + "1": { "value": "#bcecff" }, + // ... Mode 1 values +} +``` + +**dark.json:** +```json +"blue": { + "0": { "value": "#ccf0ff" }, + "1": { "value": "#a2daff" }, + // ... Mode 2 values +} +``` + +## Common Mistakes to Avoid + +1. ❌ **DO NOT** use the variable definitions alone - they only show one mode +2. ❌ **DO NOT** assume light.json and dark.json have the same values +3. ❌ **DO NOT** use the `bg-[#...]` values without checking which mode +4. ✅ **DO** extract both "color-chip-Mode 1" and "color-chip-Mode 2" values +5. ✅ **DO** update both light.json and dark.json with their respective mode values + +## File Locations + +- Light mode: `/packages/design-tokens/src/tokens/base/colors/light.json` +- Dark mode: `/packages/design-tokens/src/tokens/base/colors/dark.json` + +## Color Scales to Update + +Each color scale has 10 values (0-9): +- gray +- blue +- green +- yellow +- orange +- red +- purple +- pink +- coral +- lemon +- lime +- teal +- indigo +- cyan (if present) diff --git a/packages/design-tokens/src/tokens/base/colors/dark.json b/packages/design-tokens/src/tokens/base/colors/dark.json index b88d57aa5b..acd437439c 100644 --- a/packages/design-tokens/src/tokens/base/colors/dark.json +++ b/packages/design-tokens/src/tokens/base/colors/dark.json @@ -17,255 +17,255 @@ }, "gray": { "0": { - "value": "#eef5f0" + "value": "#d3dcd6" }, "1": { - "value": "#e4ebe6" + "value": "#c4ccc6" }, "2": { - "value": "#d0d6d2" + "value": "#a5ada7" }, "3": { - "value": "#b6bfb8" + "value": "#7c8980" }, "4": { - "value": "#909692" + "value": "#57615a" }, "5": { - "value": "#6e7370" + "value": "#323834" }, "6": { - "value": "#5a615c" + "value": "#232925" }, "7": { - "value": "#323834" + "value": "#191f1b" }, "8": { - "value": "#232925" + "value": "#101411" }, "9": { - "value": "#121613" + "value": "#090c0d" } }, "blue": { "0": { - "value": "#ddf4ff" + "value": "#ccf0ff" }, "1": { - "value": "#bcecff" + "value": "#a2daff" }, "2": { - "value": "#8dd6ff" + "value": "#78bafe" }, "3": { - "value": "#5fb9ff" + "value": "#4e92fe" }, "4": { - "value": "#3094ff" + "value": "#2561fd" }, "5": { - "value": "#1a61fe" + "value": "#0527fc" }, "6": { - "value": "#0527fc" + "value": "#011acb" }, "7": { - "value": "#0831c7" + "value": "#001197" }, "8": { - "value": "#0b3292" + "value": "#000d68" }, "9": { - "value": "#001c4d" + "value": "#000839" } }, "green": { "0": { - "value": "#dafbe1" + "value": "#cdfcd9" }, "1": { - "value": "#bfffd1" + "value": "#8cf2a6" }, "2": { - "value": "#8df3a9" + "value": "#5fed83" }, "3": { - "value": "#5fed83" + "value": "#17dd4c" }, "4": { - "value": "#17dd4c" + "value": "#16b34c" }, "5": { - "value": "#00a62d" + "value": "#148a46" }, "6": { - "value": "#0b763b" + "value": "#10633a" }, "7": { - "value": "#104c35" + "value": "#0e422c" }, "8": { - "value": "#0d3828" + "value": "#0a241b" }, "9": { - "value": "#0a241b" + "value": "#001a11" } }, "yellow": { "0": { - "value": "#fff8c5" + "value": "#f8e3a1" }, "1": { - "value": "#fae17d" + "value": "#f7d162" }, "2": { - "value": "#eac54f" + "value": "#fabf21" }, "3": { - "value": "#d8bd0e" + "value": "#db9d00" }, "4": { - "value": "#db9d00" + "value": "#be7d00" }, "5": { - "value": "#9a6700" + "value": "#a06100" }, "6": { - "value": "#7d4e00" + "value": "#834800" }, "7": { - "value": "#633c01" + "value": "#653200" }, "8": { - "value": "#4d2d00" + "value": "#471f00" }, "9": { - "value": "#3b2300" + "value": "#2a1000" } }, "orange": { "0": { - "value": "#fff1e5" + "value": "#ffddb0" }, "1": { - "value": "#ffd8b5" + "value": "#fcb26b" }, "2": { - "value": "#ffac82" + "value": "#fa8232" }, "3": { - "value": "#ff8e40" + "value": "#f15500" }, "4": { - "value": "#d67200" + "value": "#d54000" }, "5": { - "value": "#bc4c00" + "value": "#b93000" }, "6": { - "value": "#953800" + "value": "#9e2200" }, "7": { - "value": "#703100" + "value": "#831600" }, "8": { - "value": "#5c2200" + "value": "#690c00" }, "9": { - "value": "#471700" + "value": "#4e0400" } }, "red": { "0": { - "value": "#ffebe9" + "value": "#ffdcd7" }, "1": { - "value": "#ffcecb" + "value": "#ffc1ba" }, "2": { - "value": "#ffaba8" + "value": "#ffa198" }, "3": { - "value": "#ff8182" + "value": "#ff7b72" }, "4": { - "value": "#fa4549" + "value": "#f85149" }, "5": { - "value": "#cf222e" + "value": "#da3633" }, "6": { - "value": "#a40e26" + "value": "#b62324" }, "7": { - "value": "#82071e" + "value": "#8e1519" }, "8": { - "value": "#660018" + "value": "#67060c" }, "9": { - "value": "#4c0014" + "value": "#490202" } }, "purple": { "0": { - "value": "#f1e3ff" + "value": "#eadbff" }, "1": { - "value": "#e6ccff" + "value": "#d3b3fe" }, "2": { - "value": "#d0b0ff" + "value": "#bc8bfc" }, "3": { - "value": "#c06eff" + "value": "#a665f9" }, "4": { - "value": "#b975f9" + "value": "#9040f5" }, "5": { - "value": "#8342fa" + "value": "#6619e1" }, "6": { - "value": "#6639ba" + "value": "#43179e" }, "7": { - "value": "#501daf" + "value": "#320b7b" }, "8": { - "value": "#341f74" + "value": "#210454" }, "9": { - "value": "#000240" + "value": "#100029" } }, "pink": { "0": { - "value": "#ffeff7" + "value": "#ffeafd" }, "1": { - "value": "#ffc8fe" + "value": "#ffc9f2" }, "2": { - "value": "#ffadda" + "value": "#ffa4e4" }, "3": { - "value": "#ff80d2" + "value": "#ef2ba5" }, "4": { - "value": "#ff4ac0" + "value": "#de1d92" }, "5": { - "value": "#bf3989" + "value": "#b8247b" }, "6": { "value": "#952866" }, "7": { - "value": "#721a4d" + "value": "#751b50" }, "8": { - "value": "#611347" + "value": "#53113a" }, "9": { "value": "#2f0821" @@ -273,98 +273,98 @@ }, "coral": { "0": { - "value": "#fff0eb" + "value": "#ffddd2" }, "1": { - "value": "#ffd6cc" + "value": "#ffa991" }, "2": { - "value": "#ffb4a1" + "value": "#fe7250" }, "3": { - "value": "#fd8c73" + "value": "#fe4c25" }, "4": { - "value": "#fe4c25" + "value": "#fc2601" }, "5": { - "value": "#c53211" + "value": "#d51a01" }, "6": { - "value": "#9e2f1c" + "value": "#af1000" }, "7": { - "value": "#801e0f" + "value": "#890800" }, "8": { - "value": "#691105" + "value": "#6b0300" }, "9": { - "value": "#500a00" + "value": "#4e0100" } }, "lemon": { "0": { - "value": "#fdf5b3" + "value": "#fff5b1" }, "1": { - "value": "#f4e162" + "value": "#ffed47" }, "2": { - "value": "#dec741" + "value": "#f3e600" }, "3": { - "value": "#c5aa20" + "value": "#d9be00" }, "4": { - "value": "#a88d02" + "value": "#bc9500" }, "5": { - "value": "#866d00" + "value": "#9f6d00" }, "6": { - "value": "#685400" + "value": "#824700" }, "7": { - "value": "#534100" + "value": "#662700" }, "8": { - "value": "#413200" + "value": "#490e00" }, "9": { - "value": "#322400" + "value": "#2d0000" } }, "lime": { "0": { - "value": "#f2ffd9" + "value": "#edffc9" }, "1": { - "value": "#dcff96" + "value": "#dcfd7f" }, "2": { - "value": "#d9fc6c" + "value": "#d3fa37" }, "3": { - "value": "#d3fa37" + "value": "#b9ef0d" }, "4": { - "value": "#b2de28" + "value": "#88b80f" }, "5": { - "value": "#92c219" + "value": "#608a10" }, "6": { - "value": "#698e17" + "value": "#3e5f0f" }, "7": { - "value": "#425e13" + "value": "#22360b" }, "8": { - "value": "#2c440b" + "value": "#142a08" }, "9": { - "value": "#182c01" + "value": "#091d05" } }, "teal": { @@ -401,34 +401,34 @@ }, "indigo": { "0": { - "value": "#eff2ff" + "value": "#c5d7fe" }, "1": { - "value": "#d7ddff" + "value": "#a4bdfd" }, "2": { - "value": "#b9c2ff" + "value": "#88a0f7" }, "3": { - "value": "#9aa4ff" + "value": "#6e84e6" }, "4": { - "value": "#7683ff" + "value": "#5568c6" }, "5": { - "value": "#545df0" + "value": "#414d9e" }, "6": { - "value": "#3c42d0" + "value": "#2f3a95" }, "7": { - "value": "#2c33a5" + "value": "#202870" }, "8": { - "value": "#212183" + "value": "#15184c" }, "9": { - "value": "#191f5c" + "value": "#0b0d2b" } } } diff --git a/packages/design-tokens/src/tokens/base/colors/light.json b/packages/design-tokens/src/tokens/base/colors/light.json index 3e06c697e3..13835021fb 100644 --- a/packages/design-tokens/src/tokens/base/colors/light.json +++ b/packages/design-tokens/src/tokens/base/colors/light.json @@ -17,31 +17,31 @@ }, "gray": { "0": { - "value": "#eef5f0" + "value": "#f2f5f3" }, "1": { "value": "#e4ebe6" }, "2": { - "value": "#d0d6d2" + "value": "#d2d9d4" }, "3": { - "value": "#b6bfb8" + "value": "#c4ccc6" }, "4": { - "value": "#909692" + "value": "#b6bfb8" }, "5": { - "value": "#6e7370" + "value": "#96a199" }, "6": { - "value": "#5a615c" + "value": "#77827a" }, "7": { - "value": "#323834" + "value": "#5a615c" }, "8": { - "value": "#232925" + "value": "#353d37" }, "9": { "value": "#121613" @@ -81,31 +81,31 @@ }, "green": { "0": { - "value": "#dafbe1" + "value": "#ebf9f4" }, "1": { "value": "#bfffd1" }, "2": { - "value": "#8df3a9" + "value": "#8cf2a6" }, "3": { "value": "#5fed83" }, "4": { - "value": "#17dd4c" + "value": "#23ea57" }, "5": { - "value": "#00a62d" + "value": "#0fbf3e" }, "6": { - "value": "#0b763b" + "value": "#08872b" }, "7": { - "value": "#104c35" + "value": "#0e6836" }, "8": { - "value": "#0d3828" + "value": "#104c35" }, "9": { "value": "#0a241b" @@ -116,28 +116,28 @@ "value": "#fff8c5" }, "1": { - "value": "#fae17d" + "value": "#ffe777" }, "2": { - "value": "#eac54f" + "value": "#ffce2a" }, "3": { - "value": "#d8bd0e" + "value": "#db9d00" }, "4": { - "value": "#db9d00" + "value": "#c08600" }, "5": { - "value": "#9a6700" + "value": "#a67000" }, "6": { - "value": "#7d4e00" + "value": "#8b5b00" }, "7": { - "value": "#633c01" + "value": "#704700" }, "8": { - "value": "#4d2d00" + "value": "#563500" }, "9": { "value": "#3b2300" @@ -180,28 +180,28 @@ "value": "#fff1e5" }, "1": { - "value": "#ffd8b5" + "value": "#fcceab" }, "2": { - "value": "#ffac82" + "value": "#f4a876" }, "3": { - "value": "#ff8e40" + "value": "#f08a3a" }, "4": { - "value": "#d67200" + "value": "#da7210" }, "5": { - "value": "#bc4c00" + "value": "#b85b06" }, "6": { - "value": "#953800" + "value": "#954502" }, "7": { "value": "#703100" }, "8": { - "value": "#5c2200" + "value": "#5c2300" }, "9": { "value": "#471700" @@ -241,45 +241,45 @@ }, "purple": { "0": { - "value": "#f1e3ff" + "value": "#f0e5ff" }, "1": { - "value": "#e6ccff" + "value": "#dbbffd" }, "2": { - "value": "#d0b0ff" + "value": "#c898fd" }, "3": { - "value": "#c06eff" + "value": "#b870ff" }, "4": { - "value": "#b975f9" + "value": "#9f51fa" }, "5": { - "value": "#8342fa" + "value": "#8534f3" }, "6": { - "value": "#6639ba" + "value": "#6619e1" }, "7": { - "value": "#501daf" + "value": "#43179e" }, "8": { - "value": "#341f74" + "value": "#26115f" }, "9": { - "value": "#000240" + "value": "#160048" } }, "pink": { "0": { - "value": "#ffeff7" + "value": "#fff0fc" }, "1": { - "value": "#ffc8fe" + "value": "#ffc9f2" }, "2": { - "value": "#ffadda" + "value": "#ffa4e4" }, "3": { "value": "#ff80d2" @@ -288,19 +288,19 @@ "value": "#ff4ac0" }, "5": { - "value": "#bf3989" + "value": "#ef2ba5" }, "6": { - "value": "#952866" + "value": "#ca2186" }, "7": { - "value": "#721a4d" + "value": "#952866" }, "8": { - "value": "#611347" + "value": "#651643" }, "9": { - "value": "#2f0821" + "value": "#30081f" } }, "coral": { @@ -308,28 +308,28 @@ "value": "#fff0eb" }, "1": { - "value": "#ffd6cc" + "value": "#ffcab8" }, "2": { - "value": "#ffb4a1" + "value": "#ffa486" }, "3": { - "value": "#fd8c73" + "value": "#ff7b56" }, "4": { "value": "#fe4c25" }, "5": { - "value": "#c53211" + "value": "#e13f1b" }, "6": { - "value": "#9e2f1c" + "value": "#c53211" }, "7": { - "value": "#801e0f" + "value": "#a22810" }, "8": { - "value": "#691105" + "value": "#801e0f" }, "9": { "value": "#500a00" @@ -343,22 +343,22 @@ "value": "#f4e162" }, "2": { - "value": "#dec741" + "value": "#f1d72d" }, "3": { - "value": "#c5aa20" + "value": "#d8bd0e" }, "4": { - "value": "#a88d02" + "value": "#bba00a" }, "5": { - "value": "#866d00" + "value": "#9e8406" }, "6": { - "value": "#685400" + "value": "#806803" }, "7": { - "value": "#534100" + "value": "#614d01" }, "8": { "value": "#413200" @@ -436,22 +436,22 @@ "value": "#eff2ff" }, "1": { - "value": "#d7ddff" + "value": "#d4dbff" }, "2": { "value": "#b9c2ff" }, "3": { - "value": "#9aa4ff" + "value": "#909cfa" }, "4": { - "value": "#7683ff" + "value": "#6a78f1" }, "5": { - "value": "#545df0" + "value": "#4956e5" }, "6": { - "value": "#3c42d0" + "value": "#2b37d4" }, "7": { "value": "#2c33a5" From d1e8f788d41c942bc1efa4a10c6a64a44cfb2e77 Mon Sep 17 00:00:00 2001 From: Reza Rahman <13340707+rezrah@users.noreply.github.com> Date: Mon, 6 Oct 2025 16:18:04 +0100 Subject: [PATCH 4/4] remove figma guide --- .../tokens/base/colors/FIGMA_UPDATE_GUIDE.md | 95 ------------------- 1 file changed, 95 deletions(-) delete mode 100644 packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md diff --git a/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md b/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md deleted file mode 100644 index 9edcaaf93a..0000000000 --- a/packages/design-tokens/src/tokens/base/colors/FIGMA_UPDATE_GUIDE.md +++ /dev/null @@ -1,95 +0,0 @@ -# Figma Color Token Update Guide - -## Important: Understanding Figma Modes - -When extracting color values from Figma, **each color scale has TWO modes**: -- **Mode 1** (left chip) = `light.json` values -- **Mode 2** (right chip) = `dark.json` values - -The color values are **DIFFERENT** between light and dark modes! - -## How to Extract Values from Figma - -### Step 1: Select the Color Scale in Figma -Select the entire color scale row (all 10 values from 0-9) in the Figma design file. - -### Step 2: Use get_code Tool -Use the `mcp_figma_dev_mod_get_code` tool to extract the design. This will return code with both mode values. - -### Step 3: Identify Mode-Specific Values -Look for the two color chips in each color slot: -```jsx -
// light.json -
// dark.json -``` - -### Step 4: Extract Both Sets of Values -From the code output, extract: -- **Mode 1 values** (left chip, `color-chip-Mode 1`) → Update `light.json` -- **Mode 2 values** (right chip, `color-chip-Mode 2`) → Update `dark.json` - -## Example: Blue Color Scale - -### From Figma Code Output: -```jsx -// Blue/0 -
// light.json: #ddf4ff -
// dark.json: #ccf0ff - -// Blue/1 -
// light.json: #bcecff -
// dark.json: #a2daff - -// ... and so on for Blue/2 through Blue/9 -``` - -### Result in JSON Files: - -**light.json:** -```json -"blue": { - "0": { "value": "#ddf4ff" }, - "1": { "value": "#bcecff" }, - // ... Mode 1 values -} -``` - -**dark.json:** -```json -"blue": { - "0": { "value": "#ccf0ff" }, - "1": { "value": "#a2daff" }, - // ... Mode 2 values -} -``` - -## Common Mistakes to Avoid - -1. ❌ **DO NOT** use the variable definitions alone - they only show one mode -2. ❌ **DO NOT** assume light.json and dark.json have the same values -3. ❌ **DO NOT** use the `bg-[#...]` values without checking which mode -4. ✅ **DO** extract both "color-chip-Mode 1" and "color-chip-Mode 2" values -5. ✅ **DO** update both light.json and dark.json with their respective mode values - -## File Locations - -- Light mode: `/packages/design-tokens/src/tokens/base/colors/light.json` -- Dark mode: `/packages/design-tokens/src/tokens/base/colors/dark.json` - -## Color Scales to Update - -Each color scale has 10 values (0-9): -- gray -- blue -- green -- yellow -- orange -- red -- purple -- pink -- coral -- lemon -- lime -- teal -- indigo -- cyan (if present)