@utrecht/design-tokens 2.4.0 → 2.5.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 (63) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/_mixin-theme.scss +42 -14
  3. package/dist/_mixin.scss +42 -14
  4. package/dist/_variables.scss +42 -14
  5. package/dist/dark/_mixin-theme.scss +41 -13
  6. package/dist/dark/_mixin.scss +41 -13
  7. package/dist/dark/_variables.scss +41 -13
  8. package/dist/dark/index.cjs +42 -14
  9. package/dist/dark/index.css +41 -13
  10. package/dist/dark/index.d.ts +35 -7
  11. package/dist/dark/index.flat.json +40 -12
  12. package/dist/dark/index.json +909 -181
  13. package/dist/dark/index.mjs +41 -13
  14. package/dist/dark/index.tokens.json +123 -212
  15. package/dist/dark/list.json +909 -181
  16. package/dist/dark/list.mjs +909 -181
  17. package/dist/dark/property.css +19 -6
  18. package/dist/dark/root.css +40 -12
  19. package/dist/dark/theme-prince-xml.css +41 -13
  20. package/dist/dark/theme.css +40 -12
  21. package/dist/dark/tokens.cjs +842 -231
  22. package/dist/dark/tokens.d.ts +78 -106
  23. package/dist/dark/tokens.json +842 -231
  24. package/dist/dark/variables.cjs +42 -14
  25. package/dist/dark/variables.css +40 -12
  26. package/dist/dark/variables.d.ts +35 -7
  27. package/dist/dark/variables.json +40 -12
  28. package/dist/dark/variables.less +41 -13
  29. package/dist/dark/variables.mjs +41 -13
  30. package/dist/index.cjs +43 -15
  31. package/dist/index.css +83 -27
  32. package/dist/index.d.ts +35 -7
  33. package/dist/index.flat.json +41 -13
  34. package/dist/index.json +905 -177
  35. package/dist/index.mjs +42 -14
  36. package/dist/index.tokens.json +124 -213
  37. package/dist/list.json +905 -177
  38. package/dist/list.mjs +905 -177
  39. package/dist/property.css +19 -6
  40. package/dist/root.css +41 -13
  41. package/dist/theme-prince-xml.css +42 -14
  42. package/dist/theme.css +41 -13
  43. package/dist/tokens.cjs +844 -233
  44. package/dist/tokens.d.ts +78 -106
  45. package/dist/tokens.json +844 -233
  46. package/dist/variables.cjs +43 -15
  47. package/dist/variables.css +41 -13
  48. package/dist/variables.d.ts +35 -7
  49. package/dist/variables.json +41 -13
  50. package/dist/variables.less +42 -14
  51. package/dist/variables.mjs +42 -14
  52. package/package.json +1 -1
  53. package/src/component/signalen/signalen.tokens.json +17 -0
  54. package/src/component/utrecht/backdrop.tokens.json +1 -1
  55. package/src/component/utrecht/body.tokens.json +11 -0
  56. package/src/component/utrecht/link-list.tokens.json +3 -0
  57. package/src/component/utrecht/nav-bar.tokens.json +0 -2
  58. package/src/component/utrecht/page-body.tokens.json +19 -0
  59. package/src/component/utrecht/page-footer.tokens.json +6 -4
  60. package/src/component/utrecht/page-header.tokens.json +14 -4
  61. package/src/component/utrecht/page.tokens.json +2 -2
  62. package/src/component/utrecht/root.tokens.json +8 -0
  63. package/project.json +0 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 965bf7d: Update Backdrop background-color value
8
+
9
+ ## 2.5.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 882e10d: Add design tokens for `body`, `nav-bar`, `page-body`, `page-footer`, `page-header` and `root`.
14
+ - 3bc0dd6: Add some design tokens for the Signalen application.
15
+
3
16
  ## 2.4.0
4
17
 
5
18
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  @mixin utrecht-theme {
6
+ --signalen-progress-bar-border-radius: 4px;
6
7
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
7
8
  --nl-number-badge-padding-inline: 1ex;
8
9
  --nl-number-badge-padding-block: 1ex;
@@ -153,19 +154,35 @@
153
154
  --utrecht-pagination-page-link-background-color: transparent;
154
155
  --utrecht-pagination-margin-block-end: 1em;
155
156
  --utrecht-pagination-margin-block-start: 0;
156
- --utrecht-page-padding-inline-start: 2em;
157
+ --utrecht-page-padding-inline-start: 0;
157
158
  --utrecht-page-padding-block-end: 1em;
158
- --utrecht-page-padding-inline-end: 2em;
159
+ --utrecht-page-padding-inline-end: 0;
159
160
  --utrecht-page-padding-block-start: 1.8em;
160
161
  --utrecht-page-max-inline-size: 1184px;
161
162
  --utrecht-page-margin-inline-end: 2em;
162
163
  --utrecht-page-margin-inline-start: 2em;
163
- --utrecht-page-header-padding-inline-end: 2.4em;
164
- --utrecht-page-header-padding-inline-start: 2em;
165
- --utrecht-page-header-padding-block-end: 1em;
166
- --utrecht-page-header-padding-block-start: 1.8em;
164
+ --utrecht-page-header-content-padding-inline: 2em;
165
+ --utrecht-page-header-content-max-inline-size: 1184px;
166
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
167
+ --utrecht-page-header-content-padding-inline-start: 2em;
168
+ --utrecht-page-header-content-padding-block-end: 1em;
169
+ --utrecht-page-header-content-padding-block-start: 1.8em;
170
+ --utrecht-page-header-padding-inline-end: 0;
171
+ --utrecht-page-header-padding-inline-start: 0;
172
+ --utrecht-page-header-padding-block-end: 0;
173
+ --utrecht-page-header-padding-block-start: 0;
174
+ --utrecht-page-footer-content-max-inline-size: 1184px;
167
175
  --utrecht-page-content-padding-block-end: 2em;
168
176
  --utrecht-page-content-padding-block-start: 2em;
177
+ --utrecht-page-body-padding-block-start: 0;
178
+ --utrecht-page-body-padding-block-end: 0;
179
+ --utrecht-page-body-padding-inline-start: 0;
180
+ --utrecht-page-body-padding-inline-end: 0;
181
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
182
+ --utrecht-page-body-content-max-inline-size: 1184px;
183
+ --utrecht-page-body-content-padding-inline-start: 2em;
184
+ --utrecht-page-body-content-padding-block-end: 1em;
185
+ --utrecht-page-body-content-padding-block-start: 0;
169
186
  --utrecht-ordered-list-item-padding-inline-start: 0;
170
187
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
171
188
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -202,6 +219,7 @@
202
219
  --utrecht-link-social-icon-size: 26px;
203
220
  --utrecht-link-social-size: 40px;
204
221
  --utrecht-link-social-border-width: 2px;
222
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
205
223
  --utrecht-link-list-icon-size: 14px;
206
224
  --utrecht-link-list-link-text-decoration: none;
207
225
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -360,6 +378,7 @@
360
378
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
361
379
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
362
380
  --utrecht-breadcrumb-nav-min-block-size: 34px;
381
+ --utrecht-body-line-height: 1.4;
363
382
  --utrecht-blockquote-margin-block-end: 1.6em;
364
383
  --utrecht-blockquote-margin-block-start: 1.6em;
365
384
  --utrecht-blockquote-margin-inline-end: 1.6em;
@@ -369,6 +388,7 @@
369
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
370
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
371
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
372
392
  --utrecht-article-max-inline-size: 780px;
373
393
  --utrecht-alert-icon-inset-block-start: 6px;
374
394
  --utrecht-alert-icon-size: 24px;
@@ -532,11 +552,12 @@
532
552
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
533
553
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
534
554
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
555
+ --utrecht-root-color: var(--utrecht-color-grey-10);
556
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
535
557
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
536
558
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
537
559
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
538
560
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
539
- --utrecht-radio-button-color: var(--utrecht-color-white);
540
561
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
541
562
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
542
563
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -550,6 +571,7 @@
550
571
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
551
572
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
552
573
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
574
+ --utrecht-radio-button-color: var(--utrecht-color-white);
553
575
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
554
576
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
555
577
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -572,13 +594,16 @@
572
594
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
573
595
  --utrecht-page-color: var(--utrecht-color-black);
574
596
  --utrecht-page-background-color: var(--utrecht-color-white);
575
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
576
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
577
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
578
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
597
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
598
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
599
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
600
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
601
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
579
602
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
580
603
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
581
604
  --utrecht-page-footer-color: var(--utrecht-color-white);
605
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
606
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
582
607
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
583
608
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
584
609
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
@@ -604,8 +629,6 @@
604
629
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
605
630
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
606
631
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
607
- --utrecht-nav-bar-color: var(--utrecht-color-black);
608
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
609
632
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
610
633
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
611
634
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -875,6 +898,10 @@
875
898
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
876
899
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
877
900
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
901
+ --utrecht-body-color: var(--utrecht-color-black);
902
+ --utrecht-body-background-color: var(--utrecht-color-white);
903
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
904
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
878
905
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
879
906
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
880
907
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
@@ -886,7 +913,6 @@
886
913
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
887
914
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
888
915
  --utrecht-backdrop-color: var(--utrecht-color-black);
889
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
890
916
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
891
917
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
892
918
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
@@ -931,6 +957,8 @@
931
957
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
932
958
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
933
959
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
960
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
961
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
934
962
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
935
963
  --of-page-footer-fg: var(--utrecht-page-footer-color);
936
964
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
package/dist/_mixin.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  @mixin utrecht-theme {
6
+ --signalen-progress-bar-border-radius: 4px;
6
7
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
7
8
  --nl-number-badge-padding-inline: 1ex;
8
9
  --nl-number-badge-padding-block: 1ex;
@@ -153,19 +154,35 @@
153
154
  --utrecht-pagination-page-link-background-color: transparent;
154
155
  --utrecht-pagination-margin-block-end: 1em;
155
156
  --utrecht-pagination-margin-block-start: 0;
156
- --utrecht-page-padding-inline-start: 2em;
157
+ --utrecht-page-padding-inline-start: 0;
157
158
  --utrecht-page-padding-block-end: 1em;
158
- --utrecht-page-padding-inline-end: 2em;
159
+ --utrecht-page-padding-inline-end: 0;
159
160
  --utrecht-page-padding-block-start: 1.8em;
160
161
  --utrecht-page-max-inline-size: 1184px;
161
162
  --utrecht-page-margin-inline-end: 2em;
162
163
  --utrecht-page-margin-inline-start: 2em;
163
- --utrecht-page-header-padding-inline-end: 2.4em;
164
- --utrecht-page-header-padding-inline-start: 2em;
165
- --utrecht-page-header-padding-block-end: 1em;
166
- --utrecht-page-header-padding-block-start: 1.8em;
164
+ --utrecht-page-header-content-padding-inline: 2em;
165
+ --utrecht-page-header-content-max-inline-size: 1184px;
166
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
167
+ --utrecht-page-header-content-padding-inline-start: 2em;
168
+ --utrecht-page-header-content-padding-block-end: 1em;
169
+ --utrecht-page-header-content-padding-block-start: 1.8em;
170
+ --utrecht-page-header-padding-inline-end: 0;
171
+ --utrecht-page-header-padding-inline-start: 0;
172
+ --utrecht-page-header-padding-block-end: 0;
173
+ --utrecht-page-header-padding-block-start: 0;
174
+ --utrecht-page-footer-content-max-inline-size: 1184px;
167
175
  --utrecht-page-content-padding-block-end: 2em;
168
176
  --utrecht-page-content-padding-block-start: 2em;
177
+ --utrecht-page-body-padding-block-start: 0;
178
+ --utrecht-page-body-padding-block-end: 0;
179
+ --utrecht-page-body-padding-inline-start: 0;
180
+ --utrecht-page-body-padding-inline-end: 0;
181
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
182
+ --utrecht-page-body-content-max-inline-size: 1184px;
183
+ --utrecht-page-body-content-padding-inline-start: 2em;
184
+ --utrecht-page-body-content-padding-block-end: 1em;
185
+ --utrecht-page-body-content-padding-block-start: 0;
169
186
  --utrecht-ordered-list-item-padding-inline-start: 0;
170
187
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
171
188
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -202,6 +219,7 @@
202
219
  --utrecht-link-social-icon-size: 26px;
203
220
  --utrecht-link-social-size: 40px;
204
221
  --utrecht-link-social-border-width: 2px;
222
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
205
223
  --utrecht-link-list-icon-size: 14px;
206
224
  --utrecht-link-list-link-text-decoration: none;
207
225
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -360,6 +378,7 @@
360
378
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
361
379
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
362
380
  --utrecht-breadcrumb-nav-min-block-size: 34px;
381
+ --utrecht-body-line-height: 1.4;
363
382
  --utrecht-blockquote-margin-block-end: 1.6em;
364
383
  --utrecht-blockquote-margin-block-start: 1.6em;
365
384
  --utrecht-blockquote-margin-inline-end: 1.6em;
@@ -369,6 +388,7 @@
369
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
370
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
371
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
372
392
  --utrecht-article-max-inline-size: 780px;
373
393
  --utrecht-alert-icon-inset-block-start: 6px;
374
394
  --utrecht-alert-icon-size: 24px;
@@ -532,11 +552,12 @@
532
552
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
533
553
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
534
554
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
555
+ --utrecht-root-color: var(--utrecht-color-grey-10);
556
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
535
557
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
536
558
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
537
559
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
538
560
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
539
- --utrecht-radio-button-color: var(--utrecht-color-white);
540
561
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
541
562
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
542
563
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -550,6 +571,7 @@
550
571
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
551
572
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
552
573
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
574
+ --utrecht-radio-button-color: var(--utrecht-color-white);
553
575
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
554
576
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
555
577
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -572,13 +594,16 @@
572
594
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
573
595
  --utrecht-page-color: var(--utrecht-color-black);
574
596
  --utrecht-page-background-color: var(--utrecht-color-white);
575
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
576
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
577
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
578
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
597
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
598
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
599
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
600
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
601
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
579
602
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
580
603
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
581
604
  --utrecht-page-footer-color: var(--utrecht-color-white);
605
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
606
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
582
607
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
583
608
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
584
609
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
@@ -604,8 +629,6 @@
604
629
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
605
630
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
606
631
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
607
- --utrecht-nav-bar-color: var(--utrecht-color-black);
608
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
609
632
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
610
633
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
611
634
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -875,6 +898,10 @@
875
898
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
876
899
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
877
900
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
901
+ --utrecht-body-color: var(--utrecht-color-black);
902
+ --utrecht-body-background-color: var(--utrecht-color-white);
903
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
904
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
878
905
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
879
906
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
880
907
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
@@ -886,7 +913,6 @@
886
913
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
887
914
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
888
915
  --utrecht-backdrop-color: var(--utrecht-color-black);
889
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
890
916
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
891
917
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
892
918
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
@@ -931,6 +957,8 @@
931
957
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
932
958
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
933
959
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
960
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
961
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
934
962
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
935
963
  --of-page-footer-fg: var(--utrecht-page-footer-color);
936
964
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
package/dist/_variables.scss CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
+ $signalen-progress-bar-border-radius: 4px;
4
5
  $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
5
6
  $nl-number-badge-padding-inline: 1ex;
6
7
  $nl-number-badge-padding-block: 1ex;
@@ -151,19 +152,35 @@ $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;
154
- $utrecht-page-padding-inline-start: 2em;
155
+ $utrecht-page-padding-inline-start: 0;
155
156
  $utrecht-page-padding-block-end: 1em;
156
- $utrecht-page-padding-inline-end: 2em;
157
+ $utrecht-page-padding-inline-end: 0;
157
158
  $utrecht-page-padding-block-start: 1.8em;
158
159
  $utrecht-page-max-inline-size: 1184px;
159
160
  $utrecht-page-margin-inline-end: 2em;
160
161
  $utrecht-page-margin-inline-start: 2em;
161
- $utrecht-page-header-padding-inline-end: 2.4em;
162
- $utrecht-page-header-padding-inline-start: 2em;
163
- $utrecht-page-header-padding-block-end: 1em;
164
- $utrecht-page-header-padding-block-start: 1.8em;
162
+ $utrecht-page-header-content-padding-inline: 2em;
163
+ $utrecht-page-header-content-max-inline-size: 1184px;
164
+ $utrecht-page-header-content-padding-inline-end: 2.4em;
165
+ $utrecht-page-header-content-padding-inline-start: 2em;
166
+ $utrecht-page-header-content-padding-block-end: 1em;
167
+ $utrecht-page-header-content-padding-block-start: 1.8em;
168
+ $utrecht-page-header-padding-inline-end: 0;
169
+ $utrecht-page-header-padding-inline-start: 0;
170
+ $utrecht-page-header-padding-block-end: 0;
171
+ $utrecht-page-header-padding-block-start: 0;
172
+ $utrecht-page-footer-content-max-inline-size: 1184px;
165
173
  $utrecht-page-content-padding-block-end: 2em;
166
174
  $utrecht-page-content-padding-block-start: 2em;
175
+ $utrecht-page-body-padding-block-start: 0;
176
+ $utrecht-page-body-padding-block-end: 0;
177
+ $utrecht-page-body-padding-inline-start: 0;
178
+ $utrecht-page-body-padding-inline-end: 0;
179
+ $utrecht-page-body-content-padding-inline-end: 2.4em;
180
+ $utrecht-page-body-content-max-inline-size: 1184px;
181
+ $utrecht-page-body-content-padding-inline-start: 2em;
182
+ $utrecht-page-body-content-padding-block-end: 1em;
183
+ $utrecht-page-body-content-padding-block-start: 0;
167
184
  $utrecht-ordered-list-item-padding-inline-start: 0;
168
185
  $utrecht-ordered-list-item-margin-block-end: 0.25em;
169
186
  $utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -200,6 +217,7 @@ $utrecht-link-social-hover-transform-scale: 1.1;
200
217
  $utrecht-link-social-icon-size: 26px;
201
218
  $utrecht-link-social-size: 40px;
202
219
  $utrecht-link-social-border-width: 2px;
220
+ $utrecht-link-list-icon-inset-block-start: 0.15em;
203
221
  $utrecht-link-list-icon-size: 14px;
204
222
  $utrecht-link-list-link-text-decoration: none;
205
223
  $utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -358,6 +376,7 @@ $utrecht-breadcrumb-nav-link-text-decoration: none;
358
376
  $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
359
377
  $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
360
378
  $utrecht-breadcrumb-nav-min-block-size: 34px;
379
+ $utrecht-body-line-height: 1.4;
361
380
  $utrecht-blockquote-margin-block-end: 1.6em;
362
381
  $utrecht-blockquote-margin-block-start: 1.6em;
363
382
  $utrecht-blockquote-margin-inline-end: 1.6em;
@@ -367,6 +386,7 @@ $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge co
367
386
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
368
387
  $utrecht-backdrop-fade-in-animation-duration: 400ms;
369
388
  $utrecht-backdrop-opacity: 0.8;
389
+ $utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
370
390
  $utrecht-article-max-inline-size: 780px;
371
391
  $utrecht-alert-icon-inset-block-start: 6px;
372
392
  $utrecht-alert-icon-size: 24px;
@@ -530,11 +550,12 @@ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
530
550
  $utrecht-search-bar-button-color: $utrecht-color-white;
531
551
  $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
532
552
  $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
553
+ $utrecht-root-color: $utrecht-color-grey-10;
554
+ $utrecht-root-background-color: $utrecht-color-grey-95;
533
555
  $utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
534
556
  $utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
535
557
  $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
536
558
  $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
537
- $utrecht-radio-button-color: $utrecht-color-white;
538
559
  $utrecht-radio-button-disabled-color: $utrecht-color-white;
539
560
  $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
540
561
  $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
@@ -548,6 +569,7 @@ $utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
548
569
  $utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
549
570
  $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
550
571
  $utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
572
+ $utrecht-radio-button-color: $utrecht-color-white;
551
573
  $utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
552
574
  $utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
553
575
  $utrecht-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
@@ -570,13 +592,16 @@ $utrecht-pagination-page-link-color: $utrecht-color-blue-35;
570
592
  $utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
571
593
  $utrecht-page-color: $utrecht-color-black;
572
594
  $utrecht-page-background-color: $utrecht-color-white;
573
- $utrecht-page-footer-padding-block-start: $utrecht-space-block-3xl;
574
- $utrecht-page-footer-padding-block-end: $utrecht-space-block-3xl;
575
- $utrecht-page-footer-padding-inline-start: $utrecht-space-inline-2xl;
576
- $utrecht-page-footer-padding-inline-end: $utrecht-space-inline-2xl;
595
+ $utrecht-page-header-content-color: $utrecht-color-black;
596
+ $utrecht-page-header-content-background-color: $utrecht-color-white;
597
+ $utrecht-page-footer-content-padding-inline: $utrecht-space-inline-2xl;
598
+ $utrecht-page-footer-content-padding-block-start: $utrecht-space-block-3xl;
599
+ $utrecht-page-footer-content-padding-block-end: $utrecht-space-block-3xl;
577
600
  $utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
578
601
  $utrecht-page-footer-background-color: $utrecht-color-red-40;
579
602
  $utrecht-page-footer-color: $utrecht-color-white;
603
+ $utrecht-page-body-content-color: $utrecht-color-black;
604
+ $utrecht-page-body-content-background-color: $utrecht-color-white;
580
605
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
581
606
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
582
607
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
@@ -602,8 +627,6 @@ $utrecht-nav-bar-link-padding-inline-end: $utrecht-space-inline-md;
602
627
  $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
603
628
  $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
604
629
  $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
605
- $utrecht-nav-bar-color: $utrecht-color-black;
606
- $utrecht-nav-bar-background-color: $utrecht-color-white;
607
630
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
608
631
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
609
632
  $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
@@ -873,6 +896,10 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
873
896
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
874
897
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
875
898
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
899
+ $utrecht-body-color: $utrecht-color-black;
900
+ $utrecht-body-background-color: $utrecht-color-white;
901
+ $utrecht-body-font-size: $utrecht-typography-scale-md-font-size;
902
+ $utrecht-body-font-family: $utrecht-typography-sans-serif-font-family;
876
903
  $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
877
904
  $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
878
905
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
@@ -884,7 +911,6 @@ $utrecht-badge-counter-font-size: $utrecht-typography-scale-md-font-size;
884
911
  $utrecht-badge-counter-color: $utrecht-color-white; // Default text color for badge components
885
912
  $utrecht-badge-counter-background-color: $utrecht-color-red-40; // Default background color for badge components
886
913
  $utrecht-backdrop-color: $utrecht-color-black;
887
- $utrecht-backdrop-background-color: $utrecht-color-white;
888
914
  $utrecht-alert-icon-ok-color: $utrecht-color-green-40;
889
915
  $utrecht-alert-icon-warning-color: $utrecht-color-yellow-40;
890
916
  $utrecht-alert-icon-error-color: $utrecht-color-red-40;
@@ -929,6 +955,8 @@ $utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
929
955
  $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
930
956
  $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
931
957
  $utrecht-accordion-row-gap: $utrecht-space-block-xs;
958
+ $signalen-modal-dialog-color: $utrecht-body-color;
959
+ $signalen-modal-dialog-background-color: $utrecht-body-background-color;
932
960
  $of-progress-indicator-background-color: $utrecht-document-background-color;
933
961
  $of-page-footer-fg: $utrecht-page-footer-color;
934
962
  $of-page-footer-bg: $utrecht-page-footer-background-color;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  @mixin utrecht-theme--dark {
6
+ --signalen-progress-bar-border-radius: 4px;
6
7
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
7
8
  --nl-number-badge-padding-inline: 1ex;
8
9
  --nl-number-badge-padding-block: 1ex;
@@ -153,19 +154,35 @@
153
154
  --utrecht-pagination-page-link-background-color: transparent;
154
155
  --utrecht-pagination-margin-block-end: 1em;
155
156
  --utrecht-pagination-margin-block-start: 0;
156
- --utrecht-page-padding-inline-start: 2em;
157
+ --utrecht-page-padding-inline-start: 0;
157
158
  --utrecht-page-padding-block-end: 1em;
158
- --utrecht-page-padding-inline-end: 2em;
159
+ --utrecht-page-padding-inline-end: 0;
159
160
  --utrecht-page-padding-block-start: 1.8em;
160
161
  --utrecht-page-max-inline-size: 1184px;
161
162
  --utrecht-page-margin-inline-end: 2em;
162
163
  --utrecht-page-margin-inline-start: 2em;
163
- --utrecht-page-header-padding-inline-end: 2.4em;
164
- --utrecht-page-header-padding-inline-start: 2em;
165
- --utrecht-page-header-padding-block-end: 1em;
166
- --utrecht-page-header-padding-block-start: 1.8em;
164
+ --utrecht-page-header-content-padding-inline: 2em;
165
+ --utrecht-page-header-content-max-inline-size: 1184px;
166
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
167
+ --utrecht-page-header-content-padding-inline-start: 2em;
168
+ --utrecht-page-header-content-padding-block-end: 1em;
169
+ --utrecht-page-header-content-padding-block-start: 1.8em;
170
+ --utrecht-page-header-padding-inline-end: 0;
171
+ --utrecht-page-header-padding-inline-start: 0;
172
+ --utrecht-page-header-padding-block-end: 0;
173
+ --utrecht-page-header-padding-block-start: 0;
174
+ --utrecht-page-footer-content-max-inline-size: 1184px;
167
175
  --utrecht-page-content-padding-block-end: 2em;
168
176
  --utrecht-page-content-padding-block-start: 2em;
177
+ --utrecht-page-body-padding-block-start: 0;
178
+ --utrecht-page-body-padding-block-end: 0;
179
+ --utrecht-page-body-padding-inline-start: 0;
180
+ --utrecht-page-body-padding-inline-end: 0;
181
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
182
+ --utrecht-page-body-content-max-inline-size: 1184px;
183
+ --utrecht-page-body-content-padding-inline-start: 2em;
184
+ --utrecht-page-body-content-padding-block-end: 1em;
185
+ --utrecht-page-body-content-padding-block-start: 0;
169
186
  --utrecht-ordered-list-item-padding-inline-start: 0;
170
187
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
171
188
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -202,6 +219,7 @@
202
219
  --utrecht-link-social-icon-size: 26px;
203
220
  --utrecht-link-social-size: 40px;
204
221
  --utrecht-link-social-border-width: 2px;
222
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
205
223
  --utrecht-link-list-icon-size: 14px;
206
224
  --utrecht-link-list-link-text-decoration: none;
207
225
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -361,6 +379,7 @@
361
379
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
362
380
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
363
381
  --utrecht-breadcrumb-nav-min-block-size: 34px;
382
+ --utrecht-body-line-height: 1.4;
364
383
  --utrecht-blockquote-margin-block-end: 1.6em;
365
384
  --utrecht-blockquote-margin-block-start: 1.6em;
366
385
  --utrecht-blockquote-margin-inline-end: 1.6em;
@@ -537,11 +556,12 @@
537
556
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
538
557
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
539
558
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
559
+ --utrecht-root-color: var(--utrecht-color-grey-10);
560
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
540
561
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
541
562
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
542
563
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
543
564
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
544
- --utrecht-radio-button-color: var(--utrecht-color-white);
545
565
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
546
566
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
547
567
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -555,6 +575,7 @@
555
575
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
556
576
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
557
577
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
578
+ --utrecht-radio-button-color: var(--utrecht-color-white);
558
579
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
559
580
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
560
581
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -577,13 +598,16 @@
577
598
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
578
599
  --utrecht-page-color: var(--utrecht-color-grey-95);
579
600
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
580
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
581
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
582
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
583
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
601
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
602
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
603
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
604
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
605
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
584
606
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
585
607
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
586
608
  --utrecht-page-footer-color: var(--utrecht-color-white);
609
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
610
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
587
611
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
588
612
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
589
613
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
@@ -609,8 +633,6 @@
609
633
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
610
634
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
611
635
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
612
- --utrecht-nav-bar-color: var(--utrecht-color-black);
613
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
614
636
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
615
637
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
616
638
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -876,6 +898,10 @@
876
898
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
877
899
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
878
900
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
901
+ --utrecht-body-color: var(--utrecht-color-black);
902
+ --utrecht-body-background-color: var(--utrecht-color-white);
903
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
904
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
879
905
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
880
906
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
881
907
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
@@ -932,6 +958,8 @@
932
958
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
933
959
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
934
960
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
961
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
962
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
935
963
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
936
964
  --of-page-footer-fg: var(--utrecht-page-footer-color);
937
965
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);