@abgov/design-tokens 1.4.3 → 1.5.0

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

@@ -33,10 +33,13 @@
   },
   "accordion-padding-heading-icon-left": {
     "value": "{space.s} {space.m} {space.s} 0",
-    "type": "spacing"
+    "type": "spacing",
+    "description": "padding of accordion heading when icon is positioned on the left"
   },
   "accordion-padding-heading-icon-right": {
-    "value": "{space.s} 0 {space.s} {space.m}"
+    "value": "{space.s} 0 {space.s} {space.m}",
+    "type": "spacing",
+    "description": "padding of accordion heading when icon is positioned on the right"
   },
   "accordion-padding-content-wide": {
     "value": "{space.l} {space.l} {space.xl} 56px",
@@ -73,5 +76,4 @@
     },
     "type": "boxShadow"
   }
-}
-
+}

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

@@ -0,0 +1,103 @@
+{
+  "badge-padding": {
+    "value": "0px {space.xs}",
+    "type": "spacing",
+    "description": "0px 8px"
+  },
+  "badge-gap": {
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "4px"
+  },
+  "badge-font-size": {
+    "value": "{fontSize.2}",
+    "type": "fontSizes",
+    "description": "14px"
+  },
+  "badge-line-height": {
+    "value": "{lineHeight.1}",
+    "type": "lineHeights",
+    "description": "20px"
+  },
+  "badge-icon-size": {
+    "value": "{iconSize.1}",
+    "type": "sizing",
+    "description": "16px"
+  },
+  "badge-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius",
+    "description": "4px"
+  },
+  "badge-info-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "badge-info-color-content": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "badge-success-color-bg": {
+    "value": "{color.success.default}",
+    "type": "color"
+  },
+  "badge-success-color-content": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "badge-important-color-bg": {
+    "value": "{color.warning.default}",
+    "type": "color"
+  },
+  "badge-important-color-content": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "badge-emergency-color-bg": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "badge-emergency-color-content": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "badge-dark-color-bg": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "badge-dark-color-content": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "badge-midtone-color-bg": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "badge-midtone-color-content": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "badge-light-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "badge-light-color-content": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "badge-height": {
+    "value": "22px",
+    "type": "sizing"
+  },
+  "badge-border": {
+    "value": {
+      "x": "0",
+      "y": "0",
+      "blur": "0",
+      "spread": "{borderWidth.s}",
+      "color": "rgba(0,0,0,0.5)",
+      "type": "innerShadow"
+    },
+    "type": "boxShadow"
+  }
+}

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

@@ -5,22 +5,340 @@
   },
   "button-padding-lr": {
     "value": "{space.s}",
-    "type": "spacing"
+    "type": "spacing",
+    "description": "12px"
   },
   "button-padding-lr-compact": {
     "value": "{space.xs}",
-    "type": "spacing"
+    "type": "spacing",
+    "description": "8px"
+  },
+  "button-padding-lr-start": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "16px"
   },
   "button-height": {
-    "value": "42px",
-    "type": "sizing"
+    "value": "2.625rem",
+    "type": "sizing",
+    "description": "42px"
   },
   "button-height-compact": {
-    "value": "32px",
-    "type": "sizing"
+    "value": "2rem",
+    "type": "sizing",
+    "description": "32px"
+  },
+  "button-height-start": {
+    "value": "3.25rem",
+    "type": "sizing",
+    "description": "52px"
   },
   "button-text": {
-    "value": "{typography.button.default}",
-    "type": "other"
+    "value": "{fontFamily.sans} {fontWeight.regular} {fontSize.5} {lineHeight.1} {button-letter-spacing}",
+    "type": "other",
+    "description": "typography for default button size"
+  },
+  "button-text-compact": {
+    "value": "{fontFamily.sans} {fontWeight.regular} {fontSize.4} {lineHeight.05} {button-letter-spacing}",
+    "type": "other",
+    "description": "typography for compact button size"
+  },
+  "button-text-start": {
+    "value": "{fontFamily.sans} {fontWeight.bold} {fontSize.5} {lineHeight.1} {button-letter-spacing}",
+    "type": "other",
+    "description": "typography for start button size"
+  },
+  "button-gap": {
+    "value": "{space.xs}",
+    "type": "spacing",
+    "description": "8px"
+  },
+  "button-compact-gap": {
+    "value": "0.375rem",
+    "type": "spacing",
+    "description": "6px"
+  },
+  "button-icon-size": {
+    "value": "{iconSize.3}",
+    "type": "sizing",
+    "description": "20px"
+  },
+  "button-compact-icon-size": {
+    "value": "{iconSize.2}",
+    "type": "sizing",
+    "description": "18px"
+  },
+  "button-primary-color-bg": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "button-primary-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "button-primary-border": {
+    "value": {
+      "color": "rgba(0,0,0,0)",
+      "width": "{borderWidth.none}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "button-primary-hover-color-bg": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-primary-hover-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "button-primary-hover-border": {
+    "value": {
+      "color": "rgba(0,0,0,0)",
+      "width": "{borderWidth.none}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "button-primary-focus-color-bg": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-primary-focus-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "button-primary-focus-border": {
+    "value": {
+      "color": "rgba(0,0,0,0)",
+      "width": "{borderWidth.none}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "button-primary-destructive-color-bg": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "button-primary-destructive-hover-color-bg": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-primary-destructive-hover-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "button-primary-destructive-focus-color-bg": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-primary-inverse-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "button-primary-inverse-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "button-primary-inverse-hover-color-bg": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-primary-inverse-hover-color-text": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "button-primary-inverse-focus-color-bg": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-secondary-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "button-secondary-color-text": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "button-secondary-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.default}"
+    },
+    "type": "border"
+  },
+  "button-secondary-hover-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "button-secondary-hover-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-secondary-hover-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "button-secondary-focus-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "button-secondary-focus-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-secondary-focus-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "button-secondary-destructive-color-text": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "button-secondary-destructive-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.emergency.default}"
+    },
+    "type": "border"
+  },
+  "button-secondary-destructive-hover-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.emergency.dark}"
+    },
+    "type": "border"
+  },
+  "button-secondary-destructive-hover-color-text": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-secondary-destructive-focus-color-text": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-secondary-inverse-color-text": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "button-secondary-inverse-color-bg": {
+    "value": "none",
+    "type": "color"
+  },
+  "button-secondary-inverse-hover-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-secondary-inverse-focus-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-secondary-destructive-focus-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.emergency.dark}"
+    },
+    "type": "border"
+  },
+  "button-secondary-inverse-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.greyscale.white}"
+    },
+    "type": "border"
+  },
+  "button-secondary-inverse-hover-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "button-secondary-inverse-focus-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "button-tertiary-color-bg": {
+    "value": "none",
+    "type": "color"
+  },
+  "button-tertiary-color-bg-mobile": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "button-tertiary-color-text": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "button-tertiary-border": {
+    "value": {
+      "color": "rgba(0,0,0,0)",
+      "width": "{borderWidth.none}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "button-tertiary-hover-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "button-tertiary-hover-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-tertiary-focus-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "button-tertiary-focus-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-tertiary-destructive-color-text": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "button-tertiary-destructive-hover-color-text": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-tertiary-destructive-focus-color-text": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "button-tertiary-inverse-color-text": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "button-tertiary-inverse-hover-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-tertiary-inverse-focus-color-text": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "button-letter-spacing": {
+    "value": "0.0125rem",
+    "type": "letterSpacing",
+    "description": "subtle letter spacing in the button for better readability"
   }
 }

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

@@ -0,0 +1,12 @@
+{
+  "button-group-gap": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "16px"
+  },
+  "button-group-compact-gap": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "12px"
+  }
+}

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

@@ -0,0 +1,99 @@
+{
+  "checkbox-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.700}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-disabled": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.400}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-disabled-error": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "#F58185"
+    },
+    "type": "border"
+  },
+  "checkbox-border-error": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.error}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-hover": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-radius": {
+    "value": "2px",
+    "type": "borderRadius",
+    "description": "2px"
+  },
+  "checkbox-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "checkbox-color-bg-checked": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "checkbox-color-bg-checked-disabled": {
+    "value": "{color.interactive.disabled}",
+    "type": "color"
+  },
+  "checkbox-color-bg-checked-error": {
+    "value": "{color.interactive.error}",
+    "type": "color"
+  },
+  "checkbox-color-bg-checked-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "checkbox-color-label": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "checkbox-color-label-disabled": {
+    "value": "{color.greyscale.500}",
+    "type": "color"
+  },
+  "checkbox-description-font-size": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "checkbox-gap": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "checkbox-label-font-size": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "checkbox-size": {
+    "value": "{space.l}",
+    "type": "sizing"
+  }
+}