@utrecht/design-tokens 3.3.0 → 3.4.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 (54) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +54 -1
  3. package/dist/_mixin.scss +54 -1
  4. package/dist/_variables.scss +54 -1
  5. package/dist/dark/_mixin-theme.scss +54 -1
  6. package/dist/dark/_mixin.scss +54 -1
  7. package/dist/dark/_variables.scss +54 -1
  8. package/dist/dark/index.cjs +55 -2
  9. package/dist/dark/index.css +54 -1
  10. package/dist/dark/index.d.ts +54 -1
  11. package/dist/dark/index.flat.json +54 -1
  12. package/dist/dark/index.json +1800 -2
  13. package/dist/dark/index.mjs +55 -2
  14. package/dist/dark/index.tokens.json +559 -12
  15. package/dist/dark/list.json +1800 -2
  16. package/dist/dark/list.mjs +1800 -2
  17. package/dist/dark/property.css +50 -0
  18. package/dist/dark/root.css +54 -1
  19. package/dist/dark/theme-prince-xml.css +54 -1
  20. package/dist/dark/theme.css +54 -1
  21. package/dist/dark/tokens.cjs +2355 -63
  22. package/dist/dark/tokens.d.ts +320 -4
  23. package/dist/dark/tokens.json +2347 -55
  24. package/dist/dark/variables.cjs +55 -2
  25. package/dist/dark/variables.css +54 -1
  26. package/dist/dark/variables.d.ts +54 -1
  27. package/dist/dark/variables.json +54 -1
  28. package/dist/dark/variables.less +54 -1
  29. package/dist/dark/variables.mjs +55 -2
  30. package/dist/index.cjs +55 -2
  31. package/dist/index.css +108 -2
  32. package/dist/index.d.ts +54 -1
  33. package/dist/index.flat.json +54 -1
  34. package/dist/index.json +1800 -2
  35. package/dist/index.mjs +55 -2
  36. package/dist/index.tokens.json +559 -12
  37. package/dist/list.json +1800 -2
  38. package/dist/list.mjs +1800 -2
  39. package/dist/property.css +50 -0
  40. package/dist/root.css +54 -1
  41. package/dist/theme-prince-xml.css +54 -1
  42. package/dist/theme.css +54 -1
  43. package/dist/tokens.cjs +2355 -63
  44. package/dist/tokens.d.ts +320 -4
  45. package/dist/tokens.json +2347 -55
  46. package/dist/variables.cjs +55 -2
  47. package/dist/variables.css +54 -1
  48. package/dist/variables.d.ts +54 -1
  49. package/dist/variables.json +54 -1
  50. package/dist/variables.less +54 -1
  51. package/dist/variables.mjs +55 -2
  52. package/package.json +1 -1
  53. package/src/component/utrecht/link-social.tokens.json +1 -1
  54. package/src/component/utrecht/navigation.tokens.json +229 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 3.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 4783080: Changed the background-color of the `link-social` component from `utrecht.color.red.40` to `utrecht.color.blue.35`
8
+
9
+ ## 3.4.0
10
+
11
+ ### Minor Changes
12
+
13
+ - f7e5550: Add Navigation-css component with mobile drawer support
14
+
3
15
  ## 3.3.0
4
16
 
5
17
  ### 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);
@@ -693,7 +745,7 @@
693
745
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
694
746
  --utrecht-link-social-color: var(--utrecht-color-white);
695
747
  --utrecht-link-social-border-color: var(--utrecht-color-white);
696
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
748
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
697
749
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
698
750
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
699
751
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
@@ -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);
@@ -693,7 +745,7 @@
693
745
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
694
746
  --utrecht-link-social-color: var(--utrecht-color-white);
695
747
  --utrecht-link-social-border-color: var(--utrecht-color-white);
696
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
748
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
697
749
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
698
750
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
699
751
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
@@ -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;
@@ -691,7 +743,7 @@ $utrecht-link-color: $utrecht-color-blue-35;
691
743
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
692
744
  $utrecht-link-social-color: $utrecht-color-white;
693
745
  $utrecht-link-social-border-color: $utrecht-color-white;
694
- $utrecht-link-social-background-color: $utrecht-color-red-40;
746
+ $utrecht-link-social-background-color: $utrecht-color-blue-35;
695
747
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
696
748
  $utrecht-link-list-link-column-gap: $utrecht-space-block-xs;
697
749
  $utrecht-link-list-row-gap: $utrecht-space-block-xs;
@@ -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);
@@ -697,7 +749,7 @@
697
749
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
698
750
  --utrecht-link-social-color: var(--utrecht-color-white);
699
751
  --utrecht-link-social-border-color: var(--utrecht-color-white);
700
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
752
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
701
753
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
702
754
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
703
755
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
@@ -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);
@@ -697,7 +749,7 @@
697
749
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
698
750
  --utrecht-link-social-color: var(--utrecht-color-white);
699
751
  --utrecht-link-social-border-color: var(--utrecht-color-white);
700
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
752
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
701
753
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
702
754
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
703
755
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
@@ -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;
@@ -695,7 +747,7 @@ $utrecht-link-color: $utrecht-color-blue-60;
695
747
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
696
748
  $utrecht-link-social-color: $utrecht-color-white;
697
749
  $utrecht-link-social-border-color: $utrecht-color-white;
698
- $utrecht-link-social-background-color: $utrecht-color-red-40;
750
+ $utrecht-link-social-background-color: $utrecht-color-blue-35;
699
751
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
700
752
  $utrecht-link-list-link-column-gap: $utrecht-space-block-xs;
701
753
  $utrecht-link-list-row-gap: $utrecht-space-block-xs;
@@ -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",
@@ -576,7 +577,7 @@ module.exports = {
576
577
  "utrechtLinkListLinkTextDecoration": "none",
577
578
  "utrechtLinkListIconSize": "14px",
578
579
  "utrechtLinkListIconInsetBlockStart": "0.15em",
579
- "utrechtLinkSocialBackgroundColor": "hsl(0 100% 40%)",
580
+ "utrechtLinkSocialBackgroundColor": "hsl(211 60% 35%)",
580
581
  "utrechtLinkSocialBorderColor": "hsl(0 0% 100%)",
581
582
  "utrechtLinkSocialBorderWidth": "2px",
582
583
  "utrechtLinkSocialColor": "hsl(0 0% 100%)",
@@ -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%)",