From ced78e055a7ba7f6357dc6cc4da7ccb903b931d1 Mon Sep 17 00:00:00 2001 From: malangcat Date: Tue, 14 Jan 2025 19:48:50 +0900 Subject: [PATCH] feat: update color token --- docs/public/rootage/color.json | 38 +++---- .../rootage/components/help-bubble.json | 4 +- docs/public/rootage/components/snackbar.json | 2 +- docs/public/rootage/parsed.json | 107 +++++++----------- packages/rootage/color.yaml | 32 +++--- packages/rootage/components/help-bubble.yaml | 4 +- packages/rootage/components/schema.json | 19 ++-- packages/rootage/components/snackbar.yaml | 2 +- packages/stylesheet/helpBubble.css | 4 +- packages/stylesheet/snackbar.css | 2 +- packages/stylesheet/token.css | 30 +++-- packages/vars/lib/color/bg.d.ts | 2 +- packages/vars/lib/color/bg.mjs | 2 +- packages/vars/lib/color/palette.d.ts | 3 +- packages/vars/lib/color/palette.mjs | 3 +- packages/vars/lib/component/help-bubble.d.ts | 4 +- packages/vars/lib/component/help-bubble.mjs | 4 +- packages/vars/lib/component/snackbar.d.ts | 2 +- packages/vars/lib/component/snackbar.mjs | 2 +- 19 files changed, 112 insertions(+), 154 deletions(-) diff --git a/docs/public/rootage/color.json b/docs/public/rootage/color.json index 80524ffd7..6de16ba4d 100644 --- a/docs/public/rootage/color.json +++ b/docs/public/rootage/color.json @@ -57,11 +57,17 @@ }, "$color.palette.gray-800": { "values": { - "theme-light": "#586070", + "theme-light": "#555d6d", "theme-dark": "#dcdee3" } }, "$color.palette.gray-900": { + "values": { + "theme-light": "#2a3038", + "theme-dark": "#e9eaec" + } + }, + "$color.palette.gray-1000": { "values": { "theme-light": "#1a1c20", "theme-dark": "#f3f4f5" @@ -463,18 +469,6 @@ "theme-dark": "#ffffffcc" } }, - "$color.palette.slate-900": { - "values": { - "theme-light": "#2a3038", - "theme-dark": "#edf2f7" - } - }, - "$color.palette.slate-800": { - "values": { - "theme-light": "#545c6e", - "theme-dark": "#dde3ed" - } - }, "$color.palette.static-white-alpha-200": { "values": { "theme-light": "#ffffff33", @@ -483,8 +477,8 @@ }, "$color.fg.neutral": { "values": { - "theme-light": "$color.palette.gray-900", - "theme-dark": "$color.palette.gray-900" + "theme-light": "$color.palette.gray-1000", + "theme-dark": "$color.palette.gray-1000" } }, "$color.fg.neutral-muted": { @@ -544,7 +538,7 @@ "$color.fg.informative": { "values": { "theme-light": "$color.palette.blue-700", - "theme-dark": "$color.palette.blue-800" + "theme-dark": "$color.palette.blue-700" } }, "$color.fg.informative-contrast": { @@ -675,8 +669,8 @@ }, "$color.bg.neutral-inverted": { "values": { - "theme-light": "$color.palette.slate-900", - "theme-dark": "$color.palette.gray-900" + "theme-light": "$color.palette.gray-900", + "theme-dark": "$color.palette.gray-1000" } }, "$color.bg.neutral-weak-pressed": { @@ -801,19 +795,19 @@ }, "$color.bg.neutral-solid-muted": { "values": { - "theme-light": "$color.palette.slate-800", + "theme-light": "$color.palette.gray-800", "theme-dark": "$color.palette.gray-400" } }, - "$color.bg.floating-solid": { + "$color.bg.neutral-solid": { "values": { - "theme-light": "$color.palette.gray-900", + "theme-light": "$color.palette.gray-1000", "theme-dark": "$color.palette.gray-300" } }, "$color.bg.neutral-solid-muted-pressed": { "values": { - "theme-light": "$color.palette.slate-900", + "theme-light": "$color.palette.gray-900", "theme-dark": "$color.palette.gray-500" } }, diff --git a/docs/public/rootage/components/help-bubble.json b/docs/public/rootage/components/help-bubble.json index 12b8d5e09..03987dafc 100644 --- a/docs/public/rootage/components/help-bubble.json +++ b/docs/public/rootage/components/help-bubble.json @@ -8,13 +8,13 @@ "base": { "enabled": { "root": { - "color": "$color.bg.floating-solid", + "color": "$color.bg.neutral-solid", "cornerRadius": "$radius.s3", "paddingX": "$unit.s3", "paddingY": "$unit.s3" }, "arrow": { - "color": "$color.bg.floating-solid", + "color": "$color.bg.neutral-solid", "size": "$unit.s2_5" }, "title": { diff --git a/docs/public/rootage/components/snackbar.json b/docs/public/rootage/components/snackbar.json index a1b22d144..e63d5e1ef 100644 --- a/docs/public/rootage/components/snackbar.json +++ b/docs/public/rootage/components/snackbar.json @@ -14,7 +14,7 @@ "offsetTimingFunction": "$timing-function.easing" }, "root": { - "color": "$color.bg.floating-solid", + "color": "$color.bg.neutral-solid", "cornerRadius": "$radius.s2", "minHeight": "44px", "paddingX": "$unit.s4", diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json index dd2cf4e22..e30d3fdfa 100644 --- a/docs/public/rootage/parsed.json +++ b/docs/public/rootage/parsed.json @@ -246,7 +246,7 @@ "mode": "theme-light", "value": { "type": "color", - "value": "#586070" + "value": "#555d6d" } }, { @@ -268,6 +268,33 @@ ], "key": "gray-900" }, + "values": [ + { + "mode": "theme-light", + "value": { + "type": "color", + "value": "#2a3038" + } + }, + { + "mode": "theme-dark", + "value": { + "type": "color", + "value": "#e9eaec" + } + } + ] + }, + { + "collection": "color", + "token": { + "type": "token", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + }, "values": [ { "mode": "theme-light", @@ -2067,60 +2094,6 @@ } ] }, - { - "collection": "color", - "token": { - "type": "token", - "group": [ - "color", - "palette" - ], - "key": "slate-900" - }, - "values": [ - { - "mode": "theme-light", - "value": { - "type": "color", - "value": "#2a3038" - } - }, - { - "mode": "theme-dark", - "value": { - "type": "color", - "value": "#edf2f7" - } - } - ] - }, - { - "collection": "color", - "token": { - "type": "token", - "group": [ - "color", - "palette" - ], - "key": "slate-800" - }, - "values": [ - { - "mode": "theme-light", - "value": { - "type": "color", - "value": "#545c6e" - } - }, - { - "mode": "theme-dark", - "value": { - "type": "color", - "value": "#dde3ed" - } - } - ] - }, { "collection": "color", "token": { @@ -2167,7 +2140,7 @@ "color", "palette" ], - "key": "gray-900" + "key": "gray-1000" } }, { @@ -2178,7 +2151,7 @@ "color", "palette" ], - "key": "gray-900" + "key": "gray-1000" } } ] @@ -2528,7 +2501,7 @@ "color", "palette" ], - "key": "blue-800" + "key": "blue-700" } } ] @@ -3287,7 +3260,7 @@ "color", "palette" ], - "key": "slate-900" + "key": "gray-900" } }, { @@ -3298,7 +3271,7 @@ "color", "palette" ], - "key": "gray-900" + "key": "gray-1000" } } ] @@ -4022,7 +3995,7 @@ "color", "palette" ], - "key": "slate-800" + "key": "gray-800" } }, { @@ -4046,7 +4019,7 @@ "color", "bg" ], - "key": "floating-solid" + "key": "neutral-solid" }, "values": [ { @@ -4057,7 +4030,7 @@ "color", "palette" ], - "key": "gray-900" + "key": "gray-1000" } }, { @@ -4092,7 +4065,7 @@ "color", "palette" ], - "key": "slate-900" + "key": "gray-900" } }, { @@ -15682,7 +15655,7 @@ "color", "bg" ], - "key": "floating-solid" + "key": "neutral-solid" } }, { @@ -15728,7 +15701,7 @@ "color", "bg" ], - "key": "floating-solid" + "key": "neutral-solid" } }, { @@ -19690,7 +19663,7 @@ "color", "bg" ], - "key": "floating-solid" + "key": "neutral-solid" } }, { diff --git a/packages/rootage/color.yaml b/packages/rootage/color.yaml index 776acaf1f..868d77c87 100644 --- a/packages/rootage/color.yaml +++ b/packages/rootage/color.yaml @@ -39,9 +39,13 @@ data: theme-dark: "#b0b3ba" $color.palette.gray-800: values: - theme-light: "#586070" + theme-light: "#555d6d" theme-dark: "#dcdee3" $color.palette.gray-900: + values: + theme-light: "#2a3038" + theme-dark: "#e9eaec" + $color.palette.gray-1000: values: theme-light: "#1a1c20" theme-dark: "#f3f4f5" @@ -309,22 +313,14 @@ data: values: theme-light: "#ffffffcc" theme-dark: "#ffffffcc" - $color.palette.slate-900: - values: - theme-light: "#2a3038" - theme-dark: "#edf2f7" - $color.palette.slate-800: - values: - theme-light: "#545c6e" - theme-dark: "#dde3ed" $color.palette.static-white-alpha-200: values: theme-light: "#ffffff33" theme-dark: "#ffffff33" $color.fg.neutral: values: - theme-light: $color.palette.gray-900 - theme-dark: $color.palette.gray-900 + theme-light: $color.palette.gray-1000 + theme-dark: $color.palette.gray-1000 $color.fg.neutral-muted: values: theme-light: $color.palette.gray-800 @@ -364,7 +360,7 @@ data: $color.fg.informative: values: theme-light: $color.palette.blue-700 - theme-dark: $color.palette.blue-800 + theme-dark: $color.palette.blue-700 $color.fg.informative-contrast: values: theme-light: $color.palette.blue-900 @@ -451,8 +447,8 @@ data: theme-dark: $color.palette.gray-300 $color.bg.neutral-inverted: values: - theme-light: $color.palette.slate-900 - theme-dark: $color.palette.gray-900 + theme-light: $color.palette.gray-900 + theme-dark: $color.palette.gray-1000 $color.bg.neutral-weak-pressed: values: theme-light: $color.palette.gray-300 @@ -535,15 +531,15 @@ data: theme-dark: $color.palette.purple-200 $color.bg.neutral-solid-muted: values: - theme-light: $color.palette.slate-800 + theme-light: $color.palette.gray-800 theme-dark: $color.palette.gray-400 - $color.bg.floating-solid: + $color.bg.neutral-solid: values: - theme-light: $color.palette.gray-900 + theme-light: $color.palette.gray-1000 theme-dark: $color.palette.gray-300 $color.bg.neutral-solid-muted-pressed: values: - theme-light: $color.palette.slate-900 + theme-light: $color.palette.gray-900 theme-dark: $color.palette.gray-500 $color.stroke.neutral: values: diff --git a/packages/rootage/components/help-bubble.yaml b/packages/rootage/components/help-bubble.yaml index dd380eeeb..37258b849 100644 --- a/packages/rootage/components/help-bubble.yaml +++ b/packages/rootage/components/help-bubble.yaml @@ -7,12 +7,12 @@ data: base: enabled: root: - color: $color.bg.floating-solid + color: $color.bg.neutral-solid cornerRadius: $radius.s3 paddingX: $unit.s3 paddingY: $unit.s3 arrow: - color: $color.bg.floating-solid + color: $color.bg.neutral-solid size: $unit.s2_5 title: color: $color.palette.static-white diff --git a/packages/rootage/components/schema.json b/packages/rootage/components/schema.json index f17e1e559..d24a8a366 100644 --- a/packages/rootage/components/schema.json +++ b/packages/rootage/components/schema.json @@ -192,8 +192,9 @@ { "const": "$color.palette.gray-500", "title": "$color.palette.gray-500", "description": "theme-light: #d1d3d8\ntheme-dark: #5b606a", "markdownDescription": "- theme-light: `#d1d3d8`\n\n- theme-dark: `#5b606a`" }, { "const": "$color.palette.gray-600", "title": "$color.palette.gray-600", "description": "theme-light: #b0b3ba\ntheme-dark: #868b94", "markdownDescription": "- theme-light: `#b0b3ba`\n\n- theme-dark: `#868b94`" }, { "const": "$color.palette.gray-700", "title": "$color.palette.gray-700", "description": "theme-light: #868b94\ntheme-dark: #b0b3ba", "markdownDescription": "- theme-light: `#868b94`\n\n- theme-dark: `#b0b3ba`" }, - { "const": "$color.palette.gray-800", "title": "$color.palette.gray-800", "description": "theme-light: #586070\ntheme-dark: #dcdee3", "markdownDescription": "- theme-light: `#586070`\n\n- theme-dark: `#dcdee3`" }, - { "const": "$color.palette.gray-900", "title": "$color.palette.gray-900", "description": "theme-light: #1a1c20\ntheme-dark: #f3f4f5", "markdownDescription": "- theme-light: `#1a1c20`\n\n- theme-dark: `#f3f4f5`" }, + { "const": "$color.palette.gray-800", "title": "$color.palette.gray-800", "description": "theme-light: #555d6d\ntheme-dark: #dcdee3", "markdownDescription": "- theme-light: `#555d6d`\n\n- theme-dark: `#dcdee3`" }, + { "const": "$color.palette.gray-900", "title": "$color.palette.gray-900", "description": "theme-light: #2a3038\ntheme-dark: #e9eaec", "markdownDescription": "- theme-light: `#2a3038`\n\n- theme-dark: `#e9eaec`" }, + { "const": "$color.palette.gray-1000", "title": "$color.palette.gray-1000", "description": "theme-light: #1a1c20\ntheme-dark: #f3f4f5", "markdownDescription": "- theme-light: `#1a1c20`\n\n- theme-dark: `#f3f4f5`" }, { "const": "$color.palette.carrot-100", "title": "$color.palette.carrot-100", "description": "theme-light: #fff2ec\ntheme-dark: #31241f", "markdownDescription": "- theme-light: `#fff2ec`\n\n- theme-dark: `#31241f`" }, { "const": "$color.palette.carrot-200", "title": "$color.palette.carrot-200", "description": "theme-light: #ffe8db\ntheme-dark: #4b291c", "markdownDescription": "- theme-light: `#ffe8db`\n\n- theme-dark: `#4b291c`" }, { "const": "$color.palette.carrot-300", "title": "$color.palette.carrot-300", "description": "theme-light: #ffd5c0\ntheme-dark: #6b311c", "markdownDescription": "- theme-light: `#ffd5c0`\n\n- theme-dark: `#6b311c`" }, @@ -260,10 +261,8 @@ { "const": "$color.palette.purple-900", "title": "$color.palette.purple-900", "description": "theme-light: #50379b\ntheme-dark: #d9cefa", "markdownDescription": "- theme-light: `#50379b`\n\n- theme-dark: `#d9cefa`" }, { "const": "$color.palette.purple-1000", "title": "$color.palette.purple-1000", "description": "theme-light: #29175d\ntheme-dark: #f0edfc", "markdownDescription": "- theme-light: `#29175d`\n\n- theme-dark: `#f0edfc`" }, { "const": "$color.palette.static-white-alpha-800", "title": "$color.palette.static-white-alpha-800", "description": "theme-light: #ffffffcc\ntheme-dark: #ffffffcc", "markdownDescription": "- theme-light: `#ffffffcc`\n\n- theme-dark: `#ffffffcc`" }, - { "const": "$color.palette.slate-900", "title": "$color.palette.slate-900", "description": "theme-light: #2a3038\ntheme-dark: #edf2f7", "markdownDescription": "- theme-light: `#2a3038`\n\n- theme-dark: `#edf2f7`" }, - { "const": "$color.palette.slate-800", "title": "$color.palette.slate-800", "description": "theme-light: #545c6e\ntheme-dark: #dde3ed", "markdownDescription": "- theme-light: `#545c6e`\n\n- theme-dark: `#dde3ed`" }, { "const": "$color.palette.static-white-alpha-200", "title": "$color.palette.static-white-alpha-200", "description": "theme-light: #ffffff33\ntheme-dark: #ffffff33", "markdownDescription": "- theme-light: `#ffffff33`\n\n- theme-dark: `#ffffff33`" }, - { "const": "$color.fg.neutral", "title": "$color.fg.neutral", "description": "theme-light: $color.palette.gray-900\ntheme-dark: $color.palette.gray-900", "markdownDescription": "- theme-light: `$color.palette.gray-900`\n\n- theme-dark: `$color.palette.gray-900`" }, + { "const": "$color.fg.neutral", "title": "$color.fg.neutral", "description": "theme-light: $color.palette.gray-1000\ntheme-dark: $color.palette.gray-1000", "markdownDescription": "- theme-light: `$color.palette.gray-1000`\n\n- theme-dark: `$color.palette.gray-1000`" }, { "const": "$color.fg.neutral-muted", "title": "$color.fg.neutral-muted", "description": "theme-light: $color.palette.gray-800\ntheme-dark: $color.palette.gray-800", "markdownDescription": "- theme-light: `$color.palette.gray-800`\n\n- theme-dark: `$color.palette.gray-800`" }, { "const": "$color.fg.neutral-subtle", "title": "$color.fg.neutral-subtle", "description": "theme-light: $color.palette.gray-700\ntheme-dark: $color.palette.gray-700", "markdownDescription": "- theme-light: `$color.palette.gray-700`\n\n- theme-dark: `$color.palette.gray-700`" }, { "const": "$color.fg.neutral-inverted", "title": "$color.fg.neutral-inverted", "description": "theme-light: $color.palette.gray-00\ntheme-dark: $color.palette.gray-100", "markdownDescription": "- theme-light: `$color.palette.gray-00`\n\n- theme-dark: `$color.palette.gray-100`" }, @@ -273,7 +272,7 @@ { "const": "$color.fg.positive", "title": "$color.fg.positive", "description": "theme-light: $color.palette.green-700\ntheme-dark: $color.palette.green-700", "markdownDescription": "- theme-light: `$color.palette.green-700`\n\n- theme-dark: `$color.palette.green-700`" }, { "const": "$color.fg.positive-contrast", "title": "$color.fg.positive-contrast", "description": "theme-light: $color.palette.green-900\ntheme-dark: $color.palette.green-900", "markdownDescription": "- theme-light: `$color.palette.green-900`\n\n- theme-dark: `$color.palette.green-900`" }, { "const": "$color.fg.warning-contrast", "title": "$color.fg.warning-contrast", "description": "theme-light: $color.palette.yellow-900\ntheme-dark: $color.palette.yellow-900", "markdownDescription": "- theme-light: `$color.palette.yellow-900`\n\n- theme-dark: `$color.palette.yellow-900`" }, - { "const": "$color.fg.informative", "title": "$color.fg.informative", "description": "theme-light: $color.palette.blue-700\ntheme-dark: $color.palette.blue-800", "markdownDescription": "- theme-light: `$color.palette.blue-700`\n\n- theme-dark: `$color.palette.blue-800`" }, + { "const": "$color.fg.informative", "title": "$color.fg.informative", "description": "theme-light: $color.palette.blue-700\ntheme-dark: $color.palette.blue-700", "markdownDescription": "- theme-light: `$color.palette.blue-700`\n\n- theme-dark: `$color.palette.blue-700`" }, { "const": "$color.fg.informative-contrast", "title": "$color.fg.informative-contrast", "description": "theme-light: $color.palette.blue-900\ntheme-dark: $color.palette.blue-900", "markdownDescription": "- theme-light: `$color.palette.blue-900`\n\n- theme-dark: `$color.palette.blue-900`" }, { "const": "$color.fg.placeholder", "title": "$color.fg.placeholder", "description": "theme-light: $color.palette.gray-600\ntheme-dark: $color.palette.gray-600", "markdownDescription": "- theme-light: `$color.palette.gray-600`\n\n- theme-dark: `$color.palette.gray-600`" }, { "const": "$color.fg.disabled", "title": "$color.fg.disabled", "description": "theme-light: $color.palette.gray-500\ntheme-dark: $color.palette.gray-500", "markdownDescription": "- theme-light: `$color.palette.gray-500`\n\n- theme-dark: `$color.palette.gray-500`" }, @@ -295,7 +294,7 @@ { "const": "$color.bg.layer-default-pressed", "title": "$color.bg.layer-default-pressed", "description": "theme-light: $color.palette.gray-100\ntheme-dark: $color.palette.gray-200", "markdownDescription": "- theme-light: `$color.palette.gray-100`\n\n- theme-dark: `$color.palette.gray-200`" }, { "const": "$color.bg.layer-fill", "title": "$color.bg.layer-fill", "description": "theme-light: $color.palette.gray-100\ntheme-dark: $color.palette.gray-100", "markdownDescription": "- theme-light: `$color.palette.gray-100`\n\n- theme-dark: `$color.palette.gray-100`" }, { "const": "$color.bg.neutral-weak", "title": "$color.bg.neutral-weak", "description": "theme-light: $color.palette.gray-200\ntheme-dark: $color.palette.gray-300", "markdownDescription": "- theme-light: `$color.palette.gray-200`\n\n- theme-dark: `$color.palette.gray-300`" }, - { "const": "$color.bg.neutral-inverted", "title": "$color.bg.neutral-inverted", "description": "theme-light: $color.palette.slate-900\ntheme-dark: $color.palette.gray-900", "markdownDescription": "- theme-light: `$color.palette.slate-900`\n\n- theme-dark: `$color.palette.gray-900`" }, + { "const": "$color.bg.neutral-inverted", "title": "$color.bg.neutral-inverted", "description": "theme-light: $color.palette.gray-900\ntheme-dark: $color.palette.gray-1000", "markdownDescription": "- theme-light: `$color.palette.gray-900`\n\n- theme-dark: `$color.palette.gray-1000`" }, { "const": "$color.bg.neutral-weak-pressed", "title": "$color.bg.neutral-weak-pressed", "description": "theme-light: $color.palette.gray-300\ntheme-dark: $color.palette.gray-400", "markdownDescription": "- theme-light: `$color.palette.gray-300`\n\n- theme-dark: `$color.palette.gray-400`" }, { "const": "$color.bg.informative-weak", "title": "$color.bg.informative-weak", "description": "theme-light: $color.palette.blue-100\ntheme-dark: $color.palette.blue-100", "markdownDescription": "- theme-light: `$color.palette.blue-100`\n\n- theme-dark: `$color.palette.blue-100`" }, { "const": "$color.bg.overlay", "title": "$color.bg.overlay", "description": "theme-light: $color.palette.static-black-alpha-500\ntheme-dark: $color.palette.static-black-alpha-500", "markdownDescription": "- theme-light: `$color.palette.static-black-alpha-500`\n\n- theme-dark: `$color.palette.static-black-alpha-500`" }, @@ -316,9 +315,9 @@ { "const": "$color.bg.magic-solid-pressed", "title": "$color.bg.magic-solid-pressed", "description": "theme-light: $color.palette.purple-800\ntheme-dark: $color.palette.purple-700", "markdownDescription": "- theme-light: `$color.palette.purple-800`\n\n- theme-dark: `$color.palette.purple-700`" }, { "const": "$color.bg.magic-weak", "title": "$color.bg.magic-weak", "description": "theme-light: $color.palette.purple-100\ntheme-dark: $color.palette.purple-100", "markdownDescription": "- theme-light: `$color.palette.purple-100`\n\n- theme-dark: `$color.palette.purple-100`" }, { "const": "$color.bg.magic-weak-pressed", "title": "$color.bg.magic-weak-pressed", "description": "theme-light: $color.palette.purple-200\ntheme-dark: $color.palette.purple-200", "markdownDescription": "- theme-light: `$color.palette.purple-200`\n\n- theme-dark: `$color.palette.purple-200`" }, - { "const": "$color.bg.neutral-solid-muted", "title": "$color.bg.neutral-solid-muted", "description": "theme-light: $color.palette.slate-800\ntheme-dark: $color.palette.gray-400", "markdownDescription": "- theme-light: `$color.palette.slate-800`\n\n- theme-dark: `$color.palette.gray-400`" }, - { "const": "$color.bg.floating-solid", "title": "$color.bg.floating-solid", "description": "theme-light: $color.palette.gray-900\ntheme-dark: $color.palette.gray-300", "markdownDescription": "- theme-light: `$color.palette.gray-900`\n\n- theme-dark: `$color.palette.gray-300`" }, - { "const": "$color.bg.neutral-solid-muted-pressed", "title": "$color.bg.neutral-solid-muted-pressed", "description": "theme-light: $color.palette.slate-900\ntheme-dark: $color.palette.gray-500", "markdownDescription": "- theme-light: `$color.palette.slate-900`\n\n- theme-dark: `$color.palette.gray-500`" }, + { "const": "$color.bg.neutral-solid-muted", "title": "$color.bg.neutral-solid-muted", "description": "theme-light: $color.palette.gray-800\ntheme-dark: $color.palette.gray-400", "markdownDescription": "- theme-light: `$color.palette.gray-800`\n\n- theme-dark: `$color.palette.gray-400`" }, + { "const": "$color.bg.neutral-solid", "title": "$color.bg.neutral-solid", "description": "theme-light: $color.palette.gray-1000\ntheme-dark: $color.palette.gray-300", "markdownDescription": "- theme-light: `$color.palette.gray-1000`\n\n- theme-dark: `$color.palette.gray-300`" }, + { "const": "$color.bg.neutral-solid-muted-pressed", "title": "$color.bg.neutral-solid-muted-pressed", "description": "theme-light: $color.palette.gray-900\ntheme-dark: $color.palette.gray-500", "markdownDescription": "- theme-light: `$color.palette.gray-900`\n\n- theme-dark: `$color.palette.gray-500`" }, { "const": "$color.stroke.neutral", "title": "$color.stroke.neutral", "description": "theme-light: $color.palette.gray-300\ntheme-dark: $color.palette.gray-300", "markdownDescription": "- theme-light: `$color.palette.gray-300`\n\n- theme-dark: `$color.palette.gray-300`" }, { "const": "$color.stroke.brand", "title": "$color.stroke.brand", "description": "theme-light: $color.palette.carrot-300\ntheme-dark: $color.palette.carrot-300", "markdownDescription": "- theme-light: `$color.palette.carrot-300`\n\n- theme-dark: `$color.palette.carrot-300`" }, { "const": "$color.stroke.field", "title": "$color.stroke.field", "description": "theme-light: $color.palette.gray-400\ntheme-dark: $color.palette.gray-400", "markdownDescription": "- theme-light: `$color.palette.gray-400`\n\n- theme-dark: `$color.palette.gray-400`" }, diff --git a/packages/rootage/components/snackbar.yaml b/packages/rootage/components/snackbar.yaml index c48a22a38..fb65f7190 100644 --- a/packages/rootage/components/snackbar.yaml +++ b/packages/rootage/components/snackbar.yaml @@ -13,7 +13,7 @@ data: offsetDuration: $duration.s4 offsetTimingFunction: $timing-function.easing root: - color: $color.bg.floating-solid + color: $color.bg.neutral-solid cornerRadius: $radius.s2 minHeight: 44px paddingX: $unit.s4 diff --git a/packages/stylesheet/helpBubble.css b/packages/stylesheet/helpBubble.css index 24182128a..e1aa10255 100644 --- a/packages/stylesheet/helpBubble.css +++ b/packages/stylesheet/helpBubble.css @@ -12,7 +12,7 @@ .helpBubble__content { display: flex; flex-direction: column; - background: var(--seed-v3-color-bg-floating-solid); + background: var(--seed-v3-color-bg-neutral-solid); padding-inline: var(--seed-v3-unit-s3); padding-block: var(--seed-v3-unit-s3); border-radius: var(--seed-v3-radius-s3); @@ -22,7 +22,7 @@ display: none !important; } .helpBubble__arrow { - fill: var(--seed-v3-color-bg-floating-solid); + fill: var(--seed-v3-color-bg-neutral-solid); width: 10px; height: 6px; } diff --git a/packages/stylesheet/snackbar.css b/packages/stylesheet/snackbar.css index c25adb70c..b4c6b9c88 100644 --- a/packages/stylesheet/snackbar.css +++ b/packages/stylesheet/snackbar.css @@ -4,7 +4,7 @@ justify-content: space-between; align-items: center; width: 100%; - background: var(--seed-v3-color-bg-floating-solid); + background: var(--seed-v3-color-bg-neutral-solid); border-radius: var(--seed-v3-radius-s2); padding-inline: var(--seed-v3-unit-s4); padding-block: var(--seed-v3-unit-s2_5); diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css index ac8ee72ea..5da9cde00 100644 --- a/packages/stylesheet/token.css +++ b/packages/stylesheet/token.css @@ -92,8 +92,9 @@ --seed-v3-color-palette-gray-500: #d1d3d8; --seed-v3-color-palette-gray-600: #b0b3ba; --seed-v3-color-palette-gray-700: #868b94; - --seed-v3-color-palette-gray-800: #586070; - --seed-v3-color-palette-gray-900: #1a1c20; + --seed-v3-color-palette-gray-800: #555d6d; + --seed-v3-color-palette-gray-900: #2a3038; + --seed-v3-color-palette-gray-1000: #1a1c20; --seed-v3-color-palette-carrot-100: #fff2ec; --seed-v3-color-palette-carrot-200: #ffe8db; --seed-v3-color-palette-carrot-300: #ffd5c0; @@ -160,10 +161,8 @@ --seed-v3-color-palette-purple-900: #50379b; --seed-v3-color-palette-purple-1000: #29175d; --seed-v3-color-palette-static-white-alpha-800: #ffffffcc; - --seed-v3-color-palette-slate-900: #2a3038; - --seed-v3-color-palette-slate-800: #545c6e; --seed-v3-color-palette-static-white-alpha-200: #ffffff33; - --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-900); + --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-1000); --seed-v3-color-fg-neutral-muted: var(--seed-v3-color-palette-gray-800); --seed-v3-color-fg-neutral-subtle: var(--seed-v3-color-palette-gray-700); --seed-v3-color-fg-neutral-inverted: var(--seed-v3-color-palette-gray-00); @@ -195,7 +194,7 @@ --seed-v3-color-bg-layer-default-pressed: var(--seed-v3-color-palette-gray-100); --seed-v3-color-bg-layer-fill: var(--seed-v3-color-palette-gray-100); --seed-v3-color-bg-neutral-weak: var(--seed-v3-color-palette-gray-200); - --seed-v3-color-bg-neutral-inverted: var(--seed-v3-color-palette-slate-900); + --seed-v3-color-bg-neutral-inverted: var(--seed-v3-color-palette-gray-900); --seed-v3-color-bg-neutral-weak-pressed: var(--seed-v3-color-palette-gray-300); --seed-v3-color-bg-informative-weak: var(--seed-v3-color-palette-blue-100); --seed-v3-color-bg-overlay: var(--seed-v3-color-palette-static-black-alpha-500); @@ -216,9 +215,9 @@ --seed-v3-color-bg-magic-solid-pressed: var(--seed-v3-color-palette-purple-800); --seed-v3-color-bg-magic-weak: var(--seed-v3-color-palette-purple-100); --seed-v3-color-bg-magic-weak-pressed: var(--seed-v3-color-palette-purple-200); - --seed-v3-color-bg-neutral-solid-muted: var(--seed-v3-color-palette-slate-800); - --seed-v3-color-bg-floating-solid: var(--seed-v3-color-palette-gray-900); - --seed-v3-color-bg-neutral-solid-muted-pressed: var(--seed-v3-color-palette-slate-900); + --seed-v3-color-bg-neutral-solid-muted: var(--seed-v3-color-palette-gray-800); + --seed-v3-color-bg-neutral-solid: var(--seed-v3-color-palette-gray-1000); + --seed-v3-color-bg-neutral-solid-muted-pressed: var(--seed-v3-color-palette-gray-900); --seed-v3-color-stroke-neutral: var(--seed-v3-color-palette-gray-300); --seed-v3-color-stroke-brand: var(--seed-v3-color-palette-carrot-300); --seed-v3-color-stroke-field: var(--seed-v3-color-palette-gray-400); @@ -243,7 +242,8 @@ --seed-v3-color-palette-gray-600: #868b94; --seed-v3-color-palette-gray-700: #b0b3ba; --seed-v3-color-palette-gray-800: #dcdee3; - --seed-v3-color-palette-gray-900: #f3f4f5; + --seed-v3-color-palette-gray-900: #e9eaec; + --seed-v3-color-palette-gray-1000: #f3f4f5; --seed-v3-color-palette-carrot-100: #31241f; --seed-v3-color-palette-carrot-200: #4b291c; --seed-v3-color-palette-carrot-300: #6b311c; @@ -310,10 +310,8 @@ --seed-v3-color-palette-purple-900: #d9cefa; --seed-v3-color-palette-purple-1000: #f0edfc; --seed-v3-color-palette-static-white-alpha-800: #ffffffcc; - --seed-v3-color-palette-slate-900: #edf2f7; - --seed-v3-color-palette-slate-800: #dde3ed; --seed-v3-color-palette-static-white-alpha-200: #ffffff33; - --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-900); + --seed-v3-color-fg-neutral: var(--seed-v3-color-palette-gray-1000); --seed-v3-color-fg-neutral-muted: var(--seed-v3-color-palette-gray-800); --seed-v3-color-fg-neutral-subtle: var(--seed-v3-color-palette-gray-700); --seed-v3-color-fg-neutral-inverted: var(--seed-v3-color-palette-gray-100); @@ -323,7 +321,7 @@ --seed-v3-color-fg-positive: var(--seed-v3-color-palette-green-700); --seed-v3-color-fg-positive-contrast: var(--seed-v3-color-palette-green-900); --seed-v3-color-fg-warning-contrast: var(--seed-v3-color-palette-yellow-900); - --seed-v3-color-fg-informative: var(--seed-v3-color-palette-blue-800); + --seed-v3-color-fg-informative: var(--seed-v3-color-palette-blue-700); --seed-v3-color-fg-informative-contrast: var(--seed-v3-color-palette-blue-900); --seed-v3-color-fg-placeholder: var(--seed-v3-color-palette-gray-600); --seed-v3-color-fg-disabled: var(--seed-v3-color-palette-gray-500); @@ -345,7 +343,7 @@ --seed-v3-color-bg-layer-default-pressed: var(--seed-v3-color-palette-gray-200); --seed-v3-color-bg-layer-fill: var(--seed-v3-color-palette-gray-100); --seed-v3-color-bg-neutral-weak: var(--seed-v3-color-palette-gray-300); - --seed-v3-color-bg-neutral-inverted: var(--seed-v3-color-palette-gray-900); + --seed-v3-color-bg-neutral-inverted: var(--seed-v3-color-palette-gray-1000); --seed-v3-color-bg-neutral-weak-pressed: var(--seed-v3-color-palette-gray-400); --seed-v3-color-bg-informative-weak: var(--seed-v3-color-palette-blue-100); --seed-v3-color-bg-overlay: var(--seed-v3-color-palette-static-black-alpha-500); @@ -367,7 +365,7 @@ --seed-v3-color-bg-magic-weak: var(--seed-v3-color-palette-purple-100); --seed-v3-color-bg-magic-weak-pressed: var(--seed-v3-color-palette-purple-200); --seed-v3-color-bg-neutral-solid-muted: var(--seed-v3-color-palette-gray-400); - --seed-v3-color-bg-floating-solid: var(--seed-v3-color-palette-gray-300); + --seed-v3-color-bg-neutral-solid: var(--seed-v3-color-palette-gray-300); --seed-v3-color-bg-neutral-solid-muted-pressed: var(--seed-v3-color-palette-gray-500); --seed-v3-color-stroke-neutral: var(--seed-v3-color-palette-gray-300); --seed-v3-color-stroke-brand: var(--seed-v3-color-palette-carrot-300); diff --git a/packages/vars/lib/color/bg.d.ts b/packages/vars/lib/color/bg.d.ts index 0efd34adb..c17b26fe3 100644 --- a/packages/vars/lib/color/bg.d.ts +++ b/packages/vars/lib/color/bg.d.ts @@ -35,5 +35,5 @@ export declare const magicSolidPressed = "var(--seed-v3-color-bg-magic-solid-pre export declare const magicWeak = "var(--seed-v3-color-bg-magic-weak)"; export declare const magicWeakPressed = "var(--seed-v3-color-bg-magic-weak-pressed)"; export declare const neutralSolidMuted = "var(--seed-v3-color-bg-neutral-solid-muted)"; -export declare const floatingSolid = "var(--seed-v3-color-bg-floating-solid)"; +export declare const neutralSolid = "var(--seed-v3-color-bg-neutral-solid)"; export declare const neutralSolidMutedPressed = "var(--seed-v3-color-bg-neutral-solid-muted-pressed)"; \ No newline at end of file diff --git a/packages/vars/lib/color/bg.mjs b/packages/vars/lib/color/bg.mjs index 2b7f598a1..8dc6d631b 100644 --- a/packages/vars/lib/color/bg.mjs +++ b/packages/vars/lib/color/bg.mjs @@ -35,5 +35,5 @@ export const magicSolidPressed = "var(--seed-v3-color-bg-magic-solid-pressed)"; export const magicWeak = "var(--seed-v3-color-bg-magic-weak)"; export const magicWeakPressed = "var(--seed-v3-color-bg-magic-weak-pressed)"; export const neutralSolidMuted = "var(--seed-v3-color-bg-neutral-solid-muted)"; -export const floatingSolid = "var(--seed-v3-color-bg-floating-solid)"; +export const neutralSolid = "var(--seed-v3-color-bg-neutral-solid)"; export const neutralSolidMutedPressed = "var(--seed-v3-color-bg-neutral-solid-muted-pressed)"; \ No newline at end of file diff --git a/packages/vars/lib/color/palette.d.ts b/packages/vars/lib/color/palette.d.ts index c4408affe..7ea336469 100644 --- a/packages/vars/lib/color/palette.d.ts +++ b/packages/vars/lib/color/palette.d.ts @@ -8,6 +8,7 @@ export declare const gray600 = "var(--seed-v3-color-palette-gray-600)"; export declare const gray700 = "var(--seed-v3-color-palette-gray-700)"; export declare const gray800 = "var(--seed-v3-color-palette-gray-800)"; export declare const gray900 = "var(--seed-v3-color-palette-gray-900)"; +export declare const gray1000 = "var(--seed-v3-color-palette-gray-1000)"; export declare const carrot100 = "var(--seed-v3-color-palette-carrot-100)"; export declare const carrot200 = "var(--seed-v3-color-palette-carrot-200)"; export declare const carrot300 = "var(--seed-v3-color-palette-carrot-300)"; @@ -74,6 +75,4 @@ export declare const purple800 = "var(--seed-v3-color-palette-purple-800)"; export declare const purple900 = "var(--seed-v3-color-palette-purple-900)"; export declare const purple1000 = "var(--seed-v3-color-palette-purple-1000)"; export declare const staticWhiteAlpha800 = "var(--seed-v3-color-palette-static-white-alpha-800)"; -export declare const slate900 = "var(--seed-v3-color-palette-slate-900)"; -export declare const slate800 = "var(--seed-v3-color-palette-slate-800)"; export declare const staticWhiteAlpha200 = "var(--seed-v3-color-palette-static-white-alpha-200)"; \ No newline at end of file diff --git a/packages/vars/lib/color/palette.mjs b/packages/vars/lib/color/palette.mjs index e6c6fb310..ecd5d4015 100644 --- a/packages/vars/lib/color/palette.mjs +++ b/packages/vars/lib/color/palette.mjs @@ -8,6 +8,7 @@ export const gray600 = "var(--seed-v3-color-palette-gray-600)"; export const gray700 = "var(--seed-v3-color-palette-gray-700)"; export const gray800 = "var(--seed-v3-color-palette-gray-800)"; export const gray900 = "var(--seed-v3-color-palette-gray-900)"; +export const gray1000 = "var(--seed-v3-color-palette-gray-1000)"; export const carrot100 = "var(--seed-v3-color-palette-carrot-100)"; export const carrot200 = "var(--seed-v3-color-palette-carrot-200)"; export const carrot300 = "var(--seed-v3-color-palette-carrot-300)"; @@ -74,6 +75,4 @@ export const purple800 = "var(--seed-v3-color-palette-purple-800)"; export const purple900 = "var(--seed-v3-color-palette-purple-900)"; export const purple1000 = "var(--seed-v3-color-palette-purple-1000)"; export const staticWhiteAlpha800 = "var(--seed-v3-color-palette-static-white-alpha-800)"; -export const slate900 = "var(--seed-v3-color-palette-slate-900)"; -export const slate800 = "var(--seed-v3-color-palette-slate-800)"; export const staticWhiteAlpha200 = "var(--seed-v3-color-palette-static-white-alpha-200)"; \ No newline at end of file diff --git a/packages/vars/lib/component/help-bubble.d.ts b/packages/vars/lib/component/help-bubble.d.ts index 56e4eb462..1660f7670 100644 --- a/packages/vars/lib/component/help-bubble.d.ts +++ b/packages/vars/lib/component/help-bubble.d.ts @@ -2,13 +2,13 @@ export declare const vars: { "base": { "enabled": { "root": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s3)", "paddingX": "var(--seed-v3-unit-s3)", "paddingY": "var(--seed-v3-unit-s3)" }, "arrow": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "size": "var(--seed-v3-unit-s2_5)" }, "title": { diff --git a/packages/vars/lib/component/help-bubble.mjs b/packages/vars/lib/component/help-bubble.mjs index e2d248806..8666fac76 100644 --- a/packages/vars/lib/component/help-bubble.mjs +++ b/packages/vars/lib/component/help-bubble.mjs @@ -2,13 +2,13 @@ export const vars = { "base": { "enabled": { "root": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s3)", "paddingX": "var(--seed-v3-unit-s3)", "paddingY": "var(--seed-v3-unit-s3)" }, "arrow": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "size": "var(--seed-v3-unit-s2_5)" }, "title": { diff --git a/packages/vars/lib/component/snackbar.d.ts b/packages/vars/lib/component/snackbar.d.ts index af02158bc..c643747b8 100644 --- a/packages/vars/lib/component/snackbar.d.ts +++ b/packages/vars/lib/component/snackbar.d.ts @@ -8,7 +8,7 @@ export declare const vars: { "offsetTimingFunction": "var(--seed-v3-timing-function-easing)" }, "root": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s2)", "minHeight": "44px", "paddingX": "var(--seed-v3-unit-s4)", diff --git a/packages/vars/lib/component/snackbar.mjs b/packages/vars/lib/component/snackbar.mjs index 265d53da7..4e0118c4a 100644 --- a/packages/vars/lib/component/snackbar.mjs +++ b/packages/vars/lib/component/snackbar.mjs @@ -8,7 +8,7 @@ export const vars = { "offsetTimingFunction": "var(--seed-v3-timing-function-easing)" }, "root": { - "color": "var(--seed-v3-color-bg-floating-solid)", + "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s2)", "minHeight": "44px", "paddingX": "var(--seed-v3-unit-s4)",