@utrecht/design-tokens 3.0.0 → 3.2.0

package/dist/index.css

@@ -364,6 +364,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;
@@ -404,6 +405,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;
@@ -806,6 +808,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);
@@ -1475,6 +1487,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;
@@ -1515,6 +1528,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;
@@ -1919,6 +1933,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/index.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;
@@ -280,6 +281,17 @@ export const utrechtCalendarNavigationLabelMinInlineSize : string;
 export const utrechtCalendarNavigationLabelColor : string;
 export const utrechtCalendarNavigationLabelFontSize : string;
 export const utrechtCalendarIconSize : string;
+export const utrechtCardBackgroundColor : string;
+export const utrechtCardColor : string;
+export const utrechtCardHeadingColor : string;
+export const utrechtCardHeadingPaddingInlineStart : string;
+export const utrechtCardHeadingPaddingInlineEnd : string;
+export const utrechtCardLinkHoverTextDecorationThickness : string;
+export const utrechtCardContentRowGap : string;
+export const utrechtCardContentPaddingBlockStart : string;
+export const utrechtCardContentPaddingBlockEnd : string;
+export const utrechtCardBodyPaddingInlineStart : string;
+export const utrechtCardBodyPaddingInlineEnd : string;
 export const utrechtCheckboxBackgroundColor : string;
 export const utrechtCheckboxBorderColor : string;
 export const utrechtCheckboxBorderRadius : string;

package/dist/index.flat.json

@@ -223,6 +223,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",
@@ -394,6 +395,17 @@
   "utrechtCalendarTableWeeksItemPaddingBlockEnd": "10px",
   "utrechtCalendarTableWeeksItemPaddingBlockStart": "4px",
   "utrechtCalendarTableWeeksItemWidth": "44px",
+  "utrechtCardBackgroundColor": "hsl(211 60% 90%)",
+  "utrechtCardBodyPaddingInlineEnd": "16px",
+  "utrechtCardBodyPaddingInlineStart": "16px",
+  "utrechtCardColor": "hsl(0 0% 0%)",
+  "utrechtCardContentPaddingBlockEnd": "16px",
+  "utrechtCardContentPaddingBlockStart": "16px",
+  "utrechtCardContentRowGap": "16px",
+  "utrechtCardHeadingColor": "hsl(211 60% 35%)",
+  "utrechtCardHeadingPaddingInlineEnd": "16px",
+  "utrechtCardHeadingPaddingInlineStart": "16px",
+  "utrechtCardLinkHoverTextDecorationThickness": "3px",
   "utrechtCheckboxBackgroundColor": "hsl(0 0% 100%)",
   "utrechtCheckboxBorderColor": "hsl(0 0% 30%)",
   "utrechtCheckboxBorderRadius": "0",

package/dist/index.json

@@ -6048,6 +6048,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": {
@@ -11515,6 +11554,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/index.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";
@@ -269,6 +270,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% 100%)";
 export const utrechtCheckboxBorderColor = "hsl(0 0% 30%)";
 export const utrechtCheckboxBorderRadius = "0";

package/dist/index.tokens.json

@@ -923,6 +923,9 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": "0"
+        },
         "padding-block-start": "8px",
         "padding-block-end": "8px",
         "padding-inline-end": "8px",
@@ -1945,6 +1948,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% 100%)",
       "border-color": "hsl(0 0% 30%)",
@@ -7906,6 +7982,7 @@
         }
       }
     },
+    "youtube-video": {},
     "color": {
       "red": {
         "20": "hsl(0 100% 20%)",