@abgov/design-tokens 1.5.1 → 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.
|
@@ -34,17 +34,17 @@
|
|
|
34
34
|
"description": "52px"
|
|
35
35
|
},
|
|
36
36
|
"button-text": {
|
|
37
|
-
"value": "{fontWeight.regular} {fontSize.5}
|
|
37
|
+
"value": "{fontWeight.regular} {fontSize.5}/{lineHeight.1} {fontFamily.sans}",
|
|
38
38
|
"type": "other",
|
|
39
39
|
"description": "typography for default button size"
|
|
40
40
|
},
|
|
41
41
|
"button-text-compact": {
|
|
42
|
-
"value": "{fontWeight.regular} {fontSize.4}
|
|
42
|
+
"value": "{fontWeight.regular} {fontSize.4}/{lineHeight.05} {fontFamily.sans}",
|
|
43
43
|
"type": "other",
|
|
44
44
|
"description": "typography for compact button size"
|
|
45
45
|
},
|
|
46
46
|
"button-text-start": {
|
|
47
|
-
"value": "{fontWeight.bold} {fontSize.5}
|
|
47
|
+
"value": "{fontWeight.bold} {fontSize.5}/{lineHeight.1} {fontFamily.sans}",
|
|
48
48
|
"type": "other",
|
|
49
49
|
"description": "typography for start button size"
|
|
50
50
|
},
|
|
@@ -7,6 +7,14 @@
|
|
|
7
7
|
},
|
|
8
8
|
"type": "border"
|
|
9
9
|
},
|
|
10
|
+
"app-header-service-name-border-focus": {
|
|
11
|
+
"value": {
|
|
12
|
+
"width": "{borderWidth.l}",
|
|
13
|
+
"style": "solid",
|
|
14
|
+
"color": "{color.interactive.focus}"
|
|
15
|
+
},
|
|
16
|
+
"type": "border"
|
|
17
|
+
},
|
|
10
18
|
"app-header-border-bottom-menu-item": {
|
|
11
19
|
"value": "inset 0 -1px 0 0 {color.greyscale.200}",
|
|
12
20
|
"type": "other"
|
|
@@ -35,6 +43,14 @@
|
|
|
35
43
|
},
|
|
36
44
|
"type": "border"
|
|
37
45
|
},
|
|
46
|
+
"app-header-border-nav-item-current-hover": {
|
|
47
|
+
"value": {
|
|
48
|
+
"width": "{space.2xs}",
|
|
49
|
+
"style": "solid",
|
|
50
|
+
"color": "{color.interactive.hover}"
|
|
51
|
+
},
|
|
52
|
+
"type": "border"
|
|
53
|
+
},
|
|
38
54
|
"app-header-border-nav-item-default": {
|
|
39
55
|
"value": {
|
|
40
56
|
"width": "{space.2xs}",
|
|
@@ -95,11 +111,31 @@
|
|
|
95
111
|
"value": "{color.interactive.default}",
|
|
96
112
|
"type": "color"
|
|
97
113
|
},
|
|
114
|
+
"app-header-nav-color-text-link-item": {
|
|
115
|
+
"value": "{color.interactive.default}",
|
|
116
|
+
"type": "color"
|
|
117
|
+
},
|
|
118
|
+
"app-header-nav-color-text-link-item-hover": {
|
|
119
|
+
"value": "{color.interactive.hover}",
|
|
120
|
+
"type": "color"
|
|
121
|
+
},
|
|
122
|
+
"app-header-nav-color-text-link-item-focus": {
|
|
123
|
+
"value": "{color.interactive.hover}",
|
|
124
|
+
"type": "color"
|
|
125
|
+
},
|
|
98
126
|
"app-header-color-bg-nav-item-in-menu-current-hover": {
|
|
99
127
|
"value": "{color.interactive.hover}",
|
|
100
128
|
"type": "color"
|
|
101
129
|
},
|
|
102
|
-
"app-header-color-
|
|
130
|
+
"app-header-color-bg-nav-item-child-hover": {
|
|
131
|
+
"value": "{color.interactive.hover}",
|
|
132
|
+
"type": "color"
|
|
133
|
+
},
|
|
134
|
+
"app-header-color-bg-nav-item-child-focus": {
|
|
135
|
+
"value": "{color.greyscale.100}",
|
|
136
|
+
"type": "color"
|
|
137
|
+
},
|
|
138
|
+
"app-header-color-text-nav-item": {
|
|
103
139
|
"value": "{color.text.default}",
|
|
104
140
|
"type": "color"
|
|
105
141
|
},
|
|
@@ -219,6 +255,14 @@
|
|
|
219
255
|
"value": "{typography.heading.s}",
|
|
220
256
|
"type": "other"
|
|
221
257
|
},
|
|
258
|
+
"app-header-typography-menu-item": {
|
|
259
|
+
"value": "{typography.body.m}",
|
|
260
|
+
"type": "other"
|
|
261
|
+
},
|
|
262
|
+
"app-header-typography-link-item": {
|
|
263
|
+
"value": "{typography.body.m}",
|
|
264
|
+
"type": "other"
|
|
265
|
+
},
|
|
222
266
|
"app-header-typography-service-name": {
|
|
223
267
|
"value": "{typography.body.m}",
|
|
224
268
|
"type": "other"
|
|
@@ -226,5 +270,33 @@
|
|
|
226
270
|
"app-header-typography-service-name-mobile": {
|
|
227
271
|
"value": "{typography.body.s}",
|
|
228
272
|
"type": "other"
|
|
273
|
+
},
|
|
274
|
+
"app-header-height-nav-item": {
|
|
275
|
+
"value": "{space.3xl}",
|
|
276
|
+
"type": "dimension"
|
|
277
|
+
},
|
|
278
|
+
"app-header-height-nav-item-mobile": {
|
|
279
|
+
"value": "50px",
|
|
280
|
+
"type": "dimension"
|
|
281
|
+
},
|
|
282
|
+
"app-header-nav-color-bg-link-item": {
|
|
283
|
+
"value": "transparent",
|
|
284
|
+
"type": "color"
|
|
285
|
+
},
|
|
286
|
+
"app-header-nav-color-bg-link-item-hover": {
|
|
287
|
+
"value": "transparent",
|
|
288
|
+
"type": "color"
|
|
289
|
+
},
|
|
290
|
+
"app-header-nav-color-bg-link-item-focus": {
|
|
291
|
+
"value": "transparent",
|
|
292
|
+
"type": "color"
|
|
293
|
+
},
|
|
294
|
+
"app-header-nav-color-bg-link-item-in-menu": {
|
|
295
|
+
"value": "transparent",
|
|
296
|
+
"type": "color"
|
|
297
|
+
},
|
|
298
|
+
"app-header-nav-color-bg-link-item-in-menu-focus": {
|
|
299
|
+
"value": "{color.greyscale.100}",
|
|
300
|
+
"type": "color"
|
|
229
301
|
}
|
|
230
302
|
}
|
package/dist/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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 {
|
|
@@ -149,6 +149,11 @@
|
|
|
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;
|
|
152
157
|
--goa-app-header-min-width-service-name: 8rem;
|
|
153
158
|
--goa-app-header-max-width-service-name: 28rem;
|
|
154
159
|
--goa-stepper-line-thickness: 4px;
|
|
@@ -353,6 +358,8 @@
|
|
|
353
358
|
--goa-hero-banner-content-gap: var(--goa-space-l) 0 0;
|
|
354
359
|
--goa-hero-banner-mobile-padding: var(--goa-space-xl) 0;
|
|
355
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);
|
|
356
363
|
--goa-app-header-space-btw-service-name-nav-items-mobile: var(--goa-space-l);
|
|
357
364
|
--goa-app-header-space-btw-logo-service-name-mobile: var(--goa-space-xs);
|
|
358
365
|
--goa-app-header-space-btw-logo-service-name: var(--goa-space-m);
|
|
@@ -374,7 +381,12 @@
|
|
|
374
381
|
--goa-app-header-color-text-nav-item-focus: var(--goa-color-interactive-hover);
|
|
375
382
|
--goa-app-header-color-menu-button-hover: var(--goa-color-interactive-hover);
|
|
376
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);
|
|
377
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);
|
|
378
390
|
--goa-app-header-color-bg-nav-item-in-menu-current: var(--goa-color-interactive-default);
|
|
379
391
|
--goa-app-header-color-bg-nav-item-hover: var(--goa-color-greyscale-white);
|
|
380
392
|
--goa-app-header-color-bg-nav-item-focus: var(--goa-color-greyscale-white);
|
|
@@ -387,10 +399,12 @@
|
|
|
387
399
|
--goa-app-header-border-nav-item-hover: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
388
400
|
--goa-app-header-border-nav-item-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
389
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);
|
|
390
403
|
--goa-app-header-border-nav-item-current-focus: var(--goa-space-2xs) solid var(--goa-color-interactive-hover);
|
|
391
404
|
--goa-app-header-border-nav-item-current: var(--goa-space-2xs) solid var(--goa-color-interactive-default);
|
|
392
405
|
--goa-app-header-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
|
|
393
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);
|
|
394
408
|
--goa-app-header-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
|
|
395
409
|
--goa-stepper-color-line-active: var(--goa-color-interactive-default);
|
|
396
410
|
--goa-stepper-color-line: var(--goa-color-greyscale-200);
|
|
@@ -597,14 +611,14 @@
|
|
|
597
611
|
--goa-button-compact-icon-size: var(--goa-icon-size-2);
|
|
598
612
|
--goa-button-icon-size: var(--goa-icon-size-3);
|
|
599
613
|
--goa-button-gap: var(--goa-space-xs);
|
|
600
|
-
--goa-button-text-start: var(--goa-font-weight-bold) var(--goa-font-size-5)
|
|
601
|
-
--goa-button-text-compact: var(--goa-font-weight-regular) var(--goa-font-size-4)
|
|
602
|
-
--goa-button-text: var(--goa-font-weight-regular) var(--goa-font-size-5)
|
|
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);
|
|
603
617
|
--goa-button-padding-lr-start: var(--goa-space-m);
|
|
604
618
|
--goa-button-padding-lr-compact: var(--goa-space-xs);
|
|
605
619
|
--goa-button-padding-lr: var(--goa-space-s);
|
|
606
620
|
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
607
|
-
--goa-badge-border: inset 0 0
|
|
621
|
+
--goa-badge-border: inset 0 0 var(--goa-border-width-s) 0 rgba(0, 0, 0, 0.5);
|
|
608
622
|
--goa-badge-light-color-bg: var(--goa-color-greyscale-white);
|
|
609
623
|
--goa-badge-midtone-color-bg: var(--goa-color-greyscale-700);
|
|
610
624
|
--goa-badge-dark-color-bg: var(--goa-color-greyscale-black);
|
|
@@ -673,13 +687,14 @@
|
|
|
673
687
|
--goa-hero-banner-heading: var(--goa-typography-heading-xl);
|
|
674
688
|
--goa-app-header-typography-service-name-mobile: var(--goa-typography-body-s);
|
|
675
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);
|
|
676
692
|
--goa-app-header-typography-nav-item: var(--goa-typography-heading-s);
|
|
677
693
|
--goa-app-header-typography-menu-button-mobile: var(--goa-typography-body-s);
|
|
678
694
|
--goa-app-header-typography-menu-button: var(--goa-typography-body-m);
|
|
679
695
|
--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
696
|
--goa-app-header-color-service-name: var(--goa-color-text-default);
|
|
682
|
-
--goa-app-header-color-
|
|
697
|
+
--goa-app-header-color-text-nav-item: var(--goa-color-text-default);
|
|
683
698
|
--goa-step-typography-sublabel: var(--goa-typography-body-xs);
|
|
684
699
|
--goa-step-typography-step-number: var(--goa-typography-heading-xs);
|
|
685
700
|
--goa-step-typography-label-active: var(--goa-typography-heading-xs);
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
$goa-font-weight-bold: 700;
|
|
6
6
|
$goa-font-weight-medium: 500;
|
|
@@ -147,6 +147,11 @@ $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;
|
|
150
155
|
$goa-app-header-min-width-service-name: 8rem;
|
|
151
156
|
$goa-app-header-max-width-service-name: 28rem;
|
|
152
157
|
$goa-stepper-line-thickness: 4px;
|
|
@@ -351,6 +356,8 @@ $goa-icon-button-default-color: $goa-color-interactive-default;
|
|
|
351
356
|
$goa-hero-banner-content-gap: $goa-space-l 0 0;
|
|
352
357
|
$goa-hero-banner-mobile-padding: $goa-space-xl 0;
|
|
353
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;
|
|
354
361
|
$goa-app-header-space-btw-service-name-nav-items-mobile: $goa-space-l;
|
|
355
362
|
$goa-app-header-space-btw-logo-service-name-mobile: $goa-space-xs;
|
|
356
363
|
$goa-app-header-space-btw-logo-service-name: $goa-space-m;
|
|
@@ -372,7 +379,12 @@ $goa-app-header-color-text-nav-item-hover: $goa-color-interactive-hover;
|
|
|
372
379
|
$goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
|
|
373
380
|
$goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
|
|
374
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;
|
|
375
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;
|
|
376
388
|
$goa-app-header-color-bg-nav-item-in-menu-current: $goa-color-interactive-default;
|
|
377
389
|
$goa-app-header-color-bg-nav-item-hover: $goa-color-greyscale-white;
|
|
378
390
|
$goa-app-header-color-bg-nav-item-focus: $goa-color-greyscale-white;
|
|
@@ -385,10 +397,12 @@ $goa-app-header-border-top-menu-item: inset 0 1px 0 0 $goa-color-greyscale-200;
|
|
|
385
397
|
$goa-app-header-border-nav-item-hover: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
386
398
|
$goa-app-header-border-nav-item-focus: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
387
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;
|
|
388
401
|
$goa-app-header-border-nav-item-current-focus: $goa-space-2xs solid $goa-color-interactive-hover;
|
|
389
402
|
$goa-app-header-border-nav-item-current: $goa-space-2xs solid $goa-color-interactive-default;
|
|
390
403
|
$goa-app-header-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
|
|
391
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;
|
|
392
406
|
$goa-app-header-border-bottom: $goa-border-width-s solid $goa-color-greyscale-200;
|
|
393
407
|
$goa-stepper-color-line-active: $goa-color-interactive-default;
|
|
394
408
|
$goa-stepper-color-line: $goa-color-greyscale-200;
|
|
@@ -595,14 +609,14 @@ $goa-button-primary-color-bg: $goa-color-interactive-default;
|
|
|
595
609
|
$goa-button-compact-icon-size: $goa-icon-size-2;
|
|
596
610
|
$goa-button-icon-size: $goa-icon-size-3;
|
|
597
611
|
$goa-button-gap: $goa-space-xs;
|
|
598
|
-
$goa-button-text-start: $goa-font-weight-bold $goa-font-size-5
|
|
599
|
-
$goa-button-text-compact: $goa-font-weight-regular $goa-font-size-4
|
|
600
|
-
$goa-button-text: $goa-font-weight-regular $goa-font-size-5
|
|
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;
|
|
601
615
|
$goa-button-padding-lr-start: $goa-space-m;
|
|
602
616
|
$goa-button-padding-lr-compact: $goa-space-xs;
|
|
603
617
|
$goa-button-padding-lr: $goa-space-s;
|
|
604
618
|
$goa-button-border-radius: $goa-border-radius-m;
|
|
605
|
-
$goa-badge-border: inset 0 0
|
|
619
|
+
$goa-badge-border: inset 0 0 $goa-border-width-s 0 rgba(0, 0, 0, 0.5);
|
|
606
620
|
$goa-badge-light-color-bg: $goa-color-greyscale-white;
|
|
607
621
|
$goa-badge-midtone-color-bg: $goa-color-greyscale-700;
|
|
608
622
|
$goa-badge-dark-color-bg: $goa-color-greyscale-black;
|
|
@@ -671,13 +685,14 @@ $goa-hero-banner-content: $goa-typography-body-l;
|
|
|
671
685
|
$goa-hero-banner-heading: $goa-typography-heading-xl;
|
|
672
686
|
$goa-app-header-typography-service-name-mobile: $goa-typography-body-s;
|
|
673
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;
|
|
674
690
|
$goa-app-header-typography-nav-item: $goa-typography-heading-s;
|
|
675
691
|
$goa-app-header-typography-menu-button-mobile: $goa-typography-body-s;
|
|
676
692
|
$goa-app-header-typography-menu-button: $goa-typography-body-m;
|
|
677
693
|
$goa-app-header-color-text-nav-item-current: $goa-color-text-default;
|
|
678
|
-
$goa-app-header-color-text-nav-item: $goa-color-text-default;
|
|
679
694
|
$goa-app-header-color-service-name: $goa-color-text-default;
|
|
680
|
-
$goa-app-header-color-
|
|
695
|
+
$goa-app-header-color-text-nav-item: $goa-color-text-default;
|
|
681
696
|
$goa-step-typography-sublabel: $goa-typography-body-xs;
|
|
682
697
|
$goa-step-typography-step-number: $goa-typography-heading-xs;
|
|
683
698
|
$goa-step-typography-label-active: $goa-typography-heading-xs;
|