@utrecht/design-tokens 3.2.0 → 3.3.0

package/dist/theme-prince-xml.css

@@ -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;
@@ -504,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/theme.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;
@@ -424,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/tokens.cjs

@@ -36334,6 +36334,398 @@ module.exports = {
         }
       }
     },
+    "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": "background-color",
+        "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": "border-color",
+        "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": "border-radius",
+        "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": "border-width",
+        "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": "color",
+        "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": "font-family",
+        "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": "font-size",
+        "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": "padding-block",
+        "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": "padding-inline",
+        "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/tokens.d.ts

@@ -4689,6 +4689,56 @@ declare const tokens: {
         }
       }
     },
+    "tooltip": {
+      "background-color": DesignToken,
+      "border-color": DesignToken,
+      "border-radius": DesignToken,
+      "border-width": DesignToken,
+      "color": DesignToken,
+      "font-family": DesignToken,
+      "font-size": DesignToken,
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {}
+        }
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": {}
+          }
+        }
+      },
+      "max-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {}
+        }
+      },
+      "padding-block": DesignToken,
+      "padding-inline": DesignToken,
+      "transition-duration": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {}
+        }
+      },
+      "transition-timing-function": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {}
+        }
+      },
+      "z-index": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {}
+        }
+      },
+      "arrow": {
+        "size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {}
+          }
+        }
+      }
+    },
     "toptask-link": {
       "background-color": DesignToken,
       "color": DesignToken,