@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.
- package/CHANGELOG.md +6 -0
- package/dist/_mixin-theme.scss +53 -0
- package/dist/_mixin.scss +53 -0
- package/dist/_variables.scss +53 -0
- package/dist/dark/_mixin-theme.scss +53 -0
- package/dist/dark/_mixin.scss +53 -0
- package/dist/dark/_variables.scss +53 -0
- package/dist/dark/index.cjs +54 -1
- package/dist/dark/index.css +53 -0
- package/dist/dark/index.d.ts +54 -1
- package/dist/dark/index.flat.json +53 -0
- package/dist/dark/index.json +1798 -0
- package/dist/dark/index.mjs +54 -1
- package/dist/dark/index.tokens.json +472 -10
- package/dist/dark/list.json +1798 -0
- package/dist/dark/list.mjs +1798 -0
- package/dist/dark/property.css +50 -0
- package/dist/dark/root.css +53 -0
- package/dist/dark/theme-prince-xml.css +53 -0
- package/dist/dark/theme.css +53 -0
- package/dist/dark/tokens.cjs +2231 -24
- package/dist/dark/tokens.d.ts +274 -3
- package/dist/dark/tokens.json +2231 -24
- package/dist/dark/variables.cjs +54 -1
- package/dist/dark/variables.css +53 -0
- package/dist/dark/variables.d.ts +54 -1
- package/dist/dark/variables.json +53 -0
- package/dist/dark/variables.less +53 -0
- package/dist/dark/variables.mjs +54 -1
- package/dist/index.cjs +54 -1
- package/dist/index.css +106 -0
- package/dist/index.d.ts +54 -1
- package/dist/index.flat.json +53 -0
- package/dist/index.json +1798 -0
- package/dist/index.mjs +54 -1
- package/dist/index.tokens.json +472 -10
- package/dist/list.json +1798 -0
- package/dist/list.mjs +1798 -0
- package/dist/property.css +50 -0
- package/dist/root.css +53 -0
- package/dist/theme-prince-xml.css +53 -0
- package/dist/theme.css +53 -0
- package/dist/tokens.cjs +2231 -24
- package/dist/tokens.d.ts +274 -3
- package/dist/tokens.json +2231 -24
- package/dist/variables.cjs +54 -1
- package/dist/variables.css +53 -0
- package/dist/variables.d.ts +54 -1
- package/dist/variables.json +53 -0
- package/dist/variables.less +53 -0
- package/dist/variables.mjs +54 -1
- package/package.json +1 -1
- package/src/component/utrecht/navigation.tokens.json +229 -0
package/dist/variables.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%)",
|
package/dist/variables.css
CHANGED
|
@@ -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;
|
|
@@ -552,6 +576,34 @@
|
|
|
552
576
|
--utrecht-page-background-color: var(--utrecht-color-white);
|
|
553
577
|
--utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
|
|
554
578
|
--utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
|
|
579
|
+
--utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
|
|
580
|
+
--utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
|
|
581
|
+
--utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
|
|
582
|
+
--utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
|
|
583
|
+
--utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
|
|
584
|
+
--utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
|
|
585
|
+
--utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
|
|
586
|
+
--utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
|
|
587
|
+
--utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
|
|
588
|
+
--utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
|
|
589
|
+
--utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
590
|
+
--utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
|
|
591
|
+
--utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
|
|
592
|
+
--utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
|
|
593
|
+
--utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
|
|
594
|
+
--utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
595
|
+
--utrecht-navigation-link-hover-color: var(--utrecht-color-white);
|
|
596
|
+
--utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
|
|
597
|
+
--utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
598
|
+
--utrecht-navigation-link-focus-color: var(--utrecht-color-black);
|
|
599
|
+
--utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
|
|
600
|
+
--utrecht-navigation-link-color: var(--utrecht-color-white);
|
|
601
|
+
--utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
|
|
602
|
+
--utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
|
|
603
|
+
--utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
|
|
604
|
+
--utrecht-navigation-link-active-color: var(--utrecht-color-white);
|
|
605
|
+
--utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
|
|
606
|
+
--utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
|
|
555
607
|
--utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
|
|
556
608
|
--utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
|
|
557
609
|
--utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
|
|
@@ -614,6 +666,7 @@
|
|
|
614
666
|
--utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
|
|
615
667
|
--utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
616
668
|
--utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
|
|
669
|
+
--utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
|
|
617
670
|
--utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
618
671
|
--utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
|
|
619
672
|
--utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
|
package/dist/variables.d.ts
CHANGED
|
@@ -116,8 +116,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration : string;
|
|
|
116
116
|
export const utrechtBreadcrumbNavLinkHoverColor : string;
|
|
117
117
|
export const utrechtBreadcrumbNavLinkHoverTextDecoration : string;
|
|
118
118
|
export const utrechtBreadcrumbNavLinkDisabledColor : string;
|
|
119
|
-
export const utrechtBreadcrumbNavLinkTextDecoration : string;
|
|
120
119
|
export const utrechtBreadcrumbNavLinkIconSize : string;
|
|
120
|
+
export const utrechtBreadcrumbNavLinkTextDecoration : string;
|
|
121
121
|
export const utrechtBreadcrumbNavSeparatorColor : string;
|
|
122
122
|
export const utrechtBreadcrumbNavSeparatorIconSize : string;
|
|
123
123
|
export const utrechtBreadcrumbNavArrowsLinkBackgroundColor : string;
|
|
@@ -620,6 +620,7 @@ export const utrechtHeading6LineHeight : string;
|
|
|
620
620
|
export const utrechtHeadingFontWeight : string;
|
|
621
621
|
export const utrechtIconSize : string;
|
|
622
622
|
export const utrechtIconBaselineInsetBlockStart : string;
|
|
623
|
+
export const utrechtIconCustomMarginInlineEnd : string;
|
|
623
624
|
export const utrechtIndexCharNavMarginBlockStart : string;
|
|
624
625
|
export const utrechtIndexCharNavMarginBlockEnd : string;
|
|
625
626
|
export const utrechtIndexCharNavGap : string;
|
|
@@ -736,6 +737,58 @@ export const utrechtTopnavLinkFocusTextDecoration : string;
|
|
|
736
737
|
export const utrechtTopnavLinkFocusBackgroundColor : string;
|
|
737
738
|
export const utrechtTopnavLinkFocusOutlineColor : string;
|
|
738
739
|
export const utrechtTopnavLinkHoverBackgroundColor : string;
|
|
740
|
+
export const utrechtNavigationBorderBlockEndColor : string;
|
|
741
|
+
export const utrechtNavigationBorderBlockEndWidth : string;
|
|
742
|
+
export const utrechtNavigationBorderBlockStartColor : string;
|
|
743
|
+
export const utrechtNavigationBorderBlockStartWidth : string;
|
|
744
|
+
export const utrechtNavigationDrawerMobileMinInlineSize : string;
|
|
745
|
+
export const utrechtNavigationDrawerBackdropBackgroundColor : string;
|
|
746
|
+
export const utrechtNavigationDrawerMinInlineSize : string;
|
|
747
|
+
export const utrechtNavigationItemBorderBlockEndColor : string;
|
|
748
|
+
export const utrechtNavigationItemBorderBlockEndWidth : string;
|
|
749
|
+
export const utrechtNavigationItemBorderBlockStartColor : string;
|
|
750
|
+
export const utrechtNavigationItemBorderBlockStartWidth : string;
|
|
751
|
+
export const utrechtNavigationItemMobileBorderBlockEndColor : string;
|
|
752
|
+
export const utrechtNavigationItemMobileBorderBlockEndWidth : string;
|
|
753
|
+
export const utrechtNavigationItemMobileBorderBlockStartColor : string;
|
|
754
|
+
export const utrechtNavigationItemMobileBorderBlockStartWidth : string;
|
|
755
|
+
export const utrechtNavigationLinkActiveColor : string;
|
|
756
|
+
export const utrechtNavigationLinkActiveFocusColor : string;
|
|
757
|
+
export const utrechtNavigationLinkBackgroundColor : string;
|
|
758
|
+
export const utrechtNavigationLinkBorderColor : string;
|
|
759
|
+
export const utrechtNavigationLinkBorderInlineEndWidth : string;
|
|
760
|
+
export const utrechtNavigationLinkColor : string;
|
|
761
|
+
export const utrechtNavigationLinkFocusColor : string;
|
|
762
|
+
export const utrechtNavigationLinkFocusTextDecorationThickness : string;
|
|
763
|
+
export const utrechtNavigationLinkFocusBackgroundColor : string;
|
|
764
|
+
export const utrechtNavigationLinkFontWeight : string;
|
|
765
|
+
export const utrechtNavigationLinkGap : string;
|
|
766
|
+
export const utrechtNavigationLinkHoverBackgroundColor : string;
|
|
767
|
+
export const utrechtNavigationLinkHoverColor : string;
|
|
768
|
+
export const utrechtNavigationLinkHoverDecorationThickness : string;
|
|
769
|
+
export const utrechtNavigationLinkIsCurrentFontWeight : string;
|
|
770
|
+
export const utrechtNavigationLinkMobileBackgroundColor : string;
|
|
771
|
+
export const utrechtNavigationLinkMobileColor : string;
|
|
772
|
+
export const utrechtNavigationLinkMobileHoverBackgroundColor : string;
|
|
773
|
+
export const utrechtNavigationLinkMobileHoverColor : string;
|
|
774
|
+
export const utrechtNavigationLinkMobileHoverFontWeight : string;
|
|
775
|
+
export const utrechtNavigationLinkMobileMinBlockSize : string;
|
|
776
|
+
export const utrechtNavigationLinkMobilePaddingBlockEnd : string;
|
|
777
|
+
export const utrechtNavigationLinkMobilePaddingBlockStart : string;
|
|
778
|
+
export const utrechtNavigationLinkMobilePaddingInlineStart : string;
|
|
779
|
+
export const utrechtNavigationLinkMobileTransitionDuration : string;
|
|
780
|
+
export const utrechtNavigationLinkMobileTransitionTimingFunction : string;
|
|
781
|
+
export const utrechtNavigationLinkPaddingBlockEnd : string;
|
|
782
|
+
export const utrechtNavigationLinkPaddingBlockStart : string;
|
|
783
|
+
export const utrechtNavigationListMobileBackgroundColor : string;
|
|
784
|
+
export const utrechtNavigationListMobileInlineSize : string;
|
|
785
|
+
export const utrechtNavigationListMobilePaddingBlockEnd : string;
|
|
786
|
+
export const utrechtNavigationListMobilePaddingInlineEnd : string;
|
|
787
|
+
export const utrechtNavigationListMobilePaddingInlineStart : string;
|
|
788
|
+
export const utrechtNavigationListSideNavInlineSize : string;
|
|
789
|
+
export const utrechtNavigationMarkerColor : string;
|
|
790
|
+
export const utrechtNavigationToggleButtonOffsetEnd : string;
|
|
791
|
+
export const utrechtNavigationToggleButtonOffsetStart : string;
|
|
739
792
|
export const utrechtNumberBadgeBackgroundColor : string;
|
|
740
793
|
export const utrechtNumberBadgeBorderRadius : string;
|
|
741
794
|
/** Default text color for badge components */
|
package/dist/variables.json
CHANGED
|
@@ -664,6 +664,7 @@
|
|
|
664
664
|
"utrechtHeading6LineHeight": "1.5",
|
|
665
665
|
"utrechtHeadingFontWeight": "700",
|
|
666
666
|
"utrechtIconBaselineInsetBlockStart": "0.125em",
|
|
667
|
+
"utrechtIconCustomMarginInlineEnd": "8px",
|
|
667
668
|
"utrechtIconScale2xl": "30px",
|
|
668
669
|
"utrechtIconScale2xs": "4px",
|
|
669
670
|
"utrechtIconScale3xl": "36px",
|
|
@@ -773,6 +774,58 @@
|
|
|
773
774
|
"utrechtNavBarLinkPaddingBlockStart": "8px",
|
|
774
775
|
"utrechtNavBarLinkPaddingInlineEnd": "16px",
|
|
775
776
|
"utrechtNavBarLinkPaddingInlineStart": "16px",
|
|
777
|
+
"utrechtNavigationBorderBlockEndColor": "transparent",
|
|
778
|
+
"utrechtNavigationBorderBlockEndWidth": "0",
|
|
779
|
+
"utrechtNavigationBorderBlockStartColor": "transparent",
|
|
780
|
+
"utrechtNavigationBorderBlockStartWidth": "0",
|
|
781
|
+
"utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
|
|
782
|
+
"utrechtNavigationDrawerMinInlineSize": "100%",
|
|
783
|
+
"utrechtNavigationDrawerMobileMinInlineSize": "50%",
|
|
784
|
+
"utrechtNavigationItemBorderBlockEndColor": "transparent",
|
|
785
|
+
"utrechtNavigationItemBorderBlockEndWidth": "0",
|
|
786
|
+
"utrechtNavigationItemBorderBlockStartColor": "transparent",
|
|
787
|
+
"utrechtNavigationItemBorderBlockStartWidth": "0",
|
|
788
|
+
"utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
|
|
789
|
+
"utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
|
|
790
|
+
"utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
|
|
791
|
+
"utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
|
|
792
|
+
"utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
|
|
793
|
+
"utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
|
|
794
|
+
"utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
|
|
795
|
+
"utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
|
|
796
|
+
"utrechtNavigationLinkBorderInlineEndWidth": "1px",
|
|
797
|
+
"utrechtNavigationLinkColor": "hsl(0 0% 100%)",
|
|
798
|
+
"utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
|
|
799
|
+
"utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
|
|
800
|
+
"utrechtNavigationLinkFocusTextDecorationThickness": "3px",
|
|
801
|
+
"utrechtNavigationLinkFontWeight": "400",
|
|
802
|
+
"utrechtNavigationLinkGap": "8px",
|
|
803
|
+
"utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
|
|
804
|
+
"utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
|
|
805
|
+
"utrechtNavigationLinkHoverDecorationThickness": "3px",
|
|
806
|
+
"utrechtNavigationLinkIsCurrentFontWeight": "700",
|
|
807
|
+
"utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
|
|
808
|
+
"utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
|
|
809
|
+
"utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
|
|
810
|
+
"utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
|
|
811
|
+
"utrechtNavigationLinkMobileHoverFontWeight": "700",
|
|
812
|
+
"utrechtNavigationLinkMobileMinBlockSize": "44px",
|
|
813
|
+
"utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
|
|
814
|
+
"utrechtNavigationLinkMobilePaddingBlockStart": "8px",
|
|
815
|
+
"utrechtNavigationLinkMobilePaddingInlineStart": "16px",
|
|
816
|
+
"utrechtNavigationLinkMobileTransitionDuration": "300ms",
|
|
817
|
+
"utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
|
|
818
|
+
"utrechtNavigationLinkPaddingBlockEnd": "16px",
|
|
819
|
+
"utrechtNavigationLinkPaddingBlockStart": "16px",
|
|
820
|
+
"utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
|
|
821
|
+
"utrechtNavigationListMobileInlineSize": "100%",
|
|
822
|
+
"utrechtNavigationListMobilePaddingBlockEnd": "8px",
|
|
823
|
+
"utrechtNavigationListMobilePaddingInlineEnd": "16px",
|
|
824
|
+
"utrechtNavigationListMobilePaddingInlineStart": "16px",
|
|
825
|
+
"utrechtNavigationListSideNavInlineSize": "100%",
|
|
826
|
+
"utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
|
|
827
|
+
"utrechtNavigationToggleButtonOffsetEnd": "16px",
|
|
828
|
+
"utrechtNavigationToggleButtonOffsetStart": "16px",
|
|
776
829
|
"utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
|
|
777
830
|
"utrechtNumberBadgeBorderRadius": "1rem",
|
|
778
831
|
"utrechtNumberBadgeColor": "hsl(0 0% 100%)",
|
package/dist/variables.less
CHANGED
|
@@ -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;
|
|
@@ -621,6 +645,34 @@
|
|
|
621
645
|
@utrecht-page-body-content-background-color: @utrecht-color-white;
|
|
622
646
|
@utrecht-number-badge-padding-inline: @nl-number-badge-padding-inline; // Default inline padding color for badge components
|
|
623
647
|
@utrecht-number-badge-padding-block: @nl-number-badge-padding-block; // Default block padding for badge components
|
|
648
|
+
@utrecht-navigation-marker-color: @utrecht-color-grey-80;
|
|
649
|
+
@utrecht-navigation-list-mobile-padding-inline-start: @utrecht-space-inline-md;
|
|
650
|
+
@utrecht-navigation-list-mobile-padding-inline-end: @utrecht-space-inline-md;
|
|
651
|
+
@utrecht-navigation-list-mobile-padding-block-end: @utrecht-space-block-xs;
|
|
652
|
+
@utrecht-navigation-list-mobile-background-color: @utrecht-color-white;
|
|
653
|
+
@utrecht-navigation-link-padding-block-start: @utrecht-space-block-md;
|
|
654
|
+
@utrecht-navigation-link-padding-block-end: @utrecht-space-block-md;
|
|
655
|
+
@utrecht-navigation-link-mobile-padding-inline-start: @utrecht-space-inline-md;
|
|
656
|
+
@utrecht-navigation-link-mobile-padding-block-start: @utrecht-space-block-xs;
|
|
657
|
+
@utrecht-navigation-link-mobile-padding-block-end: @utrecht-space-block-xs;
|
|
658
|
+
@utrecht-navigation-link-mobile-hover-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
|
|
659
|
+
@utrecht-navigation-link-mobile-hover-color: @utrecht-color-blue-35;
|
|
660
|
+
@utrecht-navigation-link-mobile-hover-background-color: @utrecht-color-white;
|
|
661
|
+
@utrecht-navigation-link-mobile-color: @utrecht-color-blue-35;
|
|
662
|
+
@utrecht-navigation-link-mobile-background-color: @utrecht-color-white;
|
|
663
|
+
@utrecht-navigation-link-is-current-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
|
|
664
|
+
@utrecht-navigation-link-hover-color: @utrecht-color-white;
|
|
665
|
+
@utrecht-navigation-link-hover-background-color: @utrecht-color-black;
|
|
666
|
+
@utrecht-navigation-link-font-weight: @utrecht-typography-weight-scale-normal-font-weight;
|
|
667
|
+
@utrecht-navigation-link-focus-background-color: @utrecht-color-yellow-80;
|
|
668
|
+
@utrecht-navigation-link-focus-color: @utrecht-color-black;
|
|
669
|
+
@utrecht-navigation-link-color: @utrecht-color-white;
|
|
670
|
+
@utrecht-navigation-link-border-color: @utrecht-color-grey-40;
|
|
671
|
+
@utrecht-navigation-link-background-color: @utrecht-color-grey-15;
|
|
672
|
+
@utrecht-navigation-link-active-focus-color: @utrecht-color-black;
|
|
673
|
+
@utrecht-navigation-link-active-color: @utrecht-color-white;
|
|
674
|
+
@utrecht-navigation-item-mobile-border-block-start-color: @utrecht-color-grey-80;
|
|
675
|
+
@utrecht-navigation-item-mobile-border-block-end-color: @utrecht-color-grey-80;
|
|
624
676
|
@utrecht-topnav-link-hover-background-color: @utrecht-color-black;
|
|
625
677
|
@utrecht-topnav-link-focus-outline-color: @utrecht-color-black;
|
|
626
678
|
@utrecht-topnav-link-focus-background-color: @utrecht-color-yellow-80;
|
|
@@ -699,6 +751,7 @@
|
|
|
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/variables.mjs
CHANGED
|
@@ -106,8 +106,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration = "underline";
|
|
|
106
106
|
export const utrechtBreadcrumbNavLinkHoverColor = "hsl(211 60% 40%)";
|
|
107
107
|
export const utrechtBreadcrumbNavLinkHoverTextDecoration = "underline";
|
|
108
108
|
export const utrechtBreadcrumbNavLinkDisabledColor = "hsl(0 0% 40%)";
|
|
109
|
-
export const utrechtBreadcrumbNavLinkTextDecoration = "none";
|
|
110
109
|
export const utrechtBreadcrumbNavLinkIconSize = "16px";
|
|
110
|
+
export const utrechtBreadcrumbNavLinkTextDecoration = "none";
|
|
111
111
|
export const utrechtBreadcrumbNavSeparatorColor = "hsl(211 60% 35%)";
|
|
112
112
|
export const utrechtBreadcrumbNavSeparatorIconSize = "0.875rem";
|
|
113
113
|
export const utrechtBreadcrumbNavArrowsLinkBackgroundColor = "hsl(0 0% 90%)";
|
|
@@ -556,6 +556,7 @@ export const utrechtHeading6LineHeight = "1.5";
|
|
|
556
556
|
export const utrechtHeadingFontWeight = "700";
|
|
557
557
|
export const utrechtIconSize = "48px";
|
|
558
558
|
export const utrechtIconBaselineInsetBlockStart = "0.125em";
|
|
559
|
+
export const utrechtIconCustomMarginInlineEnd = "8px";
|
|
559
560
|
export const utrechtIndexCharNavMarginBlockStart = "20px";
|
|
560
561
|
export const utrechtIndexCharNavMarginBlockEnd = "16px";
|
|
561
562
|
export const utrechtIndexCharNavGap = "12px";
|
|
@@ -672,6 +673,58 @@ export const utrechtTopnavLinkFocusTextDecoration = "none";
|
|
|
672
673
|
export const utrechtTopnavLinkFocusBackgroundColor = "hsl(48 100% 80%)";
|
|
673
674
|
export const utrechtTopnavLinkFocusOutlineColor = "hsl(0 0% 0%)";
|
|
674
675
|
export const utrechtTopnavLinkHoverBackgroundColor = "hsl(0 0% 0%)";
|
|
676
|
+
export const utrechtNavigationBorderBlockEndColor = "transparent";
|
|
677
|
+
export const utrechtNavigationBorderBlockEndWidth = "0";
|
|
678
|
+
export const utrechtNavigationBorderBlockStartColor = "transparent";
|
|
679
|
+
export const utrechtNavigationBorderBlockStartWidth = "0";
|
|
680
|
+
export const utrechtNavigationDrawerMobileMinInlineSize = "50%";
|
|
681
|
+
export const utrechtNavigationDrawerBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
|
|
682
|
+
export const utrechtNavigationDrawerMinInlineSize = "100%";
|
|
683
|
+
export const utrechtNavigationItemBorderBlockEndColor = "transparent";
|
|
684
|
+
export const utrechtNavigationItemBorderBlockEndWidth = "0";
|
|
685
|
+
export const utrechtNavigationItemBorderBlockStartColor = "transparent";
|
|
686
|
+
export const utrechtNavigationItemBorderBlockStartWidth = "0";
|
|
687
|
+
export const utrechtNavigationItemMobileBorderBlockEndColor = "hsl(0 0% 80%)";
|
|
688
|
+
export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
|
|
689
|
+
export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
|
|
690
|
+
export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
|
|
691
|
+
export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
|
|
692
|
+
export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
|
|
693
|
+
export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
|
|
694
|
+
export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
|
|
695
|
+
export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
|
|
696
|
+
export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
|
|
697
|
+
export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
|
|
698
|
+
export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
|
|
699
|
+
export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
|
|
700
|
+
export const utrechtNavigationLinkFontWeight = "400";
|
|
701
|
+
export const utrechtNavigationLinkGap = "8px";
|
|
702
|
+
export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
|
|
703
|
+
export const utrechtNavigationLinkHoverColor = "hsl(0 0% 100%)";
|
|
704
|
+
export const utrechtNavigationLinkHoverDecorationThickness = "3px";
|
|
705
|
+
export const utrechtNavigationLinkIsCurrentFontWeight = "700";
|
|
706
|
+
export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
|
|
707
|
+
export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
|
|
708
|
+
export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
|
|
709
|
+
export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
|
|
710
|
+
export const utrechtNavigationLinkMobileHoverFontWeight = "700";
|
|
711
|
+
export const utrechtNavigationLinkMobileMinBlockSize = "44px";
|
|
712
|
+
export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
|
|
713
|
+
export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
|
|
714
|
+
export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
|
|
715
|
+
export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
|
|
716
|
+
export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
|
|
717
|
+
export const utrechtNavigationLinkPaddingBlockEnd = "16px";
|
|
718
|
+
export const utrechtNavigationLinkPaddingBlockStart = "16px";
|
|
719
|
+
export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
|
|
720
|
+
export const utrechtNavigationListMobileInlineSize = "100%";
|
|
721
|
+
export const utrechtNavigationListMobilePaddingBlockEnd = "8px";
|
|
722
|
+
export const utrechtNavigationListMobilePaddingInlineEnd = "16px";
|
|
723
|
+
export const utrechtNavigationListMobilePaddingInlineStart = "16px";
|
|
724
|
+
export const utrechtNavigationListSideNavInlineSize = "100%";
|
|
725
|
+
export const utrechtNavigationMarkerColor = "hsl(0 0% 80%)";
|
|
726
|
+
export const utrechtNavigationToggleButtonOffsetEnd = "16px";
|
|
727
|
+
export const utrechtNavigationToggleButtonOffsetStart = "16px";
|
|
675
728
|
export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
|
|
676
729
|
export const utrechtNumberBadgeBorderRadius = "1rem";
|
|
677
730
|
export const utrechtNumberBadgeColor = "hsl(0 0% 100%)"; // Default text color for badge components
|
package/package.json
CHANGED