@rijkshuisstijl-community/design-tokens 3.0.0 → 4.0.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.
Files changed (104) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/_variables.scss +290 -221
  3. package/dist/index.css +290 -221
  4. package/dist/index.d.ts +280 -211
  5. package/dist/index.js +290 -221
  6. package/dist/index.json +290 -221
  7. package/dist/index.tokens.json +464 -318
  8. package/dist/koop/_variables.scss +1425 -0
  9. package/dist/koop/index.css +1428 -0
  10. package/dist/koop/index.d.ts +1426 -0
  11. package/dist/koop/index.js +1426 -0
  12. package/dist/koop/index.json +1423 -0
  13. package/dist/koop/index.tokens.json +2201 -0
  14. package/dist/koop/root.css +1428 -0
  15. package/dist/koop/tokens.d.ts +2224 -0
  16. package/dist/koop/tokens.js +33522 -0
  17. package/dist/root.css +290 -221
  18. package/dist/tokens.d.ts +409 -270
  19. package/dist/tokens.js +6775 -4888
  20. package/dist/uitvoerend-groen/_variables.scss +936 -848
  21. package/dist/uitvoerend-groen/index.css +936 -848
  22. package/dist/uitvoerend-groen/index.d.ts +978 -890
  23. package/dist/uitvoerend-groen/index.js +993 -905
  24. package/dist/uitvoerend-groen/index.json +962 -874
  25. package/dist/uitvoerend-groen/index.tokens.json +1836 -1680
  26. package/dist/uitvoerend-groen/root.css +936 -848
  27. package/dist/uitvoerend-groen/tokens.d.ts +1764 -1608
  28. package/dist/uitvoerend-groen/tokens.js +24764 -22418
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +936 -848
  30. package/dist/uitvoerend-hemelblauw/index.css +936 -848
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +978 -890
  32. package/dist/uitvoerend-hemelblauw/index.js +993 -905
  33. package/dist/uitvoerend-hemelblauw/index.json +962 -874
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +1835 -1679
  35. package/dist/uitvoerend-hemelblauw/root.css +936 -848
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +1764 -1608
  37. package/dist/uitvoerend-hemelblauw/tokens.js +24906 -22560
  38. package/dist/uitvoerend-mintgroen/_variables.scss +936 -848
  39. package/dist/uitvoerend-mintgroen/index.css +936 -848
  40. package/dist/uitvoerend-mintgroen/index.d.ts +978 -890
  41. package/dist/uitvoerend-mintgroen/index.js +993 -905
  42. package/dist/uitvoerend-mintgroen/index.json +962 -874
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +1836 -1680
  44. package/dist/uitvoerend-mintgroen/root.css +936 -848
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +1764 -1608
  46. package/dist/uitvoerend-mintgroen/tokens.js +24764 -22418
  47. package/dist/uitvoerend-oranje/_variables.scss +936 -848
  48. package/dist/uitvoerend-oranje/index.css +936 -848
  49. package/dist/uitvoerend-oranje/index.d.ts +978 -890
  50. package/dist/uitvoerend-oranje/index.js +993 -905
  51. package/dist/uitvoerend-oranje/index.json +962 -874
  52. package/dist/uitvoerend-oranje/index.tokens.json +1836 -1680
  53. package/dist/uitvoerend-oranje/root.css +936 -848
  54. package/dist/uitvoerend-oranje/tokens.d.ts +1764 -1608
  55. package/dist/uitvoerend-oranje/tokens.js +24764 -22418
  56. package/dist/uitvoerend-paars/_variables.scss +936 -848
  57. package/dist/uitvoerend-paars/index.css +936 -848
  58. package/dist/uitvoerend-paars/index.d.ts +978 -890
  59. package/dist/uitvoerend-paars/index.js +993 -905
  60. package/dist/uitvoerend-paars/index.json +962 -874
  61. package/dist/uitvoerend-paars/index.tokens.json +1836 -1680
  62. package/dist/uitvoerend-paars/root.css +936 -848
  63. package/dist/uitvoerend-paars/tokens.d.ts +1764 -1608
  64. package/dist/uitvoerend-paars/tokens.js +24764 -22418
  65. package/dist/uitvoerend-violet/_variables.scss +936 -848
  66. package/dist/uitvoerend-violet/index.css +936 -848
  67. package/dist/uitvoerend-violet/index.d.ts +978 -890
  68. package/dist/uitvoerend-violet/index.js +993 -905
  69. package/dist/uitvoerend-violet/index.json +962 -874
  70. package/dist/uitvoerend-violet/index.tokens.json +1836 -1680
  71. package/dist/uitvoerend-violet/root.css +936 -848
  72. package/dist/uitvoerend-violet/tokens.d.ts +1764 -1608
  73. package/dist/uitvoerend-violet/tokens.js +24764 -22418
  74. package/dist/uitvoerend-violet-oud/_variables.scss +936 -848
  75. package/dist/uitvoerend-violet-oud/index.css +936 -848
  76. package/dist/uitvoerend-violet-oud/index.d.ts +979 -891
  77. package/dist/uitvoerend-violet-oud/index.js +963 -875
  78. package/dist/uitvoerend-violet-oud/index.json +963 -875
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +1833 -1677
  80. package/dist/uitvoerend-violet-oud/root.css +936 -848
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +1381 -1225
  82. package/dist/uitvoerend-violet-oud/tokens.js +25102 -22756
  83. package/dist/wetgevend/_variables.scss +936 -848
  84. package/dist/wetgevend/index.css +936 -848
  85. package/dist/wetgevend/index.d.ts +978 -890
  86. package/dist/wetgevend/index.js +993 -905
  87. package/dist/wetgevend/index.json +962 -874
  88. package/dist/wetgevend/index.tokens.json +1636 -1480
  89. package/dist/wetgevend/root.css +936 -848
  90. package/dist/wetgevend/tokens.d.ts +1463 -1307
  91. package/dist/wetgevend/tokens.js +25526 -23180
  92. package/figma/figma.tokens.json +2154 -2247
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +1665 -1228
  95. package/src/generated/koop/tokens.json +6732 -0
  96. package/src/generated/themes.json +48640 -37872
  97. package/src/generated/uitvoerend-groen/tokens.json +5207 -4703
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +5212 -4708
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +5208 -4704
  100. package/src/generated/uitvoerend-oranje/tokens.json +5208 -4704
  101. package/src/generated/uitvoerend-paars/tokens.json +5200 -4696
  102. package/src/generated/uitvoerend-violet/tokens.json +5208 -4704
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +5200 -4696
  104. package/src/generated/wetgevend/tokens.json +5377 -4873
@@ -7,22 +7,22 @@
7
7
  "gap": "0.75rem"
8
8
  },
9
9
  "unordered-list": {
10
- "padding-inline-start": "1.5rem",
11
- "margin-block-end": "0.25rem",
12
- "margin-block-start": "0.25rem",
13
10
  "color": "#0F172A",
11
+ "marker": {
12
+ "border-color": "#0F172A",
13
+ "color": "#0F172A"
14
+ },
14
15
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
15
16
  "font-weight": 400,
16
17
  "font-size": "1.25rem",
17
18
  "line-height": "150%",
19
+ "margin-block-end": "0.25rem",
20
+ "margin-block-start": "0.25rem",
21
+ "padding-inline-start": "1.5rem",
18
22
  "item": {
19
- "padding-inline-start": "0.5rem",
20
23
  "margin-block-end": "0.25rem",
21
- "margin-block-start": "0.25rem"
22
- },
23
- "marker": {
24
- "color": "#0F172A",
25
- "border-color": "#0F172A"
24
+ "margin-block-start": "0.25rem",
25
+ "padding-inline-start": "0.5rem"
26
26
  }
27
27
  },
28
28
  "textbox": {
@@ -192,40 +192,41 @@
192
192
  "font-size": "1.25rem"
193
193
  },
194
194
  "skip-link": {
195
- "font-weight": 700,
196
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
197
- "font-size": "1.25rem",
198
- "line-height": "150%",
199
- "min-block-size": "48px",
200
- "min-inline-size": "48px",
201
- "padding-block-end": "0.75rem",
202
- "padding-block-start": "0.75rem",
203
- "padding-inline-end": "1rem",
204
- "padding-inline-start": "1rem",
205
195
  "focus": {
206
- "background-color": "#fff",
196
+ "text-decoration": "None",
207
197
  "border-color": "#154273",
208
- "border-style": "solid",
209
198
  "border-width": "2px",
210
- "color": "#0F172A",
211
- "text-decoration": "None"
212
- },
213
- "focus-visible": {
214
- "outline-color": "#000"
199
+ "border-style": "solid",
200
+ "background-color": "#fff",
201
+ "color": "#01689b"
215
202
  },
216
- "background-color": "#154273",
217
203
  "border-color": "transparent",
218
- "color": "#fff",
219
- "border-width": "2px",
220
204
  "box-block-end-shadow": {
205
+ "color": "#0000001a",
206
+ "blur-radius": "48px",
221
207
  "offset-x": 0,
222
208
  "offset-y": "16px",
223
- "blur-radius": "48px",
224
- "spread-radius": 0,
225
- "color": "#0000001a"
209
+ "spread-radius": 0
226
210
  },
227
- "text-decoration": "underline",
228
- "text-underline-offset": "0.125rem"
211
+ "focus-visible": {
212
+ "outline-color": "#000",
213
+ "text-decoration": "underline"
214
+ },
215
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
216
+ "font-weight": 700,
217
+ "line-height": "150%",
218
+ "border-width": "2px",
219
+ "text-underline-offset": "0.125rem",
220
+ "font-size": "1.25rem",
221
+ "background-color": "#fff",
222
+ "color": "#01689b",
223
+ "min-block-size": "48px",
224
+ "min-inline-size": "48px",
225
+ "padding-block-end": "0.75rem",
226
+ "padding-block-start": "0.75rem",
227
+ "padding-inline-end": "1rem",
228
+ "padding-inline-start": "1rem",
229
+ "text-decoration": "underline"
229
230
  },
230
231
  "separator": {
231
232
  "color": "#CBD5E1",
@@ -354,127 +355,151 @@
354
355
  "font-size": "1.25rem",
355
356
  "font-weight": 400,
356
357
  "line-height": "150%",
357
- "margin-block-end": 0,
358
- "margin-block-start": 0,
359
358
  "lead": {
360
359
  "color": "#0F172A",
361
360
  "font-size": "1.5rem",
362
361
  "font-weight": 400,
363
362
  "line-height": "150%"
364
- }
363
+ },
364
+ "small": {
365
+ "font-size": "1.5rem",
366
+ "color": "#0F172A",
367
+ "font-weight": 400,
368
+ "line-height": "150%"
369
+ },
370
+ "margin-block-end": "0rem",
371
+ "margin-block-start": "0rem"
365
372
  },
366
373
  "ordered-list": {
367
- "padding-inline-start": "1.5rem",
368
- "margin-block-end": "0.25rem",
369
- "margin-block-start": "0.25rem",
370
- "margin-inline-start": "0.625rem",
371
- "item": {
372
- "padding-inline-start": 0,
373
- "margin-block-end": "0.25rem",
374
- "margin-block-start": "0.25rem"
375
- },
376
374
  "color": "#0F172A",
377
375
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
378
376
  "font-weight": 400,
377
+ "margin-inline-start": "0.625rem",
379
378
  "font-size": "1.25rem",
380
- "line-height": "150%"
379
+ "line-height": "150%",
380
+ "margin-block-end": "0.25rem",
381
+ "margin-block-start": "0.25rem",
382
+ "padding-inline-start": "1.5rem",
383
+ "item": {
384
+ "margin-block-end": "0.25rem",
385
+ "margin-block-start": "0.25rem",
386
+ "padding-inline-start": "0.5rem"
387
+ }
381
388
  },
382
389
  "link-list": {
383
- "margin-block-start": 0,
384
- "row-gap": "0.5rem",
385
- "margin-block-end": 0,
386
390
  "item": {
391
+ "text-decoration": "None",
392
+ "column-gap": "0.5rem"
393
+ },
394
+ "margin-block-end": "0rem",
395
+ "margin-block-start": "0rem",
396
+ "row-gap": "0.5rem",
397
+ "icon": {
398
+ "inset-block-start": "0.188rem",
399
+ "size": "24px"
400
+ },
401
+ "link": {
387
402
  "column-gap": "0.5rem",
388
403
  "text-decoration": "None"
389
404
  },
390
- "icon": {
391
- "size": "24px",
392
- "inset-block-start": "0.188rem"
393
- }
405
+ "font-weight": 400
394
406
  },
395
407
  "link": {
396
- "color": "#01689b",
397
- "text-decoration-color": "#01689b",
408
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
409
+ "font-weight": 400,
410
+ "line-height": "150%",
411
+ "font-size": "1.25rem",
398
412
  "active": {
399
- "color": "#42145f",
400
- "text-decoration": "None"
401
- },
402
- "focus": {
403
- "background-color": "transparent",
404
- "color": "#01689b",
405
413
  "text-decoration": "None",
406
- "text-decoration-thickness": "auto"
414
+ "color": "#163f5b"
407
415
  },
408
- "hover": {
409
- "color": "#01496c",
416
+ "focus": {
410
417
  "text-decoration": "None",
411
- "text-decoration-thickness": "auto"
412
- },
413
- "visited": {
414
- "color": "#42145f"
418
+ "text-decoration-thickness": "auto",
419
+ "background-color": "transparent",
420
+ "color": "#01689b"
415
421
  },
416
- "text-decoration": "underline",
417
422
  "icon": {
418
423
  "inset-block-start": "0.25rem",
419
424
  "size": "24px"
420
425
  },
426
+ "color": "#01689b",
427
+ "text-decoration-color": "inherit",
421
428
  "column-gap": "0.25rem",
422
- "text-decoration-thickness": "auto",
429
+ "text-decoration": "underline",
430
+ "text-decoration-thickness": "0.0625em",
423
431
  "text-underline-offset": "0.125rem",
424
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
425
- "font-weight": 400,
426
- "font-size": "1.25rem",
427
- "line-height": "150%"
432
+ "hover": {
433
+ "color": "#15496a",
434
+ "text-decoration": "underline",
435
+ "text-decoration-thickness": "0.1875em"
436
+ },
437
+ "focus-visible": {
438
+ "text-decoration": "None",
439
+ "text-decoration-thickness": "0.0625em"
440
+ },
441
+ "visited": {
442
+ "color": "#01689b"
443
+ }
428
444
  },
429
445
  "icon": {
430
446
  "color": "inherit",
431
447
  "size": "24px",
432
- "inset-block-start": 0
448
+ "inset-block-start": "0rem"
433
449
  },
434
450
  "heading-1": {
435
451
  "color": "#154273",
436
452
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
453
+ "font-size": "3.125rem",
437
454
  "font-weight": 700,
438
455
  "line-height": "125%",
439
- "font-size": "3.125rem",
440
- "margin-block-end": 0,
441
- "margin-block-start": 0
456
+ "margin-block-end": "0rem",
457
+ "margin-block-start": "0rem"
442
458
  },
443
459
  "heading-2": {
444
460
  "color": "#154273",
445
461
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
462
+ "font-size": "2.5rem",
446
463
  "font-weight": 700,
447
464
  "line-height": "125%",
448
- "font-size": "2.5rem",
449
- "margin-block-end": 0,
450
- "margin-block-start": 0
465
+ "margin-block-end": "0rem",
466
+ "margin-block-start": "0rem"
451
467
  },
452
468
  "heading-3": {
453
469
  "color": "#154273",
454
470
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
471
+ "font-size": "1.875rem",
455
472
  "font-weight": 700,
456
473
  "line-height": "125%",
457
- "font-size": "1.875rem",
458
- "margin-block-end": 0,
459
- "margin-block-start": 0
474
+ "margin-block-end": "0rem",
475
+ "margin-block-start": "0rem"
460
476
  },
461
477
  "heading-4": {
462
478
  "color": "#154273",
463
479
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
464
- "font-weight": 700,
465
- "line-height": "125%",
466
480
  "font-size": "1.5rem",
467
- "margin-block-end": 0,
468
- "margin-block-start": 0
481
+ "font-weight": 700,
482
+ "line-height": "150%",
483
+ "margin-block-end": "0rem",
484
+ "margin-block-start": "0rem"
469
485
  },
470
486
  "heading-5": {
471
487
  "color": "#154273",
472
488
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
489
+ "font-size": "1.25rem",
473
490
  "font-weight": 700,
474
- "line-height": "125%",
491
+ "line-height": "150%",
492
+ "margin-block-end": "0rem",
493
+ "margin-block-start": "0rem"
494
+ },
495
+ "heading-6": {
496
+ "color": "#154273",
497
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
475
498
  "font-size": "1.25rem",
476
- "margin-block-end": 0,
477
- "margin-block-start": 0
499
+ "font-weight": 700,
500
+ "line-height": "150%",
501
+ "margin-block-end": "0rem",
502
+ "margin-block-start": "0rem"
478
503
  },
479
504
  "form-label": {
480
505
  "color": "#0F172A",
@@ -515,7 +540,7 @@
515
540
  "invalid": {
516
541
  "border-inline-start-color": "#d52b1e",
517
542
  "border-inline-start-width": "0px",
518
- "padding-inline-start": 0
543
+ "padding-inline-start": "0rem"
519
544
  },
520
545
  "label": {
521
546
  "margin-block-end": "0.5rem"
@@ -569,10 +594,17 @@
569
594
  "border-inline-start": {
570
595
  "color": "#d52b1e"
571
596
  },
572
- "padding-inline-start": 0,
597
+ "padding-inline-start": "0rem",
573
598
  "border-inline-start-width": "0px"
574
599
  }
575
600
  },
601
+ "data-badge": {
602
+ "background-color": "#dce3ea",
603
+ "border-radius": "10px",
604
+ "color": "#154273",
605
+ "padding-block": "0.125rem",
606
+ "padding-inline": "0.75rem"
607
+ },
576
608
  "number-badge": {
577
609
  "font-size": "1.25rem",
578
610
  "line-height": "125%",
@@ -680,178 +712,189 @@
680
712
  "border-color": "#4f7196"
681
713
  }
682
714
  },
683
- "button-group": {
684
- "background-color": "transparent",
685
- "column-gap": "0.5rem",
686
- "margin-block-end": "0px",
687
- "margin-block-start": "0px",
688
- "padding-block-end": "0px",
689
- "padding-block-start": "0px",
690
- "row-gap": "0.5rem"
691
- },
692
715
  "button": {
693
- "background-color": "#0F172A",
694
- "border-color": "transparent",
695
- "color": "#fff",
696
- "border-radius": "5px",
697
- "border-width": "1px",
698
716
  "icon": {
699
717
  "gap": "0.5rem",
700
718
  "size": "24px"
701
719
  },
720
+ "background-color": "#0F172A",
721
+ "border-color": "transparent",
722
+ "border-radius": "5px",
723
+ "border-width": "1px",
724
+ "color": "#fff",
725
+ "column-gap": "0.5rem",
702
726
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
703
727
  "font-size": "1.25rem",
704
728
  "font-weight": 700,
705
729
  "line-height": "150%",
730
+ "min-block-size": "48px",
731
+ "min-inline-size": "48px",
706
732
  "padding-block-end": "0.5rem",
707
733
  "padding-block-start": "0.5rem",
708
734
  "padding-inline-end": "1rem",
709
735
  "padding-inline-start": "1rem",
710
- "disabled": {
711
- "background-color": "#E2E8F0",
736
+ "pressed": {
737
+ "background-color": "#1E293B",
712
738
  "border-color": "transparent",
713
- "color": "#94A3B8"
739
+ "color": "#fff"
714
740
  },
715
- "focus": {
716
- "background-color": "#475569",
741
+ "active": {
742
+ "background-color": "#1E293B",
717
743
  "border-color": "transparent",
718
744
  "color": "#fff"
719
745
  },
746
+ "disabled": {
747
+ "background-color": "#E2E8F0",
748
+ "border-color": "transparent",
749
+ "color": "#94A3B8"
750
+ },
720
751
  "hover": {
721
752
  "background-color": "#475569",
722
753
  "border-color": "transparent",
723
754
  "color": "#fff"
724
755
  },
725
- "active": {
726
- "background-color": "#1E293B",
756
+ "focus": {
757
+ "background-color": "#475569",
727
758
  "border-color": "transparent",
728
759
  "color": "#fff"
729
760
  },
730
- "min-block-size": "48px",
731
- "min-inline-size": "48px",
732
- "column-gap": "0.5rem",
733
761
  "primary-action": {
734
- "hover": {
735
- "background-color": "#162f50",
736
- "border-color": "transparent",
737
- "color": "#fff"
738
- },
739
762
  "background-color": "#154273",
740
763
  "border-color": "transparent",
741
764
  "color": "#fff",
765
+ "font-size": "1.25rem",
766
+ "font-weight": 700,
767
+ "line-height": "1.875rem",
742
768
  "disabled": {
743
769
  "background-color": "#b8c6d5",
744
770
  "border-color": "transparent",
745
771
  "color": "#4f7196"
746
772
  },
747
- "focus": {
773
+ "hover": {
748
774
  "background-color": "#162f50",
749
775
  "border-color": "transparent",
750
776
  "color": "#fff"
751
777
  },
752
- "font-weight": 700,
753
- "active": {
754
- "background-color": "#0d2845",
778
+ "focus": {
779
+ "background-color": "#162f50",
755
780
  "border-color": "transparent",
756
781
  "color": "#fff"
757
782
  },
758
- "font-size": "1.25rem",
759
- "line-height": "1.875rem",
760
783
  "pressed": {
761
- "background-color": "#162945",
762
784
  "border-color": "transparent",
763
- "color": "#fff"
785
+ "color": "#fff",
786
+ "background-color": "#162945"
787
+ },
788
+ "active": {
789
+ "border-color": "transparent",
790
+ "color": "#fff",
791
+ "background-color": "#0d2845"
764
792
  }
765
793
  },
766
794
  "secondary-action": {
767
- "hover": {
768
- "background-color": "#dce3ea",
769
- "border-color": "#162f50",
770
- "color": "#162f50"
771
- },
772
795
  "background-color": "transparent",
773
796
  "border-color": "#154273",
774
797
  "color": "#154273",
798
+ "font-size": "1.25rem",
799
+ "font-weight": 700,
800
+ "line-height": "1.875rem",
775
801
  "disabled": {
776
802
  "background-color": "transparent",
777
803
  "border-color": "#95a9c0",
778
804
  "color": "#738eab"
779
805
  },
780
- "focus": {
806
+ "hover": {
781
807
  "background-color": "#dce3ea",
782
- "border-color": "transparent",
808
+ "border-color": "#162f50",
783
809
  "color": "#162f50"
784
810
  },
785
- "font-weight": 700,
786
- "active": {
787
- "background-color": "#95a9c0",
788
- "border-color": "#162945",
811
+ "focus": {
812
+ "background-color": "#dce3ea",
813
+ "border-color": "transparent",
789
814
  "color": "#162f50"
790
815
  },
791
- "font-size": "1.25rem",
792
- "line-height": "1.875rem",
793
816
  "pressed": {
794
817
  "background-color": "#b8c6d5",
795
818
  "border-color": "#162945",
796
819
  "color": "#162945"
820
+ },
821
+ "active": {
822
+ "background-color": "#95a9c0",
823
+ "color": "#162f50",
824
+ "border-color": "#162945"
797
825
  }
798
826
  },
799
827
  "subtle": {
800
- "font-size": "1.25rem",
801
- "font-weight": 700,
802
- "hover": {
803
- "background-color": "#dce3ea",
804
- "border-color": "transparent",
805
- "color": "#162f50"
806
- },
807
828
  "background-color": "transparent",
808
829
  "border-color": "transparent",
809
830
  "color": "#154273",
831
+ "font-size": "1.25rem",
832
+ "font-weight": 700,
833
+ "line-height": "1.875rem",
810
834
  "disabled": {
811
835
  "background-color": "transparent",
812
836
  "border-color": "transparent",
813
837
  "color": "#b8c6d5"
814
838
  },
815
- "focus": {
839
+ "hover": {
816
840
  "background-color": "#dce3ea",
817
841
  "border-color": "transparent",
818
842
  "color": "#162f50"
819
843
  },
820
- "active": {
821
- "background-color": "#95a9c0",
844
+ "focus": {
845
+ "background-color": "#dce3ea",
822
846
  "border-color": "transparent",
823
- "color": "#0d2845"
847
+ "color": "#162f50"
824
848
  },
825
- "line-height": "1.875rem",
826
849
  "pressed": {
827
850
  "background-color": "#b8c6d5",
828
851
  "border-color": "transparent",
829
852
  "color": "#162945"
853
+ },
854
+ "active": {
855
+ "background-color": "#95a9c0",
856
+ "border-color": "transparent",
857
+ "color": "#0d2845"
830
858
  }
831
- },
832
- "pressed": {
833
- "background-color": "#1E293B",
834
- "border-color": "transparent",
835
- "color": "#fff"
836
859
  }
837
860
  },
861
+ "button-group": {
862
+ "margin-block-end": "0rem",
863
+ "margin-block-start": "0rem",
864
+ "background-color": "transparent",
865
+ "column-gap": "0.5rem",
866
+ "padding-block-end": "0px",
867
+ "padding-block-start": "0px",
868
+ "row-gap": "0.5rem"
869
+ },
838
870
  "breadcrumb-nav": {
839
- "line-height": 1.4,
840
- "font-size": "1.25rem",
871
+ "divider": {
872
+ "color": "#334155",
873
+ "inset-block-start": 0,
874
+ "size": "24px"
875
+ },
841
876
  "link": {
877
+ "padding-block-end": "0.75rem",
878
+ "padding-block-start": "0.75rem",
879
+ "padding-inline-end": "0rem",
880
+ "padding-inline-start": "0rem",
881
+ "current": {
882
+ "color": "#334155",
883
+ "font-weight": 400
884
+ },
842
885
  "icon": {
843
- "size": "24px",
886
+ "inset-block-start": 0,
844
887
  "margin-inline": "0.25rem",
845
- "inset-block-start": 0
888
+ "size": "24px"
846
889
  },
847
- "padding-block-end": "0.75rem",
848
- "padding-block-start": "0.75rem",
849
- "padding-inline-end": 0,
850
- "padding-inline-start": 0,
851
890
  "color": "#01689b",
891
+ "text-decoration": "underline",
852
892
  "active": {
853
- "color": "#42145f",
854
- "text-decoration": "None"
893
+ "color": "#163f5b",
894
+ "text-decoration": "underline"
895
+ },
896
+ "disabled": {
897
+ "color": "#334155"
855
898
  },
856
899
  "focus": {
857
900
  "background-color": "transparent",
@@ -859,22 +902,29 @@
859
902
  "text-decoration": "None"
860
903
  },
861
904
  "hover": {
862
- "color": "#01496c",
863
- "text-decoration": "None"
864
- },
865
- "current": {
866
- "color": "#334155"
867
- },
868
- "text-decoration": "underline"
905
+ "text-decoration": "underline",
906
+ "color": "#01496c"
907
+ }
908
+ },
909
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
910
+ "font-size": "1.25rem",
911
+ "line-height": "150%",
912
+ "min-block-size": "48px",
913
+ "item": {
914
+ "padding-block-end": "0.5rem",
915
+ "padding-block-start": "0.5rem",
916
+ "padding-inline-end": "0.5rem",
917
+ "padding-inline-start": "0.5rem",
918
+ "first": {
919
+ "padding-inline-start": "0rem"
920
+ }
869
921
  },
870
- "divider": {
871
- "size": "24px",
922
+ "separator": {
872
923
  "color": "#334155",
873
- "inset-block-start": 0
874
- },
875
- "margin-inline": "0.5rem",
876
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
877
- "font-weight": 400
924
+ "icon": {
925
+ "size": "24px"
926
+ }
927
+ }
878
928
  },
879
929
  "blockquote": {
880
930
  "background-color": "transparent",
@@ -1046,34 +1096,6 @@
1046
1096
  }
1047
1097
  }
1048
1098
  },
1049
- "action": {
1050
- "activate": {
1051
- "cursor": "pointer"
1052
- },
1053
- "busy": {
1054
- "cursor": "wait"
1055
- },
1056
- "disabled": {
1057
- "cursor": "not-allowed"
1058
- },
1059
- "inert": {
1060
- "cursor": "default"
1061
- },
1062
- "navigate": {
1063
- "cursor": "pointer"
1064
- },
1065
- "submit": {
1066
- "cursor": "pointer"
1067
- }
1068
- },
1069
- "document": {
1070
- "background-color": "#fff",
1071
- "color": "#0F172A",
1072
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1073
- "font-size": "1.25rem",
1074
- "line-height": "150%",
1075
- "font-weight": 400
1076
- },
1077
1099
  "rich-text": {
1078
1100
  "stranger": {
1079
1101
  "margin-block-end": "2rem"
@@ -1088,7 +1110,7 @@
1088
1110
  "margin-block-end": "0.25rem"
1089
1111
  },
1090
1112
  "confidant": {
1091
- "margin-block-end": 0
1113
+ "margin-block-end": "0rem"
1092
1114
  }
1093
1115
  },
1094
1116
  "pointer-target": {
@@ -1102,6 +1124,34 @@
1102
1124
  "inverse": {
1103
1125
  "outline-color": "#fff"
1104
1126
  }
1127
+ },
1128
+ "document": {
1129
+ "background-color": "#fff",
1130
+ "color": "#0F172A",
1131
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1132
+ "font-size": "1.25rem",
1133
+ "line-height": "150%",
1134
+ "font-weight": 400
1135
+ },
1136
+ "action": {
1137
+ "activate": {
1138
+ "cursor": "pointer"
1139
+ },
1140
+ "busy": {
1141
+ "cursor": "wait"
1142
+ },
1143
+ "disabled": {
1144
+ "cursor": "not-allowed"
1145
+ },
1146
+ "inert": {
1147
+ "cursor": "default"
1148
+ },
1149
+ "navigate": {
1150
+ "cursor": "pointer"
1151
+ },
1152
+ "submit": {
1153
+ "cursor": "pointer"
1154
+ }
1105
1155
  }
1106
1156
  },
1107
1157
  "rhc": {
@@ -1380,7 +1430,7 @@
1380
1430
  "font-weight": 400,
1381
1431
  "row-gap": "0.5rem",
1382
1432
  "label": {
1383
- "margin-block-end": 0
1433
+ "margin-block-end": "0rem"
1384
1434
  },
1385
1435
  "input": {
1386
1436
  "margin": {
@@ -1390,7 +1440,7 @@
1390
1440
  },
1391
1441
  "form-field-checkbox-option": {
1392
1442
  "column-gap": "0.5rem",
1393
- "margin-block-end": 0
1443
+ "margin-block-end": "0rem"
1394
1444
  },
1395
1445
  "page-footer": {
1396
1446
  "column-gap": "1.5rem",
@@ -1459,13 +1509,13 @@
1459
1509
  "row": {
1460
1510
  "padding-block-end": "0.75rem",
1461
1511
  "padding-block-start": "0.75rem",
1462
- "padding-inline-end": 0,
1512
+ "padding-inline-end": "0rem",
1463
1513
  "padding-inline-start": "0px"
1464
1514
  },
1465
1515
  "padding-block-end": "0.75rem",
1466
- "padding-block-start": 0,
1467
- "padding-inline-end": 0,
1468
- "padding-inline-start": 0
1516
+ "padding-block-start": "0rem",
1517
+ "padding-inline-end": "0rem",
1518
+ "padding-inline-start": "0rem"
1469
1519
  },
1470
1520
  "item-key": {
1471
1521
  "font-weight": 700,
@@ -1473,12 +1523,12 @@
1473
1523
  "padding-block-end": "0.75rem",
1474
1524
  "padding-block-start": "0.75rem",
1475
1525
  "padding-inline-end": "1rem",
1476
- "padding-inline-start": 0
1526
+ "padding-inline-start": "0rem"
1477
1527
  },
1478
1528
  "padding-block-end": "0.25rem",
1479
1529
  "padding-block-start": "0.75rem",
1480
- "padding-inline-end": 0,
1481
- "padding-inline-start": 0
1530
+ "padding-inline-end": "0rem",
1531
+ "padding-inline-start": "0rem"
1482
1532
  },
1483
1533
  "item": {
1484
1534
  "border-width": "1px",
@@ -1492,13 +1542,20 @@
1492
1542
  "row": {
1493
1543
  "padding-block-end": "0.75rem",
1494
1544
  "padding-block-start": "0.75rem",
1495
- "padding-inline-end": 0,
1545
+ "padding-inline-end": "0rem",
1496
1546
  "padding-inline-start": "1rem"
1497
1547
  },
1498
1548
  "padding-block-end": "0.75rem",
1499
1549
  "padding-block-start": "0.75rem",
1500
1550
  "padding-inline-end": "1rem",
1501
- "padding-inline-start": 0
1551
+ "padding-inline-start": "0rem"
1552
+ }
1553
+ },
1554
+ "data-badge-button": {
1555
+ "column-gap": "0.125rem",
1556
+ "hover": {
1557
+ "background-color": "#154273",
1558
+ "color": "#fff"
1502
1559
  }
1503
1560
  },
1504
1561
  "code-input": {
@@ -1666,8 +1723,7 @@
1666
1723
  "subdued": "#334155",
1667
1724
  "link": "#01689b",
1668
1725
  "on-dark-color": "#fff",
1669
- "on-light-color": "#000",
1670
- "onEmphasis": "#fff"
1726
+ "on-light-color": "#000"
1671
1727
  },
1672
1728
  "border": {
1673
1729
  "default": "#64748B",
@@ -1947,7 +2003,7 @@
1947
2003
  "none": "0px"
1948
2004
  },
1949
2005
  "space": {
1950
- "0": 0,
2006
+ "0": "0rem",
1951
2007
  "25": "0.125rem",
1952
2008
  "50": "0.25rem",
1953
2009
  "100": "0.5rem",
@@ -1962,16 +2018,21 @@
1962
2018
  },
1963
2019
  "nl": {
1964
2020
  "skip-link": {
1965
- "font-weight": 700,
2021
+ "border-color": "transparent",
2022
+ "border-width": "2px",
1966
2023
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1967
- "font-size": "1.25rem",
1968
- "line-height": "150%",
1969
- "min-block-size": "48px",
1970
- "min-inline-size": "48px",
2024
+ "font-weight": 700,
1971
2025
  "padding-block-end": "0.75rem",
1972
2026
  "padding-block-start": "0.75rem",
1973
2027
  "padding-inline-end": "1rem",
1974
2028
  "padding-inline-start": "1rem",
2029
+ "box-block-end-shadow": {
2030
+ "blur-radius": "48px",
2031
+ "color": "#0000001a",
2032
+ "offset-x": 0,
2033
+ "offset-y": "16px",
2034
+ "spread-radius": 0
2035
+ },
1975
2036
  "focus": {
1976
2037
  "background-color": "#fff",
1977
2038
  "border-color": "#154273",
@@ -1983,41 +2044,48 @@
1983
2044
  "focus-visible": {
1984
2045
  "outline-color": "#000"
1985
2046
  },
1986
- "background-color": "#154273",
1987
- "border-color": "transparent",
1988
- "color": "#fff",
1989
- "border-width": "2px",
1990
- "box-block-end-shadow": {
1991
- "offset-x": 0,
1992
- "offset-y": "16px",
1993
- "blur-radius": "48px",
1994
- "spread-radius": 0,
1995
- "color": "#0000001a"
1996
- },
1997
2047
  "text-decoration": "underline",
1998
- "text-underline-offset": "0.125rem"
2048
+ "background-color": "#fff",
2049
+ "color": "#01689b",
2050
+ "padding-block": "0.75rem",
2051
+ "padding-inline": "1rem",
2052
+ "min-block-size": "48px",
2053
+ "min-inline-size": "48px",
2054
+ "text-decoration-thickness": "0.0625em",
2055
+ "text-underline-offset": "0.125rem",
2056
+ "line-height": "150%",
2057
+ "font-size": "1.25rem"
1999
2058
  },
2000
2059
  "paragraph": {
2060
+ "lead": {
2061
+ "color": "#0F172A",
2062
+ "font-size": "1.5rem",
2063
+ "font-weight": 400,
2064
+ "line-height": "150%",
2065
+ "margin-block-end": "0rem",
2066
+ "margin-block-start": "0rem"
2067
+ },
2001
2068
  "color": "#0F172A",
2002
2069
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2003
2070
  "font-size": "1.25rem",
2004
2071
  "font-weight": 400,
2005
2072
  "line-height": "150%",
2006
- "margin-block-end": 0,
2007
- "margin-block-start": 0,
2008
- "lead": {
2009
- "color": "#0F172A",
2010
- "font-size": "1.5rem",
2011
- "font-weight": 400,
2012
- "line-height": "150%"
2013
- }
2073
+ "margin-block-end": "0rem",
2074
+ "margin-block-start": "0rem"
2014
2075
  },
2015
2076
  "link": {
2016
- "color": "#01689b",
2017
- "text-decoration-color": "#01689b",
2077
+ "column-gap": "0.25rem",
2078
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2079
+ "font-size": "1.25rem",
2080
+ "font-weight": 400,
2081
+ "line-height": "150%",
2082
+ "icon": {
2083
+ "inset-block-start": "0.25rem",
2084
+ "size": "24px"
2085
+ },
2018
2086
  "active": {
2019
- "color": "#42145f",
2020
- "text-decoration": "None"
2087
+ "text-decoration": "None",
2088
+ "color": "#1a4972"
2021
2089
  },
2022
2090
  "focus": {
2023
2091
  "background-color": "transparent",
@@ -2025,71 +2093,82 @@
2025
2093
  "text-decoration": "None",
2026
2094
  "text-decoration-thickness": "auto"
2027
2095
  },
2028
- "hover": {
2029
- "color": "#01496c",
2030
- "text-decoration": "None",
2031
- "text-decoration-thickness": "auto"
2032
- },
2033
2096
  "visited": {
2034
- "color": "#42145f"
2035
- },
2036
- "text-decoration": "underline",
2037
- "icon": {
2038
- "inset-block-start": "0.25rem",
2039
- "size": "24px"
2097
+ "color": "#01689b"
2040
2098
  },
2041
- "column-gap": "0.25rem",
2042
- "text-decoration-thickness": "auto",
2099
+ "color": "#01689b",
2100
+ "text-decoration-color": "inherit",
2101
+ "text-decoration-line": "underline",
2102
+ "text-decoration-thickness": "0.0625em",
2043
2103
  "text-underline-offset": "0.125rem",
2044
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2045
- "font-weight": 400,
2046
- "font-size": "1.25rem",
2047
- "line-height": "150%"
2048
- },
2049
- "heading-level-1": {
2050
- "color": "#154273",
2051
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2052
- "font-weight": 700,
2053
- "line-height": "125%",
2054
- "font-size": "3.125rem",
2055
- "margin-block-end": 0,
2056
- "margin-block-start": 0
2057
- },
2058
- "heading-level-2": {
2059
- "color": "#154273",
2060
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2061
- "font-weight": 700,
2062
- "line-height": "125%",
2063
- "font-size": "2.5rem",
2064
- "margin-block-end": 0,
2065
- "margin-block-start": 0
2066
- },
2067
- "heading-level-3": {
2068
- "color": "#154273",
2069
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2070
- "font-weight": 700,
2071
- "line-height": "125%",
2072
- "font-size": "1.875rem",
2073
- "margin-block-end": 0,
2074
- "margin-block-start": 0
2075
- },
2076
- "heading-level-4": {
2077
- "color": "#154273",
2078
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2079
- "font-weight": 700,
2080
- "line-height": "125%",
2081
- "font-size": "1.5rem",
2082
- "margin-block-end": 0,
2083
- "margin-block-start": 0
2104
+ "current": {
2105
+ "cursor": "default"
2106
+ },
2107
+ "disabled": {
2108
+ "color": "#334155",
2109
+ "cursor": "disabled"
2110
+ },
2111
+ "hover": {
2112
+ "text-decoration-line": "underline",
2113
+ "text-decoration-thickness": "auto",
2114
+ "color": "#01496c"
2115
+ }
2084
2116
  },
2085
- "heading-level-5": {
2086
- "color": "#154273",
2087
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2088
- "font-weight": 700,
2089
- "line-height": "125%",
2090
- "font-size": "1.25rem",
2091
- "margin-block-end": 0,
2092
- "margin-block-start": 0
2117
+ "heading": {
2118
+ "level-1": {
2119
+ "color": "#154273",
2120
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2121
+ "font-size": "3.125rem",
2122
+ "font-weight": 700,
2123
+ "line-height": "125%",
2124
+ "margin-block-end": "0rem",
2125
+ "margin-block-start": "0rem"
2126
+ },
2127
+ "level-2": {
2128
+ "color": "#154273",
2129
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2130
+ "font-size": "2.5rem",
2131
+ "font-weight": 700,
2132
+ "line-height": "125%",
2133
+ "margin-block-end": "0rem",
2134
+ "margin-block-start": "0rem"
2135
+ },
2136
+ "level-3": {
2137
+ "color": "#154273",
2138
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2139
+ "font-size": "1.875rem",
2140
+ "font-weight": 700,
2141
+ "line-height": "125%",
2142
+ "margin-block-end": "0rem",
2143
+ "margin-block-start": "0rem"
2144
+ },
2145
+ "level-4": {
2146
+ "color": "#154273",
2147
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2148
+ "font-size": "1.5rem",
2149
+ "font-weight": 700,
2150
+ "line-height": "150%",
2151
+ "margin-block-end": "0rem",
2152
+ "margin-block-start": "0rem"
2153
+ },
2154
+ "level-5": {
2155
+ "color": "#154273",
2156
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2157
+ "font-size": "1.25rem",
2158
+ "font-weight": 700,
2159
+ "line-height": "150%",
2160
+ "margin-block-end": "0rem",
2161
+ "margin-block-start": "0rem"
2162
+ },
2163
+ "level-6": {
2164
+ "color": "#154273",
2165
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2166
+ "font-size": "1.25rem",
2167
+ "font-weight": 700,
2168
+ "line-height": "150%",
2169
+ "margin-block-end": "0rem",
2170
+ "margin-block-start": "0rem"
2171
+ }
2093
2172
  },
2094
2173
  "number-badge": {
2095
2174
  "font-size": "1.25rem",
@@ -2106,5 +2185,72 @@
2106
2185
  "padding-inline": "0.5rem",
2107
2186
  "padding-block": "0.125rem"
2108
2187
  }
2188
+ },
2189
+ "todo": {
2190
+ "skip-link": {
2191
+ "font-weight": 700
2192
+ },
2193
+ "link-list": {
2194
+ "link": {
2195
+ "hover": {
2196
+ "text-decoration": "underline"
2197
+ }
2198
+ }
2199
+ }
2200
+ },
2201
+ "basis": {
2202
+ "color": {
2203
+ "default": {
2204
+ "bg-document": "#fff",
2205
+ "color-document": "#0F172A",
2206
+ "color-subtle": "#334155",
2207
+ "border-subtle": "#94A3B8",
2208
+ "border-default": "#64748B",
2209
+ "bg-subtle": "#F1F5F9"
2210
+ },
2211
+ "highlight": {
2212
+ "bg-default": "#fff4db"
2213
+ }
2214
+ },
2215
+ "text": {
2216
+ "font-family": {
2217
+ "default": "'Fira Sans', Arial, Verdana, sans-serif"
2218
+ },
2219
+ "font-weight": {
2220
+ "default": 400,
2221
+ "bold": 700
2222
+ },
2223
+ "font-size": {
2224
+ "md": "1.25rem"
2225
+ },
2226
+ "line-height": {
2227
+ "md": "150%"
2228
+ }
2229
+ },
2230
+ "heading": {
2231
+ "color": "#154273",
2232
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2233
+ "font-weight": 700
2234
+ },
2235
+ "border-width": {
2236
+ "sm": "1px"
2237
+ },
2238
+ "box-shadow": {
2239
+ "md": {
2240
+ "x": 0,
2241
+ "y": 8,
2242
+ "blur": 16,
2243
+ "spread": 0,
2244
+ "color": "#64748B",
2245
+ "type": "dropShadow"
2246
+ }
2247
+ },
2248
+ "focus": {
2249
+ "outline-color": "#000",
2250
+ "inverse": {
2251
+ "outline-color": "#fff"
2252
+ },
2253
+ "outline-width": "2px"
2254
+ }
2109
2255
  }
2110
2256
  }