@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.less 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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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;