@utrecht/design-tokens 3.2.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 (54) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +62 -0
  3. package/dist/_mixin.scss +62 -0
  4. package/dist/_variables.scss +62 -0
  5. package/dist/dark/_mixin-theme.scss +62 -0
  6. package/dist/dark/_mixin.scss +62 -0
  7. package/dist/dark/_variables.scss +62 -0
  8. package/dist/dark/index.cjs +63 -1
  9. package/dist/dark/index.css +62 -0
  10. package/dist/dark/index.d.ts +63 -1
  11. package/dist/dark/index.flat.json +62 -0
  12. package/dist/dark/index.json +5634 -3521
  13. package/dist/dark/index.mjs +63 -1
  14. package/dist/dark/index.tokens.json +558 -10
  15. package/dist/dark/list.json +5634 -3521
  16. package/dist/dark/list.mjs +5634 -3521
  17. package/dist/dark/property.css +58 -0
  18. package/dist/dark/root.css +62 -0
  19. package/dist/dark/theme-prince-xml.css +62 -0
  20. package/dist/dark/theme.css +62 -0
  21. package/dist/dark/tokens.cjs +2623 -24
  22. package/dist/dark/tokens.d.ts +324 -3
  23. package/dist/dark/tokens.json +2623 -24
  24. package/dist/dark/variables.cjs +63 -1
  25. package/dist/dark/variables.css +62 -0
  26. package/dist/dark/variables.d.ts +63 -1
  27. package/dist/dark/variables.json +62 -0
  28. package/dist/dark/variables.less +62 -0
  29. package/dist/dark/variables.mjs +63 -1
  30. package/dist/index.cjs +63 -1
  31. package/dist/index.css +124 -0
  32. package/dist/index.d.ts +63 -1
  33. package/dist/index.flat.json +62 -0
  34. package/dist/index.json +5650 -3537
  35. package/dist/index.mjs +63 -1
  36. package/dist/index.tokens.json +558 -10
  37. package/dist/list.json +5650 -3537
  38. package/dist/list.mjs +5650 -3537
  39. package/dist/property.css +58 -0
  40. package/dist/root.css +62 -0
  41. package/dist/theme-prince-xml.css +62 -0
  42. package/dist/theme.css +62 -0
  43. package/dist/tokens.cjs +2623 -24
  44. package/dist/tokens.d.ts +324 -3
  45. package/dist/tokens.json +2623 -24
  46. package/dist/variables.cjs +63 -1
  47. package/dist/variables.css +62 -0
  48. package/dist/variables.d.ts +63 -1
  49. package/dist/variables.json +62 -0
  50. package/dist/variables.less +62 -0
  51. package/dist/variables.mjs +63 -1
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +229 -0
  54. package/src/component/utrecht/tooltip.tokens.json +15 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
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
+
9
+ ## 3.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - f877f78: Initial version of the Tooltip component.
14
+
3
15
  ## 3.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -103,6 +103,8 @@
103
103
  --utrecht-toptask-link-min-inline-size: 15rem;
104
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
105
105
  --utrecht-toptask-link-line-height: 1.2;
106
+ --utrecht-tooltip-border-width: 1px;
107
+ --utrecht-tooltip-border-radius: 0;
106
108
  --utrecht-textbox-border-bottom-width: 3px;
107
109
  --utrecht-textarea-border-bottom-width: 3px;
108
110
  --utrecht-textarea-border-block-end-width: 3px;
@@ -191,6 +193,30 @@
191
193
  --utrecht-ordered-list-margin-block-start: 0;
192
194
  --utrecht-number-data-negative-color: red;
193
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;
194
220
  --utrecht-topnav-link-focus-text-decoration: none;
195
221
  --utrecht-topnav-link-focus-border-type: dotted;
196
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -504,6 +530,13 @@
504
530
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
505
531
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
506
532
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
533
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
534
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
535
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
536
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
537
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
538
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
539
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
507
540
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
508
541
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
509
542
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -614,6 +647,34 @@
614
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
615
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
616
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);
617
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
618
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
619
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -692,6 +753,7 @@
692
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
693
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
694
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);
695
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
696
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
697
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/_mixin.scss CHANGED
@@ -103,6 +103,8 @@
103
103
  --utrecht-toptask-link-min-inline-size: 15rem;
104
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
105
105
  --utrecht-toptask-link-line-height: 1.2;
106
+ --utrecht-tooltip-border-width: 1px;
107
+ --utrecht-tooltip-border-radius: 0;
106
108
  --utrecht-textbox-border-bottom-width: 3px;
107
109
  --utrecht-textarea-border-bottom-width: 3px;
108
110
  --utrecht-textarea-border-block-end-width: 3px;
@@ -191,6 +193,30 @@
191
193
  --utrecht-ordered-list-margin-block-start: 0;
192
194
  --utrecht-number-data-negative-color: red;
193
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;
194
220
  --utrecht-topnav-link-focus-text-decoration: none;
195
221
  --utrecht-topnav-link-focus-border-type: dotted;
196
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -504,6 +530,13 @@
504
530
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
505
531
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
506
532
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
533
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
534
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
535
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
536
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
537
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
538
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
539
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
507
540
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
508
541
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
509
542
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -614,6 +647,34 @@
614
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
615
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
616
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);
617
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
618
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
619
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -692,6 +753,7 @@
692
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
693
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
694
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);
695
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
696
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
697
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/_variables.scss CHANGED
@@ -101,6 +101,8 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
101
101
  $utrecht-toptask-link-min-inline-size: 15rem;
102
102
  $utrecht-toptask-link-min-block-size: 8.25rem;
103
103
  $utrecht-toptask-link-line-height: 1.2;
104
+ $utrecht-tooltip-border-width: 1px;
105
+ $utrecht-tooltip-border-radius: 0;
104
106
  $utrecht-textbox-border-bottom-width: 3px;
105
107
  $utrecht-textarea-border-bottom-width: 3px;
106
108
  $utrecht-textarea-border-block-end-width: 3px;
@@ -189,6 +191,30 @@ $utrecht-ordered-list-margin-block-end: 1em;
189
191
  $utrecht-ordered-list-margin-block-start: 0;
190
192
  $utrecht-number-data-negative-color: red;
191
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;
192
218
  $utrecht-topnav-link-focus-text-decoration: none;
193
219
  $utrecht-topnav-link-focus-border-type: dotted;
194
220
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -502,6 +528,13 @@ $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
502
528
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
503
529
  $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
504
530
  $utrecht-toptask-link-font-size: $utrecht-typography-scale-md-font-size;
531
+ $utrecht-tooltip-padding-inline: $utrecht-space-inline-md;
532
+ $utrecht-tooltip-padding-block: $utrecht-space-block-xs;
533
+ $utrecht-tooltip-font-size: $utrecht-typography-scale-md-font-size;
534
+ $utrecht-tooltip-font-family: $utrecht-typography-sans-serif-font-family;
535
+ $utrecht-tooltip-color: $utrecht-color-grey-40;
536
+ $utrecht-tooltip-border-color: $utrecht-color-grey-40;
537
+ $utrecht-tooltip-background-color: $utrecht-color-white;
505
538
  $utrecht-textarea-line-height: $utrecht-typography-line-height-md;
506
539
  $utrecht-table-row-alternate-even-color: $utrecht-color-black;
507
540
  $utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
@@ -612,6 +645,34 @@ $utrecht-page-body-content-color: $utrecht-color-black;
612
645
  $utrecht-page-body-content-background-color: $utrecht-color-white;
613
646
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
614
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;
615
676
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
616
677
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
617
678
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -690,6 +751,7 @@ $utrecht-index-char-nav-link-current-font-weight: $utrecht-typography-weight-sca
690
751
  $utrecht-index-char-nav-gap: $utrecht-space-column-sm;
691
752
  $utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
692
753
  $utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
754
+ $utrecht-icon-custom-margin-inline-end: $utrecht-space-inline-xs;
693
755
  $utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
694
756
  $utrecht-form-toggle-focus-border-color: $utrecht-color-black;
695
757
  $utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -103,6 +103,8 @@
103
103
  --utrecht-toptask-link-min-inline-size: 15rem;
104
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
105
105
  --utrecht-toptask-link-line-height: 1.2;
106
+ --utrecht-tooltip-border-width: 1px;
107
+ --utrecht-tooltip-border-radius: 0;
106
108
  --utrecht-textbox-border-bottom-width: 3px;
107
109
  --utrecht-textarea-border-bottom-width: 3px;
108
110
  --utrecht-textarea-border-block-end-width: 3px;
@@ -191,6 +193,30 @@
191
193
  --utrecht-ordered-list-margin-block-start: 0;
192
194
  --utrecht-number-data-negative-color: red;
193
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;
194
220
  --utrecht-topnav-link-focus-text-decoration: none;
195
221
  --utrecht-topnav-link-focus-border-type: dotted;
196
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -506,6 +532,13 @@
506
532
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
507
533
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
508
534
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
535
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
536
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
537
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
538
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
539
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
540
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
541
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
509
542
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
510
543
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
511
544
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -618,6 +651,34 @@
618
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
619
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
620
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);
621
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
622
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
623
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -696,6 +757,7 @@
696
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
697
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
698
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);
699
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
700
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
701
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/_mixin.scss CHANGED
@@ -103,6 +103,8 @@
103
103
  --utrecht-toptask-link-min-inline-size: 15rem;
104
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
105
105
  --utrecht-toptask-link-line-height: 1.2;
106
+ --utrecht-tooltip-border-width: 1px;
107
+ --utrecht-tooltip-border-radius: 0;
106
108
  --utrecht-textbox-border-bottom-width: 3px;
107
109
  --utrecht-textarea-border-bottom-width: 3px;
108
110
  --utrecht-textarea-border-block-end-width: 3px;
@@ -191,6 +193,30 @@
191
193
  --utrecht-ordered-list-margin-block-start: 0;
192
194
  --utrecht-number-data-negative-color: red;
193
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;
194
220
  --utrecht-topnav-link-focus-text-decoration: none;
195
221
  --utrecht-topnav-link-focus-border-type: dotted;
196
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -506,6 +532,13 @@
506
532
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
507
533
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
508
534
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
535
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
536
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
537
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
538
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
539
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
540
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
541
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
509
542
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
510
543
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
511
544
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -618,6 +651,34 @@
618
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
619
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
620
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);
621
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
622
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
623
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -696,6 +757,7 @@
696
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
697
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
698
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);
699
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
700
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
701
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/_variables.scss CHANGED
@@ -101,6 +101,8 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
101
101
  $utrecht-toptask-link-min-inline-size: 15rem;
102
102
  $utrecht-toptask-link-min-block-size: 8.25rem;
103
103
  $utrecht-toptask-link-line-height: 1.2;
104
+ $utrecht-tooltip-border-width: 1px;
105
+ $utrecht-tooltip-border-radius: 0;
104
106
  $utrecht-textbox-border-bottom-width: 3px;
105
107
  $utrecht-textarea-border-bottom-width: 3px;
106
108
  $utrecht-textarea-border-block-end-width: 3px;
@@ -189,6 +191,30 @@ $utrecht-ordered-list-margin-block-end: 1em;
189
191
  $utrecht-ordered-list-margin-block-start: 0;
190
192
  $utrecht-number-data-negative-color: red;
191
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;
192
218
  $utrecht-topnav-link-focus-text-decoration: none;
193
219
  $utrecht-topnav-link-focus-border-type: dotted;
194
220
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -504,6 +530,13 @@ $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
504
530
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
505
531
  $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
506
532
  $utrecht-toptask-link-font-size: $utrecht-typography-scale-md-font-size;
533
+ $utrecht-tooltip-padding-inline: $utrecht-space-inline-md;
534
+ $utrecht-tooltip-padding-block: $utrecht-space-block-xs;
535
+ $utrecht-tooltip-font-size: $utrecht-typography-scale-md-font-size;
536
+ $utrecht-tooltip-font-family: $utrecht-typography-sans-serif-font-family;
537
+ $utrecht-tooltip-color: $utrecht-color-grey-40;
538
+ $utrecht-tooltip-border-color: $utrecht-color-grey-40;
539
+ $utrecht-tooltip-background-color: $utrecht-color-white;
507
540
  $utrecht-textarea-line-height: $utrecht-typography-line-height-md;
508
541
  $utrecht-table-row-alternate-even-color: $utrecht-color-black;
509
542
  $utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
@@ -616,6 +649,34 @@ $utrecht-page-body-content-color: $utrecht-color-black;
616
649
  $utrecht-page-body-content-background-color: $utrecht-color-white;
617
650
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
618
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;
619
680
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
620
681
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
621
682
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -694,6 +755,7 @@ $utrecht-index-char-nav-link-current-font-weight: $utrecht-typography-weight-sca
694
755
  $utrecht-index-char-nav-gap: $utrecht-space-column-sm;
695
756
  $utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
696
757
  $utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
758
+ $utrecht-icon-custom-margin-inline-end: $utrecht-space-inline-xs;
697
759
  $utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
698
760
  $utrecht-form-toggle-focus-border-color: $utrecht-color-black;
699
761
  $utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;