@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
@@ -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%)",
@@ -176,6 +176,30 @@
176
176
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
177
177
  --utrecht-number-data-positive-color: green;
178
178
  --utrecht-number-data-negative-color: red;
179
+ --utrecht-navigation-toggle-button-offset-start: 16px;
180
+ --utrecht-navigation-toggle-button-offset-end: 16px;
181
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
182
+ --utrecht-navigation-list-mobile-inline-size: 100%;
183
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
184
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
185
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
186
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
187
+ --utrecht-navigation-link-gap: 8px;
188
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
189
+ --utrecht-navigation-link-border-inline-end-width: 1px;
190
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
191
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
192
+ --utrecht-navigation-item-border-block-start-width: 0;
193
+ --utrecht-navigation-item-border-block-start-color: transparent;
194
+ --utrecht-navigation-item-border-block-end-width: 0;
195
+ --utrecht-navigation-item-border-block-end-color: transparent;
196
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
197
+ --utrecht-navigation-drawer-min-inline-size: 100%;
198
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
199
+ --utrecht-navigation-border-block-start-width: 0;
200
+ --utrecht-navigation-border-block-start-color: transparent;
201
+ --utrecht-navigation-border-block-end-width: 0;
202
+ --utrecht-navigation-border-block-end-color: transparent;
179
203
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
180
204
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
181
205
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -556,6 +580,34 @@
556
580
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
557
581
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
558
582
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
583
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
584
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
585
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
586
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
587
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
588
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
589
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
590
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
591
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
592
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
593
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
594
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
595
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
596
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
597
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
598
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
599
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
600
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
601
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
602
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
603
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
604
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
605
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
606
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
607
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
608
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
609
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
610
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
559
611
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
560
612
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
561
613
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -618,6 +670,7 @@
618
670
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
619
671
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
620
672
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
673
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
621
674
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
622
675
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
623
676
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -118,8 +118,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration : string;
118
118
  export const utrechtBreadcrumbNavLinkHoverColor : string;
119
119
  export const utrechtBreadcrumbNavLinkHoverTextDecoration : string;
120
120
  export const utrechtBreadcrumbNavLinkDisabledColor : string;
121
- export const utrechtBreadcrumbNavLinkTextDecoration : string;
122
121
  export const utrechtBreadcrumbNavLinkIconSize : string;
122
+ export const utrechtBreadcrumbNavLinkTextDecoration : string;
123
123
  export const utrechtBreadcrumbNavSeparatorColor : string;
124
124
  export const utrechtBreadcrumbNavSeparatorIconSize : string;
125
125
  export const utrechtBreadcrumbNavArrowsLinkBackgroundColor : string;
@@ -629,6 +629,7 @@ export const utrechtHeading6LineHeight : string;
629
629
  export const utrechtHeadingFontWeight : string;
630
630
  export const utrechtIconSize : string;
631
631
  export const utrechtIconBaselineInsetBlockStart : string;
632
+ export const utrechtIconCustomMarginInlineEnd : string;
632
633
  export const utrechtIndexCharNavMarginBlockStart : string;
633
634
  export const utrechtIndexCharNavMarginBlockEnd : string;
634
635
  export const utrechtIndexCharNavGap : string;
@@ -745,6 +746,58 @@ export const utrechtTopnavLinkFocusTextDecoration : string;
745
746
  export const utrechtTopnavLinkFocusBackgroundColor : string;
746
747
  export const utrechtTopnavLinkFocusOutlineColor : string;
747
748
  export const utrechtTopnavLinkHoverBackgroundColor : string;
749
+ export const utrechtNavigationBorderBlockEndColor : string;
750
+ export const utrechtNavigationBorderBlockEndWidth : string;
751
+ export const utrechtNavigationBorderBlockStartColor : string;
752
+ export const utrechtNavigationBorderBlockStartWidth : string;
753
+ export const utrechtNavigationDrawerMobileMinInlineSize : string;
754
+ export const utrechtNavigationDrawerBackdropBackgroundColor : string;
755
+ export const utrechtNavigationDrawerMinInlineSize : string;
756
+ export const utrechtNavigationItemBorderBlockEndColor : string;
757
+ export const utrechtNavigationItemBorderBlockEndWidth : string;
758
+ export const utrechtNavigationItemBorderBlockStartColor : string;
759
+ export const utrechtNavigationItemBorderBlockStartWidth : string;
760
+ export const utrechtNavigationItemMobileBorderBlockEndColor : string;
761
+ export const utrechtNavigationItemMobileBorderBlockEndWidth : string;
762
+ export const utrechtNavigationItemMobileBorderBlockStartColor : string;
763
+ export const utrechtNavigationItemMobileBorderBlockStartWidth : string;
764
+ export const utrechtNavigationLinkActiveColor : string;
765
+ export const utrechtNavigationLinkActiveFocusColor : string;
766
+ export const utrechtNavigationLinkBackgroundColor : string;
767
+ export const utrechtNavigationLinkBorderColor : string;
768
+ export const utrechtNavigationLinkBorderInlineEndWidth : string;
769
+ export const utrechtNavigationLinkColor : string;
770
+ export const utrechtNavigationLinkFocusColor : string;
771
+ export const utrechtNavigationLinkFocusTextDecorationThickness : string;
772
+ export const utrechtNavigationLinkFocusBackgroundColor : string;
773
+ export const utrechtNavigationLinkFontWeight : string;
774
+ export const utrechtNavigationLinkGap : string;
775
+ export const utrechtNavigationLinkHoverBackgroundColor : string;
776
+ export const utrechtNavigationLinkHoverColor : string;
777
+ export const utrechtNavigationLinkHoverDecorationThickness : string;
778
+ export const utrechtNavigationLinkIsCurrentFontWeight : string;
779
+ export const utrechtNavigationLinkMobileBackgroundColor : string;
780
+ export const utrechtNavigationLinkMobileColor : string;
781
+ export const utrechtNavigationLinkMobileHoverBackgroundColor : string;
782
+ export const utrechtNavigationLinkMobileHoverColor : string;
783
+ export const utrechtNavigationLinkMobileHoverFontWeight : string;
784
+ export const utrechtNavigationLinkMobileMinBlockSize : string;
785
+ export const utrechtNavigationLinkMobilePaddingBlockEnd : string;
786
+ export const utrechtNavigationLinkMobilePaddingBlockStart : string;
787
+ export const utrechtNavigationLinkMobilePaddingInlineStart : string;
788
+ export const utrechtNavigationLinkMobileTransitionDuration : string;
789
+ export const utrechtNavigationLinkMobileTransitionTimingFunction : string;
790
+ export const utrechtNavigationLinkPaddingBlockEnd : string;
791
+ export const utrechtNavigationLinkPaddingBlockStart : string;
792
+ export const utrechtNavigationListMobileBackgroundColor : string;
793
+ export const utrechtNavigationListMobileInlineSize : string;
794
+ export const utrechtNavigationListMobilePaddingBlockEnd : string;
795
+ export const utrechtNavigationListMobilePaddingInlineEnd : string;
796
+ export const utrechtNavigationListMobilePaddingInlineStart : string;
797
+ export const utrechtNavigationListSideNavInlineSize : string;
798
+ export const utrechtNavigationMarkerColor : string;
799
+ export const utrechtNavigationToggleButtonOffsetEnd : string;
800
+ export const utrechtNavigationToggleButtonOffsetStart : string;
748
801
  export const utrechtNumberBadgeBackgroundColor : string;
749
802
  export const utrechtNumberBadgeBorderRadius : string;
750
803
  /** Default text color for badge components */
@@ -673,6 +673,7 @@
673
673
  "utrechtHeading6LineHeight": "1.5",
674
674
  "utrechtHeadingFontWeight": "700",
675
675
  "utrechtIconBaselineInsetBlockStart": "0.125em",
676
+ "utrechtIconCustomMarginInlineEnd": "8px",
676
677
  "utrechtIconScale2xl": "30px",
677
678
  "utrechtIconScale2xs": "4px",
678
679
  "utrechtIconScale3xl": "36px",
@@ -782,6 +783,58 @@
782
783
  "utrechtNavBarLinkPaddingBlockStart": "8px",
783
784
  "utrechtNavBarLinkPaddingInlineEnd": "16px",
784
785
  "utrechtNavBarLinkPaddingInlineStart": "16px",
786
+ "utrechtNavigationBorderBlockEndColor": "transparent",
787
+ "utrechtNavigationBorderBlockEndWidth": "0",
788
+ "utrechtNavigationBorderBlockStartColor": "transparent",
789
+ "utrechtNavigationBorderBlockStartWidth": "0",
790
+ "utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
791
+ "utrechtNavigationDrawerMinInlineSize": "100%",
792
+ "utrechtNavigationDrawerMobileMinInlineSize": "50%",
793
+ "utrechtNavigationItemBorderBlockEndColor": "transparent",
794
+ "utrechtNavigationItemBorderBlockEndWidth": "0",
795
+ "utrechtNavigationItemBorderBlockStartColor": "transparent",
796
+ "utrechtNavigationItemBorderBlockStartWidth": "0",
797
+ "utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
798
+ "utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
799
+ "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
800
+ "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
801
+ "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
802
+ "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
803
+ "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
804
+ "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
805
+ "utrechtNavigationLinkBorderInlineEndWidth": "1px",
806
+ "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
807
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
808
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
809
+ "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
810
+ "utrechtNavigationLinkFontWeight": "400",
811
+ "utrechtNavigationLinkGap": "8px",
812
+ "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
813
+ "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
814
+ "utrechtNavigationLinkHoverDecorationThickness": "3px",
815
+ "utrechtNavigationLinkIsCurrentFontWeight": "700",
816
+ "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
817
+ "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
818
+ "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
819
+ "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
820
+ "utrechtNavigationLinkMobileHoverFontWeight": "700",
821
+ "utrechtNavigationLinkMobileMinBlockSize": "44px",
822
+ "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
823
+ "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
824
+ "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
825
+ "utrechtNavigationLinkMobileTransitionDuration": "300ms",
826
+ "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
827
+ "utrechtNavigationLinkPaddingBlockEnd": "16px",
828
+ "utrechtNavigationLinkPaddingBlockStart": "16px",
829
+ "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
830
+ "utrechtNavigationListMobileInlineSize": "100%",
831
+ "utrechtNavigationListMobilePaddingBlockEnd": "8px",
832
+ "utrechtNavigationListMobilePaddingInlineEnd": "16px",
833
+ "utrechtNavigationListMobilePaddingInlineStart": "16px",
834
+ "utrechtNavigationListSideNavInlineSize": "100%",
835
+ "utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
836
+ "utrechtNavigationToggleButtonOffsetEnd": "16px",
837
+ "utrechtNavigationToggleButtonOffsetStart": "16px",
785
838
  "utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
786
839
  "utrechtNumberBadgeBorderRadius": "1rem",
787
840
  "utrechtNumberBadgeColor": "hsl(0 0% 100%)",
@@ -191,6 +191,30 @@
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 @@
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 @@
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;
@@ -108,8 +108,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration = "underline";
108
108
  export const utrechtBreadcrumbNavLinkHoverColor = "hsl(211 60% 40%)";
109
109
  export const utrechtBreadcrumbNavLinkHoverTextDecoration = "underline";
110
110
  export const utrechtBreadcrumbNavLinkDisabledColor = "hsl(0 0% 40%)";
111
- export const utrechtBreadcrumbNavLinkTextDecoration = "none";
112
111
  export const utrechtBreadcrumbNavLinkIconSize = "16px";
112
+ export const utrechtBreadcrumbNavLinkTextDecoration = "none";
113
113
  export const utrechtBreadcrumbNavSeparatorColor = "hsl(211 60% 35%)";
114
114
  export const utrechtBreadcrumbNavSeparatorIconSize = "0.875rem";
115
115
  export const utrechtBreadcrumbNavArrowsLinkBackgroundColor = "hsl(0 0% 90%)";
@@ -565,6 +565,7 @@ export const utrechtHeading6LineHeight = "1.5";
565
565
  export const utrechtHeadingFontWeight = "700";
566
566
  export const utrechtIconSize = "48px";
567
567
  export const utrechtIconBaselineInsetBlockStart = "0.125em";
568
+ export const utrechtIconCustomMarginInlineEnd = "8px";
568
569
  export const utrechtIndexCharNavMarginBlockStart = "20px";
569
570
  export const utrechtIndexCharNavMarginBlockEnd = "16px";
570
571
  export const utrechtIndexCharNavGap = "12px";
@@ -681,6 +682,58 @@ export const utrechtTopnavLinkFocusTextDecoration = "none";
681
682
  export const utrechtTopnavLinkFocusBackgroundColor = "hsl(48 100% 80%)";
682
683
  export const utrechtTopnavLinkFocusOutlineColor = "hsl(0 0% 0%)";
683
684
  export const utrechtTopnavLinkHoverBackgroundColor = "hsl(0 0% 0%)";
685
+ export const utrechtNavigationBorderBlockEndColor = "transparent";
686
+ export const utrechtNavigationBorderBlockEndWidth = "0";
687
+ export const utrechtNavigationBorderBlockStartColor = "transparent";
688
+ export const utrechtNavigationBorderBlockStartWidth = "0";
689
+ export const utrechtNavigationDrawerMobileMinInlineSize = "50%";
690
+ export const utrechtNavigationDrawerBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
691
+ export const utrechtNavigationDrawerMinInlineSize = "100%";
692
+ export const utrechtNavigationItemBorderBlockEndColor = "transparent";
693
+ export const utrechtNavigationItemBorderBlockEndWidth = "0";
694
+ export const utrechtNavigationItemBorderBlockStartColor = "transparent";
695
+ export const utrechtNavigationItemBorderBlockStartWidth = "0";
696
+ export const utrechtNavigationItemMobileBorderBlockEndColor = "hsl(0 0% 80%)";
697
+ export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
698
+ export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
699
+ export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
700
+ export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
701
+ export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
702
+ export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
703
+ export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
704
+ export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
705
+ export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
706
+ export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
707
+ export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
708
+ export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
709
+ export const utrechtNavigationLinkFontWeight = "400";
710
+ export const utrechtNavigationLinkGap = "8px";
711
+ export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
712
+ export const utrechtNavigationLinkHoverColor = "hsl(0 0% 100%)";
713
+ export const utrechtNavigationLinkHoverDecorationThickness = "3px";
714
+ export const utrechtNavigationLinkIsCurrentFontWeight = "700";
715
+ export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
716
+ export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
717
+ export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
718
+ export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
719
+ export const utrechtNavigationLinkMobileHoverFontWeight = "700";
720
+ export const utrechtNavigationLinkMobileMinBlockSize = "44px";
721
+ export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
722
+ export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
723
+ export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
724
+ export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
725
+ export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
726
+ export const utrechtNavigationLinkPaddingBlockEnd = "16px";
727
+ export const utrechtNavigationLinkPaddingBlockStart = "16px";
728
+ export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
729
+ export const utrechtNavigationListMobileInlineSize = "100%";
730
+ export const utrechtNavigationListMobilePaddingBlockEnd = "8px";
731
+ export const utrechtNavigationListMobilePaddingInlineEnd = "16px";
732
+ export const utrechtNavigationListMobilePaddingInlineStart = "16px";
733
+ export const utrechtNavigationListSideNavInlineSize = "100%";
734
+ export const utrechtNavigationMarkerColor = "hsl(0 0% 80%)";
735
+ export const utrechtNavigationToggleButtonOffsetEnd = "16px";
736
+ export const utrechtNavigationToggleButtonOffsetStart = "16px";
684
737
  export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
685
738
  export const utrechtNumberBadgeBorderRadius = "1rem";
686
739
  export const utrechtNumberBadgeColor = "hsl(0 0% 100%)"; // Default text color for badge components
package/dist/index.cjs CHANGED
@@ -107,8 +107,8 @@ module.exports = {
107
107
  "utrechtBreadcrumbNavLinkHoverColor": "hsl(211 60% 40%)",
108
108
  "utrechtBreadcrumbNavLinkHoverTextDecoration": "underline",
109
109
  "utrechtBreadcrumbNavLinkDisabledColor": "hsl(0 0% 40%)",
110
- "utrechtBreadcrumbNavLinkTextDecoration": "none",
111
110
  "utrechtBreadcrumbNavLinkIconSize": "16px",
111
+ "utrechtBreadcrumbNavLinkTextDecoration": "none",
112
112
  "utrechtBreadcrumbNavSeparatorColor": "hsl(211 60% 35%)",
113
113
  "utrechtBreadcrumbNavSeparatorIconSize": "0.875rem",
114
114
  "utrechtBreadcrumbNavArrowsLinkBackgroundColor": "hsl(0 0% 90%)",
@@ -557,6 +557,7 @@ module.exports = {
557
557
  "utrechtHeadingFontWeight": "700",
558
558
  "utrechtIconSize": "48px",
559
559
  "utrechtIconBaselineInsetBlockStart": "0.125em",
560
+ "utrechtIconCustomMarginInlineEnd": "8px",
560
561
  "utrechtIndexCharNavMarginBlockStart": "20px",
561
562
  "utrechtIndexCharNavMarginBlockEnd": "16px",
562
563
  "utrechtIndexCharNavGap": "12px",
@@ -673,6 +674,58 @@ module.exports = {
673
674
  "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",
674
675
  "utrechtTopnavLinkFocusOutlineColor": "hsl(0 0% 0%)",
675
676
  "utrechtTopnavLinkHoverBackgroundColor": "hsl(0 0% 0%)",
677
+ "utrechtNavigationBorderBlockEndColor": "transparent",
678
+ "utrechtNavigationBorderBlockEndWidth": "0",
679
+ "utrechtNavigationBorderBlockStartColor": "transparent",
680
+ "utrechtNavigationBorderBlockStartWidth": "0",
681
+ "utrechtNavigationDrawerMobileMinInlineSize": "50%",
682
+ "utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
683
+ "utrechtNavigationDrawerMinInlineSize": "100%",
684
+ "utrechtNavigationItemBorderBlockEndColor": "transparent",
685
+ "utrechtNavigationItemBorderBlockEndWidth": "0",
686
+ "utrechtNavigationItemBorderBlockStartColor": "transparent",
687
+ "utrechtNavigationItemBorderBlockStartWidth": "0",
688
+ "utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
689
+ "utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
690
+ "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
691
+ "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
692
+ "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
693
+ "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
694
+ "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
695
+ "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
696
+ "utrechtNavigationLinkBorderInlineEndWidth": "1px",
697
+ "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
698
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
699
+ "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
700
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
701
+ "utrechtNavigationLinkFontWeight": "400",
702
+ "utrechtNavigationLinkGap": "8px",
703
+ "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
704
+ "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
705
+ "utrechtNavigationLinkHoverDecorationThickness": "3px",
706
+ "utrechtNavigationLinkIsCurrentFontWeight": "700",
707
+ "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
708
+ "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
709
+ "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
710
+ "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
711
+ "utrechtNavigationLinkMobileHoverFontWeight": "700",
712
+ "utrechtNavigationLinkMobileMinBlockSize": "44px",
713
+ "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
714
+ "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
715
+ "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
716
+ "utrechtNavigationLinkMobileTransitionDuration": "300ms",
717
+ "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
718
+ "utrechtNavigationLinkPaddingBlockEnd": "16px",
719
+ "utrechtNavigationLinkPaddingBlockStart": "16px",
720
+ "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
721
+ "utrechtNavigationListMobileInlineSize": "100%",
722
+ "utrechtNavigationListMobilePaddingBlockEnd": "8px",
723
+ "utrechtNavigationListMobilePaddingInlineEnd": "16px",
724
+ "utrechtNavigationListMobilePaddingInlineStart": "16px",
725
+ "utrechtNavigationListSideNavInlineSize": "100%",
726
+ "utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
727
+ "utrechtNavigationToggleButtonOffsetEnd": "16px",
728
+ "utrechtNavigationToggleButtonOffsetStart": "16px",
676
729
  "utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
677
730
  "utrechtNumberBadgeBorderRadius": "1rem",
678
731
  "utrechtNumberBadgeColor": "hsl(0 0% 100%)",