@utrecht/design-tokens 2.0.0 → 2.1.1

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 (83) 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 +64 -55
  5. package/dist/_mixin.scss +1011 -0
  6. package/dist/_variables.scss +64 -55
  7. package/dist/background-image-icon.css +0 -1
  8. package/dist/dark/_mixin-theme.scss +64 -55
  9. package/dist/dark/_mixin.scss +1022 -0
  10. package/dist/dark/_variables.scss +1019 -0
  11. package/dist/dark/index.cjs +1022 -0
  12. package/dist/dark/index.css +64 -55
  13. package/dist/dark/index.d.ts +1143 -0
  14. package/dist/dark/index.flat.json +1018 -0
  15. package/dist/dark/index.json +30708 -0
  16. package/dist/dark/index.mjs +1020 -0
  17. package/dist/dark/index.tokens.json +7790 -0
  18. package/dist/dark/list.json +30708 -0
  19. package/dist/dark/property.css +703 -0
  20. package/dist/dark/root.css +546 -537
  21. package/dist/dark/theme-prince-xml.css +1022 -0
  22. package/dist/dark/theme.css +1022 -0
  23. package/dist/dark/tokens.cjs +37484 -0
  24. package/dist/dark/tokens.d.ts +4792 -0
  25. package/dist/dark/tokens.json +37480 -0
  26. package/dist/dark/variables.cjs +1022 -0
  27. package/dist/dark/variables.css +1022 -0
  28. package/dist/dark/variables.d.ts +1143 -0
  29. package/dist/dark/variables.json +1018 -0
  30. package/dist/dark/variables.less +1019 -0
  31. package/dist/dark/variables.mjs +1020 -0
  32. package/dist/index.cjs +67 -58
  33. package/dist/index.css +131 -118
  34. package/dist/index.d.ts +59 -47
  35. package/dist/index.flat.json +607 -597
  36. package/dist/index.json +7028 -7230
  37. package/dist/index.mjs +67 -58
  38. package/dist/index.tokens.json +2170 -911
  39. package/dist/list.json +31825 -0
  40. package/dist/property.css +768 -0
  41. package/dist/root.css +541 -532
  42. package/dist/theme-prince-xml.css +64 -55
  43. package/dist/theme.css +541 -532
  44. package/dist/tokens.cjs +10583 -9537
  45. package/dist/tokens.d.ts +609 -249
  46. package/dist/tokens.json +38622 -0
  47. package/dist/variables.cjs +1011 -0
  48. package/dist/variables.css +1011 -0
  49. package/dist/variables.d.ts +1132 -0
  50. package/dist/variables.json +1007 -0
  51. package/dist/variables.less +64 -55
  52. package/dist/variables.mjs +1009 -0
  53. package/package.json +6 -5
  54. package/src/background-image-icon.scss +0 -1
  55. package/src/brand/utrecht/typography.tokens.json +9 -9
  56. package/src/component/of/progress-indicator.tokens.json +1 -1
  57. package/src/component/utrecht/accordion.tokens.json +1 -0
  58. package/src/component/utrecht/backdrop.tokens.json +1 -1
  59. package/src/component/utrecht/blockquote.tokens.json +3 -3
  60. package/src/component/utrecht/button.tokens.json +1 -3
  61. package/src/component/utrecht/code-block.tokens.json +2 -2
  62. package/src/component/utrecht/figure.tokens.json +2 -2
  63. package/src/component/utrecht/form-fieldset.tokens.json +2 -2
  64. package/src/component/utrecht/form-toggle.tokens.json +1 -1
  65. package/src/component/utrecht/link.tokens.json +3 -1
  66. package/src/component/utrecht/number-badge.tokens.json +23 -0
  67. package/src/component/utrecht/pagination.tokens.json +1 -1
  68. package/src/component/utrecht/skip-link.tokens.json +4 -2
  69. package/src/component/utrecht/spotlight-section.tokens.json +8 -0
  70. package/src/component/utrecht/table.tokens.json +1 -1
  71. package/src/component/utrecht/textarea.tokens.json +1 -0
  72. package/src/component/utrecht/toptask-link.tokens.json +1 -1
  73. package/src/css-property-formatter.mjs +46 -0
  74. package/src/dark/component/tokens.json +1 -1
  75. package/src/index.scss +2 -5
  76. package/style-dictionary-build-dark.mjs +64 -0
  77. package/style-dictionary-build.mjs +41 -0
  78. package/style-dictionary-config.mjs +261 -0
  79. package/dist/figma-tokens.json +0 -36582
  80. package/src/css-property-formatter.js +0 -35
  81. package/src/style-dictionary-config-dark.js +0 -56
  82. package/src/style-dictionary-config.js +0 -63
  83. package/style-dictionary.config.json +0 -143
package/dist/index.css CHANGED
@@ -4,12 +4,10 @@
4
4
  * All rights reserved
5
5
  */
6
6
  /**
7
- * Do not edit directly
8
- * Generated on Wed, 21 Aug 2024 08:24:57 GMT
7
+ * Do not edit directly, this file was auto-generated.
9
8
  */
10
9
  /**
11
- * Do not edit directly
12
- * Generated on Wed, 21 Aug 2024 08:24:56 GMT
10
+ * Do not edit directly, this file was auto-generated.
13
11
  */
14
12
  /**
15
13
  * @license SEE LICENSE.md
@@ -31,9 +29,8 @@
31
29
  --utrecht-paragraph-lead-font-size: 1.25em; /* 20px on desktop min-width-60em */
32
30
  }
33
31
  }
34
- .utrecht-theme,
35
- .utrecht-theme ::backdrop {
36
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
32
+ .utrecht-theme {
33
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
37
34
  --denhaag-process-steps-sub-step-marker-size: 12px;
38
35
  --denhaag-process-steps-step-marker-size: 28px;
39
36
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -128,20 +125,19 @@
128
125
  --utrecht-toptask-link-min-inline-size: 15rem;
129
126
  --utrecht-toptask-link-min-block-size: 8.25rem;
130
127
  --utrecht-toptask-link-line-height: 1.2;
131
- --utrecht-toptask-link-font-size: 1rem;
132
128
  --utrecht-textbox-border-bottom-width: 3px;
133
129
  --utrecht-textarea-border-bottom-width: 3px;
134
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
130
+ --utrecht-textarea-border-block-end-width: 3px;
135
131
  --utrecht-table-cell-icon-size: 1em;
136
132
  --utrecht-table-cell-padding-inline-start: 0.4em;
137
133
  --utrecht-table-cell-padding-inline-end: 0.4em;
138
134
  --utrecht-table-cell-padding-block-start: 0.5em;
139
135
  --utrecht-table-cell-padding-block-end: 0.5em;
140
- --utrecht-table-cell-line-height: 24px;
136
+ --utrecht-table-cell-line-height: 1.5rem;
137
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
141
138
  --utrecht-table-header-sticky-border-block-end-width: 2px;
142
139
  --utrecht-table-caption-margin-block-end: 1em;
143
140
  --utrecht-table-caption-text-align: start;
144
- --utrecht-table-caption-font-size: 1.125em;
145
141
  --utrecht-table-margin-block-end: 0;
146
142
  --utrecht-separator-block-size: 8px;
147
143
  --utrecht-select-border-block-end-width: 3px;
@@ -153,10 +149,10 @@
153
149
  --utrecht-search-bar-button-hover-scale: 1;
154
150
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
155
151
  --utrecht-rich-text-confidant-margin-block-end: 0;
156
- --utrecht-radio-button-margin-inline-end: 12px;
157
152
  --utrecht-radio-button-border-radius: 0;
158
153
  --utrecht-radio-button-invalid-border-width: 2px;
159
154
  --utrecht-radio-button-icon-size: 42%;
155
+ --utrecht-radio-button-margin-inline-end: 12px;
160
156
  --utrecht-radio-button-size: 24px;
161
157
  --utrecht-radio-button-border-width: 2px;
162
158
  --utrecht-paragraph-margin-block-end: 0;
@@ -169,7 +165,6 @@
169
165
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
170
166
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
171
167
  --utrecht-pagination-relative-link-border-width: 2px;
172
- --utrecht-pagination-page-link-border-color: transparent;
173
168
  --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
174
169
  --utrecht-pagination-page-link-text-decoration: none;
175
170
  --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -177,10 +172,10 @@
177
172
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
178
173
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
179
174
  --utrecht-pagination-page-link-border-width: 2px;
175
+ --utrecht-pagination-page-link-border-color: transparent;
180
176
  --utrecht-pagination-page-link-background-color: transparent;
181
177
  --utrecht-pagination-margin-block-end: 1em;
182
178
  --utrecht-pagination-margin-block-start: 0;
183
- --utrecht-pagination-font-size: 14px;
184
179
  --utrecht-page-padding-inline-start: 2em;
185
180
  --utrecht-page-padding-block-end: 1em;
186
181
  --utrecht-page-padding-inline-end: 2em;
@@ -188,10 +183,10 @@
188
183
  --utrecht-page-max-inline-size: 1184px;
189
184
  --utrecht-page-margin-inline-end: 2em;
190
185
  --utrecht-page-margin-inline-start: 2em;
191
- --utrecht-page-header-padding-block-start: 1.8em;
192
- --utrecht-page-header-padding-inline-start: 2em;
193
186
  --utrecht-page-header-padding-inline-end: 2.4em;
187
+ --utrecht-page-header-padding-inline-start: 2em;
194
188
  --utrecht-page-header-padding-block-end: 1em;
189
+ --utrecht-page-header-padding-block-start: 1.8em;
195
190
  --utrecht-page-content-padding-block-end: 2em;
196
191
  --utrecht-page-content-padding-block-start: 2em;
197
192
  --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -202,12 +197,14 @@
202
197
  --utrecht-ordered-list-margin-block-start: 0;
203
198
  --utrecht-number-data-negative-color: red;
204
199
  --utrecht-number-data-positive-color: green;
200
+ --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
201
+ --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
205
202
  --utrecht-topnav-link-focus-text-decoration: none;
206
203
  --utrecht-topnav-link-focus-border-type: dotted;
204
+ --utrecht-mapcontrolbutton-margin-inline-start: 0;
205
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
207
206
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
208
207
  --utrecht-mapcontrolbutton-border-radius: 2px;
209
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
210
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
211
208
  --utrecht-map-marker-icon-size: 30px;
212
209
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
213
210
  --utrecht-map-marker-border-width: 3px;
@@ -223,11 +220,11 @@
223
220
  --utrecht-link-icon-size: 1.2em;
224
221
  --utrecht-link-hover-text-decoration-thickness: 3px;
225
222
  --utrecht-link-hover-text-decoration: underline;
226
- --utrecht-link-focus-text-decoration: none;
223
+ --utrecht-link-focus-visible-text-decoration: none;
227
224
  --utrecht-link-text-underline-offset: 3px;
228
225
  --utrecht-link-text-decoration: underline;
229
- --utrecht-link-social-icon-size: 26px;
230
226
  --utrecht-link-social-hover-transform-scale: 1.1;
227
+ --utrecht-link-social-icon-size: 26px;
231
228
  --utrecht-link-social-size: 40px;
232
229
  --utrecht-link-social-border-width: 2px;
233
230
  --utrecht-link-list-icon-size: 14px;
@@ -260,13 +257,11 @@
260
257
  --utrecht-form-toggle-border-radius: 10em;
261
258
  --utrecht-form-toggle-border-style: solid;
262
259
  --utrecht-form-toggle-border-color: transparent;
263
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
260
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
264
261
  --utrecht-form-label-font-size: 1em;
265
- --utrecht-form-fieldset-legend-line-height: 1.4;
266
- --utrecht-form-fieldset-legend-font-size: 1rem;
267
262
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
268
- --utrecht-form-control-read-only-border-color: transparent;
269
263
  --utrecht-form-control-block-size: 42px;
264
+ --utrecht-form-control-read-only-border-color: transparent;
270
265
  --utrecht-form-control-padding-inline-start: 12px;
271
266
  --utrecht-form-control-padding-inline-end: 12px;
272
267
  --utrecht-form-control-padding-block-start: 8px;
@@ -274,15 +269,13 @@
274
269
  --utrecht-form-control-max-inline-size: 28em;
275
270
  --utrecht-form-control-border-radius: 0;
276
271
  --utrecht-focus-outline-style: dotted;
277
- --utrecht-figure-caption-line-height: 20px;
278
- --utrecht-figure-caption-font-size: 14px;
279
272
  --utrecht-figure-caption-color: #727272;
280
273
  --utrecht-drawer-max-inline-size: 320px;
281
274
  --utrecht-drawer-max-block-size: 240px;
282
275
  --utrecht-drawer-border-width: 1px;
283
276
  --utrecht-document-line-height: 1.4;
284
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
285
277
  --utrecht-data-list-rows-column-inline-size: 80%;
278
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
286
279
  --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
287
280
  --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
288
281
  --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -338,20 +331,18 @@
338
331
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
339
332
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
340
333
  --utrecht-pointer-target-min-size: 44px;
341
- --utrecht-action-inert-cursor: default;
342
- --utrecht-action-activate-cursor: pointer;
343
334
  --utrecht-action-submit-cursor: pointer;
344
335
  --utrecht-action-navigate-cursor: pointer;
336
+ --utrecht-action-inert-cursor: default;
345
337
  --utrecht-action-disabled-cursor: not-allowed;
346
338
  --utrecht-action-busy-cursor: wait;
339
+ --utrecht-action-activate-cursor: pointer;
347
340
  --utrecht-column-layout-column-width: 350px;
348
341
  --utrecht-column-layout-column-rule-width: 2px;
349
342
  --utrecht-code-block-padding-inline-end: 20px;
350
343
  --utrecht-code-block-padding-inline-start: 20px;
351
344
  --utrecht-code-block-padding-block-end: 20px;
352
345
  --utrecht-code-block-padding-block-start: 20px;
353
- --utrecht-code-block-line-height: 24px;
354
- --utrecht-code-block-font-size: 16px;
355
346
  --utrecht-checkbox-margin-block-start: 0;
356
347
  --utrecht-checkbox-focus-border-width: 2px;
357
348
  --utrecht-checkbox-size: 24px;
@@ -371,7 +362,7 @@
371
362
  --utrecht-calendar-table-days-item-day-border-color: transparent;
372
363
  --utrecht-calendar-table-days-item-day-border-width: 2px;
373
364
  --utrecht-calendar-table-days-item-day-size: 44px;
374
- --utrecht-calendar-table-weeks-item-line-height: 24px;
365
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
375
366
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
376
367
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
377
368
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -400,15 +391,13 @@
400
391
  --utrecht-breadcrumb-nav-min-block-size: 34px;
401
392
  --utrecht-blockquote-margin-block-end: 1.6em;
402
393
  --utrecht-blockquote-margin-block-start: 1.6em;
403
- --utrecht-blockquote-content-font-size: 1.125rem;
404
- --utrecht-blockquote-attribution-font-size: 0.75rem;
405
394
  --utrecht-blockquote-margin-inline-end: 1.6em;
406
395
  --utrecht-blockquote-margin-inline-start: 1.6em;
407
396
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
408
397
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
409
398
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
410
399
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
411
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
400
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
412
401
  --utrecht-backdrop-opacity: 0.8;
413
402
  --utrecht-article-max-inline-size: 780px;
414
403
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -469,10 +458,8 @@
469
458
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
470
459
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
471
460
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
461
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
472
462
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
473
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
474
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
475
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
476
463
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
477
464
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
478
465
  --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -481,16 +468,22 @@
481
468
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
482
469
  --utrecht-table-cell-selected-color: var(--utrecht-color-black);
483
470
  --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
471
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
472
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
473
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
484
474
  --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
485
475
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
486
476
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
487
477
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
488
478
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
489
479
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
480
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
490
481
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
491
482
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
492
483
  --utrecht-surface-color: var(--utrecht-color-grey-10);
493
484
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
485
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
486
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
494
487
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
495
488
  --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-90);
496
489
  --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -499,7 +492,7 @@
499
492
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
500
493
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
501
494
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
502
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
495
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
503
496
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
504
497
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
505
498
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -519,8 +512,8 @@
519
512
  --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
520
513
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
521
514
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
522
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
523
515
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
516
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
524
517
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
525
518
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
526
519
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -530,8 +523,8 @@
530
523
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
531
524
  --utrecht-radio-button-color: var(--utrecht-color-white);
532
525
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
533
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
534
526
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
527
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
535
528
  --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
536
529
  --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
537
530
  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -539,8 +532,8 @@
539
532
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
540
533
  --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
541
534
  --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
542
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
543
535
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
536
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
544
537
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
545
538
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
546
539
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -553,12 +546,12 @@
553
546
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
554
547
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
555
548
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
556
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
557
549
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
558
550
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
559
551
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
560
552
  --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
561
553
  --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
554
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
562
555
  --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
563
556
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
564
557
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -568,6 +561,7 @@
568
561
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
569
562
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
570
563
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
564
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
571
565
  --utrecht-page-color: var(--utrecht-color-black);
572
566
  --utrecht-page-background-color: var(--utrecht-color-white);
573
567
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -577,6 +571,9 @@
577
571
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
578
572
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
579
573
  --utrecht-page-footer-color: var(--utrecht-color-white);
574
+ --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
575
+ --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
576
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
580
577
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
581
578
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
582
579
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -604,27 +601,27 @@
604
601
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
605
602
  --utrecht-mark-color: var(--utrecht-color-black);
606
603
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
604
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
605
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
606
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
607
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
608
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
609
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
610
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
611
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
607
612
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
608
613
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
609
614
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
610
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
611
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
612
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
613
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
614
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
615
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
615
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
616
616
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
617
617
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
618
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
619
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
620
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
621
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
622
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
623
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
624
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
625
618
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
626
619
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
620
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
627
621
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
622
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
623
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
624
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
628
625
  --utrecht-map-marker-border-color: var(--utrecht-color-white);
629
626
  --utrecht-map-marker-color: var(--utrecht-color-white);
630
627
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -648,8 +645,8 @@
648
645
  --utrecht-link-placeholder-color: var(--utrecht-color-grey-40);
649
646
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
650
647
  --utrecht-link-color: var(--utrecht-color-blue-35);
651
- --utrecht-link-social-color: var(--utrecht-color-white);
652
648
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
649
+ --utrecht-link-social-color: var(--utrecht-color-white);
653
650
  --utrecht-link-social-border-color: var(--utrecht-color-white);
654
651
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
655
652
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -698,7 +695,9 @@
698
695
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
699
696
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
700
697
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
698
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
701
699
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
700
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
702
701
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
703
702
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
704
703
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -723,6 +722,8 @@
723
722
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
724
723
  --utrecht-focus-outline-color: var(--utrecht-color-black);
725
724
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
725
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
726
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
726
727
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
727
728
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
728
729
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -758,6 +759,8 @@
758
759
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
759
760
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
760
761
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
762
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
763
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
761
764
  --utrecht-code-block-color: var(--utrecht-color-black);
762
765
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
763
766
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -861,7 +864,6 @@
861
864
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
862
865
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
863
866
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
864
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
865
867
  --utrecht-button-active-color: var(--utrecht-color-white);
866
868
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
867
869
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -872,6 +874,7 @@
872
874
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
873
875
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
874
876
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
877
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
875
878
  --utrecht-button-color: var(--utrecht-color-grey-40);
876
879
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
877
880
  --utrecht-button-background-color: var(--utrecht-color-white);
@@ -890,6 +893,8 @@
890
893
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
891
894
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
892
895
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
896
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
897
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
893
898
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
894
899
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
895
900
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -946,6 +951,7 @@
946
951
  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
947
952
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
948
953
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
954
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
949
955
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
950
956
  --of-page-footer-fg: var(--utrecht-page-footer-color);
951
957
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -955,8 +961,8 @@
955
961
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
956
962
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
957
963
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
958
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
959
964
  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
965
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
960
966
  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
961
967
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
962
968
  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -966,6 +972,7 @@
966
972
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
967
973
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
968
974
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
975
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
969
976
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
970
977
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
971
978
  --utrecht-link-visited-color: var(--utrecht-link-color);
@@ -1030,9 +1037,7 @@
1030
1037
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1031
1038
  }
1032
1039
  .utrecht-theme utrecht-page-footer,
1033
- .utrecht-theme .utrecht-page-footer,
1034
- .utrecht-theme ::backdrop utrecht-page-footer,
1035
- .utrecht-theme ::backdrop .utrecht-page-footer {
1040
+ .utrecht-theme .utrecht-page-footer {
1036
1041
  --utrecht-heading-2-color: var(--utrecht-color-white);
1037
1042
  --utrecht-heading-2-font-size: 1em;
1038
1043
  --utrecht-heading-3-color: var(--utrecht-color-white);
@@ -1042,10 +1047,8 @@
1042
1047
 
1043
1048
  @media (prefers-color-scheme: dark) {
1044
1049
  .utrecht-theme--media-query,
1045
- .utrecht-theme--media-query ::backdrop,
1046
- .utrecht-theme--media-query-color-scheme,
1047
- .utrecht-theme--media-query-color-scheme ::backdrop {
1048
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
1050
+ .utrecht-theme--media-query-color-scheme {
1051
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
1049
1052
  --denhaag-process-steps-sub-step-marker-size: 12px;
1050
1053
  --denhaag-process-steps-step-marker-size: 28px;
1051
1054
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -1140,20 +1143,19 @@
1140
1143
  --utrecht-toptask-link-min-inline-size: 15rem;
1141
1144
  --utrecht-toptask-link-min-block-size: 8.25rem;
1142
1145
  --utrecht-toptask-link-line-height: 1.2;
1143
- --utrecht-toptask-link-font-size: 1rem;
1144
1146
  --utrecht-textbox-border-bottom-width: 3px;
1145
1147
  --utrecht-textarea-border-bottom-width: 3px;
1146
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
1148
+ --utrecht-textarea-border-block-end-width: 3px;
1147
1149
  --utrecht-table-cell-icon-size: 1em;
1148
1150
  --utrecht-table-cell-padding-inline-start: 0.4em;
1149
1151
  --utrecht-table-cell-padding-inline-end: 0.4em;
1150
1152
  --utrecht-table-cell-padding-block-start: 0.5em;
1151
1153
  --utrecht-table-cell-padding-block-end: 0.5em;
1152
- --utrecht-table-cell-line-height: 24px;
1154
+ --utrecht-table-cell-line-height: 1.5rem;
1155
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
1153
1156
  --utrecht-table-header-sticky-border-block-end-width: 2px;
1154
1157
  --utrecht-table-caption-margin-block-end: 1em;
1155
1158
  --utrecht-table-caption-text-align: start;
1156
- --utrecht-table-caption-font-size: 1.125em;
1157
1159
  --utrecht-table-margin-block-end: 0;
1158
1160
  --utrecht-separator-block-size: 8px;
1159
1161
  --utrecht-select-border-block-end-width: 3px;
@@ -1165,10 +1167,10 @@
1165
1167
  --utrecht-search-bar-button-hover-scale: 1;
1166
1168
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
1167
1169
  --utrecht-rich-text-confidant-margin-block-end: 0;
1168
- --utrecht-radio-button-margin-inline-end: 12px;
1169
1170
  --utrecht-radio-button-border-radius: 0;
1170
1171
  --utrecht-radio-button-invalid-border-width: 2px;
1171
1172
  --utrecht-radio-button-icon-size: 42%;
1173
+ --utrecht-radio-button-margin-inline-end: 12px;
1172
1174
  --utrecht-radio-button-size: 24px;
1173
1175
  --utrecht-radio-button-border-width: 2px;
1174
1176
  --utrecht-paragraph-margin-block-end: 0;
@@ -1181,7 +1183,6 @@
1181
1183
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
1182
1184
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
1183
1185
  --utrecht-pagination-relative-link-border-width: 2px;
1184
- --utrecht-pagination-page-link-border-color: transparent;
1185
1186
  --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
1186
1187
  --utrecht-pagination-page-link-text-decoration: none;
1187
1188
  --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -1189,10 +1190,10 @@
1189
1190
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
1190
1191
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
1191
1192
  --utrecht-pagination-page-link-border-width: 2px;
1193
+ --utrecht-pagination-page-link-border-color: transparent;
1192
1194
  --utrecht-pagination-page-link-background-color: transparent;
1193
1195
  --utrecht-pagination-margin-block-end: 1em;
1194
1196
  --utrecht-pagination-margin-block-start: 0;
1195
- --utrecht-pagination-font-size: 14px;
1196
1197
  --utrecht-page-padding-inline-start: 2em;
1197
1198
  --utrecht-page-padding-block-end: 1em;
1198
1199
  --utrecht-page-padding-inline-end: 2em;
@@ -1200,10 +1201,10 @@
1200
1201
  --utrecht-page-max-inline-size: 1184px;
1201
1202
  --utrecht-page-margin-inline-end: 2em;
1202
1203
  --utrecht-page-margin-inline-start: 2em;
1203
- --utrecht-page-header-padding-block-start: 1.8em;
1204
- --utrecht-page-header-padding-inline-start: 2em;
1205
1204
  --utrecht-page-header-padding-inline-end: 2.4em;
1205
+ --utrecht-page-header-padding-inline-start: 2em;
1206
1206
  --utrecht-page-header-padding-block-end: 1em;
1207
+ --utrecht-page-header-padding-block-start: 1.8em;
1207
1208
  --utrecht-page-content-padding-block-end: 2em;
1208
1209
  --utrecht-page-content-padding-block-start: 2em;
1209
1210
  --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -1214,12 +1215,14 @@
1214
1215
  --utrecht-ordered-list-margin-block-start: 0;
1215
1216
  --utrecht-number-data-negative-color: red;
1216
1217
  --utrecht-number-data-positive-color: green;
1218
+ --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
1219
+ --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
1217
1220
  --utrecht-topnav-link-focus-text-decoration: none;
1218
1221
  --utrecht-topnav-link-focus-border-type: dotted;
1222
+ --utrecht-mapcontrolbutton-margin-inline-start: 0;
1223
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
1219
1224
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
1220
1225
  --utrecht-mapcontrolbutton-border-radius: 2px;
1221
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
1222
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
1223
1226
  --utrecht-map-marker-icon-size: 30px;
1224
1227
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
1225
1228
  --utrecht-map-marker-border-width: 3px;
@@ -1235,11 +1238,11 @@
1235
1238
  --utrecht-link-icon-size: 1.2em;
1236
1239
  --utrecht-link-hover-text-decoration-thickness: 3px;
1237
1240
  --utrecht-link-hover-text-decoration: underline;
1238
- --utrecht-link-focus-text-decoration: none;
1241
+ --utrecht-link-focus-visible-text-decoration: none;
1239
1242
  --utrecht-link-text-underline-offset: 3px;
1240
1243
  --utrecht-link-text-decoration: underline;
1241
- --utrecht-link-social-icon-size: 26px;
1242
1244
  --utrecht-link-social-hover-transform-scale: 1.1;
1245
+ --utrecht-link-social-icon-size: 26px;
1243
1246
  --utrecht-link-social-size: 40px;
1244
1247
  --utrecht-link-social-border-width: 2px;
1245
1248
  --utrecht-link-list-icon-size: 14px;
@@ -1273,13 +1276,11 @@
1273
1276
  --utrecht-form-toggle-border-radius: 10em;
1274
1277
  --utrecht-form-toggle-border-style: solid;
1275
1278
  --utrecht-form-toggle-border-color: transparent;
1276
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
1279
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
1277
1280
  --utrecht-form-label-font-size: 1em;
1278
- --utrecht-form-fieldset-legend-line-height: 1.4;
1279
- --utrecht-form-fieldset-legend-font-size: 1rem;
1280
1281
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
1281
- --utrecht-form-control-read-only-border-color: transparent;
1282
1282
  --utrecht-form-control-block-size: 42px;
1283
+ --utrecht-form-control-read-only-border-color: transparent;
1283
1284
  --utrecht-form-control-padding-inline-start: 12px;
1284
1285
  --utrecht-form-control-padding-inline-end: 12px;
1285
1286
  --utrecht-form-control-padding-block-start: 8px;
@@ -1287,15 +1288,13 @@
1287
1288
  --utrecht-form-control-max-inline-size: 28em;
1288
1289
  --utrecht-form-control-border-radius: 0;
1289
1290
  --utrecht-focus-outline-style: dotted;
1290
- --utrecht-figure-caption-line-height: 20px;
1291
- --utrecht-figure-caption-font-size: 14px;
1292
1291
  --utrecht-figure-caption-color: #727272;
1293
1292
  --utrecht-drawer-max-inline-size: 320px;
1294
1293
  --utrecht-drawer-max-block-size: 240px;
1295
1294
  --utrecht-drawer-border-width: 1px;
1296
1295
  --utrecht-document-line-height: 1.4;
1297
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
1298
1296
  --utrecht-data-list-rows-column-inline-size: 80%;
1297
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
1299
1298
  --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
1300
1299
  --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
1301
1300
  --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -1351,20 +1350,18 @@
1351
1350
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
1352
1351
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
1353
1352
  --utrecht-pointer-target-min-size: 44px;
1354
- --utrecht-action-inert-cursor: default;
1355
- --utrecht-action-activate-cursor: pointer;
1356
1353
  --utrecht-action-submit-cursor: pointer;
1357
1354
  --utrecht-action-navigate-cursor: pointer;
1355
+ --utrecht-action-inert-cursor: default;
1358
1356
  --utrecht-action-disabled-cursor: not-allowed;
1359
1357
  --utrecht-action-busy-cursor: wait;
1358
+ --utrecht-action-activate-cursor: pointer;
1360
1359
  --utrecht-column-layout-column-width: 350px;
1361
1360
  --utrecht-column-layout-column-rule-width: 2px;
1362
1361
  --utrecht-code-block-padding-inline-end: 20px;
1363
1362
  --utrecht-code-block-padding-inline-start: 20px;
1364
1363
  --utrecht-code-block-padding-block-end: 20px;
1365
1364
  --utrecht-code-block-padding-block-start: 20px;
1366
- --utrecht-code-block-line-height: 24px;
1367
- --utrecht-code-block-font-size: 16px;
1368
1365
  --utrecht-checkbox-margin-block-start: 0;
1369
1366
  --utrecht-checkbox-focus-border-width: 2px;
1370
1367
  --utrecht-checkbox-size: 24px;
@@ -1384,7 +1381,7 @@
1384
1381
  --utrecht-calendar-table-days-item-day-border-color: transparent;
1385
1382
  --utrecht-calendar-table-days-item-day-border-width: 2px;
1386
1383
  --utrecht-calendar-table-days-item-day-size: 44px;
1387
- --utrecht-calendar-table-weeks-item-line-height: 24px;
1384
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
1388
1385
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
1389
1386
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
1390
1387
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -1413,15 +1410,13 @@
1413
1410
  --utrecht-breadcrumb-nav-min-block-size: 34px;
1414
1411
  --utrecht-blockquote-margin-block-end: 1.6em;
1415
1412
  --utrecht-blockquote-margin-block-start: 1.6em;
1416
- --utrecht-blockquote-content-font-size: 1.125rem;
1417
- --utrecht-blockquote-attribution-font-size: 0.75rem;
1418
1413
  --utrecht-blockquote-margin-inline-end: 1.6em;
1419
1414
  --utrecht-blockquote-margin-inline-start: 1.6em;
1420
1415
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
1421
1416
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
1422
1417
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
1423
1418
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
1424
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
1419
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
1425
1420
  --utrecht-backdrop-opacity: 0.8;
1426
1421
  --utrecht-article-max-inline-size: 780px;
1427
1422
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -1484,10 +1479,8 @@
1484
1479
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
1485
1480
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
1486
1481
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
1482
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
1487
1483
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
1488
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
1489
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
1490
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
1491
1484
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
1492
1485
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
1493
1486
  --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -1496,16 +1489,22 @@
1496
1489
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
1497
1490
  --utrecht-table-cell-selected-color: var(--utrecht-color-black);
1498
1491
  --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
1492
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
1493
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
1494
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
1499
1495
  --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
1500
1496
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
1501
1497
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
1502
1498
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
1503
1499
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
1504
1500
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1501
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
1505
1502
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1506
1503
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
1507
1504
  --utrecht-surface-color: var(--utrecht-color-grey-95);
1508
1505
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
1506
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
1507
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
1509
1508
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
1510
1509
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
1511
1510
  --utrecht-spotlight-section-info-color: var(--utrecht-color-grey-15);
@@ -1516,7 +1515,7 @@
1516
1515
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
1517
1516
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
1518
1517
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
1519
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
1518
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1520
1519
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1521
1520
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
1522
1521
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -1536,8 +1535,8 @@
1536
1535
  --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
1537
1536
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
1538
1537
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
1539
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
1540
1538
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1539
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
1541
1540
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
1542
1541
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
1543
1542
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -1547,8 +1546,8 @@
1547
1546
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
1548
1547
  --utrecht-radio-button-color: var(--utrecht-color-white);
1549
1548
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
1550
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
1551
1549
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
1550
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
1552
1551
  --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
1553
1552
  --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
1554
1553
  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -1556,8 +1555,8 @@
1556
1555
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
1557
1556
  --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
1558
1557
  --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
1559
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
1560
1558
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
1559
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
1561
1560
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
1562
1561
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
1563
1562
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -1570,12 +1569,12 @@
1570
1569
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1571
1570
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
1572
1571
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
1573
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
1574
1572
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
1575
1573
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
1576
1574
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
1577
1575
  --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1578
1576
  --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
1577
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
1579
1578
  --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
1580
1579
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
1581
1580
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -1585,6 +1584,7 @@
1585
1584
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
1586
1585
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1587
1586
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
1587
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
1588
1588
  --utrecht-page-color: var(--utrecht-color-grey-95);
1589
1589
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
1590
1590
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -1594,6 +1594,9 @@
1594
1594
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
1595
1595
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
1596
1596
  --utrecht-page-footer-color: var(--utrecht-color-white);
1597
+ --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
1598
+ --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
1599
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
1597
1600
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
1598
1601
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
1599
1602
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -1621,27 +1624,27 @@
1621
1624
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
1622
1625
  --utrecht-mark-color: var(--utrecht-color-black);
1623
1626
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
1627
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
1628
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
1629
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
1630
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
1631
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
1632
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
1633
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
1634
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
1624
1635
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
1625
1636
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
1626
1637
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
1627
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
1628
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
1629
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
1630
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
1631
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
1632
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
1638
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
1633
1639
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
1634
1640
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
1635
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
1636
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
1637
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
1638
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
1639
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
1640
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
1641
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
1642
1641
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
1643
1642
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
1643
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
1644
1644
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
1645
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
1646
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
1647
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
1645
1648
  --utrecht-map-marker-border-color: var(--utrecht-color-white);
1646
1649
  --utrecht-map-marker-color: var(--utrecht-color-white);
1647
1650
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -1665,8 +1668,8 @@
1665
1668
  --utrecht-link-placeholder-color: var(--utrecht-color-grey-80);
1666
1669
  --utrecht-link-focus-color: var(--utrecht-color-blue-80);
1667
1670
  --utrecht-link-color: var(--utrecht-color-blue-60);
1668
- --utrecht-link-social-color: var(--utrecht-color-white);
1669
1671
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
1672
+ --utrecht-link-social-color: var(--utrecht-color-white);
1670
1673
  --utrecht-link-social-border-color: var(--utrecht-color-white);
1671
1674
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
1672
1675
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -1714,7 +1717,9 @@
1714
1717
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
1715
1718
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
1716
1719
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
1720
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
1717
1721
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1722
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
1718
1723
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
1719
1724
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
1720
1725
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -1739,6 +1744,8 @@
1739
1744
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
1740
1745
  --utrecht-focus-outline-color: var(--utrecht-color-black);
1741
1746
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
1747
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
1748
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
1742
1749
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1743
1750
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
1744
1751
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -1774,6 +1781,8 @@
1774
1781
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
1775
1782
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
1776
1783
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
1784
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
1785
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
1777
1786
  --utrecht-code-block-color: var(--utrecht-color-black);
1778
1787
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
1779
1788
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -1874,7 +1883,6 @@
1874
1883
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
1875
1884
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
1876
1885
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
1877
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
1878
1886
  --utrecht-button-active-color: var(--utrecht-color-white);
1879
1887
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
1880
1888
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -1885,6 +1893,7 @@
1885
1893
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
1886
1894
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
1887
1895
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
1896
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
1888
1897
  --utrecht-button-color: var(--utrecht-color-grey-80);
1889
1898
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
1890
1899
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -1903,6 +1912,8 @@
1903
1912
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
1904
1913
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
1905
1914
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
1915
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
1916
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
1906
1917
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
1907
1918
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
1908
1919
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -1959,6 +1970,7 @@
1959
1970
  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
1960
1971
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
1961
1972
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
1973
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
1962
1974
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1963
1975
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1964
1976
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -1968,8 +1980,8 @@
1968
1980
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1969
1981
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1970
1982
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1971
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
1972
1983
  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
1984
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
1973
1985
  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
1974
1986
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
1975
1987
  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -1979,6 +1991,7 @@
1979
1991
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
1980
1992
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
1981
1993
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
1994
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
1982
1995
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
1983
1996
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
1984
1997
  --utrecht-link-visited-color: var(--utrecht-link-color);