feat: add styling for body, nav-bar, page-body, page-footer, …

…`page-header` and `root`
nl-design-system · Nov 28, 2024 · 9fd2dc3 · 9fd2dc3
1 parent a031b51
commit 9fd2dc3
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 6 deletions.
diff --git a/.changeset/fair-impalas-sort.md b/.changeset/fair-impalas-sort.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": minor
+---
+
+Add design tokens for `body`, `nav-bar`, `page-body`, `page-footer`, `page-header` and `root`.
diff --git a/proprietary/design-tokens/src/component/utrecht/body.tokens.json b/proprietary/design-tokens/src/component/utrecht/body.tokens.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "body": {
+      "background-color": { "value": "{utrecht.color.white}" },
+      "color": { "value": "{utrecht.color.black}" }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json b/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json
@@ -1,8 +1,6 @@
 {
   "utrecht": {
     "nav-bar": {
-      "background-color": { "value": "{utrecht.color.white}" },
-      "color": { "value": "{utrecht.color.black}" },
       "content": {
         "max-inline-size": { "value": "{utrecht.page.max-inline-size}" }
       },

diff --git a/proprietary/design-tokens/src/component/utrecht/page-body.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-body.tokens.json
@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "page-body": {
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em" },
+        "padding-inline-start": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "0" }
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json
@@ -6,6 +6,7 @@
       "background-image": {
         "value": "linear-gradient(45deg, {utrecht.color.red.40}, {utrecht.color.red.40} 50%, #d63433 50%);"
       },
+      "max-inline-size": { "value": "1184px" },
       "padding-inline-end": { "value": "{utrecht.space.inline.2xl}" },
       "padding-inline-start": { "value": "{utrecht.space.inline.2xl}" },
       "padding-block-end": { "value": "{utrecht.space.block.3xl}" },

diff --git a/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json
@@ -1,10 +1,17 @@
 {
   "utrecht": {
     "page-header": {
-      "padding-inline-end": { "value": "2.4em" },
-      "padding-inline-start": { "value": "2em" },
-      "padding-block-end": { "value": "1em" },
-      "padding-block-start": { "value": "1.8em" }
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em" },
+        "padding-inline-start": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "1.8em" }
+      }
     }
   }
 }
diff --git a/proprietary/design-tokens/src/component/utrecht/root.tokens.json b/proprietary/design-tokens/src/component/utrecht/root.tokens.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "root": {
+      "background-color": { "value": "{utrecht.color.grey.95}" },
+      "color": { "value": "{utrecht.color.grey.10}" }
+    }
+  }
+}