@utrecht/design-tokens 6.1.1 → 6.2.1

package/dist/dark/index.d.ts

@@ -490,6 +490,7 @@ export const utrechtSpaceColumn3xl: string;
 export const utrechtSpaceColumn4xl: string;
 /** Extra Large 5 */
 export const utrechtSpaceColumn5xl: string;
+export const utrechtTextboxBorderBottomWidth: string;
 export const utrechtDataListMarginBlockEnd: string;
 export const utrechtDataListMarginBlockStart: string;
 export const utrechtDataListItemKeyFontWeight: string;
@@ -758,6 +759,8 @@ export const utrechtMarkBackgroundColor: string;
 export const utrechtMarkColor: string;
 export const utrechtNavBarBackgroundColor: string;
 export const utrechtNavBarColor: string;
+export const utrechtNavBarContentBackgroundColor: string;
+export const utrechtNavBarContentColor: string;
 export const utrechtNavBarContentMaxInlineSize: string;
 export const utrechtNavBarLinkPaddingBlockEnd: string;
 export const utrechtNavBarLinkPaddingBlockStart: string;
@@ -858,6 +861,10 @@ export const utrechtOrderedListPaddingInlineStart: string;
 export const utrechtOrderedListItemMarginBlockStart: string;
 export const utrechtOrderedListItemMarginBlockEnd: string;
 export const utrechtOrderedListItemPaddingInlineStart: number;
+export const utrechtPageBodyPaddingBlockStart: number;
+export const utrechtPageBodyPaddingBlockEnd: number;
+export const utrechtPageBodyPaddingInlineStart: number;
+export const utrechtPageBodyPaddingInlineEnd: number;
 export const utrechtPageBodyContentBackgroundColor: string;
 export const utrechtPageBodyContentColor: string;
 export const utrechtPageBodyContentPaddingBlockStart: number;
@@ -865,19 +872,15 @@ export const utrechtPageBodyContentPaddingBlockEnd: string;
 export const utrechtPageBodyContentPaddingInlineStart: string;
 export const utrechtPageBodyContentPaddingInlineEnd: string;
 export const utrechtPageBodyContentMaxInlineSize: string;
-export const utrechtPageBodyPaddingInlineEnd: string;
-export const utrechtPageBodyPaddingInlineStart: string;
-export const utrechtPageBodyPaddingBlockEnd: string;
-export const utrechtPageBodyPaddingBlockStart: string;
 export const utrechtPageContentPaddingBlockStart: string;
 export const utrechtPageContentPaddingBlockEnd: string;
 export const utrechtPageFooterColor: string;
 export const utrechtPageFooterBackgroundColor: string;
 export const utrechtPageFooterBackgroundImage: string;
+export const utrechtPageFooterContentPaddingInline: string;
 export const utrechtPageFooterContentPaddingBlockEnd: string;
 export const utrechtPageFooterContentPaddingBlockStart: string;
 export const utrechtPageFooterContentMaxInlineSize: string;
-export const utrechtPageFooterContentPaddingInline: string;
 export const utrechtPageHeaderPaddingBlockStart: number;
 export const utrechtPageHeaderPaddingBlockEnd: number;
 export const utrechtPageHeaderPaddingInlineStart: number;
@@ -886,10 +889,10 @@ export const utrechtPageHeaderContentBackgroundColor: string;
 export const utrechtPageHeaderContentColor: string;
 export const utrechtPageHeaderContentPaddingBlockStart: string;
 export const utrechtPageHeaderContentPaddingBlockEnd: string;
-export const utrechtPageHeaderContentPaddingInlineStart: string;
-export const utrechtPageHeaderContentPaddingInlineEnd: string;
-export const utrechtPageHeaderContentMaxInlineSize: string;
 export const utrechtPageHeaderContentPaddingInline: string;
+export const utrechtPageHeaderContentMaxInlineSize: string;
+export const utrechtPageHeaderContentPaddingInlineEnd: string;
+export const utrechtPageHeaderContentPaddingInlineStart: string;
 export const utrechtPageBackgroundColor: string;
 export const utrechtPageColor: string;
 export const utrechtPageMarginInlineStart: string;
@@ -1102,7 +1105,6 @@ export const utrechtTableRowAlternateEvenColor: string;
 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: number;

package/dist/dark/index.flat.json

@@ -810,8 +810,10 @@
   "utrechtMarkColor": "hsl(0 0% 0%)",
   "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
   "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
-  "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
-  "utrechtNavBarColor": "hsl(0 0% 0%)",
+  "utrechtNavBarBackgroundColor": "transparent",
+  "utrechtNavBarColor": "transparent",
+  "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavBarContentColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",

package/dist/dark/index.json

@@ -20472,7 +20472,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 100%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -20481,7 +20481,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.white}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.background-color}"
     },
     "name": "utrechtNavBarBackgroundColor",
@@ -20499,7 +20499,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 0%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -20508,7 +20508,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.black}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.color}"
     },
     "name": "utrechtNavBarColor",
@@ -20519,6 +20519,62 @@
       "color"
     ]
   },
+  {
+    "key": "{utrecht.nav-bar.content.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 100%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.white}",
+      "key": "{utrecht.nav-bar.content.background-color}"
+    },
+    "name": "utrechtNavBarContentBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 0%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.black}",
+      "key": "{utrecht.nav-bar.content.color}"
+    },
+    "name": "utrechtNavBarContentColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "color"
+    ]
+  },
   {
     "key": "{utrecht.nav-bar.content.max-inline-size}",
     "$extensions": {
@@ -22957,10 +23013,20 @@
   },
   {
     "key": "{utrecht.page-body.padding-block-end}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "0",
     "filePath": "src/component/utrecht/page-body.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "0",
       "key": "{utrecht.page-body.padding-block-end}"
     },
@@ -22974,10 +23040,20 @@
   },
   {
     "key": "{utrecht.page-body.padding-block-start}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "0",
     "filePath": "src/component/utrecht/page-body.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "0",
       "key": "{utrecht.page-body.padding-block-start}"
     },
@@ -22991,10 +23067,20 @@
   },
   {
     "key": "{utrecht.page-body.padding-inline-end}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "0",
     "filePath": "src/component/utrecht/page-body.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "0",
       "key": "{utrecht.page-body.padding-inline-end}"
     },
@@ -23008,10 +23094,20 @@
   },
   {
     "key": "{utrecht.page-body.padding-inline-start}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "0",
     "filePath": "src/component/utrecht/page-body.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "0",
       "key": "{utrecht.page-body.padding-inline-start}"
     },
@@ -23251,10 +23347,20 @@
   },
   {
     "key": "{utrecht.page-footer.content.padding-inline}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "28px",
     "filePath": "src/component/utrecht/page-footer.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "{utrecht.space.inline.2xl}",
       "key": "{utrecht.page-footer.content.padding-inline}"
     },
@@ -23399,10 +23505,20 @@
   },
   {
     "key": "{utrecht.page-header.content.padding-inline}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "2em",
     "filePath": "src/component/utrecht/page-header.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<length>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "dimension",
       "$value": "2em",
       "key": "{utrecht.page-header.content.padding-inline}"
     },
@@ -23417,21 +23533,11 @@
   },
   {
     "key": "{utrecht.page-header.content.padding-inline-end}",
-    "$extensions": {
-      "nl.nldesignsystem.css-property-syntax": "<length>",
-      "nl.nldesignsystem.figma-implementation": false
-    },
-    "$type": "dimension",
     "$value": "2.4em",
     "$comment": "Legacy design token",
     "filePath": "src/component/utrecht/page-header.tokens.json",
     "isSource": true,
     "original": {
-      "$extensions": {
-        "nl.nldesignsystem.css-property-syntax": "<length>",
-        "nl.nldesignsystem.figma-implementation": false
-      },
-      "$type": "dimension",
       "$value": "2.4em",
       "$comment": "Legacy design token",
       "key": "{utrecht.page-header.content.padding-inline-end}"
@@ -23447,21 +23553,11 @@
   },
   {
     "key": "{utrecht.page-header.content.padding-inline-start}",
-    "$extensions": {
-      "nl.nldesignsystem.css-property-syntax": "<length>",
-      "nl.nldesignsystem.figma-implementation": false
-    },
-    "$type": "dimension",
     "$value": "2em",
     "$comment": "Legacy design token",
     "filePath": "src/component/utrecht/page-header.tokens.json",
     "isSource": true,
     "original": {
-      "$extensions": {
-        "nl.nldesignsystem.css-property-syntax": "<length>",
-        "nl.nldesignsystem.figma-implementation": false
-      },
-      "$type": "dimension",
       "$value": "2em",
       "$comment": "Legacy design token",
       "key": "{utrecht.page-header.content.padding-inline-start}"

package/dist/dark/index.mjs

@@ -470,6 +470,7 @@ export const utrechtSpaceColumn2xl = "28px"; // Extra Large 2
 export const utrechtSpaceColumn3xl = "32px"; // Extra Large 3
 export const utrechtSpaceColumn4xl = "48px"; // Extra Large 4
 export const utrechtSpaceColumn5xl = "64px"; // Extra Large 5
+export const utrechtTextboxBorderBottomWidth = "3px";
 export const utrechtDataListMarginBlockEnd = "16px";
 export const utrechtDataListMarginBlockStart = "16px";
 export const utrechtDataListItemKeyFontWeight = "700";
@@ -744,8 +745,10 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
 export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
 export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
 export const utrechtMarkColor = "hsl(0 0% 0%)";
-export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
-export const utrechtNavBarColor = "hsl(0 0% 0%)";
+export const utrechtNavBarBackgroundColor = "transparent";
+export const utrechtNavBarColor = "transparent";
+export const utrechtNavBarContentBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavBarContentColor = "hsl(0 0% 0%)";
 export const utrechtNavBarContentMaxInlineSize = "1184px";
 export const utrechtNavBarLinkPaddingBlockEnd = "8px";
 export const utrechtNavBarLinkPaddingBlockStart = "8px";
@@ -846,6 +849,10 @@ export const utrechtOrderedListPaddingInlineStart = "28.8px";
 export const utrechtOrderedListItemMarginBlockStart = "0.25em";
 export const utrechtOrderedListItemMarginBlockEnd = "0.25em";
 export const utrechtOrderedListItemPaddingInlineStart = "0";
+export const utrechtPageBodyPaddingBlockStart = "0";
+export const utrechtPageBodyPaddingBlockEnd = "0";
+export const utrechtPageBodyPaddingInlineStart = "0";
+export const utrechtPageBodyPaddingInlineEnd = "0";
 export const utrechtPageBodyContentBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtPageBodyContentColor = "hsl(0 0% 0%)";
 export const utrechtPageBodyContentPaddingBlockStart = "0";
@@ -853,20 +860,16 @@ export const utrechtPageBodyContentPaddingBlockEnd = "1em";
 export const utrechtPageBodyContentPaddingInlineStart = "2em";
 export const utrechtPageBodyContentPaddingInlineEnd = "2.4em";
 export const utrechtPageBodyContentMaxInlineSize = "1184px";
-export const utrechtPageBodyPaddingInlineEnd = "0";
-export const utrechtPageBodyPaddingInlineStart = "0";
-export const utrechtPageBodyPaddingBlockEnd = "0";
-export const utrechtPageBodyPaddingBlockStart = "0";
 export const utrechtPageContentPaddingBlockStart = "2em";
 export const utrechtPageContentPaddingBlockEnd = "2em";
 export const utrechtPageFooterColor = "hsl(0 0% 100%)";
 export const utrechtPageFooterBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtPageFooterBackgroundImage =
   "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);";
+export const utrechtPageFooterContentPaddingInline = "28px";
 export const utrechtPageFooterContentPaddingBlockEnd = "48px";
 export const utrechtPageFooterContentPaddingBlockStart = "48px";
 export const utrechtPageFooterContentMaxInlineSize = "1184px";
-export const utrechtPageFooterContentPaddingInline = "28px";
 export const utrechtPageHeaderPaddingBlockStart = "0";
 export const utrechtPageHeaderPaddingBlockEnd = "0";
 export const utrechtPageHeaderPaddingInlineStart = "0";
@@ -875,10 +878,10 @@ export const utrechtPageHeaderContentBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtPageHeaderContentColor = "hsl(0 0% 0%)";
 export const utrechtPageHeaderContentPaddingBlockStart = "1.8em";
 export const utrechtPageHeaderContentPaddingBlockEnd = "1em";
-export const utrechtPageHeaderContentPaddingInlineStart = "2em";
-export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
-export const utrechtPageHeaderContentMaxInlineSize = "1184px";
 export const utrechtPageHeaderContentPaddingInline = "2em";
+export const utrechtPageHeaderContentMaxInlineSize = "1184px";
+export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
+export const utrechtPageHeaderContentPaddingInlineStart = "2em";
 export const utrechtPageBackgroundColor = "hsl(0 0% 15%)";
 export const utrechtPageColor = "hsl(0 0% 95%)";
 export const utrechtPageMarginInlineStart = "2em";
@@ -1098,7 +1101,6 @@ export const utrechtTableRowAlternateEvenColor = "hsl(0 0% 0%)";
 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";

package/dist/dark/index.tokens.json

@@ -746,6 +746,9 @@
         "5xl": "64px"
       }
     },
+    "textbox": {
+      "border-bottom-width": "3px"
+    },
     "data-list": {
       "margin-block-end": "16px",
       "margin-block-start": "16px",
@@ -1224,9 +1227,11 @@
       "color": "hsl(0 0% 0%)"
     },
     "nav-bar": {
-      "background-color": "hsl(0 0% 100%)",
-      "color": "hsl(0 0% 0%)",
+      "background-color": "transparent",
+      "color": "transparent",
       "content": {
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
         "max-inline-size": "1184px"
       },
       "link": {
@@ -1407,6 +1412,10 @@
       }
     },
     "page-body": {
+      "padding-block-start": "0",
+      "padding-block-end": "0",
+      "padding-inline-start": "0",
+      "padding-inline-end": "0",
       "content": {
         "background-color": "hsl(0 0% 100%)",
         "color": "hsl(0 0% 0%)",
@@ -1415,11 +1424,7 @@
         "padding-inline-start": "2em",
         "padding-inline-end": "2.4em",
         "max-inline-size": "1184px"
-      },
-      "padding-inline-end": "0",
-      "padding-inline-start": "0",
-      "padding-block-end": "0",
-      "padding-block-start": "0"
+      }
     },
     "page-content": {
       "padding-block-start": "2em",
@@ -1430,10 +1435,10 @@
       "background-color": "hsl(0 100% 40%)",
       "background-image": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
       "content": {
+        "padding-inline": "28px",
         "padding-block-end": "48px",
         "padding-block-start": "48px",
-        "max-inline-size": "1184px",
-        "padding-inline": "28px"
+        "max-inline-size": "1184px"
       }
     },
     "page-header": {
@@ -1446,10 +1451,10 @@
         "color": "hsl(0 0% 0%)",
         "padding-block-start": "1.8em",
         "padding-block-end": "1em",
-        "padding-inline-start": "2em",
-        "padding-inline-end": "2.4em",
+        "padding-inline": "2em",
         "max-inline-size": "1184px",
-        "padding-inline": "2em"
+        "padding-inline-end": "2.4em",
+        "padding-inline-start": "2em"
       }
     },
     "page": {
@@ -1812,9 +1817,6 @@
       "border-bottom-width": "3px",
       "line-height": "1.5"
     },
-    "textbox": {
-      "border-bottom-width": "3px"
-    },
     "tooltip": {
       "background-color": "hsl(0 0% 100%)",
       "border-color": "hsl(0 0% 40%)",