@utrecht/design-tokens 3.2.0 → 3.4.0

package/dist/variables.cjs

@@ -107,8 +107,8 @@ module.exports = {
   "utrechtBreadcrumbNavLinkHoverColor": "hsl(211 60% 40%)",
   "utrechtBreadcrumbNavLinkHoverTextDecoration": "underline",
   "utrechtBreadcrumbNavLinkDisabledColor": "hsl(0 0% 40%)",
-  "utrechtBreadcrumbNavLinkTextDecoration": "none",
   "utrechtBreadcrumbNavLinkIconSize": "16px",
+  "utrechtBreadcrumbNavLinkTextDecoration": "none",
   "utrechtBreadcrumbNavSeparatorColor": "hsl(211 60% 35%)",
   "utrechtBreadcrumbNavSeparatorIconSize": "0.875rem",
   "utrechtBreadcrumbNavArrowsLinkBackgroundColor": "hsl(0 0% 90%)",
@@ -557,6 +557,7 @@ module.exports = {
   "utrechtHeadingFontWeight": "700",
   "utrechtIconSize": "48px",
   "utrechtIconBaselineInsetBlockStart": "0.125em",
+  "utrechtIconCustomMarginInlineEnd": "8px",
   "utrechtIndexCharNavMarginBlockStart": "20px",
   "utrechtIndexCharNavMarginBlockEnd": "16px",
   "utrechtIndexCharNavGap": "12px",
@@ -673,6 +674,58 @@ module.exports = {
   "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",
   "utrechtTopnavLinkFocusOutlineColor": "hsl(0 0% 0%)",
   "utrechtTopnavLinkHoverBackgroundColor": "hsl(0 0% 0%)",
+  "utrechtNavigationBorderBlockEndColor": "transparent",
+  "utrechtNavigationBorderBlockEndWidth": "0",
+  "utrechtNavigationBorderBlockStartColor": "transparent",
+  "utrechtNavigationBorderBlockStartWidth": "0",
+  "utrechtNavigationDrawerMobileMinInlineSize": "50%",
+  "utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
+  "utrechtNavigationDrawerMinInlineSize": "100%",
+  "utrechtNavigationItemBorderBlockEndColor": "transparent",
+  "utrechtNavigationItemBorderBlockEndWidth": "0",
+  "utrechtNavigationItemBorderBlockStartColor": "transparent",
+  "utrechtNavigationItemBorderBlockStartWidth": "0",
+  "utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
+  "utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
+  "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
+  "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
+  "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
+  "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
+  "utrechtNavigationLinkBorderInlineEndWidth": "1px",
+  "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
+  "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtNavigationLinkFontWeight": "400",
+  "utrechtNavigationLinkGap": "8px",
+  "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkHoverDecorationThickness": "3px",
+  "utrechtNavigationLinkIsCurrentFontWeight": "700",
+  "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileHoverFontWeight": "700",
+  "utrechtNavigationLinkMobileMinBlockSize": "44px",
+  "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
+  "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
+  "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
+  "utrechtNavigationLinkMobileTransitionDuration": "300ms",
+  "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
+  "utrechtNavigationLinkPaddingBlockEnd": "16px",
+  "utrechtNavigationLinkPaddingBlockStart": "16px",
+  "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationListMobileInlineSize": "100%",
+  "utrechtNavigationListMobilePaddingBlockEnd": "8px",
+  "utrechtNavigationListMobilePaddingInlineEnd": "16px",
+  "utrechtNavigationListMobilePaddingInlineStart": "16px",
+  "utrechtNavigationListSideNavInlineSize": "100%",
+  "utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
+  "utrechtNavigationToggleButtonOffsetEnd": "16px",
+  "utrechtNavigationToggleButtonOffsetStart": "16px",
   "utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
   "utrechtNumberBadgeBorderRadius": "1rem",
   "utrechtNumberBadgeColor": "hsl(0 0% 100%)",
@@ -895,6 +948,15 @@ module.exports = {
   "utrechtTextareaBorderBottomWidth": "3px",
   "utrechtTextareaLineHeight": "1.5",
   "utrechtTextboxBorderBottomWidth": "3px",
+  "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
+  "utrechtTooltipBorderRadius": "0",
+  "utrechtTooltipBorderWidth": "1px",
+  "utrechtTooltipColor": "hsl(0 0% 40%)",
+  "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "utrechtTooltipFontSize": "1rem",
+  "utrechtTooltipPaddingBlock": "8px",
+  "utrechtTooltipPaddingInline": "16px",
   "utrechtToptaskLinkBackgroundColor": "hsl(211 60% 35%)",
   "utrechtToptaskLinkColor": "hsl(0 0% 100%)",
   "utrechtToptaskLinkFontSize": "1rem",

package/dist/variables.css

@@ -30,6 +30,8 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-topnav-link-focus-border-type: dotted;
+  --utrecht-tooltip-border-width: 1px;
+  --utrecht-tooltip-border-radius: 0;
   --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-textarea-border-bottom-width: 3px;
   --utrecht-textarea-border-block-end-width: 3px;
@@ -174,6 +176,30 @@
   --utrecht-ordered-list-item-margin-block-end: 0.25em;
   --utrecht-number-data-positive-color: green;
   --utrecht-number-data-negative-color: red;
+  --utrecht-navigation-toggle-button-offset-start: 16px;
+  --utrecht-navigation-toggle-button-offset-end: 16px;
+  --utrecht-navigation-list-side-nav-inline-size: 100%;
+  --utrecht-navigation-list-mobile-inline-size: 100%;
+  --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
+  --utrecht-navigation-link-mobile-transition-duration: 300ms;
+  --utrecht-navigation-link-mobile-min-block-size: 44px;
+  --utrecht-navigation-link-hover-decoration-thickness: 3px;
+  --utrecht-navigation-link-gap: 8px;
+  --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
+  --utrecht-navigation-link-border-inline-end-width: 1px;
+  --utrecht-navigation-item-mobile-border-block-start-width: 1px;
+  --utrecht-navigation-item-mobile-border-block-end-width: 1px;
+  --utrecht-navigation-item-border-block-start-width: 0;
+  --utrecht-navigation-item-border-block-start-color: transparent;
+  --utrecht-navigation-item-border-block-end-width: 0;
+  --utrecht-navigation-item-border-block-end-color: transparent;
+  --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
+  --utrecht-navigation-drawer-min-inline-size: 100%;
+  --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
+  --utrecht-navigation-border-block-start-width: 0;
+  --utrecht-navigation-border-block-start-color: transparent;
+  --utrecht-navigation-border-block-end-width: 0;
+  --utrecht-navigation-border-block-end-color: transparent;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -424,6 +450,13 @@
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
   --utrecht-topnav-link-color: var(--utrecht-color-white);
   --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
+  --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
+  --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
+  --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-tooltip-color: var(--utrecht-color-grey-40);
+  --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
+  --utrecht-tooltip-background-color: var(--utrecht-color-white);
   --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
   --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -543,6 +576,34 @@
   --utrecht-page-background-color: var(--utrecht-color-white);
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
+  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
+  --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
+  --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
+  --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
+  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
+  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
+  --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-link-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
+  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
+  --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
+  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
+  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
   --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
   --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -605,6 +666,7 @@
   --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
+  --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
   --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
   --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);

package/dist/variables.d.ts

@@ -116,8 +116,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration : string;
 export const utrechtBreadcrumbNavLinkHoverColor : string;
 export const utrechtBreadcrumbNavLinkHoverTextDecoration : string;
 export const utrechtBreadcrumbNavLinkDisabledColor : string;
-export const utrechtBreadcrumbNavLinkTextDecoration : string;
 export const utrechtBreadcrumbNavLinkIconSize : string;
+export const utrechtBreadcrumbNavLinkTextDecoration : string;
 export const utrechtBreadcrumbNavSeparatorColor : string;
 export const utrechtBreadcrumbNavSeparatorIconSize : string;
 export const utrechtBreadcrumbNavArrowsLinkBackgroundColor : string;
@@ -620,6 +620,7 @@ export const utrechtHeading6LineHeight : string;
 export const utrechtHeadingFontWeight : string;
 export const utrechtIconSize : string;
 export const utrechtIconBaselineInsetBlockStart : string;
+export const utrechtIconCustomMarginInlineEnd : string;
 export const utrechtIndexCharNavMarginBlockStart : string;
 export const utrechtIndexCharNavMarginBlockEnd : string;
 export const utrechtIndexCharNavGap : string;
@@ -736,6 +737,58 @@ export const utrechtTopnavLinkFocusTextDecoration : string;
 export const utrechtTopnavLinkFocusBackgroundColor : string;
 export const utrechtTopnavLinkFocusOutlineColor : string;
 export const utrechtTopnavLinkHoverBackgroundColor : string;
+export const utrechtNavigationBorderBlockEndColor : string;
+export const utrechtNavigationBorderBlockEndWidth : string;
+export const utrechtNavigationBorderBlockStartColor : string;
+export const utrechtNavigationBorderBlockStartWidth : string;
+export const utrechtNavigationDrawerMobileMinInlineSize : string;
+export const utrechtNavigationDrawerBackdropBackgroundColor : string;
+export const utrechtNavigationDrawerMinInlineSize : string;
+export const utrechtNavigationItemBorderBlockEndColor : string;
+export const utrechtNavigationItemBorderBlockEndWidth : string;
+export const utrechtNavigationItemBorderBlockStartColor : string;
+export const utrechtNavigationItemBorderBlockStartWidth : string;
+export const utrechtNavigationItemMobileBorderBlockEndColor : string;
+export const utrechtNavigationItemMobileBorderBlockEndWidth : string;
+export const utrechtNavigationItemMobileBorderBlockStartColor : string;
+export const utrechtNavigationItemMobileBorderBlockStartWidth : string;
+export const utrechtNavigationLinkActiveColor : string;
+export const utrechtNavigationLinkActiveFocusColor : string;
+export const utrechtNavigationLinkBackgroundColor : string;
+export const utrechtNavigationLinkBorderColor : string;
+export const utrechtNavigationLinkBorderInlineEndWidth : string;
+export const utrechtNavigationLinkColor : string;
+export const utrechtNavigationLinkFocusColor : string;
+export const utrechtNavigationLinkFocusTextDecorationThickness : string;
+export const utrechtNavigationLinkFocusBackgroundColor : string;
+export const utrechtNavigationLinkFontWeight : string;
+export const utrechtNavigationLinkGap : string;
+export const utrechtNavigationLinkHoverBackgroundColor : string;
+export const utrechtNavigationLinkHoverColor : string;
+export const utrechtNavigationLinkHoverDecorationThickness : string;
+export const utrechtNavigationLinkIsCurrentFontWeight : string;
+export const utrechtNavigationLinkMobileBackgroundColor : string;
+export const utrechtNavigationLinkMobileColor : string;
+export const utrechtNavigationLinkMobileHoverBackgroundColor : string;
+export const utrechtNavigationLinkMobileHoverColor : string;
+export const utrechtNavigationLinkMobileHoverFontWeight : string;
+export const utrechtNavigationLinkMobileMinBlockSize : string;
+export const utrechtNavigationLinkMobilePaddingBlockEnd : string;
+export const utrechtNavigationLinkMobilePaddingBlockStart : string;
+export const utrechtNavigationLinkMobilePaddingInlineStart : string;
+export const utrechtNavigationLinkMobileTransitionDuration : string;
+export const utrechtNavigationLinkMobileTransitionTimingFunction : string;
+export const utrechtNavigationLinkPaddingBlockEnd : string;
+export const utrechtNavigationLinkPaddingBlockStart : string;
+export const utrechtNavigationListMobileBackgroundColor : string;
+export const utrechtNavigationListMobileInlineSize : string;
+export const utrechtNavigationListMobilePaddingBlockEnd : string;
+export const utrechtNavigationListMobilePaddingInlineEnd : string;
+export const utrechtNavigationListMobilePaddingInlineStart : string;
+export const utrechtNavigationListSideNavInlineSize : string;
+export const utrechtNavigationMarkerColor : string;
+export const utrechtNavigationToggleButtonOffsetEnd : string;
+export const utrechtNavigationToggleButtonOffsetStart : string;
 export const utrechtNumberBadgeBackgroundColor : string;
 export const utrechtNumberBadgeBorderRadius : string;
 /** Default text color for badge components */
@@ -961,6 +1014,15 @@ export const utrechtTextareaBorderBlockEndWidth : string;
 export const utrechtTextareaBorderBottomWidth : string;
 export const utrechtTextareaLineHeight : string;
 export const utrechtTextboxBorderBottomWidth : string;
+export const utrechtTooltipBackgroundColor : string;
+export const utrechtTooltipBorderColor : string;
+export const utrechtTooltipBorderRadius : string;
+export const utrechtTooltipBorderWidth : string;
+export const utrechtTooltipColor : string;
+export const utrechtTooltipFontFamily : string;
+export const utrechtTooltipFontSize : string;
+export const utrechtTooltipPaddingBlock : string;
+export const utrechtTooltipPaddingInline : string;
 export const utrechtToptaskLinkBackgroundColor : string;
 export const utrechtToptaskLinkColor : string;
 export const utrechtToptaskLinkFontSize : string;

package/dist/variables.json

@@ -664,6 +664,7 @@
   "utrechtHeading6LineHeight": "1.5",
   "utrechtHeadingFontWeight": "700",
   "utrechtIconBaselineInsetBlockStart": "0.125em",
+  "utrechtIconCustomMarginInlineEnd": "8px",
   "utrechtIconScale2xl": "30px",
   "utrechtIconScale2xs": "4px",
   "utrechtIconScale3xl": "36px",
@@ -773,6 +774,58 @@
   "utrechtNavBarLinkPaddingBlockStart": "8px",
   "utrechtNavBarLinkPaddingInlineEnd": "16px",
   "utrechtNavBarLinkPaddingInlineStart": "16px",
+  "utrechtNavigationBorderBlockEndColor": "transparent",
+  "utrechtNavigationBorderBlockEndWidth": "0",
+  "utrechtNavigationBorderBlockStartColor": "transparent",
+  "utrechtNavigationBorderBlockStartWidth": "0",
+  "utrechtNavigationDrawerBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
+  "utrechtNavigationDrawerMinInlineSize": "100%",
+  "utrechtNavigationDrawerMobileMinInlineSize": "50%",
+  "utrechtNavigationItemBorderBlockEndColor": "transparent",
+  "utrechtNavigationItemBorderBlockEndWidth": "0",
+  "utrechtNavigationItemBorderBlockStartColor": "transparent",
+  "utrechtNavigationItemBorderBlockStartWidth": "0",
+  "utrechtNavigationItemMobileBorderBlockEndColor": "hsl(0 0% 80%)",
+  "utrechtNavigationItemMobileBorderBlockEndWidth": "1px",
+  "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
+  "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
+  "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
+  "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
+  "utrechtNavigationLinkBorderInlineEndWidth": "1px",
+  "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
+  "utrechtNavigationLinkFontWeight": "400",
+  "utrechtNavigationLinkGap": "8px",
+  "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkHoverDecorationThickness": "3px",
+  "utrechtNavigationLinkIsCurrentFontWeight": "700",
+  "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileHoverFontWeight": "700",
+  "utrechtNavigationLinkMobileMinBlockSize": "44px",
+  "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
+  "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
+  "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
+  "utrechtNavigationLinkMobileTransitionDuration": "300ms",
+  "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
+  "utrechtNavigationLinkPaddingBlockEnd": "16px",
+  "utrechtNavigationLinkPaddingBlockStart": "16px",
+  "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationListMobileInlineSize": "100%",
+  "utrechtNavigationListMobilePaddingBlockEnd": "8px",
+  "utrechtNavigationListMobilePaddingInlineEnd": "16px",
+  "utrechtNavigationListMobilePaddingInlineStart": "16px",
+  "utrechtNavigationListSideNavInlineSize": "100%",
+  "utrechtNavigationMarkerColor": "hsl(0 0% 80%)",
+  "utrechtNavigationToggleButtonOffsetEnd": "16px",
+  "utrechtNavigationToggleButtonOffsetStart": "16px",
   "utrechtNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
   "utrechtNumberBadgeBorderRadius": "1rem",
   "utrechtNumberBadgeColor": "hsl(0 0% 100%)",
@@ -1060,6 +1113,15 @@
   "utrechtTextareaBorderBottomWidth": "3px",
   "utrechtTextareaLineHeight": "1.5",
   "utrechtTextboxBorderBottomWidth": "3px",
+  "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
+  "utrechtTooltipBorderRadius": "0",
+  "utrechtTooltipBorderWidth": "1px",
+  "utrechtTooltipColor": "hsl(0 0% 40%)",
+  "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "utrechtTooltipFontSize": "1rem",
+  "utrechtTooltipPaddingBlock": "8px",
+  "utrechtTooltipPaddingInline": "16px",
   "utrechtTopnavLinkBackgroundColor": "hsl(211 60% 40%)",
   "utrechtTopnavLinkColor": "hsl(0 0% 100%)",
   "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",

package/dist/variables.less

@@ -101,6 +101,8 @@
 @utrecht-toptask-link-min-inline-size: 15rem;
 @utrecht-toptask-link-min-block-size: 8.25rem;
 @utrecht-toptask-link-line-height: 1.2;
+@utrecht-tooltip-border-width: 1px;
+@utrecht-tooltip-border-radius: 0;
 @utrecht-textbox-border-bottom-width: 3px;
 @utrecht-textarea-border-bottom-width: 3px;
 @utrecht-textarea-border-block-end-width: 3px;
@@ -189,6 +191,30 @@
 @utrecht-ordered-list-margin-block-start: 0;
 @utrecht-number-data-negative-color: red;
 @utrecht-number-data-positive-color: green;
+@utrecht-navigation-toggle-button-offset-start: 16px;
+@utrecht-navigation-toggle-button-offset-end: 16px;
+@utrecht-navigation-list-side-nav-inline-size: 100%;
+@utrecht-navigation-list-mobile-inline-size: 100%;
+@utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
+@utrecht-navigation-link-mobile-transition-duration: 300ms;
+@utrecht-navigation-link-mobile-min-block-size: 44px;
+@utrecht-navigation-link-hover-decoration-thickness: 3px;
+@utrecht-navigation-link-gap: 8px;
+@utrecht-navigation-link-focus-text-decoration-thickness: 3px;
+@utrecht-navigation-link-border-inline-end-width: 1px;
+@utrecht-navigation-item-mobile-border-block-start-width: 1px;
+@utrecht-navigation-item-mobile-border-block-end-width: 1px;
+@utrecht-navigation-item-border-block-start-width: 0;
+@utrecht-navigation-item-border-block-start-color: transparent;
+@utrecht-navigation-item-border-block-end-width: 0;
+@utrecht-navigation-item-border-block-end-color: transparent;
+@utrecht-navigation-drawer-min-inline-size: 100%;
+@utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
+@utrecht-navigation-drawer-mobile-min-inline-size: 50%;
+@utrecht-navigation-border-block-start-width: 0;
+@utrecht-navigation-border-block-start-color: transparent;
+@utrecht-navigation-border-block-end-width: 0;
+@utrecht-navigation-border-block-end-color: transparent;
 @utrecht-topnav-link-focus-text-decoration: none;
 @utrecht-topnav-link-focus-border-type: dotted;
 @utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -502,6 +528,13 @@
 @utrecht-toptask-link-padding-block-start: @utrecht-space-block-xl;
 @utrecht-toptask-link-padding-block-end: @utrecht-space-block-xl;
 @utrecht-toptask-link-font-size: @utrecht-typography-scale-md-font-size;
+@utrecht-tooltip-padding-inline: @utrecht-space-inline-md;
+@utrecht-tooltip-padding-block: @utrecht-space-block-xs;
+@utrecht-tooltip-font-size: @utrecht-typography-scale-md-font-size;
+@utrecht-tooltip-font-family: @utrecht-typography-sans-serif-font-family;
+@utrecht-tooltip-color: @utrecht-color-grey-40;
+@utrecht-tooltip-border-color: @utrecht-color-grey-40;
+@utrecht-tooltip-background-color: @utrecht-color-white;
 @utrecht-textarea-line-height: @utrecht-typography-line-height-md;
 @utrecht-table-row-alternate-even-color: @utrecht-color-black;
 @utrecht-table-row-alternate-even-background-color: @utrecht-color-grey-95;
@@ -612,6 +645,34 @@
 @utrecht-page-body-content-background-color: @utrecht-color-white;
 @utrecht-number-badge-padding-inline: @nl-number-badge-padding-inline; // Default inline padding color for badge components
 @utrecht-number-badge-padding-block: @nl-number-badge-padding-block; // Default block padding for badge components
+@utrecht-navigation-marker-color: @utrecht-color-grey-80;
+@utrecht-navigation-list-mobile-padding-inline-start: @utrecht-space-inline-md;
+@utrecht-navigation-list-mobile-padding-inline-end: @utrecht-space-inline-md;
+@utrecht-navigation-list-mobile-padding-block-end: @utrecht-space-block-xs;
+@utrecht-navigation-list-mobile-background-color: @utrecht-color-white;
+@utrecht-navigation-link-padding-block-start: @utrecht-space-block-md;
+@utrecht-navigation-link-padding-block-end: @utrecht-space-block-md;
+@utrecht-navigation-link-mobile-padding-inline-start: @utrecht-space-inline-md;
+@utrecht-navigation-link-mobile-padding-block-start: @utrecht-space-block-xs;
+@utrecht-navigation-link-mobile-padding-block-end: @utrecht-space-block-xs;
+@utrecht-navigation-link-mobile-hover-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
+@utrecht-navigation-link-mobile-hover-color: @utrecht-color-blue-35;
+@utrecht-navigation-link-mobile-hover-background-color: @utrecht-color-white;
+@utrecht-navigation-link-mobile-color: @utrecht-color-blue-35;
+@utrecht-navigation-link-mobile-background-color: @utrecht-color-white;
+@utrecht-navigation-link-is-current-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
+@utrecht-navigation-link-hover-color: @utrecht-color-white;
+@utrecht-navigation-link-hover-background-color: @utrecht-color-black;
+@utrecht-navigation-link-font-weight: @utrecht-typography-weight-scale-normal-font-weight;
+@utrecht-navigation-link-focus-background-color: @utrecht-color-yellow-80;
+@utrecht-navigation-link-focus-color: @utrecht-color-black;
+@utrecht-navigation-link-color: @utrecht-color-white;
+@utrecht-navigation-link-border-color: @utrecht-color-grey-40;
+@utrecht-navigation-link-background-color: @utrecht-color-grey-15;
+@utrecht-navigation-link-active-focus-color: @utrecht-color-black;
+@utrecht-navigation-link-active-color: @utrecht-color-white;
+@utrecht-navigation-item-mobile-border-block-start-color: @utrecht-color-grey-80;
+@utrecht-navigation-item-mobile-border-block-end-color: @utrecht-color-grey-80;
 @utrecht-topnav-link-hover-background-color: @utrecht-color-black;
 @utrecht-topnav-link-focus-outline-color: @utrecht-color-black;
 @utrecht-topnav-link-focus-background-color: @utrecht-color-yellow-80;
@@ -690,6 +751,7 @@
 @utrecht-index-char-nav-gap: @utrecht-space-column-sm;
 @utrecht-index-char-nav-margin-block-end: @utrecht-space-block-md;
 @utrecht-index-char-nav-margin-block-start: @utrecht-space-block-lg;
+@utrecht-icon-custom-margin-inline-end: @utrecht-space-inline-xs;
 @utrecht-heading-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
 @utrecht-form-toggle-focus-border-color: @utrecht-color-black;
 @utrecht-form-toggle-checked-accent-color: @utrecht-color-blue-35;

package/dist/variables.mjs

@@ -106,8 +106,8 @@ export const utrechtBreadcrumbNavLinkFocusTextDecoration = "underline";
 export const utrechtBreadcrumbNavLinkHoverColor = "hsl(211 60% 40%)";
 export const utrechtBreadcrumbNavLinkHoverTextDecoration = "underline";
 export const utrechtBreadcrumbNavLinkDisabledColor = "hsl(0 0% 40%)";
-export const utrechtBreadcrumbNavLinkTextDecoration = "none";
 export const utrechtBreadcrumbNavLinkIconSize = "16px";
+export const utrechtBreadcrumbNavLinkTextDecoration = "none";
 export const utrechtBreadcrumbNavSeparatorColor = "hsl(211 60% 35%)";
 export const utrechtBreadcrumbNavSeparatorIconSize = "0.875rem";
 export const utrechtBreadcrumbNavArrowsLinkBackgroundColor = "hsl(0 0% 90%)";
@@ -556,6 +556,7 @@ export const utrechtHeading6LineHeight = "1.5";
 export const utrechtHeadingFontWeight = "700";
 export const utrechtIconSize = "48px";
 export const utrechtIconBaselineInsetBlockStart = "0.125em";
+export const utrechtIconCustomMarginInlineEnd = "8px";
 export const utrechtIndexCharNavMarginBlockStart = "20px";
 export const utrechtIndexCharNavMarginBlockEnd = "16px";
 export const utrechtIndexCharNavGap = "12px";
@@ -672,6 +673,58 @@ export const utrechtTopnavLinkFocusTextDecoration = "none";
 export const utrechtTopnavLinkFocusBackgroundColor = "hsl(48 100% 80%)";
 export const utrechtTopnavLinkFocusOutlineColor = "hsl(0 0% 0%)";
 export const utrechtTopnavLinkHoverBackgroundColor = "hsl(0 0% 0%)";
+export const utrechtNavigationBorderBlockEndColor = "transparent";
+export const utrechtNavigationBorderBlockEndWidth = "0";
+export const utrechtNavigationBorderBlockStartColor = "transparent";
+export const utrechtNavigationBorderBlockStartWidth = "0";
+export const utrechtNavigationDrawerMobileMinInlineSize = "50%";
+export const utrechtNavigationDrawerBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
+export const utrechtNavigationDrawerMinInlineSize = "100%";
+export const utrechtNavigationItemBorderBlockEndColor = "transparent";
+export const utrechtNavigationItemBorderBlockEndWidth = "0";
+export const utrechtNavigationItemBorderBlockStartColor = "transparent";
+export const utrechtNavigationItemBorderBlockStartWidth = "0";
+export const utrechtNavigationItemMobileBorderBlockEndColor = "hsl(0 0% 80%)";
+export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
+export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
+export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
+export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
+export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
+export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
+export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
+export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFontWeight = "400";
+export const utrechtNavigationLinkGap = "8px";
+export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkHoverColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkHoverDecorationThickness = "3px";
+export const utrechtNavigationLinkIsCurrentFontWeight = "700";
+export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileHoverFontWeight = "700";
+export const utrechtNavigationLinkMobileMinBlockSize = "44px";
+export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
+export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
+export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
+export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
+export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
+export const utrechtNavigationLinkPaddingBlockEnd = "16px";
+export const utrechtNavigationLinkPaddingBlockStart = "16px";
+export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationListMobileInlineSize = "100%";
+export const utrechtNavigationListMobilePaddingBlockEnd = "8px";
+export const utrechtNavigationListMobilePaddingInlineEnd = "16px";
+export const utrechtNavigationListMobilePaddingInlineStart = "16px";
+export const utrechtNavigationListSideNavInlineSize = "100%";
+export const utrechtNavigationMarkerColor = "hsl(0 0% 80%)";
+export const utrechtNavigationToggleButtonOffsetEnd = "16px";
+export const utrechtNavigationToggleButtonOffsetStart = "16px";
 export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtNumberBadgeBorderRadius = "1rem";
 export const utrechtNumberBadgeColor = "hsl(0 0% 100%)"; // Default text color for badge components
@@ -894,6 +947,15 @@ export const utrechtTextareaBorderBlockEndWidth = "3px";
 export const utrechtTextareaBorderBottomWidth = "3px";
 export const utrechtTextareaLineHeight = "1.5";
 export const utrechtTextboxBorderBottomWidth = "3px";
+export const utrechtTooltipBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtTooltipBorderColor = "hsl(0 0% 40%)";
+export const utrechtTooltipBorderRadius = "0";
+export const utrechtTooltipBorderWidth = "1px";
+export const utrechtTooltipColor = "hsl(0 0% 40%)";
+export const utrechtTooltipFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const utrechtTooltipFontSize = "1rem";
+export const utrechtTooltipPaddingBlock = "8px";
+export const utrechtTooltipPaddingInline = "16px";
 export const utrechtToptaskLinkBackgroundColor = "hsl(211 60% 35%)";
 export const utrechtToptaskLinkColor = "hsl(0 0% 100%)";
 export const utrechtToptaskLinkFontSize = "1rem";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.0",
+  "version": "3.4.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",