npm - @abgov/design-tokens - Versions diffs - 1.9.0 → 2.0.0 - Mend

@abgov/design-tokens 1.9.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/data/component-design-tokens/callout-design-tokens.json CHANGED Viewed

@@ -1,134 +1,218 @@
 {
+  "callout-border": {
+    "value": {
+      "color": "{color.greyscale.150}",
+      "width": "{borderWidth.s}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
   "callout-border-radius": {
-    "value": "{borderRadius.none}",
+    "value": "{borderRadius.xl}",
     "type": "borderRadius"
   },
-  "callout-m-border-width": {
-    "value": "0px",
-    "type": "borderWidth"
+  "callout-heading-gap": {
+    "value": "{space.xs}",
+    "type": "spacing"
   },
-  "callout-l-border-width": {
-    "value": "0px",
-    "type": "borderWidth"
+  "callout-heading-typography": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.2}",
+      "letterSpacing": "{letterSpacing.2xs}"
+    },
+    "type": "typography"
   },
-  "callout-l-icon-size": {
-    "value": "{iconSize.m}",
-    "type": "sizing"
+  "callout-heading-color": {
+    "value": "{color.text.default}",
+    "type": "color"
   },
-  "callout-l-content-padding": {
-    "value": "{space.l}",
+  "callout-heading-padding": {
+    "value": "{space.s} {space.s} {space.s} 1.125rem",
     "type": "spacing"
   },
-  "callout-l-content-gap": {
-    "value": "{space.m}",
-    "type": "spacing"
+  "callout-body-typography": {
+    "value": "{typography.body.s}",
+    "type": "other"
   },
-  "callout-l-statusbar-padding": {
-    "value": "{space.l} {space.s}",
-    "type": "spacing"
+  "callout-body-color": {
+    "value": "{color.text.secondary}",
+    "type": "color"
   },
-  "callout-m-icon-size": {
-    "value": "{iconSize.s}",
-    "type": "sizing"
+  "callout-body-padding": {
+    "value": "1.25rem",
+    "type": "spacing",
+    "description": "20px"
   },
-  "callout-m-content-padding": {
-    "value": "{space.s}",
-    "type": "spacing"
+  "callout-l-with-heading-body-padding": {
+    "value": "0 1.25rem 1.25rem",
+    "type": "spacing",
+    "description": "14px 12px 16px 0px"
   },
-  "callout-m-content-gap": {
-    "value": "{space.2xs}",
+  "callout-l-without-heading-body-padding": {
+    "value": "0.875rem {space.s} {space.m} 0",
     "type": "spacing"
   },
-  "callout-m-statusbar-padding": {
-    "value": "{space.s} {space.2xs}",
-    "type": "spacing"
+  "callout-h-info-heading-color": {
+    "value": "{color.text.light}",
+    "type": "color"
   },
-  "callout-info-color-bg-content": {
-    "value": "{color.greyscale.100}",
+  "callout-h-important-heading-color": {
+    "value": "{color.text.default}",
     "type": "color"
   },
-  "callout-info-color-bg-statusbar": {
-    "value": "{color.info.default}",
+  "callout-h-success-heading-color": {
+    "value": "{color.text.light}",
     "type": "color"
   },
-  "callout-info-icon-color": {
-    "value": "{color.greyscale.white}",
+  "callout-h-emergency-heading-color": {
+    "value": "{color.text.light}",
     "type": "color"
   },
-  "callout-info-border-color": {
-    "value": "none",
+  "callout-h-info-border-color": {
+    "value": "{color.info.border}",
     "type": "color"
   },
-  "callout-warning-color-bg-content": {
-    "value": "{color.greyscale.100}",
+  "callout-l-info-border-color": {
+    "value": "{color.info.border}",
     "type": "color"
   },
-  "callout-warning-color-bg-statusbar": {
-    "value": "{color.warning.default}",
+  "callout-h-important-border-color": {
+    "value": "{color.warning.border}",
+    "type": "color"
+  },
+  "callout-l-important-border-color": {
+    "value": "{color.warning.border}",
+    "type": "color"
+  },
+  "callout-h-success-border-color": {
+    "value": "{color.success.border}",
     "type": "color"
   },
-  "callout-warning-icon-color": {
-    "value": "{color.greyscale.black}",
+  "callout-l-success-border-color": {
+    "value": "{color.success.border}",
     "type": "color"
   },
-  "callout-warning-border-color": {
-    "value": "none",
+  "callout-h-emergency-border-color": {
+    "value": "{color.emergency.border}",
     "type": "color"
   },
-  "callout-success-color-bg-content": {
-    "value": "{color.greyscale.100}",
+  "callout-l-emergency-border-color": {
+    "value": "{color.emergency.border}",
     "type": "color"
   },
-  "callout-success-color-bg-statusbar": {
+  "callout-info-heading-bg-color": {
+    "value": "{color.info.light}",
+    "type": "color"
+  },
+  "callout-h-info-heading-bg-color": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "callout-important-heading-bg-color": {
+    "value": "{color.warning.light}",
+    "type": "color"
+  },
+  "callout-h-important-heading-bg-color": {
+    "value": "{color.warning.default}",
+    "type": "color"
+  },
+  "callout-success-heading-bg-color": {
+    "value": "{color.success.light}",
+    "type": "color"
+  },
+  "callout-h-success-heading-bg-color": {
     "value": "{color.success.default}",
     "type": "color"
   },
-  "callout-success-icon-color": {
+  "callout-emergency-heading-bg-color": {
+    "value": "{color.emergency.light}",
+    "type": "color"
+  },
+  "callout-h-emergency-heading-bg-color": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "callout-info-content-bg-color": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "callout-success-border-color": {
-    "value": "none",
+  "callout-h-info-content-bg-color": {
+    "value": "{color.info.background}",
     "type": "color"
   },
-  "callout-emergency-color-bg-content": {
-    "value": "{color.greyscale.100}",
+  "callout-l-info-content-bg-color": {
+    "value": "{color.info.background}",
     "type": "color"
   },
-  "callout-emergency-color-bg-statusbar": {
-    "value": "{color.emergency.default}",
+  "callout-important-content-bg-color": {
+    "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "callout-emergency-border-color": {
-    "value": "none",
+  "callout-h-important-content-bg-color": {
+    "value": "{color.warning.background}",
     "type": "color"
   },
-  "callout-emergency-icon-color": {
+  "callout-l-important-content-bg-color": {
+    "value": "{color.warning.background}",
+    "type": "color"
+  },
+  "callout-success-content-bg-color": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "callout-event-icon-color": {
+  "callout-h-success-content-bg-color": {
+    "value": "{color.success.background}",
+    "type": "color"
+  },
+  "callout-l-success-content-bg-color": {
+    "value": "{color.success.background}",
+    "type": "color"
+  },
+  "callout-emergency-content-bg-color": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "callout-l-heading": {
-    "value": "{typography.heading.m}",
-    "type": "other"
+  "callout-h-emergency-content-bg-color": {
+    "value": "{color.emergency.background}",
+    "type": "color"
   },
-  "callout-l-text-size": {
-    "value": "{typography.body.m}",
-    "type": "other"
+  "callout-l-emergency-content-bg-color": {
+    "value": "{color.emergency.background}",
+    "type": "color"
   },
-  "callout-m-heading-size": {
-    "value": "{typography.heading.xs}",
-    "type": "other"
+  "callout-info-icon-color": {
+    "value": "{color.info.default}",
+    "type": "color"
   },
-  "callout-l-heading-size": {
-    "value": "{typography.heading.m}",
-    "type": "other"
+  "callout-h-info-icon-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
   },
-  "callout-m-text-size": {
-    "value": "{typography.body.s}",
-    "type": "other"
+  "callout-important-icon-color": {
+    "value": "{color.warning.dark}",
+    "type": "color"
+  },
+  "callout-h-important-icon-color": {
+    "value": "{color.greyscale.800}",
+    "type": "color"
+  },
+  "callout-success-icon-color": {
+    "value": "{color.success.default}",
+    "type": "color"
+  },
+  "callout-h-success-icon-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "callout-emergency-icon-color": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "callout-h-emergency-icon-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
   }
 }

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

@@ -1,17 +1,17 @@
 {
   "checkbox-border": {
     "value": {
-      "width": "{borderWidth.s}",
+      "width": "{input.borderWidth.default}",
       "style": "solid",
-      "color": "{color.greyscale.700}"
+      "color": "{input.color.border.default}"
     },
     "type": "border"
   },
   "checkbox-border-disabled": {
     "value": {
-      "width": "{borderWidth.s}",
+      "width": "{input.borderWidth.default}",
       "style": "solid",
-      "color": "{color.greyscale.400}"
+      "color": "{input.color.border.default}"
     },
     "type": "border"
   },
@@ -27,7 +27,7 @@
     "value": {
       "width": "{borderWidth.m}",
       "style": "solid",
-      "color": "{color.interactive.error}"
+      "color": "{input.color.border.error}"
     },
     "type": "border"
   },
@@ -35,7 +35,7 @@
     "value": {
       "width": "{borderWidth.l}",
       "style": "solid",
-      "color": "{color.interactive.focus}"
+      "color": "{input.color.border.focus}"
     },
     "type": "border"
   },
@@ -43,17 +43,24 @@
     "value": {
       "width": "{borderWidth.m}",
       "style": "solid",
-      "color": "{color.interactive.hover}"
+      "color": "{input.color.border.hover}"
+    },
+    "type": "border"
+  },
+  "checkbox-border-error-hover": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{input.color.border.error-hover}"
     },
     "type": "border"
   },
   "checkbox-border-radius": {
-    "value": "2px",
-    "type": "borderRadius",
-    "description": "2px"
+    "value": "{input.borderRadius.checkbox}",
+    "type": "borderRadius"
   },
   "checkbox-color-bg": {
-    "value": "{color.greyscale.white}",
+    "value": "{input.color.background.default}",
     "type": "color"
   },
   "checkbox-color-bg-checked": {
@@ -61,7 +68,7 @@
     "type": "color"
   },
   "checkbox-color-bg-checked-disabled": {
-    "value": "{color.interactive.disabled}",
+    "value": "{color.greyscale.300}",
     "type": "color"
   },
   "checkbox-color-bg-checked-error": {
@@ -72,12 +79,16 @@
     "value": "{color.interactive.hover}",
     "type": "color"
   },
+  "checkbox-color-bg-checked-error-hover": {
+    "value": "{color.interactive.error-hover}",
+    "type": "color"
+  },
   "checkbox-color-label": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.secondary}",
     "type": "color"
   },
   "checkbox-color-label-disabled": {
-    "value": "{color.greyscale.500}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "checkbox-description-font-size": {
@@ -85,6 +96,10 @@
     "type": "other"
   },
   "checkbox-gap": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "checkbox-gap-compact": {
     "value": "{space.xs}",
     "type": "spacing"
   },
@@ -92,6 +107,10 @@
     "value": "{typography.body.m}",
     "type": "other"
   },
+  "checkbox-label-font-size-compact": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
   "checkbox-size": {
     "value": "{space.l}",
     "type": "sizing"

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

@@ -1,16 +1,20 @@
 {
   "container-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{borderRadius.xl}",
     "type": "borderRadius"
   },
   "container-border": {
     "value": {
-      "color": "{color.greyscale.200}",
+      "color": "{color.greyscale.150}",
       "width": "{borderWidth.s}",
       "style": "solid"
     },
     "type": "border"
   },
+  "container-shadow": {
+    "value": "{shadow.200}",
+    "type": "other"
+  },
   "container-padding": {
     "value": "{space.xl}",
     "type": "spacing"
@@ -20,11 +24,11 @@
     "type": "spacing"
   },
   "container-heading": {
-    "value": "{typography.heading.s}",
+    "value": "{typography.heading.xs}",
     "type": "other"
   },
   "container-heading-padding": {
-    "value": "{space.xs}",
+    "value": "{space.s}",
     "type": "spacing"
   },
   "container-heading-gap": {
@@ -62,11 +66,11 @@
     "type": "border"
   },
   "container-non-interactive-bg-color": {
-    "value": "{color.greyscale.100}",
+    "value": "{color.greyscale.50}",
     "type": "color"
   },
   "container-non-interactive-heading-bg-color": {
-    "value": "{color.greyscale.100}",
+    "value": "{color.greyscale.50}",
     "type": "color"
   },
   "container-non-interactive-heading-text-color": {
@@ -77,7 +81,7 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.greyscale.200}"
+      "color": "{color.greyscale.150}"
     },
     "type": "border"
   },
@@ -97,7 +101,7 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.info.default}"
+      "color": "{color.info.border}"
     },
     "type": "border"
   },
@@ -117,7 +121,7 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.emergency.default}"
+      "color": "{color.emergency.border}"
     },
     "type": "border"
   },
@@ -137,7 +141,7 @@
     "value": {
       "width": "{borderWidth.s}",
       "style": "solid",
-      "color": "{color.success.default}"
+      "color": "{color.success.border}"
     },
     "type": "border"
   },
@@ -155,7 +159,7 @@
   },
   "container-important-border": {
     "value": {
-      "color": "{color.warning.default}",
+      "color": "{color.warning.border}",
       "width": "{borderWidth.s}",
       "style": "solid"
     },

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

@@ -3,12 +3,20 @@
     "value": "280px",
     "type": "dimension"
   },
+  "date-input-calendar-border": {
+    "value": {
+      "color": "{input.color.border.default}",
+      "width": "{input.borderWidth.default}",
+      "style": "solid"
+    },
+    "type": "border"
+  },
   "date-input-calendar-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{input.borderRadius.input}",
     "type": "borderRadius"
   },
   "date-input-day-of-week-font": {
-    "value": "{typography.heading.xs}",
+    "value": "{typography.heading.2xs}",
     "type": "other"
   },
   "date-input-day-font": {
@@ -20,13 +28,13 @@
     "type": "spacing"
   },
   "date-input-day-font-today": {
-    "value": "{typography.heading.xs}",
+    "value": "{typography.heading.2xs}",
     "type": "other"
   },
   "date-input-day-underline-today": {
     "value": {
       "color": "{color.interactive.default}",
-      "width": "{borderWidth.l}",
+      "width": "{borderWidth.xl}",
       "style": "solid"
     },
     "type": "border"
@@ -44,7 +52,7 @@
     "type": "border"
   },
   "date-input-day-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{borderRadius.xs}",
     "type": "borderRadius"
   },
   "date-input-day-size": {
@@ -52,7 +60,7 @@
     "type": "dimension"
   },
   "date-input-day-color-text": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.default}",
     "type": "color"
   },
   "date-input-day-color-bg": {
@@ -60,11 +68,11 @@
     "type": "color"
   },
   "date-input-day-color-text-hover": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.default}",
     "type": "color"
   },
   "date-input-day-color-bg-hover": {
-    "value": "{color.greyscale.200}",
+    "value": "{color.greyscale.150}",
     "type": "color"
   },
   "date-input-day-border-focus": {
@@ -75,6 +83,10 @@
     },
     "type": "border"
   },
+  "date-input-day-today-outline-offset": {
+    "value": "{space.3xs}",
+    "type": "spacing"
+  },
   "date-input-day-color-text-selected": {
     "value": "{color.text.light}",
     "type": "color"
@@ -92,11 +104,15 @@
     "type": "color"
   },
   "date-input-day-color-text-other-month": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "date-input-day-color-text-disabled": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
+  },
+  "date-input-cursor": {
+    "value": "pointer",
+    "type": "other"
   }
 }

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

@@ -5,11 +5,11 @@
     "description": "4px"
   },
   "details-color-bg-hover": {
-    "value": "{color.greyscale.100}",
+    "value": "transparent",
     "type": "color"
   },
   "details-color-text": {
-    "value": "{color.interactive.default}",
+    "value": "{color.text.default}",
     "type": "color"
   },
   "details-color-text-hover": {
@@ -18,14 +18,14 @@
   },
   "details-content-left-border": {
     "value": {
-      "width": "4px",
+      "width": "{borderWidth.s}",
       "style": "solid",
       "color": "{color.greyscale.200}"
     },
     "type": "border"
   },
   "details-content-margin-left": {
-    "value": "17px",
+    "value": "19px",
     "type": "spacing"
   },
   "details-content-padding-bottom": {
@@ -46,7 +46,7 @@
   },
   "details-focus-border": {
     "value": {
-      "width": "{borderWidth.l}",
+      "width": "{borderWidth.xl}",
       "style": "solid",
       "color": "{color.interactive.focus}"
     },
@@ -74,11 +74,34 @@
     "description": "6px"
   },
   "details-typography": {
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.4}",
+      "letterSpacing": "{letterSpacing.2xs}"
+    },
+    "type": "typography",
+    "description": "Medium heading - 18px/24px with -0.5px letter-spacing"
+  },
+  "details-content-typography": {
     "value": "{typography.body.m}",
     "type": "other"
   },
   "details-text-decoration": {
     "value": "underline",
     "type": "textDecoration"
+  },
+  "details-icon-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "details-icon-color-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "details-heading-width": {
+    "value": "fit-content",
+    "type": "other"
   }
 }