@abgov/design-tokens 1.10.0 → 2.0.0

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

@@ -1,30 +1,48 @@
 {
   "drawer-overlay-color": {
-    "value": "rgba(0,0,0,0.3)",
+    "value": "rgba(51, 51, 51, 0.5)",
     "type": "color",
-    "description": "background overlay color behind drawer, 70%"
-  },
-  "drawer-bottom-shadow": {
-    "value": {
-      "x": "0",
-      "y": "-6",
-      "blur": "6",
-      "spread": "0",
-      "color": "rgba(0,0,0,0.16)",
-      "type": "dropShadow"
-    },
-    "type": "boxShadow"
-  },
-  "drawer-left-shadow": {
-    "value": {
-      "x": "6",
-      "y": "0",
-      "blur": "6",
-      "spread": "0",
-      "color": "rgba(0,0,0,0.16)",
-      "type": "dropShadow"
-    },
-    "type": "boxShadow"
+    "description": "Background overlay color behind drawer"
+  },
+  "drawer-border-radius": {
+    "value": "{borderRadius.3xl}",
+    "type": "borderRadius",
+    "description": "Border radius for drawer corners"
+  },
+  "drawer-offset": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Offset from screen edges when open"
+  },
+  "drawer-content-padding-horizontal": {
+    "value": "{space.l}",
+    "type": "spacing",
+    "description": "Horizontal padding for content section"
+  },
+  "drawer-content-padding-vertical": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Vertical padding for content section"
+  },
+  "drawer-actions-padding-top": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Top padding for actions section"
+  },
+  "drawer-actions-padding-bottom": {
+    "value": "{space.l}",
+    "type": "spacing",
+    "description": "Bottom padding for actions section"
+  },
+  "drawer-heading-typography": {
+    "value": "{typography.heading.s}",
+    "type": "other",
+    "description": "Typography for drawer heading"
+  },
+  "drawer-shadow": {
+    "value": "0 0 4px 0 rgba(0, 0, 0, 0.10), 0 8px 40px 0 rgba(0, 0, 0, 0.20)",
+    "type": "other",
+    "description": "Drop shadow for drawer"
   },
   "drawer-transition-time": {
     "value": "0.25s",
@@ -33,16 +51,5 @@
   "drawer-padding": {
     "value": "{space.m}",
     "type": "spacing"
-  },
-  "drawer-right-shadow": {
-    "value": {
-      "x": "-6",
-      "y": "0",
-      "blur": "6",
-      "spread": "0",
-      "color": "rgba(0,0,0,0.16)",
-      "type": "dropShadow"
-    },
-    "type": "boxShadow"
   }
 }

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

@@ -1,54 +1,70 @@
 {
   "dropdown-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"
   },
   "dropdown-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"
   },
   "dropdown-border-error": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "value": "inset 0 0 0 {input.borderWidth.focus} {input.color.border.error}",
     "type": "other"
   },
   "dropdown-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"
   },
   "dropdown-border-hover": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "value": "inset 0 0 0 {input.borderWidth.focus} {input.color.border.hover}",
+    "type": "other"
+  },
+  "dropdown-border-error-hover": {
+    "value": "inset 0 0 0 {input.borderWidth.focus} {input.color.border.error-hover}",
     "type": "other"
   },
   "dropdown-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{input.borderRadius.input}",
     "type": "borderRadius"
   },
   "dropdown-color-bg": {
-    "value": "{color.greyscale.white}",
+    "value": "{input.color.background.default}",
     "type": "color"
   },
   "dropdown-color-bg-disabled": {
-    "value": "{color.greyscale.100}",
+    "value": "{input.color.background.disabled}",
+    "type": "color"
+  },
+  "dropdown-color-bg-error": {
+    "value": "{input.color.background.error}",
+    "type": "color"
+  },
+  "dropdown-color-bg-error-hover": {
+    "value": "{input.color.background.error-hover}",
     "type": "color"
   },
   "dropdown-color-text": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.default}",
     "type": "color"
   },
   "dropdown-color-text-disabled": {
-    "value": "{color.text.disabled}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "dropdown-color-text-placeholder": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.default}",
+    "type": "color"
+  },
+  "dropdown-color-text-error": {
+    "value": "{input.color.text.error}",
     "type": "color"
   },
   "dropdown-item-color-bg": {
-    "value": "{color.greyscale.white}",
+    "value": "{input.color.background.default}",
     "type": "color"
   },
   "dropdown-item-color-bg-disabled": {
-    "value": "{color.greyscale.100}",
+    "value": "{input.color.background.disabled}",
     "type": "color"
   },
   "dropdown-item-color-bg-hover": {
@@ -72,7 +88,7 @@
     "type": "color"
   },
   "dropdown-item-color-text-hover": {
-    "value": "{color.interactive.hover}",
+    "value": "{color.text.default}",
     "type": "color"
   },
   "dropdown-item-color-text-selected": {
@@ -80,15 +96,27 @@
     "type": "color"
   },
   "dropdown-item-color-text-selected-hover": {
-    "value": "{color.greyscale.white}",
+    "value": "{color.text.light}",
     "type": "color"
   },
   "dropdown-item-padding": {
-    "value": "7px {dropdown-padding-lr} 9px",
+    "value": "{space.s} {space.xs}",
     "type": "spacing"
   },
+  "dropdown-item-border-radius": {
+    "value": "{borderRadius.s}",
+    "type": "borderRadius"
+  },
+  "dropdown-height": {
+    "value": "56px",
+    "type": "sizing"
+  },
   "dropdown-padding": {
-    "value": "6px {dropdown-padding-lr} 8px",
+    "value": "{space.m} {space.s}",
+    "type": "spacing"
+  },
+  "dropdown-padding-vertical": {
+    "value": "{space.m}",
     "type": "spacing"
   },
   "dropdown-padding-lr": {
@@ -106,5 +134,41 @@
   "dropdown-typography": {
     "value": "{typography.body.m}",
     "type": "other"
+  },
+  "dropdown-label-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "dropdown-helper-typography": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "dropdown-menu-border-radius": {
+    "value": "{input.borderRadius.input}",
+    "type": "borderRadius"
+  },
+  "dropdown-menu-margin": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "dropdown-compact-height": {
+    "value": "40px",
+    "type": "sizing"
+  },
+  "dropdown-compact-typography": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "dropdown-compact-padding": {
+    "value": "0 {space.s}",
+    "type": "spacing"
+  },
+  "dropdown-compact-item-padding": {
+    "value": "0 {space.xs}",
+    "type": "spacing"
+  },
+  "dropdown-compact-item-typography": {
+    "value": "{typography.body.s}",
+    "type": "other"
   }
 }

package/data/component-design-tokens/filter-chip-design-tokens.json

@@ -0,0 +1,92 @@
+{
+  "filter-chip-border-radius": {
+    "value": "{borderRadius.3xl}",
+    "type": "borderRadius"
+  },
+  "filter-chip-border": {
+    "value": {
+      "color": "{color.greyscale.300}",
+      "width": "{borderWidth.s}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "filter-chip-text-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "filter-chip-text-color-error": {
+    "value": "{input.color.border.error}",
+    "type": "color"
+  },
+  "filter-chip-bg-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "filter-chip-bg-color-error": {
+    "value": "{input.color.background.error}",
+    "type": "color"
+  },
+  "filter-chip-border-color-error": {
+    "value": "{input.color.border.error}",
+    "type": "color"
+  },
+  "filter-chip-icon-color": {
+    "value": "{color.greyscale.600}",
+    "type": "color"
+  },
+  "filter-chip-icon-color-error": {
+    "value": "{input.color.text.error}",
+    "type": "color"
+  },
+  "filter-chip-secondary-text-color": {
+    "value": "{color.greyscale.600}",
+    "type": "color"
+  },
+  "filter-chip-secondary-text-color-error": {
+    "value": "{input.color.text.error}",
+    "type": "color"
+  },
+  "filter-chip-padding-vertical": {
+    "value": "0.3125rem",
+    "type": "spacing",
+    "description": "5px"
+  },
+  "filter-chip-padding-horizontal-left": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "filter-chip-padding-horizontal-right": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "filter-chip-gap": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "filter-chip-label-gap": {
+    "value": "0.375rem",
+    "type": "spacing",
+    "description": "6px"
+  },
+  "filter-chip-typography": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "filter-chip-line-height": {
+    "value": "{lineHeight.2}",
+    "type": "lineHeights"
+  },
+  "filter-chip-min-height": {
+    "value": "{space.xl}",
+    "type": "sizing"
+  },
+  "filter-chip-min-width": {
+    "value": "56px",
+    "type": "sizing"
+  },
+  "filter-chip-close-button-error-hover-bg-color": {
+    "value": "{input.color.background.error-hover}",
+    "type": "color"
+  }
+}

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

@@ -1,7 +1,7 @@
 {
   "footer-border-bottom": {
     "value": {
-      "width": "1rem",
+      "width": "{borderWidth.none}",
       "style": "solid",
       "color": "{color.brand.default}"
     },
@@ -11,7 +11,7 @@
     "value": {
       "width": "{borderWidth.m}",
       "style": "solid",
-      "color": "{color.greyscale.200}"
+      "color": "{color.greyscale.150}"
     },
     "type": "border"
   },
@@ -20,7 +20,7 @@
     "type": "color"
   },
   "footer-color-links": {
-    "value": "{color.text.default}",
+    "value": "{color.greyscale.black}",
     "type": "color"
   },
   "footer-color-links-hover": {
@@ -32,7 +32,7 @@
     "type": "color"
   },
   "footer-color-links-secondary-hover": {
-    "value": "{color.greyscale.900}",
+    "value": "{color.greyscale.800}",
     "type": "color"
   },
   "footer-link-focus": {
@@ -43,40 +43,36 @@
     },
     "type": "border"
   },
+  "footer-link-focus-border-radius": {
+    "value": "{borderRadius.s}",
+    "type": "borderRadius"
+  },
   "footer-padding-large-screen": {
-    "value": "{space.2xl} {space.3xl}",
+    "value": "{space.l} {space.3xl}",
     "type": "spacing"
   },
   "footer-padding-medium-screen": {
-    "value": "{space.2xl} {space.xl}",
+    "value": "{space.l} {space.xl}",
     "type": "spacing"
   },
   "footer-padding-small-screen": {
-    "value": "{space.xl} {space.m}",
+    "value": "{space.l} {space.m}",
     "type": "spacing"
   },
-  "footer-size-logo-desktop": {
-    "value": "155px",
-    "type": "sizing"
-  },
-  "footer-size-logo-mobile": {
-    "value": "133px",
-    "type": "sizing"
-  },
-  "footer-size-logo-tablet": {
-    "value": "155px",
-    "type": "sizing"
-  },
   "footer-typography-small-screen": {
     "value": "{fontSize.3}",
     "type": "other"
   },
   "footer-meta-links-gap": {
-    "value": "{space.l}",
+    "value": "{space.xl}",
     "type": "spacing"
   },
   "footer-meta-links-gap-small-screen": {
     "value": "20px",
     "type": "spacing"
+  },
+  "footer-meta-links-margin": {
+    "value": "{space.none}",
+    "type": "spacing"
   }
 }

package/data/component-design-tokens/form-item-design-tokens.json

@@ -1,46 +1,125 @@
 {
   "form-item-error-message-color": {
-    "value": "{color.interactive.error}",
-    "type": "color"
+    "value": "{input.color.text.error}",
+    "type": "color",
+    "description": "Color for error message text"
   },
   "form-item-help-message-color": {
-    "value": "{color.text.default}",
-    "type": "color"
+    "value": "{input.color.text.helper}",
+    "type": "color",
+    "description": "Color for helper message text"
   },
   "form-item-label-large-padding-bottom": {
-    "value": "{space.m}",
-    "type": "spacing"
+    "value": "1.375rem",
+    "type": "spacing",
+    "description": "Space between large label and form input"
   },
   "form-item-label-large-typography": {
-    "value": "{typography.heading.l}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.bold}",
+      "fontSize": "{fontSize.8}",
+      "lineHeight": "{lineHeight.5}",
+      "letterSpacing": "{letterSpacing.m}"
+    },
+    "type": "typography",
+    "description": "Typography for large form field labels"
   },
   "form-item-label-padding-bottom": {
-    "value": "{space.s}",
-    "type": "spacing"
+    "value": "0.625rem",
+    "type": "spacing",
+    "description": "Space between regular label and form input"
   },
   "form-item-label-typography": {
-    "value": "{typography.heading.s}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.4}",
+      "letterSpacing": "0"
+    },
+    "type": "typography",
+    "description": "Typography for regular form field labels"
+  },
+  "form-item-label-compact-padding-bottom": {
+    "value": "0.5625rem",
+    "type": "spacing",
+    "description": "Space between compact label and form input"
+  },
+  "form-item-label-compact-typography": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.3}",
+      "lineHeight": "{lineHeight.2}",
+      "letterSpacing": "0"
+    },
+    "type": "typography",
+    "description": "Typography for compact form field labels"
   },
   "form-item-message-gap": {
     "value": "{space.2xs}",
-    "type": "spacing"
+    "type": "spacing",
+    "description": "Icon to text gap in error message"
+  },
+  "form-item-message-gap-compact": {
+    "value": "0.1875rem",
+    "type": "spacing",
+    "description": "Icon to text gap in compact error message"
+  },
+  "form-item-message-margin-top-large": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Space between input and messages for large label size with text inputs"
+  },
+  "form-item-message-margin-top-regular": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Space between input and messages for regular label size with text inputs"
+  },
+  "form-item-message-margin-top-compact": {
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "Space between input and messages for compact label size with text inputs"
+  },
+  "form-item-message-margin-top-selection-large": {
+    "value": "1.25rem",
+    "type": "spacing",
+    "description": "Space between selection controls and messages for large label size"
+  },
+  "form-item-message-margin-top-selection-regular": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Space between selection controls and messages for regular label size"
   },
-  "form-item-message-margin-top": {
+  "form-item-message-margin-top-selection-compact": {
     "value": "{space.s}",
-    "type": "spacing"
+    "type": "spacing",
+    "description": "Space between selection controls and messages for compact label size"
+  },
+  "form-item-message-stack-gap": {
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "Space between error and helper messages when both present"
+  },
+  "form-item-message-stack-gap-compact": {
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "Space between error and helper messages for compact size"
   },
   "form-item-message-typography": {
     "value": "{typography.body.xs}",
-    "type": "other"
+    "type": "other",
+    "description": "Typography for error and helper messages"
   },
   "form-item-optional-label-color": {
-    "value": "{color.greyscale.700}",
-    "type": "color"
+    "value": "{color.greyscale.600}",
+    "type": "color",
+    "description": "Color for optional and required indicator text"
   },
   "form-item-optional-label-typography": {
     "value": "{typography.body.xs}",
-    "type": "other"
+    "type": "other",
+    "description": "Typography for optional and required indicator text"
   }
-}
+}