@rijkshuisstijl-community/design-tokens 4.1.0 → 5.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 (105) hide show
  1. package/CHANGELOG.md +45 -5
  2. package/README.md +2 -2
  3. package/dist/_variables.scss +72 -126
  4. package/dist/index.css +72 -126
  5. package/dist/index.d.ts +71 -125
  6. package/dist/index.js +72 -126
  7. package/dist/index.json +71 -125
  8. package/dist/index.tokens.json +137 -175
  9. package/dist/koop/_variables.scss +50 -145
  10. package/dist/koop/index.css +50 -145
  11. package/dist/koop/index.d.ts +48 -143
  12. package/dist/koop/index.js +50 -145
  13. package/dist/koop/index.json +50 -145
  14. package/dist/koop/index.tokens.json +99 -202
  15. package/dist/koop/root.css +50 -145
  16. package/dist/koop/tokens.d.ts +94 -197
  17. package/dist/koop/tokens.js +1543 -3636
  18. package/dist/root.css +72 -126
  19. package/dist/tokens.d.ts +135 -173
  20. package/dist/tokens.js +7067 -8209
  21. package/dist/uitvoerend-groen/_variables.scss +56 -153
  22. package/dist/uitvoerend-groen/index.css +56 -153
  23. package/dist/uitvoerend-groen/index.d.ts +55 -152
  24. package/dist/uitvoerend-groen/index.js +56 -153
  25. package/dist/uitvoerend-groen/index.json +56 -153
  26. package/dist/uitvoerend-groen/index.tokens.json +103 -212
  27. package/dist/uitvoerend-groen/root.css +56 -153
  28. package/dist/uitvoerend-groen/tokens.d.ts +99 -208
  29. package/dist/uitvoerend-groen/tokens.js +1507 -3650
  30. package/dist/uitvoerend-hemelblauw/_variables.scss +56 -153
  31. package/dist/uitvoerend-hemelblauw/index.css +56 -153
  32. package/dist/uitvoerend-hemelblauw/index.d.ts +55 -152
  33. package/dist/uitvoerend-hemelblauw/index.js +56 -153
  34. package/dist/uitvoerend-hemelblauw/index.json +56 -153
  35. package/dist/uitvoerend-hemelblauw/index.tokens.json +103 -212
  36. package/dist/uitvoerend-hemelblauw/root.css +56 -153
  37. package/dist/uitvoerend-hemelblauw/tokens.d.ts +99 -208
  38. package/dist/uitvoerend-hemelblauw/tokens.js +1507 -3650
  39. package/dist/uitvoerend-mintgroen/_variables.scss +56 -153
  40. package/dist/uitvoerend-mintgroen/index.css +56 -153
  41. package/dist/uitvoerend-mintgroen/index.d.ts +55 -152
  42. package/dist/uitvoerend-mintgroen/index.js +56 -153
  43. package/dist/uitvoerend-mintgroen/index.json +56 -153
  44. package/dist/uitvoerend-mintgroen/index.tokens.json +103 -212
  45. package/dist/uitvoerend-mintgroen/root.css +56 -153
  46. package/dist/uitvoerend-mintgroen/tokens.d.ts +99 -208
  47. package/dist/uitvoerend-mintgroen/tokens.js +1507 -3650
  48. package/dist/uitvoerend-oranje/_variables.scss +56 -153
  49. package/dist/uitvoerend-oranje/index.css +56 -153
  50. package/dist/uitvoerend-oranje/index.d.ts +55 -152
  51. package/dist/uitvoerend-oranje/index.js +56 -153
  52. package/dist/uitvoerend-oranje/index.json +56 -153
  53. package/dist/uitvoerend-oranje/index.tokens.json +103 -212
  54. package/dist/uitvoerend-oranje/root.css +56 -153
  55. package/dist/uitvoerend-oranje/tokens.d.ts +99 -208
  56. package/dist/uitvoerend-oranje/tokens.js +1507 -3650
  57. package/dist/uitvoerend-paars/_variables.scss +56 -153
  58. package/dist/uitvoerend-paars/index.css +56 -153
  59. package/dist/uitvoerend-paars/index.d.ts +55 -152
  60. package/dist/uitvoerend-paars/index.js +56 -153
  61. package/dist/uitvoerend-paars/index.json +56 -153
  62. package/dist/uitvoerend-paars/index.tokens.json +103 -212
  63. package/dist/uitvoerend-paars/root.css +56 -153
  64. package/dist/uitvoerend-paars/tokens.d.ts +99 -208
  65. package/dist/uitvoerend-paars/tokens.js +1507 -3650
  66. package/dist/uitvoerend-violet/_variables.scss +56 -153
  67. package/dist/uitvoerend-violet/index.css +56 -153
  68. package/dist/uitvoerend-violet/index.d.ts +55 -152
  69. package/dist/uitvoerend-violet/index.js +56 -153
  70. package/dist/uitvoerend-violet/index.json +56 -153
  71. package/dist/uitvoerend-violet/index.tokens.json +103 -212
  72. package/dist/uitvoerend-violet/root.css +56 -153
  73. package/dist/uitvoerend-violet/tokens.d.ts +99 -208
  74. package/dist/uitvoerend-violet/tokens.js +1507 -3650
  75. package/dist/uitvoerend-violet-oud/_variables.scss +56 -153
  76. package/dist/uitvoerend-violet-oud/index.css +56 -153
  77. package/dist/uitvoerend-violet-oud/index.d.ts +55 -152
  78. package/dist/uitvoerend-violet-oud/index.js +56 -153
  79. package/dist/uitvoerend-violet-oud/index.json +56 -153
  80. package/dist/uitvoerend-violet-oud/index.tokens.json +103 -212
  81. package/dist/uitvoerend-violet-oud/root.css +56 -153
  82. package/dist/uitvoerend-violet-oud/tokens.d.ts +99 -208
  83. package/dist/uitvoerend-violet-oud/tokens.js +1507 -3650
  84. package/dist/wetgevend/_variables.scss +56 -153
  85. package/dist/wetgevend/index.css +56 -153
  86. package/dist/wetgevend/index.d.ts +55 -152
  87. package/dist/wetgevend/index.js +56 -153
  88. package/dist/wetgevend/index.json +56 -153
  89. package/dist/wetgevend/index.tokens.json +103 -212
  90. package/dist/wetgevend/root.css +56 -153
  91. package/dist/wetgevend/tokens.d.ts +99 -208
  92. package/dist/wetgevend/tokens.js +1507 -3650
  93. package/figma/figma.tokens.json +291 -640
  94. package/package.json +2 -2
  95. package/src/generated/base.tokens.json +447 -661
  96. package/src/generated/koop/tokens.json +235 -637
  97. package/src/generated/themes.json +2161 -5875
  98. package/src/generated/uitvoerend-groen/tokens.json +246 -660
  99. package/src/generated/uitvoerend-hemelblauw/tokens.json +246 -660
  100. package/src/generated/uitvoerend-mintgroen/tokens.json +246 -660
  101. package/src/generated/uitvoerend-oranje/tokens.json +246 -660
  102. package/src/generated/uitvoerend-paars/tokens.json +246 -660
  103. package/src/generated/uitvoerend-violet/tokens.json +246 -660
  104. package/src/generated/uitvoerend-violet-oud/tokens.json +246 -660
  105. package/src/generated/wetgevend/tokens.json +246 -660
package/CHANGELOG.md CHANGED
@@ -1,5 +1,50 @@
1
1
  # @rijkshuisstijl-community/design-tokens
2
2
 
3
+ ## 5.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 0057047: chore: remove unused and deprecated Link tokens
8
+ - Use NL link component as cleanly as possible.
9
+ - Do not support NL `disabled` prop/state for Link.
10
+ - Add support for Icon in Link.
11
+ - Replace "utrecht" with "rhc" in markdown documentation for Link.
12
+
13
+ - f89c576: Removed the following tokens for unordered list as these are inherited from the document:
14
+ --utrecht-unordered-list-color
15
+ --utrecht-unordered-list-marker-border-color
16
+ --utrecht-unordered-list-font-weight
17
+ --utrecht-unordered-list-font-family
18
+
19
+ Added the following token to control nested lists
20
+ --rhc-unordered-list-nested-margin-inline-start
21
+
22
+ Nested lists now have the same marker as root lists to have less going on
23
+
24
+ - f24efc1: Clear deprecated tokens for Breadcrumb
25
+
26
+ ### Minor Changes
27
+
28
+ - 93b9259: Add new Card component for flexible card display
29
+
30
+ **WHAT**: Added a new `Card` component alongside the existing `CardAsLink` component
31
+ **WHY**: The existing `CardAsLink` was too restrictive for cases where cards don't need to be clickable links
32
+ **HOW**: Import and use the new `Card` component for non-interactive card displays
33
+
34
+ ### Patch Changes
35
+
36
+ - 2828f3e: chore: Remove unused deprecated paragraph token
37
+ - cd3758e: Cleaned up deprecated tokens for ordered list to be more in line with the base component used in Utrecht.
38
+ Tokens that wont be applied to ordered list anymore:
39
+ --utrecht-ordered-list-color
40
+ --utrecht-ordered-list-font-weight
41
+ --utrecht-ordered-list-margin-inline-start
42
+ - bf73b50: Fix hot reloading voor local development.
43
+ - 6b3a5aa: Remove fixed width from Card As Link component to delegate sizing to layout
44
+ - fe88675: Update heading dependency and removed unused tokens
45
+ - acca7a7: Removed unused deprecated tokens
46
+ - 04a4ec5: updated design tokens to be set on the common layer instead of component layer
47
+
3
48
  ## 4.1.0
4
49
 
5
50
  ### Minor Changes
@@ -50,7 +95,6 @@
50
95
  - Token update unordered list
51
96
  - 83f2985: Vervang niet bestaand Design Token type "borderStyle" met "other".
52
97
  - 860e977: Link tokens bijgewerkt:
53
-
54
98
  - `nl.link.text-decoration-color` verwijderd zodat de underline meekleurt met de state kleur
55
99
  - `nl.link.hover.text-decoration` hernoemd naar `nl.link.hover.text-decoration-line` zodat de underline bij hover verdwijnt
56
100
 
@@ -66,7 +110,6 @@
66
110
  ### Major Changes
67
111
 
68
112
  - 04beca8: Breaking changes: toevoeging en aanpassing van font-weight tokens op de common laag.
69
-
70
113
  - De paragraph font tokens op de common-laag zijn hernoemd naar `body`, zodat ze breder toepasbaar zijn.
71
114
  - De token `rhc.paragraph.small` is verwijderd.
72
115
  - Verwijzingen naar `rhc.paragraph.small` zijn vervangen door `rhc.body.default`, wat betekent dat de `font-size` van componenten als `counterbadge`, `navigation-list` en `message-list` is gewijzigd van 18px naar 20px.
@@ -109,20 +152,17 @@
109
152
  Deprecated @rijkshuisstijl-community/rivm-design-tokens
110
153
  These themes are now found in: @rijkshuisstijl-community/design-tokens
111
154
  - 5209b0c: ### Nieuwe tokens
112
-
113
155
  - `rhc.color.foreground.on-light-color` toegevoegd
114
156
  - Rounded corner tokens toegevoegd
115
157
  - Nieuwe tokenset `components/blockquote` toegevoegd
116
158
 
117
159
  ### Hernoemingen en refactor
118
-
119
160
  - `rhc.color.foregrond.onEmphisis` hernoemd naar `rhc.color.foreground.on-dark-color`. (oude naam blijft tijdelijk beschikbaar om bugs te voorkomen)
120
161
  - `rhc.border-radius.keep` vervangen door de nieuwe rounded corner tokens
121
162
  - Tokenset `common/keep` hernoemd naar `common/keep-oud`
122
163
  - Tokenset `components/blockquote` verplaatst naar `components/blockquote-oud` (legacy totdat het component is geüpdatet)
123
164
 
124
165
  ### Overige
125
-
126
166
  - Stijl en design tokens voor het `blockquote` component geüpdatet
127
167
 
128
168
  ## 1.2.0
package/README.md CHANGED
@@ -11,7 +11,7 @@ Dit project maakt deel uit van een samenwerkingsverband om [NL Design System](ht
11
11
  Nederland (bijvoorbeeld: [Belastingdienst](https://www.belastingdienst.nl/), [DUO](https://www.duo.nl), [Logius](http://logius.nl), [SVB](https://www.svb.nl/))
12
12
  en degenen die door hen zijn ingehuurd voor het ontwikkelen van websites en apps, kunnen via dit project samenwerken.
13
13
 
14
- # Tokens gebruiken in eigen project
14
+ ## Tokens gebruiken in eigen project
15
15
 
16
16
  Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community tokens in je project kan toepassen.
17
17
 
@@ -42,7 +42,7 @@ Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community token
42
42
  </body>
43
43
  ```
44
44
 
45
- # Nieuw thema toevoegen
45
+ ## Nieuw thema toevoegen
46
46
 
47
47
  Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd
48
48
 
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 01 Aug 2025 12:51:45 GMT
3
+ // Generated on Fri, 22 Aug 2025 10:20:29 GMT
4
4
 
5
5
  $basis-focus-outline-width: 2px;
6
6
  $basis-focus-inverse-outline-color: #fff;
@@ -22,6 +22,7 @@ $basis-color-default-border-subtle: #94A3B8;
22
22
  $basis-color-default-color-subtle: #334155;
23
23
  $basis-color-default-color-document: #0F172A;
24
24
  $basis-color-default-bg-document: #fff;
25
+ $figma-link-icon-size: 1.25rem;
25
26
  $nl-heading-level-6-margin-block-start: 0rem;
26
27
  $nl-heading-level-6-margin-block-end: 0rem;
27
28
  $nl-heading-level-6-line-height: 150%;
@@ -69,26 +70,13 @@ $nl-link-hover-text-decoration-thickness: auto;
69
70
  $nl-link-hover-text-decoration-line: underline;
70
71
  $nl-link-disabled-cursor: disabled;
71
72
  $nl-link-disabled-color: #334155;
73
+ $nl-link-active-color: #1a4972;
72
74
  $nl-link-current-cursor: default;
73
75
  $nl-link-text-underline-offset: 0.125rem;
74
76
  $nl-link-text-decoration-thickness: 0.0625em;
75
77
  $nl-link-text-decoration-line: underline;
76
78
  $nl-link-text-decoration-color: inherit;
77
79
  $nl-link-color: #01689b;
78
- $nl-link-visited-color: #01689b;
79
- $nl-link-focus-text-decoration-thickness: auto;
80
- $nl-link-focus-text-decoration: None;
81
- $nl-link-focus-color: #01689b;
82
- $nl-link-focus-background-color: transparent;
83
- $nl-link-active-color: #1a4972;
84
- $nl-link-active-text-decoration: None;
85
- $nl-link-icon-size: 24px;
86
- $nl-link-icon-inset-block-start: 0.25rem;
87
- $nl-link-line-height: 150%;
88
- $nl-link-font-weight: 400;
89
- $nl-link-font-size: 1.25rem;
90
- $nl-link-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
91
- $nl-link-column-gap: 0.25rem;
92
80
  $nl-number-badge-padding-inline: 0.5rem;
93
81
  $nl-number-badge-padding-block: 0.125rem;
94
82
  $nl-number-badge-min-inline-size: 24px;
@@ -102,6 +90,11 @@ $nl-number-badge-border-radius: 999px;
102
90
  $nl-number-badge-border-color: transparent;
103
91
  $nl-number-badge-background-color: #154273;
104
92
  $nl-number-badge-line-height: 125%;
93
+ $nl-paragraph-lead-margin-block-start: 0rem;
94
+ $nl-paragraph-lead-margin-block-end: 0rem;
95
+ $nl-paragraph-lead-line-height: 150%;
96
+ $nl-paragraph-lead-font-weight: 400;
97
+ $nl-paragraph-lead-font-size: 1.5rem;
105
98
  $nl-paragraph-margin-block-start: 0rem;
106
99
  $nl-paragraph-margin-block-end: 0rem;
107
100
  $nl-paragraph-line-height: 150%;
@@ -109,12 +102,6 @@ $nl-paragraph-font-weight: 400;
109
102
  $nl-paragraph-font-size: 1.25rem;
110
103
  $nl-paragraph-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
111
104
  $nl-paragraph-color: #0F172A;
112
- $nl-paragraph-lead-margin-block-start: 0rem;
113
- $nl-paragraph-lead-margin-block-end: 0rem;
114
- $nl-paragraph-lead-line-height: 150%;
115
- $nl-paragraph-lead-font-weight: 400;
116
- $nl-paragraph-lead-font-size: 1.5rem;
117
- $nl-paragraph-lead-color: #0F172A;
118
105
  $nl-skip-link-font-size: 1.25rem;
119
106
  $nl-skip-link-line-height: 150%;
120
107
  $nl-skip-link-text-underline-offset: 0.125rem;
@@ -449,6 +436,7 @@ $rhc-keep-top-left-border-radius-bottom-right: 0;
449
436
  $rhc-keep-top-left-border-radius-top-right: 0;
450
437
  $rhc-keep-top-left-border-radius-top-left: 48px;
451
438
  $rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.;
439
+ $rhc-breadcrumb-nav-link-current-color: #334155;
452
440
  $rhc-card-as-link-horizontal-heading-inline-size: 200px;
453
441
  $rhc-card-as-link-horizontal-padding-inline-start: 1rem;
454
442
  $rhc-card-as-link-horizontal-padding-inline-end: 1rem;
@@ -485,13 +473,55 @@ $rhc-card-as-link-link-text-decoration: underline;
485
473
  $rhc-card-as-link-link-color: #01689b;
486
474
  $rhc-card-as-link-icon-size: 24px;
487
475
  $rhc-card-as-link-icon-color: #154273;
488
- $rhc-card-as-link-inline-size: 328px;
489
476
  $rhc-card-as-link-column-gap: 1rem;
490
477
  $rhc-card-as-link-color: #0F172A;
491
478
  $rhc-card-as-link-border-width: 1px;
492
479
  $rhc-card-as-link-border-radius: 5px;
493
480
  $rhc-card-as-link-border-color: #CBD5E1;
494
481
  $rhc-card-as-link-background-color: #fff;
482
+ $rhc-card-horizontal-heading-inline-size: 200px;
483
+ $rhc-card-horizontal-padding-inline-start: 1rem;
484
+ $rhc-card-horizontal-padding-inline-end: 1rem;
485
+ $rhc-card-horizontal-padding-block-start: 0;
486
+ $rhc-card-horizontal-padding-block-end: 0;
487
+ $rhc-card-horizontal-max-block-size: 96px;
488
+ $rhc-card-horizontal-color: #fff;
489
+ $rhc-card-horizontal-border-color: transparent;
490
+ $rhc-card-horizontal-background-color: #154273;
491
+ $rhc-card-heading-font-weight: 700;
492
+ $rhc-card-heading-font-size: 1.5rem;
493
+ $rhc-card-heading-padding-block-start: 0.5rem;
494
+ $rhc-card-heading-color: #154273;
495
+ $rhc-card-full-bleed-opacity: 0.5;
496
+ $rhc-card-full-bleed-color: #fff;
497
+ $rhc-card-full-bleed-border-color: transparent;
498
+ $rhc-card-full-bleed-background-color: #000;
499
+ $rhc-card-focus-text-decoration: underline;
500
+ $rhc-card-focus-background-color: #dce3ea;
501
+ $rhc-card-hover-text-decoration: underline;
502
+ $rhc-card-hover-background-color: #F8FAFC;
503
+ $rhc-card-active-text-decoration: underline;
504
+ $rhc-card-active-background-color: #F1F5F9;
505
+ $rhc-card-row-gap: 0.75rem;
506
+ $rhc-card-padding-inline-start: 1rem;
507
+ $rhc-card-padding-inline-end: 1rem;
508
+ $rhc-card-padding-block-start: 1rem;
509
+ $rhc-card-padding-block-end: 1rem;
510
+ $rhc-card-metadata-color: #334155;
511
+ $rhc-card-link-focus-text-decoration: none;
512
+ $rhc-card-link-hover-text-decoration: none;
513
+ $rhc-card-link-active-text-decoration: none;
514
+ $rhc-card-link-text-decoration: underline;
515
+ $rhc-card-link-color: #01689b;
516
+ $rhc-card-icon-size: 24px;
517
+ $rhc-card-icon-color: #154273;
518
+ $rhc-card-inline-size: 328px;
519
+ $rhc-card-column-gap: 1rem;
520
+ $rhc-card-color: #0F172A;
521
+ $rhc-card-border-width: 1px;
522
+ $rhc-card-border-radius: 5px;
523
+ $rhc-card-border-color: #CBD5E1;
524
+ $rhc-card-background-color: #fff;
495
525
  $rhc-checkbox-group-row-gap: 1rem;
496
526
  $rhc-checkbox-group-padding-block-start: 0.5rem;
497
527
  $rhc-checkbox-group-padding-block-end: 0.5rem;
@@ -604,7 +634,7 @@ $rhc-icon-only-button-padding-inline-start: 0.75rem;
604
634
  $rhc-icon-only-button-padding-inline-end: 0.75rem;
605
635
  $rhc-icon-only-button-padding-block-start: 0.75rem;
606
636
  $rhc-icon-only-button-padding-block-end: 0.75rem;
607
- $rhc-link-list-text-decoration: None;
637
+ $rhc-link-column-gap: 0.25rem;
608
638
  $rhc-link-list-card-padding-inline-end: 1.5rem;
609
639
  $rhc-link-list-card-padding-inline-start: 1.5rem;
610
640
  $rhc-link-list-card-row-gap: 1rem;
@@ -745,6 +775,7 @@ $rhc-toggletip-border-radius: 5px;
745
775
  $rhc-toggletip-border-color: transparent;
746
776
  $rhc-toggletip-background-color: #007bc7;
747
777
  $rhc-toggletip-color: #fff;
778
+ $rhc-unordered-list-nested-margin-inline-start: 0rem;
748
779
  $utrecht-action-submit-cursor: pointer;
749
780
  $utrecht-action-navigate-cursor: pointer;
750
781
  $utrecht-action-inert-cursor: default;
@@ -902,6 +933,18 @@ $utrecht-blockquote-border-end-start-radius: 0;
902
933
  $utrecht-blockquote-border-end-end-radius: 0;
903
934
  $utrecht-blockquote-border-block-start-width: 0;
904
935
  $utrecht-blockquote-border-block-end-width: 0;
936
+ $utrecht-breadcrumb-nav-link-icon-size: 24px;
937
+ $utrecht-breadcrumb-nav-link-hover-color: #01496c;
938
+ $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
939
+ $utrecht-breadcrumb-nav-link-focus-text-decoration: None;
940
+ $utrecht-breadcrumb-nav-link-focus-color: #01689b;
941
+ $utrecht-breadcrumb-nav-link-focus-background-color: transparent;
942
+ $utrecht-breadcrumb-nav-link-disabled-color: #334155;
943
+ $utrecht-breadcrumb-nav-link-active-text-decoration: underline;
944
+ $utrecht-breadcrumb-nav-link-active-color: #163f5b;
945
+ $utrecht-breadcrumb-nav-link-current-font-weight: 400;
946
+ $utrecht-breadcrumb-nav-link-text-decoration: underline;
947
+ $utrecht-breadcrumb-nav-link-color: #01689b;
905
948
  $utrecht-breadcrumb-nav-separator-icon-size: 24px;
906
949
  $utrecht-breadcrumb-nav-separator-color: #334155;
907
950
  $utrecht-breadcrumb-nav-item-first-padding-inline-start: 0rem;
@@ -913,28 +956,6 @@ $utrecht-breadcrumb-nav-min-block-size: 48px;
913
956
  $utrecht-breadcrumb-nav-line-height: 150%;
914
957
  $utrecht-breadcrumb-nav-font-size: 1.25rem;
915
958
  $utrecht-breadcrumb-nav-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
916
- $utrecht-breadcrumb-nav-link-hover-color: #01496c;
917
- $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
918
- $utrecht-breadcrumb-nav-link-focus-text-decoration: None;
919
- $utrecht-breadcrumb-nav-link-focus-color: #01689b;
920
- $utrecht-breadcrumb-nav-link-focus-background-color: transparent;
921
- $utrecht-breadcrumb-nav-link-disabled-color: #334155;
922
- $utrecht-breadcrumb-nav-link-active-text-decoration: underline;
923
- $utrecht-breadcrumb-nav-link-active-color: #163f5b;
924
- $utrecht-breadcrumb-nav-link-text-decoration: underline;
925
- $utrecht-breadcrumb-nav-link-color: #01689b;
926
- $utrecht-breadcrumb-nav-link-icon-size: 24px;
927
- $utrecht-breadcrumb-nav-link-icon-margin-inline: 0.25rem;
928
- $utrecht-breadcrumb-nav-link-icon-inset-block-start: 0;
929
- $utrecht-breadcrumb-nav-link-current-font-weight: 400;
930
- $utrecht-breadcrumb-nav-link-current-color: #334155;
931
- $utrecht-breadcrumb-nav-link-padding-inline-start: 0rem;
932
- $utrecht-breadcrumb-nav-link-padding-inline-end: 0rem;
933
- $utrecht-breadcrumb-nav-link-padding-block-start: 0.75rem;
934
- $utrecht-breadcrumb-nav-link-padding-block-end: 0.75rem;
935
- $utrecht-breadcrumb-nav-divider-size: 24px;
936
- $utrecht-breadcrumb-nav-divider-inset-block-start: 0;
937
- $utrecht-breadcrumb-nav-divider-color: #334155;
938
959
  $utrecht-button-group-row-gap: 0.5rem;
939
960
  $utrecht-button-group-padding-block-start: 0px;
940
961
  $utrecht-button-group-padding-block-end: 0px;
@@ -1165,75 +1186,25 @@ $utrecht-form-label-checkbox-color: #0F172A;
1165
1186
  $utrecht-form-label-font-weight: 700;
1166
1187
  $utrecht-form-label-font-size: 1.25rem;
1167
1188
  $utrecht-form-label-color: #0F172A;
1168
- $utrecht-heading-6-margin-block-start: 0rem;
1169
- $utrecht-heading-6-margin-block-end: 0rem;
1170
- $utrecht-heading-6-line-height: 150%;
1171
- $utrecht-heading-6-font-weight: 700;
1172
- $utrecht-heading-6-font-size: 1.25rem;
1173
- $utrecht-heading-6-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1174
- $utrecht-heading-6-color: #154273;
1175
- $utrecht-heading-5-margin-block-start: 0rem;
1176
- $utrecht-heading-5-margin-block-end: 0rem;
1177
- $utrecht-heading-5-line-height: 150%;
1178
- $utrecht-heading-5-font-weight: 700;
1179
- $utrecht-heading-5-font-size: 1.25rem;
1180
- $utrecht-heading-5-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1181
- $utrecht-heading-5-color: #154273;
1182
- $utrecht-heading-4-margin-block-start: 0rem;
1183
- $utrecht-heading-4-margin-block-end: 0rem;
1184
- $utrecht-heading-4-line-height: 150%;
1185
- $utrecht-heading-4-font-weight: 700;
1186
- $utrecht-heading-4-font-size: 1.5rem;
1187
- $utrecht-heading-4-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1188
- $utrecht-heading-4-color: #154273;
1189
- $utrecht-heading-3-margin-block-start: 0rem;
1190
- $utrecht-heading-3-margin-block-end: 0rem;
1191
- $utrecht-heading-3-line-height: 125%;
1192
- $utrecht-heading-3-font-weight: 700;
1193
- $utrecht-heading-3-font-size: 1.875rem;
1194
- $utrecht-heading-3-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1195
- $utrecht-heading-3-color: #154273;
1196
- $utrecht-heading-2-margin-block-start: 0rem;
1197
- $utrecht-heading-2-margin-block-end: 0rem;
1198
- $utrecht-heading-2-line-height: 125%;
1199
- $utrecht-heading-2-font-weight: 700;
1200
- $utrecht-heading-2-font-size: 2.5rem;
1201
- $utrecht-heading-2-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1202
- $utrecht-heading-2-color: #154273;
1203
- $utrecht-heading-1-margin-block-start: 0rem;
1204
- $utrecht-heading-1-margin-block-end: 0rem;
1205
- $utrecht-heading-1-line-height: 125%;
1206
- $utrecht-heading-1-font-weight: 700;
1207
- $utrecht-heading-1-font-size: 3.125rem;
1208
- $utrecht-heading-1-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1209
- $utrecht-heading-1-color: #154273;
1210
1189
  $utrecht-icon-inset-block-start: 0rem;
1211
1190
  $utrecht-icon-size: 24px;
1212
1191
  $utrecht-icon-color: inherit;
1213
1192
  $utrecht-link-visited-color: #01689b;
1214
1193
  $utrecht-link-focus-visible-text-decoration-thickness: 0.0625em;
1215
1194
  $utrecht-link-focus-visible-text-decoration: None;
1195
+ $utrecht-link-focus-color: #01689b;
1196
+ $utrecht-link-focus-background-color: transparent;
1216
1197
  $utrecht-link-hover-text-decoration-thickness: 0.1875em;
1217
1198
  $utrecht-link-hover-text-decoration: underline;
1218
1199
  $utrecht-link-hover-color: #15496a;
1200
+ $utrecht-link-active-color: #163f5b;
1201
+ $utrecht-link-icon-size: 24px;
1219
1202
  $utrecht-link-text-underline-offset: 0.125rem;
1220
1203
  $utrecht-link-text-decoration-thickness: 0.0625em;
1221
1204
  $utrecht-link-text-decoration: underline;
1222
1205
  $utrecht-link-column-gap: 0.25rem;
1223
1206
  $utrecht-link-text-decoration-color: inherit;
1224
1207
  $utrecht-link-color: #01689b;
1225
- $utrecht-link-icon-size: 24px;
1226
- $utrecht-link-icon-inset-block-start: 0.25rem;
1227
- $utrecht-link-focus-color: #01689b;
1228
- $utrecht-link-focus-background-color: transparent;
1229
- $utrecht-link-focus-text-decoration-thickness: auto;
1230
- $utrecht-link-focus-text-decoration: None;
1231
- $utrecht-link-active-color: #163f5b;
1232
- $utrecht-link-active-text-decoration: None;
1233
- $utrecht-link-font-size: 1.25rem;
1234
- $utrecht-link-line-height: 150%;
1235
- $utrecht-link-font-weight: 400;
1236
- $utrecht-link-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1237
1208
  $utrecht-link-list-font-weight: 400;
1238
1209
  $utrecht-link-list-link-text-decoration: None;
1239
1210
  $utrecht-link-list-link-column-gap: 0.5rem;
@@ -1242,8 +1213,6 @@ $utrecht-link-list-icon-inset-block-start: 0.188rem;
1242
1213
  $utrecht-link-list-row-gap: 0.5rem;
1243
1214
  $utrecht-link-list-margin-block-start: 0rem;
1244
1215
  $utrecht-link-list-margin-block-end: 0rem;
1245
- $utrecht-link-list-item-column-gap: 0.5rem;
1246
- $utrecht-link-list-item-text-decoration: None;
1247
1216
  $utrecht-number-badge-padding-inline: 0.5rem;
1248
1217
  $utrecht-number-badge-padding-block: 0.125rem;
1249
1218
  $utrecht-number-badge-min-inline-size: 24px;
@@ -1260,30 +1229,11 @@ $utrecht-number-badge-line-height: 125%;
1260
1229
  $utrecht-ordered-list-item-padding-inline-start: 0.5rem;
1261
1230
  $utrecht-ordered-list-item-margin-block-start: 0.25rem;
1262
1231
  $utrecht-ordered-list-item-margin-block-end: 0.25rem;
1263
- $utrecht-ordered-list-padding-inline-start: 1.5rem;
1232
+ $utrecht-ordered-list-padding-inline-start: 2rem;
1264
1233
  $utrecht-ordered-list-margin-block-start: 0.25rem;
1265
1234
  $utrecht-ordered-list-margin-block-end: 0.25rem;
1266
1235
  $utrecht-ordered-list-line-height: 150%;
1267
1236
  $utrecht-ordered-list-font-size: 1.25rem;
1268
- $utrecht-ordered-list-margin-inline-start: 0.625rem;
1269
- $utrecht-ordered-list-font-weight: 400;
1270
- $utrecht-ordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1271
- $utrecht-ordered-list-color: #0F172A;
1272
- $utrecht-paragraph-margin-block-start: 0rem;
1273
- $utrecht-paragraph-margin-block-end: 0rem;
1274
- $utrecht-paragraph-small-line-height: 150%;
1275
- $utrecht-paragraph-small-font-weight: 400;
1276
- $utrecht-paragraph-small-color: #0F172A;
1277
- $utrecht-paragraph-small-font-size: 1.5rem;
1278
- $utrecht-paragraph-lead-line-height: 150%;
1279
- $utrecht-paragraph-lead-font-weight: 400;
1280
- $utrecht-paragraph-lead-font-size: 1.5rem;
1281
- $utrecht-paragraph-lead-color: #0F172A;
1282
- $utrecht-paragraph-line-height: 150%;
1283
- $utrecht-paragraph-font-weight: 400;
1284
- $utrecht-paragraph-font-size: 1.25rem;
1285
- $utrecht-paragraph-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1286
- $utrecht-paragraph-color: #0F172A;
1287
1237
  $utrecht-pre-heading-font-size: 1rem;
1288
1238
  $utrecht-pre-heading-line-height: 125%;
1289
1239
  $utrecht-pre-heading-font-weight: 700;
@@ -1522,6 +1472,7 @@ $utrecht-textbox-hover-color: #0F172A;
1522
1472
  $utrecht-textbox-hover-border-width: 1px;
1523
1473
  $utrecht-textbox-hover-border-color: #738eab;
1524
1474
  $utrecht-textbox-hover-background-color: #fff;
1475
+ $utrecht-unordered-list-marker-color: #0F172A;
1525
1476
  $utrecht-unordered-list-item-padding-inline-start: 0.5rem;
1526
1477
  $utrecht-unordered-list-item-margin-block-start: 0.25rem;
1527
1478
  $utrecht-unordered-list-item-margin-block-end: 0.25rem;
@@ -1530,11 +1481,6 @@ $utrecht-unordered-list-margin-block-start: 0.25rem;
1530
1481
  $utrecht-unordered-list-margin-block-end: 0.25rem;
1531
1482
  $utrecht-unordered-list-line-height: 150%;
1532
1483
  $utrecht-unordered-list-font-size: 1.25rem;
1533
- $utrecht-unordered-list-font-weight: 400;
1534
- $utrecht-unordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1535
- $utrecht-unordered-list-marker-color: #0F172A;
1536
- $utrecht-unordered-list-marker-border-color: #0F172A;
1537
- $utrecht-unordered-list-color: #0F172A;
1538
1484
  $utrecht-column-layout-gap: 0.75rem;
1539
1485
  $utrecht-column-layout-column-width: 400px;
1540
1486
  $utrecht-column-layout-column-rule-width: 0px;