feat(data): 1. Change global radius and elevation from active to sour…

…ce. Not sure if this will change any code... 2. Remove border-width from the global.size token set. Not sure if this will change any code... 3. Add global.borderwidth token set. 4. Add borderwidth tokens to container for accordion, button, container, feedback, focus, form, nav, tab, table. 5. Change value of button.color.standard.destructive.primary.label-disabled and button.color.standard.typical.primary.label-disabled to reference base.color.interactive.inactive.standard.contentAlt. 6. Add button.size.split token. 7. Update value of button.color.inverse.typical.secondary.border-active.
Sage · Feb 8, 2024 · 1755d49 · 1755d49
1 parent 3e06c6b
commit 1755d49
Show file tree

Hide file tree

Showing 18 changed files with 444 additions and 134 deletions.
diff --git a/data/tokens/$metadata.json b/data/tokens/$metadata.json
@@ -1,8 +1,9 @@
 {
   "tokenSetOrder": [
     "origin",
+    "global/borderwidth",
     "global/elevation",
-    "global/radius",
+    "global/borderradius",
     "global/size",
     "global/space",
     "global/typography",

diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -388,9 +388,9 @@
       "global/size": "source",
       "global/typography": "enabled",
       "global/space": "source",
-      "global/radius": "enabled",
       "global/elevation": "enabled",
-      "Components/table": "enabled"
+      "Components/table": "enabled",
+      "global/borderradius": "enabled"
     },
     "group": "Product"
   }

diff --git a/data/tokens/Components/badge.json b/data/tokens/Components/badge.json
@@ -53,7 +53,7 @@
     },
     "borderradius": {
       "badge": {
-        "value": "{global.border-radius.circle}",
+        "value": "{global.borderradius.circle}",
         "type": "borderRadius",
         "description": "Badge"
       }

diff --git a/data/tokens/Components/button.json b/data/tokens/Components/button.json
@@ -1,6 +1,11 @@
 {
   "button": {
     "size": {
+      "split": {
+        "value": "{global.size.micro.XXS}",
+        "type": "sizing",
+        "description": "Split button (divider width)"
+      },
       "S": {
         "value": "{global.size.macro.S}",
         "type": "sizing",
@@ -260,7 +265,7 @@
               "type": "color"
             },
             "border-active": {
-              "value": "{base.color.interactive.monochrome.standard.active}",
+              "value": "{base.color.interactive.monochrome.inverse.active}",
               "type": "color"
             },
             "border-disabled": {
@@ -434,7 +439,7 @@
               "description": "If needed the value should be {base.color.interactive.danger.standard.withActive}"
             },
             "label-disabled": {
-              "value": "{base.color.interactive.inactive.standard.content}",
+              "value": "{base.color.interactive.inactive.standard.contentAlt}",
               "type": "color"
             },
             "label-enabled": {
@@ -521,7 +526,7 @@
               "type": "color"
             },
             "label-disabled": {
-              "value": "{base.color.interactive.inactive.standard.content}",
+              "value": "{base.color.interactive.inactive.standard.contentAlt}",
               "type": "color"
             },
             "label-enabled": {
@@ -652,30 +657,52 @@
     },
     "borderradius": {
       "none": {
-        "value": "{global.border-radius.none}",
+        "value": "{global.borderradius.none}",
         "type": "borderRadius",
         "description": "Button bar S, M, L (internal/adjacent corners), Search bar (button left corners)"
       },
       "S": {
-        "value": "{global.border-radius.interactive.L}",
+        "value": "{global.borderradius.interactive.L}",
         "type": "borderRadius",
         "description": "Buttons S (typical and destructive, and inc bar, split and multi), \nButton toggle M (parent container)"
       },
       "M": {
-        "value": "{global.border-radius.interactive.XL}",
+        "value": "{global.borderradius.interactive.XL}",
         "type": "borderRadius",
         "description": "Buttons  M (typical and destructive, and inc bar, split and multi), \nButton toggle L (parent container), Button toggle M (parent container)"
       },
       "L": {
-        "value": "{global.border-radius.interactive.XXL}",
+        "value": "{global.borderradius.interactive.XXL}",
         "type": "borderRadius",
         "description": "Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)"
       },
       "subtle": {
-        "value": "{global.border-radius.interactive.M}",
+        "value": "{global.borderradius.interactive.M}",
         "type": "borderRadius",
         "description": "Buttons subtle"
       }
+    },
+    "borderwidth": {
+      "none": {
+        "value": "{global.borderwidth.none}",
+        "type": "borderWidth",
+        "description": "Override on tertiary buttons within Button-toggle.\n"
+      },
+      "secondary": {
+        "value": "{global.borderwidth.interactive.S}",
+        "type": "borderWidth",
+        "description": "Secondary button.\n"
+      },
+      "tertiary": {
+        "value": "{global.borderwidth.interactive.XS}",
+        "type": "borderWidth",
+        "description": "Tertiary button.\n"
+      },
+      "togglecontainer": {
+        "value": "{global.borderwidth.interactive.XS}",
+        "type": "borderWidth",
+        "description": "Toggle container"
+      }
     }
   }
 }
diff --git a/data/tokens/Components/container.json b/data/tokens/Components/container.json
@@ -284,77 +284,77 @@
     },
     "borderradius": {
       "none": {
-        "value": "{global.border-radius.none}",
+        "value": "{global.borderradius.none}",
         "type": "borderRadius",
         "description": "Card select (inner adjacent corners), Subscription tile footer top corners"
       },
       "carousel": {
-        "value": "{global.border-radius.container.L}",
+        "value": "{global.borderradius.container.L}",
         "type": "borderRadius",
         "description": "Carousel (parent container), "
       },
       "dialog": {
-        "value": "{global.border-radius.container.L}",
+        "value": "{global.borderradius.container.L}",
         "type": "borderRadius",
         "description": "Dialog"
       },
       "filepreview": {
-        "value": "{global.border-radius.container.L}",
+        "value": "{global.borderradius.container.L}",
         "type": "borderRadius",
         "description": "File preview (parent container), "
       },
       "note": {
-        "value": "{global.border-radius.container.M}",
+        "value": "{global.borderradius.container.M}",
         "type": "borderRadius",
         "description": "Note"
       },
       "linkpreview": {
-        "value": "{global.border-radius.interactive.M}",
+        "value": "{global.borderradius.interactive.M}",
         "type": "borderRadius",
         "description": "Link preview (outer corners)"
       },
       "subscriptiontile": {
-        "value": "{global.border-radius.container.M}",
+        "value": "{global.borderradius.container.M}",
         "type": "borderRadius",
         "description": "Subscription tile"
       },
       "texteditor": {
-        "value": "{global.border-radius.container.M}",
+        "value": "{global.borderradius.container.M}",
         "type": "borderRadius",
         "description": "Text editor (footer bottom corners)\n"
       },
       "card": {
         "moderate": {
-          "value": "{global.border-radius.interactive.M}",
+          "value": "{global.borderradius.interactive.M}",
           "type": "borderRadius",
           "description": "Card (less rounded)"
         },
         "curved": {
-          "value": "{global.border-radius.interactive.L}",
+          "value": "{global.borderradius.interactive.L}",
           "type": "borderRadius",
           "description": "Card (more rounded)"
         }
       },
       "skeleton": {
         "rectangle": {
-          "value": "{global.border-radius.container.M}",
+          "value": "{global.borderradius.container.M}",
           "type": "borderRadius",
           "description": "Skeleton (rectangle & text)"
         },
         "circle": {
-          "value": "{global.border-radius.circle}",
+          "value": "{global.borderradius.circle}",
           "type": "borderRadius",
           "description": "Skeleton (circle)"
         }
       },
       "tile": {
         "moderate": {
-          "value": "{global.border-radius.container.M}",
+          "value": "{global.borderradius.container.M}",
           "type": "borderRadius",
           "description": "Tile (less rounded)"
         },
         "curved": {
-          "value": "{global.border-radius.container.L}",
+          "value": "{global.borderradius.container.L}",
           "type": "borderRadius",
           "description": "Tile (more rounded)"
         }
@@ -467,6 +467,109 @@
           "description": "Card (hover state)"
         }
       }
+    },
+    "borderwidth": {
+      "dialog": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Dialog"
+      },
+      "divider": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Divider"
+      },
+      "drawer": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Drawer"
+      },
+      "footer": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Footer (in Card, Dialog)\n"
+      },
+      "header": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Global header (next to logo)\n"
+      },
+      "linkpreview": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Link preview in Text editor and Note\n"
+      },
+      "note": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Note\n"
+      },
+      "sidebar": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Sidebar"
+      },
+      "summarylist": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Summary list"
+      },
+      "tile": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Tile"
+      },
+      "accordion": {
+        "standard": {
+          "value": "{global.borderwidth.interactive.XS}",
+          "type": "borderWidth",
+          "description": "Accordion standard (top and bottom borders)"
+        },
+        "subtle": {
+          "value": "{global.borderwidth.interactive.S}",
+          "type": "borderWidth",
+          "description": "Accordion subtle (content vertical line)"
+        }
+      },
+      "filepreview": {
+        "container": {
+          "value": "{global.borderwidth.container.XS}",
+          "type": "borderWidth",
+          "description": "File preview (internal borders)\n"
+        },
+        "enabled": {
+          "value": "{global.borderwidth.container.XS}",
+          "type": "borderWidth",
+          "description": "File preview (file selector)\n"
+        },
+        "active": {
+          "value": "{global.borderwidth.container.S}",
+          "type": "borderWidth",
+          "description": "File preview (file selector)\n"
+        }
+      },
+      "subscriptiontile": {
+        "active": {
+          "value": "{global.borderwidth.container.XS}",
+          "type": "borderWidth",
+          "description": "Subscription tile (active product)"
+        },
+        "inactive": {
+          "value": "{global.borderwidth.container.XS}",
+          "type": "borderWidth",
+          "description": "Subscription tile (inactive product)"
+        },
+        "selected": {
+          "value": "{global.borderwidth.container.S}",
+          "type": "borderWidth",
+          "description": "Subscription tile (selected product)"
+        },
+        "unavailable": {
+          "value": "{global.borderwidth.container.XS}",
+          "type": "borderWidth",
+          "description": "Subscription tile (unavailable product)"
+        }
+      }
     }
   }
 }
diff --git a/data/tokens/Components/feedback.json b/data/tokens/Components/feedback.json
@@ -295,27 +295,27 @@
     },
     "borderradius": {
       "none": {
-        "value": "{global.border-radius.none}",
+        "value": "{global.borderradius.none}",
         "type": "borderRadius",
         "description": "Pill (embedded element inner corners)"
       },
       "message": {
-        "value": "{global.border-radius.container.M}",
+        "value": "{global.borderradius.container.M}",
         "type": "borderRadius",
         "description": "Message"
       },
       "pill": {
-        "value": "{global.border-radius.container.XS}",
+        "value": "{global.borderradius.container.XS}",
         "type": "borderRadius",
         "description": "Pill (outer corners)"
       },
       "toast": {
-        "value": "{global.border-radius.container.M}",
+        "value": "{global.borderradius.container.M}",
         "type": "borderRadius",
         "description": "Toast"
       },
       "tooltip": {
-        "value": "{global.border-radius.container.S}",
+        "value": "{global.borderradius.container.S}",
         "type": "borderRadius",
         "description": "Tooltip\n"
       }
@@ -331,6 +331,28 @@
         "type": "boxShadow",
         "description": "Tooltip\n"
       }
+    },
+    "borderwidth": {
+      "pill": {
+        "value": "{global.borderwidth.container.S}",
+        "type": "borderWidth",
+        "description": "Outlined Pill border"
+      },
+      "message": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Message border"
+      },
+      "toast": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Message border"
+      },
+      "toast-copy": {
+        "value": "{global.borderwidth.container.XS}",
+        "type": "borderWidth",
+        "description": "Toast border"
+      }
     }
   }
 }