@utrecht/design-tokens 6.1.1 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build-stylelint.mjs +1 -2
  3. package/dist/_mixin-theme.scss +13 -11
  4. package/dist/_mixin.scss +13 -11
  5. package/dist/_variables.scss +13 -11
  6. package/dist/dark/_mixin-theme.scss +13 -11
  7. package/dist/dark/_mixin.scss +13 -11
  8. package/dist/dark/_variables.scss +13 -11
  9. package/dist/dark/index.cjs +13 -11
  10. package/dist/dark/index.css +13 -11
  11. package/dist/dark/index.d.ts +11 -9
  12. package/dist/dark/index.flat.json +4 -2
  13. package/dist/dark/index.json +120 -24
  14. package/dist/dark/index.mjs +13 -11
  15. package/dist/dark/index.tokens.json +17 -15
  16. package/dist/dark/list.json +120 -24
  17. package/dist/dark/list.mjs +120 -24
  18. package/dist/dark/property.css +8 -2
  19. package/dist/dark/root.css +4 -2
  20. package/dist/dark/theme-prince-xml.css +13 -11
  21. package/dist/dark/theme.css +4 -2
  22. package/dist/dark/tokens.cjs +215 -129
  23. package/dist/dark/tokens.d.ts +13 -11
  24. package/dist/dark/tokens.json +253 -157
  25. package/dist/dark/variables.cjs +13 -11
  26. package/dist/dark/variables.css +4 -2
  27. package/dist/dark/variables.d.ts +11 -9
  28. package/dist/dark/variables.json +4 -2
  29. package/dist/dark/variables.less +13 -11
  30. package/dist/dark/variables.mjs +13 -11
  31. package/dist/index.cjs +13 -11
  32. package/dist/index.css +26 -22
  33. package/dist/index.d.ts +11 -9
  34. package/dist/index.flat.json +4 -2
  35. package/dist/index.json +120 -24
  36. package/dist/index.mjs +13 -11
  37. package/dist/index.tokens.json +17 -15
  38. package/dist/list.json +120 -24
  39. package/dist/list.mjs +120 -24
  40. package/dist/property.css +8 -2
  41. package/dist/root.css +4 -2
  42. package/dist/theme-prince-xml.css +13 -11
  43. package/dist/theme.css +4 -2
  44. package/dist/tokens.cjs +215 -129
  45. package/dist/tokens.d.ts +13 -11
  46. package/dist/tokens.json +253 -157
  47. package/dist/variables.cjs +13 -11
  48. package/dist/variables.css +4 -2
  49. package/dist/variables.d.ts +11 -9
  50. package/dist/variables.json +4 -2
  51. package/dist/variables.less +13 -11
  52. package/dist/variables.mjs +13 -11
  53. package/package.json +5 -6
  54. package/src/component/utrecht/nav-bar.tokens.json +8 -2
  55. package/stylelint.config.mjs +10 -0
  56. package/.stylelintrc.json +0 -10
package/dist/dark/variables.d.ts CHANGED
@@ -490,6 +490,7 @@ export const utrechtSpaceColumn3xl: string;
490
490
  export const utrechtSpaceColumn4xl: string;
491
491
  /** Extra Large 5 */
492
492
  export const utrechtSpaceColumn5xl: string;
493
+ export const utrechtTextboxBorderBottomWidth: string;
493
494
  export const utrechtDataListMarginBlockEnd: string;
494
495
  export const utrechtDataListMarginBlockStart: string;
495
496
  export const utrechtDataListItemKeyFontWeight: string;
@@ -758,6 +759,8 @@ export const utrechtMarkBackgroundColor: string;
758
759
  export const utrechtMarkColor: string;
759
760
  export const utrechtNavBarBackgroundColor: string;
760
761
  export const utrechtNavBarColor: string;
762
+ export const utrechtNavBarContentBackgroundColor: string;
763
+ export const utrechtNavBarContentColor: string;
761
764
  export const utrechtNavBarContentMaxInlineSize: string;
762
765
  export const utrechtNavBarLinkPaddingBlockEnd: string;
763
766
  export const utrechtNavBarLinkPaddingBlockStart: string;
@@ -858,6 +861,10 @@ export const utrechtOrderedListPaddingInlineStart: string;
858
861
  export const utrechtOrderedListItemMarginBlockStart: string;
859
862
  export const utrechtOrderedListItemMarginBlockEnd: string;
860
863
  export const utrechtOrderedListItemPaddingInlineStart: number;
864
+ export const utrechtPageBodyPaddingBlockStart: number;
865
+ export const utrechtPageBodyPaddingBlockEnd: number;
866
+ export const utrechtPageBodyPaddingInlineStart: number;
867
+ export const utrechtPageBodyPaddingInlineEnd: number;
861
868
  export const utrechtPageBodyContentBackgroundColor: string;
862
869
  export const utrechtPageBodyContentColor: string;
863
870
  export const utrechtPageBodyContentPaddingBlockStart: number;
@@ -865,19 +872,15 @@ export const utrechtPageBodyContentPaddingBlockEnd: string;
865
872
  export const utrechtPageBodyContentPaddingInlineStart: string;
866
873
  export const utrechtPageBodyContentPaddingInlineEnd: string;
867
874
  export const utrechtPageBodyContentMaxInlineSize: string;
868
- export const utrechtPageBodyPaddingInlineEnd: string;
869
- export const utrechtPageBodyPaddingInlineStart: string;
870
- export const utrechtPageBodyPaddingBlockEnd: string;
871
- export const utrechtPageBodyPaddingBlockStart: string;
872
875
  export const utrechtPageContentPaddingBlockStart: string;
873
876
  export const utrechtPageContentPaddingBlockEnd: string;
874
877
  export const utrechtPageFooterColor: string;
875
878
  export const utrechtPageFooterBackgroundColor: string;
876
879
  export const utrechtPageFooterBackgroundImage: string;
880
+ export const utrechtPageFooterContentPaddingInline: string;
877
881
  export const utrechtPageFooterContentPaddingBlockEnd: string;
878
882
  export const utrechtPageFooterContentPaddingBlockStart: string;
879
883
  export const utrechtPageFooterContentMaxInlineSize: string;
880
- export const utrechtPageFooterContentPaddingInline: string;
881
884
  export const utrechtPageHeaderPaddingBlockStart: number;
882
885
  export const utrechtPageHeaderPaddingBlockEnd: number;
883
886
  export const utrechtPageHeaderPaddingInlineStart: number;
@@ -886,10 +889,10 @@ export const utrechtPageHeaderContentBackgroundColor: string;
886
889
  export const utrechtPageHeaderContentColor: string;
887
890
  export const utrechtPageHeaderContentPaddingBlockStart: string;
888
891
  export const utrechtPageHeaderContentPaddingBlockEnd: string;
889
- export const utrechtPageHeaderContentPaddingInlineStart: string;
890
- export const utrechtPageHeaderContentPaddingInlineEnd: string;
891
- export const utrechtPageHeaderContentMaxInlineSize: string;
892
892
  export const utrechtPageHeaderContentPaddingInline: string;
893
+ export const utrechtPageHeaderContentMaxInlineSize: string;
894
+ export const utrechtPageHeaderContentPaddingInlineEnd: string;
895
+ export const utrechtPageHeaderContentPaddingInlineStart: string;
893
896
  export const utrechtPageBackgroundColor: string;
894
897
  export const utrechtPageColor: string;
895
898
  export const utrechtPageMarginInlineStart: string;
@@ -1102,7 +1105,6 @@ export const utrechtTableRowAlternateEvenColor: string;
1102
1105
  export const utrechtTextareaBorderBlockEndWidth: string;
1103
1106
  export const utrechtTextareaBorderBottomWidth: string;
1104
1107
  export const utrechtTextareaLineHeight: string;
1105
- export const utrechtTextboxBorderBottomWidth: string;
1106
1108
  export const utrechtTooltipBackgroundColor: string;
1107
1109
  export const utrechtTooltipBorderColor: string;
1108
1110
  export const utrechtTooltipBorderRadius: number;
package/dist/dark/variables.json CHANGED
@@ -810,8 +810,10 @@
810
810
  "utrechtMarkColor": "hsl(0 0% 0%)",
811
811
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
812
812
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
813
- "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
814
- "utrechtNavBarColor": "hsl(0 0% 0%)",
813
+ "utrechtNavBarBackgroundColor": "transparent",
814
+ "utrechtNavBarColor": "transparent",
815
+ "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
816
+ "utrechtNavBarContentColor": "hsl(0 0% 0%)",
815
817
  "utrechtNavBarContentMaxInlineSize": "1184px",
816
818
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
817
819
  "utrechtNavBarLinkPaddingBlockStart": "8px",
package/dist/dark/variables.less CHANGED
@@ -139,6 +139,7 @@
139
139
  @utrecht-space-column-3xl: 32px; // Extra Large 3
140
140
  @utrecht-space-column-4xl: 48px; // Extra Large 4
141
141
  @utrecht-space-column-5xl: 64px; // Extra Large 5
142
+ @utrecht-textbox-border-bottom-width: 3px;
142
143
  @utrecht-data-list-rows-column-min-inline-size: 25ch;
143
144
  @utrecht-data-list-rows-column-inline-size: 80%;
144
145
  @utrecht-document-line-height: 1.4;
@@ -223,6 +224,8 @@
223
224
  @utrecht-mapcontrolbutton-focus-text-decoration: none;
224
225
  @utrecht-mapcontrolbutton-margin-inline-end: 0;
225
226
  @utrecht-mapcontrolbutton-margin-inline-start: 0;
227
+ @utrecht-nav-bar-background-color: transparent;
228
+ @utrecht-nav-bar-color: transparent;
226
229
  @utrecht-topnav-link-focus-border-type: dotted;
227
230
  @utrecht-topnav-link-focus-text-decoration: none;
228
231
  @utrecht-navigation-border-block-end-color: transparent;
@@ -258,15 +261,15 @@
258
261
  @utrecht-ordered-list-item-margin-block-start: 0.25em;
259
262
  @utrecht-ordered-list-item-margin-block-end: 0.25em;
260
263
  @utrecht-ordered-list-item-padding-inline-start: 0;
264
+ @utrecht-page-body-padding-block-start: 0;
265
+ @utrecht-page-body-padding-block-end: 0;
266
+ @utrecht-page-body-padding-inline-start: 0;
267
+ @utrecht-page-body-padding-inline-end: 0;
261
268
  @utrecht-page-body-content-padding-block-start: 0;
262
269
  @utrecht-page-body-content-padding-block-end: 1em;
263
270
  @utrecht-page-body-content-padding-inline-start: 2em;
264
271
  @utrecht-page-body-content-padding-inline-end: 2.4em;
265
272
  @utrecht-page-body-content-max-inline-size: 1184px;
266
- @utrecht-page-body-padding-inline-end: 0;
267
- @utrecht-page-body-padding-inline-start: 0;
268
- @utrecht-page-body-padding-block-end: 0;
269
- @utrecht-page-body-padding-block-start: 0;
270
273
  @utrecht-page-content-padding-block-start: 2em;
271
274
  @utrecht-page-content-padding-block-end: 2em;
272
275
  @utrecht-page-footer-content-max-inline-size: 1184px;
@@ -276,10 +279,10 @@
276
279
  @utrecht-page-header-padding-inline-end: 0;
277
280
  @utrecht-page-header-content-padding-block-start: 1.8em;
278
281
  @utrecht-page-header-content-padding-block-end: 1em;
279
- @utrecht-page-header-content-padding-inline-start: 2em;
280
- @utrecht-page-header-content-padding-inline-end: 2.4em;
281
- @utrecht-page-header-content-max-inline-size: 1184px;
282
282
  @utrecht-page-header-content-padding-inline: 2em;
283
+ @utrecht-page-header-content-max-inline-size: 1184px;
284
+ @utrecht-page-header-content-padding-inline-end: 2.4em;
285
+ @utrecht-page-header-content-padding-inline-start: 2em;
283
286
  @utrecht-page-margin-inline-start: 2em;
284
287
  @utrecht-page-margin-inline-end: 2em;
285
288
  @utrecht-page-max-inline-size: 1184px;
@@ -340,7 +343,6 @@
340
343
  @utrecht-table-cell-icon-size: 1em;
341
344
  @utrecht-textarea-border-block-end-width: 3px;
342
345
  @utrecht-textarea-border-bottom-width: 3px;
343
- @utrecht-textbox-border-bottom-width: 3px;
344
346
  @utrecht-tooltip-border-radius: 0;
345
347
  @utrecht-tooltip-border-width: 1px;
346
348
  @utrecht-toptask-link-line-height: 1.2;
@@ -820,8 +822,8 @@
820
822
  @utrecht-mapcontrolbutton-padding-block-start: @utrecht-space-block-2xs;
821
823
  @utrecht-mapcontrolbutton-padding-inline-end: @utrecht-space-inline-2xs;
822
824
  @utrecht-mapcontrolbutton-padding-inline-start: @utrecht-space-inline-2xs;
823
- @utrecht-nav-bar-background-color: @utrecht-color-white;
824
- @utrecht-nav-bar-color: @utrecht-color-black;
825
+ @utrecht-nav-bar-content-background-color: @utrecht-color-white;
826
+ @utrecht-nav-bar-content-color: @utrecht-color-black;
825
827
  @utrecht-nav-bar-content-max-inline-size: @utrecht-page-max-inline-size;
826
828
  @utrecht-nav-bar-link-padding-block-end: @utrecht-space-block-xs;
827
829
  @utrecht-nav-bar-link-padding-block-start: @utrecht-space-block-xs;
@@ -885,9 +887,9 @@
885
887
  @utrecht-page-footer-color: @utrecht-color-white;
886
888
  @utrecht-page-footer-background-color: @utrecht-color-red-40;
887
889
  @utrecht-page-footer-background-image: linear-gradient(45deg, @utrecht-color-red-40, @utrecht-color-red-40 50%, #d63433 50%);;
890
+ @utrecht-page-footer-content-padding-inline: @utrecht-space-inline-2xl;
888
891
  @utrecht-page-footer-content-padding-block-end: @utrecht-space-block-3xl;
889
892
  @utrecht-page-footer-content-padding-block-start: @utrecht-space-block-3xl;
890
- @utrecht-page-footer-content-padding-inline: @utrecht-space-inline-2xl;
891
893
  @utrecht-page-header-content-background-color: @utrecht-color-white;
892
894
  @utrecht-page-header-content-color: @utrecht-color-black;
893
895
  @utrecht-page-background-color: @utrecht-color-grey-15;
package/dist/dark/variables.mjs CHANGED
@@ -470,6 +470,7 @@ export const utrechtSpaceColumn2xl = "28px"; // Extra Large 2
470
470
  export const utrechtSpaceColumn3xl = "32px"; // Extra Large 3
471
471
  export const utrechtSpaceColumn4xl = "48px"; // Extra Large 4
472
472
  export const utrechtSpaceColumn5xl = "64px"; // Extra Large 5
473
+ export const utrechtTextboxBorderBottomWidth = "3px";
473
474
  export const utrechtDataListMarginBlockEnd = "16px";
474
475
  export const utrechtDataListMarginBlockStart = "16px";
475
476
  export const utrechtDataListItemKeyFontWeight = "700";
@@ -744,8 +745,10 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
744
745
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
745
746
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
746
747
  export const utrechtMarkColor = "hsl(0 0% 0%)";
747
- export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
748
- export const utrechtNavBarColor = "hsl(0 0% 0%)";
748
+ export const utrechtNavBarBackgroundColor = "transparent";
749
+ export const utrechtNavBarColor = "transparent";
750
+ export const utrechtNavBarContentBackgroundColor = "hsl(0 0% 100%)";
751
+ export const utrechtNavBarContentColor = "hsl(0 0% 0%)";
749
752
  export const utrechtNavBarContentMaxInlineSize = "1184px";
750
753
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
751
754
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
@@ -846,6 +849,10 @@ export const utrechtOrderedListPaddingInlineStart = "28.8px";
846
849
  export const utrechtOrderedListItemMarginBlockStart = "0.25em";
847
850
  export const utrechtOrderedListItemMarginBlockEnd = "0.25em";
848
851
  export const utrechtOrderedListItemPaddingInlineStart = "0";
852
+ export const utrechtPageBodyPaddingBlockStart = "0";
853
+ export const utrechtPageBodyPaddingBlockEnd = "0";
854
+ export const utrechtPageBodyPaddingInlineStart = "0";
855
+ export const utrechtPageBodyPaddingInlineEnd = "0";
849
856
  export const utrechtPageBodyContentBackgroundColor = "hsl(0 0% 100%)";
850
857
  export const utrechtPageBodyContentColor = "hsl(0 0% 0%)";
851
858
  export const utrechtPageBodyContentPaddingBlockStart = "0";
@@ -853,20 +860,16 @@ export const utrechtPageBodyContentPaddingBlockEnd = "1em";
853
860
  export const utrechtPageBodyContentPaddingInlineStart = "2em";
854
861
  export const utrechtPageBodyContentPaddingInlineEnd = "2.4em";
855
862
  export const utrechtPageBodyContentMaxInlineSize = "1184px";
856
- export const utrechtPageBodyPaddingInlineEnd = "0";
857
- export const utrechtPageBodyPaddingInlineStart = "0";
858
- export const utrechtPageBodyPaddingBlockEnd = "0";
859
- export const utrechtPageBodyPaddingBlockStart = "0";
860
863
  export const utrechtPageContentPaddingBlockStart = "2em";
861
864
  export const utrechtPageContentPaddingBlockEnd = "2em";
862
865
  export const utrechtPageFooterColor = "hsl(0 0% 100%)";
863
866
  export const utrechtPageFooterBackgroundColor = "hsl(0 100% 40%)";
864
867
  export const utrechtPageFooterBackgroundImage =
865
868
  "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);";
869
+ export const utrechtPageFooterContentPaddingInline = "28px";
866
870
  export const utrechtPageFooterContentPaddingBlockEnd = "48px";
867
871
  export const utrechtPageFooterContentPaddingBlockStart = "48px";
868
872
  export const utrechtPageFooterContentMaxInlineSize = "1184px";
869
- export const utrechtPageFooterContentPaddingInline = "28px";
870
873
  export const utrechtPageHeaderPaddingBlockStart = "0";
871
874
  export const utrechtPageHeaderPaddingBlockEnd = "0";
872
875
  export const utrechtPageHeaderPaddingInlineStart = "0";
@@ -875,10 +878,10 @@ export const utrechtPageHeaderContentBackgroundColor = "hsl(0 0% 100%)";
875
878
  export const utrechtPageHeaderContentColor = "hsl(0 0% 0%)";
876
879
  export const utrechtPageHeaderContentPaddingBlockStart = "1.8em";
877
880
  export const utrechtPageHeaderContentPaddingBlockEnd = "1em";
878
- export const utrechtPageHeaderContentPaddingInlineStart = "2em";
879
- export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
880
- export const utrechtPageHeaderContentMaxInlineSize = "1184px";
881
881
  export const utrechtPageHeaderContentPaddingInline = "2em";
882
+ export const utrechtPageHeaderContentMaxInlineSize = "1184px";
883
+ export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
884
+ export const utrechtPageHeaderContentPaddingInlineStart = "2em";
882
885
  export const utrechtPageBackgroundColor = "hsl(0 0% 15%)";
883
886
  export const utrechtPageColor = "hsl(0 0% 95%)";
884
887
  export const utrechtPageMarginInlineStart = "2em";
@@ -1098,7 +1101,6 @@ export const utrechtTableRowAlternateEvenColor = "hsl(0 0% 0%)";
1098
1101
  export const utrechtTextareaBorderBlockEndWidth = "3px";
1099
1102
  export const utrechtTextareaBorderBottomWidth = "3px";
1100
1103
  export const utrechtTextareaLineHeight = "1.5";
1101
- export const utrechtTextboxBorderBottomWidth = "3px";
1102
1104
  export const utrechtTooltipBackgroundColor = "hsl(0 0% 100%)";
1103
1105
  export const utrechtTooltipBorderColor = "hsl(0 0% 40%)";
1104
1106
  export const utrechtTooltipBorderRadius = "0";
package/dist/index.cjs CHANGED
@@ -418,6 +418,7 @@ module.exports = {
418
418
  utrechtSpaceColumn3xl: "32px",
419
419
  utrechtSpaceColumn4xl: "48px",
420
420
  utrechtSpaceColumn5xl: "64px",
421
+ utrechtTextboxBorderBottomWidth: "3px",
421
422
  utrechtDataListMarginBlockEnd: "16px",
422
423
  utrechtDataListMarginBlockStart: "16px",
423
424
  utrechtDataListItemKeyFontWeight: "700",
@@ -681,8 +682,10 @@ module.exports = {
681
682
  utrechtMapcontrolbuttonPaddingInlineStart: "4px",
682
683
  utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
683
684
  utrechtMarkColor: "hsl(0 0% 0%)",
684
- utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
685
- utrechtNavBarColor: "hsl(0 0% 0%)",
685
+ utrechtNavBarBackgroundColor: "transparent",
686
+ utrechtNavBarColor: "transparent",
687
+ utrechtNavBarContentBackgroundColor: "hsl(0 0% 100%)",
688
+ utrechtNavBarContentColor: "hsl(0 0% 0%)",
686
689
  utrechtNavBarContentMaxInlineSize: "1184px",
687
690
  utrechtNavBarLinkPaddingBlockEnd: "8px",
688
691
  utrechtNavBarLinkPaddingBlockStart: "8px",
@@ -780,6 +783,10 @@ module.exports = {
780
783
  utrechtOrderedListItemMarginBlockStart: "0.25em",
781
784
  utrechtOrderedListItemMarginBlockEnd: "0.25em",
782
785
  utrechtOrderedListItemPaddingInlineStart: "0",
786
+ utrechtPageBodyPaddingBlockStart: "0",
787
+ utrechtPageBodyPaddingBlockEnd: "0",
788
+ utrechtPageBodyPaddingInlineStart: "0",
789
+ utrechtPageBodyPaddingInlineEnd: "0",
783
790
  utrechtPageBodyContentBackgroundColor: "hsl(0 0% 100%)",
784
791
  utrechtPageBodyContentColor: "hsl(0 0% 0%)",
785
792
  utrechtPageBodyContentPaddingBlockStart: "0",
@@ -787,20 +794,16 @@ module.exports = {
787
794
  utrechtPageBodyContentPaddingInlineStart: "2em",
788
795
  utrechtPageBodyContentPaddingInlineEnd: "2.4em",
789
796
  utrechtPageBodyContentMaxInlineSize: "1184px",
790
- utrechtPageBodyPaddingInlineEnd: "0",
791
- utrechtPageBodyPaddingInlineStart: "0",
792
- utrechtPageBodyPaddingBlockEnd: "0",
793
- utrechtPageBodyPaddingBlockStart: "0",
794
797
  utrechtPageContentPaddingBlockStart: "2em",
795
798
  utrechtPageContentPaddingBlockEnd: "2em",
796
799
  utrechtPageFooterColor: "hsl(0 0% 100%)",
797
800
  utrechtPageFooterBackgroundColor: "hsl(0 100% 40%)",
798
801
  utrechtPageFooterBackgroundImage:
799
802
  "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
803
+ utrechtPageFooterContentPaddingInline: "28px",
800
804
  utrechtPageFooterContentPaddingBlockEnd: "48px",
801
805
  utrechtPageFooterContentPaddingBlockStart: "48px",
802
806
  utrechtPageFooterContentMaxInlineSize: "1184px",
803
- utrechtPageFooterContentPaddingInline: "28px",
804
807
  utrechtPageHeaderPaddingBlockStart: "0",
805
808
  utrechtPageHeaderPaddingBlockEnd: "0",
806
809
  utrechtPageHeaderPaddingInlineStart: "0",
@@ -809,10 +812,10 @@ module.exports = {
809
812
  utrechtPageHeaderContentColor: "hsl(0 0% 0%)",
810
813
  utrechtPageHeaderContentPaddingBlockStart: "1.8em",
811
814
  utrechtPageHeaderContentPaddingBlockEnd: "1em",
812
- utrechtPageHeaderContentPaddingInlineStart: "2em",
813
- utrechtPageHeaderContentPaddingInlineEnd: "2.4em",
814
- utrechtPageHeaderContentMaxInlineSize: "1184px",
815
815
  utrechtPageHeaderContentPaddingInline: "2em",
816
+ utrechtPageHeaderContentMaxInlineSize: "1184px",
817
+ utrechtPageHeaderContentPaddingInlineEnd: "2.4em",
818
+ utrechtPageHeaderContentPaddingInlineStart: "2em",
816
819
  utrechtPageBackgroundColor: "hsl(0 0% 100%)",
817
820
  utrechtPageColor: "hsl(0 0% 0%)",
818
821
  utrechtPageMarginInlineStart: "2em",
@@ -1023,7 +1026,6 @@ module.exports = {
1023
1026
  utrechtTextareaBorderBlockEndWidth: "3px",
1024
1027
  utrechtTextareaBorderBottomWidth: "3px",
1025
1028
  utrechtTextareaLineHeight: "1.5",
1026
- utrechtTextboxBorderBottomWidth: "3px",
1027
1029
  utrechtTooltipBackgroundColor: "hsl(0 0% 100%)",
1028
1030
  utrechtTooltipBorderColor: "hsl(0 0% 40%)",
1029
1031
  utrechtTooltipBorderRadius: "0",
package/dist/index.css CHANGED
@@ -168,6 +168,7 @@
168
168
  --utrecht-space-column-3xl: 32px; /** Extra Large 3 */
169
169
  --utrecht-space-column-4xl: 48px; /** Extra Large 4 */
170
170
  --utrecht-space-column-5xl: 64px; /** Extra Large 5 */
171
+ --utrecht-textbox-border-bottom-width: 3px;
171
172
  --utrecht-data-list-rows-column-min-inline-size: 25ch;
172
173
  --utrecht-data-list-rows-column-inline-size: 80%;
173
174
  --utrecht-document-line-height: 1.4;
@@ -251,6 +252,8 @@
251
252
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
252
253
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
253
254
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
255
+ --utrecht-nav-bar-background-color: transparent;
256
+ --utrecht-nav-bar-color: transparent;
254
257
  --utrecht-topnav-link-focus-border-type: dotted;
255
258
  --utrecht-topnav-link-focus-text-decoration: none;
256
259
  --utrecht-navigation-border-block-end-color: transparent;
@@ -286,15 +289,15 @@
286
289
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
287
290
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
288
291
  --utrecht-ordered-list-item-padding-inline-start: 0;
292
+ --utrecht-page-body-padding-block-start: 0;
293
+ --utrecht-page-body-padding-block-end: 0;
294
+ --utrecht-page-body-padding-inline-start: 0;
295
+ --utrecht-page-body-padding-inline-end: 0;
289
296
  --utrecht-page-body-content-padding-block-start: 0;
290
297
  --utrecht-page-body-content-padding-block-end: 1em;
291
298
  --utrecht-page-body-content-padding-inline-start: 2em;
292
299
  --utrecht-page-body-content-padding-inline-end: 2.4em;
293
300
  --utrecht-page-body-content-max-inline-size: 1184px;
294
- --utrecht-page-body-padding-inline-end: 0;
295
- --utrecht-page-body-padding-inline-start: 0;
296
- --utrecht-page-body-padding-block-end: 0;
297
- --utrecht-page-body-padding-block-start: 0;
298
301
  --utrecht-page-content-padding-block-start: 2em;
299
302
  --utrecht-page-content-padding-block-end: 2em;
300
303
  --utrecht-page-footer-content-max-inline-size: 1184px;
@@ -304,10 +307,10 @@
304
307
  --utrecht-page-header-padding-inline-end: 0;
305
308
  --utrecht-page-header-content-padding-block-start: 1.8em;
306
309
  --utrecht-page-header-content-padding-block-end: 1em;
307
- --utrecht-page-header-content-padding-inline-start: 2em;
308
- --utrecht-page-header-content-padding-inline-end: 2.4em;
309
- --utrecht-page-header-content-max-inline-size: 1184px;
310
310
  --utrecht-page-header-content-padding-inline: 2em;
311
+ --utrecht-page-header-content-max-inline-size: 1184px;
312
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
313
+ --utrecht-page-header-content-padding-inline-start: 2em;
311
314
  --utrecht-page-margin-inline-start: 2em;
312
315
  --utrecht-page-margin-inline-end: 2em;
313
316
  --utrecht-page-max-inline-size: 1184px;
@@ -368,7 +371,6 @@
368
371
  --utrecht-table-cell-icon-size: 1em;
369
372
  --utrecht-textarea-border-block-end-width: 3px;
370
373
  --utrecht-textarea-border-bottom-width: 3px;
371
- --utrecht-textbox-border-bottom-width: 3px;
372
374
  --utrecht-tooltip-border-radius: 0;
373
375
  --utrecht-tooltip-border-width: 1px;
374
376
  --utrecht-toptask-link-line-height: 1.2;
@@ -851,8 +853,8 @@
851
853
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
852
854
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
853
855
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
854
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
855
- --utrecht-nav-bar-color: var(--utrecht-color-black);
856
+ --utrecht-nav-bar-content-background-color: var(--utrecht-color-white);
857
+ --utrecht-nav-bar-content-color: var(--utrecht-color-black);
856
858
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
857
859
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
858
860
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -916,9 +918,9 @@
916
918
  --utrecht-page-footer-color: var(--utrecht-color-white);
917
919
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
918
920
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
921
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
919
922
  --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
920
923
  --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
921
- --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
922
924
  --utrecht-page-header-content-background-color: var(--utrecht-color-white);
923
925
  --utrecht-page-header-content-color: var(--utrecht-color-black);
924
926
  --utrecht-page-background-color: var(--utrecht-color-white);
@@ -1458,6 +1460,7 @@
1458
1460
  --utrecht-space-column-3xl: 32px; /** Extra Large 3 */
1459
1461
  --utrecht-space-column-4xl: 48px; /** Extra Large 4 */
1460
1462
  --utrecht-space-column-5xl: 64px; /** Extra Large 5 */
1463
+ --utrecht-textbox-border-bottom-width: 3px;
1461
1464
  --utrecht-data-list-rows-column-min-inline-size: 25ch;
1462
1465
  --utrecht-data-list-rows-column-inline-size: 80%;
1463
1466
  --utrecht-document-line-height: 1.4;
@@ -1542,6 +1545,8 @@
1542
1545
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
1543
1546
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
1544
1547
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
1548
+ --utrecht-nav-bar-background-color: transparent;
1549
+ --utrecht-nav-bar-color: transparent;
1545
1550
  --utrecht-topnav-link-focus-border-type: dotted;
1546
1551
  --utrecht-topnav-link-focus-text-decoration: none;
1547
1552
  --utrecht-navigation-border-block-end-color: transparent;
@@ -1577,15 +1582,15 @@
1577
1582
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
1578
1583
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
1579
1584
  --utrecht-ordered-list-item-padding-inline-start: 0;
1585
+ --utrecht-page-body-padding-block-start: 0;
1586
+ --utrecht-page-body-padding-block-end: 0;
1587
+ --utrecht-page-body-padding-inline-start: 0;
1588
+ --utrecht-page-body-padding-inline-end: 0;
1580
1589
  --utrecht-page-body-content-padding-block-start: 0;
1581
1590
  --utrecht-page-body-content-padding-block-end: 1em;
1582
1591
  --utrecht-page-body-content-padding-inline-start: 2em;
1583
1592
  --utrecht-page-body-content-padding-inline-end: 2.4em;
1584
1593
  --utrecht-page-body-content-max-inline-size: 1184px;
1585
- --utrecht-page-body-padding-inline-end: 0;
1586
- --utrecht-page-body-padding-inline-start: 0;
1587
- --utrecht-page-body-padding-block-end: 0;
1588
- --utrecht-page-body-padding-block-start: 0;
1589
1594
  --utrecht-page-content-padding-block-start: 2em;
1590
1595
  --utrecht-page-content-padding-block-end: 2em;
1591
1596
  --utrecht-page-footer-content-max-inline-size: 1184px;
@@ -1595,10 +1600,10 @@
1595
1600
  --utrecht-page-header-padding-inline-end: 0;
1596
1601
  --utrecht-page-header-content-padding-block-start: 1.8em;
1597
1602
  --utrecht-page-header-content-padding-block-end: 1em;
1598
- --utrecht-page-header-content-padding-inline-start: 2em;
1599
- --utrecht-page-header-content-padding-inline-end: 2.4em;
1600
- --utrecht-page-header-content-max-inline-size: 1184px;
1601
1603
  --utrecht-page-header-content-padding-inline: 2em;
1604
+ --utrecht-page-header-content-max-inline-size: 1184px;
1605
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
1606
+ --utrecht-page-header-content-padding-inline-start: 2em;
1602
1607
  --utrecht-page-margin-inline-start: 2em;
1603
1608
  --utrecht-page-margin-inline-end: 2em;
1604
1609
  --utrecht-page-max-inline-size: 1184px;
@@ -1659,7 +1664,6 @@
1659
1664
  --utrecht-table-cell-icon-size: 1em;
1660
1665
  --utrecht-textarea-border-block-end-width: 3px;
1661
1666
  --utrecht-textarea-border-bottom-width: 3px;
1662
- --utrecht-textbox-border-bottom-width: 3px;
1663
1667
  --utrecht-tooltip-border-radius: 0;
1664
1668
  --utrecht-tooltip-border-width: 1px;
1665
1669
  --utrecht-toptask-link-line-height: 1.2;
@@ -2139,8 +2143,8 @@
2139
2143
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
2140
2144
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
2141
2145
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
2142
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
2143
- --utrecht-nav-bar-color: var(--utrecht-color-black);
2146
+ --utrecht-nav-bar-content-background-color: var(--utrecht-color-white);
2147
+ --utrecht-nav-bar-content-color: var(--utrecht-color-black);
2144
2148
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
2145
2149
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
2146
2150
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -2204,9 +2208,9 @@
2204
2208
  --utrecht-page-footer-color: var(--utrecht-color-white);
2205
2209
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
2206
2210
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
2211
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
2207
2212
  --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
2208
2213
  --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
2209
- --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
2210
2214
  --utrecht-page-header-content-background-color: var(--utrecht-color-white);
2211
2215
  --utrecht-page-header-content-color: var(--utrecht-color-black);
2212
2216
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
package/dist/index.d.ts CHANGED
@@ -481,6 +481,7 @@ export const utrechtSpaceColumn3xl: string;
481
481
  export const utrechtSpaceColumn4xl: string;
482
482
  /** Extra Large 5 */
483
483
  export const utrechtSpaceColumn5xl: string;
484
+ export const utrechtTextboxBorderBottomWidth: string;
484
485
  export const utrechtDataListMarginBlockEnd: string;
485
486
  export const utrechtDataListMarginBlockStart: string;
486
487
  export const utrechtDataListItemKeyFontWeight: string;
@@ -749,6 +750,8 @@ export const utrechtMarkBackgroundColor: string;
749
750
  export const utrechtMarkColor: string;
750
751
  export const utrechtNavBarBackgroundColor: string;
751
752
  export const utrechtNavBarColor: string;
753
+ export const utrechtNavBarContentBackgroundColor: string;
754
+ export const utrechtNavBarContentColor: string;
752
755
  export const utrechtNavBarContentMaxInlineSize: string;
753
756
  export const utrechtNavBarLinkPaddingBlockEnd: string;
754
757
  export const utrechtNavBarLinkPaddingBlockStart: string;
@@ -849,6 +852,10 @@ export const utrechtOrderedListPaddingInlineStart: string;
849
852
  export const utrechtOrderedListItemMarginBlockStart: string;
850
853
  export const utrechtOrderedListItemMarginBlockEnd: string;
851
854
  export const utrechtOrderedListItemPaddingInlineStart: number;
855
+ export const utrechtPageBodyPaddingBlockStart: number;
856
+ export const utrechtPageBodyPaddingBlockEnd: number;
857
+ export const utrechtPageBodyPaddingInlineStart: number;
858
+ export const utrechtPageBodyPaddingInlineEnd: number;
852
859
  export const utrechtPageBodyContentBackgroundColor: string;
853
860
  export const utrechtPageBodyContentColor: string;
854
861
  export const utrechtPageBodyContentPaddingBlockStart: number;
@@ -856,19 +863,15 @@ export const utrechtPageBodyContentPaddingBlockEnd: string;
856
863
  export const utrechtPageBodyContentPaddingInlineStart: string;
857
864
  export const utrechtPageBodyContentPaddingInlineEnd: string;
858
865
  export const utrechtPageBodyContentMaxInlineSize: string;
859
- export const utrechtPageBodyPaddingInlineEnd: string;
860
- export const utrechtPageBodyPaddingInlineStart: string;
861
- export const utrechtPageBodyPaddingBlockEnd: string;
862
- export const utrechtPageBodyPaddingBlockStart: string;
863
866
  export const utrechtPageContentPaddingBlockStart: string;
864
867
  export const utrechtPageContentPaddingBlockEnd: string;
865
868
  export const utrechtPageFooterColor: string;
866
869
  export const utrechtPageFooterBackgroundColor: string;
867
870
  export const utrechtPageFooterBackgroundImage: string;
871
+ export const utrechtPageFooterContentPaddingInline: string;
868
872
  export const utrechtPageFooterContentPaddingBlockEnd: string;
869
873
  export const utrechtPageFooterContentPaddingBlockStart: string;
870
874
  export const utrechtPageFooterContentMaxInlineSize: string;
871
- export const utrechtPageFooterContentPaddingInline: string;
872
875
  export const utrechtPageHeaderPaddingBlockStart: number;
873
876
  export const utrechtPageHeaderPaddingBlockEnd: number;
874
877
  export const utrechtPageHeaderPaddingInlineStart: number;
@@ -877,10 +880,10 @@ export const utrechtPageHeaderContentBackgroundColor: string;
877
880
  export const utrechtPageHeaderContentColor: string;
878
881
  export const utrechtPageHeaderContentPaddingBlockStart: string;
879
882
  export const utrechtPageHeaderContentPaddingBlockEnd: string;
880
- export const utrechtPageHeaderContentPaddingInlineStart: string;
881
- export const utrechtPageHeaderContentPaddingInlineEnd: string;
882
- export const utrechtPageHeaderContentMaxInlineSize: string;
883
883
  export const utrechtPageHeaderContentPaddingInline: string;
884
+ export const utrechtPageHeaderContentMaxInlineSize: string;
885
+ export const utrechtPageHeaderContentPaddingInlineEnd: string;
886
+ export const utrechtPageHeaderContentPaddingInlineStart: string;
884
887
  export const utrechtPageBackgroundColor: string;
885
888
  export const utrechtPageColor: string;
886
889
  export const utrechtPageMarginInlineStart: string;
@@ -1091,7 +1094,6 @@ export const utrechtTableRowAlternateEvenColor: string;
1091
1094
  export const utrechtTextareaBorderBlockEndWidth: string;
1092
1095
  export const utrechtTextareaBorderBottomWidth: string;
1093
1096
  export const utrechtTextareaLineHeight: string;
1094
- export const utrechtTextboxBorderBottomWidth: string;
1095
1097
  export const utrechtTooltipBackgroundColor: string;
1096
1098
  export const utrechtTooltipBorderColor: string;
1097
1099
  export const utrechtTooltipBorderRadius: number;
package/dist/index.flat.json CHANGED
@@ -801,8 +801,10 @@
801
801
  "utrechtMarkColor": "hsl(0 0% 0%)",
802
802
  "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
803
803
  "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
804
- "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
805
- "utrechtNavBarColor": "hsl(0 0% 0%)",
804
+ "utrechtNavBarBackgroundColor": "transparent",
805
+ "utrechtNavBarColor": "transparent",
806
+ "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
807
+ "utrechtNavBarContentColor": "hsl(0 0% 0%)",
806
808
  "utrechtNavBarContentMaxInlineSize": "1184px",
807
809
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
808
810
  "utrechtNavBarLinkPaddingBlockStart": "8px",