@abgov/design-tokens 1.3.0 → 1.4.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.
@@ -0,0 +1,756 @@
1
+ {
2
+ "color": {
3
+ "interactive": {
4
+ "default": {
5
+ "value": "#0070c4",
6
+ "type": "color"
7
+ },
8
+ "hover": {
9
+ "value": "#004f84",
10
+ "type": "color"
11
+ },
12
+ "disabled": {
13
+ "value": "#80b7e1",
14
+ "type": "color"
15
+ },
16
+ "error": {
17
+ "value": "#ec040b",
18
+ "type": "color"
19
+ },
20
+ "error-hover": {
21
+ "value": "#ba0000",
22
+ "type": "color"
23
+ },
24
+ "error-disabled": {
25
+ "value": "#f58185",
26
+ "type": "color"
27
+ },
28
+ "focus": {
29
+ "value": "#feba35",
30
+ "type": "color"
31
+ },
32
+ "focus-black": {
33
+ "value": "#000000",
34
+ "type": "color"
35
+ },
36
+ "visited": {
37
+ "value": "#756693",
38
+ "type": "color"
39
+ }
40
+ },
41
+ "brand": {
42
+ "default": {
43
+ "value": "#0081a2",
44
+ "type": "color"
45
+ },
46
+ "dark": {
47
+ "value": "#005072",
48
+ "type": "color"
49
+ },
50
+ "light": {
51
+ "value": "#c8eefa",
52
+ "type": "color"
53
+ }
54
+ },
55
+ "text": {
56
+ "default": {
57
+ "value": "{color.greyscale.black}",
58
+ "type": "color"
59
+ },
60
+ "secondary": {
61
+ "value": "{color.greyscale.700}",
62
+ "type": "color"
63
+ },
64
+ "light": {
65
+ "value": "{color.greyscale.white}",
66
+ "type": "color"
67
+ },
68
+ "disabled": {
69
+ "value": "{color.greyscale.700}",
70
+ "type": "color"
71
+ }
72
+ },
73
+ "info": {
74
+ "default": {
75
+ "value": "#004a8f",
76
+ "type": "color"
77
+ },
78
+ "light": {
79
+ "value": "#aac9e7",
80
+ "type": "color"
81
+ },
82
+ "dark": {
83
+ "value": "#003b70",
84
+ "type": "color"
85
+ },
86
+ "background": {
87
+ "value": "#eff8ff",
88
+ "type": "color"
89
+ }
90
+ },
91
+ "warning": {
92
+ "default": {
93
+ "value": "#f9ce2d",
94
+ "type": "color"
95
+ },
96
+ "light": {
97
+ "value": "#ffeab6",
98
+ "type": "color"
99
+ },
100
+ "dark": {
101
+ "value": "#bf8d23",
102
+ "type": "color"
103
+ },
104
+ "background": {
105
+ "value": "#fff6e5",
106
+ "type": "color"
107
+ }
108
+ },
109
+ "emergency": {
110
+ "default": {
111
+ "value": "#da291c",
112
+ "type": "color"
113
+ },
114
+ "light": {
115
+ "value": "#fbd1ce",
116
+ "type": "color"
117
+ },
118
+ "dark": {
119
+ "value": "#a91a10",
120
+ "type": "color"
121
+ },
122
+ "background": {
123
+ "value": "#fff1f2",
124
+ "type": "color"
125
+ }
126
+ },
127
+ "success": {
128
+ "default": {
129
+ "value": "#006f4c",
130
+ "type": "color"
131
+ },
132
+ "light": {
133
+ "value": "#cce4dc",
134
+ "type": "color"
135
+ },
136
+ "dark": {
137
+ "value": "#00563a",
138
+ "type": "color"
139
+ },
140
+ "background": {
141
+ "value": "#eef9f3",
142
+ "type": "color"
143
+ }
144
+ },
145
+ "critical": {
146
+ "default": {
147
+ "value": "#171d23",
148
+ "type": "color"
149
+ }
150
+ },
151
+ "greyscale": {
152
+ "50": {
153
+ "value": "#f8f8f8",
154
+ "type": "color"
155
+ },
156
+ "100": {
157
+ "value": "#f1f1f1",
158
+ "type": "color"
159
+ },
160
+ "150": {
161
+ "value": "#e7e7e7",
162
+ "type": "color"
163
+ },
164
+ "200": {
165
+ "value": "#dcdcdc",
166
+ "type": "color"
167
+ },
168
+ "300": {
169
+ "value": "#c2c2c2",
170
+ "type": "color"
171
+ },
172
+ "400": {
173
+ "value": "#adadad",
174
+ "type": "color"
175
+ },
176
+ "500": {
177
+ "value": "#949494",
178
+ "type": "color"
179
+ },
180
+ "600": {
181
+ "value": "#858585",
182
+ "type": "color"
183
+ },
184
+ "700": {
185
+ "value": "#666666",
186
+ "type": "color"
187
+ },
188
+ "800": {
189
+ "value": "#5c5c5c",
190
+ "type": "color"
191
+ },
192
+ "900": {
193
+ "value": "#474747",
194
+ "type": "color"
195
+ },
196
+ "black": {
197
+ "value": "#333333",
198
+ "type": "color"
199
+ },
200
+ "white": {
201
+ "value": "#ffffff",
202
+ "type": "color"
203
+ }
204
+ },
205
+ "extended": {
206
+ "light": {
207
+ "aqua": {
208
+ "value": "#dcfbf8",
209
+ "type": "color"
210
+ },
211
+ "blue": {
212
+ "value": "#ddefff",
213
+ "type": "color"
214
+ },
215
+ "green": {
216
+ "value": "#cce2d9",
217
+ "type": "color"
218
+ },
219
+ "orange": {
220
+ "value": "#fcd6c3",
221
+ "type": "color"
222
+ },
223
+ "pink": {
224
+ "value": "#f9e1eb",
225
+ "type": "color"
226
+ },
227
+ "red": {
228
+ "value": "#f4cdc6",
229
+ "type": "color"
230
+ },
231
+ "violet": {
232
+ "value": "#efe2fb",
233
+ "type": "color"
234
+ },
235
+ "yellow": {
236
+ "value": "#fff7bf",
237
+ "type": "color"
238
+ }
239
+ },
240
+ "aqua": {
241
+ "value": "#7febe6",
242
+ "type": "color"
243
+ },
244
+ "blue": {
245
+ "value": "#aac9e7",
246
+ "type": "color"
247
+ },
248
+ "green": {
249
+ "value": "#bbfcb4",
250
+ "type": "color"
251
+ },
252
+ "orange": {
253
+ "value": "#ffc76d",
254
+ "type": "color"
255
+ },
256
+ "pink": {
257
+ "value": "#ff8fc5",
258
+ "type": "color"
259
+ },
260
+ "red": {
261
+ "value": "#ed948d",
262
+ "type": "color"
263
+ },
264
+ "violet": {
265
+ "value": "#d4c2ff",
266
+ "type": "color"
267
+ },
268
+ "yellow": {
269
+ "value": "#fce796",
270
+ "type": "color"
271
+ }
272
+ }
273
+ },
274
+ "opacity": {
275
+ "background": {
276
+ "modal": {
277
+ "value": "50%",
278
+ "type": "opacity",
279
+ "description": "50% opacity for black scrim behind modal to disable the rest of the screen"
280
+ },
281
+ "loading": {
282
+ "value": "90%",
283
+ "type": "opacity",
284
+ "description": "90% opacity for white scrum behind loading indicator"
285
+ }
286
+ }
287
+ },
288
+ "borderRadius": {
289
+ "none": {
290
+ "value": "0",
291
+ "type": "borderRadius"
292
+ },
293
+ "m": {
294
+ "value": "0.25rem",
295
+ "type": "borderRadius"
296
+ },
297
+ "l": {
298
+ "value": "0.375rem",
299
+ "type": "borderRadius"
300
+ },
301
+ "xl": {
302
+ "value": "0.5rem",
303
+ "type": "borderRadius"
304
+ },
305
+ "2xl": {
306
+ "value": "0.625rem",
307
+ "type": "borderRadius"
308
+ },
309
+ "3xl": {
310
+ "value": "0.75rem",
311
+ "type": "borderRadius"
312
+ }
313
+ },
314
+ "borderWidth": {
315
+ "2xs": {
316
+ "value": "0.5px",
317
+ "type": "borderWidth"
318
+ },
319
+ "xs": {
320
+ "value": "0.7px",
321
+ "type": "borderWidth"
322
+ },
323
+ "s": {
324
+ "value": "1px",
325
+ "type": "borderWidth"
326
+ },
327
+ "m": {
328
+ "value": "2px",
329
+ "type": "borderWidth"
330
+ },
331
+ "l": {
332
+ "value": "3px",
333
+ "type": "borderWidth"
334
+ }
335
+ },
336
+ "space": {
337
+ "none": {
338
+ "value": "0rem",
339
+ "type": "spacing",
340
+ "description": "0px"
341
+ },
342
+ "3xs": {
343
+ "value": "0.125rem",
344
+ "type": "spacing",
345
+ "description": "2px"
346
+ },
347
+ "2xs": {
348
+ "value": "0.25rem",
349
+ "type": "spacing",
350
+ "description": "4px"
351
+ },
352
+ "xs": {
353
+ "value": "0.5rem",
354
+ "type": "spacing",
355
+ "description": "8px"
356
+ },
357
+ "s": {
358
+ "value": "0.75rem",
359
+ "type": "spacing",
360
+ "description": "12px"
361
+ },
362
+ "m": {
363
+ "value": "1rem",
364
+ "type": "spacing",
365
+ "description": "16px"
366
+ },
367
+ "l": {
368
+ "value": "1.5rem",
369
+ "type": "spacing",
370
+ "description": "24px"
371
+ },
372
+ "xl": {
373
+ "value": "2rem",
374
+ "type": "spacing",
375
+ "description": "32px"
376
+ },
377
+ "2xl": {
378
+ "value": "3rem",
379
+ "type": "spacing",
380
+ "description": "48px"
381
+ },
382
+ "3xl": {
383
+ "value": "4rem",
384
+ "type": "spacing",
385
+ "description": "64px"
386
+ },
387
+ "4xl": {
388
+ "value": "8rem",
389
+ "type": "spacing",
390
+ "description": "128px"
391
+ }
392
+ },
393
+ "iconSize": {
394
+ "s": {
395
+ "value": "1rem",
396
+ "type": "sizing",
397
+ "description": "16px"
398
+ },
399
+ "m": {
400
+ "value": "1.25rem",
401
+ "type": "sizing",
402
+ "description": "20px"
403
+ },
404
+ "l": {
405
+ "value": "1.5rem",
406
+ "type": "sizing",
407
+ "description": "24px"
408
+ }
409
+ },
410
+ "Shadow": {
411
+ "100": {
412
+ "value": {
413
+ "x": "0",
414
+ "y": "1",
415
+ "blur": "0",
416
+ "spread": "0",
417
+ "color": "#1A1A1A12",
418
+ "type": "dropShadow"
419
+ },
420
+ "type": "boxShadow"
421
+ },
422
+ "150": {
423
+ "value": {
424
+ "x": "0",
425
+ "y": "1",
426
+ "blur": "0",
427
+ "spread": "0",
428
+ "color": "#1a1a1a40",
429
+ "type": "dropShadow"
430
+ },
431
+ "type": "boxShadow"
432
+ },
433
+ "200": {
434
+ "value": {
435
+ "x": "0",
436
+ "y": "3",
437
+ "blur": "1",
438
+ "spread": "-1",
439
+ "color": "#1a1a1a12",
440
+ "type": "dropShadow"
441
+ },
442
+ "type": "boxShadow"
443
+ },
444
+ "300": {
445
+ "value": {
446
+ "x": "0",
447
+ "y": "4",
448
+ "blur": "6",
449
+ "spread": "-2",
450
+ "color": "#1a1a1a33",
451
+ "type": "dropShadow"
452
+ },
453
+ "type": "boxShadow"
454
+ },
455
+ "400": {
456
+ "value": {
457
+ "x": "0",
458
+ "y": "8",
459
+ "blur": "16",
460
+ "spread": "-4",
461
+ "color": "#1a1a1a38",
462
+ "type": "dropShadow"
463
+ },
464
+ "type": "boxShadow"
465
+ },
466
+ "500": {
467
+ "value": {
468
+ "x": "0",
469
+ "y": "12",
470
+ "blur": "20",
471
+ "spread": "-8",
472
+ "color": "#1a1a1a3D",
473
+ "type": "dropShadow"
474
+ },
475
+ "type": "boxShadow"
476
+ },
477
+ "600": {
478
+ "value": {
479
+ "x": "0",
480
+ "y": "20",
481
+ "blur": "20",
482
+ "spread": "-8",
483
+ "color": "#1a1a1a47",
484
+ "type": "dropShadow"
485
+ },
486
+ "type": "boxShadow"
487
+ },
488
+ "modal": {
489
+ "value": {
490
+ "x": "6",
491
+ "y": "6",
492
+ "blur": "6",
493
+ "spread": "0",
494
+ "color": "rgba(0,0,0,0.16)",
495
+ "type": "dropShadow"
496
+ },
497
+ "type": "boxShadow",
498
+ "description": "Drop shadow for modals"
499
+ }
500
+ },
501
+ "lineHeight": {
502
+ "1": {
503
+ "value": "1.25rem",
504
+ "type": "lineHeights",
505
+ "description": "20px"
506
+ },
507
+ "2": {
508
+ "value": "1.5rem",
509
+ "type": "lineHeights",
510
+ "description": "24px"
511
+ },
512
+ "3": {
513
+ "value": "1.75rem",
514
+ "type": "lineHeights",
515
+ "description": "28px"
516
+ },
517
+ "4": {
518
+ "value": "2rem",
519
+ "type": "lineHeights",
520
+ "description": "32px"
521
+ },
522
+ "5": {
523
+ "value": "2.5rem",
524
+ "type": "lineHeights",
525
+ "description": "40px"
526
+ },
527
+ "6": {
528
+ "value": "2.75rem",
529
+ "type": "lineHeights",
530
+ "description": "44px"
531
+ },
532
+ "7": {
533
+ "value": "3.5rem",
534
+ "type": "lineHeights",
535
+ "description": "56px"
536
+ },
537
+ "05": {
538
+ "value": "1.125rem",
539
+ "type": "lineHeights",
540
+ "description": "18px"
541
+ }
542
+ },
543
+ "fontFamily": {
544
+ "sans": {
545
+ "value": "acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif",
546
+ "type": "fontFamilies",
547
+ "description": "Deafult sans font family and fallback fonts when unavailable"
548
+ },
549
+ "number": {
550
+ "value": "roboto-mono, monospace",
551
+ "type": "fontFamilies",
552
+ "description": "monospace typeface for numbers and fallback fonts when unavailable"
553
+ }
554
+ },
555
+ "fontSize": {
556
+ "1": {
557
+ "value": "0.75rem",
558
+ "type": "fontSizes",
559
+ "description": "12px"
560
+ },
561
+ "2": {
562
+ "value": "0.875rem",
563
+ "type": "fontSizes",
564
+ "description": "14px"
565
+ },
566
+ "3": {
567
+ "value": "1rem",
568
+ "type": "fontSizes",
569
+ "description": "16px"
570
+ },
571
+ "4": {
572
+ "value": "1.125rem",
573
+ "type": "fontSizes",
574
+ "description": "18px"
575
+ },
576
+ "5": {
577
+ "value": "1.25rem",
578
+ "type": "fontSizes",
579
+ "description": "20px"
580
+ },
581
+ "6": {
582
+ "value": "1.375rem",
583
+ "type": "fontSizes",
584
+ "description": "22px"
585
+ },
586
+ "7": {
587
+ "value": "1.5rem",
588
+ "type": "fontSizes",
589
+ "description": "24px"
590
+ },
591
+ "8": {
592
+ "value": "2rem",
593
+ "type": "fontSizes",
594
+ "description": "32px"
595
+ },
596
+ "9": {
597
+ "value": "2.25rem",
598
+ "type": "fontSizes",
599
+ "description": "36px"
600
+ },
601
+ "10": {
602
+ "value": "3rem",
603
+ "type": "fontSizes",
604
+ "description": "48px"
605
+ }
606
+ },
607
+ "fontWeight": {
608
+ "regular": {
609
+ "value": "400",
610
+ "type": "fontWeights"
611
+ },
612
+ "medium": {
613
+ "value": "500",
614
+ "type": "fontWeights"
615
+ },
616
+ "bold": {
617
+ "value": "700",
618
+ "type": "fontWeights"
619
+ }
620
+ },
621
+ "typography": {
622
+ "heading": {
623
+ "xs": {
624
+ "value": {
625
+ "fontFamily": "{fontFamily.sans}",
626
+ "fontWeight": "{fontWeight.bold}",
627
+ "fontSize": "{fontSize.3}",
628
+ "lineHeight": "{lineHeight.2}"
629
+ },
630
+ "type": "typography"
631
+ },
632
+ "s": {
633
+ "value": {
634
+ "fontFamily": "{fontFamily.sans}",
635
+ "fontWeight": "{fontWeight.bold}",
636
+ "fontSize": "{fontSize.4}",
637
+ "lineHeight": "{lineHeight.3}"
638
+ },
639
+ "type": "typography"
640
+ },
641
+ "m": {
642
+ "value": {
643
+ "fontFamily": "{fontFamily.sans}",
644
+ "fontWeight": "{fontWeight.regular}",
645
+ "fontSize": "{fontSize.7}",
646
+ "lineHeight": "{lineHeight.4}"
647
+ },
648
+ "type": "typography"
649
+ },
650
+ "l": {
651
+ "value": {
652
+ "fontFamily": "{fontFamily.sans}",
653
+ "fontWeight": "{fontWeight.regular}",
654
+ "fontSize": "{fontSize.9}",
655
+ "lineHeight": "{lineHeight.6}"
656
+ },
657
+ "type": "typography"
658
+ },
659
+ "xl": {
660
+ "value": {
661
+ "fontFamily": "{fontFamily.sans}",
662
+ "fontWeight": "{fontWeight.bold}",
663
+ "fontSize": "{fontSize.10}",
664
+ "lineHeight": "{lineHeight.7}"
665
+ },
666
+ "type": "typography"
667
+ }
668
+ },
669
+ "body": {
670
+ "xs": {
671
+ "value": {
672
+ "fontFamily": "{fontFamily.sans}",
673
+ "fontWeight": "{fontWeight.regular}",
674
+ "fontSize": "{fontSize.2}",
675
+ "lineHeight": "{lineHeight.1}"
676
+ },
677
+ "type": "typography"
678
+ },
679
+ "s": {
680
+ "value": {
681
+ "fontFamily": "{fontFamily.sans}",
682
+ "fontWeight": "{fontWeight.regular}",
683
+ "fontSize": "{fontSize.3}",
684
+ "lineHeight": "{lineHeight.2}"
685
+ },
686
+ "type": "typography"
687
+ },
688
+ "m": {
689
+ "value": {
690
+ "fontFamily": "{fontFamily.sans}",
691
+ "fontWeight": "{fontWeight.regular}",
692
+ "fontSize": "{fontSize.4}",
693
+ "lineHeight": "{lineHeight.3}"
694
+ },
695
+ "type": "typography"
696
+ },
697
+ "l": {
698
+ "value": {
699
+ "fontFamily": "{fontFamily.sans}",
700
+ "fontWeight": "{fontWeight.regular}",
701
+ "lineHeight": "{lineHeight.4}",
702
+ "fontSize": "{fontSize.7}"
703
+ },
704
+ "type": "typography"
705
+ }
706
+ },
707
+ "button": {
708
+ "default": {
709
+ "value": {
710
+ "fontFamily": "{fontFamily.sans}",
711
+ "fontWeight": "{fontWeight.regular}",
712
+ "fontSize": "{fontSize.4}",
713
+ "lineHeight": "{lineHeight.1}",
714
+ "letterSpacing": "{letterSpacing.button}"
715
+ },
716
+ "type": "typography"
717
+ }
718
+ },
719
+ "number": {
720
+ "s": {
721
+ "value": {
722
+ "fontFamily": "{fontFamily.number}",
723
+ "fontWeight": "{fontWeight.medium}",
724
+ "lineHeight": "{lineHeight.2}",
725
+ "fontSize": "{fontSize.3}"
726
+ },
727
+ "type": "typography"
728
+ },
729
+ "m": {
730
+ "value": {
731
+ "fontFamily": "{fontFamily.number}",
732
+ "fontWeight": "{fontWeight.medium}",
733
+ "lineHeight": "{lineHeight.3}",
734
+ "fontSize": "{fontSize.4}"
735
+ },
736
+ "type": "typography"
737
+ },
738
+ "l": {
739
+ "value": {
740
+ "fontFamily": "{fontFamily.number}",
741
+ "fontWeight": "{fontWeight.medium}",
742
+ "lineHeight": "{lineHeight.4}",
743
+ "fontSize": "{fontSize.7}"
744
+ },
745
+ "type": "typography"
746
+ }
747
+ }
748
+ },
749
+ "letterSpacing": {
750
+ "button": {
751
+ "value": "0.0125rem",
752
+ "type": "letterSpacing",
753
+ "description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
754
+ }
755
+ }
756
+ }