@utrecht/design-tokens 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @utrecht/design-tokens
 
+## 3.3.0
+
+### Minor Changes
+
+- f877f78: Initial version of the Tooltip component.
+
+## 3.2.0
+
+### Minor Changes
+
+- cbb98e9: Add `utrecht.breadcrumb-nav.item.first.padding-inline-start` token.
+
+  Use this token to align the content of the first link with the other content, by setting it to `0`.
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/_mixin-theme.scss

@@ -103,6 +103,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;
@@ -378,6 +380,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -503,6 +506,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);

package/dist/_mixin.scss

@@ -103,6 +103,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;
@@ -378,6 +380,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -503,6 +506,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);

package/dist/_variables.scss

@@ -101,6 +101,8 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
 $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;
@@ -376,6 +378,7 @@ $utrecht-breadcrumb-nav-divider-inline-size: 1px;
 $utrecht-breadcrumb-nav-link-text-decoration: none;
 $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+$utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 $utrecht-breadcrumb-nav-min-block-size: 34px;
 $utrecht-body-line-height: 1.4;
 $utrecht-blockquote-margin-block-end: 1.6em;
@@ -501,6 +504,13 @@ $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
 $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;

package/dist/dark/_mixin-theme.scss

@@ -103,6 +103,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;
@@ -379,6 +381,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -505,6 +508,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);

package/dist/dark/_mixin.scss

@@ -103,6 +103,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;
@@ -379,6 +381,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -505,6 +508,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);

package/dist/dark/_variables.scss

@@ -101,6 +101,8 @@ $utrecht-toptask-link-hover-transform-scale: 1.02;
 $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;
@@ -377,6 +379,7 @@ $utrecht-breadcrumb-nav-divider-inline-size: 1px;
 $utrecht-breadcrumb-nav-link-text-decoration: none;
 $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+$utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 $utrecht-breadcrumb-nav-min-block-size: 34px;
 $utrecht-body-line-height: 1.4;
 $utrecht-blockquote-margin-block-end: 1.6em;
@@ -503,6 +506,13 @@ $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
 $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;

package/dist/dark/index.cjs

@@ -97,6 +97,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -905,6 +906,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% 80%)",
   "utrechtToptaskLinkColor": "hsl(0 0% 15%)",
   "utrechtToptaskLinkFontSize": "1rem",

package/dist/dark/index.css

@@ -108,6 +108,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;
@@ -384,6 +386,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -510,6 +513,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);

package/dist/dark/index.d.ts

@@ -106,6 +106,7 @@ export const utrechtBodyBackgroundColor : string;
 export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
 export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;
@@ -971,6 +972,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/dark/index.flat.json

@@ -225,6 +225,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -1070,6 +1071,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/dark/index.json

@@ -5840,6 +5840,45 @@
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -31692,6 +31731,321 @@
       "border-bottom-width"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(0 0% 100%)",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "color",
+      "value": "{utrecht.color.white}"
+    },
+    "name": "utrechtTooltipBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "background-color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(0 0% 40%)",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "color",
+      "value": "{utrecht.color.grey.40}"
+    },
+    "name": "utrechtTooltipBorderColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "border-color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length-percentage>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "borderRadius"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length-percentage>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "borderRadius"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtTooltipBorderRadius",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "border-radius"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "borderWidth"
+      }
+    },
+    "type": "dimension",
+    "value": "1px",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "borderWidth"
+        }
+      },
+      "type": "dimension",
+      "value": "1px"
+    },
+    "name": "utrechtTooltipBorderWidth",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "border-width"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(0 0% 40%)",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "color",
+      "value": "{utrecht.color.grey.40}"
+    },
+    "name": "utrechtTooltipColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "*",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "fontFamilies"
+      }
+    },
+    "type": "fontFamily",
+    "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "*",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "fontFamilies"
+        }
+      },
+      "type": "fontFamily",
+      "value": "{utrecht.typography.sans-serif.font-family}"
+    },
+    "name": "utrechtTooltipFontFamily",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "font-family"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "fontSizes"
+      }
+    },
+    "type": "fontSize",
+    "value": "1rem",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "fontSizes"
+        }
+      },
+      "type": "fontSize",
+      "value": "{utrecht.typography.scale.md.font-size}"
+    },
+    "name": "utrechtTooltipFontSize",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "font-size"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "8px",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.block.xs}"
+    },
+    "name": "utrechtTooltipPaddingBlock",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "padding-block"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/tooltip.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.inline.md}"
+    },
+    "name": "utrechtTooltipPaddingInline",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "tooltip",
+      "padding-inline"
+    ]
+  },
   {
     "value": "hsl(211 60% 40%)",
     "filePath": "src/component/utrecht/topnav.tokens.json",