@utrecht/design-tokens 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/.stylelintrc.json +5 -1
  2. package/CHANGELOG.md +14 -0
  3. package/config.json +8 -0
  4. package/dist/_mixin-theme.scss +34 -37
  5. package/dist/_mixin.scss +1009 -0
  6. package/dist/_variables.scss +34 -37
  7. package/dist/background-image-icon.css +0 -1
  8. package/dist/dark/_mixin-theme.scss +34 -37
  9. package/dist/dark/_mixin.scss +1020 -0
  10. package/dist/dark/_variables.scss +1017 -0
  11. package/dist/dark/index.cjs +1020 -0
  12. package/dist/dark/index.css +34 -37
  13. package/dist/dark/index.d.ts +1139 -0
  14. package/dist/dark/index.flat.json +1016 -0
  15. package/dist/dark/index.json +30694 -0
  16. package/dist/dark/index.mjs +1018 -0
  17. package/dist/dark/index.tokens.json +7885 -0
  18. package/dist/dark/list.json +30694 -0
  19. package/dist/dark/property.css +705 -0
  20. package/dist/dark/root.css +538 -541
  21. package/dist/dark/theme-prince-xml.css +1020 -0
  22. package/dist/dark/theme.css +1020 -0
  23. package/dist/dark/tokens.cjs +37567 -0
  24. package/dist/dark/tokens.d.ts +4842 -0
  25. package/dist/dark/tokens.json +37563 -0
  26. package/dist/dark/variables.cjs +1020 -0
  27. package/dist/dark/variables.css +1020 -0
  28. package/dist/dark/variables.d.ts +1139 -0
  29. package/dist/dark/variables.json +1016 -0
  30. package/dist/dark/variables.less +1017 -0
  31. package/dist/dark/variables.mjs +1018 -0
  32. package/dist/index.cjs +29 -32
  33. package/dist/index.css +149 -82
  34. package/dist/index.d.ts +18 -25
  35. package/dist/index.flat.json +591 -593
  36. package/dist/index.json +4577 -7587
  37. package/dist/index.mjs +31 -34
  38. package/dist/index.tokens.json +385 -71
  39. package/dist/list.json +31811 -0
  40. package/dist/property.css +770 -0
  41. package/dist/root.css +529 -532
  42. package/dist/theme-prince-xml.css +34 -37
  43. package/dist/theme.css +529 -532
  44. package/dist/tokens.cjs +6297 -8992
  45. package/dist/tokens.d.ts +208 -60
  46. package/dist/tokens.json +38705 -0
  47. package/dist/variables.cjs +1009 -0
  48. package/dist/variables.css +1009 -0
  49. package/dist/variables.d.ts +1128 -0
  50. package/dist/variables.json +1005 -0
  51. package/dist/variables.less +34 -37
  52. package/dist/variables.mjs +1007 -0
  53. package/package.json +6 -5
  54. package/src/background-image-icon.scss +0 -1
  55. package/src/brand/utrecht/typography.tokens.json +7 -9
  56. package/src/component/of/progress-indicator.tokens.json +1 -1
  57. package/src/component/utrecht/backdrop.tokens.json +1 -1
  58. package/src/component/utrecht/blockquote.tokens.json +3 -3
  59. package/src/component/utrecht/button.tokens.json +1 -3
  60. package/src/component/utrecht/code-block.tokens.json +2 -2
  61. package/src/component/utrecht/figure.tokens.json +2 -2
  62. package/src/component/utrecht/form-fieldset.tokens.json +2 -2
  63. package/src/component/utrecht/form-toggle.tokens.json +1 -1
  64. package/src/component/utrecht/link.tokens.json +3 -1
  65. package/src/component/utrecht/pagination.tokens.json +1 -1
  66. package/src/component/utrecht/skip-link.tokens.json +4 -2
  67. package/src/component/utrecht/table.tokens.json +1 -1
  68. package/src/component/utrecht/toptask-link.tokens.json +1 -1
  69. package/src/css-property-formatter.mjs +46 -0
  70. package/src/dark/component/tokens.json +1 -1
  71. package/src/index.scss +81 -5
  72. package/style-dictionary-build-dark.mjs +64 -0
  73. package/style-dictionary-build.mjs +41 -0
  74. package/style-dictionary-config.mjs +261 -0
  75. package/dist/figma-tokens.json +0 -40396
  76. package/src/css-property-formatter.js +0 -35
  77. package/src/style-dictionary-config-dark.js +0 -56
  78. package/src/style-dictionary-config.js +0 -63
  79. package/style-dictionary.config.json +0 -143
@@ -1,8 +1,7 @@
1
1
 
2
- // Do not edit directly
3
- // Generated on Tue, 01 Oct 2024 19:52:18 GMT
2
+ // Do not edit directly, this file was auto-generated.
4
3
 
5
- $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
4
+ $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
6
5
  $denhaag-process-steps-sub-step-marker-size: 12px;
7
6
  $denhaag-process-steps-step-marker-size: 28px;
8
7
  $utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -31,8 +30,6 @@ $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
31
30
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
32
31
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
33
32
  $utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
34
- $utrecht-typography-scale-xs-font-size: 0.75rem; // 12px
35
- $utrecht-typography-scale-2xs-font-size: 0.5rem; // 8px
36
33
  $utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
37
34
  $utrecht-icon-scale-4xl: 48px;
38
35
  $utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
@@ -97,7 +94,6 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
97
94
  $utrecht-toptask-link-min-inline-size: 15rem;
98
95
  $utrecht-toptask-link-min-block-size: 8.25rem;
99
96
  $utrecht-toptask-link-line-height: 1.2;
100
- $utrecht-toptask-link-font-size: 1rem;
101
97
  $utrecht-textbox-border-bottom-width: 3px;
102
98
  $utrecht-textarea-border-bottom-width: 3px;
103
99
  $utrecht-textarea-border-block-end-width: 3px;
@@ -106,12 +102,11 @@ $utrecht-table-cell-padding-inline-start: 0.4em;
106
102
  $utrecht-table-cell-padding-inline-end: 0.4em;
107
103
  $utrecht-table-cell-padding-block-start: 0.5em;
108
104
  $utrecht-table-cell-padding-block-end: 0.5em;
109
- $utrecht-table-cell-line-height: 24px;
105
+ $utrecht-table-cell-line-height: 1.5rem;
110
106
  $utrecht-table-footer-sticky-border-block-start-width: 2px;
111
107
  $utrecht-table-header-sticky-border-block-end-width: 2px;
112
108
  $utrecht-table-caption-margin-block-end: 1em;
113
109
  $utrecht-table-caption-text-align: start;
114
- $utrecht-table-caption-font-size: 1.125em;
115
110
  $utrecht-table-margin-block-end: 0;
116
111
  $utrecht-separator-block-size: 8px;
117
112
  $utrecht-select-border-block-end-width: 3px;
@@ -150,7 +145,6 @@ $utrecht-pagination-page-link-border-color: transparent;
150
145
  $utrecht-pagination-page-link-background-color: transparent;
151
146
  $utrecht-pagination-margin-block-end: 1em;
152
147
  $utrecht-pagination-margin-block-start: 0;
153
- $utrecht-pagination-font-size: 14px;
154
148
  $utrecht-page-padding-inline-start: 2em;
155
149
  $utrecht-page-padding-block-end: 1em;
156
150
  $utrecht-page-padding-inline-end: 2em;
@@ -176,9 +170,9 @@ $utrecht-number-badge-padding-inline: 1ex; // Default inline padding color for b
176
170
  $utrecht-number-badge-padding-block: 1ex; // Default block padding for badge components
177
171
  $utrecht-topnav-link-focus-text-decoration: none;
178
172
  $utrecht-topnav-link-focus-border-type: dotted;
179
- $utrecht-mapcontrolbutton-focus-text-decoration: none;
180
- $utrecht-mapcontrolbutton-margin-inline-end: 0;
181
173
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
174
+ $utrecht-mapcontrolbutton-margin-inline-end: 0;
175
+ $utrecht-mapcontrolbutton-focus-text-decoration: none;
182
176
  $utrecht-mapcontrolbutton-border-radius: 2px;
183
177
  $utrecht-map-marker-icon-size: 30px;
184
178
  $utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -195,7 +189,7 @@ $utrecht-list-social-item-margin-inline-end: 10px;
195
189
  $utrecht-link-icon-size: 1.2em;
196
190
  $utrecht-link-hover-text-decoration-thickness: 3px;
197
191
  $utrecht-link-hover-text-decoration: underline;
198
- $utrecht-link-focus-text-decoration: none;
192
+ $utrecht-link-focus-visible-text-decoration: none;
199
193
  $utrecht-link-text-underline-offset: 3px;
200
194
  $utrecht-link-text-decoration: underline;
201
195
  $utrecht-link-social-hover-transform-scale: 1.1;
@@ -232,10 +226,8 @@ $utrecht-form-toggle-border-width: 2px;
232
226
  $utrecht-form-toggle-border-radius: 10em;
233
227
  $utrecht-form-toggle-border-style: solid;
234
228
  $utrecht-form-toggle-border-color: transparent;
235
- $utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
229
+ $utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
236
230
  $utrecht-form-label-font-size: 1em;
237
- $utrecht-form-fieldset-legend-line-height: 1.4;
238
- $utrecht-form-fieldset-legend-font-size: 1rem;
239
231
  $utrecht-form-field-invalid-border-inline-start-width: 3px;
240
232
  $utrecht-form-control-block-size: 42px;
241
233
  $utrecht-form-control-read-only-border-color: transparent;
@@ -246,8 +238,6 @@ $utrecht-form-control-padding-block-end: 8px;
246
238
  $utrecht-form-control-max-inline-size: 28em;
247
239
  $utrecht-form-control-border-radius: 0;
248
240
  $utrecht-focus-outline-style: dotted;
249
- $utrecht-figure-caption-line-height: 20px;
250
- $utrecht-figure-caption-font-size: 14px;
251
241
  $utrecht-figure-caption-color: #727272;
252
242
  $utrecht-drawer-max-inline-size: 320px;
253
243
  $utrecht-drawer-max-block-size: 240px;
@@ -310,20 +300,18 @@ $utrecht-space-block-xs: 8px; // Extra Small
310
300
  $utrecht-space-block-2xs: 4px; // Extra Small 2
311
301
  $utrecht-space-block-3xs: 2px; // Extra Small 3
312
302
  $utrecht-pointer-target-min-size: 44px;
313
- $utrecht-action-inert-cursor: default;
314
- $utrecht-action-activate-cursor: pointer;
315
303
  $utrecht-action-submit-cursor: pointer;
316
304
  $utrecht-action-navigate-cursor: pointer;
305
+ $utrecht-action-inert-cursor: default;
317
306
  $utrecht-action-disabled-cursor: not-allowed;
318
307
  $utrecht-action-busy-cursor: wait;
308
+ $utrecht-action-activate-cursor: pointer;
319
309
  $utrecht-column-layout-column-width: 350px;
320
310
  $utrecht-column-layout-column-rule-width: 2px;
321
311
  $utrecht-code-block-padding-inline-end: 20px;
322
312
  $utrecht-code-block-padding-inline-start: 20px;
323
313
  $utrecht-code-block-padding-block-end: 20px;
324
314
  $utrecht-code-block-padding-block-start: 20px;
325
- $utrecht-code-block-line-height: 24px;
326
- $utrecht-code-block-font-size: 16px;
327
315
  $utrecht-checkbox-margin-block-start: 0;
328
316
  $utrecht-checkbox-focus-border-width: 2px;
329
317
  $utrecht-checkbox-size: 24px;
@@ -343,7 +331,7 @@ $utrecht-calendar-table-days-item-day-focus-border-color: transparent;
343
331
  $utrecht-calendar-table-days-item-day-border-color: transparent;
344
332
  $utrecht-calendar-table-days-item-day-border-width: 2px;
345
333
  $utrecht-calendar-table-days-item-day-size: 44px;
346
- $utrecht-calendar-table-weeks-item-line-height: 24px;
334
+ $utrecht-calendar-table-weeks-item-line-height: 1.5rem;
347
335
  $utrecht-calendar-table-weeks-item-padding-block-end: 10px;
348
336
  $utrecht-calendar-table-weeks-item-padding-block-start: 4px;
349
337
  $utrecht-calendar-table-weeks-item-width: 44px;
@@ -372,15 +360,13 @@ $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
372
360
  $utrecht-breadcrumb-nav-min-block-size: 34px;
373
361
  $utrecht-blockquote-margin-block-end: 1.6em;
374
362
  $utrecht-blockquote-margin-block-start: 1.6em;
375
- $utrecht-blockquote-content-font-size: 1.125rem;
376
- $utrecht-blockquote-attribution-font-size: 0.75rem;
377
363
  $utrecht-blockquote-margin-inline-end: 1.6em;
378
364
  $utrecht-blockquote-margin-inline-start: 1.6em;
379
365
  $utrecht-badge-border-radius: 0; // Default corner radius for badge components
380
366
  $utrecht-badge-counter-padding-inline: 1ex; // Default inline padding color for badge components
381
367
  $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge components
382
368
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
383
- $utrecht-backdrop-fade-in-animation-duration: 0.4s;
369
+ $utrecht-backdrop-fade-in-animation-duration: 400ms;
384
370
  $utrecht-backdrop-opacity: 0.8;
385
371
  $utrecht-article-max-inline-size: 780px;
386
372
  $utrecht-alert-icon-inset-block-start: 6px;
@@ -441,6 +427,7 @@ $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
441
427
  $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
442
428
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
443
429
  $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
430
+ $utrecht-toptask-link-font-size: $utrecht-typography-scale-md-font-size;
444
431
  $utrecht-textarea-line-height: $utrecht-typography-line-height-md;
445
432
  $utrecht-table-row-alternate-even-color: $utrecht-color-black;
446
433
  $utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
@@ -459,6 +446,7 @@ $utrecht-table-header-sticky-background-color: $utrecht-color-white;
459
446
  $utrecht-table-header-border-block-end-width: $utrecht-border-width-md;
460
447
  $utrecht-table-header-border-block-end-color: $utrecht-color-red-40;
461
448
  $utrecht-table-header-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
449
+ $utrecht-table-caption-font-size: $utrecht-typography-scale-lg-font-size;
462
450
  $utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
463
451
  $utrecht-table-margin-block-start: $utrecht-space-block-md;
464
452
  $utrecht-surface-color: $utrecht-color-grey-10;
@@ -473,7 +461,7 @@ $utrecht-spotlight-section-padding-block-end: $utrecht-space-block-sm;
473
461
  $utrecht-spotlight-section-padding-block-start: $utrecht-space-block-md;
474
462
  $utrecht-spotlight-section-color: $utrecht-color-black;
475
463
  $utrecht-spotlight-section-background-color: $utrecht-color-grey-90;
476
- $utrecht-skip-link-focus-text-decoration: $utrecht-link-focus-text-decoration;
464
+ $utrecht-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
477
465
  $utrecht-skip-link-text-decoration: $utrecht-link-text-decoration;
478
466
  $utrecht-separator-margin-block-start: $utrecht-space-block-md;
479
467
  $utrecht-separator-margin-block-end: $utrecht-space-block-md;
@@ -542,6 +530,7 @@ $utrecht-pagination-page-link-current-border-color: $utrecht-color-blue-35;
542
530
  $utrecht-pagination-page-link-current-background-color: $utrecht-color-blue-35;
543
531
  $utrecht-pagination-page-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
544
532
  $utrecht-pagination-page-link-color: $utrecht-color-blue-35;
533
+ $utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
545
534
  $utrecht-page-color: $utrecht-color-black;
546
535
  $utrecht-page-background-color: $utrecht-color-white;
547
536
  $utrecht-page-footer-padding-block-start: $utrecht-space-block-3xl;
@@ -553,7 +542,7 @@ $utrecht-page-footer-background-color: $utrecht-color-red-40;
553
542
  $utrecht-page-footer-color: $utrecht-color-white;
554
543
  $utrecht-number-badge-font-size: $utrecht-typography-scale-md-font-size;
555
544
  $utrecht-number-badge-color: $utrecht-color-white; // Default text color for badge components
556
- $utrecht-number-badge-background-color: $utrecht-color-red-40; // Default background color for badge components
545
+ $utrecht-number-badge-background-color: $utrecht-color-red-40;
557
546
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
558
547
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
559
548
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -581,6 +570,12 @@ $utrecht-nav-bar-color: $utrecht-color-black;
581
570
  $utrecht-nav-bar-background-color: $utrecht-color-white;
582
571
  $utrecht-mark-color: $utrecht-color-black;
583
572
  $utrecht-mark-background-color: $utrecht-color-yellow-60;
573
+ $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
574
+ $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
575
+ $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
576
+ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
577
+ $utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
578
+ $utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
584
579
  $utrecht-mapcontrolbutton-label-margin-inline-end: $utrecht-space-inline-xs;
585
580
  $utrecht-mapcontrolbutton-label-margin-inline-start: $utrecht-space-inline-xs;
586
581
  $utrecht-mapcontrolbutton-hover-color: $utrecht-color-white;
@@ -589,12 +584,6 @@ $utrecht-mapcontrolbutton-focus-color: $utrecht-color-black;
589
584
  $utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
590
585
  $utrecht-mapcontrolbutton-disabled-border-color: $utrecht-color-grey-80;
591
586
  $utrecht-mapcontrolbutton-disabled-background-color: $utrecht-color-grey-90;
592
- $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
593
- $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
594
- $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
595
- $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
596
- $utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
597
- $utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
598
587
  $utrecht-mapcontrolbutton-min-inline-size: $utrecht-space-block-2xl;
599
588
  $utrecht-mapcontrolbutton-min-block-size: $utrecht-space-block-2xl;
600
589
  $utrecht-mapcontrolbutton-color: $utrecht-color-grey-40;
@@ -610,10 +599,10 @@ $utrecht-listbox-option-group-title-color: $utrecht-color-black;
610
599
  $utrecht-listbox-option-group-title-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
611
600
  $utrecht-listbox-option-group-title-font-size: $utrecht-typography-scale-md-font-size;
612
601
  $utrecht-listbox-option-group-margin-block-end: $utrecht-space-inline-xs;
613
- $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
614
- $utrecht-listbox-option-hover-color: $utrecht-color-black;
615
602
  $utrecht-listbox-option-selected-color: $utrecht-color-black;
616
603
  $utrecht-listbox-option-selected-background-color: $utrecht-color-grey-95;
604
+ $utrecht-listbox-option-hover-color: $utrecht-color-black;
605
+ $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
617
606
  $utrecht-listbox-option-active-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
618
607
  $utrecht-listbox-option-active-color: $utrecht-color-black;
619
608
  $utrecht-listbox-option-active-background-color: $utrecht-color-grey-95;
@@ -675,7 +664,9 @@ $utrecht-form-label-font-weight: $utrecht-typography-weight-scale-bold-font-weig
675
664
  $utrecht-form-fieldset-legend-disabled-color: $utrecht-color-grey-40;
676
665
  $utrecht-form-fieldset-legend-margin-block-start: $utrecht-space-block-xl;
677
666
  $utrecht-form-fieldset-legend-margin-block-end: $utrecht-space-block-sm;
667
+ $utrecht-form-fieldset-legend-line-height: $utrecht-typography-line-height-md;
678
668
  $utrecht-form-fieldset-legend-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
669
+ $utrecht-form-fieldset-legend-font-size: $utrecht-typography-scale-md-font-size;
679
670
  $utrecht-form-fieldset-section-color: $utrecht-color-black;
680
671
  $utrecht-form-fieldset-section-background-color: $utrecht-color-grey-80;
681
672
  $utrecht-form-fieldset-margin-block-start: $utrecht-space-block-2xs;
@@ -700,6 +691,8 @@ $utrecht-focus-inverse-outline-color: $utrecht-color-white;
700
691
  $utrecht-focus-outline-width: $utrecht-border-width-md;
701
692
  $utrecht-focus-outline-color: $utrecht-color-black;
702
693
  $utrecht-focus-background-color: $utrecht-color-yellow-60;
694
+ $utrecht-figure-caption-line-height: $utrecht-typography-line-height-md;
695
+ $utrecht-figure-caption-font-size: $utrecht-typography-scale-sm-font-size;
703
696
  $utrecht-emphasis-strong-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
704
697
  $utrecht-drawer-padding-inline-end: $utrecht-space-inline-md;
705
698
  $utrecht-drawer-padding-inline-start: $utrecht-space-inline-md;
@@ -735,6 +728,8 @@ $utrecht-column-layout-gap: $utrecht-space-column-md;
735
728
  $utrecht-column-layout-column-rule-color: $utrecht-color-grey-80;
736
729
  $utrecht-code-block-margin-block-end: $utrecht-space-block-lg;
737
730
  $utrecht-code-block-margin-block-start: $utrecht-space-block-lg;
731
+ $utrecht-code-block-line-height: $utrecht-typography-line-height-md;
732
+ $utrecht-code-block-font-size: $utrecht-typography-scale-md-font-size;
738
733
  $utrecht-code-block-color: $utrecht-color-black;
739
734
  $utrecht-code-block-background-color: $utrecht-color-grey-95;
740
735
  $utrecht-checkbox-indeterminate-background-color: $utrecht-color-blue-40;
@@ -838,7 +833,6 @@ $utrecht-button-primary-action-background-color: $utrecht-color-blue-35;
838
833
  $utrecht-button-disabled-color: $utrecht-color-grey-80;
839
834
  $utrecht-button-disabled-border-color: $utrecht-color-grey-80;
840
835
  $utrecht-button-disabled-background-color: $utrecht-color-grey-90;
841
- $utrecht-button-icon-gap: $utrecht-space-text-xs;
842
836
  $utrecht-button-active-color: $utrecht-color-white;
843
837
  $utrecht-button-active-background-color: $utrecht-color-grey-40;
844
838
  $utrecht-button-padding-inline-end: $utrecht-space-inline-md;
@@ -849,6 +843,7 @@ $utrecht-button-margin-block-end: $utrecht-space-row-xs;
849
843
  $utrecht-button-margin-block-start: $utrecht-space-row-xs;
850
844
  $utrecht-button-font-size: $utrecht-typography-scale-md-font-size;
851
845
  $utrecht-button-font-family: $utrecht-typography-sans-serif-font-family;
846
+ $utrecht-button-column-gap: $utrecht-space-text-xs;
852
847
  $utrecht-button-color: $utrecht-color-grey-40;
853
848
  $utrecht-button-border-color: $utrecht-color-grey-40;
854
849
  $utrecht-button-background-color: $utrecht-color-white;
@@ -867,6 +862,8 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
867
862
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
868
863
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
869
864
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
865
+ $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
866
+ $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
870
867
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
871
868
  $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
872
869
  $utrecht-badge-padding-inline: $utrecht-space-inline-sm; // Default inline padding color for badge components
@@ -944,7 +941,7 @@ $utrecht-skip-link-background-color: $utrecht-topnav-list-background-color;
944
941
  $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
945
942
  $utrecht-radio-button-background-color: $utrecht-form-control-background-color;
946
943
  $utrecht-paragraph-lead-color: $utrecht-document-color;
947
- $utrecht-number-badge-border-radius: $utrecht-number-badge-font-size; // Default corner radius for badge components
944
+ $utrecht-number-badge-border-radius: $utrecht-number-badge-font-size;
948
945
  $utrecht-listbox-border-width: $utrecht-form-control-border-width;
949
946
  $utrecht-listbox-border-color: $utrecht-form-control-border-color;
950
947
  $utrecht-link-visited-color: $utrecht-link-color;
@@ -6,7 +6,6 @@
6
6
  .utrecht-theme,
7
7
  .utrecht-theme ::backdrop {
8
8
  --utrecht-menulijst-item-background-image: url("./pijltje.svg");
9
- --utrecht-link-icon-left-background-image: url("./pijltje.svg");
10
9
  --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
11
10
  --utrecht-select-background-image: url("./arrow-dropdown.svg");
12
11
  --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Tue, 01 Oct 2024 19:52:16 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;
@@ -33,8 +32,6 @@
33
32
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
34
33
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
35
34
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
36
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
37
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
38
35
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
39
36
  --utrecht-icon-scale-4xl: 48px;
40
37
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -99,7 +96,6 @@
99
96
  --utrecht-toptask-link-min-inline-size: 15rem;
100
97
  --utrecht-toptask-link-min-block-size: 8.25rem;
101
98
  --utrecht-toptask-link-line-height: 1.2;
102
- --utrecht-toptask-link-font-size: 1rem;
103
99
  --utrecht-textbox-border-bottom-width: 3px;
104
100
  --utrecht-textarea-border-bottom-width: 3px;
105
101
  --utrecht-textarea-border-block-end-width: 3px;
@@ -108,12 +104,11 @@
108
104
  --utrecht-table-cell-padding-inline-end: 0.4em;
109
105
  --utrecht-table-cell-padding-block-start: 0.5em;
110
106
  --utrecht-table-cell-padding-block-end: 0.5em;
111
- --utrecht-table-cell-line-height: 24px;
107
+ --utrecht-table-cell-line-height: 1.5rem;
112
108
  --utrecht-table-footer-sticky-border-block-start-width: 2px;
113
109
  --utrecht-table-header-sticky-border-block-end-width: 2px;
114
110
  --utrecht-table-caption-margin-block-end: 1em;
115
111
  --utrecht-table-caption-text-align: start;
116
- --utrecht-table-caption-font-size: 1.125em;
117
112
  --utrecht-table-margin-block-end: 0;
118
113
  --utrecht-separator-block-size: 8px;
119
114
  --utrecht-select-border-block-end-width: 3px;
@@ -152,7 +147,6 @@
152
147
  --utrecht-pagination-page-link-background-color: transparent;
153
148
  --utrecht-pagination-margin-block-end: 1em;
154
149
  --utrecht-pagination-margin-block-start: 0;
155
- --utrecht-pagination-font-size: 14px;
156
150
  --utrecht-page-padding-inline-start: 2em;
157
151
  --utrecht-page-padding-block-end: 1em;
158
152
  --utrecht-page-padding-inline-end: 2em;
@@ -178,9 +172,9 @@
178
172
  --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
179
173
  --utrecht-topnav-link-focus-text-decoration: none;
180
174
  --utrecht-topnav-link-focus-border-type: dotted;
181
- --utrecht-mapcontrolbutton-focus-text-decoration: none;
182
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
183
175
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
176
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
177
+ --utrecht-mapcontrolbutton-focus-text-decoration: none;
184
178
  --utrecht-mapcontrolbutton-border-radius: 2px;
185
179
  --utrecht-map-marker-icon-size: 30px;
186
180
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -197,7 +191,7 @@
197
191
  --utrecht-link-icon-size: 1.2em;
198
192
  --utrecht-link-hover-text-decoration-thickness: 3px;
199
193
  --utrecht-link-hover-text-decoration: underline;
200
- --utrecht-link-focus-text-decoration: none;
194
+ --utrecht-link-focus-visible-text-decoration: none;
201
195
  --utrecht-link-text-underline-offset: 3px;
202
196
  --utrecht-link-text-decoration: underline;
203
197
  --utrecht-link-social-hover-transform-scale: 1.1;
@@ -235,10 +229,8 @@
235
229
  --utrecht-form-toggle-border-radius: 10em;
236
230
  --utrecht-form-toggle-border-style: solid;
237
231
  --utrecht-form-toggle-border-color: transparent;
238
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
232
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
239
233
  --utrecht-form-label-font-size: 1em;
240
- --utrecht-form-fieldset-legend-line-height: 1.4;
241
- --utrecht-form-fieldset-legend-font-size: 1rem;
242
234
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
243
235
  --utrecht-form-control-block-size: 42px;
244
236
  --utrecht-form-control-read-only-border-color: transparent;
@@ -249,8 +241,6 @@
249
241
  --utrecht-form-control-max-inline-size: 28em;
250
242
  --utrecht-form-control-border-radius: 0;
251
243
  --utrecht-focus-outline-style: dotted;
252
- --utrecht-figure-caption-line-height: 20px;
253
- --utrecht-figure-caption-font-size: 14px;
254
244
  --utrecht-figure-caption-color: #727272;
255
245
  --utrecht-drawer-max-inline-size: 320px;
256
246
  --utrecht-drawer-max-block-size: 240px;
@@ -313,20 +303,18 @@
313
303
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
314
304
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
315
305
  --utrecht-pointer-target-min-size: 44px;
316
- --utrecht-action-inert-cursor: default;
317
- --utrecht-action-activate-cursor: pointer;
318
306
  --utrecht-action-submit-cursor: pointer;
319
307
  --utrecht-action-navigate-cursor: pointer;
308
+ --utrecht-action-inert-cursor: default;
320
309
  --utrecht-action-disabled-cursor: not-allowed;
321
310
  --utrecht-action-busy-cursor: wait;
311
+ --utrecht-action-activate-cursor: pointer;
322
312
  --utrecht-column-layout-column-width: 350px;
323
313
  --utrecht-column-layout-column-rule-width: 2px;
324
314
  --utrecht-code-block-padding-inline-end: 20px;
325
315
  --utrecht-code-block-padding-inline-start: 20px;
326
316
  --utrecht-code-block-padding-block-end: 20px;
327
317
  --utrecht-code-block-padding-block-start: 20px;
328
- --utrecht-code-block-line-height: 24px;
329
- --utrecht-code-block-font-size: 16px;
330
318
  --utrecht-checkbox-margin-block-start: 0;
331
319
  --utrecht-checkbox-focus-border-width: 2px;
332
320
  --utrecht-checkbox-size: 24px;
@@ -346,7 +334,7 @@
346
334
  --utrecht-calendar-table-days-item-day-border-color: transparent;
347
335
  --utrecht-calendar-table-days-item-day-border-width: 2px;
348
336
  --utrecht-calendar-table-days-item-day-size: 44px;
349
- --utrecht-calendar-table-weeks-item-line-height: 24px;
337
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
350
338
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
351
339
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
352
340
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -375,15 +363,13 @@
375
363
  --utrecht-breadcrumb-nav-min-block-size: 34px;
376
364
  --utrecht-blockquote-margin-block-end: 1.6em;
377
365
  --utrecht-blockquote-margin-block-start: 1.6em;
378
- --utrecht-blockquote-content-font-size: 1.125rem;
379
- --utrecht-blockquote-attribution-font-size: 0.75rem;
380
366
  --utrecht-blockquote-margin-inline-end: 1.6em;
381
367
  --utrecht-blockquote-margin-inline-start: 1.6em;
382
368
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
383
369
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
384
370
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
385
371
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
386
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
372
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
387
373
  --utrecht-backdrop-opacity: 0.8;
388
374
  --utrecht-article-max-inline-size: 780px;
389
375
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -446,6 +432,7 @@
446
432
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
447
433
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
448
434
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
435
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
449
436
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
450
437
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
451
438
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -464,6 +451,7 @@
464
451
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
465
452
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
466
453
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
454
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
467
455
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
468
456
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
469
457
  --utrecht-surface-color: var(--utrecht-color-grey-95);
@@ -480,7 +468,7 @@
480
468
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
481
469
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
482
470
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
483
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
471
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
484
472
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
485
473
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
486
474
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -549,6 +537,7 @@
549
537
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
550
538
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
551
539
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
540
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
552
541
  --utrecht-page-color: var(--utrecht-color-grey-95);
553
542
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
554
543
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -560,7 +549,7 @@
560
549
  --utrecht-page-footer-color: var(--utrecht-color-white);
561
550
  --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
562
551
  --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
563
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
552
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
564
553
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
565
554
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
566
555
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -588,6 +577,12 @@
588
577
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
589
578
  --utrecht-mark-color: var(--utrecht-color-black);
590
579
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
580
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
581
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
582
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
583
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
584
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
585
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
591
586
  --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
592
587
  --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
593
588
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
@@ -596,12 +591,6 @@
596
591
  --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
597
592
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
598
593
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
599
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
600
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
601
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
602
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
603
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
604
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
605
594
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
606
595
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
607
596
  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
@@ -617,10 +606,10 @@
617
606
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
618
607
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
619
608
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
620
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
621
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
622
609
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
623
610
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
611
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
612
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
624
613
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
625
614
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
626
615
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -681,7 +670,9 @@
681
670
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
682
671
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
683
672
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
673
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
684
674
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
675
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
685
676
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
686
677
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
687
678
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -706,6 +697,8 @@
706
697
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
707
698
  --utrecht-focus-outline-color: var(--utrecht-color-black);
708
699
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
700
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
701
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
709
702
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
710
703
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
711
704
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -741,6 +734,8 @@
741
734
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
742
735
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
743
736
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
737
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
738
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
744
739
  --utrecht-code-block-color: var(--utrecht-color-black);
745
740
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
746
741
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -841,7 +836,6 @@
841
836
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
842
837
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
843
838
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
844
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
845
839
  --utrecht-button-active-color: var(--utrecht-color-white);
846
840
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
847
841
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -852,6 +846,7 @@
852
846
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
853
847
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
854
848
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
849
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
855
850
  --utrecht-button-color: var(--utrecht-color-grey-80);
856
851
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
857
852
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -870,6 +865,8 @@
870
865
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
871
866
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
872
867
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
868
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
869
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
873
870
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
874
871
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
875
872
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -947,7 +944,7 @@
947
944
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
948
945
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
949
946
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
950
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
947
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
951
948
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
952
949
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
953
950
  --utrecht-link-visited-color: var(--utrecht-link-color);