@abgov/design-tokens 2.0.1 → 2.1.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.
|
@@ -100,25 +100,25 @@
|
|
|
100
100
|
"value": "13rem",
|
|
101
101
|
"type": "dimension"
|
|
102
102
|
},
|
|
103
|
-
"app-header-
|
|
103
|
+
"app-header-secondary-text-color": {
|
|
104
104
|
"value": "{color.text.secondary}",
|
|
105
105
|
"type": "color",
|
|
106
|
-
"description": "
|
|
106
|
+
"description": "Secondary text color"
|
|
107
107
|
},
|
|
108
|
-
"app-header-
|
|
108
|
+
"app-header-secondary-text-typography-desktop": {
|
|
109
109
|
"value": "{typography.body.s}",
|
|
110
110
|
"type": "other",
|
|
111
|
-
"description": "
|
|
111
|
+
"description": "Secondary text typography on desktop"
|
|
112
112
|
},
|
|
113
|
-
"app-header-
|
|
113
|
+
"app-header-secondary-text-typography-mobile": {
|
|
114
114
|
"value": "{typography.body.xs}",
|
|
115
115
|
"type": "other",
|
|
116
|
-
"description": "
|
|
116
|
+
"description": "Secondary text typography on mobile"
|
|
117
117
|
},
|
|
118
|
-
"app-header-service-name-
|
|
118
|
+
"app-header-service-name-secondary-text-gap": {
|
|
119
119
|
"value": "{space.3xs}",
|
|
120
120
|
"type": "spacing",
|
|
121
|
-
"description": "Vertical gap between service name and
|
|
121
|
+
"description": "Vertical gap between service name and secondary text"
|
|
122
122
|
},
|
|
123
123
|
"app-header-service-phase-gap-horizontal": {
|
|
124
124
|
"value": "{space.m}",
|
|
@@ -408,6 +408,18 @@
|
|
|
408
408
|
}
|
|
409
409
|
},
|
|
410
410
|
"opacity": {
|
|
411
|
+
"page": {
|
|
412
|
+
"transparent": {
|
|
413
|
+
"value": "0",
|
|
414
|
+
"type": "opacity",
|
|
415
|
+
"description": "0% for initial state of page/content load in or final state of page/content load out"
|
|
416
|
+
},
|
|
417
|
+
"full": {
|
|
418
|
+
"value": "100%",
|
|
419
|
+
"type": "opacity",
|
|
420
|
+
"description": "100% for initial state of page/content load out or final state of page/content load in"
|
|
421
|
+
}
|
|
422
|
+
},
|
|
411
423
|
"background": {
|
|
412
424
|
"modal": {
|
|
413
425
|
"value": "50%",
|
|
@@ -1336,5 +1348,97 @@
|
|
|
1336
1348
|
"style": "solid"
|
|
1337
1349
|
},
|
|
1338
1350
|
"type": "border"
|
|
1351
|
+
},
|
|
1352
|
+
"translate": {
|
|
1353
|
+
"default": {
|
|
1354
|
+
"value": "translateY(0)",
|
|
1355
|
+
"type": "translate"
|
|
1356
|
+
},
|
|
1357
|
+
"moveIn": {
|
|
1358
|
+
"value": "translateY(12px)",
|
|
1359
|
+
"type": "translate"
|
|
1360
|
+
},
|
|
1361
|
+
"moveOut": {
|
|
1362
|
+
"value": "translateY(-12px)",
|
|
1363
|
+
"type": "translate"
|
|
1364
|
+
}
|
|
1365
|
+
},
|
|
1366
|
+
"motionCurve": {
|
|
1367
|
+
"expressive": {
|
|
1368
|
+
"value": "cubic-bezier(0, 0, 0.58, 1)",
|
|
1369
|
+
"type": "motionCurve"
|
|
1370
|
+
},
|
|
1371
|
+
"productive": {
|
|
1372
|
+
"value": "cubic-bezier(0, 0, 1, 1)",
|
|
1373
|
+
"type": "motionCurve"
|
|
1374
|
+
},
|
|
1375
|
+
"expressive-exit": {
|
|
1376
|
+
"value": "cubic-bezier(0.42, 0, 1, 1)",
|
|
1377
|
+
"type": "motionCurve"
|
|
1378
|
+
},
|
|
1379
|
+
"expressive-reveal": {
|
|
1380
|
+
"value": "cubic-bezier(0.7, 0, 0.25, 1)",
|
|
1381
|
+
"type": "motionCurve"
|
|
1382
|
+
},
|
|
1383
|
+
"expressive-transform": {
|
|
1384
|
+
"value": "cubic-bezier(0.42, 0, 0.58, 1)",
|
|
1385
|
+
"type": "motionCurve"
|
|
1386
|
+
}
|
|
1387
|
+
},
|
|
1388
|
+
"motionDuration": {
|
|
1389
|
+
"short-1": {
|
|
1390
|
+
"value": "15ms",
|
|
1391
|
+
"type": "motionDuration"
|
|
1392
|
+
},
|
|
1393
|
+
"short-2": {
|
|
1394
|
+
"value": "70ms",
|
|
1395
|
+
"type": "motionDuration"
|
|
1396
|
+
},
|
|
1397
|
+
"short-3": {
|
|
1398
|
+
"value": "100ms",
|
|
1399
|
+
"type": "motionDuration"
|
|
1400
|
+
},
|
|
1401
|
+
"short-4": {
|
|
1402
|
+
"value": "180ms",
|
|
1403
|
+
"type": "motionDuration"
|
|
1404
|
+
},
|
|
1405
|
+
"medium-1": {
|
|
1406
|
+
"value": "250ms",
|
|
1407
|
+
"type": "motionDuration"
|
|
1408
|
+
},
|
|
1409
|
+
"medium-2": {
|
|
1410
|
+
"value": "300ms",
|
|
1411
|
+
"type": "motionDuration"
|
|
1412
|
+
},
|
|
1413
|
+
"medium-3": {
|
|
1414
|
+
"value": "350ms",
|
|
1415
|
+
"type": "motionDuration"
|
|
1416
|
+
},
|
|
1417
|
+
"long-1": {
|
|
1418
|
+
"value": "400ms",
|
|
1419
|
+
"type": "motionDuration"
|
|
1420
|
+
},
|
|
1421
|
+
"long-2": {
|
|
1422
|
+
"value": "500ms",
|
|
1423
|
+
"type": "motionDuration"
|
|
1424
|
+
},
|
|
1425
|
+
"long-3": {
|
|
1426
|
+
"value": "1000ms",
|
|
1427
|
+
"type": "motionDuration"
|
|
1428
|
+
},
|
|
1429
|
+
"long-4": {
|
|
1430
|
+
"value": "20000ms",
|
|
1431
|
+
"type": "motionDuration"
|
|
1432
|
+
}
|
|
1433
|
+
},
|
|
1434
|
+
"transition": {
|
|
1435
|
+
"contentMoveFade": {
|
|
1436
|
+
"value": "opacity {motionDuration.short-2} {motionCurve.expressive}, transform {motionDuration.short-2} {motionCurve.expressive}",
|
|
1437
|
+
"type": "transition"
|
|
1438
|
+
},
|
|
1439
|
+
"pageFade": {
|
|
1440
|
+
"value": "opacity {motionDuration.short-1} {motionCurve.expressive}",
|
|
1441
|
+
"type": "transition"
|
|
1442
|
+
}
|
|
1339
1443
|
}
|
|
1340
1444
|
}
|
package/dist/tokens.css
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 20 Feb 2026 20:43:39 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
+
--goa-motion-duration-long-4: 20000ms;
|
|
8
|
+
--goa-motion-duration-long-3: 1000ms;
|
|
9
|
+
--goa-motion-duration-long-2: 500ms;
|
|
10
|
+
--goa-motion-duration-long-1: 400ms;
|
|
11
|
+
--goa-motion-duration-medium-3: 350ms;
|
|
12
|
+
--goa-motion-duration-medium-2: 300ms;
|
|
13
|
+
--goa-motion-duration-medium-1: 250ms;
|
|
14
|
+
--goa-motion-duration-short-4: 180ms;
|
|
15
|
+
--goa-motion-duration-short-3: 100ms;
|
|
16
|
+
--goa-motion-duration-short-2: 70ms;
|
|
17
|
+
--goa-motion-duration-short-1: 15ms;
|
|
18
|
+
--goa-motion-curve-expressive-transform: cubic-bezier(0.42, 0, 0.58, 1);
|
|
19
|
+
--goa-motion-curve-expressive-reveal: cubic-bezier(0.7, 0, 0.25, 1);
|
|
20
|
+
--goa-motion-curve-expressive-exit: cubic-bezier(0.42, 0, 1, 1);
|
|
21
|
+
--goa-motion-curve-productive: cubic-bezier(0, 0, 1, 1);
|
|
22
|
+
--goa-motion-curve-expressive: cubic-bezier(0, 0, 0.58, 1);
|
|
23
|
+
--goa-translate-move-out: translateY(-12px);
|
|
24
|
+
--goa-translate-move-in: translateY(12px);
|
|
25
|
+
--goa-translate-default: translateY(0);
|
|
7
26
|
--goa-input-color-background-error-hover: #f4c8c5;
|
|
8
27
|
--goa-input-color-border-readonly: #e1dedd;
|
|
9
28
|
--goa-letter-spacing-mobile-2xl: -1.5;
|
|
@@ -102,6 +121,8 @@
|
|
|
102
121
|
--goa-border-radius-none: 0;
|
|
103
122
|
--goa-opacity-background-loading: 90%;
|
|
104
123
|
--goa-opacity-background-modal: 50%;
|
|
124
|
+
--goa-opacity-page-full: 100%;
|
|
125
|
+
--goa-opacity-page-transparent: 0;
|
|
105
126
|
--goa-color-extended-prairie-text: #47372a;
|
|
106
127
|
--goa-color-extended-prairie-border: #ecd386;
|
|
107
128
|
--goa-color-extended-prairie-light: #fff2c8;
|
|
@@ -299,6 +320,8 @@
|
|
|
299
320
|
--goa-accordion-heading-m-min-height: 4rem;
|
|
300
321
|
--goa-accordion-heading-min-height: 3rem;
|
|
301
322
|
--goa-accordion-shadow: 0px 0px 0px 0px #000000;
|
|
323
|
+
--goa-transition-page-fade: opacity var(--goa-motion-duration-short-1) var(--goa-motion-curve-expressive);
|
|
324
|
+
--goa-transition-content-move-fade: opacity var(--goa-motion-duration-short-2) var(--goa-motion-curve-expressive), transform var(--goa-motion-duration-short-2) var(--goa-motion-curve-expressive);
|
|
302
325
|
--goa-border-none: var(--goa-border-width-none) solid rgba(0,0,0,0);
|
|
303
326
|
--goa-input-border-radius-input: var(--goa-border-radius-m);
|
|
304
327
|
--goa-input-border-radius-checkbox: var(--goa-border-radius-xs);
|
|
@@ -674,7 +697,7 @@
|
|
|
674
697
|
--goa-app-header-utilities-gap: var(--goa-space-s);
|
|
675
698
|
--goa-app-header-service-phase-row-gap: var(--goa-space-xs);
|
|
676
699
|
--goa-app-header-service-phase-gap-horizontal: var(--goa-space-m);
|
|
677
|
-
--goa-app-header-service-name-
|
|
700
|
+
--goa-app-header-service-name-secondary-text-gap: var(--goa-space-3xs);
|
|
678
701
|
--goa-app-header-service-name-border-focus: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
|
|
679
702
|
--goa-app-header-typography-service-name-mobile: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-1) var(--goa-font-family-sans);
|
|
680
703
|
--goa-app-header-logo-service-gap-small-screen: var(--goa-space-l);
|
|
@@ -1096,9 +1119,9 @@
|
|
|
1096
1119
|
--goa-app-header-nav-text-color: var(--goa-color-text-secondary);
|
|
1097
1120
|
--goa-app-header-color-text-nav-item-current: var(--goa-color-text-secondary);
|
|
1098
1121
|
--goa-app-header-color-text-nav-item: var(--goa-color-text-secondary);
|
|
1099
|
-
--goa-app-header-
|
|
1100
|
-
--goa-app-header-
|
|
1101
|
-
--goa-app-header-
|
|
1122
|
+
--goa-app-header-secondary-text-typography-mobile: var(--goa-typography-body-xs);
|
|
1123
|
+
--goa-app-header-secondary-text-typography-desktop: var(--goa-typography-body-s);
|
|
1124
|
+
--goa-app-header-secondary-text-color: var(--goa-color-text-secondary);
|
|
1102
1125
|
--goa-app-header-typography-service-name: var(--goa-typography-heading-xs);
|
|
1103
1126
|
--goa-app-header-color-service-name: var(--goa-color-text-default);
|
|
1104
1127
|
--goa-step-typography-sublabel: var(--goa-typography-body-xs);
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Fri, 20 Feb 2026 20:43:39 GMT
|
|
4
4
|
|
|
5
5
|
$goa-accordion-color-bg-heading: #ffffff;
|
|
6
6
|
$goa-accordion-color-bg-content: #ffffff;
|
|
@@ -496,10 +496,10 @@ $goa-app-header-typography-service-name-mobile: 600 1rem/1.25rem acumin-variable
|
|
|
496
496
|
$goa-app-header-service-name-border-focus: 2px solid #006dcc;
|
|
497
497
|
$goa-app-header-max-width-service-name: 40rem;
|
|
498
498
|
$goa-app-header-min-width-service-name: 13rem;
|
|
499
|
-
$goa-app-header-
|
|
500
|
-
$goa-app-header-
|
|
501
|
-
$goa-app-header-
|
|
502
|
-
$goa-app-header-service-name-
|
|
499
|
+
$goa-app-header-secondary-text-color: #353535;
|
|
500
|
+
$goa-app-header-secondary-text-typography-desktop: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
|
|
501
|
+
$goa-app-header-secondary-text-typography-mobile: 400 0.875rem/1.25rem acumin-variable, helvetica-neue, arial, sans-serif;
|
|
502
|
+
$goa-app-header-service-name-secondary-text-gap: 0.125rem;
|
|
503
503
|
$goa-app-header-service-phase-gap-horizontal: 1rem;
|
|
504
504
|
$goa-app-header-service-phase-gap-vertical: 6px;
|
|
505
505
|
$goa-app-header-service-phase-row-gap: 0.5rem;
|
|
@@ -1057,6 +1057,8 @@ $goa-color-extended-prairie-default: #ffda77;
|
|
|
1057
1057
|
$goa-color-extended-prairie-light: #fff2c8;
|
|
1058
1058
|
$goa-color-extended-prairie-border: #ecd386;
|
|
1059
1059
|
$goa-color-extended-prairie-text: #47372a;
|
|
1060
|
+
$goa-opacity-page-transparent: 0;
|
|
1061
|
+
$goa-opacity-page-full: 100%;
|
|
1060
1062
|
$goa-opacity-background-modal: 50%;
|
|
1061
1063
|
$goa-opacity-background-loading: 90%;
|
|
1062
1064
|
$goa-border-radius-none: 0;
|
|
@@ -1206,4 +1208,25 @@ $goa-input-border-width-hover: 1.5px;
|
|
|
1206
1208
|
$goa-input-border-width-focus: 2px;
|
|
1207
1209
|
$goa-input-border-radius-checkbox: 0.25rem;
|
|
1208
1210
|
$goa-input-border-radius-input: 0.5rem;
|
|
1209
|
-
$goa-border-none: 0px solid rgba(0,0,0,0);
|
|
1211
|
+
$goa-border-none: 0px solid rgba(0,0,0,0);
|
|
1212
|
+
$goa-translate-default: translateY(0);
|
|
1213
|
+
$goa-translate-move-in: translateY(12px);
|
|
1214
|
+
$goa-translate-move-out: translateY(-12px);
|
|
1215
|
+
$goa-motion-curve-expressive: cubic-bezier(0, 0, 0.58, 1);
|
|
1216
|
+
$goa-motion-curve-productive: cubic-bezier(0, 0, 1, 1);
|
|
1217
|
+
$goa-motion-curve-expressive-exit: cubic-bezier(0.42, 0, 1, 1);
|
|
1218
|
+
$goa-motion-curve-expressive-reveal: cubic-bezier(0.7, 0, 0.25, 1);
|
|
1219
|
+
$goa-motion-curve-expressive-transform: cubic-bezier(0.42, 0, 0.58, 1);
|
|
1220
|
+
$goa-motion-duration-short-1: 15ms;
|
|
1221
|
+
$goa-motion-duration-short-2: 70ms;
|
|
1222
|
+
$goa-motion-duration-short-3: 100ms;
|
|
1223
|
+
$goa-motion-duration-short-4: 180ms;
|
|
1224
|
+
$goa-motion-duration-medium-1: 250ms;
|
|
1225
|
+
$goa-motion-duration-medium-2: 300ms;
|
|
1226
|
+
$goa-motion-duration-medium-3: 350ms;
|
|
1227
|
+
$goa-motion-duration-long-1: 400ms;
|
|
1228
|
+
$goa-motion-duration-long-2: 500ms;
|
|
1229
|
+
$goa-motion-duration-long-3: 1000ms;
|
|
1230
|
+
$goa-motion-duration-long-4: 20000ms;
|
|
1231
|
+
$goa-transition-content-move-fade: opacity 70ms cubic-bezier(0, 0, 0.58, 1), transform 70ms cubic-bezier(0, 0, 0.58, 1);
|
|
1232
|
+
$goa-transition-page-fade: opacity 15ms cubic-bezier(0, 0, 0.58, 1);
|