@abgov/design-tokens 2.2.1 → 2.2.2

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 (7) hide show
  1. package/data/component-design-tokens/container-design-tokens.json +1 -1
  2. package/data/component-design-tokens/input-design-tokens.json +4 -0
  3. package/data/component-design-tokens/work-side-menu-design-tokens.json +37 -1
  4. package/data/goa-global-design-tokens.json +1 -1
  5. package/dist/tokens.css +14 -4
  6. package/dist/tokens.scss +27 -17
  7. package/package.json +1 -1
package/data/component-design-tokens/container-design-tokens.json CHANGED
@@ -70,7 +70,7 @@
70
70
  "type": "color"
71
71
  },
72
72
  "container-non-interactive-heading-bg-color": {
73
- "value": "{color.greyscale.50}",
73
+ "value": "{color.greyscale.100}",
74
74
  "type": "color"
75
75
  },
76
76
  "container-non-interactive-heading-text-color": {
package/data/component-design-tokens/input-design-tokens.json CHANGED
@@ -106,5 +106,9 @@
106
106
  "text-input-lt-content-color-bg-readonly": {
107
107
  "value": "{input.color.background.readonly-content}",
108
108
  "type": "color"
109
+ },
110
+ "text-input-color-icon": {
111
+ "value": "{color.greyscale.600}",
112
+ "type": "color"
109
113
  }
110
114
  }
package/data/component-design-tokens/work-side-menu-design-tokens.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "type": "other"
21
21
  },
22
22
  "work-side-menu-account-shadow": {
23
- "value": "0px 12px 20px -8px rgba(26, 26, 26, 0.24)",
23
+ "value": "{shadow.500}",
24
24
  "type": "other"
25
25
  },
26
26
  "work-side-menu-text-color": {
@@ -30,5 +30,41 @@
30
30
  "work-side-menu-mobile-bg": {
31
31
  "value": "{color.greyscale.50}",
32
32
  "type": "color"
33
+ },
34
+ "work-side-menu-transition-duration-medium": {
35
+ "value": "{motionDuration.medium-2}",
36
+ "type": "other"
37
+ },
38
+ "work-side-menu-top-section-border": {
39
+ "value": "{borderWidth.s} solid transparent",
40
+ "type": "other"
41
+ },
42
+ "work-side-menu-top-section-shadow": {
43
+ "value": "0 4px 6px -4px rgba(0, 0, 0, 0)",
44
+ "type": "other"
45
+ },
46
+ "work-side-menu-top-section-border-scrolled": {
47
+ "value": "{borderWidth.s} solid {color.greyscale.200}",
48
+ "type": "other"
49
+ },
50
+ "work-side-menu-top-section-shadow-scrolled": {
51
+ "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1)",
52
+ "type": "other"
53
+ },
54
+ "work-side-menu-bottom-section-border": {
55
+ "value": "{borderWidth.s} solid transparent",
56
+ "type": "other"
57
+ },
58
+ "work-side-menu-bottom-section-shadow": {
59
+ "value": "0 -4px 6px -4px rgba(0, 0, 0, 0)",
60
+ "type": "other"
61
+ },
62
+ "work-side-menu-bottom-section-border-scrolled": {
63
+ "value": "{borderWidth.s} solid {color.greyscale.200}",
64
+ "type": "other"
65
+ },
66
+ "work-side-menu-bottom-section-shadow-scrolled": {
67
+ "value": "0 -4px 6px -4px rgba(0, 0, 0, 0.1)",
68
+ "type": "other"
33
69
  }
34
70
  }
package/data/goa-global-design-tokens.json CHANGED
@@ -66,7 +66,7 @@
66
66
  "type": "color"
67
67
  },
68
68
  "secondary": {
69
- "value": "{color.greyscale.800}",
69
+ "value": "{color.greyscale.600}",
70
70
  "type": "color"
71
71
  },
72
72
  "light": {
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 30 Mar 2026 15:39:38 GMT
3
+ * Generated on Tue, 07 Apr 2026 16:34:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -215,7 +215,10 @@
215
215
  --goa-work-side-menu-item-icon-display: flex;
216
216
  --goa-work-side-menu-group-item-min-height: 1.75rem;
217
217
  --goa-work-side-menu-group-padding: 0 0 0 0.75rem;
218
- --goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
218
+ --goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
219
+ --goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
220
+ --goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
221
+ --goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
219
222
  --goa-work-side-menu-color-bg: transparent;
220
223
  --goa-work-side-menu-width-closed: 4.5rem;
221
224
  --goa-work-side-menu-width-open: 17.5rem;
@@ -387,7 +390,7 @@
387
390
  --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);
388
391
  --goa-color-text-disabled: var(--goa-color-greyscale-700);
389
392
  --goa-color-text-light: var(--goa-color-greyscale-white);
390
- --goa-color-text-secondary: var(--goa-color-greyscale-800);
393
+ --goa-color-text-secondary: var(--goa-color-greyscale-600);
391
394
  --goa-color-text-default: var(--goa-color-greyscale-black);
392
395
  --goa-color-interactive-disabled: var(--goa-color-greyscale-300);
393
396
  --goa-work-side-menu-item-text-color: var(--goa-color-greyscale-600);
@@ -402,8 +405,14 @@
402
405
  --goa-work-side-menu-group-item-padding: var(--goa-space-2xs) var(--goa-space-xs);
403
406
  --goa-work-side-menu-group-margin: var(--goa-space-xs) 0 0.375rem 1.125rem;
404
407
  --goa-work-side-menu-group-border: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
408
+ --goa-work-side-menu-bottom-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
409
+ --goa-work-side-menu-bottom-section-border: var(--goa-border-width-s) solid transparent;
410
+ --goa-work-side-menu-top-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
411
+ --goa-work-side-menu-top-section-border: var(--goa-border-width-s) solid transparent;
412
+ --goa-work-side-menu-transition-duration-medium: var(--goa-motion-duration-medium-2);
405
413
  --goa-work-side-menu-mobile-bg: var(--goa-color-greyscale-50);
406
414
  --goa-work-side-menu-text-color: var(--goa-color-greyscale-600);
415
+ --goa-work-side-menu-account-shadow: var(--goa-shadow-500);
407
416
  --goa-work-side-menu-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
408
417
  --goa-work-side-menu-border-radius: var(--goa-border-radius-m);
409
418
  --goa-tooltip-padding: var(--goa-space-m);
@@ -668,6 +677,7 @@
668
677
  --goa-linear-progress-color-track: var(--goa-color-greyscale-200);
669
678
  --goa-linear-progress-border-radius: var(--goa-border-radius-m);
670
679
  --goa-linear-progress-height: var(--goa-space-2xs);
680
+ --goa-text-input-color-icon: var(--goa-color-greyscale-600);
671
681
  --goa-text-input-space-btw-icon-text-compact: var(--goa-space-xs);
672
682
  --goa-text-input-padding-compact: var(--goa-space-2xs) var(--goa-text-input-padding-compact-lr);
673
683
  --goa-text-input-padding-compact-lr: var(--goa-space-s);
@@ -858,7 +868,7 @@
858
868
  --goa-container-info-heading-bg-color: var(--goa-color-info-default);
859
869
  --goa-container-info-bg-color: var(--goa-color-info-background);
860
870
  --goa-container-non-interactive-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
861
- --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-50);
871
+ --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-100);
862
872
  --goa-container-non-interactive-bg-color: var(--goa-color-greyscale-50);
863
873
  --goa-container-interactive-border: var(--goa-border-width-s) solid var(--goa-color-brand-default);
864
874
  --goa-container-interactive-heading-bg-color: var(--goa-color-brand-default);
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 30 Mar 2026 15:39:38 GMT
3
+ // Generated on Tue, 07 Apr 2026 16:34:31 GMT
4
4
 
5
5
  $goa-accordion-color-bg-heading: #ffffff;
6
6
  $goa-accordion-color-bg-content: #ffffff;
@@ -173,7 +173,7 @@ $goa-callout-heading-typography: 600 1.125rem/1.375rem acumin-variable, helvetic
173
173
  $goa-callout-heading-color: #000000;
174
174
  $goa-callout-heading-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
175
175
  $goa-callout-body-typography: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
176
- $goa-callout-body-color: #353535;
176
+ $goa-callout-body-color: #6f6f6f;
177
177
  $goa-callout-body-padding: 1.25rem;
178
178
  $goa-callout-l-with-heading-body-padding: 0 1.25rem 1.25rem;
179
179
  $goa-callout-l-without-heading-body-padding: 0.875rem 0.75rem 1rem 0;
@@ -254,7 +254,7 @@ $goa-container-interactive-heading-bg-color: #0081a2;
254
254
  $goa-container-interactive-heading-text-color: #ffffff;
255
255
  $goa-container-interactive-border: 1px solid #0081a2;
256
256
  $goa-container-non-interactive-bg-color: #f8f8f8;
257
- $goa-container-non-interactive-heading-bg-color: #f8f8f8;
257
+ $goa-container-non-interactive-heading-bg-color: #f2f0f0;
258
258
  $goa-container-non-interactive-heading-text-color: #000000;
259
259
  $goa-container-non-interactive-border: 1px solid #cdcdcd;
260
260
  $goa-container-info-bg-color: #f4fdff;
@@ -422,7 +422,7 @@ $goa-footer-border-top: 1.5px solid #e9e9e9;
422
422
  $goa-footer-color-bg: #f2f0f0;
423
423
  $goa-footer-color-links: #000000;
424
424
  $goa-footer-color-links-hover: #4d4d4d;
425
- $goa-footer-color-links-secondary: #353535;
425
+ $goa-footer-color-links-secondary: #6f6f6f;
426
426
  $goa-footer-color-links-secondary-hover: #353535;
427
427
  $goa-footer-link-focus: 2px solid #006dcc;
428
428
  $goa-footer-link-focus-border-radius: 0.375rem;
@@ -464,8 +464,8 @@ $goa-step-color-border-active: #006dcc;
464
464
  $goa-step-color-border-complete: #006dcc;
465
465
  $goa-step-color-border-incomplete: #006dcc;
466
466
  $goa-step-color-label: #000000;
467
- $goa-step-color-step-number: #353535;
468
- $goa-step-color-sublabel: #353535;
467
+ $goa-step-color-step-number: #6f6f6f;
468
+ $goa-step-color-sublabel: #6f6f6f;
469
469
  $goa-step-gap-small-screen: 0px;
470
470
  $goa-step-padding: 1.5rem;
471
471
  $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
496
496
  $goa-app-header-service-name-border-focus: 2px solid #006dcc;
497
497
  $goa-app-header-max-width-service-name: 40rem;
498
498
  $goa-app-header-min-width-service-name: 13rem;
499
- $goa-app-header-secondary-text-color: #353535;
499
+ $goa-app-header-secondary-text-color: #6f6f6f;
500
500
  $goa-app-header-secondary-text-typography-desktop: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
501
501
  $goa-app-header-secondary-text-typography-mobile: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
502
502
  $goa-app-header-service-name-secondary-text-gap: 0.125rem;
@@ -506,9 +506,9 @@ $goa-app-header-service-phase-row-gap: 0.5rem;
506
506
  $goa-app-header-utilities-gap: 0.75rem;
507
507
  $goa-app-header-nav-bar-bg: #f8f8f8;
508
508
  $goa-app-header-nav-item-gap: 1rem;
509
- $goa-app-header-color-text-nav-item: #353535;
510
- $goa-app-header-color-text-nav-item-current: #353535;
511
- $goa-app-header-nav-text-color: #353535;
509
+ $goa-app-header-color-text-nav-item: #6f6f6f;
510
+ $goa-app-header-color-text-nav-item-current: #6f6f6f;
511
+ $goa-app-header-nav-text-color: #6f6f6f;
512
512
  $goa-app-header-typography-nav-item: 500 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
513
513
  $goa-app-header-padding-nav-item: 0.25rem 0.25rem 0 0.25rem;
514
514
  $goa-app-header-height-nav-item: 3rem;
@@ -519,8 +519,8 @@ $goa-app-header-nav-active-indicator-color: #006dcc;
519
519
  $goa-app-header-nav-hover-indicator-color: #cdcdcd;
520
520
  $goa-app-header-padding-nav-item-in-menu: 0.5rem;
521
521
  $goa-app-header-padding-secondary-nav-item-in-menu: 0.75rem 0.5rem 0.75rem 1.5rem;
522
- $goa-app-header-color-text-nav-item-in-menu-current: #353535;
523
- $goa-app-header-color-text-nav-item-in-menu-current-hover: #353535;
522
+ $goa-app-header-color-text-nav-item-in-menu-current: #6f6f6f;
523
+ $goa-app-header-color-text-nav-item-in-menu-current-hover: #6f6f6f;
524
524
  $goa-app-header-color-bg-nav-item-in-menu-current: #006dcc;
525
525
  $goa-app-header-color-bg-nav-item-in-menu-current-hover: #045092;
526
526
  $goa-app-header-color-bg-nav-item-child-hover: #f2f0f0;
@@ -581,12 +581,13 @@ $goa-text-input-space-btw-icon-text-compact: 0.5rem;
581
581
  $goa-text-input-border-readonly: inset 0 0 0 1px #e1dedd;
582
582
  $goa-text-input-color-bg-readonly: #f2f0f0;
583
583
  $goa-text-input-lt-content-color-bg-readonly: #e9e9e9;
584
+ $goa-text-input-color-icon: #6f6f6f;
584
585
  $goa-linear-progress-height: 0.25rem;
585
586
  $goa-linear-progress-border-radius: 0.5rem;
586
587
  $goa-linear-progress-color-track: #cdcdcd;
587
588
  $goa-linear-progress-color-indicator: #0077ad;
588
589
  $goa-linear-progress-percentage-gap: 0.5rem;
589
- $goa-linear-progress-percentage-color: #353535;
590
+ $goa-linear-progress-percentage-color: #6f6f6f;
590
591
  $goa-linear-progress-percentage-text: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
591
592
  $goa-linear-progress-percentage-width: 4ch;
592
593
  $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;
621
622
  $goa-microsite-header-color-bg: #f2f0f0;
622
623
  $goa-microsite-header-color-links: #006dcc;
623
624
  $goa-microsite-header-color-links-hover: #045092;
624
- $goa-microsite-header-color-version-number: #353535;
625
+ $goa-microsite-header-color-version-number: #6f6f6f;
625
626
  $goa-microsite-header-gap: 1rem;
626
627
  $goa-microsite-header-link-focus-border: 2px solid #006dcc;
627
628
  $goa-microsite-header-padding-large-screen: 0.25rem 4rem;
@@ -806,7 +807,7 @@ $goa-side-menu-child-margin: 1rem;
806
807
  $goa-side-menu-heading-margin: 0rem 0 0 0;
807
808
  $goa-side-menu-heading-padding: 0.25rem 0.5rem;
808
809
  $goa-side-menu-heading-typography: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
809
- $goa-side-menu-icon-color: #353535;
810
+ $goa-side-menu-icon-color: #6f6f6f;
810
811
  $goa-side-menu-items-gap: 0.25rem;
811
812
  $goa-side-menu-heading-gap: 0.5rem;
812
813
  $goa-side-menu-item-focus-border: 2px solid #006dcc;
@@ -945,9 +946,18 @@ $goa-work-side-menu-width-closed: 4.5rem;
945
946
  $goa-work-side-menu-color-bg: transparent;
946
947
  $goa-work-side-menu-border-radius: 0.5rem;
947
948
  $goa-work-side-menu-border: 1px solid #cdcdcd;
948
- $goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
949
+ $goa-work-side-menu-account-shadow: 0px 12px 20px -8px #1a1a1a3d;
949
950
  $goa-work-side-menu-text-color: #6f6f6f;
950
951
  $goa-work-side-menu-mobile-bg: #f8f8f8;
952
+ $goa-work-side-menu-transition-duration-medium: 300ms;
953
+ $goa-work-side-menu-top-section-border: 1px solid transparent;
954
+ $goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
955
+ $goa-work-side-menu-top-section-border-scrolled: 1px solid #cdcdcd;
956
+ $goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
957
+ $goa-work-side-menu-bottom-section-border: 1px solid transparent;
958
+ $goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
959
+ $goa-work-side-menu-bottom-section-border-scrolled: 1px solid #cdcdcd;
960
+ $goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
951
961
  $goa-work-side-menu-group-border: 3px solid #f2f0f0;
952
962
  $goa-work-side-menu-group-margin: 0.5rem 0 0.375rem 1.125rem;
953
963
  $goa-work-side-menu-group-padding: 0 0 0 0.75rem;
@@ -983,7 +993,7 @@ $goa-color-brand-default: #0081a2;
983
993
  $goa-color-brand-dark: #005072;
984
994
  $goa-color-brand-light: #c8eefa;
985
995
  $goa-color-text-default: #000000;
986
- $goa-color-text-secondary: #353535;
996
+ $goa-color-text-secondary: #6f6f6f;
987
997
  $goa-color-text-light: #ffffff;
988
998
  $goa-color-text-disabled: #4d4d4d;
989
999
  $goa-color-info-default: #0077ad;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",