Derive grid tokens from common spacing tokens

Amsterdam · Feb 21, 2024 · 3d17fd2 · 3d17fd2
1 parent d092cb3
commit 3d17fd2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 27 deletions.
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -7,7 +7,7 @@
 
 .amsterdam-grid {
   display: grid;
-  gap: var(--amsterdam-grid-gap);
+  gap: var(--amsterdam-grid-gap-md);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
 
@@ -25,47 +25,47 @@
 }
 
 .amsterdam-grid--gap-vertical--small {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+  row-gap: var(--amsterdam-grid-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+  row-gap: var(--amsterdam-grid-gap-lg);
 }
 
 .amsterdam-grid--padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid__cell--span-all {

diff --git a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
       "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },
-      "md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" },
       "xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" }
     }

diff --git a/proprietary/tokens/src/brand/amsterdam/space.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.tokens.json
@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
       "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
-      "md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
       "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
     }

diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
@@ -1,14 +1,7 @@
 {
   "amsterdam": {
     "grid": {
-      "gap": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
-      },
-      "padding-inline": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Equals the gap."
-      }
+      "padding-inline": { "value": "amsterdam.space.md" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -3,13 +3,20 @@
     "grid": {
       "column-count": { "value": "4" },
       "gap": {
-        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
-        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+        "xs": { "value": "amsterdam.space.xs" },
+        "sm": { "value": "amsterdam.space.sm" },
+        "md": { "value": "amsterdam.space.md" },
+        "lg": { "value": "amsterdam.space.lg" },
+        "xl": { "value": "amsterdam.space.xl" }
       },
-      "padding-inline": {
-        "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
-        "comment": "Equals 1.5 times the gap."
+      "padding-block": {
+        "xs": { "value": "amsterdam.space.xs" },
+        "sm": { "value": "amsterdam.space.sm" },
+        "md": { "value": "amsterdam.space.md" },
+        "lg": { "value": "amsterdam.space.lg" },
+        "xl": { "value": "amsterdam.space.xl" }
       },
+      "padding-inline": { "value": "amsterdam.space.lg" },
       "medium": {
         "column-count": { "value": "8" }
       },