@abgov/design-tokens 1.10.0 → 2.0.0

package/data/component-design-tokens/popover-design-tokens.json

@@ -5,22 +5,36 @@
       "style": "solid",
       "color": "{color.interactive.focus}"
     },
-    "type": "border"
+    "type": "border",
+    "description": "Focus outline for popover target button"
   },
   "popover-border-radius": {
-    "value": "{borderRadius.m}",
-    "type": "borderRadius"
+    "value": "{borderRadius.xl}",
+    "type": "borderRadius",
+    "description": "Container corner radius"
   },
   "popover-color-bg": {
     "value": "{color.greyscale.white}",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for popover container"
   },
   "popover-padding": {
-    "value": "{space.s}",
-    "type": "spacing"
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "Content padding inside popover"
   },
-  "popover-shadow": {
-    "value": "drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25))",
-    "type": "other"
+  "popover-box-shadow": {
+    "value": "{shadow.raised-light}",
+    "type": "other",
+    "description": "Shadow for popover container"
+  },
+  "popover-border": {
+    "value": {
+      "width": "{borderWidth.2xs}",
+      "style": "solid",
+      "color": "{color.greyscale.150}"
+    },
+    "type": "border",
+    "description": "Container border"
   }
 }

package/data/component-design-tokens/push-drawer-design-tokens.json

@@ -1,6 +1,6 @@
 {
   "push-drawer-border-radius": {
-    "value": "{borderRadius.none}",
+    "value": "{borderRadius.3xl}",
     "type": "borderRadius",
     "description": "Border radius for drawer corners"
   },

package/data/component-design-tokens/radio-design-tokens.json

@@ -3,13 +3,13 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.700}"
+      "color": "{color.greyscale.500}"
     },
     "type": "border"
   },
   "radio-border-checked": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.m}",
       "style": "solid",
       "color": "{color.interactive.default}"
     },
@@ -17,7 +17,7 @@
   },
   "radio-border-checked-disabled": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.s}",
       "style": "solid",
       "color": "{color.interactive.disabled}"
     },
@@ -25,7 +25,7 @@
   },
   "radio-border-checked-error": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.m}",
       "style": "solid",
       "color": "{color.interactive.error}"
     },
@@ -33,7 +33,7 @@
   },
   "radio-border-checked-error-disabled": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.s}",
       "style": "solid",
       "color": "#f58185"
     },
@@ -41,7 +41,7 @@
   },
   "radio-border-checked-error-hover": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.m}",
       "style": "solid",
       "color": "#ba0000"
     },
@@ -49,7 +49,7 @@
   },
   "radio-border-checked-hover": {
     "value": {
-      "width": "7px",
+      "width": "{borderWidth.m}",
       "style": "solid",
       "color": "{color.interactive.hover}"
     },
@@ -59,7 +59,7 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.400}"
+      "color": "#b1b1b1"
     },
     "type": "border"
   },
@@ -99,19 +99,43 @@
     "value": {
       "width": "{borderWidth.m}",
       "style": "solid",
-      "color": "{color.interactive.hover}"
+      "color": "{color.greyscale.black}"
     },
     "type": "border"
   },
+  "radio-borderRadius": {
+    "value": "50%",
+    "type": "borderRadius"
+  },
   "radio-color-bg": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
+  "radio-color-bg-disabled": {
+    "value": "{color.greyscale.150}",
+    "type": "color"
+  },
+  "radio-color-bg-error": {
+    "value": "{color.emergency.light}",
+    "type": "color"
+  },
+  "radio-color-bg-error-hover": {
+    "value": "#f4c8c5",
+    "type": "color"
+  },
   "radio-description": {
     "value": "{typography.body.xs}",
     "type": "other"
   },
+  "radio-gap-label": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
   "radio-group-gap-horizontal": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "radio-group-gap-horizontal-compact": {
     "value": "{space.l}",
     "type": "spacing"
   },
@@ -119,20 +143,58 @@
     "value": "{space.m}",
     "type": "spacing"
   },
+  "radio-group-gap-vertical-compact": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "radio-inner-color": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "radio-inner-color-disabled": {
+    "value": "{color.interactive.disabled}",
+    "type": "color"
+  },
+  "radio-inner-color-error": {
+    "value": "{color.interactive.error}",
+    "type": "color"
+  },
+  "radio-inner-color-error-hover": {
+    "value": "#ba0000",
+    "type": "color"
+  },
+  "radio-inner-color-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "radio-inner-size": {
+    "value": "16px",
+    "type": "sizing"
+  },
   "radio-label": {
-    "value": "{typography.body.m}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.3}"
+    },
+    "type": "typography"
   },
   "radio-label-color-disabled": {
-    "value": "{color.greyscale.500}",
+    "value": "#bab7b7",
     "type": "color"
   },
+  "radio-label-compact": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.3}",
+      "lineHeight": "{lineHeight.2}"
+    },
+    "type": "typography"
+  },
   "radio-size": {
     "value": "{space.l}",
     "type": "sizing"
-  },
-  "radio-border-radius": {
-    "value": "50%",
-    "type": "borderRadius"
   }
-}
+}

package/data/component-design-tokens/side-menu-design-tokens.json

@@ -3,41 +3,36 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.200}"
+      "color": "{color.greyscale.150}"
     },
-    "type": "border"
+    "type": "border",
+    "description": "Right border for side menu container"
   },
   "side-menu-color-bg": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "side-menu-color-bg-menu-item-current": {
-    "value": "#cedfee",
-    "type": "color"
-  },
   "side-menu-color-bg-menu-item-hover": {
-    "value": "#cedfee",
-    "type": "color"
-  },
-  "side-menu-color-menu-item": {
-    "value": "{color.text.default}",
+    "value": "{color.greyscale.100}",
     "type": "color"
   },
   "side-menu-heading-border": {
     "value": {
-      "width": "{borderWidth.m}",
+      "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.200}"
+      "color": "{color.greyscale.100}"
     },
-    "type": "border"
+    "type": "border",
+    "description": "1px bottom border for side menu headings - greyscale.100"
   },
   "side-menu-heading-color": {
-    "value": "{color.text.secondary}",
+    "value": "{color.greyscale.600}",
     "type": "color"
   },
   "side-menu-heading-color-bg": {
-    "value": "{color.greyscale.100}",
-    "type": "color"
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "White background for side menu headings"
   },
   "side-menu-heading-icon-gap": {
     "value": "{space.xs}",
@@ -52,24 +47,22 @@
     "type": "spacing"
   },
   "side-menu-heading-padding": {
-    "value": "{space.s} {space.s} {space.xs} {space.l}",
+    "value": "{space.2xs} {space.xs}",
     "type": "spacing"
   },
   "side-menu-heading-typography": {
-    "value": "{typography.heading.s}",
-    "type": "other"
+    "value": "{typography.body.xs}",
+    "type": "other",
+    "description": "Typography for side menu section headings - body.xs (14px)"
   },
   "side-menu-icon-color": {
     "value": "{color.text.secondary}",
     "type": "color"
   },
-  "side-menu-icon-size": {
-    "value": "{iconSize.l}",
-    "type": "sizing"
-  },
   "side-menu-items-gap": {
-    "value": "{space.none}",
-    "type": "spacing"
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "Vertical gap between menu items"
   },
   "side-menu-heading-gap": {
     "value": "{space.xs}",
@@ -84,75 +77,28 @@
     "type": "border"
   },
   "side-menu-padding": {
-    "value": "{space.m} {space.none} {space.l} {space.none}",
-    "type": "spacing"
+    "value": "{space.m} {space.xs} {space.m} {space.m}",
+    "type": "spacing",
+    "description": "Padding for side menu container - 16px 8px 16px 16px"
   },
   "side-menu-padding-item": {
-    "value": "{space.xs} {space.s} 10px {space.xl}",
+    "value": "{space.xs} {space.s}",
     "type": "spacing"
   },
   "side-menu-padding-child": {
-    "value": "{space.xs} {space.s} 10px {space.m}",
+    "value": "{space.2xs} {space.xs}",
     "type": "spacing"
   },
-  "side-menu-parent-color-bg-hover": {
-    "value": "#cedfee",
-    "type": "color"
-  },
   "side-menu-parent-color-bg-selected": {
-    "value": "#cedfee",
+    "value": "{color.greyscale.100}",
     "type": "color"
   },
   "side-menu-parent-padding": {
-    "value": "{space.xs} {space.s} 10px {space.xl}",
+    "value": "{space.xs} {space.s}",
     "type": "spacing"
   },
-  "side-menu-sub-group-padding": {
-    "value": "{space.none} {space.none} {space.none} {space.none}",
-    "type": "spacing"
-  },
-  "side-menu-sub-item-border-left": {
-    "value": {
-      "width": "{borderWidth.xl}",
-      "style": "solid",
-      "color": "{color.greyscale.100}"
-    },
-    "type": "border"
-  },
-  "side-menu-sub-item-border-left-hover": {
-    "value": {
-      "width": "{borderWidth.xl}",
-      "style": "solid",
-      "color": "{color.greyscale.200}"
-    },
-    "type": "border"
-  },
-  "side-menu-sub-item-border-left-current": {
-    "value": {
-      "width": "{borderWidth.xl}",
-      "style": "solid",
-      "color": "{color.interactive.disabled}"
-    },
-    "type": "border"
-  },
-  "side-menu-sub-item-color-bg": {
-    "value": "none",
-    "type": "color"
-  },
-  "side-menu-sub-item-color-bg-current": {
-    "value": "{color.info.background}",
-    "type": "color"
-  },
-  "side-menu-sub-item-color-bg-hover": {
-    "value": "{color.info.background}",
-    "type": "color"
-  },
-  "side-menu-width": {
-    "value": "256px",
-    "type": "sizing"
-  },
   "side-menu-group-border-radius": {
-    "value": "{borderRadius.none}",
+    "value": "{borderRadius.xl}",
     "type": "borderRadius"
   },
   "side-menu-group-color-bg": {
@@ -187,10 +133,6 @@
     },
     "type": "border"
   },
-  "side-menu-child-color-bg": {
-    "value": "none",
-    "type": "color"
-  },
   "side-menu-child-color-bg-hover": {
     "value": "{color.info.background}",
     "type": "color"
@@ -199,21 +141,86 @@
     "value": "{color.info.background}",
     "type": "color"
   },
-  "side-menu-child-color-text-selected": {
-    "value": "{color.text.default}",
-    "type": "color"
-  },
   "side-menu-typography-item": {
-    "value": "{typography.body.m}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.regular}",
+      "fontSize": "16px",
+      "lineHeight": "22px",
+      "letterSpacing": "0"
+    },
+    "type": "typography",
+    "description": "Typography for side menu items and group headings - 16px/22px regular"
   },
   "side-menu-typography-item-current": {
-    "value": "{typography.heading.s}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "16px",
+      "lineHeight": "22px",
+      "letterSpacing": "0"
+    },
+    "type": "typography",
+    "description": "Typography for current/active side menu items - 16px/22px semibold"
+  },
+  "side-menu-color-item": {
+    "value": "{color.text.default}",
+    "type": "color",
+    "description": "Text color for side menu items (not current)"
+  },
+  "side-menu-color-item-current": {
+    "value": "{color.text.default}",
+    "type": "color",
+    "description": "Text color for current side menu item"
   },
   "side-menu-child-border-width": {
     "value": "{borderWidth.xl}",
     "type": "borderWidth",
     "description": "4px"
+  },
+  "side-menu-item-focus-outline-offset": {
+    "value": "-3px",
+    "type": "other",
+    "description": "Focus outline offset for menu items and groups"
+  },
+  "side-menu-group-item-typography": {
+    "value": "{typography.body.xs}",
+    "type": "other",
+    "description": "Typography for nested group items - references body.xs (14px regular)"
+  },
+  "side-menu-group-item-typography-current": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.bold}",
+      "fontSize": "{fontSize.2}",
+      "lineHeight": "{lineHeight.1}"
+    },
+    "type": "typography",
+    "description": "Typography for current/active nested group items - 14px bold"
+  },
+  "side-menu-item-border-radius": {
+    "value": "{borderRadius.l}",
+    "type": "borderRadius",
+    "description": "Border radius for menu items (6px)"
+  },
+  "side-menu-group-border-radius-open": {
+    "value": "{borderRadius.xl}",
+    "type": "borderRadius",
+    "description": "Border radius for open groups (8px)"
+  },
+  "side-menu-group-container-margin-left": {
+    "value": "20px",
+    "type": "spacing",
+    "description": "Left margin for nested group container"
+  },
+  "side-menu-group-container-margin-bottom": {
+    "value": "6px",
+    "type": "spacing",
+    "description": "Bottom margin for nested group container"
+  },
+  "side-menu-heading-padding-top": {
+    "value": "14px",
+    "type": "spacing",
+    "description": "Top padding for section headings"
   }
-}
+}

package/data/component-design-tokens/table-design-tokens.json

@@ -1,14 +1,164 @@
 {
   "table-color-heading": {
-    "value": "{color.text.secondary}",
-    "type": "color"
-  },
-  "table-color-border-heading": {
     "value": "{color.greyscale.600}",
-    "type": "color"
+    "type": "color",
+    "description": "Header text color"
+  },
+  "table-color-heading-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color",
+    "description": "Header text color on hover"
+  },
+  "table-color-bg-heading-hover": {
+    "value": "{color.greyscale.100}",
+    "type": "color",
+    "description": "Header background color on hover"
+  },
+  "table-typography-heading": {
+    "value": "{typography.body.xs}",
+    "type": "other",
+    "description": "Header text typography"
+  },
+  "table-color-bg-heading": {
+    "value": "{color.greyscale.50}",
+    "type": "color",
+    "description": "Header cell background color"
+  },
+  "table-color-bg-data": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Data cell background color"
+  },
+  "table-heading-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.greyscale.150}"
+    },
+    "type": "border",
+    "description": "Header cell bottom border"
+  },
+  "table-data-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.150}"
+    },
+    "type": "border",
+    "description": "Data cell bottom border"
+  },
+  "table-container-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.150}"
+    },
+    "type": "border",
+    "description": "Table container border"
+  },
+  "table-border-radius-container": {
+    "value": "{borderRadius.2xl}",
+    "type": "other",
+    "description": "Table container border radius"
+  },
+  "table-padding-heading": {
+    "value": "18px {space.m} {space.m} {space.m}",
+    "type": "spacing",
+    "description": "Header cell padding (normal variant, top right bottom left)"
+  },
+  "table-padding-heading-relaxed": {
+    "value": "18px {space.m} {space.m} {space.m}",
+    "type": "spacing",
+    "description": "Header cell padding (relaxed variant, top right bottom left)"
+  },
+  "table-padding-data": {
+    "value": "{space.s} {space.m} {space.s} {space.m}",
+    "type": "spacing",
+    "description": "Data cell base padding (normal variant, 12px vertical for 48px height)"
+  },
+  "table-padding-data-relaxed": {
+    "value": "18px {space.m} 18px {space.m}",
+    "type": "spacing",
+    "description": "Data cell base padding (relaxed variant, top right bottom left)"
+  },
+  "table-height-heading": {
+    "value": "56px",
+    "type": "sizing",
+    "description": "Header cell minimum height (normal variant)"
+  },
+  "table-height-heading-relaxed": {
+    "value": "56px",
+    "type": "sizing",
+    "description": "Header cell minimum height (relaxed variant)"
+  },
+  "table-height-data": {
+    "value": "48px",
+    "type": "sizing",
+    "description": "Data cell minimum height (normal variant)"
+  },
+  "table-height-data-relaxed": {
+    "value": "64px",
+    "type": "sizing",
+    "description": "Data cell minimum height (relaxed variant)"
+  },
+  "table-padding-cell-text": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Vertical padding for text-only cells in normal variant (12px for 48px height)"
+  },
+  "table-padding-cell-text-relaxed": {
+    "value": "20px",
+    "type": "spacing",
+    "description": "Vertical padding for text-only cells in relaxed variant (20px for 64px height)"
+  },
+  "table-padding-cell-checkbox": {
+    "value": "{space.3xs}",
+    "type": "spacing",
+    "description": "Vertical padding for checkbox cells in normal variant (2px for 48px height)"
+  },
+  "table-padding-cell-checkbox-relaxed": {
+    "value": "10px",
+    "type": "spacing",
+    "description": "Vertical padding for checkbox cells in relaxed variant (10px for 64px height)"
+  },
+  "table-padding-cell-form-field": {
+    "value": "3px",
+    "type": "spacing",
+    "description": "Vertical padding for form field cells (input, dropdown, etc.) in normal variant (3px for 48px height)"
+  },
+  "table-padding-cell-form-field-relaxed": {
+    "value": "11px",
+    "type": "spacing",
+    "description": "Vertical padding for form field cells (input, dropdown, etc.) in relaxed variant (11px for 64px height)"
+  },
+  "table-padding-cell-badge": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Vertical padding for badge cells in normal variant (12px for 48px height)"
+  },
+  "table-padding-cell-badge-relaxed": {
+    "value": "20px",
+    "type": "spacing",
+    "description": "Vertical padding for badge cells in relaxed variant (20px for 64px height)"
+  },
+  "table-padding-cell-actions": {
+    "value": "7px",
+    "type": "spacing",
+    "description": "Vertical padding for action cells (buttons, icon buttons, links) in normal variant (7px for 48px height)"
+  },
+  "table-padding-cell-actions-relaxed": {
+    "value": "14px",
+    "type": "spacing",
+    "description": "Vertical padding for action cells (buttons, icon buttons, links) in relaxed variant (14px for 64px height)"
+  },
+  "table-padding-cell-text-supporting-relaxed": {
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "Vertical padding for text-supporting cells in relaxed variant (8px for 64px height)"
   },
-  "table-header-padding": {
-    "value": "{space.m}",
-    "type": "sizing"
+  "table-sort-header-gap": {
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "Gap between sort header text and icon"
   }
-}
+}