@utrecht/design-tokens 2.0.0 → 2.1.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 (25) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +36 -26
  3. package/dist/_variables.scss +36 -26
  4. package/dist/dark/_mixin-theme.scss +36 -26
  5. package/dist/dark/index.css +36 -26
  6. package/dist/dark/root.css +36 -26
  7. package/dist/figma-tokens.json +6285 -2471
  8. package/dist/index.cjs +41 -31
  9. package/dist/index.css +72 -52
  10. package/dist/index.d.ts +46 -31
  11. package/dist/index.flat.json +40 -30
  12. package/dist/index.json +3911 -1117
  13. package/dist/index.mjs +41 -31
  14. package/dist/index.tokens.json +1875 -835
  15. package/dist/root.css +36 -26
  16. package/dist/theme-prince-xml.css +36 -26
  17. package/dist/theme.css +36 -26
  18. package/dist/tokens.cjs +6334 -2510
  19. package/dist/tokens.d.ts +469 -207
  20. package/dist/variables.less +36 -26
  21. package/package.json +1 -1
  22. package/src/component/utrecht/accordion.tokens.json +1 -0
  23. package/src/component/utrecht/number-badge.tokens.json +23 -0
  24. package/src/component/utrecht/spotlight-section.tokens.json +8 -0
  25. package/src/component/utrecht/textarea.tokens.json +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 7b8ebea: Add design tokens with styling for the new `ok` and `error` variants of the Spotlight Section component.
8
+
3
9
  ## 2.0.0
4
10
 
5
11
  ### Major Changes
package/dist/_mixin-theme.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 21 Aug 2024 08:24:57 GMT
3
+ * Generated on Tue, 01 Oct 2024 19:52:18 GMT
4
4
  */
5
5
 
6
6
  @mixin utrecht-theme {
@@ -102,13 +102,14 @@
102
102
  --utrecht-toptask-link-font-size: 1rem;
103
103
  --utrecht-textbox-border-bottom-width: 3px;
104
104
  --utrecht-textarea-border-bottom-width: 3px;
105
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
105
+ --utrecht-textarea-border-block-end-width: 3px;
106
106
  --utrecht-table-cell-icon-size: 1em;
107
107
  --utrecht-table-cell-padding-inline-start: 0.4em;
108
108
  --utrecht-table-cell-padding-inline-end: 0.4em;
109
109
  --utrecht-table-cell-padding-block-start: 0.5em;
110
110
  --utrecht-table-cell-padding-block-end: 0.5em;
111
111
  --utrecht-table-cell-line-height: 24px;
112
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
112
113
  --utrecht-table-header-sticky-border-block-end-width: 2px;
113
114
  --utrecht-table-caption-margin-block-end: 1em;
114
115
  --utrecht-table-caption-text-align: start;
@@ -124,10 +125,10 @@
124
125
  --utrecht-search-bar-button-hover-scale: 1;
125
126
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
126
127
  --utrecht-rich-text-confidant-margin-block-end: 0;
127
- --utrecht-radio-button-margin-inline-end: 12px;
128
128
  --utrecht-radio-button-border-radius: 0;
129
129
  --utrecht-radio-button-invalid-border-width: 2px;
130
130
  --utrecht-radio-button-icon-size: 42%;
131
+ --utrecht-radio-button-margin-inline-end: 12px;
131
132
  --utrecht-radio-button-size: 24px;
132
133
  --utrecht-radio-button-border-width: 2px;
133
134
  --utrecht-paragraph-margin-block-end: 0;
@@ -140,7 +141,6 @@
140
141
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
141
142
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
142
143
  --utrecht-pagination-relative-link-border-width: 2px;
143
- --utrecht-pagination-page-link-border-color: transparent;
144
144
  --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
145
145
  --utrecht-pagination-page-link-text-decoration: none;
146
146
  --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -148,6 +148,7 @@
148
148
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
149
149
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
150
150
  --utrecht-pagination-page-link-border-width: 2px;
151
+ --utrecht-pagination-page-link-border-color: transparent;
151
152
  --utrecht-pagination-page-link-background-color: transparent;
152
153
  --utrecht-pagination-margin-block-end: 1em;
153
154
  --utrecht-pagination-margin-block-start: 0;
@@ -159,10 +160,10 @@
159
160
  --utrecht-page-max-inline-size: 1184px;
160
161
  --utrecht-page-margin-inline-end: 2em;
161
162
  --utrecht-page-margin-inline-start: 2em;
162
- --utrecht-page-header-padding-block-start: 1.8em;
163
- --utrecht-page-header-padding-inline-start: 2em;
164
163
  --utrecht-page-header-padding-inline-end: 2.4em;
164
+ --utrecht-page-header-padding-inline-start: 2em;
165
165
  --utrecht-page-header-padding-block-end: 1em;
166
+ --utrecht-page-header-padding-block-start: 1.8em;
166
167
  --utrecht-page-content-padding-block-end: 2em;
167
168
  --utrecht-page-content-padding-block-start: 2em;
168
169
  --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -173,12 +174,14 @@
173
174
  --utrecht-ordered-list-margin-block-start: 0;
174
175
  --utrecht-number-data-negative-color: red;
175
176
  --utrecht-number-data-positive-color: green;
177
+ --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
178
+ --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
176
179
  --utrecht-topnav-link-focus-text-decoration: none;
177
180
  --utrecht-topnav-link-focus-border-type: dotted;
178
181
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
179
- --utrecht-mapcontrolbutton-border-radius: 2px;
180
182
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
181
183
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
184
+ --utrecht-mapcontrolbutton-border-radius: 2px;
182
185
  --utrecht-map-marker-icon-size: 30px;
183
186
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
184
187
  --utrecht-map-marker-border-width: 3px;
@@ -197,8 +200,8 @@
197
200
  --utrecht-link-focus-text-decoration: none;
198
201
  --utrecht-link-text-underline-offset: 3px;
199
202
  --utrecht-link-text-decoration: underline;
200
- --utrecht-link-social-icon-size: 26px;
201
203
  --utrecht-link-social-hover-transform-scale: 1.1;
204
+ --utrecht-link-social-icon-size: 26px;
202
205
  --utrecht-link-social-size: 40px;
203
206
  --utrecht-link-social-border-width: 2px;
204
207
  --utrecht-link-list-icon-size: 14px;
@@ -236,8 +239,8 @@
236
239
  --utrecht-form-fieldset-legend-line-height: 1.4;
237
240
  --utrecht-form-fieldset-legend-font-size: 1rem;
238
241
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
239
- --utrecht-form-control-read-only-border-color: transparent;
240
242
  --utrecht-form-control-block-size: 42px;
243
+ --utrecht-form-control-read-only-border-color: transparent;
241
244
  --utrecht-form-control-padding-inline-start: 12px;
242
245
  --utrecht-form-control-padding-inline-end: 12px;
243
246
  --utrecht-form-control-padding-block-start: 8px;
@@ -252,8 +255,8 @@
252
255
  --utrecht-drawer-max-block-size: 240px;
253
256
  --utrecht-drawer-border-width: 1px;
254
257
  --utrecht-document-line-height: 1.4;
255
- --utrecht-data-list-rows-column-min-inline-size: 25ch;
256
258
  --utrecht-data-list-rows-column-inline-size: 80%;
259
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
257
260
  --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
258
261
  --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
259
262
  --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -441,9 +444,6 @@
441
444
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
442
445
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
443
446
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
444
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
445
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
446
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
447
447
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
448
448
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
449
449
  --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -452,6 +452,9 @@
452
452
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
453
453
  --utrecht-table-cell-selected-color: var(--utrecht-color-black);
454
454
  --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
455
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
456
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
457
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
455
458
  --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
456
459
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
457
460
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
@@ -462,6 +465,8 @@
462
465
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
463
466
  --utrecht-surface-color: var(--utrecht-color-grey-10);
464
467
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
468
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
469
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
465
470
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
466
471
  --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-90);
467
472
  --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -490,8 +495,8 @@
490
495
  --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
491
496
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
492
497
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
493
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
494
498
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
499
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
495
500
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
496
501
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
497
502
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -501,8 +506,8 @@
501
506
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
502
507
  --utrecht-radio-button-color: var(--utrecht-color-white);
503
508
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
504
- --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
505
509
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
510
+ --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
506
511
  --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
507
512
  --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
508
513
  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -510,8 +515,8 @@
510
515
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
511
516
  --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
512
517
  --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
513
- --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
514
518
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
519
+ --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
515
520
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
516
521
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
517
522
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -524,12 +529,12 @@
524
529
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
525
530
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
526
531
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
527
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
528
532
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
529
533
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
530
534
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
531
535
  --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
532
536
  --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
537
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
533
538
  --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
534
539
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
535
540
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -548,6 +553,9 @@
548
553
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
549
554
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
550
555
  --utrecht-page-footer-color: var(--utrecht-color-white);
556
+ --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
557
+ --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
558
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
551
559
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
552
560
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
553
561
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -575,18 +583,14 @@
575
583
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
576
584
  --utrecht-mark-color: var(--utrecht-color-black);
577
585
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
586
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
587
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
578
588
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
579
589
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
580
590
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
581
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
582
- --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
583
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
584
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
585
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
586
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
591
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
587
592
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
588
593
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
589
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
590
594
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
591
595
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
592
596
  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
@@ -595,7 +599,11 @@
595
599
  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
596
600
  --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
597
601
  --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
602
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
598
603
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
604
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
605
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
606
+ --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
599
607
  --utrecht-map-marker-border-color: var(--utrecht-color-white);
600
608
  --utrecht-map-marker-color: var(--utrecht-color-white);
601
609
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -619,8 +627,8 @@
619
627
  --utrecht-link-placeholder-color: var(--utrecht-color-grey-40);
620
628
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
621
629
  --utrecht-link-color: var(--utrecht-color-blue-35);
622
- --utrecht-link-social-color: var(--utrecht-color-white);
623
630
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
631
+ --utrecht-link-social-color: var(--utrecht-color-white);
624
632
  --utrecht-link-social-border-color: var(--utrecht-color-white);
625
633
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
626
634
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -917,6 +925,7 @@
917
925
  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
918
926
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
919
927
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
928
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
920
929
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
921
930
  --of-page-footer-fg: var(--utrecht-page-footer-color);
922
931
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -926,8 +935,8 @@
926
935
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
927
936
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
928
937
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
929
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
930
938
  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
939
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
931
940
  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
932
941
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
933
942
  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -937,6 +946,7 @@
937
946
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
938
947
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
939
948
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
949
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
940
950
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
941
951
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
942
952
  --utrecht-link-visited-color: var(--utrecht-link-color);
package/dist/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 21 Aug 2024 08:24:57 GMT
3
+ // Generated on Tue, 01 Oct 2024 19:52:18 GMT
4
4
 
5
5
  $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
6
6
  $denhaag-process-steps-sub-step-marker-size: 12px;
@@ -100,13 +100,14 @@ $utrecht-toptask-link-line-height: 1.2;
100
100
  $utrecht-toptask-link-font-size: 1rem;
101
101
  $utrecht-textbox-border-bottom-width: 3px;
102
102
  $utrecht-textarea-border-bottom-width: 3px;
103
- $utrecht-table-footer-sticky-border-block-start-width: 2px;
103
+ $utrecht-textarea-border-block-end-width: 3px;
104
104
  $utrecht-table-cell-icon-size: 1em;
105
105
  $utrecht-table-cell-padding-inline-start: 0.4em;
106
106
  $utrecht-table-cell-padding-inline-end: 0.4em;
107
107
  $utrecht-table-cell-padding-block-start: 0.5em;
108
108
  $utrecht-table-cell-padding-block-end: 0.5em;
109
109
  $utrecht-table-cell-line-height: 24px;
110
+ $utrecht-table-footer-sticky-border-block-start-width: 2px;
110
111
  $utrecht-table-header-sticky-border-block-end-width: 2px;
111
112
  $utrecht-table-caption-margin-block-end: 1em;
112
113
  $utrecht-table-caption-text-align: start;
@@ -122,10 +123,10 @@ $utrecht-search-bar-input-background-position-x: .5em;
122
123
  $utrecht-search-bar-button-hover-scale: 1;
123
124
  $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
124
125
  $utrecht-rich-text-confidant-margin-block-end: 0;
125
- $utrecht-radio-button-margin-inline-end: 12px;
126
126
  $utrecht-radio-button-border-radius: 0;
127
127
  $utrecht-radio-button-invalid-border-width: 2px;
128
128
  $utrecht-radio-button-icon-size: 42%;
129
+ $utrecht-radio-button-margin-inline-end: 12px;
129
130
  $utrecht-radio-button-size: 24px;
130
131
  $utrecht-radio-button-border-width: 2px;
131
132
  $utrecht-paragraph-margin-block-end: 0;
@@ -138,7 +139,6 @@ $utrecht-pagination-relative-link-padding-block-end: 0.5em;
138
139
  $utrecht-pagination-relative-link-padding-inline-start: 0.5em;
139
140
  $utrecht-pagination-relative-link-padding-inline-end: 0.5em;
140
141
  $utrecht-pagination-relative-link-border-width: 2px;
141
- $utrecht-pagination-page-link-border-color: transparent;
142
142
  $utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
143
143
  $utrecht-pagination-page-link-text-decoration: none;
144
144
  $utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -146,6 +146,7 @@ $utrecht-pagination-page-link-padding-block-end: 0.5em;
146
146
  $utrecht-pagination-page-link-padding-inline-start: 0.5em;
147
147
  $utrecht-pagination-page-link-padding-inline-end: 0.5em;
148
148
  $utrecht-pagination-page-link-border-width: 2px;
149
+ $utrecht-pagination-page-link-border-color: transparent;
149
150
  $utrecht-pagination-page-link-background-color: transparent;
150
151
  $utrecht-pagination-margin-block-end: 1em;
151
152
  $utrecht-pagination-margin-block-start: 0;
@@ -157,10 +158,10 @@ $utrecht-page-padding-block-start: 1.8em;
157
158
  $utrecht-page-max-inline-size: 1184px;
158
159
  $utrecht-page-margin-inline-end: 2em;
159
160
  $utrecht-page-margin-inline-start: 2em;
160
- $utrecht-page-header-padding-block-start: 1.8em;
161
- $utrecht-page-header-padding-inline-start: 2em;
162
161
  $utrecht-page-header-padding-inline-end: 2.4em;
162
+ $utrecht-page-header-padding-inline-start: 2em;
163
163
  $utrecht-page-header-padding-block-end: 1em;
164
+ $utrecht-page-header-padding-block-start: 1.8em;
164
165
  $utrecht-page-content-padding-block-end: 2em;
165
166
  $utrecht-page-content-padding-block-start: 2em;
166
167
  $utrecht-ordered-list-item-padding-inline-start: 0;
@@ -171,12 +172,14 @@ $utrecht-ordered-list-margin-block-end: 1em;
171
172
  $utrecht-ordered-list-margin-block-start: 0;
172
173
  $utrecht-number-data-negative-color: red;
173
174
  $utrecht-number-data-positive-color: green;
175
+ $utrecht-number-badge-padding-inline: 1ex; // Default inline padding color for badge components
176
+ $utrecht-number-badge-padding-block: 1ex; // Default block padding for badge components
174
177
  $utrecht-topnav-link-focus-text-decoration: none;
175
178
  $utrecht-topnav-link-focus-border-type: dotted;
176
179
  $utrecht-mapcontrolbutton-focus-text-decoration: none;
177
- $utrecht-mapcontrolbutton-border-radius: 2px;
178
180
  $utrecht-mapcontrolbutton-margin-inline-end: 0;
179
181
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
182
+ $utrecht-mapcontrolbutton-border-radius: 2px;
180
183
  $utrecht-map-marker-icon-size: 30px;
181
184
  $utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
182
185
  $utrecht-map-marker-border-width: 3px;
@@ -195,8 +198,8 @@ $utrecht-link-hover-text-decoration: underline;
195
198
  $utrecht-link-focus-text-decoration: none;
196
199
  $utrecht-link-text-underline-offset: 3px;
197
200
  $utrecht-link-text-decoration: underline;
198
- $utrecht-link-social-icon-size: 26px;
199
201
  $utrecht-link-social-hover-transform-scale: 1.1;
202
+ $utrecht-link-social-icon-size: 26px;
200
203
  $utrecht-link-social-size: 40px;
201
204
  $utrecht-link-social-border-width: 2px;
202
205
  $utrecht-link-list-icon-size: 14px;
@@ -234,8 +237,8 @@ $utrecht-form-label-font-size: 1em;
234
237
  $utrecht-form-fieldset-legend-line-height: 1.4;
235
238
  $utrecht-form-fieldset-legend-font-size: 1rem;
236
239
  $utrecht-form-field-invalid-border-inline-start-width: 3px;
237
- $utrecht-form-control-read-only-border-color: transparent;
238
240
  $utrecht-form-control-block-size: 42px;
241
+ $utrecht-form-control-read-only-border-color: transparent;
239
242
  $utrecht-form-control-padding-inline-start: 12px;
240
243
  $utrecht-form-control-padding-inline-end: 12px;
241
244
  $utrecht-form-control-padding-block-start: 8px;
@@ -250,8 +253,8 @@ $utrecht-drawer-max-inline-size: 320px;
250
253
  $utrecht-drawer-max-block-size: 240px;
251
254
  $utrecht-drawer-border-width: 1px;
252
255
  $utrecht-document-line-height: 1.4;
253
- $utrecht-data-list-rows-column-min-inline-size: 25ch;
254
256
  $utrecht-data-list-rows-column-inline-size: 80%;
257
+ $utrecht-data-list-rows-column-min-inline-size: 25ch;
255
258
  $utrecht-space-column-5xl: 64px; // Extra Large 5
256
259
  $utrecht-space-column-4xl: 48px; // Extra Large 4
257
260
  $utrecht-space-column-3xl: 32px; // Extra Large 3
@@ -439,9 +442,6 @@ $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
439
442
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
440
443
  $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
441
444
  $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
445
  $utrecht-table-row-alternate-even-color: $utrecht-color-black;
446
446
  $utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
447
447
  $utrecht-table-row-alternate-odd-color: $utrecht-color-black;
@@ -450,6 +450,9 @@ $utrecht-table-row-border-block-end-width: $utrecht-border-width-sm;
450
450
  $utrecht-table-row-border-block-end-color: $utrecht-color-grey-90;
451
451
  $utrecht-table-cell-selected-color: $utrecht-color-black;
452
452
  $utrecht-table-cell-selected-background-color: $utrecht-color-blue-90;
453
+ $utrecht-table-footer-sticky-border-block-start-color: $utrecht-color-red-40;
454
+ $utrecht-table-footer-sticky-color: $utrecht-color-black;
455
+ $utrecht-table-footer-sticky-background-color: $utrecht-color-white;
453
456
  $utrecht-table-header-sticky-border-block-end-color: $utrecht-color-red-40;
454
457
  $utrecht-table-header-sticky-color: $utrecht-color-black;
455
458
  $utrecht-table-header-sticky-background-color: $utrecht-color-white;
@@ -460,6 +463,8 @@ $utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-w
460
463
  $utrecht-table-margin-block-start: $utrecht-space-block-md;
461
464
  $utrecht-surface-color: $utrecht-color-grey-10;
462
465
  $utrecht-surface-background-color: $utrecht-color-grey-95;
466
+ $utrecht-spotlight-section-ok-background-color: $utrecht-color-green-90;
467
+ $utrecht-spotlight-section-error-background-color: $utrecht-color-red-95;
463
468
  $utrecht-spotlight-section-warning-background-color: $utrecht-color-yellow-80;
464
469
  $utrecht-spotlight-section-info-background-color: $utrecht-color-blue-90;
465
470
  $utrecht-spotlight-section-padding-inline-end: $utrecht-space-inline-md;
@@ -488,8 +493,8 @@ $utrecht-search-bar-dropdown-padding-block-start: $utrecht-space-block-xs;
488
493
  $utrecht-search-bar-dropdown-border-color: $utrecht-color-red-40;
489
494
  $utrecht-search-bar-input-padding-inline-start: $utrecht-space-inline-3xl;
490
495
  $utrecht-search-bar-input-border-color: $utrecht-color-red-40;
491
- $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
492
496
  $utrecht-search-bar-button-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
497
+ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
493
498
  $utrecht-search-bar-button-color: $utrecht-color-white;
494
499
  $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
495
500
  $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
@@ -499,8 +504,8 @@ $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
499
504
  $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
500
505
  $utrecht-radio-button-color: $utrecht-color-white;
501
506
  $utrecht-radio-button-disabled-color: $utrecht-color-white;
502
- $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
503
507
  $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
508
+ $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
504
509
  $utrecht-radio-button-focus-border-color: $utrecht-color-blue-40;
505
510
  $utrecht-radio-button-hover-background-color: $utrecht-color-blue-90;
506
511
  $utrecht-radio-button-checked-focus-border-color: $utrecht-color-blue-20;
@@ -508,8 +513,8 @@ $utrecht-radio-button-checked-hover-color: $utrecht-color-blue-90;
508
513
  $utrecht-radio-button-checked-hover-background-color: $utrecht-color-blue-40;
509
514
  $utrecht-radio-button-checked-active-color: $utrecht-color-blue-80;
510
515
  $utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
511
- $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
512
516
  $utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
517
+ $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
513
518
  $utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
514
519
  $utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
515
520
  $utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
@@ -522,12 +527,12 @@ $utrecht-paragraph-line-height: $utrecht-typography-line-height-md;
522
527
  $utrecht-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
523
528
  $utrecht-paragraph-font-size: $utrecht-typography-scale-md-font-size;
524
529
  $utrecht-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
525
- $utrecht-pagination-relative-link-border-color: $utrecht-color-blue-35;
526
530
  $utrecht-pagination-relative-link-hover-color: $utrecht-color-white;
527
531
  $utrecht-pagination-relative-link-hover-border-color: $utrecht-color-blue-35;
528
532
  $utrecht-pagination-relative-link-hover-background-color: $utrecht-color-blue-35;
529
533
  $utrecht-pagination-relative-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
530
534
  $utrecht-pagination-relative-link-color: $utrecht-color-blue-35;
535
+ $utrecht-pagination-relative-link-border-color: $utrecht-color-blue-35;
531
536
  $utrecht-pagination-relative-link-background-color: $utrecht-color-white;
532
537
  $utrecht-pagination-page-link-hover-color: $utrecht-color-white;
533
538
  $utrecht-pagination-page-link-hover-border-color: $utrecht-color-blue-35;
@@ -546,6 +551,9 @@ $utrecht-page-footer-padding-inline-end: $utrecht-space-inline-2xl;
546
551
  $utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
547
552
  $utrecht-page-footer-background-color: $utrecht-color-red-40;
548
553
  $utrecht-page-footer-color: $utrecht-color-white;
554
+ $utrecht-number-badge-font-size: $utrecht-typography-scale-md-font-size;
555
+ $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
549
557
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
550
558
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
551
559
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -573,18 +581,14 @@ $utrecht-nav-bar-color: $utrecht-color-black;
573
581
  $utrecht-nav-bar-background-color: $utrecht-color-white;
574
582
  $utrecht-mark-color: $utrecht-color-black;
575
583
  $utrecht-mark-background-color: $utrecht-color-yellow-60;
584
+ $utrecht-mapcontrolbutton-label-margin-inline-end: $utrecht-space-inline-xs;
585
+ $utrecht-mapcontrolbutton-label-margin-inline-start: $utrecht-space-inline-xs;
576
586
  $utrecht-mapcontrolbutton-hover-color: $utrecht-color-white;
577
587
  $utrecht-mapcontrolbutton-hover-background-color: $utrecht-color-grey-90;
578
588
  $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;
589
+ $utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
585
590
  $utrecht-mapcontrolbutton-disabled-border-color: $utrecht-color-grey-80;
586
591
  $utrecht-mapcontrolbutton-disabled-background-color: $utrecht-color-grey-90;
587
- $utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
588
592
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
589
593
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
590
594
  $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
@@ -593,7 +597,11 @@ $utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
593
597
  $utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
594
598
  $utrecht-mapcontrolbutton-min-inline-size: $utrecht-space-block-2xl;
595
599
  $utrecht-mapcontrolbutton-min-block-size: $utrecht-space-block-2xl;
600
+ $utrecht-mapcontrolbutton-color: $utrecht-color-grey-40;
596
601
  $utrecht-mapcontrolbutton-border-width: $utrecht-border-width-sm;
602
+ $utrecht-mapcontrolbutton-border-style: $utrecht-border-style-solid;
603
+ $utrecht-mapcontrolbutton-border-color: $utrecht-color-grey-40;
604
+ $utrecht-mapcontrolbutton-background-color: $utrecht-color-white;
597
605
  $utrecht-map-marker-border-color: $utrecht-color-white;
598
606
  $utrecht-map-marker-color: $utrecht-color-white;
599
607
  $utrecht-map-marker-background-color: $utrecht-color-blue-30;
@@ -617,8 +625,8 @@ $utrecht-listbox-background-color: $utrecht-color-white;
617
625
  $utrecht-link-placeholder-color: $utrecht-color-grey-40;
618
626
  $utrecht-link-focus-color: $utrecht-color-blue-40;
619
627
  $utrecht-link-color: $utrecht-color-blue-35;
620
- $utrecht-link-social-color: $utrecht-color-white;
621
628
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
629
+ $utrecht-link-social-color: $utrecht-color-white;
622
630
  $utrecht-link-social-border-color: $utrecht-color-white;
623
631
  $utrecht-link-social-background-color: $utrecht-color-red-40;
624
632
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
@@ -915,6 +923,7 @@ $utrecht-accordion-button-padding-block-start: $utrecht-space-block-xs;
915
923
  $utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
916
924
  $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
917
925
  $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
926
+ $utrecht-accordion-row-gap: $utrecht-space-block-xs;
918
927
  $of-progress-indicator-background-color: $utrecht-document-background-color;
919
928
  $of-page-footer-fg: $utrecht-page-footer-color;
920
929
  $of-page-footer-bg: $utrecht-page-footer-background-color;
@@ -924,8 +933,8 @@ $utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
924
933
  $utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
925
934
  $utrecht-toptask-link-color: $utrecht-button-primary-action-color;
926
935
  $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
936
  $utrecht-skip-link-focus-color: $utrecht-topnav-link-focus-color;
937
+ $utrecht-skip-link-focus-background-color: $utrecht-topnav-link-focus-background-color;
929
938
  $utrecht-skip-link-padding-inline-end: $utrecht-button-padding-inline-end;
930
939
  $utrecht-skip-link-padding-inline-start: $utrecht-button-padding-inline-start;
931
940
  $utrecht-skip-link-padding-block-end: $utrecht-button-padding-block-end;
@@ -935,6 +944,7 @@ $utrecht-skip-link-background-color: $utrecht-topnav-list-background-color;
935
944
  $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
936
945
  $utrecht-radio-button-background-color: $utrecht-form-control-background-color;
937
946
  $utrecht-paragraph-lead-color: $utrecht-document-color;
947
+ $utrecht-number-badge-border-radius: $utrecht-number-badge-font-size; // Default corner radius for badge components
938
948
  $utrecht-listbox-border-width: $utrecht-form-control-border-width;
939
949
  $utrecht-listbox-border-color: $utrecht-form-control-border-color;
940
950
  $utrecht-link-visited-color: $utrecht-link-color;