@utrecht/design-tokens 3.3.0 → 3.4.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 (53) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +53 -0
  3. package/dist/_mixin.scss +53 -0
  4. package/dist/_variables.scss +53 -0
  5. package/dist/dark/_mixin-theme.scss +53 -0
  6. package/dist/dark/_mixin.scss +53 -0
  7. package/dist/dark/_variables.scss +53 -0
  8. package/dist/dark/index.cjs +54 -1
  9. package/dist/dark/index.css +53 -0
  10. package/dist/dark/index.d.ts +54 -1
  11. package/dist/dark/index.flat.json +53 -0
  12. package/dist/dark/index.json +1798 -0
  13. package/dist/dark/index.mjs +54 -1
  14. package/dist/dark/index.tokens.json +472 -10
  15. package/dist/dark/list.json +1798 -0
  16. package/dist/dark/list.mjs +1798 -0
  17. package/dist/dark/property.css +50 -0
  18. package/dist/dark/root.css +53 -0
  19. package/dist/dark/theme-prince-xml.css +53 -0
  20. package/dist/dark/theme.css +53 -0
  21. package/dist/dark/tokens.cjs +2231 -24
  22. package/dist/dark/tokens.d.ts +274 -3
  23. package/dist/dark/tokens.json +2231 -24
  24. package/dist/dark/variables.cjs +54 -1
  25. package/dist/dark/variables.css +53 -0
  26. package/dist/dark/variables.d.ts +54 -1
  27. package/dist/dark/variables.json +53 -0
  28. package/dist/dark/variables.less +53 -0
  29. package/dist/dark/variables.mjs +54 -1
  30. package/dist/index.cjs +54 -1
  31. package/dist/index.css +106 -0
  32. package/dist/index.d.ts +54 -1
  33. package/dist/index.flat.json +53 -0
  34. package/dist/index.json +1798 -0
  35. package/dist/index.mjs +54 -1
  36. package/dist/index.tokens.json +472 -10
  37. package/dist/list.json +1798 -0
  38. package/dist/list.mjs +1798 -0
  39. package/dist/property.css +50 -0
  40. package/dist/root.css +53 -0
  41. package/dist/theme-prince-xml.css +53 -0
  42. package/dist/theme.css +53 -0
  43. package/dist/tokens.cjs +2231 -24
  44. package/dist/tokens.d.ts +274 -3
  45. package/dist/tokens.json +2231 -24
  46. package/dist/variables.cjs +54 -1
  47. package/dist/variables.css +53 -0
  48. package/dist/variables.d.ts +54 -1
  49. package/dist/variables.json +53 -0
  50. package/dist/variables.less +53 -0
  51. package/dist/variables.mjs +54 -1
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +229 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 3.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - f7e5550: Add Navigation-css component with mobile drawer support
8
+
3
9
  ## 3.3.0
4
10
 
5
11
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -193,6 +193,30 @@
193
193
  --utrecht-ordered-list-margin-block-start: 0;
194
194
  --utrecht-number-data-negative-color: red;
195
195
  --utrecht-number-data-positive-color: green;
196
+ --utrecht-navigation-toggle-button-offset-start: 16px;
197
+ --utrecht-navigation-toggle-button-offset-end: 16px;
198
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
199
+ --utrecht-navigation-list-mobile-inline-size: 100%;
200
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
201
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
202
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
203
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
204
+ --utrecht-navigation-link-gap: 8px;
205
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
206
+ --utrecht-navigation-link-border-inline-end-width: 1px;
207
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
208
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
209
+ --utrecht-navigation-item-border-block-start-width: 0;
210
+ --utrecht-navigation-item-border-block-start-color: transparent;
211
+ --utrecht-navigation-item-border-block-end-width: 0;
212
+ --utrecht-navigation-item-border-block-end-color: transparent;
213
+ --utrecht-navigation-drawer-min-inline-size: 100%;
214
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
215
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
216
+ --utrecht-navigation-border-block-start-width: 0;
217
+ --utrecht-navigation-border-block-start-color: transparent;
218
+ --utrecht-navigation-border-block-end-width: 0;
219
+ --utrecht-navigation-border-block-end-color: transparent;
196
220
  --utrecht-topnav-link-focus-text-decoration: none;
197
221
  --utrecht-topnav-link-focus-border-type: dotted;
198
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -623,6 +647,34 @@
623
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
624
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
625
649
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
650
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
651
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
652
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
653
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
654
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
655
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
656
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
657
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
658
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
659
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
660
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
661
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
662
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
663
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
664
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
665
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
666
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
668
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
669
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
670
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
671
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
672
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
673
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
674
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
677
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
626
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
627
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
628
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -701,6 +753,7 @@
701
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
702
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
703
755
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
756
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
704
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
705
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
706
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/_mixin.scss CHANGED
@@ -193,6 +193,30 @@
193
193
  --utrecht-ordered-list-margin-block-start: 0;
194
194
  --utrecht-number-data-negative-color: red;
195
195
  --utrecht-number-data-positive-color: green;
196
+ --utrecht-navigation-toggle-button-offset-start: 16px;
197
+ --utrecht-navigation-toggle-button-offset-end: 16px;
198
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
199
+ --utrecht-navigation-list-mobile-inline-size: 100%;
200
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
201
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
202
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
203
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
204
+ --utrecht-navigation-link-gap: 8px;
205
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
206
+ --utrecht-navigation-link-border-inline-end-width: 1px;
207
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
208
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
209
+ --utrecht-navigation-item-border-block-start-width: 0;
210
+ --utrecht-navigation-item-border-block-start-color: transparent;
211
+ --utrecht-navigation-item-border-block-end-width: 0;
212
+ --utrecht-navigation-item-border-block-end-color: transparent;
213
+ --utrecht-navigation-drawer-min-inline-size: 100%;
214
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
215
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
216
+ --utrecht-navigation-border-block-start-width: 0;
217
+ --utrecht-navigation-border-block-start-color: transparent;
218
+ --utrecht-navigation-border-block-end-width: 0;
219
+ --utrecht-navigation-border-block-end-color: transparent;
196
220
  --utrecht-topnav-link-focus-text-decoration: none;
197
221
  --utrecht-topnav-link-focus-border-type: dotted;
198
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -623,6 +647,34 @@
623
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
624
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
625
649
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
650
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
651
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
652
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
653
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
654
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
655
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
656
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
657
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
658
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
659
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
660
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
661
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
662
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
663
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
664
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
665
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
666
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
668
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
669
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
670
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
671
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
672
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
673
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
674
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
677
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
626
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
627
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
628
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -701,6 +753,7 @@
701
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
702
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
703
755
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
756
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
704
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
705
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
706
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/_variables.scss CHANGED
@@ -191,6 +191,30 @@ $utrecht-ordered-list-margin-block-end: 1em;
191
191
  $utrecht-ordered-list-margin-block-start: 0;
192
192
  $utrecht-number-data-negative-color: red;
193
193
  $utrecht-number-data-positive-color: green;
194
+ $utrecht-navigation-toggle-button-offset-start: 16px;
195
+ $utrecht-navigation-toggle-button-offset-end: 16px;
196
+ $utrecht-navigation-list-side-nav-inline-size: 100%;
197
+ $utrecht-navigation-list-mobile-inline-size: 100%;
198
+ $utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
199
+ $utrecht-navigation-link-mobile-transition-duration: 300ms;
200
+ $utrecht-navigation-link-mobile-min-block-size: 44px;
201
+ $utrecht-navigation-link-hover-decoration-thickness: 3px;
202
+ $utrecht-navigation-link-gap: 8px;
203
+ $utrecht-navigation-link-focus-text-decoration-thickness: 3px;
204
+ $utrecht-navigation-link-border-inline-end-width: 1px;
205
+ $utrecht-navigation-item-mobile-border-block-start-width: 1px;
206
+ $utrecht-navigation-item-mobile-border-block-end-width: 1px;
207
+ $utrecht-navigation-item-border-block-start-width: 0;
208
+ $utrecht-navigation-item-border-block-start-color: transparent;
209
+ $utrecht-navigation-item-border-block-end-width: 0;
210
+ $utrecht-navigation-item-border-block-end-color: transparent;
211
+ $utrecht-navigation-drawer-min-inline-size: 100%;
212
+ $utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
213
+ $utrecht-navigation-drawer-mobile-min-inline-size: 50%;
214
+ $utrecht-navigation-border-block-start-width: 0;
215
+ $utrecht-navigation-border-block-start-color: transparent;
216
+ $utrecht-navigation-border-block-end-width: 0;
217
+ $utrecht-navigation-border-block-end-color: transparent;
194
218
  $utrecht-topnav-link-focus-text-decoration: none;
195
219
  $utrecht-topnav-link-focus-border-type: dotted;
196
220
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -621,6 +645,34 @@ $utrecht-page-body-content-color: $utrecht-color-black;
621
645
  $utrecht-page-body-content-background-color: $utrecht-color-white;
622
646
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
623
647
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
648
+ $utrecht-navigation-marker-color: $utrecht-color-grey-80;
649
+ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
650
+ $utrecht-navigation-list-mobile-padding-inline-end: $utrecht-space-inline-md;
651
+ $utrecht-navigation-list-mobile-padding-block-end: $utrecht-space-block-xs;
652
+ $utrecht-navigation-list-mobile-background-color: $utrecht-color-white;
653
+ $utrecht-navigation-link-padding-block-start: $utrecht-space-block-md;
654
+ $utrecht-navigation-link-padding-block-end: $utrecht-space-block-md;
655
+ $utrecht-navigation-link-mobile-padding-inline-start: $utrecht-space-inline-md;
656
+ $utrecht-navigation-link-mobile-padding-block-start: $utrecht-space-block-xs;
657
+ $utrecht-navigation-link-mobile-padding-block-end: $utrecht-space-block-xs;
658
+ $utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
659
+ $utrecht-navigation-link-mobile-hover-color: $utrecht-color-blue-35;
660
+ $utrecht-navigation-link-mobile-hover-background-color: $utrecht-color-white;
661
+ $utrecht-navigation-link-mobile-color: $utrecht-color-blue-35;
662
+ $utrecht-navigation-link-mobile-background-color: $utrecht-color-white;
663
+ $utrecht-navigation-link-is-current-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
664
+ $utrecht-navigation-link-hover-color: $utrecht-color-white;
665
+ $utrecht-navigation-link-hover-background-color: $utrecht-color-black;
666
+ $utrecht-navigation-link-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
667
+ $utrecht-navigation-link-focus-background-color: $utrecht-color-yellow-80;
668
+ $utrecht-navigation-link-focus-color: $utrecht-color-black;
669
+ $utrecht-navigation-link-color: $utrecht-color-white;
670
+ $utrecht-navigation-link-border-color: $utrecht-color-grey-40;
671
+ $utrecht-navigation-link-background-color: $utrecht-color-grey-15;
672
+ $utrecht-navigation-link-active-focus-color: $utrecht-color-black;
673
+ $utrecht-navigation-link-active-color: $utrecht-color-white;
674
+ $utrecht-navigation-item-mobile-border-block-start-color: $utrecht-color-grey-80;
675
+ $utrecht-navigation-item-mobile-border-block-end-color: $utrecht-color-grey-80;
624
676
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
625
677
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
626
678
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -699,6 +751,7 @@ $utrecht-index-char-nav-link-current-font-weight: $utrecht-typography-weight-sca
699
751
  $utrecht-index-char-nav-gap: $utrecht-space-column-sm;
700
752
  $utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
701
753
  $utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
754
+ $utrecht-icon-custom-margin-inline-end: $utrecht-space-inline-xs;
702
755
  $utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
703
756
  $utrecht-form-toggle-focus-border-color: $utrecht-color-black;
704
757
  $utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -193,6 +193,30 @@
193
193
  --utrecht-ordered-list-margin-block-start: 0;
194
194
  --utrecht-number-data-negative-color: red;
195
195
  --utrecht-number-data-positive-color: green;
196
+ --utrecht-navigation-toggle-button-offset-start: 16px;
197
+ --utrecht-navigation-toggle-button-offset-end: 16px;
198
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
199
+ --utrecht-navigation-list-mobile-inline-size: 100%;
200
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
201
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
202
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
203
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
204
+ --utrecht-navigation-link-gap: 8px;
205
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
206
+ --utrecht-navigation-link-border-inline-end-width: 1px;
207
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
208
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
209
+ --utrecht-navigation-item-border-block-start-width: 0;
210
+ --utrecht-navigation-item-border-block-start-color: transparent;
211
+ --utrecht-navigation-item-border-block-end-width: 0;
212
+ --utrecht-navigation-item-border-block-end-color: transparent;
213
+ --utrecht-navigation-drawer-min-inline-size: 100%;
214
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
215
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
216
+ --utrecht-navigation-border-block-start-width: 0;
217
+ --utrecht-navigation-border-block-start-color: transparent;
218
+ --utrecht-navigation-border-block-end-width: 0;
219
+ --utrecht-navigation-border-block-end-color: transparent;
196
220
  --utrecht-topnav-link-focus-text-decoration: none;
197
221
  --utrecht-topnav-link-focus-border-type: dotted;
198
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -627,6 +651,34 @@
627
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
628
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
629
653
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
654
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
655
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
656
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
657
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
658
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
659
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
660
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
661
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
662
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
663
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
664
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
665
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
666
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
668
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
669
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
670
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
671
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
672
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
673
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
674
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
677
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
678
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
679
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
680
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
681
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
630
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
631
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
632
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -705,6 +757,7 @@
705
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
706
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
707
759
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
760
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
708
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
709
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
710
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/_mixin.scss CHANGED
@@ -193,6 +193,30 @@
193
193
  --utrecht-ordered-list-margin-block-start: 0;
194
194
  --utrecht-number-data-negative-color: red;
195
195
  --utrecht-number-data-positive-color: green;
196
+ --utrecht-navigation-toggle-button-offset-start: 16px;
197
+ --utrecht-navigation-toggle-button-offset-end: 16px;
198
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
199
+ --utrecht-navigation-list-mobile-inline-size: 100%;
200
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
201
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
202
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
203
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
204
+ --utrecht-navigation-link-gap: 8px;
205
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
206
+ --utrecht-navigation-link-border-inline-end-width: 1px;
207
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
208
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
209
+ --utrecht-navigation-item-border-block-start-width: 0;
210
+ --utrecht-navigation-item-border-block-start-color: transparent;
211
+ --utrecht-navigation-item-border-block-end-width: 0;
212
+ --utrecht-navigation-item-border-block-end-color: transparent;
213
+ --utrecht-navigation-drawer-min-inline-size: 100%;
214
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
215
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
216
+ --utrecht-navigation-border-block-start-width: 0;
217
+ --utrecht-navigation-border-block-start-color: transparent;
218
+ --utrecht-navigation-border-block-end-width: 0;
219
+ --utrecht-navigation-border-block-end-color: transparent;
196
220
  --utrecht-topnav-link-focus-text-decoration: none;
197
221
  --utrecht-topnav-link-focus-border-type: dotted;
198
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -627,6 +651,34 @@
627
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
628
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
629
653
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
654
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
655
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
656
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
657
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
658
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
659
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
660
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
661
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
662
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
663
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
664
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
665
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
666
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
668
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
669
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
670
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
671
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
672
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
673
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
674
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
677
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
678
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
679
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
680
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
681
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
630
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
631
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
632
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -705,6 +757,7 @@
705
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
706
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
707
759
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
760
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
708
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
709
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
710
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/_variables.scss CHANGED
@@ -191,6 +191,30 @@ $utrecht-ordered-list-margin-block-end: 1em;
191
191
  $utrecht-ordered-list-margin-block-start: 0;
192
192
  $utrecht-number-data-negative-color: red;
193
193
  $utrecht-number-data-positive-color: green;
194
+ $utrecht-navigation-toggle-button-offset-start: 16px;
195
+ $utrecht-navigation-toggle-button-offset-end: 16px;
196
+ $utrecht-navigation-list-side-nav-inline-size: 100%;
197
+ $utrecht-navigation-list-mobile-inline-size: 100%;
198
+ $utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
199
+ $utrecht-navigation-link-mobile-transition-duration: 300ms;
200
+ $utrecht-navigation-link-mobile-min-block-size: 44px;
201
+ $utrecht-navigation-link-hover-decoration-thickness: 3px;
202
+ $utrecht-navigation-link-gap: 8px;
203
+ $utrecht-navigation-link-focus-text-decoration-thickness: 3px;
204
+ $utrecht-navigation-link-border-inline-end-width: 1px;
205
+ $utrecht-navigation-item-mobile-border-block-start-width: 1px;
206
+ $utrecht-navigation-item-mobile-border-block-end-width: 1px;
207
+ $utrecht-navigation-item-border-block-start-width: 0;
208
+ $utrecht-navigation-item-border-block-start-color: transparent;
209
+ $utrecht-navigation-item-border-block-end-width: 0;
210
+ $utrecht-navigation-item-border-block-end-color: transparent;
211
+ $utrecht-navigation-drawer-min-inline-size: 100%;
212
+ $utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
213
+ $utrecht-navigation-drawer-mobile-min-inline-size: 50%;
214
+ $utrecht-navigation-border-block-start-width: 0;
215
+ $utrecht-navigation-border-block-start-color: transparent;
216
+ $utrecht-navigation-border-block-end-width: 0;
217
+ $utrecht-navigation-border-block-end-color: transparent;
194
218
  $utrecht-topnav-link-focus-text-decoration: none;
195
219
  $utrecht-topnav-link-focus-border-type: dotted;
196
220
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -625,6 +649,34 @@ $utrecht-page-body-content-color: $utrecht-color-black;
625
649
  $utrecht-page-body-content-background-color: $utrecht-color-white;
626
650
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
627
651
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
652
+ $utrecht-navigation-marker-color: $utrecht-color-grey-80;
653
+ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
654
+ $utrecht-navigation-list-mobile-padding-inline-end: $utrecht-space-inline-md;
655
+ $utrecht-navigation-list-mobile-padding-block-end: $utrecht-space-block-xs;
656
+ $utrecht-navigation-list-mobile-background-color: $utrecht-color-white;
657
+ $utrecht-navigation-link-padding-block-start: $utrecht-space-block-md;
658
+ $utrecht-navigation-link-padding-block-end: $utrecht-space-block-md;
659
+ $utrecht-navigation-link-mobile-padding-inline-start: $utrecht-space-inline-md;
660
+ $utrecht-navigation-link-mobile-padding-block-start: $utrecht-space-block-xs;
661
+ $utrecht-navigation-link-mobile-padding-block-end: $utrecht-space-block-xs;
662
+ $utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
663
+ $utrecht-navigation-link-mobile-hover-color: $utrecht-color-blue-35;
664
+ $utrecht-navigation-link-mobile-hover-background-color: $utrecht-color-white;
665
+ $utrecht-navigation-link-mobile-color: $utrecht-color-blue-35;
666
+ $utrecht-navigation-link-mobile-background-color: $utrecht-color-white;
667
+ $utrecht-navigation-link-is-current-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
668
+ $utrecht-navigation-link-hover-color: $utrecht-color-white;
669
+ $utrecht-navigation-link-hover-background-color: $utrecht-color-black;
670
+ $utrecht-navigation-link-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
671
+ $utrecht-navigation-link-focus-background-color: $utrecht-color-yellow-80;
672
+ $utrecht-navigation-link-focus-color: $utrecht-color-black;
673
+ $utrecht-navigation-link-color: $utrecht-color-white;
674
+ $utrecht-navigation-link-border-color: $utrecht-color-grey-40;
675
+ $utrecht-navigation-link-background-color: $utrecht-color-grey-15;
676
+ $utrecht-navigation-link-active-focus-color: $utrecht-color-black;
677
+ $utrecht-navigation-link-active-color: $utrecht-color-white;
678
+ $utrecht-navigation-item-mobile-border-block-start-color: $utrecht-color-grey-80;
679
+ $utrecht-navigation-item-mobile-border-block-end-color: $utrecht-color-grey-80;
628
680
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
629
681
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
630
682
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -703,6 +755,7 @@ $utrecht-index-char-nav-link-current-font-weight: $utrecht-typography-weight-sca
703
755
  $utrecht-index-char-nav-gap: $utrecht-space-column-sm;
704
756
  $utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
705
757
  $utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
758
+ $utrecht-icon-custom-margin-inline-end: $utrecht-space-inline-xs;
706
759
  $utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
707
760
  $utrecht-form-toggle-focus-border-color: $utrecht-color-black;
708
761
  $utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;
package/dist/dark/index.cjs CHANGED
@@ -109,8 +109,8 @@ module.exports = {
109
109
  "utrechtBreadcrumbNavLinkHoverColor": "hsl(211 60% 40%)",
110
110
  "utrechtBreadcrumbNavLinkHoverTextDecoration": "underline",
111
111
  "utrechtBreadcrumbNavLinkDisabledColor": "hsl(0 0% 40%)",
112
- "utrechtBreadcrumbNavLinkTextDecoration": "none",
113
112
  "utrechtBreadcrumbNavLinkIconSize": "16px",
113
+ "utrechtBreadcrumbNavLinkTextDecoration": "none",
114
114
  "utrechtBreadcrumbNavSeparatorColor": "hsl(211 60% 35%)",
115
115
  "utrechtBreadcrumbNavSeparatorIconSize": "0.875rem",
116
116
  "utrechtBreadcrumbNavArrowsLinkBackgroundColor": "hsl(0 0% 90%)",
@@ -566,6 +566,7 @@ module.exports = {
566
566
  "utrechtHeadingFontWeight": "700",
567
567
  "utrechtIconSize": "48px",
568
568
  "utrechtIconBaselineInsetBlockStart": "0.125em",
569
+ "utrechtIconCustomMarginInlineEnd": "8px",
569
570
  "utrechtIndexCharNavMarginBlockStart": "20px",
570
571
  "utrechtIndexCharNavMarginBlockEnd": "16px",
571
572
  "utrechtIndexCharNavGap": "12px",
@@ -682,6 +683,58 @@ module.exports = {
682
683
  "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",
683
684
  "utrechtTopnavLinkFocusOutlineColor": "hsl(0 0% 0%)",
684
685
  "utrechtTopnavLinkHoverBackgroundColor": "hsl(0 0% 0%)",
686
+ "utrechtNavigationBorderBlockEndColor": "transparent",
687
+ "utrechtNavigationBorderBlockEndWidth": "0",
688
+ "utrechtNavigationBorderBlockStartColor": "transparent",
689
+ "utrechtNavigationBorderBlockStartWidth": "0",
690
+ "utrechtNavigationDrawerMobileMinInlineSize": "50%",
691
+ "utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
692
+ "utrechtNavigationDrawerMinInlineSize": "100%",
693
+ "utrechtNavigationItemBorderBlockEndColor": "transparent",
694
+ "utrechtNavigationItemBorderBlockEndWidth": "0",
695
+ "utrechtNavigationItemBorderBlockStartColor": "transparent",
696
+ "utrechtNavigationItemBorderBlockStartWidth": "0",
697
+ "utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
698
+ "utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
699
+ "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
700
+ "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
701
+ "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
702
+ "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
703
+ "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
704
+ "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
705
+ "utrechtNavigationLinkBorderInlineEndWidth": "1px",
706
+ "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
707
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
708
+ "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
709
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
710
+ "utrechtNavigationLinkFontWeight": "400",
711
+ "utrechtNavigationLinkGap": "8px",
712
+ "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
713
+ "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
714
+ "utrechtNavigationLinkHoverDecorationThickness": "3px",
715
+ "utrechtNavigationLinkIsCurrentFontWeight": "700",
716
+ "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
717
+ "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
718
+ "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
719
+ "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
720
+ "utrechtNavigationLinkMobileHoverFontWeight": "700",
721
+ "utrechtNavigationLinkMobileMinBlockSize": "44px",
722
+ "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
723
+ "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
724
+ "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
725
+ "utrechtNavigationLinkMobileTransitionDuration": "300ms",
726
+ "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
727
+ "utrechtNavigationLinkPaddingBlockEnd": "16px",
728
+ "utrechtNavigationLinkPaddingBlockStart": "16px",
729
+ "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
730
+ "utrechtNavigationListMobileInlineSize": "100%",
731
+ "utrechtNavigationListMobilePaddingBlockEnd": "8px",
732
+ "utrechtNavigationListMobilePaddingInlineEnd": "16px",
733
+ "utrechtNavigationListMobilePaddingInlineStart": "16px",
734
+ "utrechtNavigationListSideNavInlineSize": "100%",
735
+ "utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
736
+ "utrechtNavigationToggleButtonOffsetEnd": "16px",
737
+ "utrechtNavigationToggleButtonOffsetStart": "16px",
685
738
  "utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
686
739
  "utrechtNumberBadgeBorderRadius": "1rem",
687
740
  "utrechtNumberBadgeColor": "hsl(0 0% 100%)",
package/dist/dark/index.css CHANGED
@@ -198,6 +198,30 @@
198
198
  --utrecht-ordered-list-margin-block-start: 0;
199
199
  --utrecht-number-data-negative-color: red;
200
200
  --utrecht-number-data-positive-color: green;
201
+ --utrecht-navigation-toggle-button-offset-start: 16px;
202
+ --utrecht-navigation-toggle-button-offset-end: 16px;
203
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
204
+ --utrecht-navigation-list-mobile-inline-size: 100%;
205
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
206
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
207
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
208
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
209
+ --utrecht-navigation-link-gap: 8px;
210
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
211
+ --utrecht-navigation-link-border-inline-end-width: 1px;
212
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
213
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
214
+ --utrecht-navigation-item-border-block-start-width: 0;
215
+ --utrecht-navigation-item-border-block-start-color: transparent;
216
+ --utrecht-navigation-item-border-block-end-width: 0;
217
+ --utrecht-navigation-item-border-block-end-color: transparent;
218
+ --utrecht-navigation-drawer-min-inline-size: 100%;
219
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
220
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
221
+ --utrecht-navigation-border-block-start-width: 0;
222
+ --utrecht-navigation-border-block-start-color: transparent;
223
+ --utrecht-navigation-border-block-end-width: 0;
224
+ --utrecht-navigation-border-block-end-color: transparent;
201
225
  --utrecht-topnav-link-focus-text-decoration: none;
202
226
  --utrecht-topnav-link-focus-border-type: dotted;
203
227
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -632,6 +656,34 @@
632
656
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
633
657
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
634
658
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
659
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
660
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
661
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
662
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
663
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
664
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
665
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
666
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
667
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
668
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
669
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
670
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
671
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
672
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
673
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
674
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
675
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
677
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
678
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
679
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
680
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
681
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
682
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
683
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
684
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
685
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
686
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
635
687
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
636
688
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
637
689
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -710,6 +762,7 @@
710
762
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
711
763
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
712
764
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
765
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
713
766
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
714
767
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
715
768
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);