feat: update color token naming

daangn · Jan 13, 2025 · 87d240e · 87d240e
1 parent e3d4745
commit 87d240e
Show file tree

Hide file tree

Showing 27 changed files with 64 additions and 114 deletions.
diff --git a/docs/public/rootage/color.json b/docs/public/rootage/color.json
@@ -673,7 +673,7 @@
           "theme-dark": "$color.palette.gray-300"
         }
       },
-      "$color.bg.neutral-solid": {
+      "$color.bg.neutral-inverted": {
         "values": {
           "theme-light": "$color.palette.slate-900",
           "theme-dark": "$color.palette.gray-900"
@@ -703,12 +703,6 @@
           "theme-dark": "$color.palette.static-black-alpha-200"
         }
       },
-      "$color.bg.text-selection": {
-        "values": {
-          "theme-light": "$color.palette.carrot-100",
-          "theme-dark": "$color.palette.carrot-100"
-        }
-      },
       "$color.bg.layer-basement": {
         "values": {
           "theme-light": "$color.palette.gray-200",
@@ -721,7 +715,7 @@
           "theme-dark": "$color.palette.gray-100"
         }
       },
-      "$color.bg.neutral-solid-pressed": {
+      "$color.bg.neutral-inverted-pressed": {
         "values": {
           "theme-light": "$color.palette.gray-800",
           "theme-dark": "$color.palette.gray-800"

diff --git a/docs/public/rootage/components/action-button.json b/docs/public/rootage/components/action-button.json
@@ -69,7 +69,7 @@
     "variant=neutral solid": {
       "enabled": {
         "root": {
-          "color": "$color.bg.neutral-solid"
+          "color": "$color.bg.neutral-inverted"
         },
         "label": {
           "color": "$color.fg.neutral-inverted"
@@ -90,7 +90,7 @@
       },
       "pressed": {
         "root": {
-          "color": "$color.bg.neutral-solid-pressed"
+          "color": "$color.bg.neutral-inverted-pressed"
         }
       },
       "disabled": {
@@ -112,7 +112,7 @@
       },
       "loading": {
         "root": {
-          "color": "$color.bg.neutral-solid-pressed"
+          "color": "$color.bg.neutral-inverted-pressed"
         }
       }
     },

diff --git a/docs/public/rootage/components/badge.json b/docs/public/rootage/components/badge.json
@@ -89,7 +89,7 @@
     "tone=neutral, variant=solid": {
       "enabled": {
         "root": {
-          "color": "$color.bg.neutral-solid"
+          "color": "$color.bg.neutral-inverted"
         },
         "label": {
           "color": "$color.fg.neutral-inverted"

diff --git a/docs/public/rootage/components/chip-tab.json b/docs/public/rootage/components/chip-tab.json
@@ -33,15 +33,15 @@
       },
       "selected": {
         "root": {
-          "color": "$color.bg.neutral-solid"
+          "color": "$color.bg.neutral-inverted"
         },
         "label": {
           "color": "$color.fg.neutral-inverted"
         }
       },
       "selected,pressed": {
         "root": {
-          "color": "$color.bg.neutral-solid-pressed"
+          "color": "$color.bg.neutral-inverted-pressed"
         }
       },
       "disabled": {

diff --git a/docs/public/rootage/components/extended-fab.json b/docs/public/rootage/components/extended-fab.json
@@ -27,7 +27,7 @@
     "variant=neutral solid": {
       "enabled": {
         "root": {
-          "color": "$color.bg.neutral-solid"
+          "color": "$color.bg.neutral-inverted"
         },
         "label": {
           "color": "$color.fg.neutral-inverted"
@@ -38,7 +38,7 @@
       },
       "pressed": {
         "root": {
-          "color": "$color.bg.neutral-solid-pressed"
+          "color": "$color.bg.neutral-inverted-pressed"
         }
       }
     },

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -3276,7 +3276,7 @@
           "color",
           "bg"
         ],
-        "key": "neutral-solid"
+        "key": "neutral-inverted"
       },
       "values": [
         {
@@ -3443,41 +3443,6 @@
         }
       ]
     },
-    {
-      "collection": "color",
-      "token": {
-        "type": "token",
-        "group": [
-          "color",
-          "bg"
-        ],
-        "key": "text-selection"
-      },
-      "values": [
-        {
-          "mode": "theme-light",
-          "value": {
-            "type": "token",
-            "group": [
-              "color",
-              "palette"
-            ],
-            "key": "carrot-100"
-          }
-        },
-        {
-          "mode": "theme-dark",
-          "value": {
-            "type": "token",
-            "group": [
-              "color",
-              "palette"
-            ],
-            "key": "carrot-100"
-          }
-        }
-      ]
-    },
     {
       "collection": "color",
       "token": {
@@ -3556,7 +3521,7 @@
           "color",
           "bg"
         ],
-        "key": "neutral-solid-pressed"
+        "key": "neutral-inverted-pressed"
       },
       "values": [
         {
@@ -6239,7 +6204,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid"
+                        "key": "neutral-inverted"
                       }
                     }
                   ]
@@ -6353,7 +6318,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid-pressed"
+                        "key": "neutral-inverted-pressed"
                       }
                     }
                   ]
@@ -6463,7 +6428,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid-pressed"
+                        "key": "neutral-inverted-pressed"
                       }
                     }
                   ]
@@ -10645,7 +10610,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid"
+                        "key": "neutral-inverted"
                       }
                     }
                   ]
@@ -13576,7 +13541,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid"
+                        "key": "neutral-inverted"
                       }
                     }
                   ]
@@ -13616,7 +13581,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid-pressed"
+                        "key": "neutral-inverted-pressed"
                       }
                     }
                   ]
@@ -15207,7 +15172,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid"
+                        "key": "neutral-inverted"
                       }
                     }
                   ]
@@ -15262,7 +15227,7 @@
                           "color",
                           "bg"
                         ],
-                        "key": "neutral-solid-pressed"
+                        "key": "neutral-inverted-pressed"
                       }
                     }
                   ]

diff --git a/packages/rootage/color.yaml b/packages/rootage/color.yaml
@@ -449,7 +449,7 @@ data:
       values:
         theme-light: $color.palette.gray-200
         theme-dark: $color.palette.gray-300
-    $color.bg.neutral-solid:
+    $color.bg.neutral-inverted:
       values:
         theme-light: $color.palette.slate-900
         theme-dark: $color.palette.gray-900
@@ -469,10 +469,6 @@ data:
       values:
         theme-light: $color.palette.static-black-alpha-200
         theme-dark: $color.palette.static-black-alpha-200
-    $color.bg.text-selection:
-      values:
-        theme-light: $color.palette.carrot-100
-        theme-dark: $color.palette.carrot-100
     $color.bg.layer-basement:
       values:
         theme-light: $color.palette.gray-200
@@ -481,7 +477,7 @@ data:
       values:
         theme-light: $color.palette.gray-00
         theme-dark: $color.palette.gray-100
-    $color.bg.neutral-solid-pressed:
+    $color.bg.neutral-inverted-pressed:
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800

diff --git a/packages/rootage/components/action-button.yaml b/packages/rootage/components/action-button.yaml
@@ -46,7 +46,7 @@ data:
   variant=neutral solid:
     enabled:
       root:
-        color: $color.bg.neutral-solid
+        color: $color.bg.neutral-inverted
       label:
         color: $color.fg.neutral-inverted
       icon:
@@ -60,7 +60,7 @@ data:
         rangeColor: $color.palette.static-white
     pressed:
       root:
-        color: $color.bg.neutral-solid-pressed
+        color: $color.bg.neutral-inverted-pressed
     disabled:
       root:
         color: $color.bg.disabled
@@ -74,7 +74,7 @@ data:
         color: $color.fg.disabled
     loading:
       root:
-        color: $color.bg.neutral-solid-pressed
+        color: $color.bg.neutral-inverted-pressed
   variant=neutral weak:
     enabled:
       root:

diff --git a/packages/rootage/components/badge.yaml b/packages/rootage/components/badge.yaml
@@ -57,7 +57,7 @@ data:
   tone=neutral, variant=solid:
     enabled:
       root:
-        color: $color.bg.neutral-solid
+        color: $color.bg.neutral-inverted
       label:
         color: $color.fg.neutral-inverted
   tone=neutral, variant=outlined:

diff --git a/packages/rootage/components/chip-tab.yaml b/packages/rootage/components/chip-tab.yaml
@@ -24,12 +24,12 @@ data:
         color: $color.bg.layer-default-pressed
     selected:
       root:
-        color: $color.bg.neutral-solid
+        color: $color.bg.neutral-inverted
       label:
         color: $color.fg.neutral-inverted
     selected,pressed:
       root:
-        color: $color.bg.neutral-solid-pressed
+        color: $color.bg.neutral-inverted-pressed
     disabled:
       label:
         color: $color.fg.disabled

diff --git a/packages/rootage/components/extended-fab.yaml b/packages/rootage/components/extended-fab.yaml
@@ -19,14 +19,14 @@ data:
   variant=neutral solid:
     enabled:
       root:
-        color: $color.bg.neutral-solid
+        color: $color.bg.neutral-inverted
       label:
         color: $color.fg.neutral-inverted
       prefixIcon:
         color: $color.fg.neutral-inverted
     pressed:
       root:
-        color: $color.bg.neutral-solid-pressed
+        color: $color.bg.neutral-inverted-pressed
   variant=layer floating:
     enabled:
       root:

diff --git a/packages/rootage/components/schema.json b/packages/rootage/components/schema.json
@@ -295,15 +295,14 @@
         { "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-solid", "title": "$color.bg.neutral-solid", "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.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-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`" },
         { "const": "$color.bg.overlay-muted", "title": "$color.bg.overlay-muted", "description": "theme-light: $color.palette.static-black-alpha-200\ntheme-dark: $color.palette.static-black-alpha-200", "markdownDescription": "- theme-light: `$color.palette.static-black-alpha-200`\n\n- theme-dark: `$color.palette.static-black-alpha-200`" },
-        { "const": "$color.bg.text-selection", "title": "$color.bg.text-selection", "description": "theme-light: $color.palette.carrot-100\ntheme-dark: $color.palette.carrot-100", "markdownDescription": "- theme-light: `$color.palette.carrot-100`\n\n- theme-dark: `$color.palette.carrot-100`" },
         { "const": "$color.bg.layer-basement", "title": "$color.bg.layer-basement", "description": "theme-light: $color.palette.gray-200\ntheme-dark: $color.palette.gray-100", "markdownDescription": "- theme-light: `$color.palette.gray-200`\n\n- theme-dark: `$color.palette.gray-100`" },
         { "const": "$color.bg.layer-floating", "title": "$color.bg.layer-floating", "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`" },
-        { "const": "$color.bg.neutral-solid-pressed", "title": "$color.bg.neutral-solid-pressed", "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.bg.neutral-inverted-pressed", "title": "$color.bg.neutral-inverted-pressed", "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.bg.disabled", "title": "$color.bg.disabled", "description": "theme-light: $color.palette.gray-200\ntheme-dark: $color.palette.gray-200", "markdownDescription": "- theme-light: `$color.palette.gray-200`\n\n- theme-dark: `$color.palette.gray-200`" },
         { "const": "$color.bg.layer-floating-pressed", "title": "$color.bg.layer-floating-pressed", "description": "theme-light: $color.palette.gray-100\ntheme-dark: $color.palette.gray-300", "markdownDescription": "- theme-light: `$color.palette.gray-100`\n\n- theme-dark: `$color.palette.gray-300`" },
         { "const": "$color.bg.informative-weak-pressed", "title": "$color.bg.informative-weak-pressed", "description": "theme-light: $color.palette.blue-200\ntheme-dark: $color.palette.blue-200", "markdownDescription": "- theme-light: `$color.palette.blue-200`\n\n- theme-dark: `$color.palette.blue-200`" },

diff --git a/packages/stylesheet/actionButton.css b/packages/stylesheet/actionButton.css
@@ -99,16 +99,16 @@
     --range-color: var(--seed-v3-color-palette-static-white);
 }
 .actionButton__root--variant_neutralSolid {
-    background: var(--seed-v3-color-bg-neutral-solid);
+    background: var(--seed-v3-color-bg-neutral-inverted);
 }
 .actionButton__root--variant_neutralSolid:is(:active, [data-active]) {
-    background: var(--seed-v3-color-bg-neutral-solid-pressed);
+    background: var(--seed-v3-color-bg-neutral-inverted-pressed);
 }
 .actionButton__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-v3-color-bg-disabled);
 }
 .actionButton__root--variant_neutralSolid[data-loading] {
-    background: var(--seed-v3-color-bg-neutral-solid-pressed);
+    background: var(--seed-v3-color-bg-neutral-inverted-pressed);
 }
 .actionButton__label--variant_neutralSolid {
     color: var(--seed-v3-color-fg-neutral-inverted);

diff --git a/packages/stylesheet/badge.css b/packages/stylesheet/badge.css
@@ -56,7 +56,7 @@
     color: var(--seed-v3-color-fg-neutral)
 }
 .badge__root--tone_neutral-variant_solid {
-    background-color: var(--seed-v3-color-bg-neutral-solid)
+    background-color: var(--seed-v3-color-bg-neutral-inverted)
 }
 .badge__label--tone_neutral-variant_solid {
     color: var(--seed-v3-color-fg-neutral-inverted)

diff --git a/packages/stylesheet/chipTab.css b/packages/stylesheet/chipTab.css
@@ -15,13 +15,13 @@
     font-weight: var(--seed-v3-font-weight-bold);
 }
 .chipTab__root--variant_neutralSolid:is(:selected, [data-selected]) {
-    background-color: var(--seed-v3-color-bg-neutral-solid);
+    background-color: var(--seed-v3-color-bg-neutral-inverted);
 }
 .chipTab__root--variant_neutralSolid:is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-layer-default-pressed);
 }
 .chipTab__root--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
-    background-color: var(--seed-v3-color-bg-neutral-solid-pressed);
+    background-color: var(--seed-v3-color-bg-neutral-inverted-pressed);
 }
 .chipTab__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;