@utrecht/design-tokens 3.1.0 → 3.3.0

package/dist/tokens.json

@@ -4016,6 +4016,47 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "$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"
+            ]
+          }
+        },
         "padding-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
@@ -36289,6 +36330,398 @@
         }
       }
     },
+    "tooltip": {
+      "background-color": {
+        "$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"
+        ]
+      },
+      "border-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"
+        ]
+      },
+      "border-radius": {
+        "$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"
+        ]
+      },
+      "border-width": {
+        "$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"
+        ]
+      },
+      "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": "utrechtTooltipColor",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "tooltip",
+          "color"
+        ]
+      },
+      "font-family": {
+        "$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"
+        ]
+      },
+      "font-size": {
+        "$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"
+        ]
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": false
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": [
+              "<length>",
+              "<number>"
+            ],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "lineHeights"
+      },
+      "max-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "sizing"
+      },
+      "padding-block": {
+        "$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"
+        ]
+      },
+      "padding-inline": {
+        "$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"
+        ]
+      },
+      "transition-duration": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<time>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "other"
+      },
+      "transition-timing-function": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<time>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "other"
+      },
+      "z-index": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "other"
+      },
+      "arrow": {
+        "size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length-percentage>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "sizing"
+        }
+      }
+    },
     "toptask-link": {
       "background-color": {
         "$extensions": {

package/dist/variables.cjs

@@ -95,6 +95,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -894,6 +895,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;
@@ -353,6 +355,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-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;
@@ -423,6 +426,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);

package/dist/variables.d.ts

@@ -104,6 +104,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;
@@ -960,6 +961,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

@@ -223,6 +223,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -1059,6 +1060,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;
@@ -376,6 +378,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;
@@ -501,6 +504,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;

package/dist/variables.mjs

@@ -94,6 +94,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
 export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
 export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";
@@ -893,6 +894,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.1.0",
+  "version": "3.3.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",

package/src/component/utrecht/breadcrumb-nav.tokens.json

@@ -13,6 +13,11 @@
         }
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "value": "0"
+          }
+        },
         "padding-block-start": {
           "value": "{utrecht.space.block.xs}"
         },

package/src/component/utrecht/tooltip.tokens.json

@@ -0,0 +1,15 @@
+{
+  "utrecht": {
+    "tooltip": {
+      "background-color": { "value": "{utrecht.color.white}" },
+      "border-color": { "value": "{utrecht.color.grey.40}" },
+      "border-radius": { "value": "0" },
+      "border-width": { "value": "1px" },
+      "color": { "value": "{utrecht.color.grey.40}" },
+      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "padding-inline": { "value": "{utrecht.space.inline.md}" },
+      "padding-block": { "value": "{utrecht.space.block.xs}" }
+    }
+  }
+}