@rijkshuisstijl-community/design-tokens 4.0.1 → 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 +51 -5
  2. package/README.md +2 -2
  3. package/dist/_variables.scss +77 -126
  4. package/dist/index.css +77 -126
  5. package/dist/index.d.ts +76 -125
  6. package/dist/index.js +77 -126
  7. package/dist/index.json +76 -125
  8. package/dist/index.tokens.json +148 -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 +77 -126
  19. package/dist/tokens.d.ts +146 -173
  20. package/dist/tokens.js +6238 -7259
  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 +319 -638
  94. package/package.json +2 -2
  95. package/src/generated/base.tokens.json +473 -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,56 @@
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
+
48
+ ## 4.1.0
49
+
50
+ ### Minor Changes
51
+
52
+ - 08d4354: add expandable checkbox group
53
+
3
54
  ## 4.0.1
4
55
 
5
56
  ### Patch Changes
@@ -44,7 +95,6 @@
44
95
  - Token update unordered list
45
96
  - 83f2985: Vervang niet bestaand Design Token type "borderStyle" met "other".
46
97
  - 860e977: Link tokens bijgewerkt:
47
-
48
98
  - `nl.link.text-decoration-color` verwijderd zodat de underline meekleurt met de state kleur
49
99
  - `nl.link.hover.text-decoration` hernoemd naar `nl.link.hover.text-decoration-line` zodat de underline bij hover verdwijnt
50
100
 
@@ -60,7 +110,6 @@
60
110
  ### Major Changes
61
111
 
62
112
  - 04beca8: Breaking changes: toevoeging en aanpassing van font-weight tokens op de common laag.
63
-
64
113
  - De paragraph font tokens op de common-laag zijn hernoemd naar `body`, zodat ze breder toepasbaar zijn.
65
114
  - De token `rhc.paragraph.small` is verwijderd.
66
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.
@@ -103,20 +152,17 @@
103
152
  Deprecated @rijkshuisstijl-community/rivm-design-tokens
104
153
  These themes are now found in: @rijkshuisstijl-community/design-tokens
105
154
  - 5209b0c: ### Nieuwe tokens
106
-
107
155
  - `rhc.color.foreground.on-light-color` toegevoegd
108
156
  - Rounded corner tokens toegevoegd
109
157
  - Nieuwe tokenset `components/blockquote` toegevoegd
110
158
 
111
159
  ### Hernoemingen en refactor
112
-
113
160
  - `rhc.color.foregrond.onEmphisis` hernoemd naar `rhc.color.foreground.on-dark-color`. (oude naam blijft tijdelijk beschikbaar om bugs te voorkomen)
114
161
  - `rhc.border-radius.keep` vervangen door de nieuwe rounded corner tokens
115
162
  - Tokenset `common/keep` hernoemd naar `common/keep-oud`
116
163
  - Tokenset `components/blockquote` verplaatst naar `components/blockquote-oud` (legacy totdat het component is geüpdatet)
117
164
 
118
165
  ### Overige
119
-
120
166
  - Stijl en design tokens voor het `blockquote` component geüpdatet
121
167
 
122
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 Mon, 28 Jul 2025 08:31:48 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;
@@ -536,6 +566,11 @@ $rhc-data-summary-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
536
566
  $rhc-dot-badge-size: 12px;
537
567
  $rhc-dot-badge-color: #d52b1e;
538
568
  $rhc-dot-badge-border-radius: 999px;
569
+ $rhc-expandable-checkbox-group-summary-text-decoration: underline;
570
+ $rhc-expandable-checkbox-group-summary-margin-block-start: 0.5rem;
571
+ $rhc-expandable-checkbox-group-summary-margin-block-end: 0.5rem;
572
+ $rhc-expandable-checkbox-group-summary-color: #01689b;
573
+ $rhc-expandable-checkbox-group-details-margin-block-start: 0.5rem;
539
574
  $rhc-file-subtitle-color: #64748B;
540
575
  $rhc-file-error-border-color: #d52b1e;
541
576
  $rhc-file-column-gap: 0.25rem;
@@ -599,7 +634,7 @@ $rhc-icon-only-button-padding-inline-start: 0.75rem;
599
634
  $rhc-icon-only-button-padding-inline-end: 0.75rem;
600
635
  $rhc-icon-only-button-padding-block-start: 0.75rem;
601
636
  $rhc-icon-only-button-padding-block-end: 0.75rem;
602
- $rhc-link-list-text-decoration: None;
637
+ $rhc-link-column-gap: 0.25rem;
603
638
  $rhc-link-list-card-padding-inline-end: 1.5rem;
604
639
  $rhc-link-list-card-padding-inline-start: 1.5rem;
605
640
  $rhc-link-list-card-row-gap: 1rem;
@@ -740,6 +775,7 @@ $rhc-toggletip-border-radius: 5px;
740
775
  $rhc-toggletip-border-color: transparent;
741
776
  $rhc-toggletip-background-color: #007bc7;
742
777
  $rhc-toggletip-color: #fff;
778
+ $rhc-unordered-list-nested-margin-inline-start: 0rem;
743
779
  $utrecht-action-submit-cursor: pointer;
744
780
  $utrecht-action-navigate-cursor: pointer;
745
781
  $utrecht-action-inert-cursor: default;
@@ -897,6 +933,18 @@ $utrecht-blockquote-border-end-start-radius: 0;
897
933
  $utrecht-blockquote-border-end-end-radius: 0;
898
934
  $utrecht-blockquote-border-block-start-width: 0;
899
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;
900
948
  $utrecht-breadcrumb-nav-separator-icon-size: 24px;
901
949
  $utrecht-breadcrumb-nav-separator-color: #334155;
902
950
  $utrecht-breadcrumb-nav-item-first-padding-inline-start: 0rem;
@@ -908,28 +956,6 @@ $utrecht-breadcrumb-nav-min-block-size: 48px;
908
956
  $utrecht-breadcrumb-nav-line-height: 150%;
909
957
  $utrecht-breadcrumb-nav-font-size: 1.25rem;
910
958
  $utrecht-breadcrumb-nav-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
911
- $utrecht-breadcrumb-nav-link-hover-color: #01496c;
912
- $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
913
- $utrecht-breadcrumb-nav-link-focus-text-decoration: None;
914
- $utrecht-breadcrumb-nav-link-focus-color: #01689b;
915
- $utrecht-breadcrumb-nav-link-focus-background-color: transparent;
916
- $utrecht-breadcrumb-nav-link-disabled-color: #334155;
917
- $utrecht-breadcrumb-nav-link-active-text-decoration: underline;
918
- $utrecht-breadcrumb-nav-link-active-color: #163f5b;
919
- $utrecht-breadcrumb-nav-link-text-decoration: underline;
920
- $utrecht-breadcrumb-nav-link-color: #01689b;
921
- $utrecht-breadcrumb-nav-link-icon-size: 24px;
922
- $utrecht-breadcrumb-nav-link-icon-margin-inline: 0.25rem;
923
- $utrecht-breadcrumb-nav-link-icon-inset-block-start: 0;
924
- $utrecht-breadcrumb-nav-link-current-font-weight: 400;
925
- $utrecht-breadcrumb-nav-link-current-color: #334155;
926
- $utrecht-breadcrumb-nav-link-padding-inline-start: 0rem;
927
- $utrecht-breadcrumb-nav-link-padding-inline-end: 0rem;
928
- $utrecht-breadcrumb-nav-link-padding-block-start: 0.75rem;
929
- $utrecht-breadcrumb-nav-link-padding-block-end: 0.75rem;
930
- $utrecht-breadcrumb-nav-divider-size: 24px;
931
- $utrecht-breadcrumb-nav-divider-inset-block-start: 0;
932
- $utrecht-breadcrumb-nav-divider-color: #334155;
933
959
  $utrecht-button-group-row-gap: 0.5rem;
934
960
  $utrecht-button-group-padding-block-start: 0px;
935
961
  $utrecht-button-group-padding-block-end: 0px;
@@ -1160,75 +1186,25 @@ $utrecht-form-label-checkbox-color: #0F172A;
1160
1186
  $utrecht-form-label-font-weight: 700;
1161
1187
  $utrecht-form-label-font-size: 1.25rem;
1162
1188
  $utrecht-form-label-color: #0F172A;
1163
- $utrecht-heading-6-margin-block-start: 0rem;
1164
- $utrecht-heading-6-margin-block-end: 0rem;
1165
- $utrecht-heading-6-line-height: 150%;
1166
- $utrecht-heading-6-font-weight: 700;
1167
- $utrecht-heading-6-font-size: 1.25rem;
1168
- $utrecht-heading-6-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1169
- $utrecht-heading-6-color: #154273;
1170
- $utrecht-heading-5-margin-block-start: 0rem;
1171
- $utrecht-heading-5-margin-block-end: 0rem;
1172
- $utrecht-heading-5-line-height: 150%;
1173
- $utrecht-heading-5-font-weight: 700;
1174
- $utrecht-heading-5-font-size: 1.25rem;
1175
- $utrecht-heading-5-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1176
- $utrecht-heading-5-color: #154273;
1177
- $utrecht-heading-4-margin-block-start: 0rem;
1178
- $utrecht-heading-4-margin-block-end: 0rem;
1179
- $utrecht-heading-4-line-height: 150%;
1180
- $utrecht-heading-4-font-weight: 700;
1181
- $utrecht-heading-4-font-size: 1.5rem;
1182
- $utrecht-heading-4-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1183
- $utrecht-heading-4-color: #154273;
1184
- $utrecht-heading-3-margin-block-start: 0rem;
1185
- $utrecht-heading-3-margin-block-end: 0rem;
1186
- $utrecht-heading-3-line-height: 125%;
1187
- $utrecht-heading-3-font-weight: 700;
1188
- $utrecht-heading-3-font-size: 1.875rem;
1189
- $utrecht-heading-3-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1190
- $utrecht-heading-3-color: #154273;
1191
- $utrecht-heading-2-margin-block-start: 0rem;
1192
- $utrecht-heading-2-margin-block-end: 0rem;
1193
- $utrecht-heading-2-line-height: 125%;
1194
- $utrecht-heading-2-font-weight: 700;
1195
- $utrecht-heading-2-font-size: 2.5rem;
1196
- $utrecht-heading-2-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1197
- $utrecht-heading-2-color: #154273;
1198
- $utrecht-heading-1-margin-block-start: 0rem;
1199
- $utrecht-heading-1-margin-block-end: 0rem;
1200
- $utrecht-heading-1-line-height: 125%;
1201
- $utrecht-heading-1-font-weight: 700;
1202
- $utrecht-heading-1-font-size: 3.125rem;
1203
- $utrecht-heading-1-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1204
- $utrecht-heading-1-color: #154273;
1205
1189
  $utrecht-icon-inset-block-start: 0rem;
1206
1190
  $utrecht-icon-size: 24px;
1207
1191
  $utrecht-icon-color: inherit;
1208
1192
  $utrecht-link-visited-color: #01689b;
1209
1193
  $utrecht-link-focus-visible-text-decoration-thickness: 0.0625em;
1210
1194
  $utrecht-link-focus-visible-text-decoration: None;
1195
+ $utrecht-link-focus-color: #01689b;
1196
+ $utrecht-link-focus-background-color: transparent;
1211
1197
  $utrecht-link-hover-text-decoration-thickness: 0.1875em;
1212
1198
  $utrecht-link-hover-text-decoration: underline;
1213
1199
  $utrecht-link-hover-color: #15496a;
1200
+ $utrecht-link-active-color: #163f5b;
1201
+ $utrecht-link-icon-size: 24px;
1214
1202
  $utrecht-link-text-underline-offset: 0.125rem;
1215
1203
  $utrecht-link-text-decoration-thickness: 0.0625em;
1216
1204
  $utrecht-link-text-decoration: underline;
1217
1205
  $utrecht-link-column-gap: 0.25rem;
1218
1206
  $utrecht-link-text-decoration-color: inherit;
1219
1207
  $utrecht-link-color: #01689b;
1220
- $utrecht-link-icon-size: 24px;
1221
- $utrecht-link-icon-inset-block-start: 0.25rem;
1222
- $utrecht-link-focus-color: #01689b;
1223
- $utrecht-link-focus-background-color: transparent;
1224
- $utrecht-link-focus-text-decoration-thickness: auto;
1225
- $utrecht-link-focus-text-decoration: None;
1226
- $utrecht-link-active-color: #163f5b;
1227
- $utrecht-link-active-text-decoration: None;
1228
- $utrecht-link-font-size: 1.25rem;
1229
- $utrecht-link-line-height: 150%;
1230
- $utrecht-link-font-weight: 400;
1231
- $utrecht-link-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1232
1208
  $utrecht-link-list-font-weight: 400;
1233
1209
  $utrecht-link-list-link-text-decoration: None;
1234
1210
  $utrecht-link-list-link-column-gap: 0.5rem;
@@ -1237,8 +1213,6 @@ $utrecht-link-list-icon-inset-block-start: 0.188rem;
1237
1213
  $utrecht-link-list-row-gap: 0.5rem;
1238
1214
  $utrecht-link-list-margin-block-start: 0rem;
1239
1215
  $utrecht-link-list-margin-block-end: 0rem;
1240
- $utrecht-link-list-item-column-gap: 0.5rem;
1241
- $utrecht-link-list-item-text-decoration: None;
1242
1216
  $utrecht-number-badge-padding-inline: 0.5rem;
1243
1217
  $utrecht-number-badge-padding-block: 0.125rem;
1244
1218
  $utrecht-number-badge-min-inline-size: 24px;
@@ -1255,30 +1229,11 @@ $utrecht-number-badge-line-height: 125%;
1255
1229
  $utrecht-ordered-list-item-padding-inline-start: 0.5rem;
1256
1230
  $utrecht-ordered-list-item-margin-block-start: 0.25rem;
1257
1231
  $utrecht-ordered-list-item-margin-block-end: 0.25rem;
1258
- $utrecht-ordered-list-padding-inline-start: 1.5rem;
1232
+ $utrecht-ordered-list-padding-inline-start: 2rem;
1259
1233
  $utrecht-ordered-list-margin-block-start: 0.25rem;
1260
1234
  $utrecht-ordered-list-margin-block-end: 0.25rem;
1261
1235
  $utrecht-ordered-list-line-height: 150%;
1262
1236
  $utrecht-ordered-list-font-size: 1.25rem;
1263
- $utrecht-ordered-list-margin-inline-start: 0.625rem;
1264
- $utrecht-ordered-list-font-weight: 400;
1265
- $utrecht-ordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1266
- $utrecht-ordered-list-color: #0F172A;
1267
- $utrecht-paragraph-margin-block-start: 0rem;
1268
- $utrecht-paragraph-margin-block-end: 0rem;
1269
- $utrecht-paragraph-small-line-height: 150%;
1270
- $utrecht-paragraph-small-font-weight: 400;
1271
- $utrecht-paragraph-small-color: #0F172A;
1272
- $utrecht-paragraph-small-font-size: 1.5rem;
1273
- $utrecht-paragraph-lead-line-height: 150%;
1274
- $utrecht-paragraph-lead-font-weight: 400;
1275
- $utrecht-paragraph-lead-font-size: 1.5rem;
1276
- $utrecht-paragraph-lead-color: #0F172A;
1277
- $utrecht-paragraph-line-height: 150%;
1278
- $utrecht-paragraph-font-weight: 400;
1279
- $utrecht-paragraph-font-size: 1.25rem;
1280
- $utrecht-paragraph-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1281
- $utrecht-paragraph-color: #0F172A;
1282
1237
  $utrecht-pre-heading-font-size: 1rem;
1283
1238
  $utrecht-pre-heading-line-height: 125%;
1284
1239
  $utrecht-pre-heading-font-weight: 700;
@@ -1517,6 +1472,7 @@ $utrecht-textbox-hover-color: #0F172A;
1517
1472
  $utrecht-textbox-hover-border-width: 1px;
1518
1473
  $utrecht-textbox-hover-border-color: #738eab;
1519
1474
  $utrecht-textbox-hover-background-color: #fff;
1475
+ $utrecht-unordered-list-marker-color: #0F172A;
1520
1476
  $utrecht-unordered-list-item-padding-inline-start: 0.5rem;
1521
1477
  $utrecht-unordered-list-item-margin-block-start: 0.25rem;
1522
1478
  $utrecht-unordered-list-item-margin-block-end: 0.25rem;
@@ -1525,11 +1481,6 @@ $utrecht-unordered-list-margin-block-start: 0.25rem;
1525
1481
  $utrecht-unordered-list-margin-block-end: 0.25rem;
1526
1482
  $utrecht-unordered-list-line-height: 150%;
1527
1483
  $utrecht-unordered-list-font-size: 1.25rem;
1528
- $utrecht-unordered-list-font-weight: 400;
1529
- $utrecht-unordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
1530
- $utrecht-unordered-list-marker-color: #0F172A;
1531
- $utrecht-unordered-list-marker-border-color: #0F172A;
1532
- $utrecht-unordered-list-color: #0F172A;
1533
1484
  $utrecht-column-layout-gap: 0.75rem;
1534
1485
  $utrecht-column-layout-column-width: 400px;
1535
1486
  $utrecht-column-layout-column-rule-width: 0px;