@abgov/design-tokens 2.2.1 → 2.2.3

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

@@ -70,7 +70,7 @@
     "type": "color"
   },
   "container-non-interactive-heading-bg-color": {
-    "value": "{color.greyscale.50}",
+    "value": "{color.greyscale.100}",
     "type": "color"
   },
   "container-non-interactive-heading-text-color": {

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

@@ -106,5 +106,9 @@
   "text-input-lt-content-color-bg-readonly": {
     "value": "{input.color.background.readonly-content}",
     "type": "color"
+  },
+  "text-input-color-icon": {
+    "value": "{color.greyscale.600}",
+    "type": "color"
   }
 }

package/data/component-design-tokens/work-side-menu-design-tokens.json

@@ -1,4 +1,8 @@
 {
+  "work-side-menu-height": {
+    "value": "100vh",
+    "type": "spacing"
+  },
   "work-side-menu-width-open": {
     "value": "17.5rem",
     "type": "spacing"
@@ -20,7 +24,7 @@
     "type": "other"
   },
   "work-side-menu-account-shadow": {
-    "value": "0px 12px 20px -8px rgba(26, 26, 26, 0.24)",
+    "value": "{shadow.500}",
     "type": "other"
   },
   "work-side-menu-text-color": {
@@ -30,5 +34,41 @@
   "work-side-menu-mobile-bg": {
     "value": "{color.greyscale.50}",
     "type": "color"
+  },
+  "work-side-menu-transition-duration-medium": {
+    "value": "{motionDuration.medium-2}",
+    "type": "other"
+  },
+  "work-side-menu-top-section-border": {
+    "value": "{borderWidth.s} solid transparent",
+    "type": "other"
+  },
+  "work-side-menu-top-section-shadow": {
+    "value": "0 4px 6px -4px rgba(0, 0, 0, 0)",
+    "type": "other"
+  },
+  "work-side-menu-top-section-border-scrolled": {
+    "value": "{borderWidth.s} solid {color.greyscale.200}",
+    "type": "other"
+  },
+  "work-side-menu-top-section-shadow-scrolled": {
+    "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    "type": "other"
+  },
+  "work-side-menu-bottom-section-border": {
+    "value": "{borderWidth.s} solid transparent",
+    "type": "other"
+  },
+  "work-side-menu-bottom-section-shadow": {
+    "value": "0 -4px 6px -4px rgba(0, 0, 0, 0)",
+    "type": "other"
+  },
+  "work-side-menu-bottom-section-border-scrolled": {
+    "value": "{borderWidth.s} solid {color.greyscale.200}",
+    "type": "other"
+  },
+  "work-side-menu-bottom-section-shadow-scrolled": {
+    "value": "0 -4px 6px -4px rgba(0, 0, 0, 0.1)",
+    "type": "other"
   }
 }

package/data/goa-global-design-tokens.json

@@ -66,7 +66,7 @@
         "type": "color"
       },
       "secondary": {
-        "value": "{color.greyscale.800}",
+        "value": "{color.greyscale.600}",
         "type": "color"
       },
       "light": {

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 30 Mar 2026 15:39:38 GMT
+ * Generated on Mon, 13 Apr 2026 16:49:30 GMT
  */
 
 :root {
@@ -215,10 +215,14 @@
   --goa-work-side-menu-item-icon-display: flex;
   --goa-work-side-menu-group-item-min-height: 1.75rem;
   --goa-work-side-menu-group-padding: 0 0 0 0.75rem;
-  --goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
+  --goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
+  --goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
+  --goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
   --goa-work-side-menu-color-bg: transparent;
   --goa-work-side-menu-width-closed: 4.5rem;
   --goa-work-side-menu-width-open: 17.5rem;
+  --goa-work-side-menu-height: 100vh;
   --goa-tooltip-max-width: 400px;
   --goa-temporary-notification-animation-distance: 100px;
   --goa-temporary-notification-transition-duration: 0.3s;
@@ -387,7 +391,7 @@
   --goa-typography-heading-2xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
   --goa-color-text-disabled: var(--goa-color-greyscale-700);
   --goa-color-text-light: var(--goa-color-greyscale-white);
-  --goa-color-text-secondary: var(--goa-color-greyscale-800);
+  --goa-color-text-secondary: var(--goa-color-greyscale-600);
   --goa-color-text-default: var(--goa-color-greyscale-black);
   --goa-color-interactive-disabled: var(--goa-color-greyscale-300);
   --goa-work-side-menu-item-text-color: var(--goa-color-greyscale-600);
@@ -402,8 +406,14 @@
   --goa-work-side-menu-group-item-padding: var(--goa-space-2xs) var(--goa-space-xs);
   --goa-work-side-menu-group-margin: var(--goa-space-xs) 0 0.375rem 1.125rem;
   --goa-work-side-menu-group-border: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
+  --goa-work-side-menu-bottom-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  --goa-work-side-menu-bottom-section-border: var(--goa-border-width-s) solid transparent;
+  --goa-work-side-menu-top-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  --goa-work-side-menu-top-section-border: var(--goa-border-width-s) solid transparent;
+  --goa-work-side-menu-transition-duration-medium: var(--goa-motion-duration-medium-2);
   --goa-work-side-menu-mobile-bg: var(--goa-color-greyscale-50);
   --goa-work-side-menu-text-color: var(--goa-color-greyscale-600);
+  --goa-work-side-menu-account-shadow: var(--goa-shadow-500);
   --goa-work-side-menu-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
   --goa-work-side-menu-border-radius: var(--goa-border-radius-m);
   --goa-tooltip-padding: var(--goa-space-m);
@@ -668,6 +678,7 @@
   --goa-linear-progress-color-track: var(--goa-color-greyscale-200);
   --goa-linear-progress-border-radius: var(--goa-border-radius-m);
   --goa-linear-progress-height: var(--goa-space-2xs);
+  --goa-text-input-color-icon: var(--goa-color-greyscale-600);
   --goa-text-input-space-btw-icon-text-compact: var(--goa-space-xs);
   --goa-text-input-padding-compact: var(--goa-space-2xs) var(--goa-text-input-padding-compact-lr);
   --goa-text-input-padding-compact-lr: var(--goa-space-s);
@@ -858,7 +869,7 @@
   --goa-container-info-heading-bg-color: var(--goa-color-info-default);
   --goa-container-info-bg-color: var(--goa-color-info-background);
   --goa-container-non-interactive-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
-  --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-50);
+  --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-100);
   --goa-container-non-interactive-bg-color: var(--goa-color-greyscale-50);
   --goa-container-interactive-border: var(--goa-border-width-s) solid var(--goa-color-brand-default);
   --goa-container-interactive-heading-bg-color: var(--goa-color-brand-default);

package/dist/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 30 Mar 2026 15:39:38 GMT
+// Generated on Mon, 13 Apr 2026 16:49:30 GMT
 
 $goa-accordion-color-bg-heading: #ffffff;
 $goa-accordion-color-bg-content: #ffffff;
@@ -173,7 +173,7 @@ $goa-callout-heading-typography: 600 1.125rem/1.375rem acumin-variable, helvetic
 $goa-callout-heading-color: #000000;
 $goa-callout-heading-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
 $goa-callout-body-typography: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
-$goa-callout-body-color: #353535;
+$goa-callout-body-color: #6f6f6f;
 $goa-callout-body-padding: 1.25rem;
 $goa-callout-l-with-heading-body-padding: 0 1.25rem 1.25rem;
 $goa-callout-l-without-heading-body-padding: 0.875rem 0.75rem 1rem 0;
@@ -254,7 +254,7 @@ $goa-container-interactive-heading-bg-color: #0081a2;
 $goa-container-interactive-heading-text-color: #ffffff;
 $goa-container-interactive-border: 1px solid #0081a2;
 $goa-container-non-interactive-bg-color: #f8f8f8;
-$goa-container-non-interactive-heading-bg-color: #f8f8f8;
+$goa-container-non-interactive-heading-bg-color: #f2f0f0;
 $goa-container-non-interactive-heading-text-color: #000000;
 $goa-container-non-interactive-border: 1px solid #cdcdcd;
 $goa-container-info-bg-color: #f4fdff;
@@ -422,7 +422,7 @@ $goa-footer-border-top: 1.5px solid #e9e9e9;
 $goa-footer-color-bg: #f2f0f0;
 $goa-footer-color-links: #000000;
 $goa-footer-color-links-hover: #4d4d4d;
-$goa-footer-color-links-secondary: #353535;
+$goa-footer-color-links-secondary: #6f6f6f;
 $goa-footer-color-links-secondary-hover: #353535;
 $goa-footer-link-focus: 2px solid #006dcc;
 $goa-footer-link-focus-border-radius: 0.375rem;
@@ -464,8 +464,8 @@ $goa-step-color-border-active: #006dcc;
 $goa-step-color-border-complete: #006dcc;
 $goa-step-color-border-incomplete: #006dcc;
 $goa-step-color-label: #000000;
-$goa-step-color-step-number: #353535;
-$goa-step-color-sublabel: #353535;
+$goa-step-color-step-number: #6f6f6f;
+$goa-step-color-sublabel: #6f6f6f;
 $goa-step-gap-small-screen: 0px;
 $goa-step-padding: 1.5rem;
 $goa-step-padding-vertical: 0.25rem 1.5rem;
@@ -496,7 +496,7 @@ $goa-app-header-typography-service-name-mobile: 600 1rem/1.25rem acumin-variable
 $goa-app-header-service-name-border-focus: 2px solid #006dcc;
 $goa-app-header-max-width-service-name: 40rem;
 $goa-app-header-min-width-service-name: 13rem;
-$goa-app-header-secondary-text-color: #353535;
+$goa-app-header-secondary-text-color: #6f6f6f;
 $goa-app-header-secondary-text-typography-desktop: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
 $goa-app-header-secondary-text-typography-mobile: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
 $goa-app-header-service-name-secondary-text-gap: 0.125rem;
@@ -506,9 +506,9 @@ $goa-app-header-service-phase-row-gap: 0.5rem;
 $goa-app-header-utilities-gap: 0.75rem;
 $goa-app-header-nav-bar-bg: #f8f8f8;
 $goa-app-header-nav-item-gap: 1rem;
-$goa-app-header-color-text-nav-item: #353535;
-$goa-app-header-color-text-nav-item-current: #353535;
-$goa-app-header-nav-text-color: #353535;
+$goa-app-header-color-text-nav-item: #6f6f6f;
+$goa-app-header-color-text-nav-item-current: #6f6f6f;
+$goa-app-header-nav-text-color: #6f6f6f;
 $goa-app-header-typography-nav-item: 500 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
 $goa-app-header-padding-nav-item: 0.25rem 0.25rem 0 0.25rem;
 $goa-app-header-height-nav-item: 3rem;
@@ -519,8 +519,8 @@ $goa-app-header-nav-active-indicator-color: #006dcc;
 $goa-app-header-nav-hover-indicator-color: #cdcdcd;
 $goa-app-header-padding-nav-item-in-menu: 0.5rem;
 $goa-app-header-padding-secondary-nav-item-in-menu: 0.75rem 0.5rem 0.75rem 1.5rem;
-$goa-app-header-color-text-nav-item-in-menu-current: #353535;
-$goa-app-header-color-text-nav-item-in-menu-current-hover: #353535;
+$goa-app-header-color-text-nav-item-in-menu-current: #6f6f6f;
+$goa-app-header-color-text-nav-item-in-menu-current-hover: #6f6f6f;
 $goa-app-header-color-bg-nav-item-in-menu-current: #006dcc;
 $goa-app-header-color-bg-nav-item-in-menu-current-hover: #045092;
 $goa-app-header-color-bg-nav-item-child-hover: #f2f0f0;
@@ -581,12 +581,13 @@ $goa-text-input-space-btw-icon-text-compact: 0.5rem;
 $goa-text-input-border-readonly: inset 0 0 0 1px #e1dedd;
 $goa-text-input-color-bg-readonly: #f2f0f0;
 $goa-text-input-lt-content-color-bg-readonly: #e9e9e9;
+$goa-text-input-color-icon: #6f6f6f;
 $goa-linear-progress-height: 0.25rem;
 $goa-linear-progress-border-radius: 0.5rem;
 $goa-linear-progress-color-track: #cdcdcd;
 $goa-linear-progress-color-indicator: #0077ad;
 $goa-linear-progress-percentage-gap: 0.5rem;
-$goa-linear-progress-percentage-color: #353535;
+$goa-linear-progress-percentage-color: #6f6f6f;
 $goa-linear-progress-percentage-text: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
 $goa-linear-progress-percentage-width: 4ch;
 $goa-link-typography-xsmall: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
@@ -621,7 +622,7 @@ $goa-microsite-header-beta-badge-color-text: #ffffff;
 $goa-microsite-header-color-bg: #f2f0f0;
 $goa-microsite-header-color-links: #006dcc;
 $goa-microsite-header-color-links-hover: #045092;
-$goa-microsite-header-color-version-number: #353535;
+$goa-microsite-header-color-version-number: #6f6f6f;
 $goa-microsite-header-gap: 1rem;
 $goa-microsite-header-link-focus-border: 2px solid #006dcc;
 $goa-microsite-header-padding-large-screen: 0.25rem 4rem;
@@ -806,7 +807,7 @@ $goa-side-menu-child-margin: 1rem;
 $goa-side-menu-heading-margin: 0rem 0 0 0;
 $goa-side-menu-heading-padding: 0.25rem 0.5rem;
 $goa-side-menu-heading-typography: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
-$goa-side-menu-icon-color: #353535;
+$goa-side-menu-icon-color: #6f6f6f;
 $goa-side-menu-items-gap: 0.25rem;
 $goa-side-menu-heading-gap: 0.5rem;
 $goa-side-menu-item-focus-border: 2px solid #006dcc;
@@ -940,14 +941,24 @@ $goa-tooltip-gap: 0.25rem;
 $goa-tooltip-max-width: 400px;
 $goa-tooltip-padding: 1rem;
 $goa-tooltip-text-size: 400 1.125rem/1.5rem acumin-variable, helvetica-neue, arial, sans-serif;
+$goa-work-side-menu-height: 100vh;
 $goa-work-side-menu-width-open: 17.5rem;
 $goa-work-side-menu-width-closed: 4.5rem;
 $goa-work-side-menu-color-bg: transparent;
 $goa-work-side-menu-border-radius: 0.5rem;
 $goa-work-side-menu-border: 1px solid #cdcdcd;
-$goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
+$goa-work-side-menu-account-shadow: 0px 12px 20px -8px #1a1a1a3d;
 $goa-work-side-menu-text-color: #6f6f6f;
 $goa-work-side-menu-mobile-bg: #f8f8f8;
+$goa-work-side-menu-transition-duration-medium: 300ms;
+$goa-work-side-menu-top-section-border: 1px solid transparent;
+$goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
+$goa-work-side-menu-top-section-border-scrolled: 1px solid #cdcdcd;
+$goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+$goa-work-side-menu-bottom-section-border: 1px solid transparent;
+$goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
+$goa-work-side-menu-bottom-section-border-scrolled: 1px solid #cdcdcd;
+$goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
 $goa-work-side-menu-group-border: 3px solid #f2f0f0;
 $goa-work-side-menu-group-margin: 0.5rem 0 0.375rem 1.125rem;
 $goa-work-side-menu-group-padding: 0 0 0 0.75rem;
@@ -983,7 +994,7 @@ $goa-color-brand-default: #0081a2;
 $goa-color-brand-dark: #005072;
 $goa-color-brand-light: #c8eefa;
 $goa-color-text-default: #000000;
-$goa-color-text-secondary: #353535;
+$goa-color-text-secondary: #6f6f6f;
 $goa-color-text-light: #ffffff;
 $goa-color-text-disabled: #4d4d4d;
 $goa-color-info-default: #0077ad;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "main": "./index.js",
   "repository": {
     "type": "git",