feat(status colors):

1. Add primitives.colors.xxxVibrant.   2. Add modes status.xxx.alt for pills and messages (point to primitives.colors.xxxVibrant). 3. Point modes.color.status.xxx hover to alt. 4. Point modes.color.status xxx.defaultAlt to primitive xxxVibrant. 5. Point status component tokens to new modes.color.status.xxx.alt. 6. Point status.color.label-default to modes.color.interactive.monochrome.generic.default . 7. Point status.color.label-hover to modes.color.status.content.withHoverAlt. 8. Point status.color.xxx.border-default to new modes.color.status.xxx.alt. 9. Point form.color.validation border and bar tokens to new modes.color.status.xxx.alt.
Sage · Dec 16, 2024 · 8e4f043 · 8e4f043
1 parent e3cdde9
commit 8e4f043
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 67 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -23,7 +23,6 @@
       "primitives.colors.brilliantGreen": "5d343447fd57716fb12fa447a89f03f732cc8a88",
       "primitives.colors.frozenJade": "87a7de84ab45496e6cc64ce21ab2766de414b4f8",
       "primitives.colors.emerald": "3ece6b999afc363b080c5b35a68880f039f13558",
-      "primitives.colors.emeraldLight": "9f5fb0629ff82e578756951337b2ccee960a7aef",
       "primitives.colors.green": "ccfabc49d84361f0c1b861032382012684d51d68",
       "primitives.colors.greenBright": "237ad80532906e4bd73759747e1a8208adbfe4cf",
       "primitives.colors.orange": "2989981124bbca5ab8af2c179292375e023ade7d",
@@ -306,18 +305,18 @@
       "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8",
       "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc",
       "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e",
-      "modes.color.status.success.default": "33e57e77e60a7e032ba802856a3ca66896675570",
-      "modes.color.status.success.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
-      "modes.color.status.success.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
-      "modes.color.status.success.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23",
       "modes.color.status.callout.defaultAlt": "71e207d65e4e4b2bc5278901e46fc1f32c75d514",
       "modes.color.status.callout.hoverAlt": "535d142dc19f9fa3ded556e4c9f48a89bc731be0",
       "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3",
       "modes.color.status.reviews.hover": "ba35bfc3dc5cc1e269c6d4840f8d3ba2668872c2",
       "modes.color.status.reviews.frozen.default": "a8b5addf54a20e41a6a8390b224d756e90dbdb4d",
       "modes.color.status.reviews.frozen.hover": "1e0ae01e18e2348df26bea4b5cee1d8d94072de8",
       "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59",
-      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568"
+      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568",
+      "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570",
+      "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
+      "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
+      "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23"
     },
     "group": "Mode"
   },
@@ -471,18 +470,18 @@
       "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8",
       "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc",
       "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e",
-      "modes.color.status.success.default": "33e57e77e60a7e032ba802856a3ca66896675570",
-      "modes.color.status.success.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
-      "modes.color.status.success.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
-      "modes.color.status.success.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23",
       "modes.color.status.callout.defaultAlt": "71e207d65e4e4b2bc5278901e46fc1f32c75d514",
       "modes.color.status.callout.hoverAlt": "535d142dc19f9fa3ded556e4c9f48a89bc731be0",
       "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3",
       "modes.color.status.reviews.hover": "ba35bfc3dc5cc1e269c6d4840f8d3ba2668872c2",
       "modes.color.status.reviews.frozen.default": "a8b5addf54a20e41a6a8390b224d756e90dbdb4d",
       "modes.color.status.reviews.frozen.hover": "1e0ae01e18e2348df26bea4b5cee1d8d94072de8",
       "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59",
-      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568"
+      "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568",
+      "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570",
+      "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
+      "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
+      "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23"
     },
     "group": "Mode"
   },

diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json
@@ -91,7 +91,7 @@
           }
         },
         "bgFooter-activated": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color",
           "description": " "
         },
@@ -100,7 +100,7 @@
           "type": "color"
         },
         "border-activated": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "bgFooter-default": {

diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json
@@ -1363,7 +1363,7 @@
           "type": "color"
         },
         "label-success": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "label-warning": {

diff --git a/data/tokens/components/logo.json b/data/tokens/components/logo.json
@@ -14,7 +14,7 @@
       },
       "trust": {
         "bg-default": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color",
           "description": "filled"
         },

diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json
@@ -170,7 +170,7 @@
         "description": "For progress ring in ai buttons"
       },
       "fg-alt": {
-        "value": "{modes.color.status.success.default}",
+        "value": "{modes.color.status.positive.default}",
         "type": "color"
       },
       "fg-alt2": {
@@ -232,7 +232,7 @@
           "type": "color"
         },
         "fg-complete": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         }
       },
@@ -242,7 +242,7 @@
           "type": "color"
         },
         "bg-complete": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "bg-default": {
@@ -276,7 +276,7 @@
           "type": "color"
         },
         "bg-complete": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "border-active-outer": {
@@ -288,7 +288,7 @@
           "type": "color"
         },
         "border-success": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "label-active": {

diff --git a/data/tokens/components/status.json b/data/tokens/components/status.json
@@ -26,7 +26,7 @@
         "description": "Decorative message icons"
       },
       "label-default": {
-        "value": "{modes.color.interactive.monochrome.generic.withDefault}",
+        "value": "{modes.color.interactive.monochrome.generic.default}",
         "type": "color"
       },
       "label-readonly": {
@@ -35,7 +35,7 @@
         "description": "Pill (all types, readonly, when nested in disabled parent components)"
       },
       "label-hover": {
-        "value": "{modes.color.status.content.withHover}",
+        "value": "{modes.color.status.content.withHoverAlt}",
         "type": "color"
       },
       "labelAlt-default": {
@@ -85,7 +85,7 @@
       },
       "error": {
         "bg-default": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "bgAlt": {
@@ -102,13 +102,13 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         }
       },
       "info": {
         "bg-default": {
-          "value": "{modes.color.status.info.default}",
+          "value": "{modes.color.status.info.alt}",
           "type": "color"
         },
         "bgAlt": {
@@ -130,13 +130,13 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.info.default}",
+          "value": "{modes.color.status.info.alt}",
           "type": "color"
         }
       },
       "neutral": {
         "bg-default": {
-          "value": "{modes.color.status.neutral.default}",
+          "value": "{modes.color.status.neutral.alt}",
           "type": "color"
         },
         "bgAlt": {
@@ -153,7 +153,7 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.neutral.default}",
+          "value": "{modes.color.status.neutral.alt}",
           "type": "color"
         }
       },
@@ -177,30 +177,30 @@
       },
       "success": {
         "bg-default": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         },
         "bgAlt": {
-          "value": "{modes.color.status.success.defaultAlt}",
+          "value": "{modes.color.status.positive.defaultAlt}",
           "type": "color",
           "description": "Subtle message bg"
         },
         "bgAlt-hover": {
-          "value": "{modes.color.status.success.hoverAlt}",
+          "value": "{modes.color.status.positive.hoverAlt}",
           "type": "color"
         },
         "bg-hover": {
-          "value": "{modes.color.status.success.hover}",
+          "value": "{modes.color.status.positive.hover}",
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.success.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         }
       },
       "warning": {
         "bg-default": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color"
         },
         "bgAlt": {
@@ -222,7 +222,7 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color"
         }
       }

diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json
@@ -1273,7 +1273,8 @@
         "neutral": {
           "default": {
             "value": "{primitives.colors.stormBright}",
-            "type": "color"
+            "type": "color",
+            "description": "{primitives.colors.stormBright}"
           },
           "defaultAlt": {
             "value": "{modes.color.modifier.contrastLess}",
@@ -1351,7 +1352,7 @@
             }
           }
         },
-        "success": {
+        "positive": {
           "default": {
             "value": "{primitives.colors.greenBright}",
             "type": "color"
@@ -1372,7 +1373,7 @@
             "description": "Subtle message bg"
           },
           "hover": {
-            "value": "{modes.color.status.success.default}",
+            "value": "{modes.color.status.positive.default}",
             "type": "color",
             "$extensions": {
               "studio.tokens": {
@@ -1387,7 +1388,7 @@
             "description": "used on pill hover states"
           },
           "hoverAlt": {
-            "value": "{modes.color.status.success.defaultAlt}",
+            "value": "{modes.color.status.positive.defaultAlt}",
             "type": "color",
             "$extensions": {
               "studio.tokens": {