@utrecht/design-tokens 6.2.0 → 6.2.1

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

@@ -141,6 +141,7 @@
   --utrecht-space-column-3xl: 32px; /** Extra Large 3 */
   --utrecht-space-column-4xl: 48px; /** Extra Large 4 */
   --utrecht-space-column-5xl: 64px; /** Extra Large 5 */
+  --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-data-list-rows-column-min-inline-size: 25ch;
   --utrecht-data-list-rows-column-inline-size: 80%;
   --utrecht-document-line-height: 1.4;
@@ -262,15 +263,15 @@
   --utrecht-ordered-list-item-margin-block-start: 0.25em;
   --utrecht-ordered-list-item-margin-block-end: 0.25em;
   --utrecht-ordered-list-item-padding-inline-start: 0;
+  --utrecht-page-body-padding-block-start: 0;
+  --utrecht-page-body-padding-block-end: 0;
+  --utrecht-page-body-padding-inline-start: 0;
+  --utrecht-page-body-padding-inline-end: 0;
   --utrecht-page-body-content-padding-block-start: 0;
   --utrecht-page-body-content-padding-block-end: 1em;
   --utrecht-page-body-content-padding-inline-start: 2em;
   --utrecht-page-body-content-padding-inline-end: 2.4em;
   --utrecht-page-body-content-max-inline-size: 1184px;
-  --utrecht-page-body-padding-inline-end: 0;
-  --utrecht-page-body-padding-inline-start: 0;
-  --utrecht-page-body-padding-block-end: 0;
-  --utrecht-page-body-padding-block-start: 0;
   --utrecht-page-content-padding-block-start: 2em;
   --utrecht-page-content-padding-block-end: 2em;
   --utrecht-page-footer-content-max-inline-size: 1184px;
@@ -280,10 +281,10 @@
   --utrecht-page-header-padding-inline-end: 0;
   --utrecht-page-header-content-padding-block-start: 1.8em;
   --utrecht-page-header-content-padding-block-end: 1em;
-  --utrecht-page-header-content-padding-inline-start: 2em;
-  --utrecht-page-header-content-padding-inline-end: 2.4em;
-  --utrecht-page-header-content-max-inline-size: 1184px;
   --utrecht-page-header-content-padding-inline: 2em;
+  --utrecht-page-header-content-max-inline-size: 1184px;
+  --utrecht-page-header-content-padding-inline-end: 2.4em;
+  --utrecht-page-header-content-padding-inline-start: 2em;
   --utrecht-page-margin-inline-start: 2em;
   --utrecht-page-margin-inline-end: 2em;
   --utrecht-page-max-inline-size: 1184px;
@@ -344,7 +345,6 @@
   --utrecht-table-cell-icon-size: 1em;
   --utrecht-textarea-border-block-end-width: 3px;
   --utrecht-textarea-border-bottom-width: 3px;
-  --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-tooltip-border-radius: 0;
   --utrecht-tooltip-border-width: 1px;
   --utrecht-toptask-link-line-height: 1.2;
@@ -889,9 +889,9 @@
   --utrecht-page-footer-color: var(--utrecht-color-white);
   --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
   --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
+  --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
   --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
   --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
-  --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
   --utrecht-page-header-content-background-color: var(--utrecht-color-white);
   --utrecht-page-header-content-color: var(--utrecht-color-black);
   --utrecht-page-background-color: var(--utrecht-color-grey-15);

package/dist/dark/tokens.cjs

@@ -9932,6 +9932,31 @@ module.exports = {
         },
       },
     },
+    textbox: {
+      "border-bottom-width": {
+        key: "{utrecht.textbox.border-bottom-width}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.deprecated": true,
+        },
+        $type: "dimension",
+        $value: "3px",
+        filePath: "src/component/utrecht/textbox.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.deprecated": true,
+          },
+          $type: "dimension",
+          $value: "3px",
+          key: "{utrecht.textbox.border-bottom-width}",
+        },
+        name: "border-bottom-width",
+        attributes: {},
+        path: ["utrecht", "textbox", "border-bottom-width"],
+      },
+    },
     "data-list": {
       "margin-block-end": {
         key: "{utrecht.data-list.margin-block-end}",
@@ -18489,6 +18514,98 @@ module.exports = {
       },
     },
     "page-body": {
+      "padding-block-start": {
+        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}",
+        },
+        name: "padding-block-start",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-block-start"],
+      },
+      "padding-block-end": {
+        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}",
+        },
+        name: "padding-block-end",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-block-end"],
+      },
+      "padding-inline-start": {
+        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}",
+        },
+        name: "padding-inline-start",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-inline-start"],
+      },
+      "padding-inline-end": {
+        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}",
+        },
+        name: "padding-inline-end",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-inline-end"],
+      },
       content: {
         "background-color": {
           key: "{utrecht.page-body.content.background-color}",
@@ -18642,58 +18759,6 @@ module.exports = {
           path: ["utrecht", "page-body", "content", "max-inline-size"],
         },
       },
-      "padding-inline-end": {
-        key: "{utrecht.page-body.padding-inline-end}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-inline-end}",
-        },
-        name: "padding-inline-end",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-inline-end"],
-      },
-      "padding-inline-start": {
-        key: "{utrecht.page-body.padding-inline-start}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-inline-start}",
-        },
-        name: "padding-inline-start",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-inline-start"],
-      },
-      "padding-block-end": {
-        key: "{utrecht.page-body.padding-block-end}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-block-end}",
-        },
-        name: "padding-block-end",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-block-end"],
-      },
-      "padding-block-start": {
-        key: "{utrecht.page-body.padding-block-start}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-block-start}",
-        },
-        name: "padding-block-start",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-block-start"],
-      },
     },
     "page-content": {
       "padding-block-start": {
@@ -18816,6 +18881,29 @@ module.exports = {
         path: ["utrecht", "page-footer", "background-image"],
       },
       content: {
+        "padding-inline": {
+          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}",
+          },
+          name: "padding-inline",
+          attributes: {},
+          path: ["utrecht", "page-footer", "content", "padding-inline"],
+        },
         "padding-block-end": {
           key: "{utrecht.page-footer.content.padding-block-end}",
           $extensions: {
@@ -18875,19 +18963,6 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-footer", "content", "max-inline-size"],
         },
-        "padding-inline": {
-          key: "{utrecht.page-footer.content.padding-inline}",
-          $value: "28px",
-          filePath: "src/component/utrecht/page-footer.tokens.json",
-          isSource: true,
-          original: {
-            $value: "{utrecht.space.inline.2xl}",
-            key: "{utrecht.page-footer.content.padding-inline}",
-          },
-          name: "padding-inline",
-          attributes: {},
-          path: ["utrecht", "page-footer", "content", "padding-inline"],
-        },
       },
     },
     "page-header": {
@@ -19076,15 +19151,14 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-header", "content", "padding-block-end"],
         },
-        "padding-inline-start": {
-          key: "{utrecht.page-header.content.padding-inline-start}",
+        "padding-inline": {
+          key: "{utrecht.page-header.content.padding-inline}",
           $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: {
@@ -19094,30 +19168,32 @@ module.exports = {
             },
             $type: "dimension",
             $value: "2em",
-            $comment: "Legacy design token",
-            key: "{utrecht.page-header.content.padding-inline-start}",
+            key: "{utrecht.page-header.content.padding-inline}",
           },
-          name: "padding-inline-start",
+          name: "padding-inline",
           attributes: {},
-          path: ["utrecht", "page-header", "content", "padding-inline-start"],
+          path: ["utrecht", "page-header", "content", "padding-inline"],
+        },
+        "max-inline-size": {
+          key: "{utrecht.page-header.content.max-inline-size}",
+          $value: "1184px",
+          filePath: "src/component/utrecht/page-header.tokens.json",
+          isSource: true,
+          original: {
+            $value: "1184px",
+            key: "{utrecht.page-header.content.max-inline-size}",
+          },
+          name: "max-inline-size",
+          attributes: {},
+          path: ["utrecht", "page-header", "content", "max-inline-size"],
         },
         "padding-inline-end": {
           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}",
@@ -19126,31 +19202,20 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-header", "content", "padding-inline-end"],
         },
-        "max-inline-size": {
-          key: "{utrecht.page-header.content.max-inline-size}",
-          $value: "1184px",
-          filePath: "src/component/utrecht/page-header.tokens.json",
-          isSource: true,
-          original: {
-            $value: "1184px",
-            key: "{utrecht.page-header.content.max-inline-size}",
-          },
-          name: "max-inline-size",
-          attributes: {},
-          path: ["utrecht", "page-header", "content", "max-inline-size"],
-        },
-        "padding-inline": {
-          key: "{utrecht.page-header.content.padding-inline}",
+        "padding-inline-start": {
+          key: "{utrecht.page-header.content.padding-inline-start}",
           $value: "2em",
+          $comment: "Legacy design token",
           filePath: "src/component/utrecht/page-header.tokens.json",
           isSource: true,
           original: {
             $value: "2em",
-            key: "{utrecht.page-header.content.padding-inline}",
+            $comment: "Legacy design token",
+            key: "{utrecht.page-header.content.padding-inline-start}",
           },
-          name: "padding-inline",
+          name: "padding-inline-start",
           attributes: {},
-          path: ["utrecht", "page-header", "content", "padding-inline"],
+          path: ["utrecht", "page-header", "content", "padding-inline-start"],
         },
       },
     },
@@ -24059,31 +24124,6 @@ module.exports = {
         path: ["utrecht", "textarea", "line-height"],
       },
     },
-    textbox: {
-      "border-bottom-width": {
-        key: "{utrecht.textbox.border-bottom-width}",
-        $extensions: {
-          "nl.nldesignsystem.css-property-syntax": "<length>",
-          "nl.nldesignsystem.deprecated": true,
-        },
-        $type: "dimension",
-        $value: "3px",
-        filePath: "src/component/utrecht/textbox.tokens.json",
-        isSource: true,
-        original: {
-          $extensions: {
-            "nl.nldesignsystem.css-property-syntax": "<length>",
-            "nl.nldesignsystem.deprecated": true,
-          },
-          $type: "dimension",
-          $value: "3px",
-          key: "{utrecht.textbox.border-bottom-width}",
-        },
-        name: "border-bottom-width",
-        attributes: {},
-        path: ["utrecht", "textbox", "border-bottom-width"],
-      },
-    },
     tooltip: {
       "background-color": {
         key: "{utrecht.tooltip.background-color}",

package/dist/dark/tokens.d.ts

@@ -762,6 +762,9 @@ declare const tokens: {
         "5xl": DesignToken;
       };
     };
+    textbox: {
+      "border-bottom-width": DesignToken;
+    };
     "data-list": {
       "margin-block-end": DesignToken;
       "margin-block-start": DesignToken;
@@ -1425,6 +1428,10 @@ declare const tokens: {
       };
     };
     "page-body": {
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
       content: {
         "background-color": DesignToken;
         color: DesignToken;
@@ -1434,10 +1441,6 @@ declare const tokens: {
         "padding-inline-end": DesignToken;
         "max-inline-size": DesignToken;
       };
-      "padding-inline-end": DesignToken;
-      "padding-inline-start": DesignToken;
-      "padding-block-end": DesignToken;
-      "padding-block-start": DesignToken;
     };
     "page-content": {
       "padding-block-start": DesignToken;
@@ -1448,10 +1451,10 @@ declare const tokens: {
       "background-color": DesignToken;
       "background-image": DesignToken;
       content: {
+        "padding-inline": DesignToken;
         "padding-block-end": DesignToken;
         "padding-block-start": DesignToken;
         "max-inline-size": DesignToken;
-        "padding-inline": DesignToken;
       };
     };
     "page-header": {
@@ -1464,10 +1467,10 @@ declare const tokens: {
         color: DesignToken;
         "padding-block-start": DesignToken;
         "padding-block-end": DesignToken;
-        "padding-inline-start": DesignToken;
-        "padding-inline-end": DesignToken;
-        "max-inline-size": DesignToken;
         "padding-inline": DesignToken;
+        "max-inline-size": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
       };
     };
     page: {
@@ -1830,9 +1833,6 @@ declare const tokens: {
       "border-bottom-width": DesignToken;
       "line-height": DesignToken;
     };
-    textbox: {
-      "border-bottom-width": DesignToken;
-    };
     tooltip: {
       "background-color": DesignToken;
       "border-color": DesignToken;