@utrecht/design-tokens 3.0.0 → 3.2.0

package/dist/dark/list.mjs

@@ -5840,6 +5840,45 @@ export default [
       "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": {
@@ -10898,6 +10937,363 @@ export default [
       "width"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(211 60% 90%)",
+    "filePath": "src/component/utrecht/card.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.blue.90}"
+    },
+    "name": "utrechtCardBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "background-color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.inline.md}"
+    },
+    "name": "utrechtCardBodyPaddingInlineEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "body",
+      "padding-inline-end"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.inline.md}"
+    },
+    "name": "utrechtCardBodyPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "body",
+      "padding-inline-start"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(0 0% 0%)",
+    "filePath": "src/component/utrecht/card.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.black}"
+    },
+    "name": "utrechtCardColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.block.md}"
+    },
+    "name": "utrechtCardContentPaddingBlockEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "content",
+      "padding-block-end"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.block.md}"
+    },
+    "name": "utrechtCardContentPaddingBlockStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "content",
+      "padding-block-start"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.row.md}"
+    },
+    "name": "utrechtCardContentRowGap",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "content",
+      "row-gap"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "color",
+    "value": "hsl(211 60% 35%)",
+    "filePath": "src/component/utrecht/card.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.blue.35}"
+    },
+    "name": "utrechtCardHeadingColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "heading",
+      "color"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.inline.md}"
+    },
+    "name": "utrechtCardHeadingPaddingInlineEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "heading",
+      "padding-inline-end"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "dimension",
+    "value": "16px",
+    "filePath": "src/component/utrecht/card.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "dimension",
+      "value": "{utrecht.space.inline.md}"
+    },
+    "name": "utrechtCardHeadingPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "heading",
+      "padding-inline-start"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "borderWidth"
+      }
+    },
+    "type": "dimension",
+    "value": "3px",
+    "filePath": "src/component/utrecht/card.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": "3px"
+    },
+    "name": "utrechtCardLinkHoverTextDecorationThickness",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "card",
+      "link",
+      "hover",
+      "text-decoration-thickness"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/dark/property.css

@@ -106,6 +106,7 @@
 @property --utrecht-breadcrumb-nav-arrows-link-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-arrows-link-focus-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-font-size { syntax: '<length>'; inherits: true; }
+@property --utrecht-breadcrumb-nav-item-first-padding-inline-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-inline-end { syntax: '<length>'; inherits: true; }
@@ -198,6 +199,17 @@
 @property --utrecht-calendar-table-days-item-day-selected-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-calendar-table-days-item-day-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-calendar-table-weeks-item-width { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-background-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-card-body-padding-inline-end { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-body-padding-inline-start { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-card-content-padding-block-end { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-content-padding-block-start { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-content-row-gap { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-heading-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-card-heading-padding-inline-end { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-heading-padding-inline-start { syntax: '<length>'; inherits: true; }
+@property --utrecht-card-link-hover-text-decoration-thickness { syntax: '<length>'; inherits: true; }
 @property --utrecht-checkbox-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-checkbox-border-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-checkbox-border-radius { syntax: '<length-percentage>'; inherits: true; }

package/dist/dark/root.css

@@ -313,6 +313,7 @@
   --utrecht-checkbox-focus-border-width: 2px;
   --utrecht-checkbox-border-width: 2px;
   --utrecht-checkbox-border-radius: 0;
+  --utrecht-card-link-hover-text-decoration-thickness: 3px;
   --utrecht-calendar-table-weeks-item-width: 44px;
   --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
   --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
@@ -353,6 +354,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;
@@ -695,6 +697,16 @@
   --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
   --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
   --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
+  --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-color: var(--utrecht-color-blue-35);
+  --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
+  --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
+  --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
+  --utrecht-card-color: var(--utrecht-color-black);
+  --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-background-color: var(--utrecht-color-blue-90);
   --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
   --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
   --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);

package/dist/dark/theme-prince-xml.css

@@ -338,6 +338,7 @@
   --utrecht-checkbox-size: 24px;
   --utrecht-checkbox-border-width: 2px;
   --utrecht-checkbox-border-radius: 0;
+  --utrecht-card-link-hover-text-decoration-thickness: 3px;
   --utrecht-calendar-icon-size: 24px;
   --utrecht-calendar-navigation-label-min-inline-size: 200px;
   --utrecht-calendar-navigation-padding-block-end: 2px;
@@ -378,6 +379,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;
@@ -782,6 +784,16 @@
   --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
   --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
   --utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
+  --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
+  --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
+  --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
+  --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-color: var(--utrecht-color-blue-35);
+  --utrecht-card-color: var(--utrecht-color-black);
+  --utrecht-card-background-color: var(--utrecht-color-blue-90);
   --utrecht-calendar-navigation-label-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-calendar-navigation-label-color: var(--utrecht-color-black);
   --utrecht-calendar-navigation-color: var(--utrecht-color-blue-30);

package/dist/dark/theme.css

@@ -313,6 +313,7 @@
   --utrecht-checkbox-focus-border-width: 2px;
   --utrecht-checkbox-border-width: 2px;
   --utrecht-checkbox-border-radius: 0;
+  --utrecht-card-link-hover-text-decoration-thickness: 3px;
   --utrecht-calendar-table-weeks-item-width: 44px;
   --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
   --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
@@ -353,6 +354,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;
@@ -695,6 +697,16 @@
   --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
   --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
   --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
+  --utrecht-card-heading-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-heading-color: var(--utrecht-color-blue-35);
+  --utrecht-card-content-row-gap: var(--utrecht-space-row-md);
+  --utrecht-card-content-padding-block-start: var(--utrecht-space-block-md);
+  --utrecht-card-content-padding-block-end: var(--utrecht-space-block-md);
+  --utrecht-card-color: var(--utrecht-color-black);
+  --utrecht-card-body-padding-inline-start: var(--utrecht-space-inline-md);
+  --utrecht-card-body-padding-inline-end: var(--utrecht-space-inline-md);
+  --utrecht-card-background-color: var(--utrecht-color-blue-90);
   --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
   --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
   --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);