@abgov/design-tokens 1.10.0 → 2.0.0

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

@@ -1,6 +1,6 @@
 {
   "accordion-color-bg-heading": {
-    "value": "{color.greyscale.100}",
+    "value": "{color.greyscale.white}",
     "type": "color"
   },
   "accordion-color-bg-content": {
@@ -13,7 +13,7 @@
   },
   "accordion-border": {
     "value": {
-      "color": "{color.greyscale.200}",
+      "color": "{color.greyscale.100}",
       "width": "{borderWidth.s}",
       "style": "solid"
     },
@@ -21,22 +21,45 @@
   },
   "accordion-divider": {
     "value": {
-      "color": "{color.greyscale.200}",
+      "color": "{color.greyscale.100}",
+      "width": "{borderWidth.s}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "accordion-divider-hover": {
+    "value": {
+      "color": "{color.greyscale.black}",
       "width": "{borderWidth.s}",
       "style": "solid"
     },
     "type": "border"
   },
   "accordion-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{borderRadius.xl}",
     "type": "borderRadius"
   },
+  "accordion-border-radius-focus": {
+    "value": "{borderRadius.xl} {borderRadius.xl} {borderRadius.xs} {borderRadius.xs}",
+    "type": "borderRadius",
+    "description": "when the accordion is focused and open"
+  },
   "accordion-padding-heading-icon-left": {
-    "value": "{space.s} {space.m} {space.s} 0",
+    "value": "{space.xs} {space.m} {space.xs} 0",
     "type": "spacing",
     "description": "padding of accordion heading when icon is positioned on the left"
   },
   "accordion-padding-heading-icon-right": {
+    "value": "{space.xs} 0 {space.xs} {space.m}",
+    "type": "spacing",
+    "description": "padding of accordion heading when icon is positioned on the right"
+  },
+  "accordion-padding-heading-m-icon-left": {
+    "value": "{space.s} {space.m} {space.s} 0",
+    "type": "spacing",
+    "description": "padding of accordion heading when icon is positioned on the left"
+  },
+  "accordion-padding-heading-m-icon-right": {
     "value": "{space.s} 0 {space.s} {space.m}",
     "type": "spacing",
     "description": "padding of accordion heading when icon is positioned on the right"
@@ -50,20 +73,50 @@
     "type": "spacing"
   },
   "accordion-color-bg-heading-hover": {
-    "value": "{color.greyscale.200}",
+    "value": "{color.greyscale.50}",
     "type": "color"
   },
   "accordion-color-heading-hover": {
     "value": "{color.text.default}",
     "type": "color"
   },
-  "accordion-heading-s": {
-    "value": "{typography.heading.s}",
-    "type": "other"
+  "accordion-border-focus": {
+    "value": {
+      "color": "{color.interactive.focus}",
+      "width": "3px",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "accordion-border-hover": {
+    "value": {
+      "color": "{color.greyscale.black}",
+      "width": "{borderWidth.s}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
+  "accordion-heading": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.4}",
+      "letterSpacing": "{letterSpacing.2xs}"
+    },
+    "type": "typography",
+    "description": "Small accordion heading - 16px/22px with -0.5px letter-spacing"
   },
   "accordion-heading-m": {
-    "value": "{typography.heading.m}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.medium}",
+      "fontSize": "{fontSize.5}",
+      "lineHeight": "{lineHeight.5}",
+      "letterSpacing": "{letterSpacing.2xs}"
+    },
+    "type": "typography",
+    "description": "Medium accordion heading - 18px/24px with -0.5px letter-spacing"
   },
   "accordion-shadow": {
     "value": {
@@ -75,5 +128,33 @@
       "type": "dropShadow"
     },
     "type": "boxShadow"
+  },
+  "accordion-icon-color": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "accordion-icon-color-hover": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "accordion-heading-min-height": {
+    "value": "3rem",
+    "type": "size"
+  },
+  "accordion-heading-m-min-height": {
+    "value": "4rem",
+    "type": "size"
+  },
+  "accordion-heading-secondary-text": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "accordion-heading-m-secondary-text": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "accordion-heading-secondary-text-color": {
+    "value": "{color.text.default}",
+    "type": "color"
   }
 }

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

@@ -1,6 +1,11 @@
 {
   "badge-padding": {
-    "value": "0px {space.xs}",
+    "value": "0 {space.xs}",
+    "type": "spacing",
+    "description": "0px 8px"
+  },
+  "badge-padding-large": {
+    "value": "0 {space.xs}",
     "type": "spacing",
     "description": "0px 8px"
   },
@@ -14,83 +19,167 @@
     "type": "fontSizes",
     "description": "14px"
   },
+  "badge-font-size-large": {
+    "value": "{fontSize.3}",
+    "type": "fontSizes",
+    "description": "16px"
+  },
   "badge-line-height": {
     "value": "{lineHeight.1}",
     "type": "lineHeights",
     "description": "20px"
   },
+  "badge-line-height-large": {
+    "value": "{lineHeight.2}",
+    "type": "lineHeights",
+    "description": "22px"
+  },
   "badge-icon-size": {
-    "value": "{iconSize.1}",
+    "value": "{iconSize.s}",
     "type": "sizing",
-    "description": "16px"
+    "description": "18px"
+  },
+  "badge-icon-size-large": {
+    "value": "{iconSize.m}",
+    "type": "sizing",
+    "description": "20px"
   },
   "badge-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{borderRadius.s}",
     "type": "borderRadius",
-    "description": "4px"
+    "description": "6px"
+  },
+  "badge-border-width": {
+    "value": "{borderWidth.s}",
+    "type": "borderWidth",
+    "description": "1px"
+  },
+  "badge-height": {
+    "value": "24px",
+    "type": "sizing"
+  },
+  "badge-height-large": {
+    "value": "32px",
+    "type": "sizing"
   },
   "badge-info-color-bg": {
-    "value": "{color.greyscale.100}",
+    "value": "{color.info.default}",
     "type": "color"
   },
   "badge-info-color-content": {
-    "value": "{color.info.default}",
+    "value": "{color.info.textInverse}",
+    "type": "color"
+  },
+  "badge-info-subtle-color-bg": {
+    "value": "{color.info.light}",
     "type": "color"
   },
+  "badge-info-subtle-color-content": {
+    "value": "{color.info.textDark}",
+    "type": "color"
+  },
+  "badge-info-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.info.border}",
+    "type": "dropShadow"
+  },
   "badge-success-color-bg": {
     "value": "{color.success.default}",
     "type": "color"
   },
   "badge-success-color-content": {
-    "value": "{color.text.light}",
+    "value": "{color.success.textInverse}",
     "type": "color"
   },
+  "badge-success-subtle-color-bg": {
+    "value": "{color.success.light}",
+    "type": "color"
+  },
+  "badge-success-subtle-color-content": {
+    "value": "{color.success.textDark}",
+    "type": "color"
+  },
+  "badge-success-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.success.border}",
+    "type": "dropShadow"
+  },
   "badge-important-color-bg": {
     "value": "{color.warning.default}",
     "type": "color"
   },
   "badge-important-color-content": {
-    "value": "{color.text.default}",
+    "value": "{color.warning.textDark}",
+    "type": "color"
+  },
+  "badge-important-subtle-color-bg": {
+    "value": "{color.warning.light}",
+    "type": "color"
+  },
+  "badge-important-subtle-color-content": {
+    "value": "{color.warning.textDark}",
     "type": "color"
   },
+  "badge-important-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.warning.border}",
+    "type": "dropShadow"
+  },
   "badge-emergency-color-bg": {
     "value": "{color.emergency.default}",
     "type": "color"
   },
   "badge-emergency-color-content": {
-    "value": "{color.text.light}",
+    "value": "{color.emergency.textInverse}",
     "type": "color"
   },
-  "badge-dark-color-bg": {
-    "value": "{color.greyscale.black}",
+  "badge-emergency-subtle-color-bg": {
+    "value": "{color.emergency.light}",
     "type": "color"
   },
-  "badge-dark-color-content": {
-    "value": "{color.text.light}",
+  "badge-emergency-subtle-color-content": {
+    "value": "{color.emergency.textDark}",
     "type": "color"
   },
-  "badge-midtone-color-bg": {
-    "value": "{color.greyscale.700}",
+  "badge-emergency-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.emergency.border}",
+    "type": "dropShadow"
+  },
+  "badge-default-color-bg": {
+    "value": "{color.greyscale.800}",
     "type": "color"
   },
-  "badge-midtone-color-content": {
+  "badge-default-color-content": {
     "value": "{color.text.light}",
     "type": "color"
   },
-  "badge-light-color-bg": {
-    "value": "{color.greyscale.white}",
+  "badge-default-subtle-color-bg": {
+    "value": "{color.greyscale.100}",
     "type": "color"
   },
-  "badge-light-color-content": {
+  "badge-default-subtle-color-content": {
     "value": "{color.text.default}",
     "type": "color"
   },
-  "badge-height": {
-    "value": "22px",
-    "type": "sizing"
+  "badge-default-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "type": "dropShadow"
+  },
+  "badge-archived-color-bg": {
+    "value": "{color.greyscale.200}",
+    "type": "color"
+  },
+  "badge-archived-color-content": {
+    "value": "{color.greyscale.800}",
+    "type": "color"
+  },
+  "badge-archived-subtle-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "badge-archived-subtle-color-content": {
+    "value": "{color.text.default}",
+    "type": "color"
   },
-  "badge-border": {
-    "value": "inset 0 0 {borderWidth.s} 0 rgba(0, 0, 0, 0.5)",
-    "type": "other"
+  "badge-archived-subtle-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "type": "dropShadow"
   }
 }