@utrecht/design-tokens 3.0.0 → 3.2.0

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": {
@@ -10898,6 +10937,363 @@
       "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/index.mjs

@@ -96,6 +96,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";
@@ -278,6 +279,17 @@ export const utrechtCalendarNavigationLabelMinInlineSize = "200px";
 export const utrechtCalendarNavigationLabelColor = "hsl(0 0% 0%)";
 export const utrechtCalendarNavigationLabelFontSize = "1.125rem";
 export const utrechtCalendarIconSize = "24px";
+export const utrechtCardBackgroundColor = "hsl(211 60% 90%)";
+export const utrechtCardColor = "hsl(0 0% 0%)";
+export const utrechtCardHeadingColor = "hsl(211 60% 35%)";
+export const utrechtCardHeadingPaddingInlineStart = "16px";
+export const utrechtCardHeadingPaddingInlineEnd = "16px";
+export const utrechtCardLinkHoverTextDecorationThickness = "3px";
+export const utrechtCardContentRowGap = "16px";
+export const utrechtCardContentPaddingBlockStart = "16px";
+export const utrechtCardContentPaddingBlockEnd = "16px";
+export const utrechtCardBodyPaddingInlineStart = "16px";
+export const utrechtCardBodyPaddingInlineEnd = "16px";
 export const utrechtCheckboxBackgroundColor = "hsl(0 0% 20%)";
 export const utrechtCheckboxBorderColor = "hsl(0 0% 95%)";
 export const utrechtCheckboxBorderRadius = "0";

package/dist/dark/index.tokens.json

@@ -927,6 +927,9 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": "0"
+        },
         "padding-block-start": "8px",
         "padding-block-end": "8px",
         "padding-inline-end": "8px",
@@ -1949,6 +1952,79 @@
         "size": "24px"
       }
     },
+    "card": {
+      "background-color": "hsl(211 60% 90%)",
+      "color": "hsl(0 0% 0%)",
+      "max-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "dimension"
+      },
+      "border-radius": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "dimension"
+      },
+      "box-shadow": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<shadow>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "shadow"
+      },
+      "inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "dimension"
+      },
+      "row-gap": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "dimension"
+      },
+      "heading": {
+        "color": "hsl(211 60% 35%)",
+        "padding-inline-start": "16px",
+        "padding-inline-end": "16px"
+      },
+      "link": {
+        "hover": {
+          "text-decoration-thickness": "3px"
+        }
+      },
+      "content": {
+        "row-gap": "16px",
+        "padding-block-start": "16px",
+        "padding-block-end": "16px"
+      },
+      "body": {
+        "padding-inline-start": "16px",
+        "padding-inline-end": "16px"
+      }
+    },
     "checkbox": {
       "background-color": "hsl(0 0% 20%)",
       "border-color": "hsl(0 0% 95%)",
@@ -7892,6 +7968,7 @@
         }
       }
     },
+    "youtube-video": {},
     "color": {
       "red": {
         "20": "hsl(0 100% 20%)",