@abgov/design-tokens 1.5.0 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-design-tokens/badge-design-tokens.json +2 -9
- package/data/component-design-tokens/button-design-tokens.json +3 -3
- package/data/component-design-tokens/drawer-design-tokens.json +4 -11
- package/data/component-design-tokens/header-design-tokens.json +250 -18
- package/data/component-design-tokens/popover-design-tokens.json +2 -9
- package/data/goa-global-design-tokens.json +221 -221
- package/dist/tokens.css +115 -66
- package/dist/tokens.scss +115 -66
- package/package.json +1 -1
package/dist/tokens.css
CHANGED
|
@@ -1,30 +1,24 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 28 Jan 2025 17:14:53 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--goa-
|
|
8
|
-
--goa-
|
|
9
|
-
--goa-
|
|
10
|
-
--goa-
|
|
11
|
-
--goa-
|
|
12
|
-
--goa-
|
|
13
|
-
--goa-
|
|
14
|
-
--goa-
|
|
15
|
-
--goa-
|
|
16
|
-
--goa-
|
|
17
|
-
--goa-
|
|
18
|
-
--goa-
|
|
19
|
-
--goa-
|
|
20
|
-
--goa-
|
|
21
|
-
--goa-
|
|
22
|
-
--goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
23
|
-
--goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
24
|
-
--goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
25
|
-
--goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
26
|
-
--goa-opacity-background-loading: 90%;
|
|
27
|
-
--goa-opacity-background-modal: 50%;
|
|
7
|
+
--goa-font-weight-bold: 700;
|
|
8
|
+
--goa-font-weight-medium: 500;
|
|
9
|
+
--goa-font-weight-regular: 400;
|
|
10
|
+
--goa-font-size-10: 3rem;
|
|
11
|
+
--goa-font-size-9: 2.25rem;
|
|
12
|
+
--goa-font-size-8: 2rem;
|
|
13
|
+
--goa-font-size-7: 1.5rem;
|
|
14
|
+
--goa-font-size-6: 1.375rem;
|
|
15
|
+
--goa-font-size-5: 1.25rem;
|
|
16
|
+
--goa-font-size-4: 1.125rem;
|
|
17
|
+
--goa-font-size-3: 1rem;
|
|
18
|
+
--goa-font-size-2: 0.875rem;
|
|
19
|
+
--goa-font-size-1: 0.75rem;
|
|
20
|
+
--goa-font-family-number: roboto-mono, monospace;
|
|
21
|
+
--goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
28
22
|
--goa-line-height-05: 1.125rem;
|
|
29
23
|
--goa-line-height-7: 3.5rem;
|
|
30
24
|
--goa-line-height-6: 2.75rem;
|
|
@@ -33,6 +27,14 @@
|
|
|
33
27
|
--goa-line-height-3: 1.75rem;
|
|
34
28
|
--goa-line-height-2: 1.5rem;
|
|
35
29
|
--goa-line-height-1: 1.25rem;
|
|
30
|
+
--goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
31
|
+
--goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
|
|
32
|
+
--goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
|
|
33
|
+
--goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
|
|
34
|
+
--goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
35
|
+
--goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
36
|
+
--goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
37
|
+
--goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
36
38
|
--goa-icon-size-l: 1.5rem;
|
|
37
39
|
--goa-icon-size-m: 1.25rem;
|
|
38
40
|
--goa-icon-size-s: 1rem;
|
|
@@ -42,21 +44,33 @@
|
|
|
42
44
|
--goa-icon-size-3: 1.25rem;
|
|
43
45
|
--goa-icon-size-2: 1.125rem;
|
|
44
46
|
--goa-icon-size-1: 1rem;
|
|
45
|
-
--goa-
|
|
46
|
-
--goa-
|
|
47
|
-
--goa-
|
|
48
|
-
--goa-
|
|
49
|
-
--goa-
|
|
50
|
-
--goa-
|
|
51
|
-
--goa-
|
|
52
|
-
--goa-
|
|
53
|
-
--goa-
|
|
54
|
-
--goa-
|
|
55
|
-
--goa-
|
|
56
|
-
--goa-
|
|
57
|
-
--goa-
|
|
58
|
-
--goa-
|
|
59
|
-
--goa-
|
|
47
|
+
--goa-space-4xl: 8rem;
|
|
48
|
+
--goa-space-3xl: 4rem;
|
|
49
|
+
--goa-space-2xl: 3rem;
|
|
50
|
+
--goa-space-xl: 2rem;
|
|
51
|
+
--goa-space-l: 1.5rem;
|
|
52
|
+
--goa-space-m: 1rem;
|
|
53
|
+
--goa-space-s: 0.75rem;
|
|
54
|
+
--goa-space-xs: 0.5rem;
|
|
55
|
+
--goa-space-2xs: 0.25rem;
|
|
56
|
+
--goa-space-3xs: 0.125rem;
|
|
57
|
+
--goa-space-none: 0rem;
|
|
58
|
+
--goa-border-width-xl: 4px;
|
|
59
|
+
--goa-border-width-l: 3px;
|
|
60
|
+
--goa-border-width-m: 2px;
|
|
61
|
+
--goa-border-width-s: 1px;
|
|
62
|
+
--goa-border-width-xs: 0.7px;
|
|
63
|
+
--goa-border-width-2xs: 0.5px;
|
|
64
|
+
--goa-border-width-none: 0px;
|
|
65
|
+
--goa-border-radius-3xl: 0.75rem;
|
|
66
|
+
--goa-border-radius-2xl: 0.625rem;
|
|
67
|
+
--goa-border-radius-xl: 0.5rem;
|
|
68
|
+
--goa-border-radius-l: 0.375rem;
|
|
69
|
+
--goa-border-radius-m: 0.25rem;
|
|
70
|
+
--goa-border-radius-s: 0.125rem;
|
|
71
|
+
--goa-border-radius-none: 0;
|
|
72
|
+
--goa-opacity-background-loading: 90%;
|
|
73
|
+
--goa-opacity-background-modal: 50%;
|
|
60
74
|
--goa-color-extended-yellow: #fce796;
|
|
61
75
|
--goa-color-extended-violet: #d4c2ff;
|
|
62
76
|
--goa-color-extended-red: #ed948d;
|
|
@@ -115,20 +129,6 @@
|
|
|
115
129
|
--goa-color-interactive-disabled: #80b7e1;
|
|
116
130
|
--goa-color-interactive-hover: #004f84;
|
|
117
131
|
--goa-color-interactive-default: #0070c4;
|
|
118
|
-
--goa-border-width-xl: 4px;
|
|
119
|
-
--goa-border-width-l: 3px;
|
|
120
|
-
--goa-border-width-m: 2px;
|
|
121
|
-
--goa-border-width-s: 1px;
|
|
122
|
-
--goa-border-width-xs: 0.7px;
|
|
123
|
-
--goa-border-width-2xs: 0.5px;
|
|
124
|
-
--goa-border-width-none: 0px;
|
|
125
|
-
--goa-border-radius-3xl: 0.75rem;
|
|
126
|
-
--goa-border-radius-2xl: 0.625rem;
|
|
127
|
-
--goa-border-radius-xl: 0.5rem;
|
|
128
|
-
--goa-border-radius-l: 0.375rem;
|
|
129
|
-
--goa-border-radius-m: 0.25rem;
|
|
130
|
-
--goa-border-radius-s: 0.125rem;
|
|
131
|
-
--goa-border-radius-none: 0;
|
|
132
132
|
--goa-tooltip-max-width: 400px;
|
|
133
133
|
--goa-tab-color-bg-selected: transparent;
|
|
134
134
|
--goa-side-menu-child-color-bg: none;
|
|
@@ -144,11 +144,18 @@
|
|
|
144
144
|
--goa-radio-border-checked-error-hover: 7px solid #ba0000;
|
|
145
145
|
--goa-radio-border-checked-error-disabled: 7px solid #f58185;
|
|
146
146
|
--goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
|
|
147
|
-
--goa-popover-shadow: 0px 3px 6px
|
|
147
|
+
--goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
|
|
148
148
|
--goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
|
|
149
149
|
--goa-text-input-transition: box-shadow 0.05s ease-in;
|
|
150
150
|
--goa-text-input-color-icon: ;
|
|
151
151
|
--goa-text-input-size-icon: ;
|
|
152
|
+
--goa-app-header-nav-color-bg-link-item-in-menu: transparent;
|
|
153
|
+
--goa-app-header-nav-color-bg-link-item-focus: transparent;
|
|
154
|
+
--goa-app-header-nav-color-bg-link-item-hover: transparent;
|
|
155
|
+
--goa-app-header-nav-color-bg-link-item: transparent;
|
|
156
|
+
--goa-app-header-height-nav-item-mobile: 50px;
|
|
157
|
+
--goa-app-header-min-width-service-name: 8rem;
|
|
158
|
+
--goa-app-header-max-width-service-name: 28rem;
|
|
152
159
|
--goa-stepper-line-thickness: 4px;
|
|
153
160
|
--goa-step-size: 2.5rem;
|
|
154
161
|
--goa-step-gap-small-screen: 0px;
|
|
@@ -160,7 +167,6 @@
|
|
|
160
167
|
--goa-dropdown-item-color-text-disabled: ;
|
|
161
168
|
--goa-dropdown-item-color-bg-disabled: ;
|
|
162
169
|
--goa-drawer-transition-time: 200ms;
|
|
163
|
-
--goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
164
170
|
--goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
165
171
|
--goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
|
|
166
172
|
--goa-drawer-overlay-color: rgba(0,0,0,0.3);
|
|
@@ -187,6 +193,7 @@
|
|
|
187
193
|
--goa-button-height: 2.625rem;
|
|
188
194
|
--goa-badge-height: 22px;
|
|
189
195
|
--goa-accordion-shadow: 0px 0px 0px 0px #000000;
|
|
196
|
+
--goa-border-none: var(--goa-border-width-none) solid rgba(0,0,0,0);
|
|
190
197
|
--goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
|
|
191
198
|
--goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
|
|
192
199
|
--goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
|
|
@@ -203,7 +210,6 @@
|
|
|
203
210
|
--goa-color-text-light: var(--goa-color-greyscale-white);
|
|
204
211
|
--goa-color-text-secondary: var(--goa-color-greyscale-700);
|
|
205
212
|
--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
213
|
--goa-tooltip-padding: 6px var(--goa-space-m) 10px var(--goa-space-m);
|
|
208
214
|
--goa-tooltip-gap: var(--goa-space-2xs);
|
|
209
215
|
--goa-tooltip-color-bg: var(--goa-color-greyscale-700);
|
|
@@ -352,18 +358,53 @@
|
|
|
352
358
|
--goa-hero-banner-content-gap: var(--goa-space-l) 0 0;
|
|
353
359
|
--goa-hero-banner-mobile-padding: var(--goa-space-xl) 0;
|
|
354
360
|
--goa-hero-banner-padding: var(--goa-space-2xl) 0;
|
|
361
|
+
--goa-app-header-nav-color-bg-link-item-in-menu-focus: var(--goa-color-greyscale-100);
|
|
362
|
+
--goa-app-header-height-nav-item: var(--goa-space-3xl);
|
|
363
|
+
--goa-app-header-space-btw-service-name-nav-items-mobile: var(--goa-space-l);
|
|
364
|
+
--goa-app-header-space-btw-logo-service-name-mobile: var(--goa-space-xs);
|
|
365
|
+
--goa-app-header-space-btw-logo-service-name: var(--goa-space-m);
|
|
366
|
+
--goa-app-header-size-logo-mobile: var(--goa-space-l);
|
|
367
|
+
--goa-app-header-size-logo: var(--goa-space-xl);
|
|
368
|
+
--goa-app-header-padding-tablet: var(--goa-space-xl);
|
|
369
|
+
--goa-app-header-padding-secondary-nav-item-in-menu: 9px var(--goa-space-m) 9px var(--goa-space-xl);
|
|
370
|
+
--goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px var(--goa-space-m) 9px 80px;
|
|
371
|
+
--goa-app-header-padding-nav-item-in-menu: 9px var(--goa-space-m);
|
|
372
|
+
--goa-app-header-padding-nav-item-with-children: var(--goa-space-m) var(--goa-space-s) var(--goa-space-s);
|
|
373
|
+
--goa-app-header-padding-nav-item: var(--goa-space-m) var(--goa-space-s);
|
|
374
|
+
--goa-app-header-padding-mobile: var(--goa-space-m);
|
|
375
|
+
--goa-app-header-padding-menu-button: var(--goa-space-m) var(--goa-space-s);
|
|
355
376
|
--goa-app-header-padding-logo-mobile: var(--goa-space-s) var(--goa-space-m);
|
|
377
|
+
--goa-app-header-padding-logo: 14px var(--goa-space-xl) var(--goa-space-m) 0px;
|
|
378
|
+
--goa-app-header-padding-link-item: var(--goa-space-m);
|
|
356
379
|
--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
380
|
--goa-app-header-color-text-nav-item-hover: var(--goa-color-interactive-hover);
|
|
381
|
+
--goa-app-header-color-text-nav-item-focus: var(--goa-color-interactive-hover);
|
|
382
|
+
--goa-app-header-color-menu-button-hover: var(--goa-color-interactive-hover);
|
|
383
|
+
--goa-app-header-color-menu-button-focus: var(--goa-color-interactive-hover);
|
|
384
|
+
--goa-app-header-color-bg-nav-item-child-focus: var(--goa-color-greyscale-100);
|
|
385
|
+
--goa-app-header-color-bg-nav-item-child-hover: var(--goa-color-interactive-hover);
|
|
386
|
+
--goa-app-header-color-bg-nav-item-in-menu-current-hover: var(--goa-color-interactive-hover);
|
|
387
|
+
--goa-app-header-nav-color-text-link-item-focus: var(--goa-color-interactive-hover);
|
|
388
|
+
--goa-app-header-nav-color-text-link-item-hover: var(--goa-color-interactive-hover);
|
|
389
|
+
--goa-app-header-nav-color-text-link-item: var(--goa-color-interactive-default);
|
|
390
|
+
--goa-app-header-color-bg-nav-item-in-menu-current: var(--goa-color-interactive-default);
|
|
391
|
+
--goa-app-header-color-bg-nav-item-hover: var(--goa-color-greyscale-white);
|
|
392
|
+
--goa-app-header-color-bg-nav-item-focus: var(--goa-color-greyscale-white);
|
|
393
|
+
--goa-app-header-color-bg-nav-item-current: var(--goa-color-greyscale-white);
|
|
394
|
+
--goa-app-header-color-bg-nav-item: var(--goa-color-greyscale-white);
|
|
395
|
+
--goa-app-header-color-bg-menu-button-hover: var(--goa-color-greyscale-100);
|
|
396
|
+
--goa-app-header-color-bg-menu-button-focus: var(--goa-color-greyscale-100);
|
|
361
397
|
--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
398
|
--goa-app-header-border-top-menu-item: inset 0 1px 0 0 var(--goa-color-greyscale-200);
|
|
399
|
+
--goa-app-header-border-nav-item-hover: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
400
|
+
--goa-app-header-border-nav-item-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
401
|
+
--goa-app-header-border-nav-item-default: var(--goa-space-2xs) solid transparent;
|
|
402
|
+
--goa-app-header-border-nav-item-current-hover: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
403
|
+
--goa-app-header-border-nav-item-current-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
404
|
+
--goa-app-header-border-nav-item-current: var(--goa-space-2xs) solid var(--goa-color-interactive-default);
|
|
405
|
+
--goa-app-header-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
|
|
406
|
+
--goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 var(--goa-color-greyscale-200);
|
|
407
|
+
--goa-app-header-service-name-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
|
|
367
408
|
--goa-app-header-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
368
409
|
--goa-stepper-color-line-active: var(--goa-color-interactive-default);
|
|
369
410
|
--goa-stepper-color-line: var(--goa-color-greyscale-200);
|
|
@@ -430,6 +471,7 @@
|
|
|
430
471
|
--goa-dropdown-border-error: inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error);
|
|
431
472
|
--goa-dropdown-border-disabled: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
|
|
432
473
|
--goa-dropdown-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-700);
|
|
474
|
+
--goa-drawer-right-shadow: inset -4 0 12 0 var(--goa-border-width-s) rgba(0,0,0,0.2);
|
|
433
475
|
--goa-drawer-padding: var(--goa-space-m);
|
|
434
476
|
--goa-divider-color: var(--goa-color-greyscale-200);
|
|
435
477
|
--goa-details-padding-right: var(--goa-space-s);
|
|
@@ -569,14 +611,14 @@
|
|
|
569
611
|
--goa-button-compact-icon-size: var(--goa-icon-size-2);
|
|
570
612
|
--goa-button-icon-size: var(--goa-icon-size-3);
|
|
571
613
|
--goa-button-gap: var(--goa-space-xs);
|
|
572
|
-
--goa-button-text-start: var(--goa-font-
|
|
573
|
-
--goa-button-text-compact: var(--goa-font-
|
|
574
|
-
--goa-button-text: var(--goa-font-
|
|
614
|
+
--goa-button-text-start: var(--goa-font-weight-bold) var(--goa-font-size-5)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
615
|
+
--goa-button-text-compact: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-05) var(--goa-font-family-sans);
|
|
616
|
+
--goa-button-text: var(--goa-font-weight-regular) var(--goa-font-size-5)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
575
617
|
--goa-button-padding-lr-start: var(--goa-space-m);
|
|
576
618
|
--goa-button-padding-lr-compact: var(--goa-space-xs);
|
|
577
619
|
--goa-button-padding-lr: var(--goa-space-s);
|
|
578
620
|
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
579
|
-
--goa-badge-border:
|
|
621
|
+
--goa-badge-border: inset 0 0 var(--goa-border-width-s) 0 rgba(0, 0, 0, 0.5);
|
|
580
622
|
--goa-badge-light-color-bg: var(--goa-color-greyscale-white);
|
|
581
623
|
--goa-badge-midtone-color-bg: var(--goa-color-greyscale-700);
|
|
582
624
|
--goa-badge-dark-color-bg: var(--goa-color-greyscale-black);
|
|
@@ -643,8 +685,15 @@
|
|
|
643
685
|
--goa-text-input-color-text: var(--goa-color-text-default);
|
|
644
686
|
--goa-hero-banner-content: var(--goa-typography-body-l);
|
|
645
687
|
--goa-hero-banner-heading: var(--goa-typography-heading-xl);
|
|
646
|
-
--goa-app-header-
|
|
688
|
+
--goa-app-header-typography-service-name-mobile: var(--goa-typography-body-s);
|
|
689
|
+
--goa-app-header-typography-service-name: var(--goa-typography-body-m);
|
|
690
|
+
--goa-app-header-typography-link-item: var(--goa-typography-body-m);
|
|
691
|
+
--goa-app-header-typography-menu-item: var(--goa-typography-body-m);
|
|
692
|
+
--goa-app-header-typography-nav-item: var(--goa-typography-heading-s);
|
|
693
|
+
--goa-app-header-typography-menu-button-mobile: var(--goa-typography-body-s);
|
|
694
|
+
--goa-app-header-typography-menu-button: var(--goa-typography-body-m);
|
|
647
695
|
--goa-app-header-color-text-nav-item-current: var(--goa-color-text-default);
|
|
696
|
+
--goa-app-header-color-service-name: var(--goa-color-text-default);
|
|
648
697
|
--goa-app-header-color-text-nav-item: var(--goa-color-text-default);
|
|
649
698
|
--goa-step-typography-sublabel: var(--goa-typography-body-xs);
|
|
650
699
|
--goa-step-typography-step-number: var(--goa-typography-heading-xs);
|
package/dist/tokens.scss
CHANGED
|
@@ -1,28 +1,22 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Jan 2025 17:14:53 GMT
|
|
4
4
|
|
|
5
|
-
$goa-
|
|
6
|
-
$goa-
|
|
7
|
-
$goa-
|
|
8
|
-
$goa-
|
|
9
|
-
$goa-
|
|
10
|
-
$goa-
|
|
11
|
-
$goa-
|
|
12
|
-
$goa-
|
|
13
|
-
$goa-
|
|
14
|
-
$goa-
|
|
15
|
-
$goa-
|
|
16
|
-
$goa-
|
|
17
|
-
$goa-
|
|
18
|
-
$goa-
|
|
19
|
-
$goa-
|
|
20
|
-
$goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
21
|
-
$goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
22
|
-
$goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
23
|
-
$goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
24
|
-
$goa-opacity-background-loading: 90%;
|
|
25
|
-
$goa-opacity-background-modal: 50%;
|
|
5
|
+
$goa-font-weight-bold: 700;
|
|
6
|
+
$goa-font-weight-medium: 500;
|
|
7
|
+
$goa-font-weight-regular: 400;
|
|
8
|
+
$goa-font-size-10: 3rem;
|
|
9
|
+
$goa-font-size-9: 2.25rem;
|
|
10
|
+
$goa-font-size-8: 2rem;
|
|
11
|
+
$goa-font-size-7: 1.5rem;
|
|
12
|
+
$goa-font-size-6: 1.375rem;
|
|
13
|
+
$goa-font-size-5: 1.25rem;
|
|
14
|
+
$goa-font-size-4: 1.125rem;
|
|
15
|
+
$goa-font-size-3: 1rem;
|
|
16
|
+
$goa-font-size-2: 0.875rem;
|
|
17
|
+
$goa-font-size-1: 0.75rem;
|
|
18
|
+
$goa-font-family-number: roboto-mono, monospace;
|
|
19
|
+
$goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
|
|
26
20
|
$goa-line-height-05: 1.125rem;
|
|
27
21
|
$goa-line-height-7: 3.5rem;
|
|
28
22
|
$goa-line-height-6: 2.75rem;
|
|
@@ -31,6 +25,14 @@ $goa-line-height-4: 2rem;
|
|
|
31
25
|
$goa-line-height-3: 1.75rem;
|
|
32
26
|
$goa-line-height-2: 1.5rem;
|
|
33
27
|
$goa-line-height-1: 1.25rem;
|
|
28
|
+
$goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
29
|
+
$goa-shadow-600: 0px 20px 20px -8px #1a1a1a47;
|
|
30
|
+
$goa-shadow-500: 0px 12px 20px -8px #1a1a1a3D;
|
|
31
|
+
$goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
|
|
32
|
+
$goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
|
|
33
|
+
$goa-shadow-200: 0px 3px 1px -1px #1a1a1a12;
|
|
34
|
+
$goa-shadow-150: 0px 1px 0px 0px #1a1a1a40;
|
|
35
|
+
$goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
|
|
34
36
|
$goa-icon-size-l: 1.5rem;
|
|
35
37
|
$goa-icon-size-m: 1.25rem;
|
|
36
38
|
$goa-icon-size-s: 1rem;
|
|
@@ -40,21 +42,33 @@ $goa-icon-size-4: 1.5rem;
|
|
|
40
42
|
$goa-icon-size-3: 1.25rem;
|
|
41
43
|
$goa-icon-size-2: 1.125rem;
|
|
42
44
|
$goa-icon-size-1: 1rem;
|
|
43
|
-
$goa-
|
|
44
|
-
$goa-
|
|
45
|
-
$goa-
|
|
46
|
-
$goa-
|
|
47
|
-
$goa-
|
|
48
|
-
$goa-
|
|
49
|
-
$goa-
|
|
50
|
-
$goa-
|
|
51
|
-
$goa-
|
|
52
|
-
$goa-
|
|
53
|
-
$goa-
|
|
54
|
-
$goa-
|
|
55
|
-
$goa-
|
|
56
|
-
$goa-
|
|
57
|
-
$goa-
|
|
45
|
+
$goa-space-4xl: 8rem;
|
|
46
|
+
$goa-space-3xl: 4rem;
|
|
47
|
+
$goa-space-2xl: 3rem;
|
|
48
|
+
$goa-space-xl: 2rem;
|
|
49
|
+
$goa-space-l: 1.5rem;
|
|
50
|
+
$goa-space-m: 1rem;
|
|
51
|
+
$goa-space-s: 0.75rem;
|
|
52
|
+
$goa-space-xs: 0.5rem;
|
|
53
|
+
$goa-space-2xs: 0.25rem;
|
|
54
|
+
$goa-space-3xs: 0.125rem;
|
|
55
|
+
$goa-space-none: 0rem;
|
|
56
|
+
$goa-border-width-xl: 4px;
|
|
57
|
+
$goa-border-width-l: 3px;
|
|
58
|
+
$goa-border-width-m: 2px;
|
|
59
|
+
$goa-border-width-s: 1px;
|
|
60
|
+
$goa-border-width-xs: 0.7px;
|
|
61
|
+
$goa-border-width-2xs: 0.5px;
|
|
62
|
+
$goa-border-width-none: 0px;
|
|
63
|
+
$goa-border-radius-3xl: 0.75rem;
|
|
64
|
+
$goa-border-radius-2xl: 0.625rem;
|
|
65
|
+
$goa-border-radius-xl: 0.5rem;
|
|
66
|
+
$goa-border-radius-l: 0.375rem;
|
|
67
|
+
$goa-border-radius-m: 0.25rem;
|
|
68
|
+
$goa-border-radius-s: 0.125rem;
|
|
69
|
+
$goa-border-radius-none: 0;
|
|
70
|
+
$goa-opacity-background-loading: 90%;
|
|
71
|
+
$goa-opacity-background-modal: 50%;
|
|
58
72
|
$goa-color-extended-yellow: #fce796;
|
|
59
73
|
$goa-color-extended-violet: #d4c2ff;
|
|
60
74
|
$goa-color-extended-red: #ed948d;
|
|
@@ -113,20 +127,6 @@ $goa-color-interactive-error: #ec040b;
|
|
|
113
127
|
$goa-color-interactive-disabled: #80b7e1;
|
|
114
128
|
$goa-color-interactive-hover: #004f84;
|
|
115
129
|
$goa-color-interactive-default: #0070c4;
|
|
116
|
-
$goa-border-width-xl: 4px;
|
|
117
|
-
$goa-border-width-l: 3px;
|
|
118
|
-
$goa-border-width-m: 2px;
|
|
119
|
-
$goa-border-width-s: 1px;
|
|
120
|
-
$goa-border-width-xs: 0.7px;
|
|
121
|
-
$goa-border-width-2xs: 0.5px;
|
|
122
|
-
$goa-border-width-none: 0px;
|
|
123
|
-
$goa-border-radius-3xl: 0.75rem;
|
|
124
|
-
$goa-border-radius-2xl: 0.625rem;
|
|
125
|
-
$goa-border-radius-xl: 0.5rem;
|
|
126
|
-
$goa-border-radius-l: 0.375rem;
|
|
127
|
-
$goa-border-radius-m: 0.25rem;
|
|
128
|
-
$goa-border-radius-s: 0.125rem;
|
|
129
|
-
$goa-border-radius-none: 0;
|
|
130
130
|
$goa-tooltip-max-width: 400px;
|
|
131
131
|
$goa-tab-color-bg-selected: transparent;
|
|
132
132
|
$goa-side-menu-child-color-bg: none;
|
|
@@ -142,11 +142,18 @@ $goa-radio-border-radius: 50%;
|
|
|
142
142
|
$goa-radio-border-checked-error-hover: 7px solid #ba0000;
|
|
143
143
|
$goa-radio-border-checked-error-disabled: 7px solid #f58185;
|
|
144
144
|
$goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
|
|
145
|
-
$goa-popover-shadow: 0px 3px 6px
|
|
145
|
+
$goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
|
|
146
146
|
$goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
|
|
147
147
|
$goa-text-input-transition: box-shadow 0.05s ease-in;
|
|
148
148
|
$goa-text-input-color-icon: ;
|
|
149
149
|
$goa-text-input-size-icon: ;
|
|
150
|
+
$goa-app-header-nav-color-bg-link-item-in-menu: transparent;
|
|
151
|
+
$goa-app-header-nav-color-bg-link-item-focus: transparent;
|
|
152
|
+
$goa-app-header-nav-color-bg-link-item-hover: transparent;
|
|
153
|
+
$goa-app-header-nav-color-bg-link-item: transparent;
|
|
154
|
+
$goa-app-header-height-nav-item-mobile: 50px;
|
|
155
|
+
$goa-app-header-min-width-service-name: 8rem;
|
|
156
|
+
$goa-app-header-max-width-service-name: 28rem;
|
|
150
157
|
$goa-stepper-line-thickness: 4px;
|
|
151
158
|
$goa-step-size: 2.5rem;
|
|
152
159
|
$goa-step-gap-small-screen: 0px;
|
|
@@ -158,7 +165,6 @@ $goa-dropdown-transition: box-shadow 0.05s ease-in;
|
|
|
158
165
|
$goa-dropdown-item-color-text-disabled: ;
|
|
159
166
|
$goa-dropdown-item-color-bg-disabled: ;
|
|
160
167
|
$goa-drawer-transition-time: 200ms;
|
|
161
|
-
$goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
162
168
|
$goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
|
|
163
169
|
$goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
|
|
164
170
|
$goa-drawer-overlay-color: rgba(0,0,0,0.3);
|
|
@@ -185,6 +191,7 @@ $goa-button-height-compact: 2rem;
|
|
|
185
191
|
$goa-button-height: 2.625rem;
|
|
186
192
|
$goa-badge-height: 22px;
|
|
187
193
|
$goa-accordion-shadow: 0px 0px 0px 0px #000000;
|
|
194
|
+
$goa-border-none: $goa-border-width-none solid rgba(0,0,0,0);
|
|
188
195
|
$goa-typography-number-l: $goa-font-weight-medium $goa-font-size-7/$goa-line-height-4 $goa-font-family-number;
|
|
189
196
|
$goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
|
|
190
197
|
$goa-typography-number-s: $goa-font-weight-medium $goa-font-size-3/$goa-line-height-2 $goa-font-family-number;
|
|
@@ -201,7 +208,6 @@ $goa-color-text-disabled: $goa-color-greyscale-700;
|
|
|
201
208
|
$goa-color-text-light: $goa-color-greyscale-white;
|
|
202
209
|
$goa-color-text-secondary: $goa-color-greyscale-700;
|
|
203
210
|
$goa-color-text-default: $goa-color-greyscale-black;
|
|
204
|
-
$goa-border-none: $goa-border-width-none solid rgba(0,0,0,0);
|
|
205
211
|
$goa-tooltip-padding: 6px $goa-space-m 10px $goa-space-m;
|
|
206
212
|
$goa-tooltip-gap: $goa-space-2xs;
|
|
207
213
|
$goa-tooltip-color-bg: $goa-color-greyscale-700;
|
|
@@ -350,18 +356,53 @@ $goa-icon-button-default-color: $goa-color-interactive-default;
|
|
|
350
356
|
$goa-hero-banner-content-gap: $goa-space-l 0 0;
|
|
351
357
|
$goa-hero-banner-mobile-padding: $goa-space-xl 0;
|
|
352
358
|
$goa-hero-banner-padding: $goa-space-2xl 0;
|
|
359
|
+
$goa-app-header-nav-color-bg-link-item-in-menu-focus: $goa-color-greyscale-100;
|
|
360
|
+
$goa-app-header-height-nav-item: $goa-space-3xl;
|
|
361
|
+
$goa-app-header-space-btw-service-name-nav-items-mobile: $goa-space-l;
|
|
362
|
+
$goa-app-header-space-btw-logo-service-name-mobile: $goa-space-xs;
|
|
363
|
+
$goa-app-header-space-btw-logo-service-name: $goa-space-m;
|
|
364
|
+
$goa-app-header-size-logo-mobile: $goa-space-l;
|
|
365
|
+
$goa-app-header-size-logo: $goa-space-xl;
|
|
366
|
+
$goa-app-header-padding-tablet: $goa-space-xl;
|
|
367
|
+
$goa-app-header-padding-secondary-nav-item-in-menu: 9px $goa-space-m 9px $goa-space-xl;
|
|
368
|
+
$goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px $goa-space-m 9px 80px;
|
|
369
|
+
$goa-app-header-padding-nav-item-in-menu: 9px $goa-space-m;
|
|
370
|
+
$goa-app-header-padding-nav-item-with-children: $goa-space-m $goa-space-s $goa-space-s;
|
|
371
|
+
$goa-app-header-padding-nav-item: $goa-space-m $goa-space-s;
|
|
372
|
+
$goa-app-header-padding-mobile: $goa-space-m;
|
|
373
|
+
$goa-app-header-padding-menu-button: $goa-space-m $goa-space-s;
|
|
353
374
|
$goa-app-header-padding-logo-mobile: $goa-space-s $goa-space-m;
|
|
375
|
+
$goa-app-header-padding-logo: 14px $goa-space-xl $goa-space-m 0px;
|
|
376
|
+
$goa-app-header-padding-link-item: $goa-space-m;
|
|
354
377
|
$goa-app-header-padding-desktop: $goa-space-3xl;
|
|
355
|
-
$goa-app-header-color-menu-button-focus: $goa-color-interactive-hover;
|
|
356
|
-
$goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
|
|
357
|
-
$goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
|
|
358
378
|
$goa-app-header-color-text-nav-item-hover: $goa-color-interactive-hover;
|
|
379
|
+
$goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
|
|
380
|
+
$goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
|
|
381
|
+
$goa-app-header-color-menu-button-focus: $goa-color-interactive-hover;
|
|
382
|
+
$goa-app-header-color-bg-nav-item-child-focus: $goa-color-greyscale-100;
|
|
383
|
+
$goa-app-header-color-bg-nav-item-child-hover: $goa-color-interactive-hover;
|
|
384
|
+
$goa-app-header-color-bg-nav-item-in-menu-current-hover: $goa-color-interactive-hover;
|
|
385
|
+
$goa-app-header-nav-color-text-link-item-focus: $goa-color-interactive-hover;
|
|
386
|
+
$goa-app-header-nav-color-text-link-item-hover: $goa-color-interactive-hover;
|
|
387
|
+
$goa-app-header-nav-color-text-link-item: $goa-color-interactive-default;
|
|
388
|
+
$goa-app-header-color-bg-nav-item-in-menu-current: $goa-color-interactive-default;
|
|
389
|
+
$goa-app-header-color-bg-nav-item-hover: $goa-color-greyscale-white;
|
|
390
|
+
$goa-app-header-color-bg-nav-item-focus: $goa-color-greyscale-white;
|
|
391
|
+
$goa-app-header-color-bg-nav-item-current: $goa-color-greyscale-white;
|
|
392
|
+
$goa-app-header-color-bg-nav-item: $goa-color-greyscale-white;
|
|
393
|
+
$goa-app-header-color-bg-menu-button-hover: $goa-color-greyscale-100;
|
|
394
|
+
$goa-app-header-color-bg-menu-button-focus: $goa-color-greyscale-100;
|
|
359
395
|
$goa-app-header-color-bg: $goa-color-greyscale-white;
|
|
360
|
-
$goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px $goa-space-m 9px 80px;
|
|
361
|
-
$goa-app-header-padding-secondary-nav-item-in-menu: 9px $goa-space-m 9px $goa-space-xl;
|
|
362
|
-
$goa-app-header-padding-nav-item-with-children: $goa-space-m $goa-space-s $goa-space-s;
|
|
363
|
-
$goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 $goa-color-greyscale-200;
|
|
364
396
|
$goa-app-header-border-top-menu-item: inset 0 1px 0 0 $goa-color-greyscale-200;
|
|
397
|
+
$goa-app-header-border-nav-item-hover: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
398
|
+
$goa-app-header-border-nav-item-focus: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
399
|
+
$goa-app-header-border-nav-item-default: $goa-space-2xs solid transparent;
|
|
400
|
+
$goa-app-header-border-nav-item-current-hover: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
401
|
+
$goa-app-header-border-nav-item-current-focus: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
402
|
+
$goa-app-header-border-nav-item-current: $goa-space-2xs solid $goa-color-interactive-default;
|
|
403
|
+
$goa-app-header-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
|
|
404
|
+
$goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 $goa-color-greyscale-200;
|
|
405
|
+
$goa-app-header-service-name-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
|
|
365
406
|
$goa-app-header-border-bottom: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
366
407
|
$goa-stepper-color-line-active: $goa-color-interactive-default;
|
|
367
408
|
$goa-stepper-color-line: $goa-color-greyscale-200;
|
|
@@ -428,6 +469,7 @@ $goa-dropdown-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-foc
|
|
|
428
469
|
$goa-dropdown-border-error: inset 0 0 0 $goa-border-width-m $goa-color-interactive-error;
|
|
429
470
|
$goa-dropdown-border-disabled: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-200;
|
|
430
471
|
$goa-dropdown-border: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-700;
|
|
472
|
+
$goa-drawer-right-shadow: inset -4 0 12 0 $goa-border-width-s rgba(0,0,0,0.2);
|
|
431
473
|
$goa-drawer-padding: $goa-space-m;
|
|
432
474
|
$goa-divider-color: $goa-color-greyscale-200;
|
|
433
475
|
$goa-details-padding-right: $goa-space-s;
|
|
@@ -567,14 +609,14 @@ $goa-button-primary-color-bg: $goa-color-interactive-default;
|
|
|
567
609
|
$goa-button-compact-icon-size: $goa-icon-size-2;
|
|
568
610
|
$goa-button-icon-size: $goa-icon-size-3;
|
|
569
611
|
$goa-button-gap: $goa-space-xs;
|
|
570
|
-
$goa-button-text-start: $goa-font-
|
|
571
|
-
$goa-button-text-compact: $goa-font-
|
|
572
|
-
$goa-button-text: $goa-font-
|
|
612
|
+
$goa-button-text-start: $goa-font-weight-bold $goa-font-size-5/$goa-line-height-1 $goa-font-family-sans;
|
|
613
|
+
$goa-button-text-compact: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-05 $goa-font-family-sans;
|
|
614
|
+
$goa-button-text: $goa-font-weight-regular $goa-font-size-5/$goa-line-height-1 $goa-font-family-sans;
|
|
573
615
|
$goa-button-padding-lr-start: $goa-space-m;
|
|
574
616
|
$goa-button-padding-lr-compact: $goa-space-xs;
|
|
575
617
|
$goa-button-padding-lr: $goa-space-s;
|
|
576
618
|
$goa-button-border-radius: $goa-border-radius-m;
|
|
577
|
-
$goa-badge-border:
|
|
619
|
+
$goa-badge-border: inset 0 0 $goa-border-width-s 0 rgba(0, 0, 0, 0.5);
|
|
578
620
|
$goa-badge-light-color-bg: $goa-color-greyscale-white;
|
|
579
621
|
$goa-badge-midtone-color-bg: $goa-color-greyscale-700;
|
|
580
622
|
$goa-badge-dark-color-bg: $goa-color-greyscale-black;
|
|
@@ -641,8 +683,15 @@ $goa-text-input-color-text-disabled: $goa-color-text-secondary;
|
|
|
641
683
|
$goa-text-input-color-text: $goa-color-text-default;
|
|
642
684
|
$goa-hero-banner-content: $goa-typography-body-l;
|
|
643
685
|
$goa-hero-banner-heading: $goa-typography-heading-xl;
|
|
644
|
-
$goa-app-header-
|
|
686
|
+
$goa-app-header-typography-service-name-mobile: $goa-typography-body-s;
|
|
687
|
+
$goa-app-header-typography-service-name: $goa-typography-body-m;
|
|
688
|
+
$goa-app-header-typography-link-item: $goa-typography-body-m;
|
|
689
|
+
$goa-app-header-typography-menu-item: $goa-typography-body-m;
|
|
690
|
+
$goa-app-header-typography-nav-item: $goa-typography-heading-s;
|
|
691
|
+
$goa-app-header-typography-menu-button-mobile: $goa-typography-body-s;
|
|
692
|
+
$goa-app-header-typography-menu-button: $goa-typography-body-m;
|
|
645
693
|
$goa-app-header-color-text-nav-item-current: $goa-color-text-default;
|
|
694
|
+
$goa-app-header-color-service-name: $goa-color-text-default;
|
|
646
695
|
$goa-app-header-color-text-nav-item: $goa-color-text-default;
|
|
647
696
|
$goa-step-typography-sublabel: $goa-typography-body-xs;
|
|
648
697
|
$goa-step-typography-step-number: $goa-typography-heading-xs;
|