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/input-design-tokens.json CHANGED Viewed

@@ -1,80 +1,68 @@
 {
   "text-input-border": {
-    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.700}",
+    "value": "inset 0 0 0 {input.borderWidth.default} {input.color.border.default}",
     "type": "other"
   },
   "text-input-border-disabled": {
-    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "value": "inset 0 0 0 {input.borderWidth.default} {input.color.border.disabled}",
     "type": "other"
   },
   "text-input-border-error": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "value": "inset 0 0 0 {input.borderWidth.hover} {input.color.border.error}",
     "type": "other"
   },
   "text-input-border-focus": {
-    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "value": "inset 0 0 0 {input.borderWidth.focus} {input.color.border.focus}",
     "type": "other"
   },
   "text-input-border-hover": {
-    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "value": "inset 0 0 0 {input.borderWidth.hover} {input.color.border.hover}",
     "type": "other"
   },
   "text-input-border-radius": {
-    "value": "{borderRadius.m}",
+    "value": "{input.borderRadius.input}",
     "type": "borderRadius"
   },
   "text-input-color-bg": {
-    "value": "{color.greyscale.white}",
+    "value": "{input.color.background.default}",
     "type": "color"
   },
   "text-input-color-bg-disabled": {
-    "value": "{color.greyscale.100}",
+    "value": "{input.color.background.disabled}",
     "type": "color"
   },
   "text-input-color-icon-disabled": {
-    "value": "{color.greyscale.500}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "text-input-color-text": {
-    "value": "{color.text.default}",
+    "value": "{input.color.text.default}",
     "type": "color"
   },
   "text-input-color-text-disabled": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.disabled}",
     "type": "color"
   },
   "text-input-color-text-placeholder": {
-    "value": "{color.text.secondary}",
+    "value": "{input.color.text.placeholder}",
     "type": "color"
   },
   "text-input-lt-content-color-bg": {
-    "value": "{color.greyscale.100}",
-    "type": "color"
-  },
-  "text-input-lt-content-color-text": {
-    "value": "{color.text.default}",
+    "value": "{color.greyscale.150}",
     "type": "color"
   },
   "text-input-padding": {
-    "value": "7px {text-input-padding-lr} 9px",
+    "value": "9px {text-input-padding-lr} 11px",
     "type": "spacing"
   },
   "text-input-padding-lr": {
-    "value": "{space.s}",
+    "value": "{space.m}",
     "type": "spacing"
   },
   "text-input-space-btw-icon-text": {
     "value": "{space.xs}",
     "type": "spacing"
   },
-  "text-input-size-icon": {
-    "value": "{iconSize.4}",
-    "type": "sizing"
-  },
-  "text-input-color-icon": {
-    "value": "{color.greyscale.black}",
-    "type": "color"
-  },
   "text-input-transition": {
     "value": "box-shadow 0.05s ease-in",
     "type": "other"
@@ -82,5 +70,41 @@
   "text-input-typography": {
     "value": "{typography.body.m}",
     "type": "other"
+  },
+  "text-input-height": {
+    "value": "56px",
+    "type": "sizing"
+  },
+  "text-input-height-compact": {
+    "value": "40px",
+    "type": "sizing"
+  },
+  "text-input-padding-compact-lr": {
+    "value": "{space.s}",
+    "type": "spacing"
+  },
+  "text-input-padding-compact": {
+    "value": "{space.2xs} {text-input-padding-compact-lr}",
+    "type": "spacing"
+  },
+  "text-input-typography-compact": {
+    "value": "{typography.body.s}",
+    "type": "other"
+  },
+  "text-input-space-btw-icon-text-compact": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "text-input-border-readonly": {
+    "value": "inset 0 0 0 {input.borderWidth.default} {input.color.border.readonly}",
+    "type": "other"
+  },
+  "text-input-color-bg-readonly": {
+    "value": "{input.color.background.readonly}",
+    "type": "color"
+  },
+  "text-input-lt-content-color-bg-readonly": {
+    "value": "{input.color.background.readonly-content}",
+    "type": "color"
   }
-}
+}

package/data/component-design-tokens/link-design-tokens.json ADDED Viewed

@@ -0,0 +1,115 @@
+{
+  "link-typography-xsmall": {
+    "value": "{fontWeight.regular} {fontSize.2}/{lineHeight.1} {fontFamily.sans}",
+    "type": "other",
+    "description": "body.xs - fontSize.2/lineHeight.1"
+  },
+  "link-typography-small": {
+    "value": "{fontWeight.regular} {fontSize.3}/{lineHeight.2} {fontFamily.sans}",
+    "type": "other",
+    "description": "body.s - fontSize.3/lineHeight.2"
+  },
+  "link-typography-medium": {
+    "value": "{fontWeight.regular} {fontSize.4}/{lineHeight.3} {fontFamily.sans}",
+    "type": "other",
+    "description": "body.m - fontSize.4/lineHeight.3"
+  },
+  "link-typography-large": {
+    "value": "{fontWeight.regular} {fontSize.6}/{lineHeight.5} {fontFamily.sans}",
+    "type": "other",
+    "description": "body.l - fontSize.6/lineHeight.5"
+  },
+  "link-gap": {
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "4px - V1 default gap between text and icons"
+  },
+  "link-gap-xsmall": {
+    "value": "0.125rem",
+    "type": "spacing",
+    "description": "2px"
+  },
+  "link-gap-small": {
+    "value": "0.1875rem",
+    "type": "spacing",
+    "description": "3px"
+  },
+  "link-gap-medium": {
+    "value": "{space.2xs}",
+    "type": "spacing",
+    "description": "4px"
+  },
+  "link-gap-large": {
+    "value": "0.3125rem",
+    "type": "spacing",
+    "description": "5px"
+  },
+  "link-icon-size-xsmall": {
+    "value": "0.75rem",
+    "type": "sizing",
+    "description": "12px - 2xsmall"
+  },
+  "link-icon-size-small": {
+    "value": "{iconSize.1}",
+    "type": "sizing",
+    "description": "16px - xsmall"
+  },
+  "link-icon-size-medium": {
+    "value": "{iconSize.2}",
+    "type": "sizing",
+    "description": "18px - small"
+  },
+  "link-icon-size-large": {
+    "value": "{iconSize.3}",
+    "type": "sizing",
+    "description": "20px - medium"
+  },
+  "link-color-interactive-default": {
+    "value": "{color.interactive.default}",
+    "type": "color"
+  },
+  "link-color-interactive-hover": {
+    "value": "{color.interactive.hover}",
+    "type": "color"
+  },
+  "link-color-interactive-visited": {
+    "value": "{color.interactive.visited}",
+    "type": "color"
+  },
+  "link-color-dark-default": {
+    "value": "{color.greyscale.black}",
+    "type": "color"
+  },
+  "link-color-dark-hover": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "link-color-dark-visited": {
+    "value": "{color.interactive.visited}",
+    "type": "color"
+  },
+  "link-color-light-default": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "link-color-light-hover": {
+    "value": "{color.greyscale.150}",
+    "type": "color"
+  },
+  "link-color-light-visited": {
+    "value": "#9D8EBB",
+    "type": "color"
+  },
+  "link-border-radius-focus": {
+    "value": "{borderRadius.s}",
+    "type": "borderRadius"
+  },
+  "link-border-focus": {
+    "value": "{borderWidth.l} solid {color.interactive.focus}",
+    "type": "other"
+  },
+  "link-focus-offset": {
+    "value": "{space.3xs}",
+    "type": "spacing"
+  }
+}

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

@@ -1,7 +1,8 @@
 {
   "modal-border-radius": {
-    "value": "{borderRadius.m}",
-    "type": "borderRadius"
+    "value": "{borderRadius.xl}",
+    "type": "borderRadius",
+    "description": "Modal container border radius"
   },
   "modal-callout-bar-padding": {
     "value": "{space.xl}",
@@ -12,16 +13,24 @@
     "type": "spacing"
   },
   "modal-content-gap": {
-    "value": "{space.l}",
-    "type": "spacing"
+    "value": "0",
+    "type": "spacing",
+    "description": "Space below header section"
   },
   "modal-content-gap-small-screen": {
-    "value": "{space.m}",
-    "type": "spacing"
+    "value": "0",
+    "type": "spacing",
+    "description": "Space below header section on mobile"
   },
   "modal-header-typography": {
-    "value": "{typography.heading.m}",
-    "type": "other"
+    "value": {
+      "fontFamily": "{fontFamily.sans}",
+      "fontWeight": "{fontWeight.semiBold}",
+      "fontSize": "{fontSize.4}",
+      "lineHeight": "{lineHeight.4}"
+    },
+    "type": "typography",
+    "description": "Modal heading typography: semibold, 18px, 28px line-height"
   },
   "modal-overlay-color": {
     "value": "{color.greyscale.black}",
@@ -36,18 +45,194 @@
     "type": "spacing"
   },
   "modal-shadow": {
-    "value": {
-      "x": "6",
-      "y": "6",
-      "blur": "6",
-      "spread": "6",
-      "color": "rgba(0,0,0,0.16)",
-      "type": "dropShadow"
-    },
-    "type": "boxShadow"
+    "value": [
+      {
+        "x": "0",
+        "y": "0",
+        "blur": "4",
+        "spread": "0",
+        "color": "rgba(0,0,0,0.1)",
+        "type": "dropShadow"
+      },
+      {
+        "x": "0",
+        "y": "8",
+        "blur": "40",
+        "spread": "0",
+        "color": "rgba(0,0,0,0.2)",
+        "type": "dropShadow"
+      }
+    ],
+    "type": "boxShadow",
+    "description": "Two-layer elevation shadow for modal"
   },
   "modal-overlay-opacity": {
     "value": "{opacity.background.modal}",
     "type": "opacity"
+  },
+  "modal-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Modal background color"
+  },
+  "modal-pane-width": {
+    "value": "90%",
+    "type": "sizing",
+    "description": "Modal container width"
+  },
+  "modal-border": {
+    "value": "{borderWidth.s} solid {color.greyscale.150}",
+    "type": "other",
+    "description": "Subtle border for modal container"
+  },
+  "modal-content-margin": {
+    "value": "0",
+    "type": "spacing",
+    "description": "Content section margin for desktop"
+  },
+  "modal-content-margin-mobile": {
+    "value": "0",
+    "type": "spacing",
+    "description": "Content section margin for mobile"
+  },
+  "modal-max-width": {
+    "value": "480px",
+    "type": "sizing",
+    "description": "Modal maximum width"
+  },
+  "modal-heading-border-bottom": {
+    "value": "{borderWidth.s} solid {color.greyscale.150}",
+    "type": "other",
+    "description": "Heading section bottom border separator"
+  },
+  "modal-heading-padding": {
+    "value": "20px {space.l}",
+    "type": "spacing",
+    "description": "Heading section padding"
+  },
+  "modal-content-padding": {
+    "value": "{space.l} {space.l} {space.xl} {space.l}",
+    "type": "spacing",
+    "description": "Content section padding"
+  },
+  "modal-actions-padding": {
+    "value": "0 {space.xl} {space.xl} {space.xl}",
+    "type": "spacing",
+    "description": "Actions section padding"
+  },
+  "modal-content-wrapper-padding": {
+    "value": "0",
+    "type": "spacing",
+    "description": "Outer content wrapper padding"
+  },
+  "modal-scrollable-padding-desktop": {
+    "value": "0",
+    "type": "spacing",
+    "description": "Scrollable component horizontal padding for desktop"
+  },
+  "modal-scrollable-padding-mobile": {
+    "value": "0",
+    "type": "spacing",
+    "description": "Scrollable component horizontal padding for mobile"
+  },
+  "modal-callout-heading-padding": {
+    "value": "{space.m} {space.l}",
+    "type": "spacing",
+    "description": "Callout variant heading padding"
+  },
+  "modal-heading-padding-mobile": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Heading section padding for mobile (16px all around)"
+  },
+  "modal-callout-heading-padding-mobile": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Callout variant heading padding for mobile (16px all around)"
+  },
+  "modal-content-padding-mobile": {
+    "value": "{space.l} {space.m} {space.xl} {space.m}",
+    "type": "spacing",
+    "description": "Content section padding for mobile (24px top, 16px sides, 32px bottom)"
+  },
+  "modal-actions-padding-mobile": {
+    "value": "0 {space.m} {space.m} {space.m}",
+    "type": "spacing",
+    "description": "Actions section padding for mobile (0 top, 16px sides and bottom)"
+  },
+  "modal-callout-information-bg": {
+    "value": "{color.info.light}",
+    "type": "color",
+    "description": "Information callout heading background"
+  },
+  "modal-callout-information-border": {
+    "value": "{color.info.border}",
+    "type": "color",
+    "description": "Information callout heading border"
+  },
+  "modal-callout-information-icon": {
+    "value": "{color.info.default}",
+    "type": "color",
+    "description": "Information callout icon color"
+  },
+  "modal-callout-success-bg": {
+    "value": "{color.success.background}",
+    "type": "color",
+    "description": "Success callout heading background"
+  },
+  "modal-callout-success-border": {
+    "value": "{color.success.border}",
+    "type": "color",
+    "description": "Success callout heading border"
+  },
+  "modal-callout-success-icon": {
+    "value": "{color.success.default}",
+    "type": "color",
+    "description": "Success callout icon color"
+  },
+  "modal-callout-important-bg": {
+    "value": "{color.warning.background}",
+    "type": "color",
+    "description": "Important callout heading background"
+  },
+  "modal-callout-important-border": {
+    "value": "{color.warning.border}",
+    "type": "color",
+    "description": "Important callout heading border"
+  },
+  "modal-callout-important-icon": {
+    "value": "{color.warning.dark}",
+    "type": "color",
+    "description": "Important callout icon color"
+  },
+  "modal-callout-emergency-bg": {
+    "value": "{color.emergency.background}",
+    "type": "color",
+    "description": "Emergency callout heading background"
+  },
+  "modal-callout-emergency-border": {
+    "value": "{color.emergency.border}",
+    "type": "color",
+    "description": "Emergency callout heading border"
+  },
+  "modal-callout-emergency-icon": {
+    "value": "{color.emergency.default}",
+    "type": "color",
+    "description": "Emergency callout icon color"
+  },
+  "modal-callout-event-bg": {
+    "value": "{color.info.light}",
+    "type": "color",
+    "description": "Event callout heading background (uses info colors)"
+  },
+  "modal-callout-event-border": {
+    "value": "{color.info.border}",
+    "type": "color",
+    "description": "Event callout heading border (uses info colors)"
+  },
+  "modal-callout-event-icon": {
+    "value": "{color.info.default}",
+    "type": "color",
+    "description": "Event callout icon color"
   }
 }

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

@@ -86,5 +86,157 @@
   "notification-banner-custom-color-text": {
     "value": "{color.text.light}",
     "type": "color"
+  },
+  "notification-banner-gap-compact": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-tb-compact": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-lr-small-screen-compact": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-lr-medium-screen-compact": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "notification-banner-padding-lr-large-screen-compact": {
+    "value": "{space.2xl}",
+    "type": "spacing"
+  },
+  "notification-banner-information-high-color-bg": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-information-high-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "notification-banner-information-high-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-information-low-color-bg": {
+    "value": "{color.info.light}",
+    "type": "color"
+  },
+  "notification-banner-information-low-color-text": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-information-low-color-icon": {
+    "value": "{color.info.default}",
+    "type": "color"
+  },
+  "notification-banner-information-low-color-border": {
+    "value": "{color.info.border}",
+    "type": "color"
+  },
+  "notification-banner-important-high-color-bg": {
+    "value": "{color.important.default}",
+    "type": "color"
+  },
+  "notification-banner-important-high-color-text": {
+    "value": "{color.important.text-dark}",
+    "type": "color"
+  },
+  "notification-banner-important-high-color-icon": {
+    "value": "{color.important.text-dark}",
+    "type": "color"
+  },
+  "notification-banner-important-low-color-bg": {
+    "value": "{color.important.light}",
+    "type": "color"
+  },
+  "notification-banner-important-low-color-text": {
+    "value": "{color.important.text}",
+    "type": "color"
+  },
+  "notification-banner-important-low-color-icon": {
+    "value": "{color.important.text}",
+    "type": "color"
+  },
+  "notification-banner-important-low-color-border": {
+    "value": "{color.important.border}",
+    "type": "color"
+  },
+  "notification-banner-emergency-high-color-bg": {
+    "value": "{color.emergency.default}",
+    "type": "color"
+  },
+  "notification-banner-emergency-high-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "notification-banner-emergency-high-color-icon": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "notification-banner-emergency-low-color-bg": {
+    "value": "{color.emergency.light}",
+    "type": "color"
+  },
+  "notification-banner-emergency-low-color-text": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "notification-banner-emergency-low-color-icon": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "notification-banner-emergency-low-color-border": {
+    "value": "{color.emergency.border}",
+    "type": "color"
+  },
+  "notification-banner-information-high-focus-border": {
+    "value": "0 0 0 3px {color.greyscale.white}",
+    "type": "other"
+  },
+  "notification-banner-information-low-focus-border": {
+    "value": "0 0 0 3px {color.info.dark}",
+    "type": "other"
+  },
+  "notification-banner-important-high-focus-border": {
+    "value": "0 0 0 3px {color.important.text-dark}",
+    "type": "other"
+  },
+  "notification-banner-important-low-focus-border": {
+    "value": "0 0 0 3px {color.important.text-dark}",
+    "type": "other"
+  },
+  "notification-banner-emergency-high-focus-border": {
+    "value": "0 0 0 3px {color.greyscale.white}",
+    "type": "other"
+  },
+  "notification-banner-emergency-low-focus-border": {
+    "value": "0 0 0 3px {color.emergency.dark}",
+    "type": "other"
+  },
+  "notification-banner-information-high-close-bg-hover": {
+    "value": "{color.info.dark}",
+    "type": "color"
+  },
+  "notification-banner-information-low-close-bg-hover": {
+    "value": "{color.info.border}",
+    "type": "color"
+  },
+  "notification-banner-important-high-close-bg-hover": {
+    "value": "{color.important.border}",
+    "type": "color"
+  },
+  "notification-banner-important-low-close-bg-hover": {
+    "value": "{color.important.default}",
+    "type": "color"
+  },
+  "notification-banner-emergency-high-close-bg-hover": {
+    "value": "{color.emergency.dark}",
+    "type": "color"
+  },
+  "notification-banner-emergency-low-close-bg-hover": {
+    "value": "{color.emergency.border}",
+    "type": "color"
   }
 }

package/data/component-design-tokens/pagination-design-tokens.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "pagination-gap": {
+    "value": "{space.m}",
+    "type": "spacing",
+    "description": "Gap between page selector and navigation controls"
+  },
+  "pagination-text-size": {
+    "value": "{typography.body.m}",
+    "type": "other",
+    "description": "Typography for 'Page' and 'of X' labels"
+  },
+  "pagination-text-color": {
+    "value": "{color.text.default}",
+    "type": "color",
+    "description": "Color for 'Page' and 'of X' labels"
+  }
+}