@abgov/design-tokens 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -181,5 +181,29 @@
|
|
|
181
181
|
"badge-archived-subtle-border": {
|
|
182
182
|
"value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
|
|
183
183
|
"type": "dropShadow"
|
|
184
|
+
},
|
|
185
|
+
"badge-sky-subtle-border": {
|
|
186
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.sky.border}",
|
|
187
|
+
"type": "dropShadow"
|
|
188
|
+
},
|
|
189
|
+
"badge-prairie-subtle-border": {
|
|
190
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.prairie.border}",
|
|
191
|
+
"type": "dropShadow"
|
|
192
|
+
},
|
|
193
|
+
"badge-lilac-subtle-border": {
|
|
194
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.lilac.border}",
|
|
195
|
+
"type": "dropShadow"
|
|
196
|
+
},
|
|
197
|
+
"badge-pasture-subtle-border": {
|
|
198
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.pasture.border}",
|
|
199
|
+
"type": "dropShadow"
|
|
200
|
+
},
|
|
201
|
+
"badge-sunset-subtle-border": {
|
|
202
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.sunset.border}",
|
|
203
|
+
"type": "dropShadow"
|
|
204
|
+
},
|
|
205
|
+
"badge-dawn-subtle-border": {
|
|
206
|
+
"value": "inset 0 0 0 {borderWidth.s} {color.extended.dawn.border}",
|
|
207
|
+
"type": "dropShadow"
|
|
184
208
|
}
|
|
185
|
-
}
|
|
209
|
+
}
|
|
@@ -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 Wed,
|
|
3
|
+
* Generated on Wed, 18 Feb 2026 17:08:45 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);
|
|
@@ -949,6 +972,12 @@
|
|
|
949
972
|
--goa-button-padding-compact: 0 var(--goa-space-m);
|
|
950
973
|
--goa-button-padding: 0 var(--goa-space-xl);
|
|
951
974
|
--goa-button-border-radius: var(--goa-border-radius-m);
|
|
975
|
+
--goa-badge-dawn-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-dawn-border);
|
|
976
|
+
--goa-badge-sunset-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-sunset-border);
|
|
977
|
+
--goa-badge-pasture-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-pasture-border);
|
|
978
|
+
--goa-badge-lilac-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-lilac-border);
|
|
979
|
+
--goa-badge-prairie-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-prairie-border);
|
|
980
|
+
--goa-badge-sky-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-extended-sky-border);
|
|
952
981
|
--goa-badge-archived-subtle-border: inset 0 0 0 var(--goa-border-width-s) var(--goa-color-greyscale-200);
|
|
953
982
|
--goa-badge-archived-subtle-color-bg: var(--goa-color-greyscale-white);
|
|
954
983
|
--goa-badge-archived-color-content: var(--goa-color-greyscale-800);
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on Wed,
|
|
3
|
+
// Generated on Wed, 18 Feb 2026 17:08:45 GMT
|
|
4
4
|
|
|
5
5
|
$goa-accordion-color-bg-heading: #ffffff;
|
|
6
6
|
$goa-accordion-color-bg-content: #ffffff;
|
|
@@ -73,6 +73,12 @@ $goa-badge-archived-color-content: #353535;
|
|
|
73
73
|
$goa-badge-archived-subtle-color-bg: #ffffff;
|
|
74
74
|
$goa-badge-archived-subtle-color-content: #000000;
|
|
75
75
|
$goa-badge-archived-subtle-border: inset 0 0 0 1px #cdcdcd;
|
|
76
|
+
$goa-badge-sky-subtle-border: inset 0 0 0 1px #bff0ee;
|
|
77
|
+
$goa-badge-prairie-subtle-border: inset 0 0 0 1px #ecd386;
|
|
78
|
+
$goa-badge-lilac-subtle-border: inset 0 0 0 1px #e2d2fd;
|
|
79
|
+
$goa-badge-pasture-subtle-border: inset 0 0 0 1px #dee563;
|
|
80
|
+
$goa-badge-sunset-subtle-border: inset 0 0 0 1px #f5ddad;
|
|
81
|
+
$goa-badge-dawn-subtle-border: inset 0 0 0 1px #e9b8d5;
|
|
76
82
|
$goa-button-border-radius: 0.5rem;
|
|
77
83
|
$goa-button-padding: 0 2rem;
|
|
78
84
|
$goa-button-padding-compact: 0 1rem;
|
|
@@ -1051,6 +1057,8 @@ $goa-color-extended-prairie-default: #ffda77;
|
|
|
1051
1057
|
$goa-color-extended-prairie-light: #fff2c8;
|
|
1052
1058
|
$goa-color-extended-prairie-border: #ecd386;
|
|
1053
1059
|
$goa-color-extended-prairie-text: #47372a;
|
|
1060
|
+
$goa-opacity-page-transparent: 0;
|
|
1061
|
+
$goa-opacity-page-full: 100%;
|
|
1054
1062
|
$goa-opacity-background-modal: 50%;
|
|
1055
1063
|
$goa-opacity-background-loading: 90%;
|
|
1056
1064
|
$goa-border-radius-none: 0;
|
|
@@ -1200,4 +1208,25 @@ $goa-input-border-width-hover: 1.5px;
|
|
|
1200
1208
|
$goa-input-border-width-focus: 2px;
|
|
1201
1209
|
$goa-input-border-radius-checkbox: 0.25rem;
|
|
1202
1210
|
$goa-input-border-radius-input: 0.5rem;
|
|
1203
|
-
$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);
|