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