feat(Color picker)!: Delete label tokens. (#458)

* feat!(Color picker): Delete unused label tokens. BREAKING CHANGE: form.color.colorpicker.[hue].label removed for all hues. * feat(data): XXXL padding option needed for right margin on chat bubbles * feat(chatbubble)!: removing chat bubble spacing tokens as they are no longer needed. Tile component tokens are what we will use for chat bubble. * feat(modes): adding important status color of purple to dark and light mode. * feat(tile): adding status border colors. * updating description in status width borders * removing redundant green primitive token --------- Co-authored-by: Luke Emmerson-Finch <[email protected]>
Sage · Mar 6, 2025 · d47f578 · d47f578
1 parent c8f88d3
commit d47f578
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 188 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json
@@ -362,6 +362,36 @@
           "$type": "color",
           "$value": "{modes.color.generic.content.harsh}",
           "$description": "for headings, paragraph text etc "
+        },
+        "statusborder": {
+          "bg-ai": {
+            "$type": "color",
+            "$value": "{container.color.AI.bordervertical}"
+          },
+          "bg-caution": {
+            "$type": "color",
+            "$value": "{modes.color.status.caution.default}"
+          },
+          "bg-negative": {
+            "$type": "color",
+            "$value": "{modes.color.status.negative.default}"
+          },
+          "bg-important": {
+            "$type": "color",
+            "$value": "{modes.color.status.important.default}"
+          },
+          "bg-info": {
+            "$type": "color",
+            "$value": "{modes.color.status.info.default}"
+          },
+          "bg-neutral": {
+            "$type": "color",
+            "$value": "{modes.color.status.neutral.default}"
+          },
+          "bg-positive": {
+            "$type": "color",
+            "$value": "{modes.color.status.positive.default}"
+          }
         }
       }
     },
@@ -608,6 +638,13 @@
           }
         }
       },
+      "tile": {
+        "statusborder": {
+          "$type": "sizing",
+          "$value": "{global.size.micro.M}",
+          "$description": "width of left status borders on tiles."
+        }
+      },
       "tileselect": {
         "footer": {
           "$type": "sizing",
@@ -675,10 +712,6 @@
         "$value": "{global.radius.container.L}",
         "$description": "Carousel slides"
       },
-      "chatbubble": {
-        "$type": "borderRadius",
-        "$value": "{global.radius.container.L}"
-      },
       "colorpicker": {
         "$type": "borderRadius",
         "$value": "{global.radius.container.L}",
@@ -783,81 +816,6 @@
           }
         }
       },
-      "chatbubble": {
-        "outer": {
-          "x": {
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.M}",
-              "$description": "Left margin on AI response bubbles and right margin on user prompt bubbles."
-            },
-            "L": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.XL} * 2",
-              "$description": "Right margin on AI response bubbles and left margin on user prompt bubbles."
-            }
-          },
-          "y": {
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.micro.L}",
-              "$description": "Top and bottom margin on all chat bubbles."
-            }
-          },
-          "yg": {
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.micro.S}",
-              "$description": "Gap between timestamp and chat bubble container. Also gap between give feedback button and container."
-            }
-          }
-        },
-        "inner": {
-          "x": {
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.XS}",
-              "$description": "Left and right padding inside chat bubbles."
-            }
-          },
-          "xg": {
-            "S": {
-              "$type": "spacing",
-              "$value": "{global.space.micro.L}"
-            },
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.XS}"
-            }
-          },
-          "Y": {
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.XS}",
-              "$description": "Top and bottom padding inside chat bubbles."
-            }
-          },
-          "yg": {
-            "XS": {
-              "$type": "spacing",
-              "$value": "{global.space.micro.S}"
-            },
-            "S": {
-              "$type": "spacing",
-              "$value": "{global.space.micro.L}"
-            },
-            "M": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.XS}"
-            },
-            "L": {
-              "$type": "spacing",
-              "$value": "{global.space.macro.M}",
-              "$description": "Vertical gap between inner blocks within a chat or insight bubble."
-            }
-          }
-        }
-      },
       "filepreview": {
         "preview": {
           "x": {
@@ -1353,6 +1311,11 @@
             "$type": "spacing",
             "$value": "{global.space.macro.L}",
             "$description": "Right left padding on Tile or Card."
+          },
+          "XXXL": {
+            "$type": "spacing",
+            "$value": "{global.space.macro.XL} * 2",
+            "$description": "Right margin on AI response bubbles and left margin on user prompt bubbles."
           }
         },
         "xg": {
@@ -1665,20 +1628,6 @@
           "$description": "Accordion subtle (content vertical line)"
         }
       },
-      "chatbubble": {
-        "default": {
-          "$type": "borderWidth",
-          "$value": "{global.borderwidth.XS}"
-        },
-        "error": {
-          "$type": "borderWidth",
-          "$value": "{global.borderwidth.S}"
-        },
-        "success": {
-          "$type": "borderWidth",
-          "$value": "{global.borderwidth.S}"
-        }
-      },
       "filepreview": {
         "container": {
           "$type": "borderWidth",

diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json
@@ -1199,11 +1199,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.blue.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.blue.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "teal": {
@@ -1222,11 +1217,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.teal.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.teal.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "green": {
@@ -1245,11 +1235,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.green.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.green.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "lime": {
@@ -1268,11 +1253,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.lime.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.lime.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "orange": {
@@ -1291,11 +1271,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.orange.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.orange.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "red": {
@@ -1314,11 +1289,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.red.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.red.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "pink": {
@@ -1337,11 +1307,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.pink.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.pink.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "purple": {
@@ -1360,11 +1325,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.purple.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.purple.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "gray": {
@@ -1383,11 +1343,6 @@
           "pattern": {
             "$type": "color",
             "$value": "{modes.color.colorcode.gray.deep}"
-          },
-          "label-default": {
-            "$type": "color",
-            "$value": "{modes.color.colorcode.gray.deep}",
-            "$description": "At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default."
           }
         },
         "slate": {

diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json
@@ -1400,6 +1400,13 @@
             "$value": "{primitives.colors.blush}"
           }
         },
+        "important": {
+          "default": {
+            "$type": "color",
+            "$value": "{primitives.colors.supplementary.purple.500}",
+            "$description": "For tile status keylines to show if something is of high importance."
+          }
+        },
         "neutral": {
           "default": {
             "$type": "color",

diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json
@@ -1418,6 +1418,13 @@
             }
           }
         },
+        "important": {
+          "default": {
+            "$type": "color",
+            "$value": "{primitives.colors.supplementary.purple.400}",
+            "$description": "For tile status keylines to show if something is of high importance."
+          }
+        },
         "negative": {
           "default": {
             "$type": "color",

diff --git a/data/tokens/primitives.json b/data/tokens/primitives.json
@@ -31,11 +31,6 @@
         "$value": "#008046",
         "$description": "Legacy green used on old product theme"
       },
-      "green": {
-        "$type": "color",
-        "$value": "#8b00f9",
-        "$description": "Base status color for light surface. AAA text on white. Color taken from brand portal."
-      },
       "verdant": {
         "$type": "color",
         "$value": "#009023",