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