@abgov/design-tokens 1.8.0 → 1.10.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 (9) hide show
  1. package/data/component-design-tokens/push-drawer-design-tokens.json +40 -0
  2. package/data/component-design-tokens/table-design-tokens.json +1 -1
  3. package/data/component-design-tokens/work-side-menu-design-tokens.json +34 -0
  4. package/data/component-design-tokens/work-side-menu-group-design-tokens.json +26 -0
  5. package/data/component-design-tokens/work-side-menu-item-design-tokens.json +58 -0
  6. package/dist/tokens.css +38 -2
  7. package/dist/tokens.scss +38 -2
  8. package/index.spec.js +12 -0
  9. package/package.json +1 -1
package/data/component-design-tokens/push-drawer-design-tokens.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "push-drawer-border-radius": {
3
+ "value": "{borderRadius.none}",
4
+ "type": "borderRadius",
5
+ "description": "Border radius for drawer corners"
6
+ },
7
+ "push-drawer-content-padding-horizontal": {
8
+ "value": "{space.l}",
9
+ "type": "spacing",
10
+ "description": "Horizontal padding for content section"
11
+ },
12
+ "push-drawer-content-padding-vertical": {
13
+ "value": "{space.m}",
14
+ "type": "spacing",
15
+ "description": "Vertical padding for content section"
16
+ },
17
+ "push-drawer-actions-padding-top": {
18
+ "value": "{space.m}",
19
+ "type": "spacing",
20
+ "description": "Top padding for actions section"
21
+ },
22
+ "push-drawer-actions-padding-bottom": {
23
+ "value": "{space.l}",
24
+ "type": "spacing",
25
+ "description": "Bottom padding for actions section"
26
+ },
27
+ "push-drawer-heading-typography": {
28
+ "value": "{typography.heading.s}",
29
+ "type": "other",
30
+ "description": "Typography for drawer heading"
31
+ },
32
+ "push-drawer-transition-time": {
33
+ "value": "0.25s",
34
+ "type": "other"
35
+ },
36
+ "push-drawer-padding": {
37
+ "value": "{space.m}",
38
+ "type": "spacing"
39
+ }
40
+ }
package/data/component-design-tokens/table-design-tokens.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "value": "{color.greyscale.600}",
8
8
  "type": "color"
9
9
  },
10
- "goa-table-header-padding": {
10
+ "table-header-padding": {
11
11
  "value": "{space.m}",
12
12
  "type": "sizing"
13
13
  }
package/data/component-design-tokens/work-side-menu-design-tokens.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "work-side-menu-width-open": {
3
+ "value": "17.5rem",
4
+ "type": "spacing"
5
+ },
6
+ "work-side-menu-width-closed": {
7
+ "value": "4.5rem",
8
+ "type": "spacing"
9
+ },
10
+ "work-side-menu-color-bg": {
11
+ "value": "transparent",
12
+ "type": "color"
13
+ },
14
+ "work-side-menu-border-radius": {
15
+ "value": "{borderRadius.m}",
16
+ "type": "borderRadius"
17
+ },
18
+ "work-side-menu-border": {
19
+ "value": "{borderWidth.s} solid {color.greyscale.200}",
20
+ "type": "other"
21
+ },
22
+ "work-side-menu-account-shadow": {
23
+ "value": "0px 12px 20px -8px rgba(26, 26, 26, 0.24)",
24
+ "type": "other"
25
+ },
26
+ "work-side-menu-text-color": {
27
+ "value": "{color.greyscale.600}",
28
+ "type": "color"
29
+ },
30
+ "work-side-menu-mobile-bg": {
31
+ "value": "{color.greyscale.50}",
32
+ "type": "color"
33
+ }
34
+ }
package/data/component-design-tokens/work-side-menu-group-design-tokens.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "work-side-menu-group-border": {
3
+ "value": "{borderWidth.xl} solid {color.greyscale.100}",
4
+ "type": "other"
5
+ },
6
+ "work-side-menu-group-margin": {
7
+ "value": "{space.xs} 0 0.375rem 1.125rem",
8
+ "type": "spacing"
9
+ },
10
+ "work-side-menu-group-padding": {
11
+ "value": "0 0 0 0.75rem",
12
+ "type": "spacing"
13
+ },
14
+ "work-side-menu-group-item-padding": {
15
+ "value": "{space.2xs} {space.xs}",
16
+ "type": "spacing"
17
+ },
18
+ "work-side-menu-group-item-min-height": {
19
+ "value": "1.75rem",
20
+ "type": "spacing"
21
+ },
22
+ "work-side-menu-group-item-text-size": {
23
+ "value": "{typography.body.xs}",
24
+ "type": "other"
25
+ }
26
+ }
package/data/component-design-tokens/work-side-menu-item-design-tokens.json ADDED
@@ -0,0 +1,58 @@
1
+ {
2
+ "work-side-menu-item-badge-background-color": {
3
+ "value": "{color.success.default}",
4
+ "type": "color"
5
+ },
6
+ "work-side-menu-item-badge-emergency-background-color": {
7
+ "value": "{color.emergency.default}",
8
+ "type": "color"
9
+ },
10
+ "work-side-menu-item-badge-success-background-color": {
11
+ "value": "{color.success.default}",
12
+ "type": "color"
13
+ },
14
+ "work-side-menu-item-badge-text-size": {
15
+ "value": "{fontSize.2}",
16
+ "type": "fontSize"
17
+ },
18
+ "work-side-menu-item-border-radius": {
19
+ "value": "{borderRadius.m}",
20
+ "type": "borderRadius"
21
+ },
22
+ "work-side-menu-item-color-bg-current": {
23
+ "value": "{color.greyscale.100}",
24
+ "type": "color"
25
+ },
26
+ "work-side-menu-item-color-bg-hover": {
27
+ "value": "{color.greyscale.100}",
28
+ "type": "color"
29
+ },
30
+ "work-side-menu-item-icon-display": {
31
+ "value": "flex",
32
+ "type": "other"
33
+ },
34
+ "work-side-menu-item-min-height": {
35
+ "value": "2.5rem",
36
+ "type": "spacing"
37
+ },
38
+ "work-side-menu-item-padding": {
39
+ "value": "{space.xs} {space.xs} {space.xs} 0.625rem",
40
+ "type": "spacing"
41
+ },
42
+ "work-side-menu-item-text-color": {
43
+ "value": "{color.greyscale.600}",
44
+ "type": "color"
45
+ },
46
+ "work-side-menu-item-text-color-current": {
47
+ "value": "{color.text.default}",
48
+ "type": "color"
49
+ },
50
+ "work-side-menu-item-text-color-hover": {
51
+ "value": "{color.text.default}",
52
+ "type": "color"
53
+ },
54
+ "work-side-menu-item-text-size": {
55
+ "value": "{typography.body.s}",
56
+ "type": "other"
57
+ }
58
+ }
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 02 Dec 2025 21:56:43 GMT
3
+ * Generated on Thu, 22 Jan 2026 15:15:03 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -130,6 +130,14 @@
130
130
  --goa-color-interactive-disabled: #80b7e1;
131
131
  --goa-color-interactive-hover: #004f84;
132
132
  --goa-color-interactive-default: #0070c4;
133
+ --goa-work-side-menu-item-min-height: 2.5rem;
134
+ --goa-work-side-menu-item-icon-display: flex;
135
+ --goa-work-side-menu-group-item-min-height: 1.75rem;
136
+ --goa-work-side-menu-group-padding: 0 0 0 0.75rem;
137
+ --goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
138
+ --goa-work-side-menu-color-bg: transparent;
139
+ --goa-work-side-menu-width-closed: 4.5rem;
140
+ --goa-work-side-menu-width-open: 17.5rem;
133
141
  --goa-tooltip-max-width: 400px;
134
142
  --goa-tab-color-bg-selected: transparent;
135
143
  --goa-side-menu-child-color-bg: none;
@@ -144,6 +152,7 @@
144
152
  --goa-radio-border-radius: 50%;
145
153
  --goa-radio-border-checked-error-hover: 7px solid #ba0000;
146
154
  --goa-radio-border-checked-error-disabled: 7px solid #f58185;
155
+ --goa-push-drawer-transition-time: 0.25s;
147
156
  --goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
148
157
  --goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
149
158
  --goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
@@ -221,6 +230,22 @@
221
230
  --goa-color-text-light: var(--goa-color-greyscale-white);
222
231
  --goa-color-text-secondary: var(--goa-color-greyscale-700);
223
232
  --goa-color-text-default: var(--goa-color-greyscale-black);
233
+ --goa-work-side-menu-item-text-color: var(--goa-color-greyscale-600);
234
+ --goa-work-side-menu-item-padding: var(--goa-space-xs) var(--goa-space-xs) var(--goa-space-xs) 0.625rem;
235
+ --goa-work-side-menu-item-color-bg-hover: var(--goa-color-greyscale-100);
236
+ --goa-work-side-menu-item-color-bg-current: var(--goa-color-greyscale-100);
237
+ --goa-work-side-menu-item-border-radius: var(--goa-border-radius-m);
238
+ --goa-work-side-menu-item-badge-text-size: var(--goa-font-size-2);
239
+ --goa-work-side-menu-item-badge-success-background-color: var(--goa-color-success-default);
240
+ --goa-work-side-menu-item-badge-emergency-background-color: var(--goa-color-emergency-default);
241
+ --goa-work-side-menu-item-badge-background-color: var(--goa-color-success-default);
242
+ --goa-work-side-menu-group-item-padding: var(--goa-space-2xs) var(--goa-space-xs);
243
+ --goa-work-side-menu-group-margin: var(--goa-space-xs) 0 0.375rem 1.125rem;
244
+ --goa-work-side-menu-group-border: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
245
+ --goa-work-side-menu-mobile-bg: var(--goa-color-greyscale-50);
246
+ --goa-work-side-menu-text-color: var(--goa-color-greyscale-600);
247
+ --goa-work-side-menu-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
248
+ --goa-work-side-menu-border-radius: var(--goa-border-radius-m);
224
249
  --goa-tooltip-padding: 6px var(--goa-space-m) 10px var(--goa-space-m);
225
250
  --goa-tooltip-gap: var(--goa-space-2xs);
226
251
  --goa-tooltip-color-bg: var(--goa-color-greyscale-700);
@@ -246,7 +271,7 @@
246
271
  --goa-tab-border-not-selected: var(--goa-border-width-xl) solid transparent;
247
272
  --goa-tab-border-hover: var(--goa-border-width-xl) solid var(--goa-color-greyscale-200);
248
273
  --goa-tab-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
249
- --goa-goa-table-header-padding: var(--goa-space-m);
274
+ --goa-table-header-padding: var(--goa-space-m);
250
275
  --goa-table-color-border-heading: var(--goa-color-greyscale-600);
251
276
  --goa-skeleton-loading-color-bg: var(--goa-color-greyscale-100);
252
277
  --goa-side-menu-child-border-width: var(--goa-border-width-xl);
@@ -296,6 +321,12 @@
296
321
  --goa-radio-border-checked-disabled: 7px solid var(--goa-color-interactive-disabled);
297
322
  --goa-radio-border-checked: 7px solid var(--goa-color-interactive-default);
298
323
  --goa-radio-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-700);
324
+ --goa-push-drawer-padding: var(--goa-space-m);
325
+ --goa-push-drawer-actions-padding-bottom: var(--goa-space-l);
326
+ --goa-push-drawer-actions-padding-top: var(--goa-space-m);
327
+ --goa-push-drawer-content-padding-vertical: var(--goa-space-m);
328
+ --goa-push-drawer-content-padding-horizontal: var(--goa-space-l);
329
+ --goa-push-drawer-border-radius: var(--goa-border-radius-none);
299
330
  --goa-circular-progress-small-margin-top: var(--goa-space-l);
300
331
  --goa-circular-progress-large-margin-top: var(--goa-space-xl);
301
332
  --goa-popover-padding: var(--goa-space-s);
@@ -664,6 +695,10 @@
664
695
  --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
665
696
  --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
666
697
  --goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
698
+ --goa-work-side-menu-item-text-size: var(--goa-typography-body-s);
699
+ --goa-work-side-menu-item-text-color-hover: var(--goa-color-text-default);
700
+ --goa-work-side-menu-item-text-color-current: var(--goa-color-text-default);
701
+ --goa-work-side-menu-group-item-text-size: var(--goa-typography-body-xs);
667
702
  --goa-tooltip-text-size: var(--goa-typography-body-m);
668
703
  --goa-tooltip-color-text: var(--goa-color-text-light);
669
704
  --goa-text-area-typography-counter: var(--goa-typography-body-xs);
@@ -685,6 +720,7 @@
685
720
  --goa-side-menu-color-menu-item: var(--goa-color-text-default);
686
721
  --goa-radio-label: var(--goa-typography-body-m);
687
722
  --goa-radio-description: var(--goa-typography-body-xs);
723
+ --goa-push-drawer-heading-typography: var(--goa-typography-heading-s);
688
724
  --goa-circular-progress-small-text: var(--goa-typography-body-m);
689
725
  --goa-circular-progress-large-text: var(--goa-typography-body-l);
690
726
  --goa-notification-banner-custom-color-text: var(--goa-color-text-light);
package/dist/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 02 Dec 2025 21:56:43 GMT
3
+ // Generated on Thu, 22 Jan 2026 15:15:03 GMT
4
4
 
5
5
  $goa-accordion-color-bg-heading: #f1f1f1;
6
6
  $goa-accordion-color-bg-content: #ffffff;
@@ -518,6 +518,14 @@ $goa-circular-progress-large-margin-top: 2rem;
518
518
  $goa-circular-progress-large-text: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
519
519
  $goa-circular-progress-small-margin-top: 1.5rem;
520
520
  $goa-circular-progress-small-text: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
521
+ $goa-push-drawer-border-radius: 0;
522
+ $goa-push-drawer-content-padding-horizontal: 1.5rem;
523
+ $goa-push-drawer-content-padding-vertical: 1rem;
524
+ $goa-push-drawer-actions-padding-top: 1rem;
525
+ $goa-push-drawer-actions-padding-bottom: 1.5rem;
526
+ $goa-push-drawer-heading-typography: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
527
+ $goa-push-drawer-transition-time: 0.25s;
528
+ $goa-push-drawer-padding: 1rem;
521
529
  $goa-radio-border: 1px solid #666666;
522
530
  $goa-radio-border-checked: 7px solid #0070c4;
523
531
  $goa-radio-border-checked-disabled: 7px solid #80b7e1;
@@ -589,7 +597,7 @@ $goa-side-menu-child-border-width: 4px;
589
597
  $goa-skeleton-loading-color-bg: #f1f1f1;
590
598
  $goa-table-color-heading: #666666;
591
599
  $goa-table-color-border-heading: #858585;
592
- $goa-goa-table-header-padding: 1rem;
600
+ $goa-table-header-padding: 1rem;
593
601
  $goa-tab-border-focus: 3px solid #feba35;
594
602
  $goa-tab-border-hover: 4px solid #dcdcdc;
595
603
  $goa-tab-border-not-selected: 4px solid transparent;
@@ -628,6 +636,34 @@ $goa-tooltip-gap: 0.25rem;
628
636
  $goa-tooltip-max-width: 400px;
629
637
  $goa-tooltip-padding: 6px 1rem 10px 1rem;
630
638
  $goa-tooltip-text-size: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
639
+ $goa-work-side-menu-width-open: 17.5rem;
640
+ $goa-work-side-menu-width-closed: 4.5rem;
641
+ $goa-work-side-menu-color-bg: transparent;
642
+ $goa-work-side-menu-border-radius: 0.25rem;
643
+ $goa-work-side-menu-border: 1px solid #dcdcdc;
644
+ $goa-work-side-menu-account-shadow: 0px 12px 20px -8px rgba(26, 26, 26, 0.24);
645
+ $goa-work-side-menu-text-color: #858585;
646
+ $goa-work-side-menu-mobile-bg: #f8f8f8;
647
+ $goa-work-side-menu-group-border: 4px solid #f1f1f1;
648
+ $goa-work-side-menu-group-margin: 0.5rem 0 0.375rem 1.125rem;
649
+ $goa-work-side-menu-group-padding: 0 0 0 0.75rem;
650
+ $goa-work-side-menu-group-item-padding: 0.25rem 0.5rem;
651
+ $goa-work-side-menu-group-item-min-height: 1.75rem;
652
+ $goa-work-side-menu-group-item-text-size: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
653
+ $goa-work-side-menu-item-badge-background-color: #006f4c;
654
+ $goa-work-side-menu-item-badge-emergency-background-color: #da291c;
655
+ $goa-work-side-menu-item-badge-success-background-color: #006f4c;
656
+ $goa-work-side-menu-item-badge-text-size: 0.875rem;
657
+ $goa-work-side-menu-item-border-radius: 0.25rem;
658
+ $goa-work-side-menu-item-color-bg-current: #f1f1f1;
659
+ $goa-work-side-menu-item-color-bg-hover: #f1f1f1;
660
+ $goa-work-side-menu-item-icon-display: flex;
661
+ $goa-work-side-menu-item-min-height: 2.5rem;
662
+ $goa-work-side-menu-item-padding: 0.5rem 0.5rem 0.5rem 0.625rem;
663
+ $goa-work-side-menu-item-text-color: #858585;
664
+ $goa-work-side-menu-item-text-color-current: #333333;
665
+ $goa-work-side-menu-item-text-color-hover: #333333;
666
+ $goa-work-side-menu-item-text-size: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
631
667
  $goa-color-interactive-default: #0070c4;
632
668
  $goa-color-interactive-hover: #004f84;
633
669
  $goa-color-interactive-disabled: #80b7e1;
package/index.spec.js CHANGED
@@ -27,4 +27,16 @@ describe("GoA Design Tokens", () => {
27
27
  const raw = fs.readFileSync("./tmp/dist/tokens.scss", { encoding: "utf8" });
28
28
  expect(raw).not.toContain("[object Object]");
29
29
  });
30
+
31
+ it("should not contain double goa prefixes", async () => {
32
+ SC.generate("./tmp");
33
+ const raw = fs.readFileSync("./tmp/dist/tokens.css", { encoding: "utf8" });
34
+ expect(raw).not.toContain("--goa-goa");
35
+ });
36
+
37
+ it("should not contain undefined values", async () => {
38
+ SC.generate("./tmp");
39
+ const raw = fs.readFileSync("./tmp/dist/tokens.css", { encoding: "utf8" });
40
+ expect(raw.toLowerCase()).not.toContain("undefined");
41
+ });
30
42
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.8.0",
3
+ "version": "1.10.0",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",