@utrecht/design-tokens 5.1.0 → 6.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 (164) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +1244 -1244
  3. package/dist/_mixin.scss +1244 -1244
  4. package/dist/_variables.scss +1244 -1244
  5. package/dist/dark/_mixin-theme.scss +1255 -1255
  6. package/dist/dark/_mixin.scss +1255 -1255
  7. package/dist/dark/_variables.scss +1255 -1255
  8. package/dist/dark/index.cjs +1263 -1260
  9. package/dist/dark/index.css +1255 -1255
  10. package/dist/dark/index.d.ts +1263 -1260
  11. package/dist/dark/index.flat.json +2 -2
  12. package/dist/dark/index.json +10393 -15125
  13. package/dist/dark/index.mjs +175 -91
  14. package/dist/dark/index.tokens.json +78 -7180
  15. package/dist/dark/list.json +10393 -15125
  16. package/dist/dark/list.mjs +10393 -15125
  17. package/dist/dark/property.css +5 -2
  18. package/dist/dark/root.css +1255 -1255
  19. package/dist/dark/theme-prince-xml.css +1255 -1255
  20. package/dist/dark/theme.css +1255 -1255
  21. package/dist/dark/tokens.cjs +26574 -43650
  22. package/dist/dark/tokens.d.ts +2113 -5657
  23. package/dist/dark/tokens.json +11027 -22861
  24. package/dist/dark/variables.cjs +1263 -1260
  25. package/dist/dark/variables.css +1255 -1255
  26. package/dist/dark/variables.d.ts +1263 -1260
  27. package/dist/dark/variables.json +2 -2
  28. package/dist/dark/variables.less +1255 -1255
  29. package/dist/dark/variables.mjs +175 -91
  30. package/dist/index.cjs +1252 -1249
  31. package/dist/index.css +2517 -2517
  32. package/dist/index.d.ts +1252 -1249
  33. package/dist/index.flat.json +2 -2
  34. package/dist/index.json +10745 -15907
  35. package/dist/index.mjs +167 -87
  36. package/dist/index.tokens.json +76 -7205
  37. package/dist/list.json +10745 -15907
  38. package/dist/list.mjs +10745 -15907
  39. package/dist/property.css +5 -2
  40. package/dist/root.css +1244 -1244
  41. package/dist/theme-prince-xml.css +1244 -1244
  42. package/dist/theme.css +1244 -1244
  43. package/dist/tokens.cjs +26903 -44500
  44. package/dist/tokens.d.ts +2100 -5661
  45. package/dist/tokens.json +11612 -23903
  46. package/dist/variables.cjs +1252 -1249
  47. package/dist/variables.css +1244 -1244
  48. package/dist/variables.d.ts +1252 -1249
  49. package/dist/variables.json +2 -2
  50. package/dist/variables.less +1244 -1244
  51. package/dist/variables.mjs +167 -87
  52. package/package.json +4 -5
  53. package/src/brand/utrecht/color.tokens.json +45 -45
  54. package/src/brand/utrecht/icon.tokens.json +10 -10
  55. package/src/brand/utrecht/typography.tokens.json +22 -22
  56. package/src/common/utrecht/action.tokens.json +6 -6
  57. package/src/common/utrecht/border.tokens.json +9 -9
  58. package/src/common/utrecht/feedback-variant.tokens.json +18 -18
  59. package/src/common/utrecht/feedback.tokens.json +27 -27
  60. package/src/common/utrecht/focus.tokens.json +5 -5
  61. package/src/common/utrecht/pointer-target.tokens.json +1 -1
  62. package/src/common/utrecht/space.tokens.json +54 -54
  63. package/src/common/utrecht/stack.tokens.json +1 -1
  64. package/src/component/den-haag/process-steps.tokens.json +43 -43
  65. package/src/component/nl/code-block.tokens.json +7 -7
  66. package/src/component/nl/data-badge.tokens.json +5 -5
  67. package/src/component/nl/heading.tokens.json +24 -24
  68. package/src/component/nl/mark.tokens.json +2 -2
  69. package/src/component/nl/number-badge.tokens.json +6 -6
  70. package/src/component/nl/paragraph.tokens.json +9 -9
  71. package/src/component/nl/skip-link.tokens.json +8 -8
  72. package/src/component/of/layout.tokens.json +4 -4
  73. package/src/component/of/progress-indicator.tokens.json +2 -2
  74. package/src/component/opencatalogi/data-badge.json +6 -6
  75. package/src/component/signalen/signalen.tokens.json +3 -3
  76. package/src/component/utrecht/accordion.tokens.json +32 -32
  77. package/src/component/utrecht/alert-dialog.tokens.json +4 -4
  78. package/src/component/utrecht/alert.tokens.json +22 -22
  79. package/src/component/utrecht/article.tokens.json +1 -1
  80. package/src/component/utrecht/backdrop.tokens.json +5 -5
  81. package/src/component/utrecht/badge-counter.tokens.json +6 -6
  82. package/src/component/utrecht/badge-list.tokens.json +2 -2
  83. package/src/component/utrecht/badge.tokens.json +6 -6
  84. package/src/component/utrecht/blockquote.tokens.json +7 -7
  85. package/src/component/utrecht/body.tokens.json +5 -5
  86. package/src/component/utrecht/breadcrumb-nav.tokens.json +24 -24
  87. package/src/component/utrecht/button.tokens.json +125 -125
  88. package/src/component/utrecht/calendar.tokens.json +31 -31
  89. package/src/component/utrecht/card.tokens.json +11 -11
  90. package/src/component/utrecht/checkbox.tokens.json +14 -14
  91. package/src/component/utrecht/code-block.tokens.json +11 -11
  92. package/src/component/utrecht/column-layout.tokens.json +4 -4
  93. package/src/component/utrecht/data-list.tokens.json +7 -7
  94. package/src/component/utrecht/data-placeholder.tokens.json +1 -1
  95. package/src/component/utrecht/document.tokens.json +5 -5
  96. package/src/component/utrecht/drawer.tokens.json +10 -10
  97. package/src/component/utrecht/emphasis.tokens.json +1 -1
  98. package/src/component/utrecht/figure.tokens.json +3 -3
  99. package/src/component/utrecht/flo-legal-decision-tree-container.tokens.json +27 -27
  100. package/src/component/utrecht/form-control.tokens.json +20 -20
  101. package/src/component/utrecht/form-field-description.tokens.json +3 -3
  102. package/src/component/utrecht/form-field-error-message.tokens.json +1 -1
  103. package/src/component/utrecht/form-field.tokens.json +8 -8
  104. package/src/component/utrecht/form-fieldset.tokens.json +10 -10
  105. package/src/component/utrecht/form-label.tokens.json +4 -4
  106. package/src/component/utrecht/form-toggle.tokens.json +25 -25
  107. package/src/component/utrecht/grid.tokens.json +4 -4
  108. package/src/component/utrecht/heading-1.tokens.json +6 -6
  109. package/src/component/utrecht/heading-2.tokens.json +6 -6
  110. package/src/component/utrecht/heading-3.tokens.json +6 -6
  111. package/src/component/utrecht/heading-4.tokens.json +6 -6
  112. package/src/component/utrecht/heading-5.tokens.json +6 -6
  113. package/src/component/utrecht/heading-6.tokens.json +4 -4
  114. package/src/component/utrecht/heading.tokens.json +1 -1
  115. package/src/component/utrecht/icon.tokens.json +2 -2
  116. package/src/component/utrecht/index-char-nav.tokens.json +4 -4
  117. package/src/component/utrecht/link-list.tokens.json +6 -6
  118. package/src/component/utrecht/link-social.tokens.json +8 -8
  119. package/src/component/utrecht/link.tokens.json +12 -12
  120. package/src/component/utrecht/list-social.tokens.json +1 -1
  121. package/src/component/utrecht/listbox.tokens.json +22 -22
  122. package/src/component/utrecht/logo.tokens.json +4 -4
  123. package/src/component/utrecht/map-marker.tokens.json +7 -7
  124. package/src/component/utrecht/mapcontrolbutton.tokens.json +25 -25
  125. package/src/component/utrecht/mark.tokens.json +2 -2
  126. package/src/component/utrecht/menulijst.tokens.json +2 -2
  127. package/src/component/utrecht/nav-bar.tokens.json +5 -5
  128. package/src/component/utrecht/navigation.tokens.json +58 -58
  129. package/src/component/utrecht/number-badge.tokens.json +6 -6
  130. package/src/component/utrecht/number-data.tokens.json +2 -2
  131. package/src/component/utrecht/ordered-list.tokens.json +6 -6
  132. package/src/component/utrecht/page-body.tokens.json +11 -11
  133. package/src/component/utrecht/page-content.tokens.json +2 -2
  134. package/src/component/utrecht/page-footer.tokens.json +7 -7
  135. package/src/component/utrecht/page-header.tokens.json +12 -12
  136. package/src/component/utrecht/page.tokens.json +9 -9
  137. package/src/component/utrecht/pagination.tokens.json +36 -36
  138. package/src/component/utrecht/paragraph.tokens.json +10 -10
  139. package/src/component/utrecht/pre-heading.tokens.json +2 -2
  140. package/src/component/utrecht/radio-button.tokens.json +23 -23
  141. package/src/component/utrecht/rich-text.tokens.json +5 -5
  142. package/src/component/utrecht/root.tokens.json +6 -6
  143. package/src/component/utrecht/search-bar.tokens.json +27 -27
  144. package/src/component/utrecht/select.tokens.json +1 -1
  145. package/src/component/utrecht/separator.tokens.json +4 -4
  146. package/src/component/utrecht/sidenav.tokens.json +9 -9
  147. package/src/component/utrecht/skip-link.tokens.json +10 -10
  148. package/src/component/utrecht/spotlight-section.tokens.json +10 -10
  149. package/src/component/utrecht/status-badge.tokens.json +31 -31
  150. package/src/component/utrecht/surface.tokens.json +2 -2
  151. package/src/component/utrecht/table.tokens.json +31 -31
  152. package/src/component/utrecht/textarea.tokens.json +3 -3
  153. package/src/component/utrecht/textbox.tokens.json +1 -1
  154. package/src/component/utrecht/tooltip.tokens.json +9 -9
  155. package/src/component/utrecht/topnav.tokens.json +11 -11
  156. package/src/component/utrecht/toptask-link.tokens.json +14 -14
  157. package/src/component/utrecht/toptask-nav.tokens.json +2 -2
  158. package/src/component/utrecht/unordered-list.tokens.json +5 -5
  159. package/src/css-property-formatter.mjs +5 -10
  160. package/src/dark/common/tokens.json +6 -6
  161. package/src/dark/component/tokens.json +115 -115
  162. package/style-dictionary-build-dark.mjs +0 -5
  163. package/style-dictionary-build.mjs +0 -6
  164. package/style-dictionary-config.mjs +4 -4
package/dist/_mixin-theme.scss CHANGED
@@ -3,1253 +3,1253 @@
3
3
  */
4
4
 
5
5
  @mixin utrecht-theme {
6
- --signalen-progress-bar-border-radius: 4px;
7
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
8
- --nl-number-badge-padding-inline: 1ex;
9
- --nl-number-badge-padding-block: 1ex;
10
- --nl-data-badge-border-radius: 0;
11
- --nl-code-block-padding-inline: 20px;
12
- --nl-code-block-padding-block: 20px;
13
- --nl-code-block-font-family: "Monaco";
14
- --denhaag-process-steps-sub-step-marker-size: 12px;
15
- --denhaag-process-steps-step-marker-size: 28px;
16
- --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
17
- --utrecht-stack-focus-z-index: 1;
18
- --utrecht-border-style-dotted: dotted;
19
- --utrecht-border-style-solid: solid;
20
- --utrecht-border-radius-none: 0;
21
- --utrecht-border-radius-round: 999px;
22
- --utrecht-border-radius-lg: 8px;
23
- --utrecht-border-radius-md: 4px;
24
- --utrecht-border-radius-sm: 2px;
25
- --utrecht-border-width-md: 2px;
26
- --utrecht-border-width-sm: 1px;
27
- --utrecht-typography-line-height-4xl: 1.1;
28
- --utrecht-typography-line-height-3xl: 1.25;
29
- --utrecht-typography-line-height-2xl: 1.25;
30
- --utrecht-typography-line-height-xl: 1.25;
31
- --utrecht-typography-line-height-lg: 1.25;
32
- --utrecht-typography-line-height-md: 1.5;
33
- --utrecht-typography-line-height-sm: 1.5;
34
- --utrecht-typography-line-height-xs: 1.5;
35
- --utrecht-typography-font-style-inherit: inherit;
36
- --utrecht-typography-font-style-normal: normal;
37
- --utrecht-typography-weight-scale-bold-font-weight: 700;
38
- --utrecht-typography-weight-scale-semibold-font-weight: 600;
39
- --utrecht-typography-weight-scale-medium-font-weight: 500;
40
- --utrecht-typography-weight-scale-normal-font-weight: 400;
41
- --utrecht-typography-scale-4xl-font-size: 2.5rem; /* 40px */
42
- --utrecht-typography-scale-3xl-font-size: 2rem; /* 32px */
43
- --utrecht-typography-scale-2xl-font-size: 1.5rem; /* 24px */
44
- --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
45
- --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
46
- --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
47
- --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
48
- --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
49
- --utrecht-icon-scale-4xl: 48px;
50
- --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
51
- --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
52
- --utrecht-icon-scale-xl: 26px; /* Formaat social media iconen */
53
- --utrecht-icon-scale-lg: 24px; /* Voor kalender iconen */
54
- --utrecht-icon-scale-md: 16px; /* Formaat voor radio button */
55
- --utrecht-icon-scale-sm: 12px;
56
- --utrecht-icon-scale-xs: 8px;
57
- --utrecht-icon-scale-2xs: 4px;
58
- --utrecht-icon-scale-3xs: 1px;
59
- --utrecht-color-black: hsl(0 0% 0%);
60
- --utrecht-color-white: hsl(0 0% 100%);
61
- --utrecht-color-invalid: #990000;
62
- --utrecht-color-secondary-grey: #757575; /* Grijs */
63
- --utrecht-color-secondary-brown: #ad643b; /* Bruin */
64
- --utrecht-color-secondary-navy: #1c4181; /* Marineblauw */
65
- --utrecht-color-secondary-blue: #006dff; /* Blauw */
66
- --utrecht-color-secondary-cyan: #009ed4; /* Cyaan */
67
- --utrecht-color-secondary-green: #32ab27; /* Groen */
68
- --utrecht-color-secondary-lime: #99d000; /* Lime */
69
- --utrecht-color-secondary-yellow: #ffcc00; /* Geel */
70
- --utrecht-color-secondary-orange: #ff6e00; /* Oranje */
71
- --utrecht-color-secondary-red: #cc0000; /* Red */
72
- --utrecht-color-secondary-magenta: #f02198; /* Magenta */
73
- --utrecht-color-secondary-purple: #762cd1; /* Paars */
74
- --utrecht-color-green-90: hsl(90 30% 90%); /* Achtergrond licht groen */
75
- --utrecht-color-green-80: hsl(90 30% 80%); /* Licht groen */
76
- --utrecht-color-green-50: hsl(90 30% 50%); /* Standaard groen #80a659 */
77
- --utrecht-color-green-40: hsl(90 30% 38%); /* donker groen */
78
- --utrecht-color-green-30: hsl(90 30% 30%); /* donker groen voor darkmode achtergrond */
79
- --utrecht-color-yellow-80: hsl(48 100% 80%); /* spotlight en uitgelicht */
80
- --utrecht-color-yellow-60: hsl(48 100% 60%); /* selecteer geel */
81
- --utrecht-color-yellow-50: hsl(48 100% 50%); /* basis geel #ffcc00 */
82
- --utrecht-color-yellow-40: hsl(48 100% 40%); /* donker geel */
83
- --utrecht-color-yellow-20: hsl(48 100% 20%); /* donker geel voor darkmode achtergrond */
84
- --utrecht-color-grey-95: hsl(0 0% 95%); /* grijs variant voor achtergrond accordion #f2f2f2 */
85
- --utrecht-color-grey-90: hsl(0 0% 90%); /* grijs variant voor achtergrond templates #e6e6e6 */
86
- --utrecht-color-grey-80: hsl(0 0% 80%); /* grijs variant voor achtergrond content #e5e5e5 */
87
- --utrecht-color-grey-40: hsl(0 0% 40%); /* basis grijs #727272 */
88
- --utrecht-color-grey-30: hsl(0 0% 30%); /* border grijs #888 */
89
- --utrecht-color-grey-20: hsl(0 0% 20%); /* experimenteel / beperkt gebruiken */
90
- --utrecht-color-grey-15: hsl(0 0% 15%); /* experimenteel / achtergrond kleur voor darkmode */
91
- --utrecht-color-grey-10: hsl(0 0% 10%); /* experimenteel / beperkt gebruiken */
92
- --utrecht-color-blue-90: hsl(211 60% 90%); /* ijsblauw variant achtergrond, spotlight en uitgelicht */
93
- --utrecht-color-blue-80: hsl(211 60% 80%); /* licht blauw voor achtergrond */
94
- --utrecht-color-blue-60: hsl(211 60% 60%); /* experimenteel / Drak mode link en button kleur */
95
- --utrecht-color-blue-50: hsl(211 60% 50%); /* experimenteel / beperkt gebruiken */
96
- --utrecht-color-blue-40: hsl(211 60% 40%); /* blauw variant bij hover/focus #3669a5 */
97
- --utrecht-color-blue-35: hsl(211 60% 35%); /* basis link en knoppen CTA donkerblauw */
98
- --utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
99
- --utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
100
- --utrecht-color-red-95: hsl(0 100% 95%); /* Achtergrond rode kleur */
101
- --utrecht-color-red-40: hsl(0 100% 40%); /* basis rood #cc0000 */
102
- --utrecht-color-red-30: hsl(0 100% 30%); /* hover rood */
103
- --utrecht-color-red-20: hsl(0 100% 20%); /* donker rood */
104
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
105
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
106
- --utrecht-unordered-list-margin-block-end: 0;
107
- --utrecht-toptask-link-icon-size: 2.25rem;
108
- --utrecht-toptask-link-hover-transform-scale: 1.02;
109
- --utrecht-toptask-link-min-inline-size: 15rem;
110
- --utrecht-toptask-link-min-block-size: 8.25rem;
111
- --utrecht-toptask-link-line-height: 1.2;
112
- --utrecht-tooltip-border-width: 1px;
113
- --utrecht-tooltip-border-radius: 0;
114
- --utrecht-textbox-border-bottom-width: 3px;
115
- --utrecht-textarea-border-bottom-width: 3px;
116
- --utrecht-textarea-border-block-end-width: 3px;
117
- --utrecht-table-cell-icon-size: 1em;
118
- --utrecht-table-cell-padding-inline-start: 0.4em;
119
- --utrecht-table-cell-padding-inline-end: 0.4em;
120
- --utrecht-table-cell-padding-block-start: 0.5em;
121
- --utrecht-table-cell-padding-block-end: 0.5em;
122
- --utrecht-table-cell-line-height: 1.5rem;
123
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
124
- --utrecht-table-header-sticky-border-block-end-width: 2px;
125
- --utrecht-table-caption-margin-block-end: 1em;
126
- --utrecht-table-caption-text-align: start;
127
- --utrecht-table-margin-block-end: 0;
128
- --utrecht-status-badge-border-width: 0px;
129
- --utrecht-separator-block-size: 8px;
130
- --utrecht-select-border-block-end-width: 3px;
131
- --utrecht-search-bar-dropdown-max-block-size: 300px;
132
- --utrecht-search-bar-dropdown-border-width: 1px;
133
- --utrecht-search-bar-input-background-size: 1em;
134
- --utrecht-search-bar-input-background-position-y: 50%;
135
- --utrecht-search-bar-input-background-position-x: .5em;
136
- --utrecht-search-bar-button-hover-scale: 1;
137
- --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
138
- --utrecht-root-line-height: 1.4;
139
- --utrecht-root-font-size-adjust: 0.54;
140
- --utrecht-rich-text-confidant-margin-block-end: 0;
141
- --utrecht-radio-button-border-radius: 0;
142
- --utrecht-radio-button-invalid-border-width: 2px;
143
- --utrecht-radio-button-icon-size: 42%;
144
- --utrecht-radio-button-margin-inline-end: 12px;
145
- --utrecht-radio-button-size: 24px;
146
- --utrecht-radio-button-border-width: 2px;
147
- --utrecht-paragraph-margin-block-end: 0;
148
- --utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
149
- --utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
150
- --utrecht-pagination-relative-link-text-transform: uppercase;
151
- --utrecht-pagination-relative-link-text-decoration: none;
152
- --utrecht-pagination-relative-link-padding-block-start: 0.5em;
153
- --utrecht-pagination-relative-link-padding-block-end: 0.5em;
154
- --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
155
- --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
156
- --utrecht-pagination-relative-link-border-width: 2px;
157
- --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
158
- --utrecht-pagination-page-link-text-decoration: none;
159
- --utrecht-pagination-page-link-padding-block-start: 0.5em;
160
- --utrecht-pagination-page-link-padding-block-end: 0.5em;
161
- --utrecht-pagination-page-link-padding-inline-start: 0.5em;
162
- --utrecht-pagination-page-link-padding-inline-end: 0.5em;
163
- --utrecht-pagination-page-link-border-width: 2px;
164
- --utrecht-pagination-page-link-border-color: transparent;
165
- --utrecht-pagination-page-link-background-color: transparent;
166
- --utrecht-pagination-margin-block-end: 1em;
167
- --utrecht-pagination-margin-block-start: 0;
168
- --utrecht-page-padding-inline-start: 0;
169
- --utrecht-page-padding-block-end: 1em;
170
- --utrecht-page-padding-inline-end: 0;
171
- --utrecht-page-padding-block-start: 1.8em;
172
- --utrecht-page-max-inline-size: 1184px;
173
- --utrecht-page-margin-inline-end: 2em;
174
- --utrecht-page-margin-inline-start: 2em;
175
- --utrecht-page-header-content-padding-inline: 2em;
176
- --utrecht-page-header-content-max-inline-size: 1184px;
177
- --utrecht-page-header-content-padding-inline-end: 2.4em;
178
- --utrecht-page-header-content-padding-inline-start: 2em;
179
- --utrecht-page-header-content-padding-block-end: 1em;
180
- --utrecht-page-header-content-padding-block-start: 1.8em;
181
- --utrecht-page-header-padding-inline-end: 0;
182
- --utrecht-page-header-padding-inline-start: 0;
183
- --utrecht-page-header-padding-block-end: 0;
184
- --utrecht-page-header-padding-block-start: 0;
185
- --utrecht-page-footer-content-max-inline-size: 1184px;
186
- --utrecht-page-content-padding-block-end: 2em;
187
- --utrecht-page-content-padding-block-start: 2em;
188
- --utrecht-page-body-padding-block-start: 0;
189
- --utrecht-page-body-padding-block-end: 0;
190
- --utrecht-page-body-padding-inline-start: 0;
191
- --utrecht-page-body-padding-inline-end: 0;
192
- --utrecht-page-body-content-max-inline-size: 1184px;
193
- --utrecht-page-body-content-padding-inline-end: 2.4em;
194
- --utrecht-page-body-content-padding-inline-start: 2em;
195
- --utrecht-page-body-content-padding-block-end: 1em;
196
- --utrecht-page-body-content-padding-block-start: 0;
197
- --utrecht-ordered-list-item-padding-inline-start: 0;
198
- --utrecht-ordered-list-item-margin-block-end: 0.25em;
199
- --utrecht-ordered-list-item-margin-block-start: 0.25em;
200
- --utrecht-ordered-list-padding-inline-start: 28.8px;
201
- --utrecht-ordered-list-margin-block-end: 1em;
202
- --utrecht-ordered-list-margin-block-start: 0;
203
- --utrecht-number-data-negative-color: red;
204
- --utrecht-number-data-positive-color: green;
205
- --utrecht-navigation-toggle-button-offset-start: 16px;
206
- --utrecht-navigation-toggle-button-offset-end: 16px;
207
- --utrecht-navigation-list-side-nav-inline-size: 100%;
208
- --utrecht-navigation-list-mobile-inline-size: 100%;
209
- --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
210
- --utrecht-navigation-link-mobile-transition-duration: 300ms;
211
- --utrecht-navigation-link-mobile-min-block-size: 44px;
212
- --utrecht-navigation-link-hover-decoration-thickness: 3px;
213
- --utrecht-navigation-link-gap: 8px;
214
- --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
215
- --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
216
- --utrecht-navigation-link-border-inline-end-width: 1px;
217
- --utrecht-navigation-item-mobile-border-block-start-width: 1px;
218
- --utrecht-navigation-item-mobile-border-block-end-width: 1px;
219
- --utrecht-navigation-item-border-block-start-width: 0;
220
- --utrecht-navigation-item-border-block-start-color: transparent;
221
- --utrecht-navigation-item-border-block-end-width: 0;
222
- --utrecht-navigation-item-border-block-end-color: transparent;
223
- --utrecht-navigation-drawer-min-inline-size: 100%;
224
- --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
225
- --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
226
- --utrecht-navigation-border-block-start-width: 0;
227
- --utrecht-navigation-border-block-start-color: transparent;
228
- --utrecht-navigation-border-block-end-width: 0;
229
- --utrecht-navigation-border-block-end-color: transparent;
230
- --utrecht-topnav-link-focus-text-decoration: none;
231
- --utrecht-topnav-link-focus-border-type: dotted;
232
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
233
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
234
- --utrecht-mapcontrolbutton-focus-text-decoration: none;
235
- --utrecht-mapcontrolbutton-border-radius: 2px;
236
- --utrecht-map-marker-icon-size: 30px;
237
- --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
238
- --utrecht-map-marker-border-width: 3px;
239
- --utrecht-map-marker-size: 48px;
240
- --utrecht-logo-min-inline-size: 110.57px;
241
- --utrecht-logo-min-block-size: 58.97px;
242
- --utrecht-logo-max-inline-size: 192px;
243
- --utrecht-logo-max-block-size: 103px;
244
- --utrecht-listbox-option-min-block-size: 44px;
245
- --utrecht-listbox-max-block-size: 300px;
246
- --utrecht-listbox-inline-size: 448px;
247
- --utrecht-list-social-item-margin-inline-end: 10px;
248
- --utrecht-link-icon-size: 1.2em;
249
- --utrecht-link-hover-text-decoration-thickness: 3px;
250
- --utrecht-link-hover-text-decoration: underline;
251
- --utrecht-link-focus-visible-text-decoration: none;
252
- --utrecht-link-text-underline-offset: 3px;
253
- --utrecht-link-text-decoration: underline;
254
- --utrecht-link-social-hover-transform-scale: 1.1;
255
- --utrecht-link-social-icon-size: 26px;
256
- --utrecht-link-social-size: 40px;
257
- --utrecht-link-social-border-width: 2px;
258
- --utrecht-link-list-icon-inset-block-start: 0.15em;
259
- --utrecht-link-list-icon-size: 14px;
260
- --utrecht-link-list-link-text-decoration: none;
261
- --utrecht-icon-baseline-inset-block-start: 0.125em;
262
- --utrecht-icon-size: 48px;
263
- --utrecht-heading-5-margin-block-start: 1rem;
264
- --utrecht-heading-5-margin-block-end: 0.2rem;
265
- --utrecht-heading-4-margin-block-start: 1.2rem;
266
- --utrecht-heading-4-margin-block-end: 0.3rem;
267
- --utrecht-heading-3-margin-block-start: 1rem;
268
- --utrecht-heading-3-margin-block-end: 0.2rem;
269
- --utrecht-heading-2-margin-block-start: 1.5rem;
270
- --utrecht-heading-2-margin-block-end: 0.3rem;
271
- --utrecht-heading-1-margin-block-start: 0.67rem;
272
- --utrecht-heading-1-margin-block-end: 0.67rem;
273
- --utrecht-grid-columns: 12;
274
- --utrecht-grid-spacing-lg: 24px;
275
- --utrecht-grid-spacing-md: 16px;
276
- --utrecht-grid-spacing-sm: 8px;
277
- --utrecht-form-toggle-focus-border-width: 2px;
278
- --utrecht-form-toggle-focus-border-style: dotted;
279
- --utrecht-form-toggle-thumb-disabled-box-shadow: 0;
280
- --utrecht-form-toggle-thumb-min-inline-size: 18px;
281
- --utrecht-form-toggle-thumb-margin-inline-end: .25em;
282
- --utrecht-form-toggle-thumb-margin-inline-start: .25em;
283
- --utrecht-form-toggle-width: 48px;
284
- --utrecht-form-toggle-padding-block-start: 0;
285
- --utrecht-form-toggle-padding-block-end: 0;
286
- --utrecht-form-toggle-padding-inline-start: 0;
287
- --utrecht-form-toggle-padding-inline-end: 0;
288
- --utrecht-form-toggle-height: 24px;
289
- --utrecht-form-toggle-border-width: 2px;
290
- --utrecht-form-toggle-border-radius: 10em;
291
- --utrecht-form-toggle-border-style: solid;
292
- --utrecht-form-toggle-border-color: transparent;
293
- --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
294
- --utrecht-form-label-font-size: 1em;
295
- --utrecht-form-field-invalid-border-inline-start-width: 3px;
296
- --utrecht-form-control-block-size: 42px;
297
- --utrecht-form-control-read-only-border-color: transparent;
298
- --utrecht-form-control-padding-inline-start: 12px;
299
- --utrecht-form-control-padding-inline-end: 12px;
300
- --utrecht-form-control-padding-block-start: 8px;
301
- --utrecht-form-control-padding-block-end: 8px;
302
- --utrecht-form-control-max-inline-size: 28em;
303
- --utrecht-form-control-border-radius: 0;
304
- --utrecht-focus-outline-style: dotted;
305
- --utrecht-flo-decision-question-section-border-block-width: 3px;
306
- --utrecht-flo-decision-explanation-button-background-color: transparent;
307
- --utrecht-flo-decision-explanation-margin-block-start: 0;
308
- --utrecht-figure-caption-color: #727272;
309
- --utrecht-drawer-max-inline-size: 320px;
310
- --utrecht-drawer-max-block-size: 240px;
311
- --utrecht-drawer-border-width: 1px;
312
- --utrecht-document-line-height: 1.4;
313
- --utrecht-data-list-rows-column-inline-size: 80%;
314
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
315
- --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
316
- --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
317
- --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
318
- --utrecht-space-column-2xl: 28px; /* Extra Large 2 */
319
- --utrecht-space-column-xl: 24px; /* Extra Large */
320
- --utrecht-space-column-lg: 20px; /* Large */
321
- --utrecht-space-column-md: 16px; /* Medium */
322
- --utrecht-space-column-sm: 12px; /* Small */
323
- --utrecht-space-column-xs: 8px; /* Extra Small */
324
- --utrecht-space-column-2xs: 4px; /* Extra Small 2 */
325
- --utrecht-space-column-3xs: 2px; /* Extra Small 3 */
326
- --utrecht-space-column-4xs: 1px; /* Extra Small 4 */
327
- --utrecht-space-row-5xl: 64px; /* Extra Large 5 */
328
- --utrecht-space-row-4xl: 48px; /* Extra Large 4 */
329
- --utrecht-space-row-3xl: 32px; /* Extra Large 3 */
330
- --utrecht-space-row-2xl: 28px; /* Extra Large 2 */
331
- --utrecht-space-row-xl: 24px; /* Extra Large */
332
- --utrecht-space-row-lg: 20px; /* Large */
333
- --utrecht-space-row-md: 16px; /* Medium */
334
- --utrecht-space-row-sm: 12px; /* Small */
335
- --utrecht-space-row-xs: 8px; /* Extra Small */
336
- --utrecht-space-row-2xs: 4px; /* Extra Small 2 */
337
- --utrecht-space-row-3xs: 2px; /* Extra Small 3 */
338
- --utrecht-space-row-4xs: 1px; /* Extra Small 4 */
339
- --utrecht-space-text-3xl: 3ch; /* Extra Large 3 */
340
- --utrecht-space-text-2xl: 2ch; /* Extra Large 2 */
341
- --utrecht-space-text-xl: 1.75ch; /* Extra Large */
342
- --utrecht-space-text-lg: 1.5ch; /* Large */
343
- --utrecht-space-text-md: 1ch; /* Medium */
344
- --utrecht-space-text-sm: 0.75ch; /* Small */
345
- --utrecht-space-text-xs: 0.5ch; /* Extra Small */
346
- --utrecht-space-text-2xs: 0.25ch; /* Extra Small 2 */
347
- --utrecht-space-text-3xs: 0.125ch; /* Extra Small 3 */
348
- --utrecht-space-inline-4xl: 48px; /* Extra Large 4 */
349
- --utrecht-space-inline-3xl: 32px; /* Extra Large 3 */
350
- --utrecht-space-inline-2xl: 28px; /* Extra Large 2 */
351
- --utrecht-space-inline-xl: 24px; /* Extra Large */
352
- --utrecht-space-inline-lg: 20px; /* Large */
353
- --utrecht-space-inline-md: 16px; /* Medium */
354
- --utrecht-space-inline-sm: 12px; /* Small */
355
- --utrecht-space-inline-xs: 8px; /* Extra Small */
356
- --utrecht-space-inline-2xs: 4px; /* Extra Small 2 */
357
- --utrecht-space-inline-3xs: 2px; /* Extra Small 3 */
358
- --utrecht-space-block-4xs: 1px;
359
- --utrecht-space-block-4xl: 64px; /* Extra Large 4 */
360
- --utrecht-space-block-3xl: 48px; /* Extra Large 3 */
361
- --utrecht-space-block-2xl: 32px; /* Extra Large 2 */
362
- --utrecht-space-block-xl: 24px; /* Extra Large */
363
- --utrecht-space-block-lg: 20px; /* Large */
364
- --utrecht-space-block-md: 16px; /* Medium */
365
- --utrecht-space-block-sm: 12px; /* Small */
366
- --utrecht-space-block-xs: 8px; /* Extra Small */
367
- --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
368
- --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
369
- --utrecht-pointer-target-min-size: 44px;
370
- --utrecht-action-submit-cursor: pointer;
371
- --utrecht-action-navigate-cursor: pointer;
372
- --utrecht-action-inert-cursor: default;
373
- --utrecht-action-disabled-cursor: not-allowed;
374
- --utrecht-action-busy-cursor: wait;
375
- --utrecht-action-activate-cursor: pointer;
376
- --utrecht-column-layout-column-width: 350px;
377
- --utrecht-column-layout-column-rule-width: 2px;
378
- --utrecht-checkbox-margin-block-start: 0;
379
- --utrecht-checkbox-focus-border-width: 2px;
380
- --utrecht-checkbox-size: 24px;
381
- --utrecht-checkbox-border-width: 2px;
382
- --utrecht-checkbox-border-radius: 0;
383
- --utrecht-card-link-hover-text-decoration-thickness: 3px;
384
- --utrecht-calendar-icon-size: 24px;
385
- --utrecht-calendar-navigation-label-min-inline-size: 200px;
386
- --utrecht-calendar-navigation-padding-block-end: 2px;
387
- --utrecht-calendar-navigation-padding-block-start: 2px;
388
- --utrecht-calendar-table-days-item-day-disabled-border-color: transparent;
389
- --utrecht-calendar-table-days-item-day-selected-border-color: transparent;
390
- --utrecht-calendar-table-days-item-day-emphasis-border-color: transparent;
391
- --utrecht-calendar-table-days-item-day-is-today-font-weight: 700;
392
- --utrecht-calendar-table-days-item-day-out-of-the-month-border-color: transparent;
393
- --utrecht-calendar-table-days-item-day-active-border-color: transparent;
394
- --utrecht-calendar-table-days-item-day-focus-border-color: transparent;
395
- --utrecht-calendar-table-days-item-day-border-color: transparent;
396
- --utrecht-calendar-table-days-item-day-border-width: 2px;
397
- --utrecht-calendar-table-days-item-day-size: 44px;
398
- --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
399
- --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
400
- --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
401
- --utrecht-calendar-table-weeks-item-width: 44px;
402
- --utrecht-button-subtle-disabled-background-color: transparent;
403
- --utrecht-button-subtle-border-color: transparent;
404
- --utrecht-button-subtle-background-color: transparent;
405
- --utrecht-button-primary-action-danger-hover-border-color: transparent;
406
- --utrecht-button-primary-action-danger-border-color: transparent;
407
- --utrecht-button-primary-action-warning-hover-border-color: transparent;
408
- --utrecht-button-primary-action-warning-border-color: transparent;
409
- --utrecht-button-primary-action-ready-hover-border-color: transparent;
410
- --utrecht-button-primary-action-ready-border-color: transparent;
411
- --utrecht-button-primary-action-hover-border-color: transparent;
412
- --utrecht-button-primary-action-border-color: transparent;
413
- --utrecht-button-hover-scale: 1.02;
414
- --utrecht-button-focus-scale: 1.02;
415
- --utrecht-button-margin-inline-end: 0;
416
- --utrecht-button-margin-inline-start: 0;
417
- --utrecht-button-border-width: 1px;
418
- --utrecht-button-border-radius: 0;
419
- --utrecht-breadcrumb-nav-divider-inline-size: 1px;
420
- --utrecht-breadcrumb-nav-link-text-decoration: none;
421
- --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
422
- --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
423
- --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
424
- --utrecht-breadcrumb-nav-min-block-size: 34px;
425
- --utrecht-body-line-height: 1.4;
426
- --utrecht-blockquote-margin-block-end: 1.6em;
427
- --utrecht-blockquote-margin-block-start: 1.6em;
428
- --utrecht-blockquote-margin-inline-end: 1.6em;
429
- --utrecht-blockquote-margin-inline-start: 1.6em;
430
- --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
431
- --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
432
- --utrecht-backdrop-reduced-transparency-opacity: 0.98;
433
- --utrecht-backdrop-fade-in-animation-duration: 400ms;
434
- --utrecht-backdrop-opacity: 0.8;
435
- --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
436
- --utrecht-article-max-inline-size: 780px;
437
- --utrecht-alert-icon-inset-block-start: 6px;
438
- --utrecht-alert-icon-size: 24px;
439
- --utrecht-alert-dialog-min-inline-size: 320px;
440
- --utrecht-alert-dialog-min-block-size: 100px;
441
- --utrecht-alert-dialog-max-block-size: 80vh;
442
- --utrecht-accordion-section-border-width: 2px;
443
- --utrecht-accordion-panel-border-width: 0;
444
- --utrecht-accordion-panel-border-color: transparent;
445
- --utrecht-accordion-button-icon-size: 24px;
446
- --utrecht-accordion-button-focus-visible-border-width: 2px;
447
- --utrecht-accordion-button-focus-border-color: transparent;
448
- --utrecht-accordion-button-active-border-color: transparent;
449
- --utrecht-accordion-button-hover-border-color: transparent;
450
- --utrecht-accordion-button-border-width: 0;
451
- --utrecht-accordion-button-border-color: transparent;
452
- --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
453
- --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
454
- --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
455
- --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
456
- --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
457
- --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
458
- --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
459
- --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
460
- --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
461
- --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
462
- --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
463
- --nl-number-badge-color: var(--utrecht-color-white);
464
- --nl-number-badge-background-color: var(--utrecht-color-red-40);
465
- --nl-mark-color: var(--utrecht-color-black);
466
- --nl-mark-background-color: var(--utrecht-color-yellow-60);
467
- --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
468
- --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
469
- --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
470
- --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
471
- --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
472
- --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
473
- --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
474
- --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
475
- --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
476
- --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
477
- --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
478
- --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
479
- --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
480
- --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
481
- --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
482
- --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
483
- --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
484
- --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
485
- --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
486
- --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
487
- --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
488
- --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
489
- --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
490
- --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
491
- --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
492
- --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
493
- --nl-data-badge-color: var(--utrecht-color-white);
494
- --nl-data-badge-background-color: var(--utrecht-color-grey-30);
495
- --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
496
- --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
497
- --nl-code-block-color: var(--utrecht-color-black);
498
- --nl-code-block-background-color: var(--utrecht-color-grey-95);
499
- --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
500
- --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
501
- --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
502
- --denhaag-process-steps-step-description-font-size: var(--utrecht-typography-scale-md-font-size);
503
- --denhaag-process-steps-step-description-color: var(--utrecht-color-black);
504
- --denhaag-process-steps-step-metadata-font-size: var(--utrecht-typography-scale-sm-font-size);
505
- --denhaag-process-steps-step-metadata-color: var(--utrecht-color-grey-15);
506
- --denhaag-process-steps-step-line-warning-color: var(--utrecht-color-invalid);
507
- --denhaag-process-steps-step-line-checked-color: var(--utrecht-color-green-30);
508
- --denhaag-process-steps-step-line-color: var(--utrecht-color-green-30);
509
- --denhaag-process-steps-step-line-stroke-width: var(--utrecht-border-width-md);
510
- --denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
511
- --denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
512
- --denhaag-process-steps-step-marker-warning-color: var(--utrecht-color-invalid);
513
- --denhaag-process-steps-step-marker-warning-background-color: var(--utrecht-color-white);
514
- --denhaag-process-steps-step-marker-warning-border-color: var(--utrecht-color-invalid);
515
- --denhaag-process-steps-step-marker-checked-color: var(--utrecht-color-green-30);
516
- --denhaag-process-steps-step-marker-checked-border-width: var(--utrecht-border-width-md);
517
- --denhaag-process-steps-step-marker-checked-background-color: var(--utrecht-color-white);
518
- --denhaag-process-steps-step-marker-checked-border-color: var(--utrecht-color-green-30);
519
- --denhaag-process-steps-step-marker-current-color: var(--utrecht-color-white);
520
- --denhaag-process-steps-step-marker-current-border-width: var(--utrecht-border-width-md);
521
- --denhaag-process-steps-step-marker-current-background-color: var(--utrecht-color-green-30);
522
- --denhaag-process-steps-step-marker-current-border-color: var(--utrecht-color-green-30);
523
- --denhaag-process-steps-step-marker-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
524
- --denhaag-process-steps-step-marker-font-size: var(--utrecht-typography-scale-sm-font-size);
525
- --denhaag-process-steps-step-marker-color: var(--utrecht-color-green-30);
526
- --denhaag-process-steps-step-marker-border-width: var(--utrecht-border-width-md);
527
- --denhaag-process-steps-step-marker-background-color: var(--utrecht-color-white);
528
- --denhaag-process-steps-step-marker-border-color: var(--utrecht-color-green-30);
529
- --denhaag-process-steps-step-heading-warning-color: var(--utrecht-color-black);
530
- --denhaag-process-steps-step-heading-not-checked-color: var(--utrecht-color-black);
531
- --denhaag-process-steps-step-heading-checked-background-color: var(--utrecht-color-white);
532
- --denhaag-process-steps-step-heading-checked-color: var(--utrecht-color-black);
533
- --denhaag-process-steps-step-heading-current-color: var(--utrecht-color-black);
534
- --denhaag-process-steps-step-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
535
- --denhaag-process-steps-step-heading-font-size: var(--utrecht-typography-scale-lg-font-size);
536
- --denhaag-process-steps-step-heading-font-family: var(--utrecht-typography-sans-serif-font-family);
537
- --denhaag-process-steps-step-heading-color: var(--utrecht-color-black);
538
- --denhaag-process-steps-font-family: var(--utrecht-typography-sans-serif-font-family);
539
- --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
540
- --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
541
- --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
542
- --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
543
- --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
544
- --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
545
- --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
546
- --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
547
- --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
548
- --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
549
- --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
550
- --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
551
- --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
552
- --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
553
- --utrecht-tooltip-color: var(--utrecht-color-grey-40);
554
- --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
555
- --utrecht-tooltip-background-color: var(--utrecht-color-white);
556
- --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
557
- --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
558
- --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
559
- --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
560
- --utrecht-table-row-alternate-odd-background-color: var(--utrecht-color-white);
561
- --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
562
- --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
563
- --utrecht-table-cell-selected-color: var(--utrecht-color-black);
564
- --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
565
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
566
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
567
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
568
- --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
569
- --utrecht-table-header-sticky-color: var(--utrecht-color-black);
570
- --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
571
- --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
572
- --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
573
- --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
574
- --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
575
- --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
576
- --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
577
- --utrecht-surface-color: var(--utrecht-color-grey-10);
578
- --utrecht-surface-background-color: var(--utrecht-color-grey-95);
579
- --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
580
- --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
581
- --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
582
- --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
583
- --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-90);
584
- --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
585
- --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
586
- --utrecht-spotlight-section-padding-block-end: var(--utrecht-space-block-sm);
587
- --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
588
- --utrecht-spotlight-section-color: var(--utrecht-color-black);
589
- --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
590
- --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
591
- --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
592
- --utrecht-separator-color: var(--utrecht-color-blue-90);
593
- --utrecht-search-bar-list-item-is-selected-background-color: var(--utrecht-color-grey-95);
594
- --utrecht-search-bar-list-item-is-selected-color: var(--utrecht-color-black);
595
- --utrecht-search-bar-list-item-is-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
596
- --utrecht-search-bar-list-item-is-active-background-color: var(--utrecht-color-grey-95);
597
- --utrecht-search-bar-list-item-is-active-color: var(--utrecht-color-black);
598
- --utrecht-search-bar-section-title-margin-inline-start: var(--utrecht-space-inline-xs);
599
- --utrecht-search-bar-section-title-color: var(--utrecht-color-black);
600
- --utrecht-search-bar-section-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
601
- --utrecht-search-bar-section-title-font-size: var(--utrecht-typography-scale-md-font-size);
602
- --utrecht-search-bar-section-margin-block-end: var(--utrecht-space-inline-xs);
603
- --utrecht-search-bar-dropdown-padding-block-end: var(--utrecht-space-block-xs);
604
- --utrecht-search-bar-dropdown-padding-block-start: var(--utrecht-space-block-xs);
605
- --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
606
- --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
607
- --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
608
- --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
609
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
610
- --utrecht-search-bar-button-color: var(--utrecht-color-white);
611
- --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
612
- --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
613
- --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
614
- --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
615
- --utrecht-root-color: var(--utrecht-color-black);
616
- --utrecht-root-background-color: var(--utrecht-color-white);
617
- --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
618
- --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
619
- --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
620
- --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
621
- --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
622
- --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
623
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
624
- --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
625
- --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
626
- --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
627
- --utrecht-radio-button-checked-hover-color: var(--utrecht-color-blue-90);
628
- --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
629
- --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
630
- --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
631
- --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
632
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
633
- --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
634
- --utrecht-radio-button-color: var(--utrecht-color-white);
635
- --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
636
- --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
637
- --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
638
- --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
639
- --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
640
- --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
641
- --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
642
- --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
643
- --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
644
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
645
- --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
646
- --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
647
- --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
648
- --utrecht-pagination-page-link-hover-background-color: var(--utrecht-color-blue-35);
649
- --utrecht-pagination-page-link-current-color: var(--utrecht-color-white);
650
- --utrecht-pagination-page-link-current-border-color: var(--utrecht-color-blue-35);
651
- --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
652
- --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
653
- --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
654
- --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
655
- --utrecht-page-color: var(--utrecht-color-black);
656
- --utrecht-page-background-color: var(--utrecht-color-white);
657
- --utrecht-page-header-content-color: var(--utrecht-color-black);
658
- --utrecht-page-header-content-background-color: var(--utrecht-color-white);
659
- --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
660
- --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
661
- --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
662
- --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
663
- --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
664
- --utrecht-page-footer-color: var(--utrecht-color-white);
665
- --utrecht-page-body-content-color: var(--utrecht-color-black);
666
- --utrecht-page-body-content-background-color: var(--utrecht-color-white);
667
- --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
668
- --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
669
- --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
670
- --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
671
- --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
672
- --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
673
- --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
674
- --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
675
- --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
676
- --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
677
- --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
678
- --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
679
- --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
680
- --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
681
- --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
682
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
683
- --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
684
- --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
685
- --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
686
- --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
687
- --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
688
- --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
689
- --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
690
- --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
691
- --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
692
- --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
693
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
694
- --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
695
- --utrecht-navigation-link-color: var(--utrecht-color-white);
696
- --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
697
- --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
698
- --utrecht-navigation-link-active-color: var(--utrecht-color-white);
699
- --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
700
- --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
701
- --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
702
- --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
703
- --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
704
- --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
705
- --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
706
- --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
707
- --utrecht-topnav-link-color: var(--utrecht-color-white);
708
- --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
709
- --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
710
- --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
711
- --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
712
- --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
713
- --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
714
- --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
715
- --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
716
- --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
717
- --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
718
- --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
719
- --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
720
- --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
721
- --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
722
- --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
723
- --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
724
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
725
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
726
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
727
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
728
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
729
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
730
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
731
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
732
- --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
733
- --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
734
- --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
735
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
736
- --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
737
- --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
738
- --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
739
- --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
740
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
741
- --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
742
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
743
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
744
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
745
- --utrecht-map-marker-border-color: var(--utrecht-color-white);
746
- --utrecht-map-marker-color: var(--utrecht-color-white);
747
- --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
748
- --utrecht-listbox-option-group-title-margin-inline-start: var(--utrecht-space-inline-xs);
749
- --utrecht-listbox-option-group-title-color: var(--utrecht-color-black);
750
- --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
751
- --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
752
- --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
753
- --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
754
- --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
755
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
756
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
757
- --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
758
- --utrecht-listbox-option-active-color: var(--utrecht-color-black);
759
- --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
760
- --utrecht-listbox-option-padding-inline-start: var(--utrecht-space-inline-xs);
761
- --utrecht-listbox-option-padding-inline-end: var(--utrecht-space-inline-xs);
762
- --utrecht-listbox-option-padding-block-start: var(--utrecht-space-block-xs);
763
- --utrecht-listbox-option-padding-block-end: var(--utrecht-space-block-xs);
764
- --utrecht-listbox-background-color: var(--utrecht-color-white);
765
- --utrecht-link-placeholder-color: var(--utrecht-color-grey-40);
766
- --utrecht-link-focus-color: var(--utrecht-color-blue-40);
767
- --utrecht-link-color: var(--utrecht-color-blue-35);
768
- --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
769
- --utrecht-link-social-color: var(--utrecht-color-white);
770
- --utrecht-link-social-border-color: var(--utrecht-color-white);
771
- --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
772
- --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
773
- --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
774
- --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
775
- --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
776
- --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
777
- --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
778
- --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
779
- --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
780
- --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
781
- --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
782
- --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
783
- --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
784
- --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
785
- --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
786
- --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
787
- --utrecht-form-toggle-color: var(--utrecht-color-black);
788
- --utrecht-form-toggle-background-color: var(--utrecht-color-white);
789
- --utrecht-form-label-radio-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
790
- --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
791
- --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
792
- --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
793
- --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
794
- --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
795
- --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
796
- --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
797
- --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
798
- --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
799
- --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
800
- --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
801
- --utrecht-form-fieldset-margin-block-end: var(--utrecht-space-block-2xs);
802
- --utrecht-form-field-description-margin-block-end: var(--utrecht-space-block-sm);
803
- --utrecht-form-field-description-margin-block-start: var(--utrecht-space-block-sm);
804
- --utrecht-form-field-label-margin-block-end: var(--utrecht-space-block-sm);
805
- --utrecht-form-field-invalid-padding-inline-start: var(--utrecht-space-block-sm);
806
- --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
807
- --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
808
- --utrecht-form-control-read-only-color: var(--utrecht-color-grey-20);
809
- --utrecht-form-control-read-only-background-color: var(--utrecht-color-grey-90);
810
- --utrecht-form-control-focus-border-color: var(--utrecht-color-grey-80);
811
- --utrecht-form-control-placeholder-font-style: var(--utrecht-typography-font-style-normal);
812
- --utrecht-form-control-placeholder-color: var(--utrecht-color-grey-40);
813
- --utrecht-form-control-font-size: var(--utrecht-typography-scale-md-font-size);
814
- --utrecht-form-control-color: var(--utrecht-color-black);
815
- --utrecht-form-control-border-width: var(--utrecht-border-width-sm);
816
- --utrecht-form-control-border-color: var(--utrecht-color-grey-30);
817
- --utrecht-form-control-background-color: var(--utrecht-color-white);
818
- --utrecht-focus-inverse-outline-color: var(--utrecht-color-white);
819
- --utrecht-focus-outline-width: var(--utrecht-border-width-md);
820
- --utrecht-focus-outline-color: var(--utrecht-color-black);
821
- --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
822
- --utrecht-flo-decision-outcomes-container-padding-block: var(--utrecht-space-block-2xl);
823
- --utrecht-flo-decision-outcomes-container-padding-inline: var(--utrecht-space-inline-2xl);
824
- --utrecht-flo-decision-outcomes-container-margin-block-start: var(--utrecht-space-block-xl);
825
- --utrecht-flo-decision-outcomes-container-background-color: var(--utrecht-color-white);
826
- --utrecht-flo-decision-question-section-border-block-color: var(--utrecht-color-green-50);
827
- --utrecht-flo-decision-question-section-background-color: var(--utrecht-color-green-90);
828
- --utrecht-flo-decision-question-section-padding-block-start: var(--utrecht-space-block-xl);
829
- --utrecht-flo-decision-question-section-padding-block-end: var(--utrecht-space-block-xl);
830
- --utrecht-flo-decision-question-answers-option-column-gap: var(--utrecht-space-inline-sm);
831
- --utrecht-flo-decision-question-answers-row-gap: var(--utrecht-space-block-xs);
832
- --utrecht-flo-decision-question-description-column-gap: var(--utrecht-space-inline-sm);
833
- --utrecht-flo-decision-form-nav-padding-block: var(--utrecht-space-block-xl);
834
- --utrecht-flo-decision-form-button-disabled-color: var(--utrecht-color-grey-40);
835
- --utrecht-flo-decision-form-margin-block-end: var(--utrecht-space-block-xs);
836
- --utrecht-flo-decision-form-margin-block-start: var(--utrecht-space-block-xl);
837
- --utrecht-flo-decision-form-background-color: var(--utrecht-color-green-90);
838
- --utrecht-flo-decision-form-padding-inline: var(--utrecht-space-inline-3xl);
839
- --utrecht-flo-decision-form-padding-block: var(--utrecht-space-block-md);
840
- --utrecht-flo-decision-label-checkbox-margin-block-start: var(--utrecht-space-block-sm);
841
- --utrecht-flo-decision-label-checkbox-column-gap: var(--utrecht-space-inline-xs);
842
- --utrecht-flo-decision-explanation-container-margin-block-start: var(--utrecht-space-block-sm);
843
- --utrecht-flo-decision-explanation-button-close-margin-block-end: var(--utrecht-space-block-sm);
844
- --utrecht-flo-decision-explanation-button-border-color: var(--utrecht-color-black);
845
- --utrecht-flo-decision-explanation-margin-inline-start: var(--utrecht-space-block-xl);
846
- --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
847
- --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
848
- --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
849
- --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
850
- --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
851
- --utrecht-drawer-padding-block-start: var(--utrecht-space-block-md);
852
- --utrecht-drawer-padding-block-end: var(--utrecht-space-block-md);
853
- --utrecht-drawer-border-color: var(--utrecht-color-grey-90);
854
- --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
855
- --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
856
- --utrecht-document-color: var(--utrecht-color-black);
857
- --utrecht-document-background-color: var(--utrecht-color-white);
858
- --utrecht-data-placeholder-background-color: var(--utrecht-color-grey-40);
859
- --utrecht-data-list-rows-item-value-margin-block-start: var(--utrecht-space-block-xs);
860
- --utrecht-data-list-rows-item-margin-block-start: var(--utrecht-space-block-md);
861
- --utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
862
- --utrecht-data-list-margin-block-start: var(--utrecht-space-block-md);
863
- --utrecht-data-list-margin-block-end: var(--utrecht-space-block-md);
864
- --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
865
- --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
866
- --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
867
- --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
868
- --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
869
- --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
870
- --utrecht-feedback-invalid-color: var(--utrecht-color-invalid);
871
- --utrecht-feedback-invalid-border-color: var(--utrecht-color-invalid);
872
- --utrecht-feedback-invalid-background-color: var(--utrecht-color-invalid);
873
- --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
874
- --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
875
- --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
876
- --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
877
- --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
878
- --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
879
- --utrecht-column-layout-gap: var(--utrecht-space-column-md);
880
- --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
881
- --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
882
- --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
883
- --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
884
- --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
885
- --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
886
- --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
887
- --utrecht-code-block-font-family: var(--nl-code-block-font-family);
888
- --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
889
- --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
890
- --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
891
- --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
892
- --utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
893
- --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
894
- --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
895
- --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
896
- --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
897
- --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
898
- --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
899
- --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
900
- --utrecht-card-heading-color: var(--utrecht-color-blue-35);
901
- --utrecht-card-color: var(--utrecht-color-black);
902
- --utrecht-card-background-color: var(--utrecht-color-blue-90);
903
- --utrecht-calendar-navigation-label-font-size: var(--utrecht-typography-scale-lg-font-size);
904
- --utrecht-calendar-navigation-label-color: var(--utrecht-color-black);
905
- --utrecht-calendar-navigation-color: var(--utrecht-color-blue-30);
906
- --utrecht-calendar-table-days-item-day-disabled-color: var(--utrecht-color-grey-40);
907
- --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
908
- --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
909
- --utrecht-calendar-table-days-item-day-is-today-border-color: var(--utrecht-color-blue-35);
910
- --utrecht-calendar-table-days-item-day-is-today-color: var(--utrecht-color-blue-30);
911
- --utrecht-calendar-table-days-item-day-is-today-background-color: var(--utrecht-color-blue-90);
912
- --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);
913
- --utrecht-calendar-table-days-item-day-hover-border-color: var(--utrecht-color-black);
914
- --utrecht-calendar-table-days-item-day-hover-color: var(--utrecht-color-blue-40);
915
- --utrecht-calendar-table-days-item-day-color: var(--utrecht-color-black);
916
- --utrecht-button-subtle-ready-focus-color: var(--utrecht-color-green-40);
917
- --utrecht-button-subtle-ready-hover-color: var(--utrecht-color-green-40);
918
- --utrecht-button-subtle-ready-color: var(--utrecht-color-green-50);
919
- --utrecht-button-subtle-danger-focus-color: var(--utrecht-color-red-30);
920
- --utrecht-button-subtle-danger-hover-color: var(--utrecht-color-red-30);
921
- --utrecht-button-subtle-danger-color: var(--utrecht-color-red-40);
922
- --utrecht-button-subtle-focus-color: var(--utrecht-color-blue-35);
923
- --utrecht-button-subtle-focus-border-color: var(--utrecht-color-blue-35);
924
- --utrecht-button-subtle-focus-background-color: var(--utrecht-color-white);
925
- --utrecht-button-subtle-hover-color: var(--utrecht-color-blue-35);
926
- --utrecht-button-subtle-hover-border-color: var(--utrecht-color-blue-40);
927
- --utrecht-button-subtle-hover-background-color: var(--utrecht-color-white);
928
- --utrecht-button-subtle-disabled-color: var(--utrecht-color-grey-80);
929
- --utrecht-button-subtle-active-color: var(--utrecht-color-white);
930
- --utrecht-button-subtle-active-background-color: var(--utrecht-color-blue-35);
931
- --utrecht-button-subtle-color: var(--utrecht-color-blue-35);
932
- --utrecht-button-subtle-border-width: var(--utrecht-border-width-md);
933
- --utrecht-button-secondary-action-ready-focus-border-color: var(--utrecht-color-green-40);
934
- --utrecht-button-secondary-action-ready-hover-color: var(--utrecht-color-green-40);
935
- --utrecht-button-secondary-action-ready-hover-border-color: var(--utrecht-color-green-40);
936
- --utrecht-button-secondary-action-ready-color: var(--utrecht-color-grey-40);
937
- --utrecht-button-secondary-action-ready-border-color: var(--utrecht-color-green-50);
938
- --utrecht-button-secondary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
939
- --utrecht-button-secondary-action-warning-hover-color: var(--utrecht-color-yellow-40);
940
- --utrecht-button-secondary-action-warning-hover-border-color: var(--utrecht-color-yellow-40);
941
- --utrecht-button-secondary-action-warning-color: var(--utrecht-color-grey-40);
942
- --utrecht-button-secondary-action-warning-border-color: var(--utrecht-color-yellow-50);
943
- --utrecht-button-secondary-action-danger-focus-border-color: var(--utrecht-color-red-30);
944
- --utrecht-button-secondary-action-danger-hover-color: var(--utrecht-color-red-30);
945
- --utrecht-button-secondary-action-danger-hover-border-color: var(--utrecht-color-red-30);
946
- --utrecht-button-secondary-action-danger-color: var(--utrecht-color-red-40);
947
- --utrecht-button-secondary-action-danger-border-color: var(--utrecht-color-red-40);
948
- --utrecht-button-secondary-action-hover-color: var(--utrecht-color-blue-35);
949
- --utrecht-button-secondary-action-hover-border-color: var(--utrecht-color-blue-40);
950
- --utrecht-button-secondary-action-hover-background-color: var(--utrecht-color-white);
951
- --utrecht-button-secondary-action-disabled-color: var(--utrecht-color-grey-80);
952
- --utrecht-button-secondary-action-disabled-border-color: var(--utrecht-color-grey-80);
953
- --utrecht-button-secondary-action-disabled-background-color: var(--utrecht-color-white);
954
- --utrecht-button-secondary-action-active-color: var(--utrecht-color-blue-30);
955
- --utrecht-button-secondary-action-active-border-color: var(--utrecht-color-blue-30);
956
- --utrecht-button-secondary-action-active-background-color: var(--utrecht-color-white);
957
- --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
958
- --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
959
- --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
960
- --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
961
- --utrecht-button-primary-action-danger-focus-border-color: var(--utrecht-color-red-30);
962
- --utrecht-button-primary-action-danger-focus-background-color: var(--utrecht-color-red-30);
963
- --utrecht-button-primary-action-danger-hover-color: var(--utrecht-color-white);
964
- --utrecht-button-primary-action-danger-hover-background-color: var(--utrecht-color-red-30);
965
- --utrecht-button-primary-action-danger-disabled-border-color: var(--utrecht-color-grey-90);
966
- --utrecht-button-primary-action-danger-color: var(--utrecht-color-white);
967
- --utrecht-button-primary-action-danger-background-color: var(--utrecht-color-red-40);
968
- --utrecht-button-primary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
969
- --utrecht-button-primary-action-warning-focus-background-color: var(--utrecht-color-yellow-40);
970
- --utrecht-button-primary-action-warning-hover-color: var(--utrecht-color-black);
971
- --utrecht-button-primary-action-warning-hover-background-color: var(--utrecht-color-yellow-40);
972
- --utrecht-button-primary-action-warning-disabled-border-color: var(--utrecht-color-grey-90);
973
- --utrecht-button-primary-action-warning-color: var(--utrecht-color-black);
974
- --utrecht-button-primary-action-warning-background-color: var(--utrecht-color-yellow-50);
975
- --utrecht-button-primary-action-ready-focus-border-color: var(--utrecht-color-green-40);
976
- --utrecht-button-primary-action-ready-focus-background-color: var(--utrecht-color-green-40);
977
- --utrecht-button-primary-action-ready-hover-color: var(--utrecht-color-white);
978
- --utrecht-button-primary-action-ready-hover-background-color: var(--utrecht-color-green-40);
979
- --utrecht-button-primary-action-ready-disabled-border-color: var(--utrecht-color-grey-90);
980
- --utrecht-button-primary-action-ready-color: var(--utrecht-color-black);
981
- --utrecht-button-primary-action-ready-background-color: var(--utrecht-color-green-50);
982
- --utrecht-button-primary-action-focus-border-width: var(--utrecht-border-width-md);
983
- --utrecht-button-primary-action-focus-border-color: var(--utrecht-color-blue-40);
984
- --utrecht-button-primary-action-focus-background-color: var(--utrecht-color-blue-40);
985
- --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
986
- --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
987
- --utrecht-button-primary-action-disabled-color: var(--utrecht-color-grey-80);
988
- --utrecht-button-primary-action-disabled-border-color: var(--utrecht-color-grey-80);
989
- --utrecht-button-primary-action-disabled-background-color: var(--utrecht-color-grey-90);
990
- --utrecht-button-primary-action-active-color: var(--utrecht-color-white);
991
- --utrecht-button-primary-action-active-border-color: var(--utrecht-color-blue-30);
992
- --utrecht-button-primary-action-active-background-color: var(--utrecht-color-blue-30);
993
- --utrecht-button-primary-action-color: var(--utrecht-color-white);
994
- --utrecht-button-primary-action-border-width: var(--utrecht-border-width-md); /* Although the border is not visible, it is needed to match the size of the secondary-action-button appearance */
995
- --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
996
- --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
997
- --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
998
- --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
999
- --utrecht-button-active-color: var(--utrecht-color-white);
1000
- --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
1001
- --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
1002
- --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
1003
- --utrecht-button-padding-block-end: var(--utrecht-space-block-xs);
1004
- --utrecht-button-padding-block-start: var(--utrecht-space-block-xs);
1005
- --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
1006
- --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
1007
- --utrecht-button-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1008
- --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
1009
- --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
1010
- --utrecht-button-column-gap: var(--utrecht-space-text-xs);
1011
- --utrecht-button-color: var(--utrecht-color-grey-40);
1012
- --utrecht-button-border-color: var(--utrecht-color-grey-40);
1013
- --utrecht-button-background-color: var(--utrecht-color-white);
1014
- --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
1015
- --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
1016
- --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
1017
- --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
1018
- --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-typography-scale-sm-font-size);
1019
- --utrecht-breadcrumb-nav-separator-color: var(--utrecht-color-blue-35);
1020
- --utrecht-breadcrumb-nav-link-icon-size: var(--utrecht-icon-scale-md);
1021
- --utrecht-breadcrumb-nav-link-disabled-color: var(--utrecht-color-grey-40);
1022
- --utrecht-breadcrumb-nav-link-hover-color: var(--utrecht-color-blue-40);
1023
- --utrecht-breadcrumb-nav-link-focus-color: var(--utrecht-color-blue-40);
1024
- --utrecht-breadcrumb-nav-link-color: var(--utrecht-color-blue-35);
1025
- --utrecht-breadcrumb-nav-item-padding-inline-start: var(--utrecht-space-inline-xs);
1026
- --utrecht-breadcrumb-nav-item-padding-inline-end: var(--utrecht-space-inline-xs);
1027
- --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
1028
- --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
1029
- --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
1030
- --utrecht-body-color: var(--utrecht-color-black);
1031
- --utrecht-body-background-color: var(--utrecht-color-white);
1032
- --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
1033
- --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
1034
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
1035
- --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
1036
- --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
1037
- --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
1038
- --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
1039
- --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
1040
- --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
1041
- --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
1042
- --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
1043
- --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
1044
- --utrecht-backdrop-color: var(--utrecht-color-black);
1045
- --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
1046
- --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
1047
- --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
1048
- --utrecht-alert-icon-info-color: var(--utrecht-color-blue-35);
1049
- --utrecht-alert-icon-color: var(--utrecht-color-blue-35);
1050
- --utrecht-alert-ok-color: var(--utrecht-color-black);
1051
- --utrecht-alert-ok-background-color: var(--utrecht-color-green-90);
1052
- --utrecht-alert-error-color: var(--utrecht-color-black);
1053
- --utrecht-alert-error-background-color: var(--utrecht-color-red-95);
1054
- --utrecht-alert-warning-color: var(--utrecht-color-black);
1055
- --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
1056
- --utrecht-alert-info-color: var(--utrecht-color-black);
1057
- --utrecht-alert-info-background-color: var(--utrecht-color-blue-90);
1058
- --utrecht-alert-padding-inline-end: var(--utrecht-space-block-lg);
1059
- --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
1060
- --utrecht-alert-padding-block-end: var(--utrecht-space-block-lg);
1061
- --utrecht-alert-padding-block-start: var(--utrecht-space-block-lg);
1062
- --utrecht-alert-column-gap: var(--utrecht-space-column-md);
1063
- --utrecht-alert-color: var(--utrecht-color-black);
1064
- --utrecht-alert-background-color: var(--utrecht-color-blue-90);
1065
- --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
1066
- --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
1067
- --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
1068
- --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
1069
- --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
1070
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
1071
- --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
1072
- --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
1073
- --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
1074
- --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
1075
- --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
1076
- --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
1077
- --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
1078
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
1079
- --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
1080
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
1081
- --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
1082
- --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
1083
- --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
1084
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
1085
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
1086
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
6
+ --utrecht-accordion-button-border-color: transparent;
7
+ --utrecht-accordion-button-border-width: 0;
8
+ --utrecht-accordion-button-hover-border-color: transparent;
9
+ --utrecht-accordion-button-active-border-color: transparent;
10
+ --utrecht-accordion-button-focus-border-color: transparent;
11
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
12
+ --utrecht-accordion-button-icon-size: 24px;
13
+ --utrecht-accordion-panel-border-color: transparent;
14
+ --utrecht-accordion-panel-border-width: 0;
15
+ --utrecht-accordion-section-border-width: 2px;
16
+ --utrecht-alert-dialog-max-block-size: 80vh;
17
+ --utrecht-alert-dialog-min-block-size: 100px;
18
+ --utrecht-alert-dialog-min-inline-size: 320px;
19
+ --utrecht-alert-icon-size: 24px;
20
+ --utrecht-alert-icon-inset-block-start: 6px;
21
+ --utrecht-article-max-inline-size: 780px;
22
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
23
+ --utrecht-backdrop-opacity: 0.8;
24
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
25
+ --utrecht-backdrop-reduced-transparency-opacity: 0.98;
26
+ --utrecht-badge-counter-padding-block: 1ex; /** Default block padding for badge components */
27
+ --utrecht-badge-counter-padding-inline: 1ex; /** Default inline padding color for badge components */
28
+ --utrecht-blockquote-margin-inline-start: 1.6em;
29
+ --utrecht-blockquote-margin-inline-end: 1.6em;
30
+ --utrecht-blockquote-margin-block-start: 1.6em;
31
+ --utrecht-blockquote-margin-block-end: 1.6em;
32
+ --utrecht-body-line-height: 1.4;
33
+ --utrecht-breadcrumb-nav-min-block-size: 34px;
34
+ --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
35
+ --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
36
+ --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
37
+ --utrecht-breadcrumb-nav-link-text-decoration: none;
38
+ --utrecht-breadcrumb-nav-divider-inline-size: 1px;
39
+ --utrecht-button-border-radius: 0;
40
+ --utrecht-button-border-width: 1px;
41
+ --utrecht-button-margin-inline-start: 0;
42
+ --utrecht-button-margin-inline-end: 0;
43
+ --utrecht-button-focus-scale: 1.02;
44
+ --utrecht-button-hover-scale: 1.02;
45
+ --utrecht-button-primary-action-border-color: transparent;
46
+ --utrecht-button-primary-action-hover-border-color: transparent;
47
+ --utrecht-button-primary-action-ready-border-color: transparent;
48
+ --utrecht-button-primary-action-ready-hover-border-color: transparent;
49
+ --utrecht-button-primary-action-warning-border-color: transparent;
50
+ --utrecht-button-primary-action-warning-hover-border-color: transparent;
51
+ --utrecht-button-primary-action-danger-border-color: transparent;
52
+ --utrecht-button-primary-action-danger-hover-border-color: transparent;
53
+ --utrecht-button-subtle-background-color: transparent;
54
+ --utrecht-button-subtle-border-color: transparent;
55
+ --utrecht-button-subtle-disabled-background-color: transparent;
56
+ --utrecht-calendar-table-weeks-item-width: 44px;
57
+ --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
58
+ --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
59
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
60
+ --utrecht-calendar-table-days-item-day-size: 44px;
61
+ --utrecht-calendar-table-days-item-day-border-width: 2px;
62
+ --utrecht-calendar-table-days-item-day-border-color: transparent;
63
+ --utrecht-calendar-table-days-item-day-focus-border-color: transparent;
64
+ --utrecht-calendar-table-days-item-day-active-border-color: transparent;
65
+ --utrecht-calendar-table-days-item-day-out-of-the-month-border-color: transparent;
66
+ --utrecht-calendar-table-days-item-day-is-today-font-weight: 700;
67
+ --utrecht-calendar-table-days-item-day-emphasis-border-color: transparent;
68
+ --utrecht-calendar-table-days-item-day-selected-border-color: transparent;
69
+ --utrecht-calendar-table-days-item-day-disabled-border-color: transparent;
70
+ --utrecht-calendar-navigation-padding-block-start: 2px;
71
+ --utrecht-calendar-navigation-padding-block-end: 2px;
72
+ --utrecht-calendar-navigation-label-min-inline-size: 200px;
73
+ --utrecht-calendar-icon-size: 24px;
74
+ --utrecht-card-link-hover-text-decoration-thickness: 3px;
75
+ --utrecht-checkbox-border-radius: 0;
76
+ --utrecht-checkbox-border-width: 2px;
77
+ --utrecht-checkbox-size: 24px;
78
+ --utrecht-checkbox-focus-border-width: 2px;
79
+ --utrecht-checkbox-margin-block-start: 0;
80
+ --utrecht-column-layout-column-rule-width: 2px;
81
+ --utrecht-column-layout-column-width: 350px;
82
+ --utrecht-action-activate-cursor: pointer;
83
+ --utrecht-action-busy-cursor: wait;
84
+ --utrecht-action-disabled-cursor: not-allowed;
85
+ --utrecht-action-inert-cursor: default;
86
+ --utrecht-action-navigate-cursor: pointer;
87
+ --utrecht-action-submit-cursor: pointer;
88
+ --utrecht-pointer-target-min-size: 44px;
89
+ --utrecht-space-block-3xs: 2px; /** Extra Small 3 */
90
+ --utrecht-space-block-2xs: 4px; /** Extra Small 2 */
91
+ --utrecht-space-block-xs: 8px; /** Extra Small */
92
+ --utrecht-space-block-sm: 12px; /** Small */
93
+ --utrecht-space-block-md: 16px; /** Medium */
94
+ --utrecht-space-block-lg: 20px; /** Large */
95
+ --utrecht-space-block-xl: 24px; /** Extra Large */
96
+ --utrecht-space-block-2xl: 32px; /** Extra Large 2 */
97
+ --utrecht-space-block-3xl: 48px; /** Extra Large 3 */
98
+ --utrecht-space-block-4xl: 64px; /** Extra Large 4 */
99
+ --utrecht-space-block-4xs: 1px;
100
+ --utrecht-space-inline-3xs: 2px; /** Extra Small 3 */
101
+ --utrecht-space-inline-2xs: 4px; /** Extra Small 2 */
102
+ --utrecht-space-inline-xs: 8px; /** Extra Small */
103
+ --utrecht-space-inline-sm: 12px; /** Small */
104
+ --utrecht-space-inline-md: 16px; /** Medium */
105
+ --utrecht-space-inline-lg: 20px; /** Large */
106
+ --utrecht-space-inline-xl: 24px; /** Extra Large */
107
+ --utrecht-space-inline-2xl: 28px; /** Extra Large 2 */
108
+ --utrecht-space-inline-3xl: 32px; /** Extra Large 3 */
109
+ --utrecht-space-inline-4xl: 48px; /** Extra Large 4 */
110
+ --utrecht-space-text-3xs: 0.125ch; /** Extra Small 3 */
111
+ --utrecht-space-text-2xs: 0.25ch; /** Extra Small 2 */
112
+ --utrecht-space-text-xs: 0.5ch; /** Extra Small */
113
+ --utrecht-space-text-sm: 0.75ch; /** Small */
114
+ --utrecht-space-text-md: 1ch; /** Medium */
115
+ --utrecht-space-text-lg: 1.5ch; /** Large */
116
+ --utrecht-space-text-xl: 1.75ch; /** Extra Large */
117
+ --utrecht-space-text-2xl: 2ch; /** Extra Large 2 */
118
+ --utrecht-space-text-3xl: 3ch; /** Extra Large 3 */
119
+ --utrecht-space-row-4xs: 1px; /** Extra Small 4 */
120
+ --utrecht-space-row-3xs: 2px; /** Extra Small 3 */
121
+ --utrecht-space-row-2xs: 4px; /** Extra Small 2 */
122
+ --utrecht-space-row-xs: 8px; /** Extra Small */
123
+ --utrecht-space-row-sm: 12px; /** Small */
124
+ --utrecht-space-row-md: 16px; /** Medium */
125
+ --utrecht-space-row-lg: 20px; /** Large */
126
+ --utrecht-space-row-xl: 24px; /** Extra Large */
127
+ --utrecht-space-row-2xl: 28px; /** Extra Large 2 */
128
+ --utrecht-space-row-3xl: 32px; /** Extra Large 3 */
129
+ --utrecht-space-row-4xl: 48px; /** Extra Large 4 */
130
+ --utrecht-space-row-5xl: 64px; /** Extra Large 5 */
131
+ --utrecht-space-column-4xs: 1px; /** Extra Small 4 */
132
+ --utrecht-space-column-3xs: 2px; /** Extra Small 3 */
133
+ --utrecht-space-column-2xs: 4px; /** Extra Small 2 */
134
+ --utrecht-space-column-xs: 8px; /** Extra Small */
135
+ --utrecht-space-column-sm: 12px; /** Small */
136
+ --utrecht-space-column-md: 16px; /** Medium */
137
+ --utrecht-space-column-lg: 20px; /** Large */
138
+ --utrecht-space-column-xl: 24px; /** Extra Large */
139
+ --utrecht-space-column-2xl: 28px; /** Extra Large 2 */
140
+ --utrecht-space-column-3xl: 32px; /** Extra Large 3 */
141
+ --utrecht-space-column-4xl: 48px; /** Extra Large 4 */
142
+ --utrecht-space-column-5xl: 64px; /** Extra Large 5 */
143
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
144
+ --utrecht-data-list-rows-column-inline-size: 80%;
145
+ --utrecht-document-line-height: 1.4;
146
+ --utrecht-drawer-border-width: 1px;
147
+ --utrecht-drawer-max-block-size: 240px;
148
+ --utrecht-drawer-max-inline-size: 320px;
149
+ --utrecht-figure-caption-color: #727272;
150
+ --utrecht-flo-decision-explanation-margin-block-start: 0;
151
+ --utrecht-flo-decision-explanation-button-background-color: transparent;
152
+ --utrecht-flo-decision-question-section-border-block-width: 3px;
153
+ --utrecht-focus-outline-style: dotted;
154
+ --utrecht-form-control-border-radius: 0;
155
+ --utrecht-form-control-max-inline-size: 28em;
156
+ --utrecht-form-control-padding-block-end: 8px;
157
+ --utrecht-form-control-padding-block-start: 8px;
158
+ --utrecht-form-control-padding-inline-end: 12px;
159
+ --utrecht-form-control-padding-inline-start: 12px;
160
+ --utrecht-form-control-read-only-border-color: transparent;
161
+ --utrecht-form-control-block-size: 42px;
162
+ --utrecht-form-field-invalid-border-inline-start-width: 3px;
163
+ --utrecht-form-label-font-size: 1em;
164
+ --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
165
+ --utrecht-form-toggle-border-color: transparent;
166
+ --utrecht-form-toggle-border-style: solid;
167
+ --utrecht-form-toggle-border-radius: 10em;
168
+ --utrecht-form-toggle-border-width: 2px;
169
+ --utrecht-form-toggle-height: 24px;
170
+ --utrecht-form-toggle-padding-inline-end: 0;
171
+ --utrecht-form-toggle-padding-inline-start: 0;
172
+ --utrecht-form-toggle-padding-block-end: 0;
173
+ --utrecht-form-toggle-padding-block-start: 0;
174
+ --utrecht-form-toggle-width: 48px;
175
+ --utrecht-form-toggle-thumb-margin-inline-start: .25em;
176
+ --utrecht-form-toggle-thumb-margin-inline-end: .25em;
177
+ --utrecht-form-toggle-thumb-min-inline-size: 18px;
178
+ --utrecht-form-toggle-thumb-disabled-box-shadow: 0;
179
+ --utrecht-form-toggle-focus-border-style: dotted;
180
+ --utrecht-form-toggle-focus-border-width: 2px;
181
+ --utrecht-grid-spacing-sm: 8px; /** Small spacing between grid cells */
182
+ --utrecht-grid-spacing-md: 16px; /** Medium spacing between grid cells */
183
+ --utrecht-grid-spacing-lg: 24px; /** Large spacing between grid cells */
184
+ --utrecht-grid-columns: 12;
185
+ --utrecht-heading-1-margin-block-end: 0.67rem;
186
+ --utrecht-heading-1-margin-block-start: 0.67rem;
187
+ --utrecht-heading-2-margin-block-end: 0.3rem;
188
+ --utrecht-heading-2-margin-block-start: 1.5rem;
189
+ --utrecht-heading-3-margin-block-end: 0.2rem;
190
+ --utrecht-heading-3-margin-block-start: 1rem;
191
+ --utrecht-heading-4-margin-block-end: 0.3rem;
192
+ --utrecht-heading-4-margin-block-start: 1.2rem;
193
+ --utrecht-heading-5-margin-block-end: 0.2rem;
194
+ --utrecht-heading-5-margin-block-start: 1rem;
195
+ --utrecht-icon-size: 48px;
196
+ --utrecht-icon-baseline-inset-block-start: 0.125em;
197
+ --utrecht-link-list-link-text-decoration: none;
198
+ --utrecht-link-list-icon-size: 14px;
199
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
200
+ --utrecht-link-social-border-width: 2px;
201
+ --utrecht-link-social-size: 40px;
202
+ --utrecht-link-social-icon-size: 26px;
203
+ --utrecht-link-social-hover-transform-scale: 1.1;
204
+ --utrecht-link-text-decoration: underline;
205
+ --utrecht-link-text-underline-offset: 3px;
206
+ --utrecht-link-focus-visible-text-decoration: none;
207
+ --utrecht-link-hover-text-decoration: underline;
208
+ --utrecht-link-hover-text-decoration-thickness: 3px;
209
+ --utrecht-link-icon-size: 1.2em;
210
+ --utrecht-list-social-item-margin-inline-end: 10px;
211
+ --utrecht-listbox-inline-size: 448px;
212
+ --utrecht-listbox-max-block-size: 300px;
213
+ --utrecht-listbox-option-min-block-size: 44px;
214
+ --utrecht-logo-max-block-size: 103px;
215
+ --utrecht-logo-max-inline-size: 192px;
216
+ --utrecht-logo-min-block-size: 58.97px;
217
+ --utrecht-logo-min-inline-size: 110.57px;
218
+ --utrecht-map-marker-size: 48px;
219
+ --utrecht-map-marker-border-width: 3px;
220
+ --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
221
+ --utrecht-map-marker-icon-size: 30px;
222
+ --utrecht-mapcontrolbutton-border-radius: 2px;
223
+ --utrecht-mapcontrolbutton-focus-text-decoration: none;
224
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
225
+ --utrecht-mapcontrolbutton-margin-inline-start: 0;
226
+ --utrecht-topnav-link-focus-border-type: dotted;
227
+ --utrecht-topnav-link-focus-text-decoration: none;
228
+ --utrecht-navigation-border-block-end-color: transparent;
229
+ --utrecht-navigation-border-block-end-width: 0;
230
+ --utrecht-navigation-border-block-start-color: transparent;
231
+ --utrecht-navigation-border-block-start-width: 0;
232
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
233
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
234
+ --utrecht-navigation-drawer-min-inline-size: 100%;
235
+ --utrecht-navigation-item-border-block-end-color: transparent;
236
+ --utrecht-navigation-item-border-block-end-width: 0;
237
+ --utrecht-navigation-item-border-block-start-color: transparent;
238
+ --utrecht-navigation-item-border-block-start-width: 0;
239
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
240
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
241
+ --utrecht-navigation-link-border-inline-end-width: 1px;
242
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
243
+ --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
244
+ --utrecht-navigation-link-gap: 8px;
245
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
246
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
247
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
248
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
249
+ --utrecht-navigation-list-mobile-inline-size: 100%;
250
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
251
+ --utrecht-navigation-toggle-button-offset-end: 16px;
252
+ --utrecht-navigation-toggle-button-offset-start: 16px;
253
+ --utrecht-number-data-positive-color: green;
254
+ --utrecht-number-data-negative-color: red;
255
+ --utrecht-ordered-list-margin-block-start: 0;
256
+ --utrecht-ordered-list-margin-block-end: 1em;
257
+ --utrecht-ordered-list-padding-inline-start: 28.8px;
258
+ --utrecht-ordered-list-item-margin-block-start: 0.25em;
259
+ --utrecht-ordered-list-item-margin-block-end: 0.25em;
260
+ --utrecht-ordered-list-item-padding-inline-start: 0;
261
+ --utrecht-page-body-content-padding-block-start: 0;
262
+ --utrecht-page-body-content-padding-block-end: 1em;
263
+ --utrecht-page-body-content-padding-inline-start: 2em;
264
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
265
+ --utrecht-page-body-content-max-inline-size: 1184px;
266
+ --utrecht-page-body-padding-inline-end: 0;
267
+ --utrecht-page-body-padding-inline-start: 0;
268
+ --utrecht-page-body-padding-block-end: 0;
269
+ --utrecht-page-body-padding-block-start: 0;
270
+ --utrecht-page-content-padding-block-start: 2em;
271
+ --utrecht-page-content-padding-block-end: 2em;
272
+ --utrecht-page-footer-content-max-inline-size: 1184px;
273
+ --utrecht-page-header-padding-block-start: 0;
274
+ --utrecht-page-header-padding-block-end: 0;
275
+ --utrecht-page-header-padding-inline-start: 0;
276
+ --utrecht-page-header-padding-inline-end: 0;
277
+ --utrecht-page-header-content-padding-block-start: 1.8em;
278
+ --utrecht-page-header-content-padding-block-end: 1em;
279
+ --utrecht-page-header-content-padding-inline-start: 2em;
280
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
281
+ --utrecht-page-header-content-max-inline-size: 1184px;
282
+ --utrecht-page-header-content-padding-inline: 2em;
283
+ --utrecht-page-margin-inline-start: 2em;
284
+ --utrecht-page-margin-inline-end: 2em;
285
+ --utrecht-page-max-inline-size: 1184px;
286
+ --utrecht-page-padding-block-start: 1.8em;
287
+ --utrecht-page-padding-inline-end: 0;
288
+ --utrecht-page-padding-block-end: 1em;
289
+ --utrecht-page-padding-inline-start: 0;
290
+ --utrecht-pagination-margin-block-start: 0;
291
+ --utrecht-pagination-margin-block-end: 1em;
292
+ --utrecht-pagination-page-link-background-color: transparent;
293
+ --utrecht-pagination-page-link-border-color: transparent;
294
+ --utrecht-pagination-page-link-border-width: 2px;
295
+ --utrecht-pagination-page-link-padding-inline-end: 0.5em;
296
+ --utrecht-pagination-page-link-padding-inline-start: 0.5em;
297
+ --utrecht-pagination-page-link-padding-block-end: 0.5em;
298
+ --utrecht-pagination-page-link-padding-block-start: 0.5em;
299
+ --utrecht-pagination-page-link-text-decoration: none;
300
+ --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
301
+ --utrecht-pagination-relative-link-border-width: 2px;
302
+ --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
303
+ --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
304
+ --utrecht-pagination-relative-link-padding-block-end: 0.5em;
305
+ --utrecht-pagination-relative-link-padding-block-start: 0.5em;
306
+ --utrecht-pagination-relative-link-text-decoration: none;
307
+ --utrecht-pagination-relative-link-text-transform: uppercase;
308
+ --utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
309
+ --utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
310
+ --utrecht-paragraph-margin-block-end: 0;
311
+ --utrecht-radio-button-border-width: 2px;
312
+ --utrecht-radio-button-size: 24px;
313
+ --utrecht-radio-button-margin-inline-end: 12px;
314
+ --utrecht-radio-button-icon-size: 42%;
315
+ --utrecht-radio-button-invalid-border-width: 2px;
316
+ --utrecht-radio-button-border-radius: 0;
317
+ --utrecht-rich-text-confidant-margin-block-end: 0;
318
+ --utrecht-root-font-size-adjust: 0.54;
319
+ --utrecht-root-line-height: 1.4;
320
+ --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
321
+ --utrecht-search-bar-button-hover-scale: 1;
322
+ --utrecht-search-bar-input-background-position-x: .5em;
323
+ --utrecht-search-bar-input-background-position-y: 50%;
324
+ --utrecht-search-bar-input-background-size: 1em;
325
+ --utrecht-search-bar-dropdown-border-width: 1px;
326
+ --utrecht-search-bar-dropdown-max-block-size: 300px;
327
+ --utrecht-select-border-block-end-width: 3px;
328
+ --utrecht-separator-block-size: 8px;
329
+ --utrecht-status-badge-border-width: 0px;
330
+ --utrecht-table-margin-block-end: 0;
331
+ --utrecht-table-caption-text-align: start;
332
+ --utrecht-table-caption-margin-block-end: 1em;
333
+ --utrecht-table-header-sticky-border-block-end-width: 2px;
334
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
335
+ --utrecht-table-cell-line-height: 1.5rem;
336
+ --utrecht-table-cell-padding-block-end: 0.5em;
337
+ --utrecht-table-cell-padding-block-start: 0.5em;
338
+ --utrecht-table-cell-padding-inline-end: 0.4em;
339
+ --utrecht-table-cell-padding-inline-start: 0.4em;
340
+ --utrecht-table-cell-icon-size: 1em;
341
+ --utrecht-textarea-border-block-end-width: 3px;
342
+ --utrecht-textarea-border-bottom-width: 3px;
343
+ --utrecht-textbox-border-bottom-width: 3px;
344
+ --utrecht-tooltip-border-radius: 0;
345
+ --utrecht-tooltip-border-width: 1px;
346
+ --utrecht-toptask-link-line-height: 1.2;
347
+ --utrecht-toptask-link-min-block-size: 8.25rem;
348
+ --utrecht-toptask-link-min-inline-size: 15rem;
349
+ --utrecht-toptask-link-hover-transform-scale: 1.02;
350
+ --utrecht-toptask-link-icon-size: 2.25rem;
351
+ --utrecht-unordered-list-margin-block-end: 0;
352
+ --utrecht-unordered-list-item-margin-block-start: 0.25rem;
353
+ --utrecht-unordered-list-item-margin-block-end: 0.25rem;
354
+ --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
355
+ --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
356
+ --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
357
+ --utrecht-color-red-95: hsl(0 100% 95%); /** Achtergrond rode kleur */
358
+ --utrecht-color-blue-20: hsl(211 60% 20%); /** basis donkerblauw (OS focus) */
359
+ --utrecht-color-blue-30: hsl(211 60% 30%); /** Deze kleur gebruiken we niet (interaction active) */
360
+ --utrecht-color-blue-35: hsl(211 60% 35%); /** basis link en knoppen CTA donkerblauw */
361
+ --utrecht-color-blue-40: hsl(211 60% 40%); /** blauw variant bij hover/focus #3669a5 */
362
+ --utrecht-color-blue-50: hsl(211 60% 50%); /** experimenteel / beperkt gebruiken */
363
+ --utrecht-color-blue-60: hsl(211 60% 60%); /** experimenteel / Drak mode link en button kleur */
364
+ --utrecht-color-blue-80: hsl(211 60% 80%); /** licht blauw voor achtergrond */
365
+ --utrecht-color-blue-90: hsl(211 60% 90%); /** ijsblauw variant achtergrond, spotlight en uitgelicht */
366
+ --utrecht-color-grey-10: hsl(0 0% 10%); /** experimenteel / beperkt gebruiken */
367
+ --utrecht-color-grey-15: hsl(0 0% 15%); /** experimenteel / achtergrond kleur voor darkmode */
368
+ --utrecht-color-grey-20: hsl(0 0% 20%); /** experimenteel / beperkt gebruiken */
369
+ --utrecht-color-grey-30: hsl(0 0% 30%); /** border grijs #888 */
370
+ --utrecht-color-grey-40: hsl(0 0% 40%); /** basis grijs #727272 */
371
+ --utrecht-color-grey-80: hsl(0 0% 80%); /** grijs variant voor achtergrond content #e5e5e5 */
372
+ --utrecht-color-grey-90: hsl(0 0% 90%); /** grijs variant voor achtergrond templates #e6e6e6 */
373
+ --utrecht-color-grey-95: hsl(0 0% 95%); /** grijs variant voor achtergrond accordion #f2f2f2 */
374
+ --utrecht-color-yellow-20: hsl(48 100% 20%); /** donker geel voor darkmode achtergrond */
375
+ --utrecht-color-yellow-40: hsl(48 100% 40%); /** donker geel */
376
+ --utrecht-color-yellow-50: hsl(48 100% 50%); /** basis geel #ffcc00 */
377
+ --utrecht-color-yellow-60: hsl(48 100% 60%); /** selecteer geel */
378
+ --utrecht-color-yellow-80: hsl(48 100% 80%); /** spotlight en uitgelicht */
379
+ --utrecht-color-green-30: hsl(90 30% 30%); /** donker groen voor darkmode achtergrond */
380
+ --utrecht-color-green-40: hsl(90 30% 38%); /** donker groen */
381
+ --utrecht-color-green-50: hsl(90 30% 50%); /** Standaard groen #80a659 */
382
+ --utrecht-color-green-80: hsl(90 30% 80%); /** Licht groen */
383
+ --utrecht-color-green-90: hsl(90 30% 90%); /** Achtergrond licht groen */
384
+ --utrecht-color-secondary-purple: #762cd1; /** Paars */
385
+ --utrecht-color-secondary-magenta: #f02198; /** Magenta */
386
+ --utrecht-color-secondary-red: #cc0000; /** Red */
387
+ --utrecht-color-secondary-orange: #ff6e00; /** Oranje */
388
+ --utrecht-color-secondary-yellow: #ffcc00; /** Geel */
389
+ --utrecht-color-secondary-lime: #99d000; /** Lime */
390
+ --utrecht-color-secondary-green: #32ab27; /** Groen */
391
+ --utrecht-color-secondary-cyan: #009ed4; /** Cyaan */
392
+ --utrecht-color-secondary-blue: #006dff; /** Blauw */
393
+ --utrecht-color-secondary-navy: #1c4181; /** Marineblauw */
394
+ --utrecht-color-secondary-brown: #ad643b; /** Bruin */
395
+ --utrecht-color-secondary-grey: #757575; /** Grijs */
396
+ --utrecht-color-invalid: #990000;
397
+ --utrecht-color-white: hsl(0 0% 100%);
398
+ --utrecht-color-black: hsl(0 0% 0%);
399
+ --utrecht-icon-scale-3xs: 1px;
400
+ --utrecht-icon-scale-2xs: 4px;
401
+ --utrecht-icon-scale-xs: 8px;
402
+ --utrecht-icon-scale-sm: 12px;
403
+ --utrecht-icon-scale-md: 16px; /** Formaat voor radio button */
404
+ --utrecht-icon-scale-lg: 24px; /** Voor kalender iconen */
405
+ --utrecht-icon-scale-xl: 26px; /** Formaat social media iconen */
406
+ --utrecht-icon-scale-2xl: 30px; /** Formaat voor marker iconen */
407
+ --utrecht-icon-scale-3xl: 36px; /** Formaat voor toptaks iconen */
408
+ --utrecht-icon-scale-4xl: 48px;
409
+ --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
410
+ --utrecht-typography-scale-sm-font-size: 0.875rem; /** 14px */
411
+ --utrecht-typography-scale-md-font-size: 1rem; /** 16px */
412
+ --utrecht-typography-scale-lg-font-size: 1.125rem; /** 18px */
413
+ --utrecht-typography-scale-xl-font-size: 1.25rem; /** 20px */
414
+ --utrecht-typography-scale-2xl-font-size: 1.5rem; /** 24px */
415
+ --utrecht-typography-scale-3xl-font-size: 2rem; /** 32px */
416
+ --utrecht-typography-scale-4xl-font-size: 2.5rem; /** 40px */
417
+ --utrecht-typography-weight-scale-normal-font-weight: 400;
418
+ --utrecht-typography-weight-scale-medium-font-weight: 500;
419
+ --utrecht-typography-weight-scale-semibold-font-weight: 600;
420
+ --utrecht-typography-weight-scale-bold-font-weight: 700;
421
+ --utrecht-typography-font-style-normal: normal;
422
+ --utrecht-typography-font-style-inherit: inherit;
423
+ --utrecht-typography-line-height-xs: 1.5;
424
+ --utrecht-typography-line-height-sm: 1.5;
425
+ --utrecht-typography-line-height-md: 1.5;
426
+ --utrecht-typography-line-height-lg: 1.25;
427
+ --utrecht-typography-line-height-xl: 1.25;
428
+ --utrecht-typography-line-height-2xl: 1.25;
429
+ --utrecht-typography-line-height-3xl: 1.25;
430
+ --utrecht-typography-line-height-4xl: 1.1;
431
+ --utrecht-border-width-sm: 1px;
432
+ --utrecht-border-width-md: 2px;
433
+ --utrecht-border-radius-sm: 2px;
434
+ --utrecht-border-radius-md: 4px;
435
+ --utrecht-border-radius-lg: 8px;
436
+ --utrecht-border-radius-round: 999px;
437
+ --utrecht-border-radius-none: 0;
438
+ --utrecht-border-style-solid: solid;
439
+ --utrecht-border-style-dotted: dotted;
440
+ --utrecht-stack-focus-z-index: 1;
441
+ --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
442
+ --denhaag-process-steps-step-marker-size: 28px;
443
+ --denhaag-process-steps-sub-step-marker-size: 12px;
444
+ --nl-code-block-font-family: "Monaco";
445
+ --nl-code-block-padding-block: 20px;
446
+ --nl-code-block-padding-inline: 20px;
447
+ --nl-data-badge-border-radius: 0;
448
+ --nl-number-badge-padding-block: 1ex;
449
+ --nl-number-badge-padding-inline: 1ex;
450
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
451
+ --signalen-progress-bar-border-radius: 4px;
1087
452
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
1088
- --signalen-modal-dialog-color: var(--utrecht-body-color);
1089
- --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1090
- --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1091
- --of-page-footer-fg: var(--utrecht-page-footer-color);
1092
- --of-page-footer-bg: var(--utrecht-page-footer-background-color);
1093
- --of-layout-background: var(--utrecht-document-background-color);
1094
- --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
1095
- --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
1096
- --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
1097
- --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
1098
- --nl-skip-link-color: var(--utrecht-topnav-link-color);
1099
- --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
1100
- --nl-paragraph-lead-color: var(--utrecht-document-color);
1101
- --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1102
- --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1103
- --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
1104
- --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1105
- --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1106
- --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1107
- --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1108
- --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1109
- --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1110
- --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1111
- --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1112
- --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1113
- --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1114
- --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1115
- --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1116
- --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1117
- --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1118
- --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
1119
- --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
1120
- --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
1121
- --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
1122
- --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
1123
- --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
1124
- --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
1125
- --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
1126
- --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
1127
- --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
1128
- --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
1129
- --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
1130
- --utrecht-mark-color: var(--nl-mark-color);
1131
- --utrecht-mark-background-color: var(--nl-mark-background-color);
1132
- --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
1133
- --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
1134
- --utrecht-link-visited-color: var(--utrecht-link-color);
1135
- --utrecht-link-hover-color: var(--utrecht-link-focus-color);
1136
- --utrecht-link-active-color: var(--utrecht-link-color);
1137
- --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
1138
- --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
1139
- --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
1140
- --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
1141
- --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
1142
- --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
1143
- --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
1144
- --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
1145
- --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
1146
- --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
1147
- --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
1148
- --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
1149
- --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
1150
- --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
1151
- --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
1152
- --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
1153
- --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
1154
- --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
1155
- --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
1156
- --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
1157
- --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
1158
- --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
1159
- --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
1160
- --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
1161
- --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
1162
- --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
1163
- --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
1164
- --utrecht-form-control-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
1165
- --utrecht-form-control-font-family: var(--utrecht-document-font-family);
1166
- --utrecht-drawer-color: var(--utrecht-document-color);
1167
- --utrecht-drawer-background-color: var(--utrecht-document-background-color);
1168
- --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
1169
- --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
1170
- --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
1171
- --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
1172
- --utrecht-feedback-valid-color: var(--utrecht-feedback-safe-color);
1173
- --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
1174
- --utrecht-feedback-safe-border-color: var(--utrecht-feedback-safe-color);
1175
- --utrecht-feedback-safe-background-color: var(--utrecht-feedback-safe-color);
1176
- --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
1177
- --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
1178
- --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
1179
- --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1180
- --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1181
- --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1182
- --utrecht-code-block-color: var(--nl-code-block-color);
1183
- --utrecht-code-block-background-color: var(--nl-code-block-background-color);
1184
- --utrecht-checkbox-color: var(--utrecht-form-control-color);
1185
- --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
1186
- --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
1187
- --utrecht-button-subtle-pressed-color: var(--utrecht-button-subtle-active-color);
1188
- --utrecht-button-subtle-pressed-background-color: var(--utrecht-button-subtle-active-background-color);
1189
- --utrecht-button-secondary-action-pressed-color: var(--utrecht-button-secondary-action-active-color);
1190
- --utrecht-button-secondary-action-pressed-background-color: var(--utrecht-button-secondary-action-active-background-color);
1191
- --utrecht-button-primary-action-pressed-color: var(--utrecht-button-primary-action-active-color);
1192
- --utrecht-button-primary-action-pressed-border-color: var(--utrecht-button-primary-action-active-border-color);
1193
- --utrecht-button-primary-action-pressed-background-color: var(--utrecht-button-primary-action-active-background-color);
1194
- --utrecht-button-pressed-color: var(--utrecht-button-active-color);
1195
- --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
1196
- --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
453
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
454
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
455
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
456
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
457
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
458
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
459
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
460
+ --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
461
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
462
+ --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
463
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
464
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
465
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
466
+ --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
467
+ --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
468
+ --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
469
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
470
+ --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
471
+ --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
472
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
473
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
474
+ --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
475
+ --utrecht-alert-background-color: var(--utrecht-color-blue-90);
476
+ --utrecht-alert-color: var(--utrecht-color-black);
477
+ --utrecht-alert-column-gap: var(--utrecht-space-column-md);
478
+ --utrecht-alert-padding-block-start: var(--utrecht-space-block-lg);
479
+ --utrecht-alert-padding-block-end: var(--utrecht-space-block-lg);
480
+ --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
481
+ --utrecht-alert-padding-inline-end: var(--utrecht-space-block-lg);
482
+ --utrecht-alert-info-background-color: var(--utrecht-color-blue-90);
483
+ --utrecht-alert-info-color: var(--utrecht-color-black);
484
+ --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
485
+ --utrecht-alert-warning-color: var(--utrecht-color-black);
486
+ --utrecht-alert-error-background-color: var(--utrecht-color-red-95);
487
+ --utrecht-alert-error-color: var(--utrecht-color-black);
488
+ --utrecht-alert-ok-background-color: var(--utrecht-color-green-90);
489
+ --utrecht-alert-ok-color: var(--utrecht-color-black);
490
+ --utrecht-alert-icon-color: var(--utrecht-color-blue-35);
491
+ --utrecht-alert-icon-info-color: var(--utrecht-color-blue-35);
492
+ --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
493
+ --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
494
+ --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
495
+ --utrecht-backdrop-color: var(--utrecht-color-black);
496
+ --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /** Default background color for badge components */
497
+ --utrecht-badge-counter-color: var(--utrecht-color-white); /** Default text color for badge components */
498
+ --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
499
+ --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
500
+ --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
501
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /** Default corner radius for badge components */
502
+ --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
503
+ --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
504
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
505
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
506
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
507
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
508
+ --utrecht-body-background-color: var(--utrecht-color-white);
509
+ --utrecht-body-color: var(--utrecht-color-black);
510
+ --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
511
+ --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
512
+ --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
513
+ --utrecht-breadcrumb-nav-item-padding-inline-end: var(--utrecht-space-inline-xs);
514
+ --utrecht-breadcrumb-nav-item-padding-inline-start: var(--utrecht-space-inline-xs);
515
+ --utrecht-breadcrumb-nav-link-color: var(--utrecht-color-blue-35);
516
+ --utrecht-breadcrumb-nav-link-focus-color: var(--utrecht-color-blue-40);
517
+ --utrecht-breadcrumb-nav-link-hover-color: var(--utrecht-color-blue-40);
518
+ --utrecht-breadcrumb-nav-link-disabled-color: var(--utrecht-color-grey-40);
519
+ --utrecht-breadcrumb-nav-link-icon-size: var(--utrecht-icon-scale-md);
520
+ --utrecht-breadcrumb-nav-separator-color: var(--utrecht-color-blue-35);
521
+ --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-typography-scale-sm-font-size);
522
+ --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
523
+ --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
524
+ --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
525
+ --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
526
+ --utrecht-button-background-color: var(--utrecht-color-white);
527
+ --utrecht-button-border-color: var(--utrecht-color-grey-40);
528
+ --utrecht-button-color: var(--utrecht-color-grey-40);
529
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
530
+ --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
531
+ --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
532
+ --utrecht-button-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
533
+ --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
534
+ --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
535
+ --utrecht-button-padding-block-start: var(--utrecht-space-block-xs);
536
+ --utrecht-button-padding-block-end: var(--utrecht-space-block-xs);
537
+ --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
538
+ --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
539
+ --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
540
+ --utrecht-button-active-color: var(--utrecht-color-white);
541
+ --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
542
+ --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
543
+ --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
544
+ --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
545
+ --utrecht-button-primary-action-border-width: var(--utrecht-border-width-md); /** Although the border is not visible, it is needed to match the size of the secondary-action-button appearance */
546
+ --utrecht-button-primary-action-color: var(--utrecht-color-white);
547
+ --utrecht-button-primary-action-active-background-color: var(--utrecht-color-blue-30);
548
+ --utrecht-button-primary-action-active-border-color: var(--utrecht-color-blue-30);
549
+ --utrecht-button-primary-action-active-color: var(--utrecht-color-white);
550
+ --utrecht-button-primary-action-disabled-background-color: var(--utrecht-color-grey-90);
551
+ --utrecht-button-primary-action-disabled-border-color: var(--utrecht-color-grey-80);
552
+ --utrecht-button-primary-action-disabled-color: var(--utrecht-color-grey-80);
553
+ --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
554
+ --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
555
+ --utrecht-button-primary-action-focus-background-color: var(--utrecht-color-blue-40);
556
+ --utrecht-button-primary-action-focus-border-color: var(--utrecht-color-blue-40);
557
+ --utrecht-button-primary-action-focus-border-width: var(--utrecht-border-width-md);
558
+ --utrecht-button-primary-action-ready-background-color: var(--utrecht-color-green-50);
559
+ --utrecht-button-primary-action-ready-color: var(--utrecht-color-black);
560
+ --utrecht-button-primary-action-ready-disabled-border-color: var(--utrecht-color-grey-90);
561
+ --utrecht-button-primary-action-ready-hover-background-color: var(--utrecht-color-green-40);
562
+ --utrecht-button-primary-action-ready-hover-color: var(--utrecht-color-white);
563
+ --utrecht-button-primary-action-ready-focus-background-color: var(--utrecht-color-green-40);
564
+ --utrecht-button-primary-action-ready-focus-border-color: var(--utrecht-color-green-40);
565
+ --utrecht-button-primary-action-warning-background-color: var(--utrecht-color-yellow-50);
566
+ --utrecht-button-primary-action-warning-color: var(--utrecht-color-black);
567
+ --utrecht-button-primary-action-warning-disabled-border-color: var(--utrecht-color-grey-90);
568
+ --utrecht-button-primary-action-warning-hover-background-color: var(--utrecht-color-yellow-40);
569
+ --utrecht-button-primary-action-warning-hover-color: var(--utrecht-color-black);
570
+ --utrecht-button-primary-action-warning-focus-background-color: var(--utrecht-color-yellow-40);
571
+ --utrecht-button-primary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
572
+ --utrecht-button-primary-action-danger-background-color: var(--utrecht-color-red-40);
573
+ --utrecht-button-primary-action-danger-color: var(--utrecht-color-white);
574
+ --utrecht-button-primary-action-danger-disabled-border-color: var(--utrecht-color-grey-90);
575
+ --utrecht-button-primary-action-danger-hover-background-color: var(--utrecht-color-red-30);
576
+ --utrecht-button-primary-action-danger-hover-color: var(--utrecht-color-white);
577
+ --utrecht-button-primary-action-danger-focus-background-color: var(--utrecht-color-red-30);
578
+ --utrecht-button-primary-action-danger-focus-border-color: var(--utrecht-color-red-30);
579
+ --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
580
+ --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
581
+ --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
582
+ --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
583
+ --utrecht-button-secondary-action-active-background-color: var(--utrecht-color-white);
584
+ --utrecht-button-secondary-action-active-border-color: var(--utrecht-color-blue-30);
585
+ --utrecht-button-secondary-action-active-color: var(--utrecht-color-blue-30);
586
+ --utrecht-button-secondary-action-disabled-background-color: var(--utrecht-color-white);
587
+ --utrecht-button-secondary-action-disabled-border-color: var(--utrecht-color-grey-80);
588
+ --utrecht-button-secondary-action-disabled-color: var(--utrecht-color-grey-80);
589
+ --utrecht-button-secondary-action-hover-background-color: var(--utrecht-color-white);
590
+ --utrecht-button-secondary-action-hover-border-color: var(--utrecht-color-blue-40);
591
+ --utrecht-button-secondary-action-hover-color: var(--utrecht-color-blue-35);
592
+ --utrecht-button-secondary-action-danger-border-color: var(--utrecht-color-red-40);
593
+ --utrecht-button-secondary-action-danger-color: var(--utrecht-color-red-40);
594
+ --utrecht-button-secondary-action-danger-hover-border-color: var(--utrecht-color-red-30);
595
+ --utrecht-button-secondary-action-danger-hover-color: var(--utrecht-color-red-30);
596
+ --utrecht-button-secondary-action-danger-focus-border-color: var(--utrecht-color-red-30);
597
+ --utrecht-button-secondary-action-warning-border-color: var(--utrecht-color-yellow-50);
598
+ --utrecht-button-secondary-action-warning-color: var(--utrecht-color-grey-40);
599
+ --utrecht-button-secondary-action-warning-hover-border-color: var(--utrecht-color-yellow-40);
600
+ --utrecht-button-secondary-action-warning-hover-color: var(--utrecht-color-yellow-40);
601
+ --utrecht-button-secondary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
602
+ --utrecht-button-secondary-action-ready-border-color: var(--utrecht-color-green-50);
603
+ --utrecht-button-secondary-action-ready-color: var(--utrecht-color-grey-40);
604
+ --utrecht-button-secondary-action-ready-hover-border-color: var(--utrecht-color-green-40);
605
+ --utrecht-button-secondary-action-ready-hover-color: var(--utrecht-color-green-40);
606
+ --utrecht-button-secondary-action-ready-focus-border-color: var(--utrecht-color-green-40);
607
+ --utrecht-button-subtle-border-width: var(--utrecht-border-width-md);
608
+ --utrecht-button-subtle-color: var(--utrecht-color-blue-35);
609
+ --utrecht-button-subtle-active-background-color: var(--utrecht-color-blue-35);
610
+ --utrecht-button-subtle-active-color: var(--utrecht-color-white);
611
+ --utrecht-button-subtle-disabled-color: var(--utrecht-color-grey-80);
612
+ --utrecht-button-subtle-hover-background-color: var(--utrecht-color-white);
613
+ --utrecht-button-subtle-hover-border-color: var(--utrecht-color-blue-40);
614
+ --utrecht-button-subtle-hover-color: var(--utrecht-color-blue-35);
615
+ --utrecht-button-subtle-focus-background-color: var(--utrecht-color-white);
616
+ --utrecht-button-subtle-focus-border-color: var(--utrecht-color-blue-35);
617
+ --utrecht-button-subtle-focus-color: var(--utrecht-color-blue-35);
618
+ --utrecht-button-subtle-danger-color: var(--utrecht-color-red-40);
619
+ --utrecht-button-subtle-danger-hover-color: var(--utrecht-color-red-30);
620
+ --utrecht-button-subtle-danger-focus-color: var(--utrecht-color-red-30);
621
+ --utrecht-button-subtle-ready-color: var(--utrecht-color-green-50);
622
+ --utrecht-button-subtle-ready-hover-color: var(--utrecht-color-green-40);
623
+ --utrecht-button-subtle-ready-focus-color: var(--utrecht-color-green-40);
624
+ --utrecht-calendar-table-days-item-day-color: var(--utrecht-color-black);
625
+ --utrecht-calendar-table-days-item-day-hover-color: var(--utrecht-color-blue-40);
626
+ --utrecht-calendar-table-days-item-day-hover-border-color: var(--utrecht-color-black);
627
+ --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);
628
+ --utrecht-calendar-table-days-item-day-is-today-background-color: var(--utrecht-color-blue-90);
629
+ --utrecht-calendar-table-days-item-day-is-today-color: var(--utrecht-color-blue-30);
630
+ --utrecht-calendar-table-days-item-day-is-today-border-color: var(--utrecht-color-blue-35);
631
+ --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
632
+ --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
633
+ --utrecht-calendar-table-days-item-day-disabled-color: var(--utrecht-color-grey-40);
634
+ --utrecht-calendar-navigation-color: var(--utrecht-color-blue-30);
635
+ --utrecht-calendar-navigation-label-color: var(--utrecht-color-black);
636
+ --utrecht-calendar-navigation-label-font-size: var(--utrecht-typography-scale-lg-font-size);
637
+ --utrecht-card-background-color: var(--utrecht-color-blue-90);
638
+ --utrecht-card-color: var(--utrecht-color-black);
639
+ --utrecht-card-heading-color: var(--utrecht-color-blue-35);
640
+ --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
641
+ --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
642
+ --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
643
+ --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
644
+ --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
645
+ --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
646
+ --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
647
+ --utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
648
+ --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
649
+ --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
650
+ --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
651
+ --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
652
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
653
+ --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
654
+ --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
655
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
656
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
657
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
658
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
659
+ --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
660
+ --utrecht-column-layout-gap: var(--utrecht-space-column-md);
661
+ --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
662
+ --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
663
+ --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
664
+ --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
665
+ --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
666
+ --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
667
+ --utrecht-feedback-invalid-background-color: var(--utrecht-color-invalid);
668
+ --utrecht-feedback-invalid-border-color: var(--utrecht-color-invalid);
669
+ --utrecht-feedback-invalid-color: var(--utrecht-color-invalid);
670
+ --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
671
+ --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
672
+ --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
673
+ --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
674
+ --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
675
+ --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
676
+ --utrecht-data-list-margin-block-end: var(--utrecht-space-block-md);
677
+ --utrecht-data-list-margin-block-start: var(--utrecht-space-block-md);
678
+ --utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
679
+ --utrecht-data-list-rows-item-margin-block-start: var(--utrecht-space-block-md);
680
+ --utrecht-data-list-rows-item-value-margin-block-start: var(--utrecht-space-block-xs);
681
+ --utrecht-data-placeholder-background-color: var(--utrecht-color-grey-40);
682
+ --utrecht-document-background-color: var(--utrecht-color-white);
683
+ --utrecht-document-color: var(--utrecht-color-black);
684
+ --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
685
+ --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
686
+ --utrecht-drawer-border-color: var(--utrecht-color-grey-90);
687
+ --utrecht-drawer-padding-block-end: var(--utrecht-space-block-md);
688
+ --utrecht-drawer-padding-block-start: var(--utrecht-space-block-md);
689
+ --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
690
+ --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
691
+ --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
692
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
693
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
694
+ --utrecht-flo-decision-explanation-margin-inline-start: var(--utrecht-space-block-xl);
695
+ --utrecht-flo-decision-explanation-button-border-color: var(--utrecht-color-black);
696
+ --utrecht-flo-decision-explanation-button-close-margin-block-end: var(--utrecht-space-block-sm);
697
+ --utrecht-flo-decision-explanation-container-margin-block-start: var(--utrecht-space-block-sm);
698
+ --utrecht-flo-decision-label-checkbox-column-gap: var(--utrecht-space-inline-xs);
699
+ --utrecht-flo-decision-label-checkbox-margin-block-start: var(--utrecht-space-block-sm);
700
+ --utrecht-flo-decision-form-padding-block: var(--utrecht-space-block-md);
701
+ --utrecht-flo-decision-form-padding-inline: var(--utrecht-space-inline-3xl);
702
+ --utrecht-flo-decision-form-background-color: var(--utrecht-color-green-90);
703
+ --utrecht-flo-decision-form-margin-block-start: var(--utrecht-space-block-xl);
704
+ --utrecht-flo-decision-form-margin-block-end: var(--utrecht-space-block-xs);
705
+ --utrecht-flo-decision-form-button-disabled-color: var(--utrecht-color-grey-40);
706
+ --utrecht-flo-decision-form-nav-padding-block: var(--utrecht-space-block-xl);
707
+ --utrecht-flo-decision-question-description-column-gap: var(--utrecht-space-inline-sm);
708
+ --utrecht-flo-decision-question-answers-row-gap: var(--utrecht-space-block-xs);
709
+ --utrecht-flo-decision-question-answers-option-column-gap: var(--utrecht-space-inline-sm);
710
+ --utrecht-flo-decision-question-section-padding-block-end: var(--utrecht-space-block-xl);
711
+ --utrecht-flo-decision-question-section-padding-block-start: var(--utrecht-space-block-xl);
712
+ --utrecht-flo-decision-question-section-background-color: var(--utrecht-color-green-90);
713
+ --utrecht-flo-decision-question-section-border-block-color: var(--utrecht-color-green-50);
714
+ --utrecht-flo-decision-outcomes-container-background-color: var(--utrecht-color-white);
715
+ --utrecht-flo-decision-outcomes-container-margin-block-start: var(--utrecht-space-block-xl);
716
+ --utrecht-flo-decision-outcomes-container-padding-inline: var(--utrecht-space-inline-2xl);
717
+ --utrecht-flo-decision-outcomes-container-padding-block: var(--utrecht-space-block-2xl);
718
+ --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
719
+ --utrecht-focus-outline-color: var(--utrecht-color-black);
720
+ --utrecht-focus-outline-width: var(--utrecht-border-width-md);
721
+ --utrecht-focus-inverse-outline-color: var(--utrecht-color-white);
722
+ --utrecht-form-control-background-color: var(--utrecht-color-white);
723
+ --utrecht-form-control-border-color: var(--utrecht-color-grey-30);
724
+ --utrecht-form-control-border-width: var(--utrecht-border-width-sm);
725
+ --utrecht-form-control-color: var(--utrecht-color-black);
726
+ --utrecht-form-control-font-size: var(--utrecht-typography-scale-md-font-size);
727
+ --utrecht-form-control-placeholder-color: var(--utrecht-color-grey-40);
728
+ --utrecht-form-control-placeholder-font-style: var(--utrecht-typography-font-style-normal);
729
+ --utrecht-form-control-focus-border-color: var(--utrecht-color-grey-80);
730
+ --utrecht-form-control-read-only-background-color: var(--utrecht-color-grey-90);
731
+ --utrecht-form-control-read-only-color: var(--utrecht-color-grey-20);
732
+ --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
733
+ --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
734
+ --utrecht-form-field-invalid-padding-inline-start: var(--utrecht-space-block-sm);
735
+ --utrecht-form-field-label-margin-block-end: var(--utrecht-space-block-sm);
736
+ --utrecht-form-field-description-margin-block-start: var(--utrecht-space-block-sm);
737
+ --utrecht-form-field-description-margin-block-end: var(--utrecht-space-block-sm);
738
+ --utrecht-form-fieldset-margin-block-end: var(--utrecht-space-block-2xs);
739
+ --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
740
+ --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
741
+ --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
742
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
743
+ --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
744
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
745
+ --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
746
+ --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
747
+ --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
748
+ --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
749
+ --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
750
+ --utrecht-form-label-radio-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
751
+ --utrecht-form-toggle-background-color: var(--utrecht-color-white);
752
+ --utrecht-form-toggle-color: var(--utrecht-color-black);
753
+ --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
754
+ --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
755
+ --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
756
+ --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
757
+ --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
758
+ --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
759
+ --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
760
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
761
+ --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
762
+ --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
763
+ --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
764
+ --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
765
+ --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
766
+ --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
767
+ --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
768
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
769
+ --utrecht-link-social-border-color: var(--utrecht-color-white);
770
+ --utrecht-link-social-color: var(--utrecht-color-white);
771
+ --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
772
+ --utrecht-link-color: var(--utrecht-color-blue-35);
773
+ --utrecht-link-focus-color: var(--utrecht-color-blue-40);
774
+ --utrecht-link-placeholder-color: var(--utrecht-color-grey-40);
775
+ --utrecht-listbox-background-color: var(--utrecht-color-white);
776
+ --utrecht-listbox-option-padding-block-end: var(--utrecht-space-block-xs);
777
+ --utrecht-listbox-option-padding-block-start: var(--utrecht-space-block-xs);
778
+ --utrecht-listbox-option-padding-inline-end: var(--utrecht-space-inline-xs);
779
+ --utrecht-listbox-option-padding-inline-start: var(--utrecht-space-inline-xs);
780
+ --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
781
+ --utrecht-listbox-option-active-color: var(--utrecht-color-black);
782
+ --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
783
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
784
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
785
+ --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
786
+ --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
787
+ --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
788
+ --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
789
+ --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
790
+ --utrecht-listbox-option-group-title-color: var(--utrecht-color-black);
791
+ --utrecht-listbox-option-group-title-margin-inline-start: var(--utrecht-space-inline-xs);
792
+ --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
793
+ --utrecht-map-marker-color: var(--utrecht-color-white);
794
+ --utrecht-map-marker-border-color: var(--utrecht-color-white);
795
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
796
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
797
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
798
+ --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
799
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
800
+ --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
801
+ --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
802
+ --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
803
+ --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
804
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
805
+ --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
806
+ --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
807
+ --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
808
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
809
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
810
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
811
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
812
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
813
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
814
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
815
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
816
+ --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
817
+ --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
818
+ --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
819
+ --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
820
+ --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
821
+ --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
822
+ --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
823
+ --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
824
+ --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
825
+ --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
826
+ --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
827
+ --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
828
+ --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
829
+ --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
830
+ --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
831
+ --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
832
+ --utrecht-topnav-link-color: var(--utrecht-color-white);
833
+ --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
834
+ --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
835
+ --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
836
+ --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
837
+ --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
838
+ --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
839
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
840
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
841
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
842
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
843
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
844
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
845
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
846
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
847
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
848
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
849
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
850
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
851
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
852
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
853
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
854
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
855
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
856
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
857
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
858
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
859
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
860
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
861
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
862
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
863
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
864
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
865
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
866
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
867
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
868
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
869
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
870
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
871
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
872
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
873
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
874
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
875
+ --utrecht-page-footer-color: var(--utrecht-color-white);
876
+ --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
877
+ --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
878
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
879
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
880
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
881
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
882
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
883
+ --utrecht-page-background-color: var(--utrecht-color-white);
884
+ --utrecht-page-color: var(--utrecht-color-black);
885
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
886
+ --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
887
+ --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
888
+ --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
889
+ --utrecht-pagination-page-link-current-border-color: var(--utrecht-color-blue-35);
890
+ --utrecht-pagination-page-link-current-color: var(--utrecht-color-white);
891
+ --utrecht-pagination-page-link-hover-background-color: var(--utrecht-color-blue-35);
892
+ --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
893
+ --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
894
+ --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
895
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
896
+ --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
897
+ --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
898
+ --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
899
+ --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
900
+ --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
901
+ --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
902
+ --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
903
+ --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
904
+ --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
905
+ --utrecht-radio-button-color: var(--utrecht-color-white);
906
+ --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
907
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
908
+ --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
909
+ --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
910
+ --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
911
+ --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
912
+ --utrecht-radio-button-checked-hover-color: var(--utrecht-color-blue-90);
913
+ --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
914
+ --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
915
+ --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
916
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
917
+ --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
918
+ --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
919
+ --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
920
+ --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
921
+ --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
922
+ --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
923
+ --utrecht-root-background-color: var(--utrecht-color-white);
924
+ --utrecht-root-color: var(--utrecht-color-black);
925
+ --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
926
+ --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
927
+ --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
928
+ --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
929
+ --utrecht-search-bar-button-color: var(--utrecht-color-white);
930
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
931
+ --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
932
+ --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
933
+ --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
934
+ --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
935
+ --utrecht-search-bar-dropdown-padding-block-start: var(--utrecht-space-block-xs);
936
+ --utrecht-search-bar-dropdown-padding-block-end: var(--utrecht-space-block-xs);
937
+ --utrecht-search-bar-section-margin-block-end: var(--utrecht-space-inline-xs);
938
+ --utrecht-search-bar-section-title-font-size: var(--utrecht-typography-scale-md-font-size);
939
+ --utrecht-search-bar-section-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
940
+ --utrecht-search-bar-section-title-color: var(--utrecht-color-black);
941
+ --utrecht-search-bar-section-title-margin-inline-start: var(--utrecht-space-inline-xs);
942
+ --utrecht-search-bar-list-item-is-active-color: var(--utrecht-color-black);
943
+ --utrecht-search-bar-list-item-is-active-background-color: var(--utrecht-color-grey-95);
944
+ --utrecht-search-bar-list-item-is-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
945
+ --utrecht-search-bar-list-item-is-selected-color: var(--utrecht-color-black);
946
+ --utrecht-search-bar-list-item-is-selected-background-color: var(--utrecht-color-grey-95);
947
+ --utrecht-separator-color: var(--utrecht-color-blue-90);
948
+ --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
949
+ --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
950
+ --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
951
+ --utrecht-spotlight-section-color: var(--utrecht-color-black);
952
+ --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
953
+ --utrecht-spotlight-section-padding-block-end: var(--utrecht-space-block-sm);
954
+ --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
955
+ --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
956
+ --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-90);
957
+ --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
958
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
959
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
960
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
961
+ --utrecht-surface-background-color: var(--utrecht-color-grey-95);
962
+ --utrecht-surface-color: var(--utrecht-color-grey-10);
963
+ --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
964
+ --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
965
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
966
+ --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
967
+ --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
968
+ --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
969
+ --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
970
+ --utrecht-table-header-sticky-color: var(--utrecht-color-black);
971
+ --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
972
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
973
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
974
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
975
+ --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
976
+ --utrecht-table-cell-selected-color: var(--utrecht-color-black);
977
+ --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
978
+ --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
979
+ --utrecht-table-row-alternate-odd-background-color: var(--utrecht-color-white);
980
+ --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
981
+ --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
982
+ --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
983
+ --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
984
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
985
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
986
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
987
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
988
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
989
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
990
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
991
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
992
+ --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
993
+ --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
994
+ --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
995
+ --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
996
+ --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
997
+ --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
998
+ --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
999
+ --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1000
+ --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
1001
+ --denhaag-process-steps-font-family: var(--utrecht-typography-sans-serif-font-family);
1002
+ --denhaag-process-steps-step-heading-color: var(--utrecht-color-black);
1003
+ --denhaag-process-steps-step-heading-font-family: var(--utrecht-typography-sans-serif-font-family);
1004
+ --denhaag-process-steps-step-heading-font-size: var(--utrecht-typography-scale-lg-font-size);
1005
+ --denhaag-process-steps-step-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1006
+ --denhaag-process-steps-step-heading-current-color: var(--utrecht-color-black);
1007
+ --denhaag-process-steps-step-heading-checked-color: var(--utrecht-color-black);
1008
+ --denhaag-process-steps-step-heading-checked-background-color: var(--utrecht-color-white);
1009
+ --denhaag-process-steps-step-heading-not-checked-color: var(--utrecht-color-black);
1010
+ --denhaag-process-steps-step-heading-warning-color: var(--utrecht-color-black);
1011
+ --denhaag-process-steps-step-marker-border-color: var(--utrecht-color-green-30);
1012
+ --denhaag-process-steps-step-marker-background-color: var(--utrecht-color-white);
1013
+ --denhaag-process-steps-step-marker-border-width: var(--utrecht-border-width-md);
1014
+ --denhaag-process-steps-step-marker-color: var(--utrecht-color-green-30);
1015
+ --denhaag-process-steps-step-marker-font-size: var(--utrecht-typography-scale-sm-font-size);
1016
+ --denhaag-process-steps-step-marker-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1017
+ --denhaag-process-steps-step-marker-current-border-color: var(--utrecht-color-green-30);
1018
+ --denhaag-process-steps-step-marker-current-background-color: var(--utrecht-color-green-30);
1019
+ --denhaag-process-steps-step-marker-current-border-width: var(--utrecht-border-width-md);
1020
+ --denhaag-process-steps-step-marker-current-color: var(--utrecht-color-white);
1021
+ --denhaag-process-steps-step-marker-checked-border-color: var(--utrecht-color-green-30);
1022
+ --denhaag-process-steps-step-marker-checked-background-color: var(--utrecht-color-white);
1023
+ --denhaag-process-steps-step-marker-checked-border-width: var(--utrecht-border-width-md);
1024
+ --denhaag-process-steps-step-marker-checked-color: var(--utrecht-color-green-30);
1025
+ --denhaag-process-steps-step-marker-warning-border-color: var(--utrecht-color-invalid);
1026
+ --denhaag-process-steps-step-marker-warning-background-color: var(--utrecht-color-white);
1027
+ --denhaag-process-steps-step-marker-warning-color: var(--utrecht-color-invalid);
1028
+ --denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
1029
+ --denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
1030
+ --denhaag-process-steps-step-line-stroke-width: var(--utrecht-border-width-md);
1031
+ --denhaag-process-steps-step-line-color: var(--utrecht-color-green-30);
1032
+ --denhaag-process-steps-step-line-checked-color: var(--utrecht-color-green-30);
1033
+ --denhaag-process-steps-step-line-warning-color: var(--utrecht-color-invalid);
1034
+ --denhaag-process-steps-step-metadata-color: var(--utrecht-color-grey-15);
1035
+ --denhaag-process-steps-step-metadata-font-size: var(--utrecht-typography-scale-sm-font-size);
1036
+ --denhaag-process-steps-step-description-color: var(--utrecht-color-black);
1037
+ --denhaag-process-steps-step-description-font-size: var(--utrecht-typography-scale-md-font-size);
1038
+ --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
1039
+ --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
1040
+ --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1041
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
1042
+ --nl-code-block-color: var(--utrecht-color-black);
1043
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
1044
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
1045
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
1046
+ --nl-data-badge-color: var(--utrecht-color-white);
1047
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
1048
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
1049
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
1050
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
1051
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1052
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
1053
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
1054
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
1055
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1056
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
1057
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
1058
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
1059
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1060
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
1061
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
1062
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
1063
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1064
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
1065
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
1066
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
1067
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1068
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
1069
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
1070
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
1071
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
1072
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
1073
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
1074
+ --nl-mark-color: var(--utrecht-color-black);
1075
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
1076
+ --nl-number-badge-color: var(--utrecht-color-white);
1077
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
1078
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
1079
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
1080
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1081
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
1082
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
1083
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1084
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
1085
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
1086
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1087
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1088
+ --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /** Default corner radius for badge components */
1089
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /** Default background color for badge components */
1090
+ --utrecht-badge-color: var(--nl-data-badge-color); /** Default text color for badge components */
1091
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /** Default block padding for badge components */
1092
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /** Default inline padding color for badge components */
1197
1093
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1198
- --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1199
- --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1200
- --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1201
- --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1202
- --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1203
- --of-layout-bg: var(--of-layout-background);
1204
- --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1205
- --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1206
- --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1207
- --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1208
- --utrecht-status-badge-color: var(--utrecht-badge-color);
1209
- --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1210
- --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1211
- --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1212
- --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1213
- --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1214
- --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1215
- --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1216
- --utrecht-skip-link-color: var(--nl-skip-link-color);
1217
- --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
1218
- --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1219
- --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
1220
- --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
1221
- --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1222
- --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
1223
- --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1224
- --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
1225
- --utrecht-feedback-inactive-background-color: var(--utrecht-feedback-danger-background-color);
1226
- --utrecht-feedback-success-border-color: var(--utrecht-feedback-safe-border-color);
1227
- --utrecht-feedback-success-background-color: var(--utrecht-feedback-safe-background-color);
1228
- --utrecht-feedback-error-border-color: var(--utrecht-feedback-danger-border-color);
1229
- --utrecht-feedback-error-background-color: var(--utrecht-feedback-danger-background-color);
1230
- --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
1231
- --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
1232
- --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
1233
- --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1234
- --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1094
+ --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
1095
+ --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
1096
+ --utrecht-button-pressed-color: var(--utrecht-button-active-color);
1097
+ --utrecht-button-primary-action-pressed-background-color: var(--utrecht-button-primary-action-active-background-color);
1098
+ --utrecht-button-primary-action-pressed-border-color: var(--utrecht-button-primary-action-active-border-color);
1099
+ --utrecht-button-primary-action-pressed-color: var(--utrecht-button-primary-action-active-color);
1100
+ --utrecht-button-secondary-action-pressed-background-color: var(--utrecht-button-secondary-action-active-background-color);
1101
+ --utrecht-button-secondary-action-pressed-color: var(--utrecht-button-secondary-action-active-color);
1102
+ --utrecht-button-subtle-pressed-background-color: var(--utrecht-button-subtle-active-background-color);
1103
+ --utrecht-button-subtle-pressed-color: var(--utrecht-button-subtle-active-color);
1104
+ --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
1105
+ --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
1106
+ --utrecht-checkbox-color: var(--utrecht-form-control-color);
1107
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
1108
+ --utrecht-code-block-color: var(--nl-code-block-color);
1109
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1110
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1111
+ --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1112
+ --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
1113
+ --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
1114
+ --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
1115
+ --utrecht-feedback-safe-background-color: var(--utrecht-feedback-safe-color);
1116
+ --utrecht-feedback-safe-border-color: var(--utrecht-feedback-safe-color);
1117
+ --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
1118
+ --utrecht-feedback-valid-color: var(--utrecht-feedback-safe-color);
1119
+ --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
1120
+ --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
1121
+ --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
1122
+ --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
1123
+ --utrecht-drawer-background-color: var(--utrecht-document-background-color);
1124
+ --utrecht-drawer-color: var(--utrecht-document-color);
1125
+ --utrecht-form-control-font-family: var(--utrecht-document-font-family);
1126
+ --utrecht-form-control-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
1127
+ --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
1128
+ --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
1129
+ --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
1130
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
1131
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
1132
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
1133
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
1134
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
1135
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
1136
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
1137
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
1138
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
1139
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
1140
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
1141
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
1142
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
1143
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
1144
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
1145
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
1146
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
1147
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
1148
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
1149
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
1150
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
1151
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
1152
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
1153
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
1154
+ --utrecht-link-active-color: var(--utrecht-link-color);
1155
+ --utrecht-link-hover-color: var(--utrecht-link-focus-color);
1156
+ --utrecht-link-visited-color: var(--utrecht-link-color);
1157
+ --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
1158
+ --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
1159
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
1160
+ --utrecht-mark-color: var(--nl-mark-color);
1161
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
1162
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /** Default text color for badge components */
1163
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
1164
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
1165
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
1166
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
1167
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
1168
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
1169
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
1170
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
1171
+ --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
1172
+ --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
1173
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1174
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1175
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1176
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1177
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1178
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1179
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1180
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1181
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1182
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1183
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1184
+ --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1185
+ --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1186
+ --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1187
+ --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
1188
+ --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1189
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1190
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
1191
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
1192
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
1193
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
1194
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
1195
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
1196
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
1197
+ --of-layout-background: var(--utrecht-document-background-color);
1198
+ --of-page-footer-bg: var(--utrecht-page-footer-background-color);
1199
+ --of-page-footer-fg: var(--utrecht-page-footer-color);
1200
+ --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1201
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1202
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
1235
1203
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1236
- --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1237
- --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1238
- --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1239
- --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1240
- --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1241
- --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1242
- --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1243
- --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1244
- --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1245
- --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1204
+ --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1205
+ --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1206
+ --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
1207
+ --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
1208
+ --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
1209
+ --utrecht-feedback-error-background-color: var(--utrecht-feedback-danger-background-color);
1210
+ --utrecht-feedback-error-border-color: var(--utrecht-feedback-danger-border-color);
1211
+ --utrecht-feedback-success-background-color: var(--utrecht-feedback-safe-background-color);
1212
+ --utrecht-feedback-success-border-color: var(--utrecht-feedback-safe-border-color);
1213
+ --utrecht-feedback-inactive-background-color: var(--utrecht-feedback-danger-background-color);
1214
+ --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
1215
+ --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1216
+ --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
1217
+ --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1218
+ --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
1219
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
1220
+ --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1221
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
1222
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1223
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1224
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1225
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1226
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1227
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1228
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1229
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1230
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1231
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1232
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1233
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1234
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1235
+ --of-layout-bg: var(--of-layout-background);
1246
1236
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1247
- --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1248
- --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1249
- --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1250
- --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1251
- --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1252
- --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1253
- --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1237
+ --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1238
+ --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1239
+ --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1240
+ --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1241
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1242
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1243
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1244
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1245
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1246
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1254
1247
  --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1248
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1249
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1250
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1251
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1252
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1253
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1254
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1255
1255
  }