@abgov/design-tokens 1.4.2 → 1.5.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 (35) hide show
  1. package/data/component-design-tokens/accordion-design-tokens.json +6 -4
  2. package/data/component-design-tokens/badge-design-tokens.json +103 -0
  3. package/data/component-design-tokens/button-design-tokens.json +326 -8
  4. package/data/component-design-tokens/button-group-design-tokens.json +12 -0
  5. package/data/component-design-tokens/checkbox-design-tokens.json +99 -0
  6. package/data/component-design-tokens/container-design-tokens.json +146 -0
  7. package/data/component-design-tokens/date-picker-design-tokens.json +102 -0
  8. package/data/component-design-tokens/details-design-tokens.json +84 -0
  9. package/data/component-design-tokens/divider-design-tokens.json +6 -0
  10. package/data/component-design-tokens/dropdown-design-tokens.json +110 -0
  11. package/data/component-design-tokens/file-uploader-design-tokens.json +102 -0
  12. package/data/component-design-tokens/footer-design-tokens.json +74 -0
  13. package/data/component-design-tokens/form-item-design-tokens.json +46 -0
  14. package/data/component-design-tokens/form-stepper-design-tokens.json +98 -0
  15. package/data/component-design-tokens/header-design-tokens.json +70 -0
  16. package/data/component-design-tokens/hero-banner-design-tokens.json +22 -0
  17. package/data/component-design-tokens/icon-button-design-tokens.json +74 -0
  18. package/data/component-design-tokens/input-design-tokens.json +90 -0
  19. package/data/component-design-tokens/microsite-header-design-tokens.json +66 -0
  20. package/data/component-design-tokens/modal-design-tokens.json +53 -0
  21. package/data/component-design-tokens/notification-banner-design-tokens.json +90 -0
  22. package/data/component-design-tokens/popover-design-tokens.json +33 -0
  23. package/data/component-design-tokens/progress-indicator-design-tokens.json +22 -0
  24. package/data/component-design-tokens/radio-design-tokens.json +138 -0
  25. package/data/component-design-tokens/scrollable-design-tokens.json +12 -0
  26. package/data/component-design-tokens/side-menu-design-tokens.json +175 -14
  27. package/data/component-design-tokens/skeleton-loading-design-tokens.json +6 -0
  28. package/data/component-design-tokens/table-design-tokens.json +4 -0
  29. package/data/component-design-tokens/tabs-design-tokens.json +78 -0
  30. package/data/component-design-tokens/text-area-design-tokens.json +67 -0
  31. package/data/component-design-tokens/tooltip-design-tokens.json +38 -0
  32. package/data/goa-global-design-tokens.json +252 -215
  33. package/dist/tokens.css +552 -59
  34. package/dist/tokens.scss +552 -59
  35. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -1,10 +1,47 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Oct 2024 18:32:11 GMT
3
+ * Generated on Wed, 22 Jan 2025 23:12:57 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --goa-letter-spacing-button: 0.0125rem;
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%;
28
+ --goa-line-height-05: 1.125rem;
29
+ --goa-line-height-7: 3.5rem;
30
+ --goa-line-height-6: 2.75rem;
31
+ --goa-line-height-5: 2.5rem;
32
+ --goa-line-height-4: 2rem;
33
+ --goa-line-height-3: 1.75rem;
34
+ --goa-line-height-2: 1.5rem;
35
+ --goa-line-height-1: 1.25rem;
36
+ --goa-icon-size-l: 1.5rem;
37
+ --goa-icon-size-m: 1.25rem;
38
+ --goa-icon-size-s: 1rem;
39
+ --goa-icon-size-6: 2.5rem;
40
+ --goa-icon-size-5: 2rem;
41
+ --goa-icon-size-4: 1.5rem;
42
+ --goa-icon-size-3: 1.25rem;
43
+ --goa-icon-size-2: 1.125rem;
44
+ --goa-icon-size-1: 1rem;
8
45
  --goa-font-weight-bold: 700;
9
46
  --goa-font-weight-medium: 500;
10
47
  --goa-font-weight-regular: 400;
@@ -20,49 +57,6 @@
20
57
  --goa-font-size-1: 0.75rem;
21
58
  --goa-font-family-number: roboto-mono, monospace;
22
59
  --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
23
- --goa-line-height-05: 1.125rem;
24
- --goa-line-height-7: 3.5rem;
25
- --goa-line-height-6: 2.75rem;
26
- --goa-line-height-5: 2.5rem;
27
- --goa-line-height-4: 2rem;
28
- --goa-line-height-3: 1.75rem;
29
- --goa-line-height-2: 1.5rem;
30
- --goa-line-height-1: 1.25rem;
31
- --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
32
- --goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
33
- --goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
34
- --goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
35
- --goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
36
- --goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
37
- --goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
38
- --goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
39
- --goa-icon-size-l: 1.5rem;
40
- --goa-icon-size-m: 1.25rem;
41
- --goa-icon-size-s: 1rem;
42
- --goa-space-4xl: 8rem;
43
- --goa-space-3xl: 4rem;
44
- --goa-space-2xl: 3rem;
45
- --goa-space-xl: 2rem;
46
- --goa-space-l: 1.5rem;
47
- --goa-space-m: 1rem;
48
- --goa-space-s: 0.75rem;
49
- --goa-space-xs: 0.5rem;
50
- --goa-space-2xs: 0.25rem;
51
- --goa-space-3xs: 0.125rem;
52
- --goa-space-none: 0rem;
53
- --goa-border-width-l: 3px;
54
- --goa-border-width-m: 2px;
55
- --goa-border-width-s: 1px;
56
- --goa-border-width-xs: 0.7px;
57
- --goa-border-width-2xs: 0.5px;
58
- --goa-border-radius-3xl: 0.75rem;
59
- --goa-border-radius-2xl: 0.625rem;
60
- --goa-border-radius-xl: 0.5rem;
61
- --goa-border-radius-l: 0.375rem;
62
- --goa-border-radius-m: 0.25rem;
63
- --goa-border-radius-none: 0;
64
- --goa-opacity-background-loading: 90%;
65
- --goa-opacity-background-modal: 50%;
66
60
  --goa-color-extended-yellow: #fce796;
67
61
  --goa-color-extended-violet: #d4c2ff;
68
62
  --goa-color-extended-red: #ed948d;
@@ -93,11 +87,11 @@
93
87
  --goa-color-greyscale-100: #f1f1f1;
94
88
  --goa-color-greyscale-50: #f8f8f8;
95
89
  --goa-color-critical-default: #171d23;
96
- --goa-color-success-background: #eef9f3;
90
+ --goa-color-success-background: #f2fffa;
97
91
  --goa-color-success-dark: #00563a;
98
92
  --goa-color-success-light: #cce4dc;
99
93
  --goa-color-success-default: #006f4c;
100
- --goa-color-emergency-background: #fff1f2;
94
+ --goa-color-emergency-background: #fff6f6;
101
95
  --goa-color-emergency-dark: #a91a10;
102
96
  --goa-color-emergency-light: #fbd1ce;
103
97
  --goa-color-emergency-default: #da291c;
@@ -121,26 +115,81 @@
121
115
  --goa-color-interactive-disabled: #80b7e1;
122
116
  --goa-color-interactive-hover: #004f84;
123
117
  --goa-color-interactive-default: #0070c4;
124
- --goa-side-menu-parent-color-bg-hover: #CEDFEE;
125
- --goa-side-menu-child-border-width: 4px;
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
+ --goa-tooltip-max-width: 400px;
133
+ --goa-tab-color-bg-selected: transparent;
134
+ --goa-side-menu-child-color-bg: none;
135
+ --goa-side-menu-width: 256px;
136
+ --goa-side-menu-sub-item-color-bg: none;
137
+ --goa-side-menu-parent-color-bg-selected: #cedfee;
138
+ --goa-side-menu-parent-color-bg-hover: #cedfee;
139
+ --goa-side-menu-color-bg-menu-item-hover: #cedfee;
140
+ --goa-side-menu-color-bg-menu-item-current: #cedfee;
141
+ --goa-scrollable-padding-mobile: 1.5rem;
142
+ --goa-scrollable-padding-desktop: 2rem;
143
+ --goa-radio-border-radius: 50%;
144
+ --goa-radio-border-checked-error-hover: 7px solid #ba0000;
145
+ --goa-radio-border-checked-error-disabled: 7px solid #f58185;
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);
148
+ --goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
149
+ --goa-text-input-transition: box-shadow 0.05s ease-in;
150
+ --goa-text-input-color-icon: ;
151
+ --goa-text-input-size-icon: ;
152
+ --goa-stepper-line-thickness: 4px;
153
+ --goa-step-size: 2.5rem;
154
+ --goa-step-gap-small-screen: 0px;
155
+ --goa-footer-meta-links-gap-small-screen: 20px;
156
+ --goa-footer-size-logo-tablet: 155px;
157
+ --goa-footer-size-logo-mobile: 133px;
158
+ --goa-footer-size-logo-desktop: 155px;
159
+ --goa-dropdown-transition: box-shadow 0.05s ease-in;
160
+ --goa-dropdown-item-color-text-disabled: ;
161
+ --goa-dropdown-item-color-bg-disabled: ;
126
162
  --goa-drawer-transition-time: 200ms;
127
163
  --goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
128
164
  --goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
129
165
  --goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
130
166
  --goa-drawer-overlay-color: rgba(0,0,0,0.3);
167
+ --goa-details-text-decoration: underline;
168
+ --goa-details-padding-top: 6px;
169
+ --goa-details-content-padding-left: 19px;
170
+ --goa-details-content-margin-left: 17px;
171
+ --goa-date-input-day-color-bg: transparent;
172
+ --goa-date-input-day-size: 2.5rem;
173
+ --goa-date-input-calendar-width: 280px;
174
+ --goa-checkbox-border-radius: 2px;
131
175
  --goa-callout-emergency-border-color: none;
132
176
  --goa-callout-success-border-color: none;
133
177
  --goa-callout-warning-border-color: none;
134
178
  --goa-callout-info-border-color: none;
135
179
  --goa-callout-l-border-width: 0px;
136
180
  --goa-callout-m-border-width: 0px;
137
- --goa-button-height-compact: 32px;
138
- --goa-button-height: 42px;
181
+ --goa-button-letter-spacing: 0.0125rem;
182
+ --goa-button-tertiary-color-bg: none;
183
+ --goa-button-secondary-inverse-color-bg: none;
184
+ --goa-button-compact-gap: 0.375rem;
185
+ --goa-button-height-start: 3.25rem;
186
+ --goa-button-height-compact: 2rem;
187
+ --goa-button-height: 2.625rem;
188
+ --goa-badge-height: 22px;
139
189
  --goa-accordion-shadow: 0px 0px 0px 0px #000000;
140
190
  --goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
141
191
  --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
142
192
  --goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
143
- --goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
144
193
  --goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
145
194
  --goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
146
195
  --goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
@@ -154,18 +203,298 @@
154
203
  --goa-color-text-light: var(--goa-color-greyscale-white);
155
204
  --goa-color-text-secondary: var(--goa-color-greyscale-700);
156
205
  --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
+ --goa-tooltip-padding: 6px var(--goa-space-m) 10px var(--goa-space-m);
208
+ --goa-tooltip-gap: var(--goa-space-2xs);
209
+ --goa-tooltip-color-bg: var(--goa-color-greyscale-700);
210
+ --goa-tooltip-border-radius: var(--goa-border-radius-m);
211
+ --goa-tooltip-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
212
+ --goa-text-area-padding: 0.625rem var(--goa-space-s);
213
+ --goa-text-area-color-text-counter-error: var(--goa-color-interactive-error);
214
+ --goa-text-area-color-bg-disabled: var(--goa-color-greyscale-100);
215
+ --goa-text-area-color-bg: var(--goa-color-greyscale-white);
216
+ --goa-text-area-border-radius: var(--goa-border-radius-m);
217
+ --goa-text-area-border-hover: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);
218
+ --goa-text-area-border-focus: 0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);
219
+ --goa-text-area-border-error: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error);
220
+ --goa-text-area-border-disabled: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
221
+ --goa-text-area-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-700);
222
+ --goa-tabs-gap-small-screen: var(--goa-space-2xs);
223
+ --goa-tabs-gap: var(--goa-space-xl);
224
+ --goa-tabs-bottom-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
225
+ --goa-tab-padding-mobile: 6px var(--goa-space-m);
226
+ --goa-tab-padding: var(--goa-space-xs) var(--goa-space-m);
227
+ --goa-tab-color-bg-selected-small-screen: var(--goa-color-info-background);
228
+ --goa-tab-border-selected: var(--goa-border-width-xl) solid var(--goa-color-interactive-default);
229
+ --goa-tab-border-not-selected: var(--goa-border-width-xl) solid transparent;
230
+ --goa-tab-border-hover: var(--goa-border-width-xl) solid var(--goa-color-greyscale-200);
231
+ --goa-tab-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
232
+ --goa-goa-table-header-padding: var(--goa-space-m);
157
233
  --goa-table-color-border-heading: var(--goa-color-greyscale-600);
234
+ --goa-skeleton-loading-color-bg: var(--goa-color-greyscale-100);
235
+ --goa-side-menu-child-border-width: var(--goa-border-width-xl);
158
236
  --goa-side-menu-child-color-bg-selected: var(--goa-color-info-background);
159
237
  --goa-side-menu-child-color-bg-hover: var(--goa-color-info-background);
160
- --goa-side-menu-group-border-radius: var(--goa-border-radius-none);
161
- --goa-side-menu-parent-padding: var(--goa-space-xs) var(--goa-space-m) var(--goa-space-xs) var(--goa-space-xl);
162
- --goa-side-menu-sub-group-padding: var(--goa-space-none) var(--goa-space-none) var(--goa-space-none) var(--goa-space-none);
238
+ --goa-side-menu-child-border-left-selected: var(--goa-border-width-xl) solid var(--goa-color-interactive-disabled);
239
+ --goa-side-menu-child-border-left-hover: var(--goa-border-width-xl) solid var(--goa-color-greyscale-200);
240
+ --goa-side-menu-child-border-left: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
163
241
  --goa-side-menu-group-padding: var(--goa-space-none);
164
242
  --goa-side-menu-group-color-bg: var(--goa-color-greyscale-white);
243
+ --goa-side-menu-group-border-radius: var(--goa-border-radius-none);
244
+ --goa-side-menu-sub-item-color-bg-hover: var(--goa-color-info-background);
245
+ --goa-side-menu-sub-item-color-bg-current: var(--goa-color-info-background);
246
+ --goa-side-menu-sub-item-border-left-current: var(--goa-border-width-xl) solid var(--goa-color-interactive-disabled);
247
+ --goa-side-menu-sub-item-border-left-hover: var(--goa-border-width-xl) solid var(--goa-color-greyscale-200);
248
+ --goa-side-menu-sub-item-border-left: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
249
+ --goa-side-menu-sub-group-padding: var(--goa-space-none) var(--goa-space-none) var(--goa-space-none) var(--goa-space-none);
250
+ --goa-side-menu-parent-padding: var(--goa-space-xs) var(--goa-space-s) 10px var(--goa-space-xl);
251
+ --goa-side-menu-padding-child: var(--goa-space-xs) var(--goa-space-s) 10px var(--goa-space-m);
252
+ --goa-side-menu-padding-item: var(--goa-space-xs) var(--goa-space-s) 10px var(--goa-space-xl);
253
+ --goa-side-menu-padding: var(--goa-space-m) var(--goa-space-none) var(--goa-space-l) var(--goa-space-none);
254
+ --goa-side-menu-item-focus-border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
255
+ --goa-side-menu-items-gap: var(--goa-space-none);
256
+ --goa-side-menu-icon-size: var(--goa-icon-size-l);
257
+ --goa-side-menu-heading-padding: var(--goa-space-s) var(--goa-space-s) var(--goa-space-xs) var(--goa-space-l);
258
+ --goa-side-menu-heading-margin: var(--goa-space-none) 0 0 0;
259
+ --goa-side-menu-heading-icon-gap: var(--goa-space-xs);
260
+ --goa-side-menu-heading-color-bg: var(--goa-color-greyscale-100);
261
+ --goa-side-menu-heading-border: var(--goa-border-width-m) solid var(--goa-color-greyscale-200);
262
+ --goa-side-menu-color-bg: var(--goa-color-greyscale-white);
263
+ --goa-side-menu-border-right: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
264
+ --goa-radio-size: var(--goa-space-l);
265
+ --goa-radio-label-color-disabled: var(--goa-color-greyscale-500);
266
+ --goa-radio-group-gap-vertical: var(--goa-space-m);
267
+ --goa-radio-group-gap-horizontal: var(--goa-space-l);
268
+ --goa-radio-color-bg: var(--goa-color-greyscale-white);
269
+ --goa-radio-border-hover: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
270
+ --goa-radio-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
271
+ --goa-radio-border-error-hover: var(--goa-border-width-m) solid #ba0000;
272
+ --goa-radio-border-error-disabled: var(--goa-border-width-m) solid #f58185;
273
+ --goa-radio-border-error: var(--goa-border-width-m) solid var(--goa-color-interactive-error);
274
+ --goa-radio-border-disabled: var(--goa-border-width-s) solid var(--goa-color-greyscale-400);
275
+ --goa-radio-border-checked-hover: 7px solid var(--goa-color-interactive-hover);
276
+ --goa-radio-border-checked-error: 7px solid var(--goa-color-interactive-error);
277
+ --goa-radio-border-checked-disabled: 7px solid var(--goa-color-interactive-disabled);
278
+ --goa-radio-border-checked: 7px solid var(--goa-color-interactive-default);
279
+ --goa-radio-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-700);
280
+ --goa-circular-progress-small-margin-top: var(--goa-space-l);
281
+ --goa-circular-progress-large-margin-top: var(--goa-space-xl);
282
+ --goa-popover-padding: var(--goa-space-s);
283
+ --goa-popover-color-bg: var(--goa-color-greyscale-white);
284
+ --goa-popover-border-radius: var(--goa-border-radius-m);
285
+ --goa-popover-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
286
+ --goa-notification-banner-custom-color-icon: var(--goa-color-greyscale-white);
287
+ --goa-notification-banner-custom-color-bg: var(--goa-color-info-default);
288
+ --goa-notification-banner-size-icon: var(--goa-icon-size-4);
289
+ --goa-notification-banner-padding-tb: var(--goa-space-l);
290
+ --goa-notification-banner-padding-lr-small-screen: var(--goa-space-m);
291
+ --goa-notification-banner-padding-lr-medium-screen: var(--goa-space-l);
292
+ --goa-notification-banner-padding-lr-large-screen: var(--goa-space-3xl);
293
+ --goa-notification-banner-information-color-icon: var(--goa-color-greyscale-white);
294
+ --goa-notification-banner-information-color-bg: var(--goa-color-info-default);
295
+ --goa-notification-banner-important-color-icon: var(--goa-color-greyscale-black);
296
+ --goa-notification-banner-important-color-bg: var(--goa-color-warning-default);
297
+ --goa-notification-banner-gap: var(--goa-space-m);
298
+ --goa-notification-banner-event-color-icon: var(--goa-color-greyscale-white);
299
+ --goa-notification-banner-event-color-bg: var(--goa-color-info-default);
300
+ --goa-notification-banner-emergency-color-icon: var(--goa-color-greyscale-white);
301
+ --goa-notification-banner-emergency-color-bg: var(--goa-color-emergency-default);
302
+ --goa-modal-overlay-opacity: var(--goa-opacity-background-modal);
303
+ --goa-modal-padding-small-screen: var(--goa-space-l);
304
+ --goa-modal-padding: var(--goa-space-xl);
305
+ --goa-modal-overlay-color: var(--goa-color-greyscale-black);
306
+ --goa-modal-content-gap-small-screen: var(--goa-space-m);
307
+ --goa-modal-content-gap: var(--goa-space-l);
308
+ --goa-modal-callout-bar-padding-small-screen: var(--goa-space-s) var(--goa-space-s) var(--goa-space-s) var(--goa-space-l);
309
+ --goa-modal-callout-bar-padding: var(--goa-space-xl);
310
+ --goa-modal-border-radius: var(--goa-border-radius-m);
311
+ --goa-microsite-header-typography-version-number: var(--goa-font-size-1);
312
+ --goa-microsite-header-padding-small-screen: var(--goa-space-2xs) var(--goa-space-m);
313
+ --goa-microsite-header-padding-medium-screen: var(--goa-space-2xs) var(--goa-space-xl);
314
+ --goa-microsite-header-padding-large-screen: var(--goa-space-2xs) var(--goa-space-3xl);
315
+ --goa-microsite-header-link-focus-border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
316
+ --goa-microsite-header-gap: var(--goa-space-m);
317
+ --goa-microsite-header-color-links-hover: var(--goa-color-interactive-hover);
318
+ --goa-microsite-header-color-links: var(--goa-color-interactive-default);
319
+ --goa-microsite-header-color-bg: var(--goa-color-greyscale-100);
320
+ --goa-microsite-header-beta-badge-color: var(--goa-color-brand-default);
321
+ --goa-microsite-header-alpha-badge-color: var(--goa-color-warning-default);
322
+ --goa-text-input-space-btw-icon-text: var(--goa-space-xs);
323
+ --goa-text-input-padding-lr: var(--goa-space-s);
324
+ --goa-text-input-lt-content-color-bg: var(--goa-color-greyscale-100);
325
+ --goa-text-input-color-icon-disabled: var(--goa-color-greyscale-500);
326
+ --goa-text-input-color-bg-disabled: var(--goa-color-greyscale-100);
327
+ --goa-text-input-color-bg: var(--goa-color-greyscale-white);
328
+ --goa-text-input-border-radius: var(--goa-border-radius-m);
329
+ --goa-text-input-border-hover: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);
330
+ --goa-text-input-border-focus: 0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);
331
+ --goa-text-input-border-error: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error);
332
+ --goa-text-input-border-disabled: 1px solid var(--goa-color-greyscale-200);
333
+ --goa-text-input-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-700);
334
+ --goa-icon-button-medium-padding: var(--goa-space-2xs);
335
+ --goa-icon-button-large-padding: var(--goa-space-xs);
336
+ --goa-icon-button-medium-border-radius: var(--goa-border-radius-m);
337
+ --goa-icon-button-large-border-radius: var(--goa-border-radius-xl);
338
+ --goa-icon-button-destructive-disabled-color: var(--goa-color-interactive-error-disabled);
339
+ --goa-icon-button-destructive-hover-color-bg: var(--goa-color-emergency-light);
340
+ --goa-icon-button-destructive-color: var(--goa-color-emergency-default);
341
+ --goa-icon-button-dark-disabled-color-bg: var(--goa-color-greyscale-500);
342
+ --goa-icon-button-dark-hover-color-bg: var(--goa-color-greyscale-100);
343
+ --goa-icon-button-dark-color: var(--goa-color-greyscale-black);
344
+ --goa-icon-button-light-disabled-color: var(--goa-color-greyscale-500);
345
+ --goa-icon-button-light-hover-color-bg: var(--goa-color-greyscale-700);
346
+ --goa-icon-button-light-color: var(--goa-color-greyscale-white);
347
+ --goa-icon-button-default-disabled-color: var(--goa-color-interactive-disabled);
348
+ --goa-icon-button-default-hover-color-bg: var(--goa-color-greyscale-100);
349
+ --goa-icon-button-default-focus-color: var(--goa-color-interactive-hover);
350
+ --goa-icon-button-default-hover-color: var(--goa-color-interactive-hover);
351
+ --goa-icon-button-default-color: var(--goa-color-interactive-default);
352
+ --goa-hero-banner-content-gap: var(--goa-space-l) 0 0;
353
+ --goa-hero-banner-mobile-padding: var(--goa-space-xl) 0;
354
+ --goa-hero-banner-padding: var(--goa-space-2xl) 0;
355
+ --goa-app-header-padding-logo-mobile: var(--goa-space-s) var(--goa-space-m);
356
+ --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
+ --goa-app-header-color-text-nav-item-hover: var(--goa-color-interactive-hover);
361
+ --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
+ --goa-app-header-border-top-menu-item: inset 0 1px 0 0 var(--goa-color-greyscale-200);
367
+ --goa-app-header-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
368
+ --goa-stepper-color-line-active: var(--goa-color-interactive-default);
369
+ --goa-stepper-color-line: var(--goa-color-greyscale-200);
370
+ --goa-step-padding-vertical: var(--goa-space-2xs) var(--goa-space-l);
371
+ --goa-step-padding: var(--goa-space-l);
372
+ --goa-step-color-border-incomplete: var(--goa-color-interactive-default);
373
+ --goa-step-color-border-complete: var(--goa-color-interactive-default);
374
+ --goa-step-color-border-active: var(--goa-color-interactive-default);
375
+ --goa-step-color-border: var(--goa-color-greyscale-400);
376
+ --goa-step-color-bg-incomplete: var(--goa-color-greyscale-white);
377
+ --goa-step-color-bg-complete: var(--goa-color-interactive-default);
378
+ --goa-step-color-bg-active: var(--goa-color-greyscale-white);
379
+ --goa-step-color-bg: var(--goa-color-greyscale-white);
380
+ --goa-step-border: var(--goa-border-width-xl) solid var(--goa-step-color-border-active);
381
+ --goa-form-item-optional-label-color: var(--goa-color-greyscale-700);
382
+ --goa-form-item-message-margin-top: var(--goa-space-s);
383
+ --goa-form-item-message-gap: var(--goa-space-2xs);
384
+ --goa-form-item-label-padding-bottom: var(--goa-space-s);
385
+ --goa-form-item-label-large-padding-bottom: var(--goa-space-m);
386
+ --goa-form-item-error-message-color: var(--goa-color-interactive-error);
387
+ --goa-footer-meta-links-gap: var(--goa-space-l);
388
+ --goa-footer-typography-small-screen: var(--goa-font-size-3);
389
+ --goa-footer-padding-small-screen: var(--goa-space-xl) var(--goa-space-m);
390
+ --goa-footer-padding-medium-screen: var(--goa-space-2xl) var(--goa-space-xl);
391
+ --goa-footer-padding-large-screen: var(--goa-space-2xl) var(--goa-space-3xl);
392
+ --goa-footer-link-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
393
+ --goa-footer-color-links-hover: var(--goa-color-greyscale-700);
394
+ --goa-footer-color-bg: var(--goa-color-greyscale-100);
395
+ --goa-footer-border-top: var(--goa-border-width-m) solid var(--goa-color-greyscale-200);
396
+ --goa-footer-border-bottom: 1rem solid var(--goa-color-brand-default);
397
+ --goa-file-upload-text-gap: var(--goa-space-m);
398
+ --goa-file-upload-padding: var(--goa-space-xl);
399
+ --goa-file-upload-instruction-color-hover: var(--goa-color-interactive-hover);
400
+ --goa-file-upload-instruction-color-focus: var(--goa-color-interactive-hover);
401
+ --goa-file-upload-instruction-color-drag: var(--goa-color-interactive-hover);
402
+ --goa-file-upload-instruction-color-active: var(--goa-color-interactive-hover);
403
+ --goa-file-upload-instruction-color: var(--goa-color-interactive-default);
404
+ --goa-file-upload-help-text-color: var(--goa-color-greyscale-700);
405
+ --goa-file-upload-color-bg-hover: var(--goa-color-greyscale-100);
406
+ --goa-file-upload-color-bg-focus: var(--goa-color-greyscale-100);
407
+ --goa-file-upload-color-bg-drag: var(--goa-color-info-background);
408
+ --goa-file-upload-color-bg-active: var(--goa-color-info-background);
409
+ --goa-file-upload-color-bg: var(--goa-color-info-background);
410
+ --goa-file-upload-border-radius: var(--goa-border-radius-m);
411
+ --goa-file-upload-border-hover: var(--goa-border-width-m) dashed var(--goa-color-interactive-hover);
412
+ --goa-file-upload-border-focus: 0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);
413
+ --goa-file-upload-border-drag: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
414
+ --goa-file-upload-border-active: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
415
+ --goa-file-upload-border: var(--goa-border-width-m) dashed var(--goa-color-interactive-default);
416
+ --goa-dropdown-space-icon-text: var(--goa-space-s);
417
+ --goa-dropdown-padding-lr: var(--goa-space-s);
418
+ --goa-dropdown-item-color-text-selected-hover: var(--goa-color-greyscale-white);
419
+ --goa-dropdown-item-color-text-selected: var(--goa-color-greyscale-white);
420
+ --goa-dropdown-item-color-text-hover: var(--goa-color-interactive-hover);
421
+ --goa-dropdown-item-color-bg-selected-hover: var(--goa-color-interactive-hover);
422
+ --goa-dropdown-item-color-bg-selected: var(--goa-color-interactive-default);
423
+ --goa-dropdown-item-color-bg-hover: var(--goa-color-greyscale-100);
424
+ --goa-dropdown-item-color-bg: var(--goa-color-greyscale-white);
425
+ --goa-dropdown-color-bg-disabled: var(--goa-color-greyscale-100);
426
+ --goa-dropdown-color-bg: var(--goa-color-greyscale-white);
427
+ --goa-dropdown-border-radius: var(--goa-border-radius-m);
428
+ --goa-dropdown-border-hover: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);
429
+ --goa-dropdown-border-focus: 0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);
430
+ --goa-dropdown-border-error: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error);
431
+ --goa-dropdown-border-disabled: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
432
+ --goa-dropdown-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-700);
165
433
  --goa-drawer-padding: var(--goa-space-m);
166
- --goa-container-padding: var(--goa-space-l);
434
+ --goa-divider-color: var(--goa-color-greyscale-200);
435
+ --goa-details-padding-right: var(--goa-space-s);
436
+ --goa-details-padding-left: var(--goa-space-xs);
437
+ --goa-details-padding-bottom: var(--goa-space-xs);
438
+ --goa-details-margin-bottom: var(--goa-space-xs);
439
+ --goa-details-focus-border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
440
+ --goa-details-content-padding-top: var(--goa-space-s);
441
+ --goa-details-content-padding-right: var(--goa-space-m);
442
+ --goa-details-content-padding-bottom: var(--goa-space-s);
443
+ --goa-details-content-left-border: 4px solid var(--goa-color-greyscale-200);
444
+ --goa-details-color-text-hover: var(--goa-color-interactive-hover);
445
+ --goa-details-color-text: var(--goa-color-interactive-default);
446
+ --goa-details-color-bg-hover: var(--goa-color-greyscale-100);
447
+ --goa-details-border-radius: var(--goa-border-radius-m);
448
+ --goa-date-input-day-color-bg-selected-hover: var(--goa-color-interactive-hover);
449
+ --goa-date-input-day-color-bg-selected: var(--goa-color-interactive-default);
450
+ --goa-date-input-day-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
451
+ --goa-date-input-day-color-bg-hover: var(--goa-color-greyscale-200);
452
+ --goa-date-input-day-border-radius: var(--goa-border-radius-m);
453
+ --goa-date-input-day-underline-today-selected: var(--goa-border-width-l) solid var(--goa-color-greyscale-white);
454
+ --goa-date-input-day-underline-today-width: var(--goa-space-l);
455
+ --goa-date-input-day-underline-today: var(--goa-border-width-l) solid var(--goa-color-interactive-default);
456
+ --goa-date-input-day-of-week-margin: var(--goa-space-xs);
457
+ --goa-date-input-calendar-border-radius: var(--goa-border-radius-m);
458
+ --goa-container-important-border: var(--goa-border-width-s) solid var(--goa-color-warning-default);
459
+ --goa-container-important-heading-bg-color: var(--goa-color-warning-default);
460
+ --goa-container-important-bg-color: var(--goa-color-warning-background);
461
+ --goa-container-success-border: var(--goa-border-width-s) solid var(--goa-color-success-default);
462
+ --goa-container-success-heading-bg-color: var(--goa-color-success-default);
463
+ --goa-container-success-bg-color: var(--goa-color-success-background);
464
+ --goa-container-error-border: var(--goa-border-width-s) solid var(--goa-color-emergency-default);
465
+ --goa-container-error-heading-bg-color: var(--goa-color-emergency-default);
466
+ --goa-container-error-bg-color: var(--goa-color-emergency-background);
467
+ --goa-container-info-border: var(--goa-border-width-s) solid var(--goa-color-info-default);
468
+ --goa-container-info-heading-bg-color: var(--goa-color-info-default);
469
+ --goa-container-info-bg-color: var(--goa-color-info-background);
470
+ --goa-container-non-interactive-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
471
+ --goa-container-non-interactive-heading-bg-color: var(--goa-color-greyscale-100);
472
+ --goa-container-non-interactive-bg-color: var(--goa-color-greyscale-100);
473
+ --goa-container-interactive-border: var(--goa-border-width-s) solid var(--goa-color-brand-default);
474
+ --goa-container-interactive-heading-bg-color: var(--goa-color-brand-default);
475
+ --goa-container-interactive-bg-color: var(--goa-color-greyscale-white);
476
+ --goa-container-accent-thin-height: var(--goa-space-xs);
477
+ --goa-container-accent-thick-height: var(--goa-space-m);
478
+ --goa-container-heading-gap: var(--goa-space-l);
479
+ --goa-container-heading-padding: var(--goa-space-xs);
480
+ --goa-container-padding-compact: var(--goa-space-m);
481
+ --goa-container-padding: var(--goa-space-xl);
167
482
  --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
168
483
  --goa-container-border-radius: var(--goa-border-radius-m);
484
+ --goa-checkbox-size: var(--goa-space-l);
485
+ --goa-checkbox-gap: var(--goa-space-xs);
486
+ --goa-checkbox-color-label-disabled: var(--goa-color-greyscale-500);
487
+ --goa-checkbox-color-bg-checked-hover: var(--goa-color-interactive-hover);
488
+ --goa-checkbox-color-bg-checked-error: var(--goa-color-interactive-error);
489
+ --goa-checkbox-color-bg-checked-disabled: var(--goa-color-interactive-disabled);
490
+ --goa-checkbox-color-bg-checked: var(--goa-color-interactive-default);
491
+ --goa-checkbox-color-bg: var(--goa-color-greyscale-white);
492
+ --goa-checkbox-border-hover: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
493
+ --goa-checkbox-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
494
+ --goa-checkbox-border-error: var(--goa-border-width-m) solid var(--goa-color-interactive-error);
495
+ --goa-checkbox-border-disabled-error: var(--goa-border-width-m) solid #F58185;
496
+ --goa-checkbox-border-disabled: var(--goa-border-width-s) solid var(--goa-color-greyscale-400);
497
+ --goa-checkbox-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-700);
169
498
  --goa-callout-event-icon-color: var(--goa-color-greyscale-white);
170
499
  --goa-callout-emergency-icon-color: var(--goa-color-greyscale-white);
171
500
  --goa-callout-emergency-color-bg-statusbar: var(--goa-color-emergency-default);
@@ -188,9 +517,80 @@
188
517
  --goa-callout-l-content-padding: var(--goa-space-l);
189
518
  --goa-callout-l-icon-size: var(--goa-icon-size-m);
190
519
  --goa-callout-border-radius: var(--goa-border-radius-none);
520
+ --goa-button-group-compact-gap: var(--goa-space-s);
521
+ --goa-button-group-gap: var(--goa-space-m);
522
+ --goa-button-tertiary-inverse-focus-color-text: var(--goa-color-interactive-hover);
523
+ --goa-button-tertiary-inverse-hover-color-text: var(--goa-color-interactive-hover);
524
+ --goa-button-tertiary-inverse-color-text: var(--goa-color-greyscale-white);
525
+ --goa-button-tertiary-destructive-focus-color-text: var(--goa-color-emergency-dark);
526
+ --goa-button-tertiary-destructive-hover-color-text: var(--goa-color-emergency-dark);
527
+ --goa-button-tertiary-destructive-color-text: var(--goa-color-emergency-default);
528
+ --goa-button-tertiary-focus-color-text: var(--goa-color-interactive-hover);
529
+ --goa-button-tertiary-focus-color-bg: var(--goa-color-greyscale-100);
530
+ --goa-button-tertiary-hover-color-text: var(--goa-color-interactive-hover);
531
+ --goa-button-tertiary-hover-color-bg: var(--goa-color-greyscale-100);
532
+ --goa-button-tertiary-border: var(--goa-border-width-none) solid rgba(0,0,0,0);
533
+ --goa-button-tertiary-color-text: var(--goa-color-interactive-default);
534
+ --goa-button-tertiary-color-bg-mobile: var(--goa-color-greyscale-100);
535
+ --goa-button-secondary-inverse-focus-border: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
536
+ --goa-button-secondary-inverse-hover-border: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
537
+ --goa-button-secondary-inverse-border: var(--goa-border-width-m) solid var(--goa-color-greyscale-white);
538
+ --goa-button-secondary-destructive-focus-border: var(--goa-border-width-m) solid var(--goa-color-emergency-dark);
539
+ --goa-button-secondary-inverse-focus-color-text: var(--goa-color-interactive-hover);
540
+ --goa-button-secondary-inverse-hover-color-text: var(--goa-color-interactive-hover);
541
+ --goa-button-secondary-inverse-color-text: var(--goa-color-greyscale-white);
542
+ --goa-button-secondary-destructive-focus-color-text: var(--goa-color-emergency-dark);
543
+ --goa-button-secondary-destructive-hover-color-text: var(--goa-color-emergency-dark);
544
+ --goa-button-secondary-destructive-hover-border: var(--goa-border-width-m) solid var(--goa-color-emergency-dark);
545
+ --goa-button-secondary-destructive-border: var(--goa-border-width-m) solid var(--goa-color-emergency-default);
546
+ --goa-button-secondary-destructive-color-text: var(--goa-color-emergency-default);
547
+ --goa-button-secondary-focus-border: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
548
+ --goa-button-secondary-focus-color-text: var(--goa-color-interactive-hover);
549
+ --goa-button-secondary-focus-color-bg: var(--goa-color-greyscale-100);
550
+ --goa-button-secondary-hover-border: var(--goa-border-width-m) solid var(--goa-color-interactive-hover);
551
+ --goa-button-secondary-hover-color-text: var(--goa-color-interactive-hover);
552
+ --goa-button-secondary-hover-color-bg: var(--goa-color-greyscale-100);
553
+ --goa-button-secondary-border: var(--goa-border-width-m) solid var(--goa-color-interactive-default);
554
+ --goa-button-secondary-color-text: var(--goa-color-interactive-default);
555
+ --goa-button-secondary-color-bg: var(--goa-color-greyscale-white);
556
+ --goa-button-primary-inverse-focus-color-bg: var(--goa-color-interactive-hover);
557
+ --goa-button-primary-inverse-hover-color-text: var(--goa-color-greyscale-white);
558
+ --goa-button-primary-inverse-hover-color-bg: var(--goa-color-interactive-hover);
559
+ --goa-button-primary-inverse-color-bg: var(--goa-color-greyscale-white);
560
+ --goa-button-primary-destructive-focus-color-bg: var(--goa-color-emergency-dark);
561
+ --goa-button-primary-destructive-hover-color-bg: var(--goa-color-emergency-dark);
562
+ --goa-button-primary-destructive-color-bg: var(--goa-color-emergency-default);
563
+ --goa-button-primary-focus-border: var(--goa-border-width-none) solid rgba(0,0,0,0);
564
+ --goa-button-primary-focus-color-bg: var(--goa-color-interactive-hover);
565
+ --goa-button-primary-hover-border: var(--goa-border-width-none) solid rgba(0,0,0,0);
566
+ --goa-button-primary-hover-color-bg: var(--goa-color-interactive-hover);
567
+ --goa-button-primary-border: var(--goa-border-width-none) solid rgba(0,0,0,0);
568
+ --goa-button-primary-color-bg: var(--goa-color-interactive-default);
569
+ --goa-button-compact-icon-size: var(--goa-icon-size-2);
570
+ --goa-button-icon-size: var(--goa-icon-size-3);
571
+ --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);
575
+ --goa-button-padding-lr-start: var(--goa-space-m);
191
576
  --goa-button-padding-lr-compact: var(--goa-space-xs);
192
577
  --goa-button-padding-lr: var(--goa-space-s);
193
578
  --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);
580
+ --goa-badge-light-color-bg: var(--goa-color-greyscale-white);
581
+ --goa-badge-midtone-color-bg: var(--goa-color-greyscale-700);
582
+ --goa-badge-dark-color-bg: var(--goa-color-greyscale-black);
583
+ --goa-badge-emergency-color-bg: var(--goa-color-emergency-default);
584
+ --goa-badge-important-color-bg: var(--goa-color-warning-default);
585
+ --goa-badge-success-color-bg: var(--goa-color-success-default);
586
+ --goa-badge-info-color-content: var(--goa-color-info-default);
587
+ --goa-badge-info-color-bg: var(--goa-color-greyscale-100);
588
+ --goa-badge-border-radius: var(--goa-border-radius-m);
589
+ --goa-badge-icon-size: var(--goa-icon-size-1);
590
+ --goa-badge-line-height: var(--goa-line-height-1);
591
+ --goa-badge-font-size: var(--goa-font-size-2);
592
+ --goa-badge-gap: var(--goa-space-2xs);
593
+ --goa-badge-padding: 0px var(--goa-space-xs);
194
594
  --goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
195
595
  --goa-accordion-padding-content-narrow: var(--goa-space-l);
196
596
  --goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
@@ -201,16 +601,109 @@
201
601
  --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
202
602
  --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
203
603
  --goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
604
+ --goa-tooltip-text-size: var(--goa-typography-body-m);
605
+ --goa-tooltip-color-text: var(--goa-color-text-light);
606
+ --goa-text-area-typography-counter: var(--goa-typography-body-xs);
607
+ --goa-text-area-typography: var(--goa-typography-body-m);
608
+ --goa-text-area-color-text-placeholder: var(--goa-color-text-secondary);
609
+ --goa-text-area-color-text-disabled: var(--goa-color-text-disabled);
610
+ --goa-text-area-color-text-counter: var(--goa-color-text-default);
611
+ --goa-text-area-color-text: var(--goa-color-text-default);
612
+ --goa-tab-typography-selected: var(--goa-typography-heading-s);
613
+ --goa-tab-typography: var(--goa-typography-body-m);
614
+ --goa-tab-text-color: var(--goa-color-text-default);
204
615
  --goa-table-color-heading: var(--goa-color-text-secondary);
205
- --goa-side-menu-parent-text-active: var(--goa-typography-body-m);
206
- --goa-side-menu-parent-text: var(--goa-typography-body-m);
616
+ --goa-side-menu-typography-item-current: var(--goa-typography-heading-s);
617
+ --goa-side-menu-typography-item: var(--goa-typography-body-m);
207
618
  --goa-side-menu-child-color-text-selected: var(--goa-color-text-default);
619
+ --goa-side-menu-icon-color: var(--goa-color-text-secondary);
620
+ --goa-side-menu-heading-typography: var(--goa-typography-heading-s);
621
+ --goa-side-menu-heading-color: var(--goa-color-text-secondary);
622
+ --goa-side-menu-color-menu-item: var(--goa-color-text-default);
623
+ --goa-radio-label: var(--goa-typography-body-m);
624
+ --goa-radio-description: var(--goa-typography-body-xs);
625
+ --goa-circular-progress-small-text: var(--goa-typography-body-m);
626
+ --goa-circular-progress-large-text: var(--goa-typography-body-l);
627
+ --goa-notification-banner-custom-color-text: var(--goa-color-text-light);
628
+ --goa-notification-banner-text-size: var(--goa-typography-body-m);
629
+ --goa-notification-banner-information-color-text: var(--goa-color-text-light);
630
+ --goa-notification-banner-important-color-text: var(--goa-color-text-default);
631
+ --goa-notification-banner-event-color-text: var(--goa-color-text-light);
632
+ --goa-notification-banner-emergency-color-text: var(--goa-color-text-light);
633
+ --goa-modal-header-typography: var(--goa-typography-heading-m);
634
+ --goa-microsite-header-typography: var(--goa-typography-body-xs);
635
+ --goa-microsite-header-color-version-number: var(--goa-color-text-secondary);
636
+ --goa-microsite-header-beta-badge-color-text: var(--goa-color-text-light);
637
+ --goa-microsite-header-alpha-badge-color-text: var(--goa-color-text-default);
638
+ --goa-text-input-typography: var(--goa-typography-body-m);
639
+ --goa-text-input-padding: 7px var(--goa-text-input-padding-lr) 9px;
640
+ --goa-text-input-lt-content-color-text: var(--goa-color-text-default);
641
+ --goa-text-input-color-text-placeholder: var(--goa-color-text-secondary);
642
+ --goa-text-input-color-text-disabled: var(--goa-color-text-secondary);
643
+ --goa-text-input-color-text: var(--goa-color-text-default);
644
+ --goa-hero-banner-content: var(--goa-typography-body-l);
645
+ --goa-hero-banner-heading: var(--goa-typography-heading-xl);
646
+ --goa-app-header-color-menu-button: var(--goa-color-text-default);
647
+ --goa-app-header-color-text-nav-item-current: var(--goa-color-text-default);
648
+ --goa-app-header-color-text-nav-item: var(--goa-color-text-default);
649
+ --goa-step-typography-sublabel: var(--goa-typography-body-xs);
650
+ --goa-step-typography-step-number: var(--goa-typography-heading-xs);
651
+ --goa-step-typography-label-active: var(--goa-typography-heading-xs);
652
+ --goa-step-typography-label: var(--goa-typography-body-s);
653
+ --goa-step-color-sublabel: var(--goa-color-text-secondary);
654
+ --goa-step-color-step-number: var(--goa-color-text-secondary);
655
+ --goa-step-color-label: var(--goa-color-text-default);
656
+ --goa-form-item-optional-label-typography: var(--goa-typography-body-xs);
657
+ --goa-form-item-message-typography: var(--goa-typography-body-xs);
658
+ --goa-form-item-label-typography: var(--goa-typography-heading-s);
659
+ --goa-form-item-label-large-typography: var(--goa-typography-heading-l);
660
+ --goa-form-item-help-message-color: var(--goa-color-text-default);
661
+ --goa-footer-color-links: var(--goa-color-text-default);
662
+ --goa-file-upload-instruction-text: var(--goa-typography-body-m);
663
+ --goa-file-upload-help-text: var(--goa-typography-body-s);
664
+ --goa-dropdown-typography: var(--goa-typography-body-m);
665
+ --goa-dropdown-padding: 6px var(--goa-dropdown-padding-lr) 8px;
666
+ --goa-dropdown-item-padding: 7px var(--goa-dropdown-padding-lr) 9px;
667
+ --goa-dropdown-item-color-text: var(--goa-color-text-default);
668
+ --goa-dropdown-color-text-placeholder: var(--goa-color-text-secondary);
669
+ --goa-dropdown-color-text-disabled: var(--goa-color-text-disabled);
670
+ --goa-dropdown-color-text: var(--goa-color-text-default);
671
+ --goa-details-typography: var(--goa-typography-body-m);
672
+ --goa-date-input-day-color-text-disabled: var(--goa-color-text-secondary);
673
+ --goa-date-input-day-color-text-other-month: var(--goa-color-text-secondary);
674
+ --goa-date-input-day-color-text-selected-hover: var(--goa-color-text-light);
675
+ --goa-date-input-day-color-text-selected: var(--goa-color-text-light);
676
+ --goa-date-input-day-color-text-hover: var(--goa-color-text-default);
677
+ --goa-date-input-day-color-text: var(--goa-color-text-default);
678
+ --goa-date-input-day-font-today: var(--goa-typography-heading-xs);
679
+ --goa-date-input-day-font: var(--goa-typography-body-s);
680
+ --goa-date-input-day-of-week-font: var(--goa-typography-heading-xs);
681
+ --goa-container-important-heading-text-color: var(--goa-color-text-default);
682
+ --goa-container-success-heading-text-color: var(--goa-color-text-light);
683
+ --goa-container-error-heading-text-color: var(--goa-color-text-light);
684
+ --goa-container-info-heading-text-color: var(--goa-color-text-light);
685
+ --goa-container-non-interactive-heading-text-color: var(--goa-color-text-default);
686
+ --goa-container-interactive-heading-text-color: var(--goa-color-text-light);
687
+ --goa-container-heading: var(--goa-typography-heading-s);
688
+ --goa-checkbox-label-font-size: var(--goa-typography-body-m);
689
+ --goa-checkbox-description-font-size: var(--goa-typography-body-xs);
690
+ --goa-checkbox-color-label: var(--goa-color-text-default);
208
691
  --goa-callout-m-text-size: var(--goa-typography-body-s);
209
692
  --goa-callout-l-heading-size: var(--goa-typography-heading-m);
210
693
  --goa-callout-m-heading-size: var(--goa-typography-heading-xs);
211
694
  --goa-callout-l-text-size: var(--goa-typography-body-m);
212
695
  --goa-callout-l-heading: var(--goa-typography-heading-m);
213
- --goa-button-text: var(--goa-typography-button-default);
696
+ --goa-button-primary-inverse-color-text: var(--goa-color-text-default);
697
+ --goa-button-primary-destructive-hover-color-text: var(--goa-color-text-light);
698
+ --goa-button-primary-focus-color-text: var(--goa-color-text-light);
699
+ --goa-button-primary-hover-color-text: var(--goa-color-text-light);
700
+ --goa-button-primary-color-text: var(--goa-color-text-light);
701
+ --goa-badge-light-color-content: var(--goa-color-text-default);
702
+ --goa-badge-midtone-color-content: var(--goa-color-text-light);
703
+ --goa-badge-dark-color-content: var(--goa-color-text-light);
704
+ --goa-badge-emergency-color-content: var(--goa-color-text-light);
705
+ --goa-badge-important-color-content: var(--goa-color-text-default);
706
+ --goa-badge-success-color-content: var(--goa-color-text-light);
214
707
  --goa-accordion-heading-m: var(--goa-typography-heading-m);
215
708
  --goa-accordion-heading-s: var(--goa-typography-heading-s);
216
709
  --goa-accordion-color-heading-hover: var(--goa-color-text-default);