@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/_mixin-theme.scss CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 21 Aug 2024 08:24:56 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
5
  @mixin utrecht-theme--dark {
7
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
6
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
8
7
  --denhaag-process-steps-sub-step-marker-size: 12px;
9
8
  --denhaag-process-steps-step-marker-size: 28px;
10
9
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -99,20 +98,19 @@
99
98
  --utrecht-toptask-link-min-inline-size: 15rem;
100
99
  --utrecht-toptask-link-min-block-size: 8.25rem;
101
100
  --utrecht-toptask-link-line-height: 1.2;
102
- --utrecht-toptask-link-font-size: 1rem;
103
101
  --utrecht-textbox-border-bottom-width: 3px;
104
102
  --utrecht-textarea-border-bottom-width: 3px;
105
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
103
+ --utrecht-textarea-border-block-end-width: 3px;
106
104
  --utrecht-table-cell-icon-size: 1em;
107
105
  --utrecht-table-cell-padding-inline-start: 0.4em;
108
106
  --utrecht-table-cell-padding-inline-end: 0.4em;
109
107
  --utrecht-table-cell-padding-block-start: 0.5em;
110
108
  --utrecht-table-cell-padding-block-end: 0.5em;
111
- --utrecht-table-cell-line-height: 24px;
109
+ --utrecht-table-cell-line-height: 1.5rem;
110
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
112
111
  --utrecht-table-header-sticky-border-block-end-width: 2px;
113
112
  --utrecht-table-caption-margin-block-end: 1em;
114
113
  --utrecht-table-caption-text-align: start;
115
- --utrecht-table-caption-font-size: 1.125em;
116
114
  --utrecht-table-margin-block-end: 0;
117
115
  --utrecht-separator-block-size: 8px;
118
116
  --utrecht-select-border-block-end-width: 3px;
@@ -124,10 +122,10 @@
124
122
  --utrecht-search-bar-button-hover-scale: 1;
125
123
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
126
124
  --utrecht-rich-text-confidant-margin-block-end: 0;
127
- --utrecht-radio-button-margin-inline-end: 12px;
128
125
  --utrecht-radio-button-border-radius: 0;
129
126
  --utrecht-radio-button-invalid-border-width: 2px;
130
127
  --utrecht-radio-button-icon-size: 42%;
128
+ --utrecht-radio-button-margin-inline-end: 12px;
131
129
  --utrecht-radio-button-size: 24px;
132
130
  --utrecht-radio-button-border-width: 2px;
133
131
  --utrecht-paragraph-margin-block-end: 0;
@@ -140,7 +138,6 @@
140
138
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
141
139
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
142
140
  --utrecht-pagination-relative-link-border-width: 2px;
143
- --utrecht-pagination-page-link-border-color: transparent;
144
141
  --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
145
142
  --utrecht-pagination-page-link-text-decoration: none;
146
143
  --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -148,10 +145,10 @@
148
145
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
149
146
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
150
147
  --utrecht-pagination-page-link-border-width: 2px;
148
+ --utrecht-pagination-page-link-border-color: transparent;
151
149
  --utrecht-pagination-page-link-background-color: transparent;
152
150
  --utrecht-pagination-margin-block-end: 1em;
153
151
  --utrecht-pagination-margin-block-start: 0;
154
- --utrecht-pagination-font-size: 14px;
155
152
  --utrecht-page-padding-inline-start: 2em;
156
153
  --utrecht-page-padding-block-end: 1em;
157
154
  --utrecht-page-padding-inline-end: 2em;
@@ -159,10 +156,10 @@
159
156
  --utrecht-page-max-inline-size: 1184px;
160
157
  --utrecht-page-margin-inline-end: 2em;
161
158
  --utrecht-page-margin-inline-start: 2em;
162
- --utrecht-page-header-padding-block-start: 1.8em;
163
- --utrecht-page-header-padding-inline-start: 2em;
164
159
  --utrecht-page-header-padding-inline-end: 2.4em;
160
+ --utrecht-page-header-padding-inline-start: 2em;
165
161
  --utrecht-page-header-padding-block-end: 1em;
162
+ --utrecht-page-header-padding-block-start: 1.8em;
166
163
  --utrecht-page-content-padding-block-end: 2em;
167
164
  --utrecht-page-content-padding-block-start: 2em;
168
165
  --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -173,12 +170,14 @@
173
170
  --utrecht-ordered-list-margin-block-start: 0;
174
171
  --utrecht-number-data-negative-color: red;
175
172
  --utrecht-number-data-positive-color: green;
173
+ --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
174
+ --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
176
175
  --utrecht-topnav-link-focus-text-decoration: none;
177
176
  --utrecht-topnav-link-focus-border-type: dotted;
177
+ --utrecht-mapcontrolbutton-margin-inline-start: 0;
178
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
178
179
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
179
180
  --utrecht-mapcontrolbutton-border-radius: 2px;
180
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
181
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
182
181
  --utrecht-map-marker-icon-size: 30px;
183
182
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
184
183
  --utrecht-map-marker-border-width: 3px;
@@ -194,11 +193,11 @@
194
193
  --utrecht-link-icon-size: 1.2em;
195
194
  --utrecht-link-hover-text-decoration-thickness: 3px;
196
195
  --utrecht-link-hover-text-decoration: underline;
197
- --utrecht-link-focus-text-decoration: none;
196
+ --utrecht-link-focus-visible-text-decoration: none;
198
197
  --utrecht-link-text-underline-offset: 3px;
199
198
  --utrecht-link-text-decoration: underline;
200
- --utrecht-link-social-icon-size: 26px;
201
199
  --utrecht-link-social-hover-transform-scale: 1.1;
200
+ --utrecht-link-social-icon-size: 26px;
202
201
  --utrecht-link-social-size: 40px;
203
202
  --utrecht-link-social-border-width: 2px;
204
203
  --utrecht-link-list-icon-size: 14px;
@@ -232,13 +231,11 @@
232
231
  --utrecht-form-toggle-border-radius: 10em;
233
232
  --utrecht-form-toggle-border-style: solid;
234
233
  --utrecht-form-toggle-border-color: transparent;
235
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
234
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
236
235
  --utrecht-form-label-font-size: 1em;
237
- --utrecht-form-fieldset-legend-line-height: 1.4;
238
- --utrecht-form-fieldset-legend-font-size: 1rem;
239
236
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
240
- --utrecht-form-control-read-only-border-color: transparent;
241
237
  --utrecht-form-control-block-size: 42px;
238
+ --utrecht-form-control-read-only-border-color: transparent;
242
239
  --utrecht-form-control-padding-inline-start: 12px;
243
240
  --utrecht-form-control-padding-inline-end: 12px;
244
241
  --utrecht-form-control-padding-block-start: 8px;
@@ -246,15 +243,13 @@
246
243
  --utrecht-form-control-max-inline-size: 28em;
247
244
  --utrecht-form-control-border-radius: 0;
248
245
  --utrecht-focus-outline-style: dotted;
249
- --utrecht-figure-caption-line-height: 20px;
250
- --utrecht-figure-caption-font-size: 14px;
251
246
  --utrecht-figure-caption-color: #727272;
252
247
  --utrecht-drawer-max-inline-size: 320px;
253
248
  --utrecht-drawer-max-block-size: 240px;
254
249
  --utrecht-drawer-border-width: 1px;
255
250
  --utrecht-document-line-height: 1.4;
256
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
257
251
  --utrecht-data-list-rows-column-inline-size: 80%;
252
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
258
253
  --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
259
254
  --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
260
255
  --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -310,20 +305,18 @@
310
305
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
311
306
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
312
307
  --utrecht-pointer-target-min-size: 44px;
313
- --utrecht-action-inert-cursor: default;
314
- --utrecht-action-activate-cursor: pointer;
315
308
  --utrecht-action-submit-cursor: pointer;
316
309
  --utrecht-action-navigate-cursor: pointer;
310
+ --utrecht-action-inert-cursor: default;
317
311
  --utrecht-action-disabled-cursor: not-allowed;
318
312
  --utrecht-action-busy-cursor: wait;
313
+ --utrecht-action-activate-cursor: pointer;
319
314
  --utrecht-column-layout-column-width: 350px;
320
315
  --utrecht-column-layout-column-rule-width: 2px;
321
316
  --utrecht-code-block-padding-inline-end: 20px;
322
317
  --utrecht-code-block-padding-inline-start: 20px;
323
318
  --utrecht-code-block-padding-block-end: 20px;
324
319
  --utrecht-code-block-padding-block-start: 20px;
325
- --utrecht-code-block-line-height: 24px;
326
- --utrecht-code-block-font-size: 16px;
327
320
  --utrecht-checkbox-margin-block-start: 0;
328
321
  --utrecht-checkbox-focus-border-width: 2px;
329
322
  --utrecht-checkbox-size: 24px;
@@ -343,7 +336,7 @@
343
336
  --utrecht-calendar-table-days-item-day-border-color: transparent;
344
337
  --utrecht-calendar-table-days-item-day-border-width: 2px;
345
338
  --utrecht-calendar-table-days-item-day-size: 44px;
346
- --utrecht-calendar-table-weeks-item-line-height: 24px;
339
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
347
340
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
348
341
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
349
342
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -372,15 +365,13 @@
372
365
  --utrecht-breadcrumb-nav-min-block-size: 34px;
373
366
  --utrecht-blockquote-margin-block-end: 1.6em;
374
367
  --utrecht-blockquote-margin-block-start: 1.6em;
375
- --utrecht-blockquote-content-font-size: 1.125rem;
376
- --utrecht-blockquote-attribution-font-size: 0.75rem;
377
368
  --utrecht-blockquote-margin-inline-end: 1.6em;
378
369
  --utrecht-blockquote-margin-inline-start: 1.6em;
379
370
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
380
371
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
381
372
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
382
373
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
383
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
374
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
384
375
  --utrecht-backdrop-opacity: 0.8;
385
376
  --utrecht-article-max-inline-size: 780px;
386
377
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -443,10 +434,8 @@
443
434
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
444
435
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
445
436
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
437
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
446
438
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
447
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
448
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
449
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
450
439
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
451
440
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
452
441
  --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -455,16 +444,22 @@
455
444
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
456
445
  --utrecht-table-cell-selected-color: var(--utrecht-color-black);
457
446
  --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
447
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
448
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
449
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
458
450
  --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
459
451
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
460
452
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
461
453
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
462
454
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
463
455
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
456
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
464
457
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
465
458
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
466
459
  --utrecht-surface-color: var(--utrecht-color-grey-95);
467
460
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
461
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
462
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
468
463
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
469
464
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
470
465
  --utrecht-spotlight-section-info-color: var(--utrecht-color-grey-15);
@@ -475,7 +470,7 @@
475
470
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
476
471
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
477
472
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
478
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
473
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
479
474
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
480
475
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
481
476
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -495,8 +490,8 @@
495
490
  --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
496
491
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
497
492
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
498
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
499
493
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
494
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
500
495
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
501
496
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
502
497
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -506,8 +501,8 @@
506
501
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
507
502
  --utrecht-radio-button-color: var(--utrecht-color-white);
508
503
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
509
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
510
504
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
505
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
511
506
  --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
512
507
  --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
513
508
  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -515,8 +510,8 @@
515
510
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
516
511
  --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
517
512
  --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
518
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
519
513
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
514
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
520
515
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
521
516
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
522
517
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -529,12 +524,12 @@
529
524
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
530
525
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
531
526
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
532
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
533
527
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
534
528
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
535
529
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
536
530
  --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
537
531
  --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
532
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
538
533
  --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
539
534
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
540
535
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -544,6 +539,7 @@
544
539
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
545
540
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
546
541
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
542
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
547
543
  --utrecht-page-color: var(--utrecht-color-grey-95);
548
544
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
549
545
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -553,6 +549,9 @@
553
549
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
554
550
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
555
551
  --utrecht-page-footer-color: var(--utrecht-color-white);
552
+ --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
553
+ --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
554
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
556
555
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
557
556
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
558
557
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -580,27 +579,27 @@
580
579
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
581
580
  --utrecht-mark-color: var(--utrecht-color-black);
582
581
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
582
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
583
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
584
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
585
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
586
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
587
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
588
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
589
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
583
590
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
584
591
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
585
592
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
586
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
587
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
588
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
589
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
590
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
591
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
593
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
592
594
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
593
595
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
594
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
595
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
596
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
597
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
598
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
599
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
600
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
601
596
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
602
597
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
598
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
603
599
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
600
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
601
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
602
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
604
603
  --utrecht-map-marker-border-color: var(--utrecht-color-white);
605
604
  --utrecht-map-marker-color: var(--utrecht-color-white);
606
605
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -624,8 +623,8 @@
624
623
  --utrecht-link-placeholder-color: var(--utrecht-color-grey-80);
625
624
  --utrecht-link-focus-color: var(--utrecht-color-blue-80);
626
625
  --utrecht-link-color: var(--utrecht-color-blue-60);
627
- --utrecht-link-social-color: var(--utrecht-color-white);
628
626
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
627
+ --utrecht-link-social-color: var(--utrecht-color-white);
629
628
  --utrecht-link-social-border-color: var(--utrecht-color-white);
630
629
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
631
630
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -673,7 +672,9 @@
673
672
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
674
673
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
675
674
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
675
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
676
676
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
677
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
677
678
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
678
679
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
679
680
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -698,6 +699,8 @@
698
699
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
699
700
  --utrecht-focus-outline-color: var(--utrecht-color-black);
700
701
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
702
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
703
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
701
704
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
702
705
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
703
706
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -733,6 +736,8 @@
733
736
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
734
737
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
735
738
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
739
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
740
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
736
741
  --utrecht-code-block-color: var(--utrecht-color-black);
737
742
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
738
743
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -833,7 +838,6 @@
833
838
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
834
839
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
835
840
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
836
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
837
841
  --utrecht-button-active-color: var(--utrecht-color-white);
838
842
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
839
843
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -844,6 +848,7 @@
844
848
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
845
849
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
846
850
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
851
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
847
852
  --utrecht-button-color: var(--utrecht-color-grey-80);
848
853
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
849
854
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -862,6 +867,8 @@
862
867
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
863
868
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
864
869
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
870
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
871
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
865
872
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
866
873
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
867
874
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -918,6 +925,7 @@
918
925
  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
919
926
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
920
927
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
928
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
921
929
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
922
930
  --of-page-footer-fg: var(--utrecht-page-footer-color);
923
931
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -927,8 +935,8 @@
927
935
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
928
936
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
929
937
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
930
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
931
938
  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
939
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
932
940
  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
933
941
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
934
942
  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -938,6 +946,7 @@
938
946
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
939
947
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
940
948
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
949
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
941
950
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
942
951
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
943
952
  --utrecht-link-visited-color: var(--utrecht-link-color);