@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/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 882e10d: Add design tokens for `body`, `nav-bar`, `page-body`, `page-footer`, `page-header` and `root`.
8
+ - 3bc0dd6: Add some design tokens for the Signalen application.
9
+
3
10
  ## 2.4.0
4
11
 
5
12
  ### 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;
@@ -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/_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;
@@ -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/_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;
@@ -530,11 +549,12 @@ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
530
549
  $utrecht-search-bar-button-color: $utrecht-color-white;
531
550
  $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
532
551
  $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
552
+ $utrecht-root-color: $utrecht-color-grey-10;
553
+ $utrecht-root-background-color: $utrecht-color-grey-95;
533
554
  $utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
534
555
  $utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
535
556
  $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
536
557
  $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
537
- $utrecht-radio-button-color: $utrecht-color-white;
538
558
  $utrecht-radio-button-disabled-color: $utrecht-color-white;
539
559
  $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
540
560
  $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
@@ -548,6 +568,7 @@ $utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
548
568
  $utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
549
569
  $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
550
570
  $utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
571
+ $utrecht-radio-button-color: $utrecht-color-white;
551
572
  $utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
552
573
  $utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
553
574
  $utrecht-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
@@ -570,13 +591,16 @@ $utrecht-pagination-page-link-color: $utrecht-color-blue-35;
570
591
  $utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
571
592
  $utrecht-page-color: $utrecht-color-black;
572
593
  $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;
594
+ $utrecht-page-header-content-color: $utrecht-color-black;
595
+ $utrecht-page-header-content-background-color: $utrecht-color-white;
596
+ $utrecht-page-footer-content-padding-inline: $utrecht-space-inline-2xl;
597
+ $utrecht-page-footer-content-padding-block-start: $utrecht-space-block-3xl;
598
+ $utrecht-page-footer-content-padding-block-end: $utrecht-space-block-3xl;
577
599
  $utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
578
600
  $utrecht-page-footer-background-color: $utrecht-color-red-40;
579
601
  $utrecht-page-footer-color: $utrecht-color-white;
602
+ $utrecht-page-body-content-color: $utrecht-color-black;
603
+ $utrecht-page-body-content-background-color: $utrecht-color-white;
580
604
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
581
605
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
582
606
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
@@ -602,8 +626,6 @@ $utrecht-nav-bar-link-padding-inline-end: $utrecht-space-inline-md;
602
626
  $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
603
627
  $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
604
628
  $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
629
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
608
630
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
609
631
  $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
@@ -873,6 +895,10 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
873
895
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
874
896
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
875
897
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
898
+ $utrecht-body-color: $utrecht-color-black;
899
+ $utrecht-body-background-color: $utrecht-color-white;
900
+ $utrecht-body-font-size: $utrecht-typography-scale-md-font-size;
901
+ $utrecht-body-font-family: $utrecht-typography-sans-serif-font-family;
876
902
  $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
877
903
  $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
878
904
  $utrecht-blockquote-content-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);