@utrecht/design-tokens 2.4.0 → 2.5.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 (62) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/_mixin-theme.scss +41 -13
  3. package/dist/_mixin.scss +41 -13
  4. package/dist/_variables.scss +41 -13
  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 +42 -14
  31. package/dist/index.css +82 -26
  32. package/dist/index.d.ts +35 -7
  33. package/dist/index.flat.json +40 -12
  34. package/dist/index.json +903 -175
  35. package/dist/index.mjs +41 -13
  36. package/dist/index.tokens.json +123 -212
  37. package/dist/list.json +903 -175
  38. package/dist/list.mjs +903 -175
  39. package/dist/property.css +19 -6
  40. package/dist/root.css +40 -12
  41. package/dist/theme-prince-xml.css +41 -13
  42. package/dist/theme.css +40 -12
  43. package/dist/tokens.cjs +842 -231
  44. package/dist/tokens.d.ts +78 -106
  45. package/dist/tokens.json +842 -231
  46. package/dist/variables.cjs +42 -14
  47. package/dist/variables.css +40 -12
  48. package/dist/variables.d.ts +35 -7
  49. package/dist/variables.json +40 -12
  50. package/dist/variables.less +41 -13
  51. package/dist/variables.mjs +41 -13
  52. package/package.json +1 -1
  53. package/src/component/signalen/signalen.tokens.json +17 -0
  54. package/src/component/utrecht/body.tokens.json +11 -0
  55. package/src/component/utrecht/link-list.tokens.json +3 -0
  56. package/src/component/utrecht/nav-bar.tokens.json +0 -2
  57. package/src/component/utrecht/page-body.tokens.json +19 -0
  58. package/src/component/utrecht/page-footer.tokens.json +6 -4
  59. package/src/component/utrecht/page-header.tokens.json +14 -4
  60. package/src/component/utrecht/page.tokens.json +2 -2
  61. package/src/component/utrecht/root.tokens.json +8 -0
  62. package/project.json +0 -25
package/dist/property.css CHANGED
@@ -109,6 +109,8 @@
109
109
  @property --utrecht-blockquote-content-font-size { syntax: '<length>'; inherits: true; }
110
110
  @property --utrecht-blockquote-margin-inline-end { syntax: '<length>'; inherits: true; }
111
111
  @property --utrecht-blockquote-margin-inline-start { syntax: '<length>'; inherits: true; }
112
+ @property --utrecht-body-font-size { syntax: '<length>'; inherits: true; }
113
+ @property --utrecht-body-line-height { syntax: '<length> | <number>'; inherits: true; }
112
114
  @property --utrecht-breadcrumb-nav-arrows-link-background-color { syntax: '<color>'; inherits: true; }
113
115
  @property --utrecht-breadcrumb-nav-arrows-link-focus-background-color { syntax: '<color>'; inherits: true; }
114
116
  @property --utrecht-breadcrumb-nav-font-size { syntax: '<length>'; inherits: true; }
@@ -435,6 +437,7 @@
435
437
  @property --utrecht-link-hover-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
436
438
  @property --utrecht-link-hover-text-decoration-thickness { syntax: '<length>'; inherits: true; }
437
439
  @property --utrecht-link-icon-size { syntax: '<length>'; inherits: true; }
440
+ @property --utrecht-link-list-icon-inset-block-start { syntax: '<length>'; inherits: true; }
438
441
  @property --utrecht-link-list-icon-size { syntax: '<length>'; inherits: true; }
439
442
  @property --utrecht-link-list-link-column-gap { syntax: '<length>'; inherits: true; }
440
443
  @property --utrecht-link-list-link-font-weight { syntax: '<number>'; inherits: true; }
@@ -495,8 +498,6 @@
495
498
  @property --utrecht-mapcontrolbutton-min-inline-size { syntax: '<length>'; inherits: true; }
496
499
  @property --utrecht-mark-background-color { syntax: '<color>'; inherits: true; }
497
500
  @property --utrecht-mark-color { syntax: '<color>'; inherits: true; }
498
- @property --utrecht-nav-bar-background-color { syntax: '<color>'; inherits: true; }
499
- @property --utrecht-nav-bar-color { syntax: '<color>'; inherits: true; }
500
501
  @property --utrecht-nav-bar-content-max-inline-size { syntax: '<length>'; inherits: true; }
501
502
  @property --utrecht-nav-bar-link-padding-block-end { syntax: '<length>'; inherits: true; }
502
503
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
@@ -517,16 +518,25 @@
517
518
  @property --utrecht-ordered-list-margin-block-start { syntax: '<length>'; inherits: true; }
518
519
  @property --utrecht-ordered-list-padding-inline-start { syntax: '<length>'; inherits: true; }
519
520
  @property --utrecht-page-background-color { syntax: '<color>'; inherits: true; }
521
+ @property --utrecht-page-body-content-background-color { syntax: '<color>'; inherits: true; }
522
+ @property --utrecht-page-body-content-color { syntax: '<color>'; inherits: true; }
523
+ @property --utrecht-page-body-content-padding-block-end { syntax: '<length>'; inherits: true; }
524
+ @property --utrecht-page-body-content-padding-block-start { syntax: '<length>'; inherits: true; }
525
+ @property --utrecht-page-body-content-padding-inline-start { syntax: '<length>'; inherits: true; }
520
526
  @property --utrecht-page-color { syntax: '<color>'; inherits: true; }
521
527
  @property --utrecht-page-content-padding-block-end { syntax: '<length>'; inherits: true; }
522
528
  @property --utrecht-page-content-padding-block-start { syntax: '<length>'; inherits: true; }
523
529
  @property --utrecht-page-footer-background-color { syntax: '<color>'; inherits: true; }
524
530
  @property --utrecht-page-footer-background-image { syntax: '<url> | *'; inherits: true; }
525
531
  @property --utrecht-page-footer-color { syntax: '<color>'; inherits: true; }
526
- @property --utrecht-page-footer-padding-block-end { syntax: '<length>'; inherits: true; }
527
- @property --utrecht-page-footer-padding-block-start { syntax: '<length>'; inherits: true; }
528
- @property --utrecht-page-footer-padding-inline-end { syntax: '<length>'; inherits: true; }
529
- @property --utrecht-page-footer-padding-inline-start { syntax: '<length>'; inherits: true; }
532
+ @property --utrecht-page-footer-content-padding-block-end { syntax: '<length>'; inherits: true; }
533
+ @property --utrecht-page-footer-content-padding-block-start { syntax: '<length>'; inherits: true; }
534
+ @property --utrecht-page-header-content-background-color { syntax: '<color>'; inherits: true; }
535
+ @property --utrecht-page-header-content-color { syntax: '<color>'; inherits: true; }
536
+ @property --utrecht-page-header-content-padding-block-end { syntax: '<length>'; inherits: true; }
537
+ @property --utrecht-page-header-content-padding-block-start { syntax: '<length>'; inherits: true; }
538
+ @property --utrecht-page-header-content-padding-inline-end { syntax: '<length>'; inherits: true; }
539
+ @property --utrecht-page-header-content-padding-inline-start { syntax: '<length>'; inherits: true; }
530
540
  @property --utrecht-page-header-padding-block-end { syntax: '<length>'; inherits: true; }
531
541
  @property --utrecht-page-header-padding-block-start { syntax: '<length>'; inherits: true; }
532
542
  @property --utrecht-page-header-padding-inline-end { syntax: '<length>'; inherits: true; }
@@ -593,6 +603,7 @@
593
603
  @property --utrecht-radio-button-checked-focus-border-color { syntax: '<color>'; inherits: true; }
594
604
  @property --utrecht-radio-button-checked-hover-background-color { syntax: '<color>'; inherits: true; }
595
605
  @property --utrecht-radio-button-checked-hover-color { syntax: '<color>'; inherits: true; }
606
+ @property --utrecht-radio-button-color { syntax: '<color>'; inherits: true; }
596
607
  @property --utrecht-radio-button-disabled-background-color { syntax: '<color>'; inherits: true; }
597
608
  @property --utrecht-radio-button-disabled-border-color { syntax: '<color>'; inherits: true; }
598
609
  @property --utrecht-radio-button-disabled-color { syntax: '<color>'; inherits: true; }
@@ -608,6 +619,8 @@
608
619
  @property --utrecht-rich-text-confidant-margin-block-end { syntax: '<length>'; inherits: true; }
609
620
  @property --utrecht-rich-text-friend-margin-block-end { syntax: '<length>'; inherits: true; }
610
621
  @property --utrecht-rich-text-stranger-margin-block-end { syntax: '<length>'; inherits: true; }
622
+ @property --utrecht-root-background-color { syntax: '<color>'; inherits: true; }
623
+ @property --utrecht-root-color { syntax: '<color>'; inherits: true; }
611
624
  @property --utrecht-search-bar-button-background-color { syntax: '<color>'; inherits: true; }
612
625
  @property --utrecht-search-bar-button-border-color { syntax: '<length>'; inherits: true; }
613
626
  @property --utrecht-search-bar-button-color { syntax: '<color>'; inherits: true; }
package/dist/root.css CHANGED
@@ -137,19 +137,35 @@
137
137
  --utrecht-pagination-page-link-background-color: transparent;
138
138
  --utrecht-pagination-margin-block-start: 0;
139
139
  --utrecht-pagination-margin-block-end: 1em;
140
- --utrecht-page-padding-inline-start: 2em;
141
- --utrecht-page-padding-inline-end: 2em;
140
+ --utrecht-page-padding-inline-start: 0;
141
+ --utrecht-page-padding-inline-end: 0;
142
142
  --utrecht-page-padding-block-start: 1.8em;
143
143
  --utrecht-page-padding-block-end: 1em;
144
144
  --utrecht-page-max-inline-size: 1184px;
145
145
  --utrecht-page-margin-inline-start: 2em;
146
146
  --utrecht-page-margin-inline-end: 2em;
147
- --utrecht-page-header-padding-inline-start: 2em;
148
- --utrecht-page-header-padding-inline-end: 2.4em;
149
- --utrecht-page-header-padding-block-start: 1.8em;
150
- --utrecht-page-header-padding-block-end: 1em;
147
+ --utrecht-page-header-padding-inline-start: 0;
148
+ --utrecht-page-header-padding-inline-end: 0;
149
+ --utrecht-page-header-padding-block-start: 0;
150
+ --utrecht-page-header-padding-block-end: 0;
151
+ --utrecht-page-header-content-padding-inline-start: 2em;
152
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
153
+ --utrecht-page-header-content-padding-inline: 2em;
154
+ --utrecht-page-header-content-padding-block-start: 1.8em;
155
+ --utrecht-page-header-content-padding-block-end: 1em;
156
+ --utrecht-page-header-content-max-inline-size: 1184px;
157
+ --utrecht-page-footer-content-max-inline-size: 1184px;
151
158
  --utrecht-page-content-padding-block-start: 2em;
152
159
  --utrecht-page-content-padding-block-end: 2em;
160
+ --utrecht-page-body-padding-inline-start: 0;
161
+ --utrecht-page-body-padding-inline-end: 0;
162
+ --utrecht-page-body-padding-block-start: 0;
163
+ --utrecht-page-body-padding-block-end: 0;
164
+ --utrecht-page-body-content-padding-inline-start: 2em;
165
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
166
+ --utrecht-page-body-content-padding-block-start: 0;
167
+ --utrecht-page-body-content-padding-block-end: 1em;
168
+ --utrecht-page-body-content-max-inline-size: 1184px;
153
169
  --utrecht-ordered-list-padding-inline-start: 28.8px;
154
170
  --utrecht-ordered-list-margin-block-start: 0;
155
171
  --utrecht-ordered-list-margin-block-end: 1em;
@@ -182,6 +198,7 @@
182
198
  --utrecht-link-social-border-width: 2px;
183
199
  --utrecht-link-list-link-text-decoration: none;
184
200
  --utrecht-link-list-icon-size: 14px;
201
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
185
202
  --utrecht-link-icon-size: 1.2em;
186
203
  --utrecht-link-hover-text-decoration-thickness: 3px;
187
204
  --utrecht-link-hover-text-decoration: underline;
@@ -345,6 +362,7 @@
345
362
  --utrecht-border-radius-none: 0;
346
363
  --utrecht-border-radius-md: 4px;
347
364
  --utrecht-border-radius-lg: 8px;
365
+ --utrecht-body-line-height: 1.4;
348
366
  --utrecht-blockquote-margin-inline-start: 1.6em;
349
367
  --utrecht-blockquote-margin-inline-end: 1.6em;
350
368
  --utrecht-blockquote-margin-block-start: 1.6em;
@@ -370,6 +388,7 @@
370
388
  --utrecht-accordion-button-icon-size: 24px;
371
389
  --utrecht-accordion-button-hover-background-color: inherit;
372
390
  --utrecht-accordion-button-border-width: 0;
391
+ --signalen-progress-bar-border-radius: 4px;
373
392
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
374
393
  --nl-number-badge-padding-inline: 1ex;
375
394
  --nl-number-badge-padding-block: 1ex;
@@ -461,6 +480,8 @@
461
480
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
462
481
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
463
482
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
483
+ --utrecht-root-color: var(--utrecht-color-grey-10);
484
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
464
485
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
465
486
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
466
487
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
@@ -499,14 +520,17 @@
499
520
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
500
521
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
501
522
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
502
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
503
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
504
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
505
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
523
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
524
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
525
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
526
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
527
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
506
528
  --utrecht-page-footer-color: var(--utrecht-color-white);
507
529
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
508
530
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
509
531
  --utrecht-page-color: var(--utrecht-color-black);
532
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
533
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
510
534
  --utrecht-page-background-color: var(--utrecht-color-white);
511
535
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
512
536
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
@@ -515,8 +539,6 @@
515
539
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
516
540
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
517
541
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
518
- --utrecht-nav-bar-color: var(--utrecht-color-black);
519
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
520
542
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
521
543
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
522
544
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
@@ -788,6 +810,10 @@
788
810
  --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
789
811
  --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
790
812
  --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
813
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
814
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
815
+ --utrecht-body-color: var(--utrecht-color-black);
816
+ --utrecht-body-background-color: var(--utrecht-color-white);
791
817
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
792
818
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
793
819
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -1022,6 +1048,8 @@
1022
1048
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1023
1049
  --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1024
1050
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1051
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
1052
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1025
1053
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1026
1054
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1027
1055
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
package/dist/theme-prince-xml.css CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  .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;
@@ -532,11 +551,12 @@
532
551
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
533
552
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
534
553
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
554
+ --utrecht-root-color: var(--utrecht-color-grey-10);
555
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
535
556
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
536
557
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
537
558
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
538
559
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
539
- --utrecht-radio-button-color: var(--utrecht-color-white);
540
560
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
541
561
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
542
562
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -550,6 +570,7 @@
550
570
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
551
571
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
552
572
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
573
+ --utrecht-radio-button-color: var(--utrecht-color-white);
553
574
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
554
575
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
555
576
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -572,13 +593,16 @@
572
593
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
573
594
  --utrecht-page-color: var(--utrecht-color-black);
574
595
  --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);
596
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
597
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
598
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
599
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
600
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
579
601
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
580
602
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
581
603
  --utrecht-page-footer-color: var(--utrecht-color-white);
604
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
605
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
582
606
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
583
607
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
584
608
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
@@ -604,8 +628,6 @@
604
628
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
605
629
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
606
630
  --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
631
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
610
632
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
611
633
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -875,6 +897,10 @@
875
897
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
876
898
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
877
899
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
900
+ --utrecht-body-color: var(--utrecht-color-black);
901
+ --utrecht-body-background-color: var(--utrecht-color-white);
902
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
903
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
878
904
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
879
905
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
880
906
  --utrecht-blockquote-content-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/theme.css CHANGED
@@ -137,19 +137,35 @@
137
137
  --utrecht-pagination-page-link-background-color: transparent;
138
138
  --utrecht-pagination-margin-block-start: 0;
139
139
  --utrecht-pagination-margin-block-end: 1em;
140
- --utrecht-page-padding-inline-start: 2em;
141
- --utrecht-page-padding-inline-end: 2em;
140
+ --utrecht-page-padding-inline-start: 0;
141
+ --utrecht-page-padding-inline-end: 0;
142
142
  --utrecht-page-padding-block-start: 1.8em;
143
143
  --utrecht-page-padding-block-end: 1em;
144
144
  --utrecht-page-max-inline-size: 1184px;
145
145
  --utrecht-page-margin-inline-start: 2em;
146
146
  --utrecht-page-margin-inline-end: 2em;
147
- --utrecht-page-header-padding-inline-start: 2em;
148
- --utrecht-page-header-padding-inline-end: 2.4em;
149
- --utrecht-page-header-padding-block-start: 1.8em;
150
- --utrecht-page-header-padding-block-end: 1em;
147
+ --utrecht-page-header-padding-inline-start: 0;
148
+ --utrecht-page-header-padding-inline-end: 0;
149
+ --utrecht-page-header-padding-block-start: 0;
150
+ --utrecht-page-header-padding-block-end: 0;
151
+ --utrecht-page-header-content-padding-inline-start: 2em;
152
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
153
+ --utrecht-page-header-content-padding-inline: 2em;
154
+ --utrecht-page-header-content-padding-block-start: 1.8em;
155
+ --utrecht-page-header-content-padding-block-end: 1em;
156
+ --utrecht-page-header-content-max-inline-size: 1184px;
157
+ --utrecht-page-footer-content-max-inline-size: 1184px;
151
158
  --utrecht-page-content-padding-block-start: 2em;
152
159
  --utrecht-page-content-padding-block-end: 2em;
160
+ --utrecht-page-body-padding-inline-start: 0;
161
+ --utrecht-page-body-padding-inline-end: 0;
162
+ --utrecht-page-body-padding-block-start: 0;
163
+ --utrecht-page-body-padding-block-end: 0;
164
+ --utrecht-page-body-content-padding-inline-start: 2em;
165
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
166
+ --utrecht-page-body-content-padding-block-start: 0;
167
+ --utrecht-page-body-content-padding-block-end: 1em;
168
+ --utrecht-page-body-content-max-inline-size: 1184px;
153
169
  --utrecht-ordered-list-padding-inline-start: 28.8px;
154
170
  --utrecht-ordered-list-margin-block-start: 0;
155
171
  --utrecht-ordered-list-margin-block-end: 1em;
@@ -182,6 +198,7 @@
182
198
  --utrecht-link-social-border-width: 2px;
183
199
  --utrecht-link-list-link-text-decoration: none;
184
200
  --utrecht-link-list-icon-size: 14px;
201
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
185
202
  --utrecht-link-icon-size: 1.2em;
186
203
  --utrecht-link-hover-text-decoration-thickness: 3px;
187
204
  --utrecht-link-hover-text-decoration: underline;
@@ -345,6 +362,7 @@
345
362
  --utrecht-border-radius-none: 0;
346
363
  --utrecht-border-radius-md: 4px;
347
364
  --utrecht-border-radius-lg: 8px;
365
+ --utrecht-body-line-height: 1.4;
348
366
  --utrecht-blockquote-margin-inline-start: 1.6em;
349
367
  --utrecht-blockquote-margin-inline-end: 1.6em;
350
368
  --utrecht-blockquote-margin-block-start: 1.6em;
@@ -370,6 +388,7 @@
370
388
  --utrecht-accordion-button-icon-size: 24px;
371
389
  --utrecht-accordion-button-hover-background-color: inherit;
372
390
  --utrecht-accordion-button-border-width: 0;
391
+ --signalen-progress-bar-border-radius: 4px;
373
392
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
374
393
  --nl-number-badge-padding-inline: 1ex;
375
394
  --nl-number-badge-padding-block: 1ex;
@@ -461,6 +480,8 @@
461
480
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
462
481
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
463
482
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
483
+ --utrecht-root-color: var(--utrecht-color-grey-10);
484
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
464
485
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
465
486
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
466
487
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
@@ -499,14 +520,17 @@
499
520
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
500
521
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
501
522
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
502
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
503
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
504
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
505
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
523
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
524
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
525
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
526
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
527
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
506
528
  --utrecht-page-footer-color: var(--utrecht-color-white);
507
529
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
508
530
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
509
531
  --utrecht-page-color: var(--utrecht-color-black);
532
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
533
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
510
534
  --utrecht-page-background-color: var(--utrecht-color-white);
511
535
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
512
536
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
@@ -515,8 +539,6 @@
515
539
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
516
540
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
517
541
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
518
- --utrecht-nav-bar-color: var(--utrecht-color-black);
519
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
520
542
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
521
543
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
522
544
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
@@ -788,6 +810,10 @@
788
810
  --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
789
811
  --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
790
812
  --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
813
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
814
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
815
+ --utrecht-body-color: var(--utrecht-color-black);
816
+ --utrecht-body-background-color: var(--utrecht-color-white);
791
817
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
792
818
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
793
819
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -1022,6 +1048,8 @@
1022
1048
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1023
1049
  --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1024
1050
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1051
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
1052
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1025
1053
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1026
1054
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1027
1055
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);