@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/dark/property.css CHANGED
@@ -97,6 +97,8 @@
97
97
  @property --utrecht-blockquote-content-font-size { syntax: '<length>'; inherits: true; }
98
98
  @property --utrecht-blockquote-margin-inline-end { syntax: '<length>'; inherits: true; }
99
99
  @property --utrecht-blockquote-margin-inline-start { syntax: '<length>'; inherits: true; }
100
+ @property --utrecht-body-font-size { syntax: '<length>'; inherits: true; }
101
+ @property --utrecht-body-line-height { syntax: '<length> | <number>'; inherits: true; }
100
102
  @property --utrecht-breadcrumb-nav-arrows-link-background-color { syntax: '<color>'; inherits: true; }
101
103
  @property --utrecht-breadcrumb-nav-arrows-link-focus-background-color { syntax: '<color>'; inherits: true; }
102
104
  @property --utrecht-breadcrumb-nav-font-size { syntax: '<length>'; inherits: true; }
@@ -377,6 +379,7 @@
377
379
  @property --utrecht-link-hover-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
378
380
  @property --utrecht-link-hover-text-decoration-thickness { syntax: '<length>'; inherits: true; }
379
381
  @property --utrecht-link-icon-size { syntax: '<length>'; inherits: true; }
382
+ @property --utrecht-link-list-icon-inset-block-start { syntax: '<length>'; inherits: true; }
380
383
  @property --utrecht-link-list-icon-size { syntax: '<length>'; inherits: true; }
381
384
  @property --utrecht-link-list-link-column-gap { syntax: '<length>'; inherits: true; }
382
385
  @property --utrecht-link-list-link-font-weight { syntax: '<number>'; inherits: true; }
@@ -436,8 +439,6 @@
436
439
  @property --utrecht-mapcontrolbutton-min-inline-size { syntax: '<length>'; inherits: true; }
437
440
  @property --utrecht-mark-background-color { syntax: '<color>'; inherits: true; }
438
441
  @property --utrecht-mark-color { syntax: '<color>'; inherits: true; }
439
- @property --utrecht-nav-bar-background-color { syntax: '<color>'; inherits: true; }
440
- @property --utrecht-nav-bar-color { syntax: '<color>'; inherits: true; }
441
442
  @property --utrecht-nav-bar-content-max-inline-size { syntax: '<length>'; inherits: true; }
442
443
  @property --utrecht-nav-bar-link-padding-block-end { syntax: '<length>'; inherits: true; }
443
444
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
@@ -457,15 +458,24 @@
457
458
  @property --utrecht-ordered-list-margin-block-end { syntax: '<length>'; inherits: true; }
458
459
  @property --utrecht-ordered-list-margin-block-start { syntax: '<length>'; inherits: true; }
459
460
  @property --utrecht-ordered-list-padding-inline-start { syntax: '<length>'; inherits: true; }
461
+ @property --utrecht-page-body-content-background-color { syntax: '<color>'; inherits: true; }
462
+ @property --utrecht-page-body-content-color { syntax: '<color>'; inherits: true; }
463
+ @property --utrecht-page-body-content-padding-block-end { syntax: '<length>'; inherits: true; }
464
+ @property --utrecht-page-body-content-padding-block-start { syntax: '<length>'; inherits: true; }
465
+ @property --utrecht-page-body-content-padding-inline-start { syntax: '<length>'; inherits: true; }
460
466
  @property --utrecht-page-content-padding-block-end { syntax: '<length>'; inherits: true; }
461
467
  @property --utrecht-page-content-padding-block-start { syntax: '<length>'; inherits: true; }
462
468
  @property --utrecht-page-footer-background-color { syntax: '<color>'; inherits: true; }
463
469
  @property --utrecht-page-footer-background-image { syntax: '<url> | *'; inherits: true; }
464
470
  @property --utrecht-page-footer-color { syntax: '<color>'; inherits: true; }
465
- @property --utrecht-page-footer-padding-block-end { syntax: '<length>'; inherits: true; }
466
- @property --utrecht-page-footer-padding-block-start { syntax: '<length>'; inherits: true; }
467
- @property --utrecht-page-footer-padding-inline-end { syntax: '<length>'; inherits: true; }
468
- @property --utrecht-page-footer-padding-inline-start { syntax: '<length>'; inherits: true; }
471
+ @property --utrecht-page-footer-content-padding-block-end { syntax: '<length>'; inherits: true; }
472
+ @property --utrecht-page-footer-content-padding-block-start { syntax: '<length>'; inherits: true; }
473
+ @property --utrecht-page-header-content-background-color { syntax: '<color>'; inherits: true; }
474
+ @property --utrecht-page-header-content-color { syntax: '<color>'; inherits: true; }
475
+ @property --utrecht-page-header-content-padding-block-end { syntax: '<length>'; inherits: true; }
476
+ @property --utrecht-page-header-content-padding-block-start { syntax: '<length>'; inherits: true; }
477
+ @property --utrecht-page-header-content-padding-inline-end { syntax: '<length>'; inherits: true; }
478
+ @property --utrecht-page-header-content-padding-inline-start { syntax: '<length>'; inherits: true; }
469
479
  @property --utrecht-page-header-padding-block-end { syntax: '<length>'; inherits: true; }
470
480
  @property --utrecht-page-header-padding-block-start { syntax: '<length>'; inherits: true; }
471
481
  @property --utrecht-page-header-padding-inline-end { syntax: '<length>'; inherits: true; }
@@ -532,6 +542,7 @@
532
542
  @property --utrecht-radio-button-checked-focus-border-color { syntax: '<color>'; inherits: true; }
533
543
  @property --utrecht-radio-button-checked-hover-background-color { syntax: '<color>'; inherits: true; }
534
544
  @property --utrecht-radio-button-checked-hover-color { syntax: '<color>'; inherits: true; }
545
+ @property --utrecht-radio-button-color { syntax: '<color>'; inherits: true; }
535
546
  @property --utrecht-radio-button-disabled-background-color { syntax: '<color>'; inherits: true; }
536
547
  @property --utrecht-radio-button-disabled-border-color { syntax: '<color>'; inherits: true; }
537
548
  @property --utrecht-radio-button-disabled-color { syntax: '<color>'; inherits: true; }
@@ -547,6 +558,8 @@
547
558
  @property --utrecht-rich-text-confidant-margin-block-end { syntax: '<length>'; inherits: true; }
548
559
  @property --utrecht-rich-text-friend-margin-block-end { syntax: '<length>'; inherits: true; }
549
560
  @property --utrecht-rich-text-stranger-margin-block-end { syntax: '<length>'; inherits: true; }
561
+ @property --utrecht-root-background-color { syntax: '<color>'; inherits: true; }
562
+ @property --utrecht-root-color { syntax: '<color>'; inherits: true; }
550
563
  @property --utrecht-search-bar-button-background-color { syntax: '<color>'; inherits: true; }
551
564
  @property --utrecht-search-bar-button-border-color { syntax: '<length>'; inherits: true; }
552
565
  @property --utrecht-search-bar-button-color { syntax: '<color>'; inherits: true; }
package/dist/dark/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;
@@ -346,6 +363,7 @@
346
363
  --utrecht-border-radius-none: 0;
347
364
  --utrecht-border-radius-md: 4px;
348
365
  --utrecht-border-radius-lg: 8px;
366
+ --utrecht-body-line-height: 1.4;
349
367
  --utrecht-blockquote-margin-inline-start: 1.6em;
350
368
  --utrecht-blockquote-margin-inline-end: 1.6em;
351
369
  --utrecht-blockquote-margin-block-start: 1.6em;
@@ -373,6 +391,7 @@
373
391
  --utrecht-accordion-button-icon-size: 24px;
374
392
  --utrecht-accordion-button-hover-background-color: inherit;
375
393
  --utrecht-accordion-button-border-width: 0;
394
+ --signalen-progress-bar-border-radius: 4px;
376
395
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
377
396
  --nl-number-badge-padding-inline: 1ex;
378
397
  --nl-number-badge-padding-block: 1ex;
@@ -466,6 +485,8 @@
466
485
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
467
486
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
468
487
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
488
+ --utrecht-root-color: var(--utrecht-color-grey-10);
489
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
469
490
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
470
491
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
471
492
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
@@ -504,14 +525,17 @@
504
525
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
505
526
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
506
527
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
507
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
508
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
509
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
510
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
528
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
529
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
530
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
531
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
532
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
511
533
  --utrecht-page-footer-color: var(--utrecht-color-white);
512
534
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
513
535
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
514
536
  --utrecht-page-color: var(--utrecht-color-grey-95);
537
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
538
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
515
539
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
516
540
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
517
541
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
@@ -520,8 +544,6 @@
520
544
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
521
545
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
522
546
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
523
- --utrecht-nav-bar-color: var(--utrecht-color-black);
524
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
525
547
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
526
548
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
527
549
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
@@ -789,6 +811,10 @@
789
811
  --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
790
812
  --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
791
813
  --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
814
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
815
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
816
+ --utrecht-body-color: var(--utrecht-color-black);
817
+ --utrecht-body-background-color: var(--utrecht-color-white);
792
818
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
793
819
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
794
820
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -1033,6 +1059,8 @@
1033
1059
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1034
1060
  --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1035
1061
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1062
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
1063
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1036
1064
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1037
1065
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1038
1066
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
package/dist/dark/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;
@@ -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);
package/dist/dark/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;
@@ -346,6 +363,7 @@
346
363
  --utrecht-border-radius-none: 0;
347
364
  --utrecht-border-radius-md: 4px;
348
365
  --utrecht-border-radius-lg: 8px;
366
+ --utrecht-body-line-height: 1.4;
349
367
  --utrecht-blockquote-margin-inline-start: 1.6em;
350
368
  --utrecht-blockquote-margin-inline-end: 1.6em;
351
369
  --utrecht-blockquote-margin-block-start: 1.6em;
@@ -373,6 +391,7 @@
373
391
  --utrecht-accordion-button-icon-size: 24px;
374
392
  --utrecht-accordion-button-hover-background-color: inherit;
375
393
  --utrecht-accordion-button-border-width: 0;
394
+ --signalen-progress-bar-border-radius: 4px;
376
395
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
377
396
  --nl-number-badge-padding-inline: 1ex;
378
397
  --nl-number-badge-padding-block: 1ex;
@@ -466,6 +485,8 @@
466
485
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
467
486
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
468
487
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
488
+ --utrecht-root-color: var(--utrecht-color-grey-10);
489
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
469
490
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
470
491
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
471
492
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
@@ -504,14 +525,17 @@
504
525
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
505
526
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
506
527
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
507
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
508
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
509
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
510
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
528
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
529
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
530
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
531
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
532
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
511
533
  --utrecht-page-footer-color: var(--utrecht-color-white);
512
534
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
513
535
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
514
536
  --utrecht-page-color: var(--utrecht-color-grey-95);
537
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
538
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
515
539
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
516
540
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
517
541
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
@@ -520,8 +544,6 @@
520
544
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
521
545
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
522
546
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
523
- --utrecht-nav-bar-color: var(--utrecht-color-black);
524
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
525
547
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
526
548
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
527
549
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
@@ -789,6 +811,10 @@
789
811
  --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
790
812
  --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
791
813
  --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
814
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
815
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
816
+ --utrecht-body-color: var(--utrecht-color-black);
817
+ --utrecht-body-background-color: var(--utrecht-color-white);
792
818
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
793
819
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
794
820
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -1033,6 +1059,8 @@
1033
1059
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1034
1060
  --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1035
1061
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1062
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
1063
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1036
1064
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1037
1065
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1038
1066
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);