@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/dark/index.css CHANGED
@@ -4,12 +4,11 @@
4
4
  * All rights reserved
5
5
  */
6
6
  /**
7
- * Do not edit directly
8
- * Generated on Wed, 21 Aug 2024 08:24:56 GMT
7
+ * Do not edit directly, this file was auto-generated.
9
8
  */
10
9
  .utrecht-theme--color-scheme-dark,
11
10
  .utrecht-theme--color-scheme-dark ::backdrop {
12
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
11
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
13
12
  --denhaag-process-steps-sub-step-marker-size: 12px;
14
13
  --denhaag-process-steps-step-marker-size: 28px;
15
14
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -104,20 +103,19 @@
104
103
  --utrecht-toptask-link-min-inline-size: 15rem;
105
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
106
105
  --utrecht-toptask-link-line-height: 1.2;
107
- --utrecht-toptask-link-font-size: 1rem;
108
106
  --utrecht-textbox-border-bottom-width: 3px;
109
107
  --utrecht-textarea-border-bottom-width: 3px;
110
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
108
+ --utrecht-textarea-border-block-end-width: 3px;
111
109
  --utrecht-table-cell-icon-size: 1em;
112
110
  --utrecht-table-cell-padding-inline-start: 0.4em;
113
111
  --utrecht-table-cell-padding-inline-end: 0.4em;
114
112
  --utrecht-table-cell-padding-block-start: 0.5em;
115
113
  --utrecht-table-cell-padding-block-end: 0.5em;
116
- --utrecht-table-cell-line-height: 24px;
114
+ --utrecht-table-cell-line-height: 1.5rem;
115
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
117
116
  --utrecht-table-header-sticky-border-block-end-width: 2px;
118
117
  --utrecht-table-caption-margin-block-end: 1em;
119
118
  --utrecht-table-caption-text-align: start;
120
- --utrecht-table-caption-font-size: 1.125em;
121
119
  --utrecht-table-margin-block-end: 0;
122
120
  --utrecht-separator-block-size: 8px;
123
121
  --utrecht-select-border-block-end-width: 3px;
@@ -129,10 +127,10 @@
129
127
  --utrecht-search-bar-button-hover-scale: 1;
130
128
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
131
129
  --utrecht-rich-text-confidant-margin-block-end: 0;
132
- --utrecht-radio-button-margin-inline-end: 12px;
133
130
  --utrecht-radio-button-border-radius: 0;
134
131
  --utrecht-radio-button-invalid-border-width: 2px;
135
132
  --utrecht-radio-button-icon-size: 42%;
133
+ --utrecht-radio-button-margin-inline-end: 12px;
136
134
  --utrecht-radio-button-size: 24px;
137
135
  --utrecht-radio-button-border-width: 2px;
138
136
  --utrecht-paragraph-margin-block-end: 0;
@@ -145,7 +143,6 @@
145
143
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
146
144
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
147
145
  --utrecht-pagination-relative-link-border-width: 2px;
148
- --utrecht-pagination-page-link-border-color: transparent;
149
146
  --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
150
147
  --utrecht-pagination-page-link-text-decoration: none;
151
148
  --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -153,10 +150,10 @@
153
150
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
154
151
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
155
152
  --utrecht-pagination-page-link-border-width: 2px;
153
+ --utrecht-pagination-page-link-border-color: transparent;
156
154
  --utrecht-pagination-page-link-background-color: transparent;
157
155
  --utrecht-pagination-margin-block-end: 1em;
158
156
  --utrecht-pagination-margin-block-start: 0;
159
- --utrecht-pagination-font-size: 14px;
160
157
  --utrecht-page-padding-inline-start: 2em;
161
158
  --utrecht-page-padding-block-end: 1em;
162
159
  --utrecht-page-padding-inline-end: 2em;
@@ -164,10 +161,10 @@
164
161
  --utrecht-page-max-inline-size: 1184px;
165
162
  --utrecht-page-margin-inline-end: 2em;
166
163
  --utrecht-page-margin-inline-start: 2em;
167
- --utrecht-page-header-padding-block-start: 1.8em;
168
- --utrecht-page-header-padding-inline-start: 2em;
169
164
  --utrecht-page-header-padding-inline-end: 2.4em;
165
+ --utrecht-page-header-padding-inline-start: 2em;
170
166
  --utrecht-page-header-padding-block-end: 1em;
167
+ --utrecht-page-header-padding-block-start: 1.8em;
171
168
  --utrecht-page-content-padding-block-end: 2em;
172
169
  --utrecht-page-content-padding-block-start: 2em;
173
170
  --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -178,12 +175,14 @@
178
175
  --utrecht-ordered-list-margin-block-start: 0;
179
176
  --utrecht-number-data-negative-color: red;
180
177
  --utrecht-number-data-positive-color: green;
178
+ --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
179
+ --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
181
180
  --utrecht-topnav-link-focus-text-decoration: none;
182
181
  --utrecht-topnav-link-focus-border-type: dotted;
182
+ --utrecht-mapcontrolbutton-margin-inline-start: 0;
183
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
183
184
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
184
185
  --utrecht-mapcontrolbutton-border-radius: 2px;
185
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
186
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
187
186
  --utrecht-map-marker-icon-size: 30px;
188
187
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
189
188
  --utrecht-map-marker-border-width: 3px;
@@ -199,11 +198,11 @@
199
198
  --utrecht-link-icon-size: 1.2em;
200
199
  --utrecht-link-hover-text-decoration-thickness: 3px;
201
200
  --utrecht-link-hover-text-decoration: underline;
202
- --utrecht-link-focus-text-decoration: none;
201
+ --utrecht-link-focus-visible-text-decoration: none;
203
202
  --utrecht-link-text-underline-offset: 3px;
204
203
  --utrecht-link-text-decoration: underline;
205
- --utrecht-link-social-icon-size: 26px;
206
204
  --utrecht-link-social-hover-transform-scale: 1.1;
205
+ --utrecht-link-social-icon-size: 26px;
207
206
  --utrecht-link-social-size: 40px;
208
207
  --utrecht-link-social-border-width: 2px;
209
208
  --utrecht-link-list-icon-size: 14px;
@@ -237,13 +236,11 @@
237
236
  --utrecht-form-toggle-border-radius: 10em;
238
237
  --utrecht-form-toggle-border-style: solid;
239
238
  --utrecht-form-toggle-border-color: transparent;
240
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
239
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
241
240
  --utrecht-form-label-font-size: 1em;
242
- --utrecht-form-fieldset-legend-line-height: 1.4;
243
- --utrecht-form-fieldset-legend-font-size: 1rem;
244
241
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
245
- --utrecht-form-control-read-only-border-color: transparent;
246
242
  --utrecht-form-control-block-size: 42px;
243
+ --utrecht-form-control-read-only-border-color: transparent;
247
244
  --utrecht-form-control-padding-inline-start: 12px;
248
245
  --utrecht-form-control-padding-inline-end: 12px;
249
246
  --utrecht-form-control-padding-block-start: 8px;
@@ -251,15 +248,13 @@
251
248
  --utrecht-form-control-max-inline-size: 28em;
252
249
  --utrecht-form-control-border-radius: 0;
253
250
  --utrecht-focus-outline-style: dotted;
254
- --utrecht-figure-caption-line-height: 20px;
255
- --utrecht-figure-caption-font-size: 14px;
256
251
  --utrecht-figure-caption-color: #727272;
257
252
  --utrecht-drawer-max-inline-size: 320px;
258
253
  --utrecht-drawer-max-block-size: 240px;
259
254
  --utrecht-drawer-border-width: 1px;
260
255
  --utrecht-document-line-height: 1.4;
261
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
262
256
  --utrecht-data-list-rows-column-inline-size: 80%;
257
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
263
258
  --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
264
259
  --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
265
260
  --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -315,20 +310,18 @@
315
310
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
316
311
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
317
312
  --utrecht-pointer-target-min-size: 44px;
318
- --utrecht-action-inert-cursor: default;
319
- --utrecht-action-activate-cursor: pointer;
320
313
  --utrecht-action-submit-cursor: pointer;
321
314
  --utrecht-action-navigate-cursor: pointer;
315
+ --utrecht-action-inert-cursor: default;
322
316
  --utrecht-action-disabled-cursor: not-allowed;
323
317
  --utrecht-action-busy-cursor: wait;
318
+ --utrecht-action-activate-cursor: pointer;
324
319
  --utrecht-column-layout-column-width: 350px;
325
320
  --utrecht-column-layout-column-rule-width: 2px;
326
321
  --utrecht-code-block-padding-inline-end: 20px;
327
322
  --utrecht-code-block-padding-inline-start: 20px;
328
323
  --utrecht-code-block-padding-block-end: 20px;
329
324
  --utrecht-code-block-padding-block-start: 20px;
330
- --utrecht-code-block-line-height: 24px;
331
- --utrecht-code-block-font-size: 16px;
332
325
  --utrecht-checkbox-margin-block-start: 0;
333
326
  --utrecht-checkbox-focus-border-width: 2px;
334
327
  --utrecht-checkbox-size: 24px;
@@ -348,7 +341,7 @@
348
341
  --utrecht-calendar-table-days-item-day-border-color: transparent;
349
342
  --utrecht-calendar-table-days-item-day-border-width: 2px;
350
343
  --utrecht-calendar-table-days-item-day-size: 44px;
351
- --utrecht-calendar-table-weeks-item-line-height: 24px;
344
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
352
345
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
353
346
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
354
347
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -377,15 +370,13 @@
377
370
  --utrecht-breadcrumb-nav-min-block-size: 34px;
378
371
  --utrecht-blockquote-margin-block-end: 1.6em;
379
372
  --utrecht-blockquote-margin-block-start: 1.6em;
380
- --utrecht-blockquote-content-font-size: 1.125rem;
381
- --utrecht-blockquote-attribution-font-size: 0.75rem;
382
373
  --utrecht-blockquote-margin-inline-end: 1.6em;
383
374
  --utrecht-blockquote-margin-inline-start: 1.6em;
384
375
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
385
376
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
386
377
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
387
378
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
388
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
379
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
389
380
  --utrecht-backdrop-opacity: 0.8;
390
381
  --utrecht-article-max-inline-size: 780px;
391
382
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -448,10 +439,8 @@
448
439
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
449
440
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
450
441
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
442
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
451
443
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
452
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
453
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
454
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
455
444
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
456
445
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
457
446
  --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -460,16 +449,22 @@
460
449
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
461
450
  --utrecht-table-cell-selected-color: var(--utrecht-color-black);
462
451
  --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
452
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
453
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
454
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
463
455
  --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
464
456
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
465
457
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
466
458
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
467
459
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
468
460
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
461
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
469
462
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
470
463
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
471
464
  --utrecht-surface-color: var(--utrecht-color-grey-95);
472
465
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
466
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
467
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
473
468
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
474
469
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
475
470
  --utrecht-spotlight-section-info-color: var(--utrecht-color-grey-15);
@@ -480,7 +475,7 @@
480
475
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
481
476
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
482
477
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
483
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
478
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
484
479
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
485
480
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
486
481
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -500,8 +495,8 @@
500
495
  --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
501
496
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
502
497
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
503
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
504
498
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
499
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
505
500
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
506
501
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
507
502
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -511,8 +506,8 @@
511
506
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
512
507
  --utrecht-radio-button-color: var(--utrecht-color-white);
513
508
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
514
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
515
509
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
510
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
516
511
  --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
517
512
  --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
518
513
  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -520,8 +515,8 @@
520
515
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
521
516
  --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
522
517
  --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
523
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
524
518
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
519
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
525
520
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
526
521
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
527
522
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -534,12 +529,12 @@
534
529
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
535
530
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
536
531
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
537
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
538
532
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
539
533
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
540
534
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
541
535
  --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
542
536
  --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
537
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
543
538
  --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
544
539
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
545
540
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -549,6 +544,7 @@
549
544
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
550
545
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
551
546
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
547
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
552
548
  --utrecht-page-color: var(--utrecht-color-grey-95);
553
549
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
554
550
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -558,6 +554,9 @@
558
554
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
559
555
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
560
556
  --utrecht-page-footer-color: var(--utrecht-color-white);
557
+ --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
558
+ --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
559
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
561
560
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
562
561
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
563
562
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -585,27 +584,27 @@
585
584
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
586
585
  --utrecht-mark-color: var(--utrecht-color-black);
587
586
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
587
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
588
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
589
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
590
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
591
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
592
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
593
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
594
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
588
595
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
589
596
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
590
597
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
591
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
592
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
593
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
594
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
595
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
596
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
598
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
597
599
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
598
600
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
599
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
600
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
601
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
602
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
603
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
604
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
605
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
606
601
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
607
602
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
603
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
608
604
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
605
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
606
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
607
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
609
608
  --utrecht-map-marker-border-color: var(--utrecht-color-white);
610
609
  --utrecht-map-marker-color: var(--utrecht-color-white);
611
610
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -629,8 +628,8 @@
629
628
  --utrecht-link-placeholder-color: var(--utrecht-color-grey-80);
630
629
  --utrecht-link-focus-color: var(--utrecht-color-blue-80);
631
630
  --utrecht-link-color: var(--utrecht-color-blue-60);
632
- --utrecht-link-social-color: var(--utrecht-color-white);
633
631
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
632
+ --utrecht-link-social-color: var(--utrecht-color-white);
634
633
  --utrecht-link-social-border-color: var(--utrecht-color-white);
635
634
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
636
635
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -678,7 +677,9 @@
678
677
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
679
678
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
680
679
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
680
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
681
681
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
682
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
682
683
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
683
684
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
684
685
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -703,6 +704,8 @@
703
704
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
704
705
  --utrecht-focus-outline-color: var(--utrecht-color-black);
705
706
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
707
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
708
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
706
709
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
707
710
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
708
711
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -738,6 +741,8 @@
738
741
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
739
742
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
740
743
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
744
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
745
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
741
746
  --utrecht-code-block-color: var(--utrecht-color-black);
742
747
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
743
748
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -838,7 +843,6 @@
838
843
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
839
844
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
840
845
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
841
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
842
846
  --utrecht-button-active-color: var(--utrecht-color-white);
843
847
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
844
848
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -849,6 +853,7 @@
849
853
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
850
854
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
851
855
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
856
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
852
857
  --utrecht-button-color: var(--utrecht-color-grey-80);
853
858
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
854
859
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -867,6 +872,8 @@
867
872
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
868
873
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
869
874
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
875
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
876
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
870
877
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
871
878
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
872
879
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -923,6 +930,7 @@
923
930
  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
924
931
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
925
932
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
933
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
926
934
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
927
935
  --of-page-footer-fg: var(--utrecht-page-footer-color);
928
936
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -932,8 +940,8 @@
932
940
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
933
941
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
934
942
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
935
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
936
943
  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
944
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
937
945
  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
938
946
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
939
947
  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -943,6 +951,7 @@
943
951
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
944
952
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
945
953
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
954
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
946
955
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
947
956
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
948
957
  --utrecht-link-visited-color: var(--utrecht-link-color);