@abgov/design-tokens 1.4.2 → 1.5.0

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

@@ -0,0 +1,98 @@
+{
+  "step-border": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{step-color-border-active}"
+    },
+    "type": "border"
+  },
+  "step-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "step-color-bg-active": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "step-color-bg-complete": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "step-color-bg-incomplete": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "step-color-border": {
+    "value": "{color.greyscale.400}",
+    "type": "color"
+  },
+  "step-color-border-active": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "step-color-border-complete": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "step-color-border-incomplete": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "step-color-label": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "step-color-step-number": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "step-color-sublabel": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "step-gap-small-screen": {
+    "value": "0px",
+    "type": "spacing"
+  },
+  "step-padding": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "step-padding-vertical": {
+    "value": "{space.2xs} {space.l}",
+    "type": "spacing"
+  },
+  "step-size": {
+    "value": "2.5rem",
+    "type": "sizing"
+  },
+  "step-typography-label": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "step-typography-label-active": {
+    "value": "{typography.heading.xs}",
+    "type": "other"
+  },
+  "step-typography-step-number": {
+    "value": "{typography.heading.xs}",
+    "type": "other"
+  },
+  "step-typography-sublabel": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "stepper-color-line": {
+    "value": "{color.greyscale.200}",
+    "type": "color"
+  },
+  "stepper-color-line-active": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "stepper-line-thickness": {
+    "value": "4px",
+    "type": "sizing"
+  }
+}

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

@@ -0,0 +1,70 @@
+{
+  "app-header-border-bottom": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "app-header-border-top-menu-item": {
+    "value": "inset 0 1px 0 0 {color.greyscale.200}",
+    "type": "other"
+  },
+  "app-header-border-bottom-menu-item": {
+    "value": "inset 0 -1px 0 0 {color.greyscale.200}",
+    "type": "other"
+  },
+  "app-header-padding-nav-item-with-children": {
+    "value": "{space.m} {space.s} {space.s}",
+    "type": "spacing"
+  },
+  "app-header-padding-secondary-nav-item-in-menu": {
+    "value": "9px {space.m} 9px {space.xl}",
+    "type": "spacing"
+  },
+  "app-header-padding-secondary-nav-item-in-menu-mobile": {
+    "value": "9px {space.m} 9px 80px",
+    "type": "spacing"
+  },
+  "app-header-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "app-header-color-text-nav-item": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "app-header-color-text-nav-item-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "app-header-color-text-nav-item-focus": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "app-header-color-text-nav-item-current": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "app-header-color-menu-button": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "app-header-color-menu-button-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "app-header-color-menu-button-focus": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "app-header-padding-desktop": {
+    "value": "{space.3xl}",
+    "type": "spacing"
+  },
+  "app-header-padding-logo-mobile": {
+    "value": "{space.s} {space.m}",
+    "type": "spacing"
+  }
+}

package/data/component-design-tokens/hero-banner-design-tokens.json

@@ -0,0 +1,22 @@
+{
+  "hero-banner-padding": {
+    "value": "{space.2xl} 0",
+    "type": "spacing"
+  },
+  "hero-banner-mobile-padding": {
+    "value": "{space.xl} 0",
+    "type": "spacing"
+  },
+  "hero-banner-content-gap": {
+    "value": "{space.l} 0 0",
+    "type": "spacing"
+  },
+  "hero-banner-heading": {
+    "value": "{typography.heading.xl}",
+    "type": "other"
+  },
+  "hero-banner-content": {
+    "value": "{typography.body.l}",
+    "type": "other"
+  }
+}

package/data/component-design-tokens/icon-button-design-tokens.json

@@ -0,0 +1,74 @@
+{
+  "icon-button-default-color": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "icon-button-default-hover-color": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "icon-button-default-focus-color": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "icon-button-default-hover-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "icon-button-default-disabled-color": {
+    "value": "{color.interactive.disabled}",
+    "type": "color"
+  },
+  "icon-button-light-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "icon-button-light-hover-color-bg": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "icon-button-light-disabled-color": {
+    "value": "{color.greyscale.500}",
+    "type": "color"
+  },
+  "icon-button-dark-color": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "icon-button-dark-hover-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "icon-button-dark-disabled-color-bg": {
+    "value": "{color.greyscale.500}",
+    "type": "color"
+  },
+  "icon-button-destructive-color": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "icon-button-destructive-hover-color-bg": {
+    "value": "{color.emergency.light}",
+    "type": "color"
+  },
+  "icon-button-destructive-disabled-color": {
+    "value": "{color.interactive.error-disabled}",
+    "type": "color"
+  },
+  "icon-button-large-border-radius": {
+    "value": "{borderRadius.xl}",
+    "type": "borderRadius"
+  },
+  "icon-button-medium-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "icon-button-large-padding": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "icon-button-medium-padding": {
+    "value": "{space.2xs}",
+    "type": "spacing"
+  }
+}

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

@@ -0,0 +1,90 @@
+{
+  "text-input-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.700}",
+    "type": "other"
+  },
+  "text-input-border-disabled": {
+    "value": {
+      "width": "1px",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "text-input-border-error": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "type": "other"
+  },
+  "text-input-border-focus": {
+    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "type": "other"
+  },
+  "text-input-border-hover": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "type": "other"
+  },
+  "text-input-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "text-input-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "text-input-color-bg-disabled": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "text-input-color-icon-disabled": {
+    "value": "{color.greyscale.500}",
+    "type": "color"
+  },
+  "text-input-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "text-input-color-text-disabled": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "text-input-color-text-placeholder": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "text-input-lt-content-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "text-input-lt-content-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "text-input-padding": {
+    "value": "7px {text-input-padding-lr} 9px",
+    "type": "spacing"
+  },
+  "text-input-padding-lr": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "text-input-space-btw-icon-text": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "text-input-size-icon": {
+    "value": "",
+    "type": "sizing"
+  },
+  "text-input-color-icon": {
+    "value": "",
+    "type": "color"
+  },
+  "text-input-transition": {
+    "value": "box-shadow 0.05s ease-in",
+    "type": "other"
+  },
+  "text-input-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  }
+}

package/data/component-design-tokens/microsite-header-design-tokens.json

@@ -0,0 +1,66 @@
+{
+  "microsite-header-alpha-badge-color": {
+    "value": "{color.warning.default}",
+    "type": "color"
+  },
+  "microsite-header-alpha-badge-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "microsite-header-beta-badge-color": {
+    "value": "{color.brand.default}",
+    "type": "color"
+  },
+  "microsite-header-beta-badge-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "microsite-header-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "microsite-header-color-links": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "microsite-header-color-links-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "microsite-header-color-version-number": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "microsite-header-gap": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "microsite-header-link-focus-border": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "microsite-header-padding-large-screen": {
+    "value": "{space.2xs} {space.3xl}",
+    "type": "spacing"
+  },
+  "microsite-header-padding-medium-screen": {
+    "value": "{space.2xs} {space.xl}",
+    "type": "spacing"
+  },
+  "microsite-header-padding-small-screen": {
+    "value": "{space.2xs} {space.m}",
+    "type": "spacing"
+  },
+  "microsite-header-typography": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "microsite-header-typography-version-number": {
+    "value": "{fontSize.1}",
+    "type": "other"
+  }
+}

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

@@ -0,0 +1,53 @@
+{
+  "modal-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "modal-callout-bar-padding": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "modal-callout-bar-padding-small-screen": {
+    "value": "{space.s} {space.s} {space.s} {space.l}",
+    "type": "spacing"
+  },
+  "modal-content-gap": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "modal-content-gap-small-screen": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "modal-header-typography": {
+    "value": "{typography.heading.m}",
+    "type": "other"
+  },
+  "modal-overlay-color": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "modal-padding": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "modal-padding-small-screen": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "modal-shadow": {
+    "value": {
+      "x": "6",
+      "y": "6",
+      "blur": "6",
+      "spread": "6",
+      "color": "rgba(0,0,0,0.16)",
+      "type": "dropShadow"
+    },
+    "type": "boxShadow"
+  },
+  "modal-overlay-opacity": {
+    "value": "{opacity.background.modal}",
+    "type": "opacity"
+  }
+}

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

@@ -0,0 +1,90 @@
+{
+  "notification-banner-emergency-color-bg": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "notification-banner-emergency-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-emergency-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "notification-banner-event-color-bg": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-event-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-event-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "notification-banner-gap": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "notification-banner-important-color-bg": {
+    "value": "{color.warning.default}",
+    "type": "color"
+  },
+  "notification-banner-important-color-icon": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "notification-banner-important-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "notification-banner-information-color-bg": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-information-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-information-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "notification-banner-padding-lr-large-screen": {
+    "value": "{space.3xl}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-lr-medium-screen": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-lr-small-screen": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-tb": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "notification-banner-size-icon": {
+    "value": "{iconSize.4}",
+    "type": "sizing"
+  },
+  "notification-banner-text-size": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "notification-banner-custom-color-bg": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-custom-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-custom-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "popover-border-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "popover-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "popover-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "popover-padding": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "popover-shadow": {
+    "value": {
+      "x": "0",
+      "y": "3",
+      "blur": "6",
+      "spread": "0",
+      "color": "rgba(0, 0, 0, 0.25)",
+      "type": "dropShadow"
+    },
+    "type": "boxShadow"
+  }
+}

package/data/component-design-tokens/progress-indicator-design-tokens.json

@@ -0,0 +1,22 @@
+{
+  "circular-progress-color-background": {
+    "value": "rgba(255, 255, 255, 0.9)",
+    "type": "color"
+  },
+  "circular-progress-large-margin-top": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "circular-progress-large-text": {
+    "value": "{typography.body.l}",
+    "type": "other"
+  },
+  "circular-progress-small-margin-top": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "circular-progress-small-text": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  }
+}