@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/_variables.scss CHANGED
@@ -1,8 +1,7 @@
1
1
 
2
- // Do not edit directly
3
- // Generated on Wed, 21 Aug 2024 08:24:57 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;
@@ -97,20 +96,19 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
97
96
  $utrecht-toptask-link-min-inline-size: 15rem;
98
97
  $utrecht-toptask-link-min-block-size: 8.25rem;
99
98
  $utrecht-toptask-link-line-height: 1.2;
100
- $utrecht-toptask-link-font-size: 1rem;
101
99
  $utrecht-textbox-border-bottom-width: 3px;
102
100
  $utrecht-textarea-border-bottom-width: 3px;
103
- $utrecht-table-footer-sticky-border-block-start-width: 2px;
101
+ $utrecht-textarea-border-block-end-width: 3px;
104
102
  $utrecht-table-cell-icon-size: 1em;
105
103
  $utrecht-table-cell-padding-inline-start: 0.4em;
106
104
  $utrecht-table-cell-padding-inline-end: 0.4em;
107
105
  $utrecht-table-cell-padding-block-start: 0.5em;
108
106
  $utrecht-table-cell-padding-block-end: 0.5em;
109
- $utrecht-table-cell-line-height: 24px;
107
+ $utrecht-table-cell-line-height: 1.5rem;
108
+ $utrecht-table-footer-sticky-border-block-start-width: 2px;
110
109
  $utrecht-table-header-sticky-border-block-end-width: 2px;
111
110
  $utrecht-table-caption-margin-block-end: 1em;
112
111
  $utrecht-table-caption-text-align: start;
113
- $utrecht-table-caption-font-size: 1.125em;
114
112
  $utrecht-table-margin-block-end: 0;
115
113
  $utrecht-separator-block-size: 8px;
116
114
  $utrecht-select-border-block-end-width: 3px;
@@ -122,10 +120,10 @@ $utrecht-search-bar-input-background-position-x: .5em;
122
120
  $utrecht-search-bar-button-hover-scale: 1;
123
121
  $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
124
122
  $utrecht-rich-text-confidant-margin-block-end: 0;
125
- $utrecht-radio-button-margin-inline-end: 12px;
126
123
  $utrecht-radio-button-border-radius: 0;
127
124
  $utrecht-radio-button-invalid-border-width: 2px;
128
125
  $utrecht-radio-button-icon-size: 42%;
126
+ $utrecht-radio-button-margin-inline-end: 12px;
129
127
  $utrecht-radio-button-size: 24px;
130
128
  $utrecht-radio-button-border-width: 2px;
131
129
  $utrecht-paragraph-margin-block-end: 0;
@@ -138,7 +136,6 @@ $utrecht-pagination-relative-link-padding-block-end: 0.5em;
138
136
  $utrecht-pagination-relative-link-padding-inline-start: 0.5em;
139
137
  $utrecht-pagination-relative-link-padding-inline-end: 0.5em;
140
138
  $utrecht-pagination-relative-link-border-width: 2px;
141
- $utrecht-pagination-page-link-border-color: transparent;
142
139
  $utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
143
140
  $utrecht-pagination-page-link-text-decoration: none;
144
141
  $utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -146,10 +143,10 @@ $utrecht-pagination-page-link-padding-block-end: 0.5em;
146
143
  $utrecht-pagination-page-link-padding-inline-start: 0.5em;
147
144
  $utrecht-pagination-page-link-padding-inline-end: 0.5em;
148
145
  $utrecht-pagination-page-link-border-width: 2px;
146
+ $utrecht-pagination-page-link-border-color: transparent;
149
147
  $utrecht-pagination-page-link-background-color: transparent;
150
148
  $utrecht-pagination-margin-block-end: 1em;
151
149
  $utrecht-pagination-margin-block-start: 0;
152
- $utrecht-pagination-font-size: 14px;
153
150
  $utrecht-page-padding-inline-start: 2em;
154
151
  $utrecht-page-padding-block-end: 1em;
155
152
  $utrecht-page-padding-inline-end: 2em;
@@ -157,10 +154,10 @@ $utrecht-page-padding-block-start: 1.8em;
157
154
  $utrecht-page-max-inline-size: 1184px;
158
155
  $utrecht-page-margin-inline-end: 2em;
159
156
  $utrecht-page-margin-inline-start: 2em;
160
- $utrecht-page-header-padding-block-start: 1.8em;
161
- $utrecht-page-header-padding-inline-start: 2em;
162
157
  $utrecht-page-header-padding-inline-end: 2.4em;
158
+ $utrecht-page-header-padding-inline-start: 2em;
163
159
  $utrecht-page-header-padding-block-end: 1em;
160
+ $utrecht-page-header-padding-block-start: 1.8em;
164
161
  $utrecht-page-content-padding-block-end: 2em;
165
162
  $utrecht-page-content-padding-block-start: 2em;
166
163
  $utrecht-ordered-list-item-padding-inline-start: 0;
@@ -171,12 +168,14 @@ $utrecht-ordered-list-margin-block-end: 1em;
171
168
  $utrecht-ordered-list-margin-block-start: 0;
172
169
  $utrecht-number-data-negative-color: red;
173
170
  $utrecht-number-data-positive-color: green;
171
+ $utrecht-number-badge-padding-inline: 1ex; // Default inline padding color for badge components
172
+ $utrecht-number-badge-padding-block: 1ex; // Default block padding for badge components
174
173
  $utrecht-topnav-link-focus-text-decoration: none;
175
174
  $utrecht-topnav-link-focus-border-type: dotted;
175
+ $utrecht-mapcontrolbutton-margin-inline-start: 0;
176
+ $utrecht-mapcontrolbutton-margin-inline-end: 0;
176
177
  $utrecht-mapcontrolbutton-focus-text-decoration: none;
177
178
  $utrecht-mapcontrolbutton-border-radius: 2px;
178
- $utrecht-mapcontrolbutton-margin-inline-end: 0;
179
- $utrecht-mapcontrolbutton-margin-inline-start: 0;
180
179
  $utrecht-map-marker-icon-size: 30px;
181
180
  $utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
182
181
  $utrecht-map-marker-border-width: 3px;
@@ -192,11 +191,11 @@ $utrecht-list-social-item-margin-inline-end: 10px;
192
191
  $utrecht-link-icon-size: 1.2em;
193
192
  $utrecht-link-hover-text-decoration-thickness: 3px;
194
193
  $utrecht-link-hover-text-decoration: underline;
195
- $utrecht-link-focus-text-decoration: none;
194
+ $utrecht-link-focus-visible-text-decoration: none;
196
195
  $utrecht-link-text-underline-offset: 3px;
197
196
  $utrecht-link-text-decoration: underline;
198
- $utrecht-link-social-icon-size: 26px;
199
197
  $utrecht-link-social-hover-transform-scale: 1.1;
198
+ $utrecht-link-social-icon-size: 26px;
200
199
  $utrecht-link-social-size: 40px;
201
200
  $utrecht-link-social-border-width: 2px;
202
201
  $utrecht-link-list-icon-size: 14px;
@@ -229,13 +228,11 @@ $utrecht-form-toggle-border-width: 2px;
229
228
  $utrecht-form-toggle-border-radius: 10em;
230
229
  $utrecht-form-toggle-border-style: solid;
231
230
  $utrecht-form-toggle-border-color: transparent;
232
- $utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
231
+ $utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
233
232
  $utrecht-form-label-font-size: 1em;
234
- $utrecht-form-fieldset-legend-line-height: 1.4;
235
- $utrecht-form-fieldset-legend-font-size: 1rem;
236
233
  $utrecht-form-field-invalid-border-inline-start-width: 3px;
237
- $utrecht-form-control-read-only-border-color: transparent;
238
234
  $utrecht-form-control-block-size: 42px;
235
+ $utrecht-form-control-read-only-border-color: transparent;
239
236
  $utrecht-form-control-padding-inline-start: 12px;
240
237
  $utrecht-form-control-padding-inline-end: 12px;
241
238
  $utrecht-form-control-padding-block-start: 8px;
@@ -243,15 +240,13 @@ $utrecht-form-control-padding-block-end: 8px;
243
240
  $utrecht-form-control-max-inline-size: 28em;
244
241
  $utrecht-form-control-border-radius: 0;
245
242
  $utrecht-focus-outline-style: dotted;
246
- $utrecht-figure-caption-line-height: 20px;
247
- $utrecht-figure-caption-font-size: 14px;
248
243
  $utrecht-figure-caption-color: #727272;
249
244
  $utrecht-drawer-max-inline-size: 320px;
250
245
  $utrecht-drawer-max-block-size: 240px;
251
246
  $utrecht-drawer-border-width: 1px;
252
247
  $utrecht-document-line-height: 1.4;
253
- $utrecht-data-list-rows-column-min-inline-size: 25ch;
254
248
  $utrecht-data-list-rows-column-inline-size: 80%;
249
+ $utrecht-data-list-rows-column-min-inline-size: 25ch;
255
250
  $utrecht-space-column-5xl: 64px; // Extra Large 5
256
251
  $utrecht-space-column-4xl: 48px; // Extra Large 4
257
252
  $utrecht-space-column-3xl: 32px; // Extra Large 3
@@ -307,20 +302,18 @@ $utrecht-space-block-xs: 8px; // Extra Small
307
302
  $utrecht-space-block-2xs: 4px; // Extra Small 2
308
303
  $utrecht-space-block-3xs: 2px; // Extra Small 3
309
304
  $utrecht-pointer-target-min-size: 44px;
310
- $utrecht-action-inert-cursor: default;
311
- $utrecht-action-activate-cursor: pointer;
312
305
  $utrecht-action-submit-cursor: pointer;
313
306
  $utrecht-action-navigate-cursor: pointer;
307
+ $utrecht-action-inert-cursor: default;
314
308
  $utrecht-action-disabled-cursor: not-allowed;
315
309
  $utrecht-action-busy-cursor: wait;
310
+ $utrecht-action-activate-cursor: pointer;
316
311
  $utrecht-column-layout-column-width: 350px;
317
312
  $utrecht-column-layout-column-rule-width: 2px;
318
313
  $utrecht-code-block-padding-inline-end: 20px;
319
314
  $utrecht-code-block-padding-inline-start: 20px;
320
315
  $utrecht-code-block-padding-block-end: 20px;
321
316
  $utrecht-code-block-padding-block-start: 20px;
322
- $utrecht-code-block-line-height: 24px;
323
- $utrecht-code-block-font-size: 16px;
324
317
  $utrecht-checkbox-margin-block-start: 0;
325
318
  $utrecht-checkbox-focus-border-width: 2px;
326
319
  $utrecht-checkbox-size: 24px;
@@ -340,7 +333,7 @@ $utrecht-calendar-table-days-item-day-focus-border-color: transparent;
340
333
  $utrecht-calendar-table-days-item-day-border-color: transparent;
341
334
  $utrecht-calendar-table-days-item-day-border-width: 2px;
342
335
  $utrecht-calendar-table-days-item-day-size: 44px;
343
- $utrecht-calendar-table-weeks-item-line-height: 24px;
336
+ $utrecht-calendar-table-weeks-item-line-height: 1.5rem;
344
337
  $utrecht-calendar-table-weeks-item-padding-block-end: 10px;
345
338
  $utrecht-calendar-table-weeks-item-padding-block-start: 4px;
346
339
  $utrecht-calendar-table-weeks-item-width: 44px;
@@ -369,15 +362,13 @@ $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
369
362
  $utrecht-breadcrumb-nav-min-block-size: 34px;
370
363
  $utrecht-blockquote-margin-block-end: 1.6em;
371
364
  $utrecht-blockquote-margin-block-start: 1.6em;
372
- $utrecht-blockquote-content-font-size: 1.125rem;
373
- $utrecht-blockquote-attribution-font-size: 0.75rem;
374
365
  $utrecht-blockquote-margin-inline-end: 1.6em;
375
366
  $utrecht-blockquote-margin-inline-start: 1.6em;
376
367
  $utrecht-badge-border-radius: 0; // Default corner radius for badge components
377
368
  $utrecht-badge-counter-padding-inline: 1ex; // Default inline padding color for badge components
378
369
  $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge components
379
370
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
380
- $utrecht-backdrop-fade-in-animation-duration: 0.4s;
371
+ $utrecht-backdrop-fade-in-animation-duration: 400ms;
381
372
  $utrecht-backdrop-opacity: 0.8;
382
373
  $utrecht-article-max-inline-size: 780px;
383
374
  $utrecht-alert-icon-inset-block-start: 6px;
@@ -438,10 +429,8 @@ $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
438
429
  $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
439
430
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
440
431
  $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
432
+ $utrecht-toptask-link-font-size: $utrecht-typography-scale-md-font-size;
441
433
  $utrecht-textarea-line-height: $utrecht-typography-line-height-md;
442
- $utrecht-table-footer-sticky-border-block-start-color: $utrecht-color-red-40;
443
- $utrecht-table-footer-sticky-color: $utrecht-color-black;
444
- $utrecht-table-footer-sticky-background-color: $utrecht-color-white;
445
434
  $utrecht-table-row-alternate-even-color: $utrecht-color-black;
446
435
  $utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
447
436
  $utrecht-table-row-alternate-odd-color: $utrecht-color-black;
@@ -450,16 +439,22 @@ $utrecht-table-row-border-block-end-width: $utrecht-border-width-sm;
450
439
  $utrecht-table-row-border-block-end-color: $utrecht-color-grey-90;
451
440
  $utrecht-table-cell-selected-color: $utrecht-color-black;
452
441
  $utrecht-table-cell-selected-background-color: $utrecht-color-blue-90;
442
+ $utrecht-table-footer-sticky-border-block-start-color: $utrecht-color-red-40;
443
+ $utrecht-table-footer-sticky-color: $utrecht-color-black;
444
+ $utrecht-table-footer-sticky-background-color: $utrecht-color-white;
453
445
  $utrecht-table-header-sticky-border-block-end-color: $utrecht-color-red-40;
454
446
  $utrecht-table-header-sticky-color: $utrecht-color-black;
455
447
  $utrecht-table-header-sticky-background-color: $utrecht-color-white;
456
448
  $utrecht-table-header-border-block-end-width: $utrecht-border-width-md;
457
449
  $utrecht-table-header-border-block-end-color: $utrecht-color-red-40;
458
450
  $utrecht-table-header-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
451
+ $utrecht-table-caption-font-size: $utrecht-typography-scale-lg-font-size;
459
452
  $utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
460
453
  $utrecht-table-margin-block-start: $utrecht-space-block-md;
461
454
  $utrecht-surface-color: $utrecht-color-grey-10;
462
455
  $utrecht-surface-background-color: $utrecht-color-grey-95;
456
+ $utrecht-spotlight-section-ok-background-color: $utrecht-color-green-90;
457
+ $utrecht-spotlight-section-error-background-color: $utrecht-color-red-95;
463
458
  $utrecht-spotlight-section-warning-background-color: $utrecht-color-yellow-80;
464
459
  $utrecht-spotlight-section-info-background-color: $utrecht-color-blue-90;
465
460
  $utrecht-spotlight-section-padding-inline-end: $utrecht-space-inline-md;
@@ -468,7 +463,7 @@ $utrecht-spotlight-section-padding-block-end: $utrecht-space-block-sm;
468
463
  $utrecht-spotlight-section-padding-block-start: $utrecht-space-block-md;
469
464
  $utrecht-spotlight-section-color: $utrecht-color-black;
470
465
  $utrecht-spotlight-section-background-color: $utrecht-color-grey-90;
471
- $utrecht-skip-link-focus-text-decoration: $utrecht-link-focus-text-decoration;
466
+ $utrecht-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
472
467
  $utrecht-skip-link-text-decoration: $utrecht-link-text-decoration;
473
468
  $utrecht-separator-margin-block-start: $utrecht-space-block-md;
474
469
  $utrecht-separator-margin-block-end: $utrecht-space-block-md;
@@ -488,8 +483,8 @@ $utrecht-search-bar-dropdown-padding-block-start: $utrecht-space-block-xs;
488
483
  $utrecht-search-bar-dropdown-border-color: $utrecht-color-red-40;
489
484
  $utrecht-search-bar-input-padding-inline-start: $utrecht-space-inline-3xl;
490
485
  $utrecht-search-bar-input-border-color: $utrecht-color-red-40;
491
- $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
492
486
  $utrecht-search-bar-button-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
487
+ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
493
488
  $utrecht-search-bar-button-color: $utrecht-color-white;
494
489
  $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
495
490
  $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
@@ -499,8 +494,8 @@ $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
499
494
  $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
500
495
  $utrecht-radio-button-color: $utrecht-color-white;
501
496
  $utrecht-radio-button-disabled-color: $utrecht-color-white;
502
- $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
503
497
  $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
498
+ $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
504
499
  $utrecht-radio-button-focus-border-color: $utrecht-color-blue-40;
505
500
  $utrecht-radio-button-hover-background-color: $utrecht-color-blue-90;
506
501
  $utrecht-radio-button-checked-focus-border-color: $utrecht-color-blue-20;
@@ -508,8 +503,8 @@ $utrecht-radio-button-checked-hover-color: $utrecht-color-blue-90;
508
503
  $utrecht-radio-button-checked-hover-background-color: $utrecht-color-blue-40;
509
504
  $utrecht-radio-button-checked-active-color: $utrecht-color-blue-80;
510
505
  $utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
511
- $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
512
506
  $utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
507
+ $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
513
508
  $utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
514
509
  $utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
515
510
  $utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
@@ -522,12 +517,12 @@ $utrecht-paragraph-line-height: $utrecht-typography-line-height-md;
522
517
  $utrecht-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
523
518
  $utrecht-paragraph-font-size: $utrecht-typography-scale-md-font-size;
524
519
  $utrecht-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
525
- $utrecht-pagination-relative-link-border-color: $utrecht-color-blue-35;
526
520
  $utrecht-pagination-relative-link-hover-color: $utrecht-color-white;
527
521
  $utrecht-pagination-relative-link-hover-border-color: $utrecht-color-blue-35;
528
522
  $utrecht-pagination-relative-link-hover-background-color: $utrecht-color-blue-35;
529
523
  $utrecht-pagination-relative-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
530
524
  $utrecht-pagination-relative-link-color: $utrecht-color-blue-35;
525
+ $utrecht-pagination-relative-link-border-color: $utrecht-color-blue-35;
531
526
  $utrecht-pagination-relative-link-background-color: $utrecht-color-white;
532
527
  $utrecht-pagination-page-link-hover-color: $utrecht-color-white;
533
528
  $utrecht-pagination-page-link-hover-border-color: $utrecht-color-blue-35;
@@ -537,6 +532,7 @@ $utrecht-pagination-page-link-current-border-color: $utrecht-color-blue-35;
537
532
  $utrecht-pagination-page-link-current-background-color: $utrecht-color-blue-35;
538
533
  $utrecht-pagination-page-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
539
534
  $utrecht-pagination-page-link-color: $utrecht-color-blue-35;
535
+ $utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
540
536
  $utrecht-page-color: $utrecht-color-black;
541
537
  $utrecht-page-background-color: $utrecht-color-white;
542
538
  $utrecht-page-footer-padding-block-start: $utrecht-space-block-3xl;
@@ -546,6 +542,9 @@ $utrecht-page-footer-padding-inline-end: $utrecht-space-inline-2xl;
546
542
  $utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
547
543
  $utrecht-page-footer-background-color: $utrecht-color-red-40;
548
544
  $utrecht-page-footer-color: $utrecht-color-white;
545
+ $utrecht-number-badge-font-size: $utrecht-typography-scale-md-font-size;
546
+ $utrecht-number-badge-color: $utrecht-color-white; // Default text color for badge components
547
+ $utrecht-number-badge-background-color: $utrecht-color-red-40;
549
548
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
550
549
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
551
550
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -573,27 +572,27 @@ $utrecht-nav-bar-color: $utrecht-color-black;
573
572
  $utrecht-nav-bar-background-color: $utrecht-color-white;
574
573
  $utrecht-mark-color: $utrecht-color-black;
575
574
  $utrecht-mark-background-color: $utrecht-color-yellow-60;
575
+ $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
576
+ $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
577
+ $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
578
+ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
579
+ $utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
580
+ $utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
581
+ $utrecht-mapcontrolbutton-label-margin-inline-end: $utrecht-space-inline-xs;
582
+ $utrecht-mapcontrolbutton-label-margin-inline-start: $utrecht-space-inline-xs;
576
583
  $utrecht-mapcontrolbutton-hover-color: $utrecht-color-white;
577
584
  $utrecht-mapcontrolbutton-hover-background-color: $utrecht-color-grey-90;
578
585
  $utrecht-mapcontrolbutton-focus-color: $utrecht-color-black;
579
- $utrecht-mapcontrolbutton-label-margin-inline-end: $utrecht-space-inline-xs;
580
- $utrecht-mapcontrolbutton-label-margin-inline-start: $utrecht-space-inline-xs;
581
- $utrecht-mapcontrolbutton-color: $utrecht-color-grey-40;
582
- $utrecht-mapcontrolbutton-border-style: $utrecht-border-style-solid;
583
- $utrecht-mapcontrolbutton-border-color: $utrecht-color-grey-40;
584
- $utrecht-mapcontrolbutton-background-color: $utrecht-color-white;
586
+ $utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
585
587
  $utrecht-mapcontrolbutton-disabled-border-color: $utrecht-color-grey-80;
586
588
  $utrecht-mapcontrolbutton-disabled-background-color: $utrecht-color-grey-90;
587
- $utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
588
- $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
589
- $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
590
- $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
591
- $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
592
- $utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
593
- $utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
594
589
  $utrecht-mapcontrolbutton-min-inline-size: $utrecht-space-block-2xl;
595
590
  $utrecht-mapcontrolbutton-min-block-size: $utrecht-space-block-2xl;
591
+ $utrecht-mapcontrolbutton-color: $utrecht-color-grey-40;
596
592
  $utrecht-mapcontrolbutton-border-width: $utrecht-border-width-sm;
593
+ $utrecht-mapcontrolbutton-border-style: $utrecht-border-style-solid;
594
+ $utrecht-mapcontrolbutton-border-color: $utrecht-color-grey-40;
595
+ $utrecht-mapcontrolbutton-background-color: $utrecht-color-white;
597
596
  $utrecht-map-marker-border-color: $utrecht-color-white;
598
597
  $utrecht-map-marker-color: $utrecht-color-white;
599
598
  $utrecht-map-marker-background-color: $utrecht-color-blue-30;
@@ -617,8 +616,8 @@ $utrecht-listbox-background-color: $utrecht-color-white;
617
616
  $utrecht-link-placeholder-color: $utrecht-color-grey-40;
618
617
  $utrecht-link-focus-color: $utrecht-color-blue-40;
619
618
  $utrecht-link-color: $utrecht-color-blue-35;
620
- $utrecht-link-social-color: $utrecht-color-white;
621
619
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
620
+ $utrecht-link-social-color: $utrecht-color-white;
622
621
  $utrecht-link-social-border-color: $utrecht-color-white;
623
622
  $utrecht-link-social-background-color: $utrecht-color-red-40;
624
623
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
@@ -667,7 +666,9 @@ $utrecht-form-label-font-weight: $utrecht-typography-weight-scale-bold-font-weig
667
666
  $utrecht-form-fieldset-legend-disabled-color: $utrecht-color-grey-40;
668
667
  $utrecht-form-fieldset-legend-margin-block-start: $utrecht-space-block-xl;
669
668
  $utrecht-form-fieldset-legend-margin-block-end: $utrecht-space-block-sm;
669
+ $utrecht-form-fieldset-legend-line-height: $utrecht-typography-line-height-md;
670
670
  $utrecht-form-fieldset-legend-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
671
+ $utrecht-form-fieldset-legend-font-size: $utrecht-typography-scale-md-font-size;
671
672
  $utrecht-form-fieldset-section-color: $utrecht-color-black;
672
673
  $utrecht-form-fieldset-section-background-color: $utrecht-color-grey-80;
673
674
  $utrecht-form-fieldset-margin-block-start: $utrecht-space-block-2xs;
@@ -692,6 +693,8 @@ $utrecht-focus-inverse-outline-color: $utrecht-color-white;
692
693
  $utrecht-focus-outline-width: $utrecht-border-width-md;
693
694
  $utrecht-focus-outline-color: $utrecht-color-black;
694
695
  $utrecht-focus-background-color: $utrecht-color-yellow-60;
696
+ $utrecht-figure-caption-line-height: $utrecht-typography-line-height-md;
697
+ $utrecht-figure-caption-font-size: $utrecht-typography-scale-sm-font-size;
695
698
  $utrecht-emphasis-strong-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
696
699
  $utrecht-drawer-padding-inline-end: $utrecht-space-inline-md;
697
700
  $utrecht-drawer-padding-inline-start: $utrecht-space-inline-md;
@@ -727,6 +730,8 @@ $utrecht-column-layout-gap: $utrecht-space-column-md;
727
730
  $utrecht-column-layout-column-rule-color: $utrecht-color-grey-80;
728
731
  $utrecht-code-block-margin-block-end: $utrecht-space-block-lg;
729
732
  $utrecht-code-block-margin-block-start: $utrecht-space-block-lg;
733
+ $utrecht-code-block-line-height: $utrecht-typography-line-height-md;
734
+ $utrecht-code-block-font-size: $utrecht-typography-scale-md-font-size;
730
735
  $utrecht-code-block-color: $utrecht-color-black;
731
736
  $utrecht-code-block-background-color: $utrecht-color-grey-95;
732
737
  $utrecht-checkbox-indeterminate-background-color: $utrecht-color-blue-40;
@@ -830,7 +835,6 @@ $utrecht-button-primary-action-background-color: $utrecht-color-blue-35;
830
835
  $utrecht-button-disabled-color: $utrecht-color-grey-80;
831
836
  $utrecht-button-disabled-border-color: $utrecht-color-grey-80;
832
837
  $utrecht-button-disabled-background-color: $utrecht-color-grey-90;
833
- $utrecht-button-icon-gap: $utrecht-space-text-xs;
834
838
  $utrecht-button-active-color: $utrecht-color-white;
835
839
  $utrecht-button-active-background-color: $utrecht-color-grey-40;
836
840
  $utrecht-button-padding-inline-end: $utrecht-space-inline-md;
@@ -841,6 +845,7 @@ $utrecht-button-margin-block-end: $utrecht-space-row-xs;
841
845
  $utrecht-button-margin-block-start: $utrecht-space-row-xs;
842
846
  $utrecht-button-font-size: $utrecht-typography-scale-md-font-size;
843
847
  $utrecht-button-font-family: $utrecht-typography-sans-serif-font-family;
848
+ $utrecht-button-column-gap: $utrecht-space-text-xs;
844
849
  $utrecht-button-color: $utrecht-color-grey-40;
845
850
  $utrecht-button-border-color: $utrecht-color-grey-40;
846
851
  $utrecht-button-background-color: $utrecht-color-white;
@@ -859,6 +864,8 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
859
864
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
860
865
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
861
866
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
867
+ $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-xs-font-size;
868
+ $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
862
869
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
863
870
  $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
864
871
  $utrecht-badge-padding-inline: $utrecht-space-inline-sm; // Default inline padding color for badge components
@@ -915,6 +922,7 @@ $utrecht-accordion-button-padding-block-start: $utrecht-space-block-xs;
915
922
  $utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
916
923
  $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
917
924
  $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
925
+ $utrecht-accordion-row-gap: $utrecht-space-block-xs;
918
926
  $of-progress-indicator-background-color: $utrecht-document-background-color;
919
927
  $of-page-footer-fg: $utrecht-page-footer-color;
920
928
  $of-page-footer-bg: $utrecht-page-footer-background-color;
@@ -924,8 +932,8 @@ $utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
924
932
  $utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
925
933
  $utrecht-toptask-link-color: $utrecht-button-primary-action-color;
926
934
  $utrecht-toptask-link-background-color: $utrecht-button-primary-action-background-color;
927
- $utrecht-skip-link-focus-background-color: $utrecht-topnav-link-focus-background-color;
928
935
  $utrecht-skip-link-focus-color: $utrecht-topnav-link-focus-color;
936
+ $utrecht-skip-link-focus-background-color: $utrecht-topnav-link-focus-background-color;
929
937
  $utrecht-skip-link-padding-inline-end: $utrecht-button-padding-inline-end;
930
938
  $utrecht-skip-link-padding-inline-start: $utrecht-button-padding-inline-start;
931
939
  $utrecht-skip-link-padding-block-end: $utrecht-button-padding-block-end;
@@ -935,6 +943,7 @@ $utrecht-skip-link-background-color: $utrecht-topnav-list-background-color;
935
943
  $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
936
944
  $utrecht-radio-button-background-color: $utrecht-form-control-background-color;
937
945
  $utrecht-paragraph-lead-color: $utrecht-document-color;
946
+ $utrecht-number-badge-border-radius: $utrecht-number-badge-font-size;
938
947
  $utrecht-listbox-border-width: $utrecht-form-control-border-width;
939
948
  $utrecht-listbox-border-color: $utrecht-form-control-border-color;
940
949
  $utrecht-link-visited-color: $utrecht-link-color;
package/dist/background-image-icon.css CHANGED
@@ -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");