@abgov/design-tokens 1.4.2 → 1.5.0

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

@@ -12,7 +12,153 @@
     "type": "border"
   },
   "container-padding": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "container-padding-compact": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "container-heading": {
+    "value": "{typography.heading.s}",
+    "type": "other"
+  },
+  "container-heading-padding": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "container-heading-gap": {
     "value": "{space.l}",
     "type": "spacing"
+  },
+  "container-accent-thick-height": {
+    "value": "{space.m}",
+    "type": "dimension",
+    "description": "Height of the thick container accent bar"
+  },
+  "container-accent-thin-height": {
+    "value": "{space.xs}",
+    "type": "dimension",
+    "description": "Height of the thin container accent bar"
+  },
+  "container-interactive-bg-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "container-interactive-heading-bg-color": {
+    "value": "{color.brand.default}",
+    "type": "color"
+  },
+  "container-interactive-heading-text-color": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "container-interactive-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.brand.default}"
+    },
+    "type": "border"
+  },
+  "container-non-interactive-bg-color": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "container-non-interactive-heading-bg-color": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "container-non-interactive-heading-text-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "container-non-interactive-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "container-info-bg-color": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "container-info-heading-bg-color": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "container-info-heading-text-color": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "container-info-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.info.default}"
+    },
+    "type": "border"
+  },
+  "container-error-bg-color": {
+    "value": "{color.emergency.background}",
+    "type": "color"
+  },
+  "container-error-heading-bg-color": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "container-error-heading-text-color": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "container-error-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.emergency.default}"
+    },
+    "type": "border"
+  },
+  "container-success-bg-color": {
+    "value": "{color.success.background}",
+    "type": "color"
+  },
+  "container-success-heading-bg-color": {
+    "value": "{color.success.default}",
+    "type": "color"
+  },
+  "container-success-heading-text-color": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "container-success-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.success.default}"
+    },
+    "type": "border"
+  },
+  "container-important-bg-color": {
+    "value": "{color.warning.background}",
+    "type": "color"
+  },
+  "container-important-heading-bg-color": {
+    "value": "{color.warning.default}",
+    "type": "color"
+  },
+  "container-important-heading-text-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "container-important-border": {
+    "value": {
+      "color": "{color.warning.default}",
+      "width": "{borderWidth.s}",
+      "style": "solid"
+    },
+    "type": "border"
   }
 }

package/data/component-design-tokens/date-picker-design-tokens.json

@@ -0,0 +1,102 @@
+{
+  "date-input-calendar-width": {
+    "value": "280px",
+    "type": "dimension"
+  },
+  "date-input-calendar-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "date-input-day-of-week-font": {
+    "value": "{typography.heading.xs}",
+    "type": "other"
+  },
+  "date-input-day-font": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "date-input-day-of-week-margin": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "date-input-day-font-today": {
+    "value": "{typography.heading.xs}",
+    "type": "other"
+  },
+  "date-input-day-underline-today": {
+    "value": {
+      "color": "{color.interactive.default}",
+      "width": "{borderWidth.l}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "date-input-day-underline-today-width": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "date-input-day-underline-today-selected": {
+    "value": {
+      "color": "{color.greyscale.white}",
+      "width": "{borderWidth.l}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "date-input-day-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "date-input-day-size": {
+    "value": "2.5rem",
+    "type": "dimension"
+  },
+  "date-input-day-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "date-input-day-color-bg": {
+    "value": "transparent",
+    "type": "color"
+  },
+  "date-input-day-color-text-hover": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "date-input-day-color-bg-hover": {
+    "value": "{color.greyscale.200}",
+    "type": "color"
+  },
+  "date-input-day-border-focus": {
+    "value": {
+      "color": "{color.interactive.focus}",
+      "width": "{borderWidth.l}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "date-input-day-color-text-selected": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "date-input-day-color-bg-selected": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "date-input-day-color-text-selected-hover": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "date-input-day-color-bg-selected-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "date-input-day-color-text-other-month": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "date-input-day-color-text-disabled": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  }
+}

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

@@ -0,0 +1,84 @@
+{
+  "details-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius",
+    "description": "4px"
+  },
+  "details-color-bg-hover": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "details-color-text": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "details-color-text-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "details-content-left-border": {
+    "value": {
+      "width": "4px",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "details-content-margin-left": {
+    "value": "17px",
+    "type": "spacing"
+  },
+  "details-content-padding-bottom": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "details-content-padding-left": {
+    "value": "19px",
+    "type": "spacing"
+  },
+  "details-content-padding-right": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "details-content-padding-top": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "details-focus-border": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "details-margin-bottom": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "details-padding-bottom": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "details-padding-left": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "details-padding-right": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "details-padding-top": {
+    "value": "6px",
+    "type": "spacing",
+    "description": "6px"
+  },
+  "details-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "details-text-decoration": {
+    "value": "underline",
+    "type": "textDecoration"
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "divider-color": {
+    "value": "{color.greyscale.200}",
+    "type": "color"
+  }
+}

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

@@ -0,0 +1,110 @@
+{
+  "dropdown-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.700}",
+    "type": "other"
+  },
+  "dropdown-border-disabled": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "type": "other"
+  },
+  "dropdown-border-error": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "type": "other"
+  },
+  "dropdown-border-focus": {
+    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "type": "other"
+  },
+  "dropdown-border-hover": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "type": "other"
+  },
+  "dropdown-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "dropdown-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "dropdown-color-bg-disabled": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "dropdown-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "dropdown-color-text-disabled": {
+    "value": "{color.text.disabled}",
+    "type": "color"
+  },
+  "dropdown-color-text-placeholder": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "dropdown-item-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "dropdown-item-color-bg-disabled": {
+    "value": "",
+    "type": "color"
+  },
+  "dropdown-item-color-bg-hover": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "dropdown-item-color-bg-selected": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "dropdown-item-color-bg-selected-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "dropdown-item-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "dropdown-item-color-text-disabled": {
+    "value": "",
+    "type": "color"
+  },
+  "dropdown-item-color-text-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "dropdown-item-color-text-selected": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "dropdown-item-color-text-selected-hover": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "dropdown-item-padding": {
+    "value": "7px {dropdown-padding-lr} 9px",
+    "type": "spacing"
+  },
+  "dropdown-padding": {
+    "value": "6px {dropdown-padding-lr} 8px",
+    "type": "spacing"
+  },
+  "dropdown-padding-lr": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "dropdown-space-icon-text": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "dropdown-transition": {
+    "value": "box-shadow 0.05s ease-in",
+    "type": "other"
+  },
+  "dropdown-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  }
+}

package/data/component-design-tokens/file-uploader-design-tokens.json

@@ -0,0 +1,102 @@
+{
+  "file-upload-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "dashed",
+      "color": "{color.interactive.default}"
+    },
+    "type": "border"
+  },
+  "file-upload-border-active": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "file-upload-border-drag": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "file-upload-border-focus": {
+    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "type": "other"
+  },
+  "file-upload-border-hover": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "dashed",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "file-upload-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "file-upload-color-bg": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "file-upload-color-bg-active": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "file-upload-color-bg-drag": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "file-upload-color-bg-focus": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "file-upload-color-bg-hover": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "file-upload-help-text": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "file-upload-help-text-color": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "file-upload-instruction-color": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "file-upload-instruction-color-active": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "file-upload-instruction-color-drag": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "file-upload-instruction-color-focus": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "file-upload-instruction-color-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "file-upload-instruction-text": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "file-upload-padding": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "file-upload-text-gap": {
+    "value": "{space.m}",
+    "type": "spacing"
+  }
+}

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

@@ -0,0 +1,74 @@
+{
+  "footer-border-bottom": {
+    "value": {
+      "width": "1rem",
+      "style": "solid",
+      "color": "{color.brand.default}"
+    },
+    "type": "border"
+  },
+  "footer-border-top": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "footer-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "footer-color-links": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "footer-color-links-hover": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "footer-link-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "footer-padding-large-screen": {
+    "value": "{space.2xl} {space.3xl}",
+    "type": "spacing"
+  },
+  "footer-padding-medium-screen": {
+    "value": "{space.2xl} {space.xl}",
+    "type": "spacing"
+  },
+  "footer-padding-small-screen": {
+    "value": "{space.xl} {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}",
+    "type": "spacing"
+  },
+  "footer-meta-links-gap-small-screen": {
+    "value": "20px",
+    "type": "spacing"
+  }
+}

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

@@ -0,0 +1,46 @@
+{
+  "form-item-error-message-color": {
+    "value": "{color.interactive.error}",
+    "type": "color"
+  },
+  "form-item-help-message-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "form-item-label-large-padding-bottom": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "form-item-label-large-typography": {
+    "value": "{typography.heading.l}",
+    "type": "other"
+  },
+  "form-item-label-padding-bottom": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "form-item-label-typography": {
+    "value": "{typography.heading.s}",
+    "type": "other"
+  },
+  "form-item-message-gap": {
+    "value": "{space.2xs}",
+    "type": "spacing"
+  },
+  "form-item-message-margin-top": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "form-item-message-typography": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "form-item-optional-label-color": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "form-item-optional-label-typography": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  }
+}