@abgov/design-tokens 1.5.0 → 1.5.1

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/badge-design-tokens.json +2 -9
  2. package/data/component-design-tokens/button-design-tokens.json +3 -3
  3. package/data/component-design-tokens/drawer-design-tokens.json +4 -11
  4. package/data/component-design-tokens/header-design-tokens.json +180 -20
  5. package/data/component-design-tokens/popover-design-tokens.json +2 -9
  6. package/data/goa-global-design-tokens.json +221 -221
  7. package/dist/tokens.css +100 -66
  8. package/dist/tokens.scss +100 -66
  9. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -1,30 +1,24 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Jan 2025 23:12:57 GMT
3
+ * Generated on Fri, 24 Jan 2025 16:30:35 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --goa-space-4xl: 8rem;
8
- --goa-space-3xl: 4rem;
9
- --goa-space-2xl: 3rem;
10
- --goa-space-xl: 2rem;
11
- --goa-space-l: 1.5rem;
12
- --goa-space-m: 1rem;
13
- --goa-space-s: 0.75rem;
14
- --goa-space-xs: 0.5rem;
15
- --goa-space-2xs: 0.25rem;
16
- --goa-space-3xs: 0.125rem;
17
- --goa-space-none: 0rem;
18
- --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
19
- --goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
20
- --goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
21
- --goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
22
- --goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
23
- --goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
24
- --goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
25
- --goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
26
- --goa-opacity-background-loading: 90%;
27
- --goa-opacity-background-modal: 50%;
7
+ --goa-font-weight-bold: 700;
8
+ --goa-font-weight-medium: 500;
9
+ --goa-font-weight-regular: 400;
10
+ --goa-font-size-10: 3rem;
11
+ --goa-font-size-9: 2.25rem;
12
+ --goa-font-size-8: 2rem;
13
+ --goa-font-size-7: 1.5rem;
14
+ --goa-font-size-6: 1.375rem;
15
+ --goa-font-size-5: 1.25rem;
16
+ --goa-font-size-4: 1.125rem;
17
+ --goa-font-size-3: 1rem;
18
+ --goa-font-size-2: 0.875rem;
19
+ --goa-font-size-1: 0.75rem;
20
+ --goa-font-family-number: roboto-mono, monospace;
21
+ --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
28
22
  --goa-line-height-05: 1.125rem;
29
23
  --goa-line-height-7: 3.5rem;
30
24
  --goa-line-height-6: 2.75rem;
@@ -33,6 +27,14 @@
33
27
  --goa-line-height-3: 1.75rem;
34
28
  --goa-line-height-2: 1.5rem;
35
29
  --goa-line-height-1: 1.25rem;
30
+ --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
31
+ --goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
32
+ --goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
33
+ --goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
34
+ --goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
35
+ --goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
36
+ --goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
37
+ --goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
36
38
  --goa-icon-size-l: 1.5rem;
37
39
  --goa-icon-size-m: 1.25rem;
38
40
  --goa-icon-size-s: 1rem;
@@ -42,21 +44,33 @@
42
44
  --goa-icon-size-3: 1.25rem;
43
45
  --goa-icon-size-2: 1.125rem;
44
46
  --goa-icon-size-1: 1rem;
45
- --goa-font-weight-bold: 700;
46
- --goa-font-weight-medium: 500;
47
- --goa-font-weight-regular: 400;
48
- --goa-font-size-10: 3rem;
49
- --goa-font-size-9: 2.25rem;
50
- --goa-font-size-8: 2rem;
51
- --goa-font-size-7: 1.5rem;
52
- --goa-font-size-6: 1.375rem;
53
- --goa-font-size-5: 1.25rem;
54
- --goa-font-size-4: 1.125rem;
55
- --goa-font-size-3: 1rem;
56
- --goa-font-size-2: 0.875rem;
57
- --goa-font-size-1: 0.75rem;
58
- --goa-font-family-number: roboto-mono, monospace;
59
- --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
47
+ --goa-space-4xl: 8rem;
48
+ --goa-space-3xl: 4rem;
49
+ --goa-space-2xl: 3rem;
50
+ --goa-space-xl: 2rem;
51
+ --goa-space-l: 1.5rem;
52
+ --goa-space-m: 1rem;
53
+ --goa-space-s: 0.75rem;
54
+ --goa-space-xs: 0.5rem;
55
+ --goa-space-2xs: 0.25rem;
56
+ --goa-space-3xs: 0.125rem;
57
+ --goa-space-none: 0rem;
58
+ --goa-border-width-xl: 4px;
59
+ --goa-border-width-l: 3px;
60
+ --goa-border-width-m: 2px;
61
+ --goa-border-width-s: 1px;
62
+ --goa-border-width-xs: 0.7px;
63
+ --goa-border-width-2xs: 0.5px;
64
+ --goa-border-width-none: 0px;
65
+ --goa-border-radius-3xl: 0.75rem;
66
+ --goa-border-radius-2xl: 0.625rem;
67
+ --goa-border-radius-xl: 0.5rem;
68
+ --goa-border-radius-l: 0.375rem;
69
+ --goa-border-radius-m: 0.25rem;
70
+ --goa-border-radius-s: 0.125rem;
71
+ --goa-border-radius-none: 0;
72
+ --goa-opacity-background-loading: 90%;
73
+ --goa-opacity-background-modal: 50%;
60
74
  --goa-color-extended-yellow: #fce796;
61
75
  --goa-color-extended-violet: #d4c2ff;
62
76
  --goa-color-extended-red: #ed948d;
@@ -115,20 +129,6 @@
115
129
  --goa-color-interactive-disabled: #80b7e1;
116
130
  --goa-color-interactive-hover: #004f84;
117
131
  --goa-color-interactive-default: #0070c4;
118
- --goa-border-width-xl: 4px;
119
- --goa-border-width-l: 3px;
120
- --goa-border-width-m: 2px;
121
- --goa-border-width-s: 1px;
122
- --goa-border-width-xs: 0.7px;
123
- --goa-border-width-2xs: 0.5px;
124
- --goa-border-width-none: 0px;
125
- --goa-border-radius-3xl: 0.75rem;
126
- --goa-border-radius-2xl: 0.625rem;
127
- --goa-border-radius-xl: 0.5rem;
128
- --goa-border-radius-l: 0.375rem;
129
- --goa-border-radius-m: 0.25rem;
130
- --goa-border-radius-s: 0.125rem;
131
- --goa-border-radius-none: 0;
132
132
  --goa-tooltip-max-width: 400px;
133
133
  --goa-tab-color-bg-selected: transparent;
134
134
  --goa-side-menu-child-color-bg: none;
@@ -144,11 +144,13 @@
144
144
  --goa-radio-border-checked-error-hover: 7px solid #ba0000;
145
145
  --goa-radio-border-checked-error-disabled: 7px solid #f58185;
146
146
  --goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
147
- --goa-popover-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
147
+ --goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
148
148
  --goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
149
149
  --goa-text-input-transition: box-shadow 0.05s ease-in;
150
150
  --goa-text-input-color-icon: ;
151
151
  --goa-text-input-size-icon: ;
152
+ --goa-app-header-min-width-service-name: 8rem;
153
+ --goa-app-header-max-width-service-name: 28rem;
152
154
  --goa-stepper-line-thickness: 4px;
153
155
  --goa-step-size: 2.5rem;
154
156
  --goa-step-gap-small-screen: 0px;
@@ -160,7 +162,6 @@
160
162
  --goa-dropdown-item-color-text-disabled: ;
161
163
  --goa-dropdown-item-color-bg-disabled: ;
162
164
  --goa-drawer-transition-time: 200ms;
163
- --goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
164
165
  --goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
165
166
  --goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
166
167
  --goa-drawer-overlay-color: rgba(0,0,0,0.3);
@@ -187,6 +188,7 @@
187
188
  --goa-button-height: 2.625rem;
188
189
  --goa-badge-height: 22px;
189
190
  --goa-accordion-shadow: 0px 0px 0px 0px #000000;
191
+ --goa-border-none: var(--goa-border-width-none) solid rgba(0,0,0,0);
190
192
  --goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
191
193
  --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
192
194
  --goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
@@ -203,7 +205,6 @@
203
205
  --goa-color-text-light: var(--goa-color-greyscale-white);
204
206
  --goa-color-text-secondary: var(--goa-color-greyscale-700);
205
207
  --goa-color-text-default: var(--goa-color-greyscale-black);
206
- --goa-border-none: var(--goa-border-width-none) solid rgba(0,0,0,0);
207
208
  --goa-tooltip-padding: 6px var(--goa-space-m) 10px var(--goa-space-m);
208
209
  --goa-tooltip-gap: var(--goa-space-2xs);
209
210
  --goa-tooltip-color-bg: var(--goa-color-greyscale-700);
@@ -352,18 +353,44 @@
352
353
  --goa-hero-banner-content-gap: var(--goa-space-l) 0 0;
353
354
  --goa-hero-banner-mobile-padding: var(--goa-space-xl) 0;
354
355
  --goa-hero-banner-padding: var(--goa-space-2xl) 0;
356
+ --goa-app-header-space-btw-service-name-nav-items-mobile: var(--goa-space-l);
357
+ --goa-app-header-space-btw-logo-service-name-mobile: var(--goa-space-xs);
358
+ --goa-app-header-space-btw-logo-service-name: var(--goa-space-m);
359
+ --goa-app-header-size-logo-mobile: var(--goa-space-l);
360
+ --goa-app-header-size-logo: var(--goa-space-xl);
361
+ --goa-app-header-padding-tablet: var(--goa-space-xl);
362
+ --goa-app-header-padding-secondary-nav-item-in-menu: 9px var(--goa-space-m) 9px var(--goa-space-xl);
363
+ --goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px var(--goa-space-m) 9px 80px;
364
+ --goa-app-header-padding-nav-item-in-menu: 9px var(--goa-space-m);
365
+ --goa-app-header-padding-nav-item-with-children: var(--goa-space-m) var(--goa-space-s) var(--goa-space-s);
366
+ --goa-app-header-padding-nav-item: var(--goa-space-m) var(--goa-space-s);
367
+ --goa-app-header-padding-mobile: var(--goa-space-m);
368
+ --goa-app-header-padding-menu-button: var(--goa-space-m) var(--goa-space-s);
355
369
  --goa-app-header-padding-logo-mobile: var(--goa-space-s) var(--goa-space-m);
370
+ --goa-app-header-padding-logo: 14px var(--goa-space-xl) var(--goa-space-m) 0px;
371
+ --goa-app-header-padding-link-item: var(--goa-space-m);
356
372
  --goa-app-header-padding-desktop: var(--goa-space-3xl);
357
- --goa-app-header-color-menu-button-focus: var(--goa-color-interactive-hover);
358
- --goa-app-header-color-menu-button-hover: var(--goa-color-interactive-hover);
359
- --goa-app-header-color-text-nav-item-focus: var(--goa-color-interactive-hover);
360
373
  --goa-app-header-color-text-nav-item-hover: var(--goa-color-interactive-hover);
374
+ --goa-app-header-color-text-nav-item-focus: var(--goa-color-interactive-hover);
375
+ --goa-app-header-color-menu-button-hover: var(--goa-color-interactive-hover);
376
+ --goa-app-header-color-menu-button-focus: var(--goa-color-interactive-hover);
377
+ --goa-app-header-color-bg-nav-item-in-menu-current-hover: var(--goa-color-interactive-hover);
378
+ --goa-app-header-color-bg-nav-item-in-menu-current: var(--goa-color-interactive-default);
379
+ --goa-app-header-color-bg-nav-item-hover: var(--goa-color-greyscale-white);
380
+ --goa-app-header-color-bg-nav-item-focus: var(--goa-color-greyscale-white);
381
+ --goa-app-header-color-bg-nav-item-current: var(--goa-color-greyscale-white);
382
+ --goa-app-header-color-bg-nav-item: var(--goa-color-greyscale-white);
383
+ --goa-app-header-color-bg-menu-button-hover: var(--goa-color-greyscale-100);
384
+ --goa-app-header-color-bg-menu-button-focus: var(--goa-color-greyscale-100);
361
385
  --goa-app-header-color-bg: var(--goa-color-greyscale-white);
362
- --goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px var(--goa-space-m) 9px 80px;
363
- --goa-app-header-padding-secondary-nav-item-in-menu: 9px var(--goa-space-m) 9px var(--goa-space-xl);
364
- --goa-app-header-padding-nav-item-with-children: var(--goa-space-m) var(--goa-space-s) var(--goa-space-s);
365
- --goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 var(--goa-color-greyscale-200);
366
386
  --goa-app-header-border-top-menu-item: inset 0 1px 0 0 var(--goa-color-greyscale-200);
387
+ --goa-app-header-border-nav-item-hover: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
388
+ --goa-app-header-border-nav-item-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
389
+ --goa-app-header-border-nav-item-default: var(--goa-space-2xs) solid transparent;
390
+ --goa-app-header-border-nav-item-current-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
391
+ --goa-app-header-border-nav-item-current: var(--goa-space-2xs) solid var(--goa-color-interactive-default);
392
+ --goa-app-header-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
393
+ --goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 var(--goa-color-greyscale-200);
367
394
  --goa-app-header-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
368
395
  --goa-stepper-color-line-active: var(--goa-color-interactive-default);
369
396
  --goa-stepper-color-line: var(--goa-color-greyscale-200);
@@ -430,6 +457,7 @@
430
457
  --goa-dropdown-border-error: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error);
431
458
  --goa-dropdown-border-disabled: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
432
459
  --goa-dropdown-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-700);
460
+ --goa-drawer-right-shadow: inset -4 0 12 0 var(--goa-border-width-s) rgba(0,0,0,0.2);
433
461
  --goa-drawer-padding: var(--goa-space-m);
434
462
  --goa-divider-color: var(--goa-color-greyscale-200);
435
463
  --goa-details-padding-right: var(--goa-space-s);
@@ -569,14 +597,14 @@
569
597
  --goa-button-compact-icon-size: var(--goa-icon-size-2);
570
598
  --goa-button-icon-size: var(--goa-icon-size-3);
571
599
  --goa-button-gap: var(--goa-space-xs);
572
- --goa-button-text-start: var(--goa-font-family-sans) var(--goa-font-weight-bold) var(--goa-font-size-5) var(--goa-line-height-1) var(--goa-button-letter-spacing);
573
- --goa-button-text-compact: var(--goa-font-family-sans) var(--goa-font-weight-regular) var(--goa-font-size-4) var(--goa-line-height-05) var(--goa-button-letter-spacing);
574
- --goa-button-text: var(--goa-font-family-sans) var(--goa-font-weight-regular) var(--goa-font-size-5) var(--goa-line-height-1) var(--goa-button-letter-spacing);
600
+ --goa-button-text-start: var(--goa-font-weight-bold) var(--goa-font-size-5) var(--goa-line-height-1) var(--goa-font-family-sans);
601
+ --goa-button-text-compact: var(--goa-font-weight-regular) var(--goa-font-size-4) var(--goa-line-height-05) var(--goa-font-family-sans);
602
+ --goa-button-text: var(--goa-font-weight-regular) var(--goa-font-size-5) var(--goa-line-height-1) var(--goa-font-family-sans);
575
603
  --goa-button-padding-lr-start: var(--goa-space-m);
576
604
  --goa-button-padding-lr-compact: var(--goa-space-xs);
577
605
  --goa-button-padding-lr: var(--goa-space-s);
578
606
  --goa-button-border-radius: var(--goa-border-radius-m);
579
- --goa-badge-border: 0px 0px 0px var(--goa-border-width-s)px rgba(0,0,0,0.5);
607
+ --goa-badge-border: inset 0 0 0 var(--goa-border-width-s) rgba(0, 0, 0, 0.5);
580
608
  --goa-badge-light-color-bg: var(--goa-color-greyscale-white);
581
609
  --goa-badge-midtone-color-bg: var(--goa-color-greyscale-700);
582
610
  --goa-badge-dark-color-bg: var(--goa-color-greyscale-black);
@@ -643,9 +671,15 @@
643
671
  --goa-text-input-color-text: var(--goa-color-text-default);
644
672
  --goa-hero-banner-content: var(--goa-typography-body-l);
645
673
  --goa-hero-banner-heading: var(--goa-typography-heading-xl);
646
- --goa-app-header-color-menu-button: var(--goa-color-text-default);
674
+ --goa-app-header-typography-service-name-mobile: var(--goa-typography-body-s);
675
+ --goa-app-header-typography-service-name: var(--goa-typography-body-m);
676
+ --goa-app-header-typography-nav-item: var(--goa-typography-heading-s);
677
+ --goa-app-header-typography-menu-button-mobile: var(--goa-typography-body-s);
678
+ --goa-app-header-typography-menu-button: var(--goa-typography-body-m);
647
679
  --goa-app-header-color-text-nav-item-current: var(--goa-color-text-default);
648
680
  --goa-app-header-color-text-nav-item: var(--goa-color-text-default);
681
+ --goa-app-header-color-service-name: var(--goa-color-text-default);
682
+ --goa-app-header-color-menu-button: var(--goa-color-text-default);
649
683
  --goa-step-typography-sublabel: var(--goa-typography-body-xs);
650
684
  --goa-step-typography-step-number: var(--goa-typography-heading-xs);
651
685
  --goa-step-typography-label-active: var(--goa-typography-heading-xs);
package/dist/tokens.scss CHANGED
@@ -1,28 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 22 Jan 2025 23:12:57 GMT
3
+ // Generated on Fri, 24 Jan 2025 16:30:35 GMT
4
4
 
5
- $goa-space-4xl: 8rem;
6
- $goa-space-3xl: 4rem;
7
- $goa-space-2xl: 3rem;
8
- $goa-space-xl: 2rem;
9
- $goa-space-l: 1.5rem;
10
- $goa-space-m: 1rem;
11
- $goa-space-s: 0.75rem;
12
- $goa-space-xs: 0.5rem;
13
- $goa-space-2xs: 0.25rem;
14
- $goa-space-3xs: 0.125rem;
15
- $goa-space-none: 0rem;
16
- $goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
17
- $goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
18
- $goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
19
- $goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
20
- $goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
21
- $goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
22
- $goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
23
- $goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
24
- $goa-opacity-background-loading: 90%;
25
- $goa-opacity-background-modal: 50%;
5
+ $goa-font-weight-bold: 700;
6
+ $goa-font-weight-medium: 500;
7
+ $goa-font-weight-regular: 400;
8
+ $goa-font-size-10: 3rem;
9
+ $goa-font-size-9: 2.25rem;
10
+ $goa-font-size-8: 2rem;
11
+ $goa-font-size-7: 1.5rem;
12
+ $goa-font-size-6: 1.375rem;
13
+ $goa-font-size-5: 1.25rem;
14
+ $goa-font-size-4: 1.125rem;
15
+ $goa-font-size-3: 1rem;
16
+ $goa-font-size-2: 0.875rem;
17
+ $goa-font-size-1: 0.75rem;
18
+ $goa-font-family-number: roboto-mono, monospace;
19
+ $goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
26
20
  $goa-line-height-05: 1.125rem;
27
21
  $goa-line-height-7: 3.5rem;
28
22
  $goa-line-height-6: 2.75rem;
@@ -31,6 +25,14 @@ $goa-line-height-4: 2rem;
31
25
  $goa-line-height-3: 1.75rem;
32
26
  $goa-line-height-2: 1.5rem;
33
27
  $goa-line-height-1: 1.25rem;
28
+ $goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
29
+ $goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
30
+ $goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
31
+ $goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
32
+ $goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
33
+ $goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
34
+ $goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
35
+ $goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
34
36
  $goa-icon-size-l: 1.5rem;
35
37
  $goa-icon-size-m: 1.25rem;
36
38
  $goa-icon-size-s: 1rem;
@@ -40,21 +42,33 @@ $goa-icon-size-4: 1.5rem;
40
42
  $goa-icon-size-3: 1.25rem;
41
43
  $goa-icon-size-2: 1.125rem;
42
44
  $goa-icon-size-1: 1rem;
43
- $goa-font-weight-bold: 700;
44
- $goa-font-weight-medium: 500;
45
- $goa-font-weight-regular: 400;
46
- $goa-font-size-10: 3rem;
47
- $goa-font-size-9: 2.25rem;
48
- $goa-font-size-8: 2rem;
49
- $goa-font-size-7: 1.5rem;
50
- $goa-font-size-6: 1.375rem;
51
- $goa-font-size-5: 1.25rem;
52
- $goa-font-size-4: 1.125rem;
53
- $goa-font-size-3: 1rem;
54
- $goa-font-size-2: 0.875rem;
55
- $goa-font-size-1: 0.75rem;
56
- $goa-font-family-number: roboto-mono, monospace;
57
- $goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
45
+ $goa-space-4xl: 8rem;
46
+ $goa-space-3xl: 4rem;
47
+ $goa-space-2xl: 3rem;
48
+ $goa-space-xl: 2rem;
49
+ $goa-space-l: 1.5rem;
50
+ $goa-space-m: 1rem;
51
+ $goa-space-s: 0.75rem;
52
+ $goa-space-xs: 0.5rem;
53
+ $goa-space-2xs: 0.25rem;
54
+ $goa-space-3xs: 0.125rem;
55
+ $goa-space-none: 0rem;
56
+ $goa-border-width-xl: 4px;
57
+ $goa-border-width-l: 3px;
58
+ $goa-border-width-m: 2px;
59
+ $goa-border-width-s: 1px;
60
+ $goa-border-width-xs: 0.7px;
61
+ $goa-border-width-2xs: 0.5px;
62
+ $goa-border-width-none: 0px;
63
+ $goa-border-radius-3xl: 0.75rem;
64
+ $goa-border-radius-2xl: 0.625rem;
65
+ $goa-border-radius-xl: 0.5rem;
66
+ $goa-border-radius-l: 0.375rem;
67
+ $goa-border-radius-m: 0.25rem;
68
+ $goa-border-radius-s: 0.125rem;
69
+ $goa-border-radius-none: 0;
70
+ $goa-opacity-background-loading: 90%;
71
+ $goa-opacity-background-modal: 50%;
58
72
  $goa-color-extended-yellow: #fce796;
59
73
  $goa-color-extended-violet: #d4c2ff;
60
74
  $goa-color-extended-red: #ed948d;
@@ -113,20 +127,6 @@ $goa-color-interactive-error: #ec040b;
113
127
  $goa-color-interactive-disabled: #80b7e1;
114
128
  $goa-color-interactive-hover: #004f84;
115
129
  $goa-color-interactive-default: #0070c4;
116
- $goa-border-width-xl: 4px;
117
- $goa-border-width-l: 3px;
118
- $goa-border-width-m: 2px;
119
- $goa-border-width-s: 1px;
120
- $goa-border-width-xs: 0.7px;
121
- $goa-border-width-2xs: 0.5px;
122
- $goa-border-width-none: 0px;
123
- $goa-border-radius-3xl: 0.75rem;
124
- $goa-border-radius-2xl: 0.625rem;
125
- $goa-border-radius-xl: 0.5rem;
126
- $goa-border-radius-l: 0.375rem;
127
- $goa-border-radius-m: 0.25rem;
128
- $goa-border-radius-s: 0.125rem;
129
- $goa-border-radius-none: 0;
130
130
  $goa-tooltip-max-width: 400px;
131
131
  $goa-tab-color-bg-selected: transparent;
132
132
  $goa-side-menu-child-color-bg: none;
@@ -142,11 +142,13 @@ $goa-radio-border-radius: 50%;
142
142
  $goa-radio-border-checked-error-hover: 7px solid #ba0000;
143
143
  $goa-radio-border-checked-error-disabled: 7px solid #f58185;
144
144
  $goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
145
- $goa-popover-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
145
+ $goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
146
146
  $goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
147
147
  $goa-text-input-transition: box-shadow 0.05s ease-in;
148
148
  $goa-text-input-color-icon: ;
149
149
  $goa-text-input-size-icon: ;
150
+ $goa-app-header-min-width-service-name: 8rem;
151
+ $goa-app-header-max-width-service-name: 28rem;
150
152
  $goa-stepper-line-thickness: 4px;
151
153
  $goa-step-size: 2.5rem;
152
154
  $goa-step-gap-small-screen: 0px;
@@ -158,7 +160,6 @@ $goa-dropdown-transition: box-shadow 0.05s ease-in;
158
160
  $goa-dropdown-item-color-text-disabled: ;
159
161
  $goa-dropdown-item-color-bg-disabled: ;
160
162
  $goa-drawer-transition-time: 200ms;
161
- $goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
162
163
  $goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
163
164
  $goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
164
165
  $goa-drawer-overlay-color: rgba(0,0,0,0.3);
@@ -185,6 +186,7 @@ $goa-button-height-compact: 2rem;
185
186
  $goa-button-height: 2.625rem;
186
187
  $goa-badge-height: 22px;
187
188
  $goa-accordion-shadow: 0px 0px 0px 0px #000000;
189
+ $goa-border-none: $goa-border-width-none solid rgba(0,0,0,0);
188
190
  $goa-typography-number-l: $goa-font-weight-medium $goa-font-size-7/$goa-line-height-4 $goa-font-family-number;
189
191
  $goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
190
192
  $goa-typography-number-s: $goa-font-weight-medium $goa-font-size-3/$goa-line-height-2 $goa-font-family-number;
@@ -201,7 +203,6 @@ $goa-color-text-disabled: $goa-color-greyscale-700;
201
203
  $goa-color-text-light: $goa-color-greyscale-white;
202
204
  $goa-color-text-secondary: $goa-color-greyscale-700;
203
205
  $goa-color-text-default: $goa-color-greyscale-black;
204
- $goa-border-none: $goa-border-width-none solid rgba(0,0,0,0);
205
206
  $goa-tooltip-padding: 6px $goa-space-m 10px $goa-space-m;
206
207
  $goa-tooltip-gap: $goa-space-2xs;
207
208
  $goa-tooltip-color-bg: $goa-color-greyscale-700;
@@ -350,18 +351,44 @@ $goa-icon-button-default-color: $goa-color-interactive-default;
350
351
  $goa-hero-banner-content-gap: $goa-space-l 0 0;
351
352
  $goa-hero-banner-mobile-padding: $goa-space-xl 0;
352
353
  $goa-hero-banner-padding: $goa-space-2xl 0;
354
+ $goa-app-header-space-btw-service-name-nav-items-mobile: $goa-space-l;
355
+ $goa-app-header-space-btw-logo-service-name-mobile: $goa-space-xs;
356
+ $goa-app-header-space-btw-logo-service-name: $goa-space-m;
357
+ $goa-app-header-size-logo-mobile: $goa-space-l;
358
+ $goa-app-header-size-logo: $goa-space-xl;
359
+ $goa-app-header-padding-tablet: $goa-space-xl;
360
+ $goa-app-header-padding-secondary-nav-item-in-menu: 9px $goa-space-m 9px $goa-space-xl;
361
+ $goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px $goa-space-m 9px 80px;
362
+ $goa-app-header-padding-nav-item-in-menu: 9px $goa-space-m;
363
+ $goa-app-header-padding-nav-item-with-children: $goa-space-m $goa-space-s $goa-space-s;
364
+ $goa-app-header-padding-nav-item: $goa-space-m $goa-space-s;
365
+ $goa-app-header-padding-mobile: $goa-space-m;
366
+ $goa-app-header-padding-menu-button: $goa-space-m $goa-space-s;
353
367
  $goa-app-header-padding-logo-mobile: $goa-space-s $goa-space-m;
368
+ $goa-app-header-padding-logo: 14px $goa-space-xl $goa-space-m 0px;
369
+ $goa-app-header-padding-link-item: $goa-space-m;
354
370
  $goa-app-header-padding-desktop: $goa-space-3xl;
355
- $goa-app-header-color-menu-button-focus: $goa-color-interactive-hover;
356
- $goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
357
- $goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
358
371
  $goa-app-header-color-text-nav-item-hover: $goa-color-interactive-hover;
372
+ $goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
373
+ $goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
374
+ $goa-app-header-color-menu-button-focus: $goa-color-interactive-hover;
375
+ $goa-app-header-color-bg-nav-item-in-menu-current-hover: $goa-color-interactive-hover;
376
+ $goa-app-header-color-bg-nav-item-in-menu-current: $goa-color-interactive-default;
377
+ $goa-app-header-color-bg-nav-item-hover: $goa-color-greyscale-white;
378
+ $goa-app-header-color-bg-nav-item-focus: $goa-color-greyscale-white;
379
+ $goa-app-header-color-bg-nav-item-current: $goa-color-greyscale-white;
380
+ $goa-app-header-color-bg-nav-item: $goa-color-greyscale-white;
381
+ $goa-app-header-color-bg-menu-button-hover: $goa-color-greyscale-100;
382
+ $goa-app-header-color-bg-menu-button-focus: $goa-color-greyscale-100;
359
383
  $goa-app-header-color-bg: $goa-color-greyscale-white;
360
- $goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px $goa-space-m 9px 80px;
361
- $goa-app-header-padding-secondary-nav-item-in-menu: 9px $goa-space-m 9px $goa-space-xl;
362
- $goa-app-header-padding-nav-item-with-children: $goa-space-m $goa-space-s $goa-space-s;
363
- $goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 $goa-color-greyscale-200;
364
384
  $goa-app-header-border-top-menu-item: inset 0 1px 0 0 $goa-color-greyscale-200;
385
+ $goa-app-header-border-nav-item-hover: $goa-space-2xs solid $goa-color-interactive-hover;
386
+ $goa-app-header-border-nav-item-focus: $goa-space-2xs solid $goa-color-interactive-hover;
387
+ $goa-app-header-border-nav-item-default: $goa-space-2xs solid transparent;
388
+ $goa-app-header-border-nav-item-current-focus: $goa-space-2xs solid $goa-color-interactive-hover;
389
+ $goa-app-header-border-nav-item-current: $goa-space-2xs solid $goa-color-interactive-default;
390
+ $goa-app-header-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
391
+ $goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 $goa-color-greyscale-200;
365
392
  $goa-app-header-border-bottom: $goa-border-width-s solid $goa-color-greyscale-200;
366
393
  $goa-stepper-color-line-active: $goa-color-interactive-default;
367
394
  $goa-stepper-color-line: $goa-color-greyscale-200;
@@ -428,6 +455,7 @@ $goa-dropdown-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-foc
428
455
  $goa-dropdown-border-error: inset 0 0 0 $goa-border-width-m $goa-color-interactive-error;
429
456
  $goa-dropdown-border-disabled: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-200;
430
457
  $goa-dropdown-border: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-700;
458
+ $goa-drawer-right-shadow: inset -4 0 12 0 $goa-border-width-s rgba(0,0,0,0.2);
431
459
  $goa-drawer-padding: $goa-space-m;
432
460
  $goa-divider-color: $goa-color-greyscale-200;
433
461
  $goa-details-padding-right: $goa-space-s;
@@ -567,14 +595,14 @@ $goa-button-primary-color-bg: $goa-color-interactive-default;
567
595
  $goa-button-compact-icon-size: $goa-icon-size-2;
568
596
  $goa-button-icon-size: $goa-icon-size-3;
569
597
  $goa-button-gap: $goa-space-xs;
570
- $goa-button-text-start: $goa-font-family-sans $goa-font-weight-bold $goa-font-size-5 $goa-line-height-1 $goa-button-letter-spacing;
571
- $goa-button-text-compact: $goa-font-family-sans $goa-font-weight-regular $goa-font-size-4 $goa-line-height-05 $goa-button-letter-spacing;
572
- $goa-button-text: $goa-font-family-sans $goa-font-weight-regular $goa-font-size-5 $goa-line-height-1 $goa-button-letter-spacing;
598
+ $goa-button-text-start: $goa-font-weight-bold $goa-font-size-5 $goa-line-height-1 $goa-font-family-sans;
599
+ $goa-button-text-compact: $goa-font-weight-regular $goa-font-size-4 $goa-line-height-05 $goa-font-family-sans;
600
+ $goa-button-text: $goa-font-weight-regular $goa-font-size-5 $goa-line-height-1 $goa-font-family-sans;
573
601
  $goa-button-padding-lr-start: $goa-space-m;
574
602
  $goa-button-padding-lr-compact: $goa-space-xs;
575
603
  $goa-button-padding-lr: $goa-space-s;
576
604
  $goa-button-border-radius: $goa-border-radius-m;
577
- $goa-badge-border: 0px 0px 0px $goa-border-width-spx rgba(0,0,0,0.5);
605
+ $goa-badge-border: inset 0 0 0 $goa-border-width-s rgba(0, 0, 0, 0.5);
578
606
  $goa-badge-light-color-bg: $goa-color-greyscale-white;
579
607
  $goa-badge-midtone-color-bg: $goa-color-greyscale-700;
580
608
  $goa-badge-dark-color-bg: $goa-color-greyscale-black;
@@ -641,9 +669,15 @@ $goa-text-input-color-text-disabled: $goa-color-text-secondary;
641
669
  $goa-text-input-color-text: $goa-color-text-default;
642
670
  $goa-hero-banner-content: $goa-typography-body-l;
643
671
  $goa-hero-banner-heading: $goa-typography-heading-xl;
644
- $goa-app-header-color-menu-button: $goa-color-text-default;
672
+ $goa-app-header-typography-service-name-mobile: $goa-typography-body-s;
673
+ $goa-app-header-typography-service-name: $goa-typography-body-m;
674
+ $goa-app-header-typography-nav-item: $goa-typography-heading-s;
675
+ $goa-app-header-typography-menu-button-mobile: $goa-typography-body-s;
676
+ $goa-app-header-typography-menu-button: $goa-typography-body-m;
645
677
  $goa-app-header-color-text-nav-item-current: $goa-color-text-default;
646
678
  $goa-app-header-color-text-nav-item: $goa-color-text-default;
679
+ $goa-app-header-color-service-name: $goa-color-text-default;
680
+ $goa-app-header-color-menu-button: $goa-color-text-default;
647
681
  $goa-step-typography-sublabel: $goa-typography-body-xs;
648
682
  $goa-step-typography-step-number: $goa-typography-heading-xs;
649
683
  $goa-step-typography-label-active: $goa-typography-heading-xs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",