@abgov/design-tokens 1.9.0 → 2.0.0

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

@@ -1,7 +1,7 @@
 {
   "tab-border-focus": {
     "value": {
-      "width": "{borderWidth.l}",
+      "width": "{borderWidth.xl}",
       "style": "solid",
       "color": "{color.interactive.focus}"
     },
@@ -31,48 +31,106 @@
     },
     "type": "border"
   },
+  "tab-indicator-width": {
+    "value": "{borderWidth.xl}",
+    "type": "sizing",
+    "description": "Width of the active/hover indicator line (desktop bottom bar, mobile left bar)"
+  },
+  "tab-indicator-border-radius-desktop": {
+    "value": "{borderRadius.s} {borderRadius.s} 0px 0px",
+    "type": "other"
+  },
+  "tab-indicator-border-radius-small-screen": {
+    "value": "0px {borderRadius.s} {borderRadius.s} 0px",
+    "type": "other"
+  },
   "tab-color-bg-selected": {
     "value": "transparent",
     "type": "color"
   },
   "tab-color-bg-selected-small-screen": {
-    "value": "{color.info.background}",
+    "value": "{color.info.light}",
     "type": "color"
   },
-  "tab-padding": {
-    "value": "{space.xs} {space.m}",
-    "type": "spacing"
+  "tab-color-bg-hover-small-screen": {
+    "value": "{color.greyscale.50}",
+    "type": "color",
+    "description": "Mobile hover background color"
   },
-  "tab-padding-mobile": {
-    "value": "6px {space.m}",
-    "type": "spacing"
+  "tab-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
   },
-  "tab-text-color": {
+  "tab-color-text-hover": {
     "value": "{color.text.default}",
+    "type": "color",
+    "description": "Text color on hover state"
+  },
+  "tab-color-text-selected": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "tab-color-text-not-selected": {
+    "value": "{color.greyscale.600}",
     "type": "color"
   },
+  "tab-indicator-color-active": {
+    "value": "{color.interactive.default}",
+    "type": "color",
+    "description": "Active tab indicator color (blue underline/left bar)"
+  },
+  "tab-indicator-color-hover": {
+    "value": "{color.greyscale.300}",
+    "type": "color",
+    "description": "Hover tab indicator color (grey underline/left bar)"
+  },
+  "tab-padding": {
+    "value": "{space.xs} {space.2xs} 9px {space.2xs}",
+    "type": "spacing",
+    "description": "Desktop tab padding"
+  },
+  "tab-padding-mobile": {
+    "value": "{space.2xs} {space.s} {space.2xs} 15px",
+    "type": "spacing"
+  },
   "tab-typography": {
-    "value": "{typography.body.m}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.3}",
+      "lineHeight": "{lineHeight.2}",
+      "letterSpacing": "{letterSpacing.3xs}"
+    },
+    "type": "typography"
   },
   "tab-typography-selected": {
-    "value": "{typography.heading.s}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.3}",
+      "lineHeight": "{lineHeight.2}",
+      "letterSpacing": "{letterSpacing.3xs}"
+    },
+    "type": "typography"
   },
   "tabs-bottom-border": {
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.200}"
+      "color": "{color.greyscale.150}"
     },
     "type": "border"
   },
   "tabs-gap": {
-    "value": "{space.xl}",
+    "value": "{space.m}",
     "type": "spacing"
   },
   "tabs-gap-small-screen": {
     "value": "{space.2xs}",
     "type": "spacing"
+  },
+  "tabs-padding-bottom-small-screen": {
+    "value": "{space.m}",
+    "type": "spacing"
   }
-}
+}

package/data/component-design-tokens/temporary-notification-design-tokens.json

@@ -0,0 +1,112 @@
+{
+  "temporary-notification-color-bg-basic": {
+    "value": "#333333",
+    "type": "color",
+    "description": "Background color for basic, indeterminate, and progress notifications"
+  },
+  "temporary-notification-color-bg-success": {
+    "value": "{color.success.default}",
+    "type": "color",
+    "description": "Background color for success notifications"
+  },
+  "temporary-notification-color-bg-failure": {
+    "value": "{color.emergency.default}",
+    "type": "color",
+    "description": "Background color for failure notifications"
+  },
+  "temporary-notification-color-text": {
+    "value": "{color.text.light}",
+    "type": "color",
+    "description": "Text color for notification messages"
+  },
+  "temporary-notification-color-border": {
+    "value": "{color.greyscale.700}",
+    "type": "color",
+    "description": "Border color for basic notification type"
+  },
+  "temporary-notification-borderWidth": {
+    "value": "{borderWidth.s}",
+    "type": "borderWidth",
+    "description": "Border width for basic notification type"
+  },
+  "temporary-notification-borderRadius": {
+    "value": "{borderRadius.l}",
+    "type": "borderRadius",
+    "description": "Border radius for notification container"
+  },
+  "temporary-notification-padding": {
+    "value": "{space.m} {space.l}",
+    "type": "spacing",
+    "description": "Container padding (top/bottom left/right)"
+  },
+  "temporary-notification-padding-text-top": {
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "Top margin for message text when icon is present (helps vertically center first line with icon)"
+  },
+  "temporary-notification-padding-with-progress": {
+    "value": "{space.m} {space.l} 22px {space.l}",
+    "type": "spacing",
+    "description": "Container padding when progress bar is present (16px + 6px progress bar height)"
+  },
+  "temporary-notification-row-gap": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Vertical gap when elements wrap to new rows"
+  },
+  "temporary-notification-column-gap": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Horizontal gap between icon and message within content wrapper"
+  },
+  "temporary-notification-typography": {
+    "value": "{typography.body.m}",
+    "type": "other",
+    "description": "Typography for notification message text"
+  },
+  "temporary-notification-max-width": {
+    "value": "640px",
+    "type": "sizing",
+    "description": "Maximum width for notification container"
+  },
+  "temporary-notification-min-width-desktop": {
+    "value": "360px",
+    "type": "sizing",
+    "description": "Minimum width for notification on desktop"
+  },
+  "temporary-notification-iconSize": {
+    "value": "{iconSize.xl}",
+    "type": "sizing",
+    "description": "Icon size for success and failure indicators"
+  },
+  "temporary-notification-progress-bar-height": {
+    "value": "6px",
+    "type": "sizing",
+    "description": "Height of progress bar"
+  },
+  "temporary-notification-progress-bar-borderRadius": {
+    "value": "{borderRadius.l}",
+    "type": "borderRadius",
+    "description": "Border radius for progress bar bottom corners"
+  },
+  "temporary-notification-progress-bar-color-bg": {
+    "value": "{color.greyscale.400}",
+    "type": "color",
+    "description": "Progress bar unfilled background color"
+  },
+  "temporary-notification-progress-bar-color-fill": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Progress bar fill color"
+  },
+  "temporary-notification-transition-duration": {
+    "value": "0.3s",
+    "type": "time",
+    "description": "Animation transition duration"
+  },
+  "temporary-notification-animation-distance": {
+    "value": "100px",
+    "type": "sizing",
+    "description": "Distance for slide in/out animation"
+  }
+}

package/data/component-design-tokens/text-area-design-tokens.json

@@ -1,65 +1,79 @@
 {
   "text-area-border": {
-    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.700}",
+    "value": "inset 0 0 0 {input.borderWidth.default} {input.color.border.default}",
     "type": "other"
   },
   "text-area-border-disabled": {
-    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "value": "inset 0 0 0 {input.borderWidth.default} {input.color.border.disabled}",
     "type": "other"
   },
   "text-area-border-error": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "value": "inset 0 0 0 {input.borderWidth.hover} {input.color.border.error}",
     "type": "other"
   },
   "text-area-border-focus": {
-    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "value": "inset 0 0 0 {input.borderWidth.focus} {input.color.border.focus}",
     "type": "other"
   },
   "text-area-border-hover": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "value": "inset 0 0 0 {input.borderWidth.hover} {input.color.border.hover}",
     "type": "other"
   },
   "text-area-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{input.borderRadius.input}",
     "type": "borderRadius"
   },
   "text-area-color-bg": {
-    "value": "{color.greyscale.white}",
+    "value": "{input.color.background.default}",
     "type": "color"
   },
   "text-area-color-bg-disabled": {
-    "value": "{color.greyscale.100}",
+    "value": "{input.color.background.disabled}",
+    "type": "color"
+  },
+  "text-area-color-bg-readonly": {
+    "value": "{input.color.background.readonly}",
     "type": "color"
   },
   "text-area-color-text": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.secondary}",
     "type": "color"
   },
   "text-area-color-text-counter": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.secondary}",
     "type": "color"
   },
   "text-area-color-text-counter-error": {
-    "value": "{color.interactive.error}",
+    "value": "{input.color.border.error}",
     "type": "color"
   },
   "text-area-color-text-disabled": {
-    "value": "{color.text.disabled}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "text-area-color-text-placeholder": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.placeholder}",
     "type": "color"
   },
   "text-area-padding": {
-    "value": "0.625rem {space.s}",
+    "value": "{space.m}",
     "type": "spacing",
-    "description": "10px {space.s}"
+    "description": "Regular size: 16px all around"
+  },
+  "text-area-padding-compact": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Compact variant: 12px all around"
   },
   "text-area-typography": {
     "value": "{typography.body.m}",
     "type": "other"
   },
+  "text-area-typography-compact": {
+    "value": "{typography.body.s}",
+    "type": "other",
+    "description": "Compact variant typography for content text"
+  },
   "text-area-typography-counter": {
     "value": "{typography.body.xs}",
     "type": "other"

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

@@ -8,11 +8,11 @@
     "type": "border"
   },
   "tooltip-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{borderRadius.xl}",
     "type": "borderRadius"
   },
   "tooltip-color-bg": {
-    "value": "{color.greyscale.700}",
+    "value": "{color.greyscale.600}",
     "type": "color"
   },
   "tooltip-color-text": {
@@ -28,7 +28,7 @@
     "type": "dimension"
   },
   "tooltip-padding": {
-    "value": "6px {space.m} 10px {space.m}",
+    "value": "{space.m}",
     "type": "spacing"
   },
   "tooltip-text-size": {

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

@@ -0,0 +1,34 @@
+{
+  "work-side-menu-width-open": {
+    "value": "17.5rem",
+    "type": "spacing"
+  },
+  "work-side-menu-width-closed": {
+    "value": "4.5rem",
+    "type": "spacing"
+  },
+  "work-side-menu-color-bg": {
+    "value": "transparent",
+    "type": "color"
+  },
+  "work-side-menu-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "work-side-menu-border": {
+    "value": "{borderWidth.s} solid {color.greyscale.200}",
+    "type": "other"
+  },
+  "work-side-menu-account-shadow": {
+    "value": "0px 12px 20px -8px rgba(26, 26, 26, 0.24)",
+    "type": "other"
+  },
+  "work-side-menu-text-color": {
+    "value": "{color.greyscale.600}",
+    "type": "color"
+  },
+  "work-side-menu-mobile-bg": {
+    "value": "{color.greyscale.50}",
+    "type": "color"
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "work-side-menu-group-border": {
+    "value": "{borderWidth.xl} solid {color.greyscale.100}",
+    "type": "other"
+  },
+  "work-side-menu-group-margin": {
+    "value": "{space.xs} 0 0.375rem 1.125rem",
+    "type": "spacing"
+  },
+  "work-side-menu-group-padding": {
+    "value": "0 0 0 0.75rem",
+    "type": "spacing"
+  },
+  "work-side-menu-group-item-padding": {
+    "value": "{space.2xs} {space.xs}",
+    "type": "spacing"
+  },
+  "work-side-menu-group-item-min-height": {
+    "value": "1.75rem",
+    "type": "spacing"
+  },
+  "work-side-menu-group-item-text-size": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  }
+}

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

@@ -0,0 +1,58 @@
+{
+  "work-side-menu-item-badge-background-color": {
+    "value": "{color.success.default}",
+    "type": "color"
+  },
+  "work-side-menu-item-badge-emergency-background-color": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "work-side-menu-item-badge-success-background-color": {
+    "value": "{color.success.default}",
+    "type": "color"
+  },
+  "work-side-menu-item-badge-text-size": {
+    "value": "{fontSize.2}",
+    "type": "fontSize"
+  },
+  "work-side-menu-item-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "work-side-menu-item-color-bg-current": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "work-side-menu-item-color-bg-hover": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "work-side-menu-item-icon-display": {
+    "value": "flex",
+    "type": "other"
+  },
+  "work-side-menu-item-min-height": {
+    "value": "2.5rem",
+    "type": "spacing"
+  },
+  "work-side-menu-item-padding": {
+    "value": "{space.xs} {space.xs} {space.xs} 0.625rem",
+    "type": "spacing"
+  },
+  "work-side-menu-item-text-color": {
+    "value": "{color.greyscale.600}",
+    "type": "color"
+  },
+  "work-side-menu-item-text-color-current": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "work-side-menu-item-text-color-hover": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "work-side-menu-item-text-size": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  }
+}