@utrecht/design-tokens 3.2.0 → 3.4.0

package/dist/index.css

@@ -130,6 +130,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;
@@ -218,6 +220,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;
@@ -531,6 +557,13 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
+  --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-alternate-even-color: var(--utrecht-color-black);
   --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -641,6 +674,34 @@
   --utrecht-page-body-content-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-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+  --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-topnav-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -719,6 +780,7 @@
   --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
   --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
+  --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-focus-border-color: var(--utrecht-color-black);
   --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
@@ -1252,6 +1314,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;
@@ -1340,6 +1404,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;
@@ -1655,6 +1743,13 @@
     --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
     --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
     --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
+    --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-alternate-even-color: var(--utrecht-color-black);
     --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -1767,6 +1862,34 @@
     --utrecht-page-body-content-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-background-color: var(--utrecht-color-yellow-80);
+    --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+    --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-topnav-link-hover-background-color: var(--utrecht-color-black);
     --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
     --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -1845,6 +1968,7 @@
     --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
     --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
     --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
+    --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-focus-border-color: var(--utrecht-color-black);
     --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);

package/dist/index.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/index.flat.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%)",