@rijkshuisstijl-community/design-tokens 1.0.0 → 1.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.
Files changed (54) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/_variables.scss +114 -4
  3. package/dist/index.css +114 -4
  4. package/dist/index.d.ts +111 -1
  5. package/dist/index.js +114 -4
  6. package/dist/index.json +113 -3
  7. package/dist/index.tokens.json +149 -3
  8. package/dist/root.css +114 -4
  9. package/dist/tokens.d.ts +147 -1
  10. package/dist/tokens.js +6284 -3880
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +724 -610
  12. package/dist/uitvoerend-mintgroen-focus/index.css +724 -610
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +612 -498
  14. package/dist/uitvoerend-mintgroen-focus/index.js +613 -499
  15. package/dist/uitvoerend-mintgroen-focus/index.json +612 -498
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1654 -1506
  17. package/dist/uitvoerend-mintgroen-focus/root.css +724 -610
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1573 -1425
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +22376 -19892
  20. package/dist/uitvoerend-violet/_variables.scss +723 -608
  21. package/dist/uitvoerend-violet/index.css +723 -608
  22. package/dist/uitvoerend-violet/index.d.ts +613 -498
  23. package/dist/uitvoerend-violet/index.js +614 -499
  24. package/dist/uitvoerend-violet/index.json +613 -498
  25. package/dist/uitvoerend-violet/index.tokens.json +1652 -1499
  26. package/dist/uitvoerend-violet/root.css +723 -608
  27. package/dist/uitvoerend-violet/tokens.d.ts +1545 -1392
  28. package/dist/uitvoerend-violet/tokens.js +22572 -20061
  29. package/dist/uitvoerend-violet-oud/_variables.scss +723 -608
  30. package/dist/uitvoerend-violet-oud/index.css +723 -608
  31. package/dist/uitvoerend-violet-oud/index.d.ts +613 -498
  32. package/dist/uitvoerend-violet-oud/index.js +614 -499
  33. package/dist/uitvoerend-violet-oud/index.json +613 -498
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +1645 -1492
  35. package/dist/uitvoerend-violet-oud/root.css +723 -608
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +1556 -1403
  37. package/dist/uitvoerend-violet-oud/tokens.js +23087 -20576
  38. package/dist/wetgevend/_variables.scss +723 -608
  39. package/dist/wetgevend/index.css +723 -608
  40. package/dist/wetgevend/index.d.ts +613 -498
  41. package/dist/wetgevend/index.js +614 -499
  42. package/dist/wetgevend/index.json +613 -498
  43. package/dist/wetgevend/index.tokens.json +1660 -1507
  44. package/dist/wetgevend/root.css +723 -608
  45. package/dist/wetgevend/tokens.d.ts +1572 -1419
  46. package/dist/wetgevend/tokens.js +23030 -20519
  47. package/figma/figma.tokens.json +571 -46
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +488 -12
  50. package/src/generated/themes.json +17956 -15972
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +4568 -4078
  52. package/src/generated/uitvoerend-violet/tokens.json +4468 -3970
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +4510 -4012
  54. package/src/generated/wetgevend/tokens.json +4478 -3980
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @rijkshuisstijl-community/design-tokens
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e533251: Split up NL and Utrecht components into separate component properties for easier toggling in Token Studio
8
+
9
+ ### Patch Changes
10
+
11
+ - 5925dd1: Added fallback so that the design tokens are usable with Utrecht based components
12
+
13
+ ## 1.0.1
14
+
15
+ ### Patch Changes
16
+
17
+ - b1da3ab: Dual focus outline, zwart met witte offset.
18
+ - 1dc03fb: Wekelijkse package updates voor Rijkshuisstijl-componenten en design tokens (week 10)
19
+
3
20
  ## 1.0.0
4
21
 
5
22
  ### Patch Changes
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 25 Feb 2025 08:18:00 GMT
3
+ // Generated on Wed, 19 Mar 2025 14:52:03 GMT
4
4
 
5
5
  $nl-number-badge-padding-block: 0.5rem;
6
6
  $nl-number-badge-padding-inline: 0.5rem;
@@ -50,6 +50,28 @@ $nl-heading-level-1-line-height: 125%;
50
50
  $nl-heading-level-1-font-weight: 700;
51
51
  $nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
52
52
  $nl-heading-level-1-color: #154273;
53
+ $nl-link-line-height: 150%;
54
+ $nl-link-font-size: 1.25rem;
55
+ $nl-link-font-weight: 400;
56
+ $nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
57
+ $nl-link-text-underline-offset: 0.125rem;
58
+ $nl-link-text-decoration-thickness: auto;
59
+ $nl-link-column-gap: 0.25rem;
60
+ $nl-link-icon-size: 24px;
61
+ $nl-link-icon-inset-block-start: 0.25rem;
62
+ $nl-link-text-decoration: underline;
63
+ $nl-link-visited-color: #42145f;
64
+ $nl-link-hover-text-decoration-thickness: auto;
65
+ $nl-link-hover-text-decoration: None;
66
+ $nl-link-hover-color: #01496c;
67
+ $nl-link-focus-text-decoration-thickness: auto;
68
+ $nl-link-focus-text-decoration: None;
69
+ $nl-link-focus-color: #01689b;
70
+ $nl-link-focus-background-color: transparent;
71
+ $nl-link-active-text-decoration: None;
72
+ $nl-link-active-color: #42145f;
73
+ $nl-link-text-decoration-color: #01689b;
74
+ $nl-link-color: #01689b;
53
75
  $nl-paragraph-lead-line-height: 150%;
54
76
  $nl-paragraph-lead-font-weight: 400;
55
77
  $nl-paragraph-lead-font-size: 1.5rem;
@@ -89,7 +111,7 @@ $nl-skip-link-line-height: 150%;
89
111
  $nl-skip-link-font-size: 1.25rem;
90
112
  $nl-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
91
113
  $nl-skip-link-font-weight: 700;
92
- $utrecht-focus-inverse-outline-color: transparant;
114
+ $utrecht-focus-inverse-outline-color: #fff;
93
115
  $utrecht-focus-outline-width: 2px;
94
116
  $utrecht-focus-outline-style: solid;
95
117
  $utrecht-focus-outline-offset: 0.125rem;
@@ -388,6 +410,19 @@ $utrecht-checkbox-background-color: #fff;
388
410
  $utrecht-checkbox-icon-size: 24px;
389
411
  $utrecht-checkbox-size: 24px;
390
412
  $utrecht-checkbox-border-radius: 2.5px;
413
+ $utrecht-number-badge-padding-block: 0.5rem;
414
+ $utrecht-number-badge-padding-inline: 0.5rem;
415
+ $utrecht-number-badge-color: #fff;
416
+ $utrecht-number-badge-border-color: transparent;
417
+ $utrecht-number-badge-background-color: #154273;
418
+ $utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
419
+ $utrecht-number-badge-border-radius: 999px;
420
+ $utrecht-number-badge-border-width: 0px;
421
+ $utrecht-number-badge-font-weight: 700;
422
+ $utrecht-number-badge-min-inline-size: 24px;
423
+ $utrecht-number-badge-min-block-size: 24px;
424
+ $utrecht-number-badge-line-height: 150%;
425
+ $utrecht-number-badge-font-size: 1.25rem;
391
426
  $utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
392
427
  $utrecht-form-fieldset-invalid-padding-inline-start: 0;
393
428
  $utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -447,6 +482,41 @@ $utrecht-form-field-label-color: #0F172A;
447
482
  $utrecht-form-label-font-weight: 700;
448
483
  $utrecht-form-label-font-size: 1.25rem;
449
484
  $utrecht-form-label-color: #0F172A;
485
+ $utrecht-heading-5-margin-block-start: 0;
486
+ $utrecht-heading-5-margin-block-end: 0;
487
+ $utrecht-heading-5-font-size: 1.25rem;
488
+ $utrecht-heading-5-line-height: 125%;
489
+ $utrecht-heading-5-font-weight: 700;
490
+ $utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
491
+ $utrecht-heading-5-color: #154273;
492
+ $utrecht-heading-4-margin-block-start: 0;
493
+ $utrecht-heading-4-margin-block-end: 0;
494
+ $utrecht-heading-4-font-size: 1.5rem;
495
+ $utrecht-heading-4-line-height: 125%;
496
+ $utrecht-heading-4-font-weight: 700;
497
+ $utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
498
+ $utrecht-heading-4-color: #154273;
499
+ $utrecht-heading-3-margin-block-start: 0;
500
+ $utrecht-heading-3-margin-block-end: 0;
501
+ $utrecht-heading-3-font-size: 1.875rem;
502
+ $utrecht-heading-3-line-height: 125%;
503
+ $utrecht-heading-3-font-weight: 700;
504
+ $utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
505
+ $utrecht-heading-3-color: #154273;
506
+ $utrecht-heading-2-margin-block-start: 0;
507
+ $utrecht-heading-2-margin-block-end: 0;
508
+ $utrecht-heading-2-font-size: 2.5rem;
509
+ $utrecht-heading-2-line-height: 125%;
510
+ $utrecht-heading-2-font-weight: 700;
511
+ $utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
512
+ $utrecht-heading-2-color: #154273;
513
+ $utrecht-heading-1-margin-block-start: 0;
514
+ $utrecht-heading-1-margin-block-end: 0;
515
+ $utrecht-heading-1-font-size: 3.125rem;
516
+ $utrecht-heading-1-line-height: 125%;
517
+ $utrecht-heading-1-font-weight: 700;
518
+ $utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
519
+ $utrecht-heading-1-color: #154273;
450
520
  $utrecht-link-line-height: 150%;
451
521
  $utrecht-link-font-size: 1.25rem;
452
522
  $utrecht-link-font-weight: 400;
@@ -488,6 +558,17 @@ $utrecht-ordered-list-margin-inline-start: 0.625rem;
488
558
  $utrecht-ordered-list-margin-block-start: 0.25rem;
489
559
  $utrecht-ordered-list-margin-block-end: 0.25rem;
490
560
  $utrecht-ordered-list-padding-inline-start: 1.5rem;
561
+ $utrecht-paragraph-lead-line-height: 150%;
562
+ $utrecht-paragraph-lead-font-weight: 400;
563
+ $utrecht-paragraph-lead-font-size: 1.5rem;
564
+ $utrecht-paragraph-lead-color: #0F172A;
565
+ $utrecht-paragraph-margin-block-start: 0;
566
+ $utrecht-paragraph-margin-block-end: 0;
567
+ $utrecht-paragraph-line-height: 150%;
568
+ $utrecht-paragraph-font-weight: 400;
569
+ $utrecht-paragraph-font-size: 1.25rem;
570
+ $utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
571
+ $utrecht-paragraph-color: #0F172A;
491
572
  $utrecht-pre-heading-font-size: 1rem;
492
573
  $utrecht-pre-heading-line-height: 125%;
493
574
  $utrecht-pre-heading-font-weight: 700;
@@ -569,6 +650,34 @@ $utrecht-separator-margin-block-start: 0.75rem;
569
650
  $utrecht-separator-margin-block-end: 0.75rem;
570
651
  $utrecht-separator-block-size: 2px;
571
652
  $utrecht-separator-color: #CBD5E1;
653
+ $utrecht-skip-link-text-underline-offset: 0.125rem;
654
+ $utrecht-skip-link-text-decoration: underline;
655
+ $utrecht-skip-link-box-block-end-shadow-color: #0000001a;
656
+ $utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
657
+ $utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
658
+ $utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
659
+ $utrecht-skip-link-box-block-end-shadow-offset-x: 0;
660
+ $utrecht-skip-link-border-width: 2px;
661
+ $utrecht-skip-link-color: #fff;
662
+ $utrecht-skip-link-border-color: transparent;
663
+ $utrecht-skip-link-background-color: #154273;
664
+ $utrecht-skip-link-focus-visible-outline-color: #000;
665
+ $utrecht-skip-link-focus-text-decoration: None;
666
+ $utrecht-skip-link-focus-color: #0F172A;
667
+ $utrecht-skip-link-focus-border-width: 2px;
668
+ $utrecht-skip-link-focus-border-style: solid;
669
+ $utrecht-skip-link-focus-border-color: #154273;
670
+ $utrecht-skip-link-focus-background-color: #fff;
671
+ $utrecht-skip-link-padding-inline-start: 1rem;
672
+ $utrecht-skip-link-padding-inline-end: 1rem;
673
+ $utrecht-skip-link-padding-block-start: 0.75rem;
674
+ $utrecht-skip-link-padding-block-end: 0.75rem;
675
+ $utrecht-skip-link-min-inline-size: 48px;
676
+ $utrecht-skip-link-min-block-size: 48px;
677
+ $utrecht-skip-link-line-height: 150%;
678
+ $utrecht-skip-link-font-size: 1.25rem;
679
+ $utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
680
+ $utrecht-skip-link-font-weight: 700;
572
681
  $utrecht-table-font-size: 1.25rem;
573
682
  $utrecht-table-container-box-inline-start-shadow-color: #0000001a;
574
683
  $utrecht-table-container-box-inline-start-shadow-spread: 0;
@@ -954,6 +1063,7 @@ $rhc-card-as-link-horizontal-background-color: #154273;
954
1063
  $rhc-card-as-link-heading-font-weight: 700;
955
1064
  $rhc-card-as-link-heading-font-size: 1.5rem;
956
1065
  $rhc-card-as-link-heading-padding-block-start: 0.5rem;
1066
+ $rhc-card-as-link-heading-color: #154273;
957
1067
  $rhc-card-as-link-full-bleed-opacity: 0.5;
958
1068
  $rhc-card-as-link-full-bleed-color: #fff;
959
1069
  $rhc-card-as-link-full-bleed-border-color: transparent;
@@ -969,14 +1079,14 @@ $rhc-card-as-link-padding-inline-start: 1rem;
969
1079
  $rhc-card-as-link-padding-inline-end: 1rem;
970
1080
  $rhc-card-as-link-padding-block-start: 1rem;
971
1081
  $rhc-card-as-link-padding-block-end: 1rem;
972
- $rhc-card-as-link-metadata-color: #0F172A;
1082
+ $rhc-card-as-link-metadata-color: #334155;
973
1083
  $rhc-card-as-link-link-focus-text-decoration: none;
974
1084
  $rhc-card-as-link-link-hover-text-decoration: none;
975
1085
  $rhc-card-as-link-link-active-text-decoration: none;
976
1086
  $rhc-card-as-link-link-text-decoration: underline;
977
1087
  $rhc-card-as-link-link-color: #01689b;
978
1088
  $rhc-card-as-link-icon-size: 24px;
979
- $rhc-card-as-link-icon-color: #0F172A;
1089
+ $rhc-card-as-link-icon-color: #154273;
980
1090
  $rhc-card-as-link-inline-size: 328px;
981
1091
  $rhc-card-as-link-column-gap: 1rem;
982
1092
  $rhc-card-as-link-color: #0F172A;
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 25 Feb 2025 08:18:00 GMT
3
+ * Generated on Wed, 19 Mar 2025 14:52:03 GMT
4
4
  */
5
5
 
6
6
  .rhc-theme {
@@ -52,6 +52,28 @@
52
52
  --nl-heading-level-1-font-weight: 700;
53
53
  --nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
54
54
  --nl-heading-level-1-color: #154273;
55
+ --nl-link-line-height: 150%;
56
+ --nl-link-font-size: 1.25rem;
57
+ --nl-link-font-weight: 400;
58
+ --nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
59
+ --nl-link-text-underline-offset: 0.125rem;
60
+ --nl-link-text-decoration-thickness: auto;
61
+ --nl-link-column-gap: 0.25rem;
62
+ --nl-link-icon-size: 24px;
63
+ --nl-link-icon-inset-block-start: 0.25rem;
64
+ --nl-link-text-decoration: underline;
65
+ --nl-link-visited-color: #42145f;
66
+ --nl-link-hover-text-decoration-thickness: auto;
67
+ --nl-link-hover-text-decoration: None;
68
+ --nl-link-hover-color: #01496c;
69
+ --nl-link-focus-text-decoration-thickness: auto;
70
+ --nl-link-focus-text-decoration: None;
71
+ --nl-link-focus-color: #01689b;
72
+ --nl-link-focus-background-color: transparent;
73
+ --nl-link-active-text-decoration: None;
74
+ --nl-link-active-color: #42145f;
75
+ --nl-link-text-decoration-color: #01689b;
76
+ --nl-link-color: #01689b;
55
77
  --nl-paragraph-lead-line-height: 150%;
56
78
  --nl-paragraph-lead-font-weight: 400;
57
79
  --nl-paragraph-lead-font-size: 1.5rem;
@@ -91,7 +113,7 @@
91
113
  --nl-skip-link-font-size: 1.25rem;
92
114
  --nl-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
93
115
  --nl-skip-link-font-weight: 700;
94
- --utrecht-focus-inverse-outline-color: transparant;
116
+ --utrecht-focus-inverse-outline-color: #fff;
95
117
  --utrecht-focus-outline-width: 2px;
96
118
  --utrecht-focus-outline-style: solid;
97
119
  --utrecht-focus-outline-offset: 0.125rem;
@@ -390,6 +412,19 @@
390
412
  --utrecht-checkbox-icon-size: 24px;
391
413
  --utrecht-checkbox-size: 24px;
392
414
  --utrecht-checkbox-border-radius: 2.5px;
415
+ --utrecht-number-badge-padding-block: 0.5rem;
416
+ --utrecht-number-badge-padding-inline: 0.5rem;
417
+ --utrecht-number-badge-color: #fff;
418
+ --utrecht-number-badge-border-color: transparent;
419
+ --utrecht-number-badge-background-color: #154273;
420
+ --utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
421
+ --utrecht-number-badge-border-radius: 999px;
422
+ --utrecht-number-badge-border-width: 0px;
423
+ --utrecht-number-badge-font-weight: 700;
424
+ --utrecht-number-badge-min-inline-size: 24px;
425
+ --utrecht-number-badge-min-block-size: 24px;
426
+ --utrecht-number-badge-line-height: 150%;
427
+ --utrecht-number-badge-font-size: 1.25rem;
393
428
  --utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
394
429
  --utrecht-form-fieldset-invalid-padding-inline-start: 0;
395
430
  --utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -449,6 +484,41 @@
449
484
  --utrecht-form-label-font-weight: 700;
450
485
  --utrecht-form-label-font-size: 1.25rem;
451
486
  --utrecht-form-label-color: #0F172A;
487
+ --utrecht-heading-5-margin-block-start: 0;
488
+ --utrecht-heading-5-margin-block-end: 0;
489
+ --utrecht-heading-5-font-size: 1.25rem;
490
+ --utrecht-heading-5-line-height: 125%;
491
+ --utrecht-heading-5-font-weight: 700;
492
+ --utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
493
+ --utrecht-heading-5-color: #154273;
494
+ --utrecht-heading-4-margin-block-start: 0;
495
+ --utrecht-heading-4-margin-block-end: 0;
496
+ --utrecht-heading-4-font-size: 1.5rem;
497
+ --utrecht-heading-4-line-height: 125%;
498
+ --utrecht-heading-4-font-weight: 700;
499
+ --utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
500
+ --utrecht-heading-4-color: #154273;
501
+ --utrecht-heading-3-margin-block-start: 0;
502
+ --utrecht-heading-3-margin-block-end: 0;
503
+ --utrecht-heading-3-font-size: 1.875rem;
504
+ --utrecht-heading-3-line-height: 125%;
505
+ --utrecht-heading-3-font-weight: 700;
506
+ --utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
507
+ --utrecht-heading-3-color: #154273;
508
+ --utrecht-heading-2-margin-block-start: 0;
509
+ --utrecht-heading-2-margin-block-end: 0;
510
+ --utrecht-heading-2-font-size: 2.5rem;
511
+ --utrecht-heading-2-line-height: 125%;
512
+ --utrecht-heading-2-font-weight: 700;
513
+ --utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
514
+ --utrecht-heading-2-color: #154273;
515
+ --utrecht-heading-1-margin-block-start: 0;
516
+ --utrecht-heading-1-margin-block-end: 0;
517
+ --utrecht-heading-1-font-size: 3.125rem;
518
+ --utrecht-heading-1-line-height: 125%;
519
+ --utrecht-heading-1-font-weight: 700;
520
+ --utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
521
+ --utrecht-heading-1-color: #154273;
452
522
  --utrecht-link-line-height: 150%;
453
523
  --utrecht-link-font-size: 1.25rem;
454
524
  --utrecht-link-font-weight: 400;
@@ -490,6 +560,17 @@
490
560
  --utrecht-ordered-list-margin-block-start: 0.25rem;
491
561
  --utrecht-ordered-list-margin-block-end: 0.25rem;
492
562
  --utrecht-ordered-list-padding-inline-start: 1.5rem;
563
+ --utrecht-paragraph-lead-line-height: 150%;
564
+ --utrecht-paragraph-lead-font-weight: 400;
565
+ --utrecht-paragraph-lead-font-size: 1.5rem;
566
+ --utrecht-paragraph-lead-color: #0F172A;
567
+ --utrecht-paragraph-margin-block-start: 0;
568
+ --utrecht-paragraph-margin-block-end: 0;
569
+ --utrecht-paragraph-line-height: 150%;
570
+ --utrecht-paragraph-font-weight: 400;
571
+ --utrecht-paragraph-font-size: 1.25rem;
572
+ --utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
573
+ --utrecht-paragraph-color: #0F172A;
493
574
  --utrecht-pre-heading-font-size: 1rem;
494
575
  --utrecht-pre-heading-line-height: 125%;
495
576
  --utrecht-pre-heading-font-weight: 700;
@@ -571,6 +652,34 @@
571
652
  --utrecht-separator-margin-block-end: 0.75rem;
572
653
  --utrecht-separator-block-size: 2px;
573
654
  --utrecht-separator-color: #CBD5E1;
655
+ --utrecht-skip-link-text-underline-offset: 0.125rem;
656
+ --utrecht-skip-link-text-decoration: underline;
657
+ --utrecht-skip-link-box-block-end-shadow-color: #0000001a;
658
+ --utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
659
+ --utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
660
+ --utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
661
+ --utrecht-skip-link-box-block-end-shadow-offset-x: 0;
662
+ --utrecht-skip-link-border-width: 2px;
663
+ --utrecht-skip-link-color: #fff;
664
+ --utrecht-skip-link-border-color: transparent;
665
+ --utrecht-skip-link-background-color: #154273;
666
+ --utrecht-skip-link-focus-visible-outline-color: #000;
667
+ --utrecht-skip-link-focus-text-decoration: None;
668
+ --utrecht-skip-link-focus-color: #0F172A;
669
+ --utrecht-skip-link-focus-border-width: 2px;
670
+ --utrecht-skip-link-focus-border-style: solid;
671
+ --utrecht-skip-link-focus-border-color: #154273;
672
+ --utrecht-skip-link-focus-background-color: #fff;
673
+ --utrecht-skip-link-padding-inline-start: 1rem;
674
+ --utrecht-skip-link-padding-inline-end: 1rem;
675
+ --utrecht-skip-link-padding-block-start: 0.75rem;
676
+ --utrecht-skip-link-padding-block-end: 0.75rem;
677
+ --utrecht-skip-link-min-inline-size: 48px;
678
+ --utrecht-skip-link-min-block-size: 48px;
679
+ --utrecht-skip-link-line-height: 150%;
680
+ --utrecht-skip-link-font-size: 1.25rem;
681
+ --utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
682
+ --utrecht-skip-link-font-weight: 700;
574
683
  --utrecht-table-font-size: 1.25rem;
575
684
  --utrecht-table-container-box-inline-start-shadow-color: #0000001a;
576
685
  --utrecht-table-container-box-inline-start-shadow-spread: 0;
@@ -956,6 +1065,7 @@
956
1065
  --rhc-card-as-link-heading-font-weight: 700;
957
1066
  --rhc-card-as-link-heading-font-size: 1.5rem;
958
1067
  --rhc-card-as-link-heading-padding-block-start: 0.5rem;
1068
+ --rhc-card-as-link-heading-color: #154273;
959
1069
  --rhc-card-as-link-full-bleed-opacity: 0.5;
960
1070
  --rhc-card-as-link-full-bleed-color: #fff;
961
1071
  --rhc-card-as-link-full-bleed-border-color: transparent;
@@ -971,14 +1081,14 @@
971
1081
  --rhc-card-as-link-padding-inline-end: 1rem;
972
1082
  --rhc-card-as-link-padding-block-start: 1rem;
973
1083
  --rhc-card-as-link-padding-block-end: 1rem;
974
- --rhc-card-as-link-metadata-color: #0F172A;
1084
+ --rhc-card-as-link-metadata-color: #334155;
975
1085
  --rhc-card-as-link-link-focus-text-decoration: none;
976
1086
  --rhc-card-as-link-link-hover-text-decoration: none;
977
1087
  --rhc-card-as-link-link-active-text-decoration: none;
978
1088
  --rhc-card-as-link-link-text-decoration: underline;
979
1089
  --rhc-card-as-link-link-color: #01689b;
980
1090
  --rhc-card-as-link-icon-size: 24px;
981
- --rhc-card-as-link-icon-color: #0F172A;
1091
+ --rhc-card-as-link-icon-color: #154273;
982
1092
  --rhc-card-as-link-inline-size: 328px;
983
1093
  --rhc-card-as-link-column-gap: 1rem;
984
1094
  --rhc-card-as-link-color: #0F172A;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 25 Feb 2025 08:18:00 GMT
3
+ * Generated on Wed, 19 Mar 2025 14:52:03 GMT
4
4
  */
5
5
 
6
6
  export const rhcSubNavBarBackgroundColor : string;
@@ -245,6 +245,7 @@ export const rhcCardAsLinkFullBleedBackgroundColor : string;
245
245
  export const rhcCardAsLinkFullBleedBorderColor : string;
246
246
  export const rhcCardAsLinkFullBleedColor : string;
247
247
  export const rhcCardAsLinkFullBleedOpacity : number;
248
+ export const rhcCardAsLinkHeadingColor : string;
248
249
  export const rhcCardAsLinkHeadingPaddingBlockStart : string;
249
250
  export const rhcCardAsLinkHeadingFontSize : string;
250
251
  export const rhcCardAsLinkHeadingFontWeight : number;
@@ -630,6 +631,34 @@ export const utrechtTableContainerBoxInlineStartShadowBlur : string;
630
631
  export const utrechtTableContainerBoxInlineStartShadowSpread : number;
631
632
  export const utrechtTableContainerBoxInlineStartShadowColor : string;
632
633
  export const utrechtTableFontSize : string;
634
+ export const utrechtSkipLinkFontWeight : number;
635
+ export const utrechtSkipLinkFontFamily : string;
636
+ export const utrechtSkipLinkFontSize : string;
637
+ export const utrechtSkipLinkLineHeight : string;
638
+ export const utrechtSkipLinkMinBlockSize : string;
639
+ export const utrechtSkipLinkMinInlineSize : string;
640
+ export const utrechtSkipLinkPaddingBlockEnd : string;
641
+ export const utrechtSkipLinkPaddingBlockStart : string;
642
+ export const utrechtSkipLinkPaddingInlineEnd : string;
643
+ export const utrechtSkipLinkPaddingInlineStart : string;
644
+ export const utrechtSkipLinkFocusBackgroundColor : string;
645
+ export const utrechtSkipLinkFocusBorderColor : string;
646
+ export const utrechtSkipLinkFocusBorderStyle : string;
647
+ export const utrechtSkipLinkFocusBorderWidth : string;
648
+ export const utrechtSkipLinkFocusColor : string;
649
+ export const utrechtSkipLinkFocusTextDecoration : string;
650
+ export const utrechtSkipLinkFocusVisibleOutlineColor : string;
651
+ export const utrechtSkipLinkBackgroundColor : string;
652
+ export const utrechtSkipLinkBorderColor : string;
653
+ export const utrechtSkipLinkColor : string;
654
+ export const utrechtSkipLinkBorderWidth : string;
655
+ export const utrechtSkipLinkBoxBlockEndShadowOffsetX : number;
656
+ export const utrechtSkipLinkBoxBlockEndShadowOffsetY : string;
657
+ export const utrechtSkipLinkBoxBlockEndShadowBlurRadius : string;
658
+ export const utrechtSkipLinkBoxBlockEndShadowSpreadRadius : number;
659
+ export const utrechtSkipLinkBoxBlockEndShadowColor : string;
660
+ export const utrechtSkipLinkTextDecoration : string;
661
+ export const utrechtSkipLinkTextUnderlineOffset : string;
633
662
  export const utrechtSeparatorColor : string;
634
663
  export const utrechtSeparatorBlockSize : string;
635
664
  export const utrechtSeparatorMarginBlockEnd : string;
@@ -711,6 +740,17 @@ export const utrechtPreHeadingFontFamily : string;
711
740
  export const utrechtPreHeadingFontWeight : number;
712
741
  export const utrechtPreHeadingLineHeight : string;
713
742
  export const utrechtPreHeadingFontSize : string;
743
+ export const utrechtParagraphColor : string;
744
+ export const utrechtParagraphFontFamily : string;
745
+ export const utrechtParagraphFontSize : string;
746
+ export const utrechtParagraphFontWeight : number;
747
+ export const utrechtParagraphLineHeight : string;
748
+ export const utrechtParagraphMarginBlockEnd : number;
749
+ export const utrechtParagraphMarginBlockStart : number;
750
+ export const utrechtParagraphLeadColor : string;
751
+ export const utrechtParagraphLeadFontSize : string;
752
+ export const utrechtParagraphLeadFontWeight : number;
753
+ export const utrechtParagraphLeadLineHeight : string;
714
754
  export const utrechtOrderedListPaddingInlineStart : string;
715
755
  export const utrechtOrderedListMarginBlockEnd : string;
716
756
  export const utrechtOrderedListMarginBlockStart : string;
@@ -752,6 +792,41 @@ export const utrechtLinkFontFamily : string;
752
792
  export const utrechtLinkFontWeight : number;
753
793
  export const utrechtLinkFontSize : string;
754
794
  export const utrechtLinkLineHeight : string;
795
+ export const utrechtHeading1Color : string;
796
+ export const utrechtHeading1FontFamily : string;
797
+ export const utrechtHeading1FontWeight : number;
798
+ export const utrechtHeading1LineHeight : string;
799
+ export const utrechtHeading1FontSize : string;
800
+ export const utrechtHeading1MarginBlockEnd : number;
801
+ export const utrechtHeading1MarginBlockStart : number;
802
+ export const utrechtHeading2Color : string;
803
+ export const utrechtHeading2FontFamily : string;
804
+ export const utrechtHeading2FontWeight : number;
805
+ export const utrechtHeading2LineHeight : string;
806
+ export const utrechtHeading2FontSize : string;
807
+ export const utrechtHeading2MarginBlockEnd : number;
808
+ export const utrechtHeading2MarginBlockStart : number;
809
+ export const utrechtHeading3Color : string;
810
+ export const utrechtHeading3FontFamily : string;
811
+ export const utrechtHeading3FontWeight : number;
812
+ export const utrechtHeading3LineHeight : string;
813
+ export const utrechtHeading3FontSize : string;
814
+ export const utrechtHeading3MarginBlockEnd : number;
815
+ export const utrechtHeading3MarginBlockStart : number;
816
+ export const utrechtHeading4Color : string;
817
+ export const utrechtHeading4FontFamily : string;
818
+ export const utrechtHeading4FontWeight : number;
819
+ export const utrechtHeading4LineHeight : string;
820
+ export const utrechtHeading4FontSize : string;
821
+ export const utrechtHeading4MarginBlockEnd : number;
822
+ export const utrechtHeading4MarginBlockStart : number;
823
+ export const utrechtHeading5Color : string;
824
+ export const utrechtHeading5FontFamily : string;
825
+ export const utrechtHeading5FontWeight : number;
826
+ export const utrechtHeading5LineHeight : string;
827
+ export const utrechtHeading5FontSize : string;
828
+ export const utrechtHeading5MarginBlockEnd : number;
829
+ export const utrechtHeading5MarginBlockStart : number;
755
830
  export const utrechtFormLabelColor : string;
756
831
  export const utrechtFormLabelFontSize : string;
757
832
  export const utrechtFormLabelFontWeight : number;
@@ -811,6 +886,19 @@ export const utrechtFormFieldsetSectionColor : string;
811
886
  export const utrechtFormFieldsetInvalidBorderInlineStartColor : string;
812
887
  export const utrechtFormFieldsetInvalidPaddingInlineStart : number;
813
888
  export const utrechtFormFieldsetInvalidBorderInlineStartWidth : string;
889
+ export const utrechtNumberBadgeFontSize : string;
890
+ export const utrechtNumberBadgeLineHeight : string;
891
+ export const utrechtNumberBadgeMinBlockSize : string;
892
+ export const utrechtNumberBadgeMinInlineSize : string;
893
+ export const utrechtNumberBadgeFontWeight : number;
894
+ export const utrechtNumberBadgeBorderWidth : string;
895
+ export const utrechtNumberBadgeBorderRadius : string;
896
+ export const utrechtNumberBadgeFontFamily : string;
897
+ export const utrechtNumberBadgeBackgroundColor : string;
898
+ export const utrechtNumberBadgeBorderColor : string;
899
+ export const utrechtNumberBadgeColor : string;
900
+ export const utrechtNumberBadgePaddingInline : string;
901
+ export const utrechtNumberBadgePaddingBlock : string;
814
902
  export const utrechtCheckboxBorderRadius : string;
815
903
  export const utrechtCheckboxSize : string;
816
904
  export const utrechtCheckboxIconSize : string;
@@ -1149,6 +1237,28 @@ export const nlParagraphLeadColor : string;
1149
1237
  export const nlParagraphLeadFontSize : string;
1150
1238
  export const nlParagraphLeadFontWeight : number;
1151
1239
  export const nlParagraphLeadLineHeight : string;
1240
+ export const nlLinkColor : string;
1241
+ export const nlLinkTextDecorationColor : string;
1242
+ export const nlLinkActiveColor : string;
1243
+ export const nlLinkActiveTextDecoration : string;
1244
+ export const nlLinkFocusBackgroundColor : string;
1245
+ export const nlLinkFocusColor : string;
1246
+ export const nlLinkFocusTextDecoration : string;
1247
+ export const nlLinkFocusTextDecorationThickness : string;
1248
+ export const nlLinkHoverColor : string;
1249
+ export const nlLinkHoverTextDecoration : string;
1250
+ export const nlLinkHoverTextDecorationThickness : string;
1251
+ export const nlLinkVisitedColor : string;
1252
+ export const nlLinkTextDecoration : string;
1253
+ export const nlLinkIconInsetBlockStart : string;
1254
+ export const nlLinkIconSize : string;
1255
+ export const nlLinkColumnGap : string;
1256
+ export const nlLinkTextDecorationThickness : string;
1257
+ export const nlLinkTextUnderlineOffset : string;
1258
+ export const nlLinkFontFamily : string;
1259
+ export const nlLinkFontWeight : number;
1260
+ export const nlLinkFontSize : string;
1261
+ export const nlLinkLineHeight : string;
1152
1262
  export const nlHeadingLevel1Color : string;
1153
1263
  export const nlHeadingLevel1FontFamily : string;
1154
1264
  export const nlHeadingLevel1FontWeight : number;