@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
@@ -4,12 +4,11 @@
4
4
  * All rights reserved
5
5
  */
6
6
  /**
7
- * Do not edit directly
8
- * Generated on Tue, 01 Oct 2024 19:52:16 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;
@@ -38,8 +37,6 @@
38
37
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
39
38
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
40
39
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
41
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
42
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
43
40
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
44
41
  --utrecht-icon-scale-4xl: 48px;
45
42
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -104,7 +101,6 @@
104
101
  --utrecht-toptask-link-min-inline-size: 15rem;
105
102
  --utrecht-toptask-link-min-block-size: 8.25rem;
106
103
  --utrecht-toptask-link-line-height: 1.2;
107
- --utrecht-toptask-link-font-size: 1rem;
108
104
  --utrecht-textbox-border-bottom-width: 3px;
109
105
  --utrecht-textarea-border-bottom-width: 3px;
110
106
  --utrecht-textarea-border-block-end-width: 3px;
@@ -113,12 +109,11 @@
113
109
  --utrecht-table-cell-padding-inline-end: 0.4em;
114
110
  --utrecht-table-cell-padding-block-start: 0.5em;
115
111
  --utrecht-table-cell-padding-block-end: 0.5em;
116
- --utrecht-table-cell-line-height: 24px;
112
+ --utrecht-table-cell-line-height: 1.5rem;
117
113
  --utrecht-table-footer-sticky-border-block-start-width: 2px;
118
114
  --utrecht-table-header-sticky-border-block-end-width: 2px;
119
115
  --utrecht-table-caption-margin-block-end: 1em;
120
116
  --utrecht-table-caption-text-align: start;
121
- --utrecht-table-caption-font-size: 1.125em;
122
117
  --utrecht-table-margin-block-end: 0;
123
118
  --utrecht-separator-block-size: 8px;
124
119
  --utrecht-select-border-block-end-width: 3px;
@@ -157,7 +152,6 @@
157
152
  --utrecht-pagination-page-link-background-color: transparent;
158
153
  --utrecht-pagination-margin-block-end: 1em;
159
154
  --utrecht-pagination-margin-block-start: 0;
160
- --utrecht-pagination-font-size: 14px;
161
155
  --utrecht-page-padding-inline-start: 2em;
162
156
  --utrecht-page-padding-block-end: 1em;
163
157
  --utrecht-page-padding-inline-end: 2em;
@@ -183,9 +177,9 @@
183
177
  --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
184
178
  --utrecht-topnav-link-focus-text-decoration: none;
185
179
  --utrecht-topnav-link-focus-border-type: dotted;
186
- --utrecht-mapcontrolbutton-focus-text-decoration: none;
187
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
188
180
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
181
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
182
+ --utrecht-mapcontrolbutton-focus-text-decoration: none;
189
183
  --utrecht-mapcontrolbutton-border-radius: 2px;
190
184
  --utrecht-map-marker-icon-size: 30px;
191
185
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -202,7 +196,7 @@
202
196
  --utrecht-link-icon-size: 1.2em;
203
197
  --utrecht-link-hover-text-decoration-thickness: 3px;
204
198
  --utrecht-link-hover-text-decoration: underline;
205
- --utrecht-link-focus-text-decoration: none;
199
+ --utrecht-link-focus-visible-text-decoration: none;
206
200
  --utrecht-link-text-underline-offset: 3px;
207
201
  --utrecht-link-text-decoration: underline;
208
202
  --utrecht-link-social-hover-transform-scale: 1.1;
@@ -240,10 +234,8 @@
240
234
  --utrecht-form-toggle-border-radius: 10em;
241
235
  --utrecht-form-toggle-border-style: solid;
242
236
  --utrecht-form-toggle-border-color: transparent;
243
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
237
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
244
238
  --utrecht-form-label-font-size: 1em;
245
- --utrecht-form-fieldset-legend-line-height: 1.4;
246
- --utrecht-form-fieldset-legend-font-size: 1rem;
247
239
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
248
240
  --utrecht-form-control-block-size: 42px;
249
241
  --utrecht-form-control-read-only-border-color: transparent;
@@ -254,8 +246,6 @@
254
246
  --utrecht-form-control-max-inline-size: 28em;
255
247
  --utrecht-form-control-border-radius: 0;
256
248
  --utrecht-focus-outline-style: dotted;
257
- --utrecht-figure-caption-line-height: 20px;
258
- --utrecht-figure-caption-font-size: 14px;
259
249
  --utrecht-figure-caption-color: #727272;
260
250
  --utrecht-drawer-max-inline-size: 320px;
261
251
  --utrecht-drawer-max-block-size: 240px;
@@ -318,20 +308,18 @@
318
308
  --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
319
309
  --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
320
310
  --utrecht-pointer-target-min-size: 44px;
321
- --utrecht-action-inert-cursor: default;
322
- --utrecht-action-activate-cursor: pointer;
323
311
  --utrecht-action-submit-cursor: pointer;
324
312
  --utrecht-action-navigate-cursor: pointer;
313
+ --utrecht-action-inert-cursor: default;
325
314
  --utrecht-action-disabled-cursor: not-allowed;
326
315
  --utrecht-action-busy-cursor: wait;
316
+ --utrecht-action-activate-cursor: pointer;
327
317
  --utrecht-column-layout-column-width: 350px;
328
318
  --utrecht-column-layout-column-rule-width: 2px;
329
319
  --utrecht-code-block-padding-inline-end: 20px;
330
320
  --utrecht-code-block-padding-inline-start: 20px;
331
321
  --utrecht-code-block-padding-block-end: 20px;
332
322
  --utrecht-code-block-padding-block-start: 20px;
333
- --utrecht-code-block-line-height: 24px;
334
- --utrecht-code-block-font-size: 16px;
335
323
  --utrecht-checkbox-margin-block-start: 0;
336
324
  --utrecht-checkbox-focus-border-width: 2px;
337
325
  --utrecht-checkbox-size: 24px;
@@ -351,7 +339,7 @@
351
339
  --utrecht-calendar-table-days-item-day-border-color: transparent;
352
340
  --utrecht-calendar-table-days-item-day-border-width: 2px;
353
341
  --utrecht-calendar-table-days-item-day-size: 44px;
354
- --utrecht-calendar-table-weeks-item-line-height: 24px;
342
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
355
343
  --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
356
344
  --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
357
345
  --utrecht-calendar-table-weeks-item-width: 44px;
@@ -380,15 +368,13 @@
380
368
  --utrecht-breadcrumb-nav-min-block-size: 34px;
381
369
  --utrecht-blockquote-margin-block-end: 1.6em;
382
370
  --utrecht-blockquote-margin-block-start: 1.6em;
383
- --utrecht-blockquote-content-font-size: 1.125rem;
384
- --utrecht-blockquote-attribution-font-size: 0.75rem;
385
371
  --utrecht-blockquote-margin-inline-end: 1.6em;
386
372
  --utrecht-blockquote-margin-inline-start: 1.6em;
387
373
  --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
388
374
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
389
375
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
390
376
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
391
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
377
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
392
378
  --utrecht-backdrop-opacity: 0.8;
393
379
  --utrecht-article-max-inline-size: 780px;
394
380
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -451,6 +437,7 @@
451
437
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
452
438
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
453
439
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
440
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
454
441
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
455
442
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
456
443
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -469,6 +456,7 @@
469
456
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
470
457
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
471
458
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
459
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
472
460
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
473
461
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
474
462
  --utrecht-surface-color: var(--utrecht-color-grey-95);
@@ -485,7 +473,7 @@
485
473
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
486
474
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
487
475
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
488
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
476
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
489
477
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
490
478
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
491
479
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -554,6 +542,7 @@
554
542
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
555
543
  --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
556
544
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
545
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
557
546
  --utrecht-page-color: var(--utrecht-color-grey-95);
558
547
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
559
548
  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -565,7 +554,7 @@
565
554
  --utrecht-page-footer-color: var(--utrecht-color-white);
566
555
  --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
567
556
  --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
568
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
557
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
569
558
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
570
559
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
571
560
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -593,6 +582,12 @@
593
582
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
594
583
  --utrecht-mark-color: var(--utrecht-color-black);
595
584
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
585
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
586
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
587
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
588
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
589
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
590
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
596
591
  --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
597
592
  --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
598
593
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
@@ -601,12 +596,6 @@
601
596
  --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
602
597
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
603
598
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
604
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
605
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
606
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
607
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
608
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
609
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
610
599
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
611
600
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
612
601
  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
@@ -622,10 +611,10 @@
622
611
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
623
612
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
624
613
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
625
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
626
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
627
614
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
628
615
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
616
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
617
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
629
618
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
630
619
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
631
620
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -686,7 +675,9 @@
686
675
  --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
687
676
  --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
688
677
  --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
678
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
689
679
  --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
680
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
690
681
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
691
682
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
692
683
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -711,6 +702,8 @@
711
702
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
712
703
  --utrecht-focus-outline-color: var(--utrecht-color-black);
713
704
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
705
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
706
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
714
707
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
715
708
  --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
716
709
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -746,6 +739,8 @@
746
739
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
747
740
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
748
741
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
742
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
743
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
749
744
  --utrecht-code-block-color: var(--utrecht-color-black);
750
745
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
751
746
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -846,7 +841,6 @@
846
841
  --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
847
842
  --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
848
843
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
849
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
850
844
  --utrecht-button-active-color: var(--utrecht-color-white);
851
845
  --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
852
846
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -857,6 +851,7 @@
857
851
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
858
852
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
859
853
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
854
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
860
855
  --utrecht-button-color: var(--utrecht-color-grey-80);
861
856
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
862
857
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -875,6 +870,8 @@
875
870
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
876
871
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
877
872
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
873
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
874
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
878
875
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
879
876
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
880
877
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -952,7 +949,7 @@
952
949
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
953
950
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
954
951
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
955
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
952
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
956
953
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
957
954
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
958
955
  --utrecht-link-visited-color: var(--utrecht-link-color);