feat(status): Swap values of mode status default and alt colors. Add …

…status icon color to contextual tokens.
Sage · Jan 2, 2025 · cf4673c · cf4673c
1 parent 689694d
commit cf4673c
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 93 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -286,8 +286,6 @@
       "modes.color.status.ai.default": "ceaacdb03620c4e36b8146280d3184eb8bbff8d2",
       "modes.color.status.ai.defaultAlt": "b00eaa03c3766fa865821a37034c3e440107daf6",
       "modes.color.status.generic.default": "55559de090799ef8c45e1cffc77e010c95a5c755",
-      "modes.color.status.caution.alt": "2f58e9421cb62473cb47df0472346c7a274b9395",
-      "modes.color.status.caution.default": "03afead0cd6f3af10ceb3699536600dfee498da5",
       "modes.color.status.caution.defaultAlt": "f73fb33a2139620189cd6301e0fc7602e082ab42",
       "modes.color.status.caution.hover": "69180cc0a150d04b5d781b749577af19573a4dfa",
       "modes.color.status.caution.hoverAlt": "82c666d189c52b4c61c46462e762911c256dd819",
@@ -299,27 +297,19 @@
       "modes.color.status.content.withHoverAlt": "550d772ea9b89e5de0759850f9af62ddd7a117a4",
       "modes.color.status.inactive.default": "fef0c621f6786f4ec59e81b17432a0cdc9d618e1",
       "modes.color.status.inactive.withDefault": "7d45cb6d75f36c5fe8b6f01966d83c557f61abf3",
-      "modes.color.status.info.default": "e0c361a99771ec7b9c9f54c254c570eea83b4466",
-      "modes.color.status.info.alt": "41897d3a66433a70a063ba116a4944b561fd6581",
       "modes.color.status.info.defaultAlt": "73134791411d491e0608c01cae6764b18e91b67e",
       "modes.color.status.info.hover": "36a0b805f5431402dbc381a5eae064145d024102",
       "modes.color.status.info.hoverAlt": "9c6be1b11d03c97d0447229bb0c1e201dbcabc75",
       "modes.color.status.info.frozen.default": "8016081e6bd71419a5447a38dd1ea4d68283d4a5",
-      "modes.color.status.negative.default": "a8616fc8aff54b36ed861ae9118b44d66e754393",
-      "modes.color.status.negative.alt": "1844cf4a9a22afda608d3079098825a566cccc06",
       "modes.color.status.negative.defaultAlt": "46edd7804a2955aeee2f8bbcc24b034ac67b1946",
       "modes.color.status.negative.hover": "54db080afc61d960e4f6ad7f4d1dc5b370413266",
       "modes.color.status.negative.hoverAlt": "99ace35cdeb1bc8ff9c6a70d0addd9e12dd65ef4",
       "modes.color.status.negative.text": "c713aa2c5d7e60ab281e78fa2c3c34932f5dac8d",
-      "modes.color.status.neutral.alt": "4593accf1d91977a2786fa18ff7fdb08742afdb9",
-      "modes.color.status.neutral.default": "d060cb951a6c9985cc11545706c29a167c81f537",
       "modes.color.status.neutral.defaultAlt": "11ba69ae67ca72528dcb8f4b2309b64017e9fad0",
       "modes.color.status.neutral.hover": "75430d96876853c9540f0996eeae1f68068eb207",
       "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8",
       "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc",
       "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e",
-      "modes.color.status.positive.alt": "cda3cbff1550a8ef9b0f7fd07d9b6caf87fb0bc5",
-      "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570",
       "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
       "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
       "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23",
@@ -330,7 +320,17 @@
       "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.caution.alt": "03afead0cd6f3af10ceb3699536600dfee498da5",
+      "modes.color.status.info.alt": "e0c361a99771ec7b9c9f54c254c570eea83b4466",
+      "modes.color.status.negative.alt": "a8616fc8aff54b36ed861ae9118b44d66e754393",
+      "modes.color.status.neutral.alt": "d060cb951a6c9985cc11545706c29a167c81f537",
+      "modes.color.status.positive.alt": "33e57e77e60a7e032ba802856a3ca66896675570",
+      "modes.color.status.caution.default": "2f58e9421cb62473cb47df0472346c7a274b9395",
+      "modes.color.status.info.default": "41897d3a66433a70a063ba116a4944b561fd6581",
+      "modes.color.status.negative.default": "1844cf4a9a22afda608d3079098825a566cccc06",
+      "modes.color.status.neutral.default": "4593accf1d91977a2786fa18ff7fdb08742afdb9",
+      "modes.color.status.positive.default": "cda3cbff1550a8ef9b0f7fd07d9b6caf87fb0bc5"
     },
     "group": "Mode"
   },
@@ -458,8 +458,6 @@
       "modes.color.status.ai.default": "ceaacdb03620c4e36b8146280d3184eb8bbff8d2",
       "modes.color.status.ai.defaultAlt": "b00eaa03c3766fa865821a37034c3e440107daf6",
       "modes.color.status.generic.default": "55559de090799ef8c45e1cffc77e010c95a5c755",
-      "modes.color.status.caution.alt": "2f58e9421cb62473cb47df0472346c7a274b9395",
-      "modes.color.status.caution.default": "03afead0cd6f3af10ceb3699536600dfee498da5",
       "modes.color.status.caution.defaultAlt": "f73fb33a2139620189cd6301e0fc7602e082ab42",
       "modes.color.status.caution.hover": "69180cc0a150d04b5d781b749577af19573a4dfa",
       "modes.color.status.caution.hoverAlt": "82c666d189c52b4c61c46462e762911c256dd819",
@@ -471,27 +469,19 @@
       "modes.color.status.content.withHoverAlt": "550d772ea9b89e5de0759850f9af62ddd7a117a4",
       "modes.color.status.inactive.default": "fef0c621f6786f4ec59e81b17432a0cdc9d618e1",
       "modes.color.status.inactive.withDefault": "7d45cb6d75f36c5fe8b6f01966d83c557f61abf3",
-      "modes.color.status.info.alt": "41897d3a66433a70a063ba116a4944b561fd6581",
-      "modes.color.status.info.default": "e0c361a99771ec7b9c9f54c254c570eea83b4466",
       "modes.color.status.info.defaultAlt": "73134791411d491e0608c01cae6764b18e91b67e",
       "modes.color.status.info.hover": "36a0b805f5431402dbc381a5eae064145d024102",
       "modes.color.status.info.hoverAlt": "9c6be1b11d03c97d0447229bb0c1e201dbcabc75",
       "modes.color.status.info.frozen.default": "8016081e6bd71419a5447a38dd1ea4d68283d4a5",
-      "modes.color.status.negative.alt": "1844cf4a9a22afda608d3079098825a566cccc06",
-      "modes.color.status.negative.default": "a8616fc8aff54b36ed861ae9118b44d66e754393",
       "modes.color.status.negative.defaultAlt": "46edd7804a2955aeee2f8bbcc24b034ac67b1946",
       "modes.color.status.negative.hover": "54db080afc61d960e4f6ad7f4d1dc5b370413266",
       "modes.color.status.negative.hoverAlt": "99ace35cdeb1bc8ff9c6a70d0addd9e12dd65ef4",
       "modes.color.status.negative.text": "c713aa2c5d7e60ab281e78fa2c3c34932f5dac8d",
-      "modes.color.status.neutral.alt": "4593accf1d91977a2786fa18ff7fdb08742afdb9",
-      "modes.color.status.neutral.default": "d060cb951a6c9985cc11545706c29a167c81f537",
       "modes.color.status.neutral.defaultAlt": "11ba69ae67ca72528dcb8f4b2309b64017e9fad0",
       "modes.color.status.neutral.hover": "75430d96876853c9540f0996eeae1f68068eb207",
       "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8",
       "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc",
       "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e",
-      "modes.color.status.positive.alt": "cda3cbff1550a8ef9b0f7fd07d9b6caf87fb0bc5",
-      "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570",
       "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f",
       "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b",
       "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23",
@@ -502,7 +492,17 @@
       "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.caution.alt": "03afead0cd6f3af10ceb3699536600dfee498da5",
+      "modes.color.status.info.alt": "e0c361a99771ec7b9c9f54c254c570eea83b4466",
+      "modes.color.status.negative.alt": "a8616fc8aff54b36ed861ae9118b44d66e754393",
+      "modes.color.status.neutral.alt": "d060cb951a6c9985cc11545706c29a167c81f537",
+      "modes.color.status.positive.alt": "33e57e77e60a7e032ba802856a3ca66896675570",
+      "modes.color.status.caution.default": "2f58e9421cb62473cb47df0472346c7a274b9395",
+      "modes.color.status.info.default": "41897d3a66433a70a063ba116a4944b561fd6581",
+      "modes.color.status.negative.default": "1844cf4a9a22afda608d3079098825a566cccc06",
+      "modes.color.status.neutral.default": "4593accf1d91977a2786fa18ff7fdb08742afdb9",
+      "modes.color.status.positive.default": "cda3cbff1550a8ef9b0f7fd07d9b6caf87fb0bc5"
     },
     "group": "Mode"
   },

diff --git a/data/tokens/components/badge.json b/data/tokens/components/badge.json
@@ -7,7 +7,7 @@
           "type": "color"
         },
         "bg-default": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "label-default": {

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

diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json
@@ -1345,16 +1345,16 @@
       },
       "validation": {
         "border-error": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "bar-error": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color",
           "description": "error bar to left of inputs"
         },
         "bar-warning": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color",
           "description": "warning bar to left of inputs"
         },
@@ -1363,7 +1363,7 @@
           "type": "color"
         },
         "label-success": {
-          "value": "{modes.color.status.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "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.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color",
           "description": "filled"
         },

diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json
@@ -170,27 +170,27 @@
         "description": "For progress ring in ai buttons"
       },
       "fg-alt": {
-        "value": "{modes.color.status.positive.default}",
+        "value": "{modes.color.status.positive.alt}",
         "type": "color"
       },
       "fg-alt2": {
         "value": "{modes.color.generic.content.firm}",
         "type": "color"
       },
       "fg-caution": {
-        "value": "{modes.color.status.caution.default}",
+        "value": "{modes.color.status.caution.alt}",
         "type": "color"
       },
       "fg-default": {
         "value": "{modes.color.interactive.monochrome.generic.active}",
         "type": "color"
       },
       "fg-error": {
-        "value": "{modes.color.status.negative.default}",
+        "value": "{modes.color.status.negative.alt}",
         "type": "color"
       },
       "fg-info": {
-        "value": "{modes.color.status.info.default}",
+        "value": "{modes.color.status.info.alt}",
         "type": "color"
       },
       "label-alt": {
@@ -228,11 +228,11 @@
           "description": "used on inverse loading spinner"
         },
         "fg-error": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "fg-complete": {
-          "value": "{modes.color.status.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         }
       },
@@ -242,7 +242,7 @@
           "type": "color"
         },
         "bg-complete": {
-          "value": "{modes.color.status.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         },
         "bg-default": {
@@ -276,7 +276,7 @@
           "type": "color"
         },
         "bg-complete": {
-          "value": "{modes.color.status.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         },
         "border-active-outer": {
@@ -288,7 +288,7 @@
           "type": "color"
         },
         "border-success": {
-          "value": "{modes.color.status.positive.default}",
+          "value": "{modes.color.status.positive.alt}",
           "type": "color"
         },
         "label-active": {

diff --git a/data/tokens/components/status.json b/data/tokens/components/status.json
@@ -85,7 +85,7 @@
       },
       "error": {
         "bg-default": {
-          "value": "{modes.color.status.negative.alt}",
+          "value": "{modes.color.status.negative.default}",
           "type": "color"
         },
         "bgAlt": {
@@ -102,13 +102,18 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.negative.alt}",
+          "value": "{modes.color.status.negative.default}",
           "type": "color"
+        },
+        "icon": {
+          "value": "{modes.color.status.negative.alt}",
+          "type": "color",
+          "description": "Icon on tinted bgs"
         }
       },
       "info": {
         "bg-default": {
-          "value": "{modes.color.status.info.alt}",
+          "value": "{modes.color.status.info.default}",
           "type": "color"
         },
         "bgAlt": {
@@ -130,13 +135,18 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.info.alt}",
+          "value": "{modes.color.status.info.default}",
           "type": "color"
+        },
+        "icon": {
+          "value": "{modes.color.status.info.alt}",
+          "type": "color",
+          "description": "Icon on tinted bgs"
         }
       },
       "neutral": {
         "bg-default": {
-          "value": "{modes.color.status.neutral.alt}",
+          "value": "{modes.color.status.neutral.default}",
           "type": "color"
         },
         "bgAlt": {
@@ -153,8 +163,13 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.neutral.alt}",
+          "value": "{modes.color.status.neutral.default}",
           "type": "color"
+        },
+        "icon": {
+          "value": "{modes.color.status.neutral.alt}",
+          "type": "color",
+          "description": "Icon on tinted bgs"
         }
       },
       "rating": {
@@ -177,7 +192,7 @@
       },
       "success": {
         "bg-default": {
-          "value": "{modes.color.status.positive.alt}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
         },
         "bgAlt": {
@@ -194,13 +209,18 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.positive.alt}",
+          "value": "{modes.color.status.positive.default}",
           "type": "color"
+        },
+        "icon": {
+          "value": "{modes.color.status.positive.alt}",
+          "type": "color",
+          "description": "Icon on tinted bgs"
         }
       },
       "warning": {
         "bg-default": {
-          "value": "{modes.color.status.caution.alt}",
+          "value": "{modes.color.status.caution.default}",
           "type": "color"
         },
         "bgAlt": {
@@ -222,8 +242,13 @@
           "type": "color"
         },
         "border-default": {
-          "value": "{modes.color.status.caution.alt}",
+          "value": "{modes.color.status.caution.default}",
           "type": "color"
+        },
+        "icon": {
+          "value": "{modes.color.status.caution.alt}",
+          "type": "color",
+          "description": "Icon on tinted bgs"
         }
       }
     },

diff --git a/data/tokens/components/tab.json b/data/tokens/components/tab.json
@@ -150,19 +150,19 @@
       },
       "validation": {
         "border-warning": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color"
         },
         "border-error": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "icon-error": {
-          "value": "{modes.color.status.negative.default}",
+          "value": "{modes.color.status.negative.alt}",
           "type": "color"
         },
         "icon-warning": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color"
         },
         "label-error": {

diff --git a/data/tokens/context/frozenproduct.json b/data/tokens/context/frozenproduct.json
@@ -143,7 +143,7 @@
     "color": {
       "notification": {
         "bg-default": {
-          "value": "{modes.color.status.caution.default}",
+          "value": "{modes.color.status.caution.alt}",
           "type": "color"
         }
       }