#61 updates grid approach in tokens and style guide

thinkshout · Mar 9, 2024 · 50dbef5 · 50dbef5
1 parent c9b0767
commit 50dbef5
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 44 deletions.
diff --git a/assets/css/_elements/_generated-variables.css b/assets/css/_elements/_generated-variables.css
@@ -25,7 +25,7 @@
   --color-secondary-300: #ffe380;
   --color-secondary-500: #ffc700;
   --color-secondary-700: #b36100;
-  --color-secondary-900: #0c002e;
+  --color-secondary-900: #330800;
   --color-purple-100: #ebe6fd;
   --color-purple-300: #8a66f0;
   --color-purple-500: #3c00e7;
@@ -42,6 +42,13 @@
   --color-warning-500: #f29100;
   --color-success-100: #e7f3ee;
   --color-success-500: #0f8a56;
+  --grid-columns-sm: 1;
+  --grid-columns-md: 6;
+  --grid-columns-lg: 8;
+  --grid-columns-xl: 12;
+  --grid-gap: 1.5rem;
+  --grid-gap-md: 2rem;
+  --grid-gap-lg: 2.25rem;
   --screen-default: 375px;
   --screen-sm: 501px;
   --screen-md: 769px;

diff --git a/tokens/src/grid.tokens.json b/tokens/src/grid.tokens.json
@@ -0,0 +1,11 @@
+{
+  "grid": {
+    "columns-sm": { "value": "1" },
+    "columns-md": { "value": "6" },
+    "columns-lg": { "value": "8" },
+    "columns-xl": { "value": "12" },
+    "gap": { "value": "{spacer.md.value}" },
+    "gap-md": { "value": "{spacer.lg.value}" },
+    "gap-lg": { "value": "{spacer.xl.value}" }
+  }
+}
diff --git a/tokens/tailwind-grids.json b/tokens/tailwind-grids.json
@@ -1,81 +1,142 @@
 {
   "grid": {
-    ".ts-grid-col-2": {
+    ".ts-grid-col-1": {
+      "grid-template-columns": "repeat(1, minmax(0, 1fr));",
       "display": "grid",
+      "gap": "var(--grid-gap)",
+      "@media ( min-width: 768px )": {
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
+      },
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
+      }
+    },
+    ".ts-grid-col-2": {
       "grid-template-columns": "repeat(2, minmax(0, 1fr));",
-      "gap": "var(--spacer-md)",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
     ".ts-grid-col-3": {
-      "display": "grid",
       "grid-template-columns": "repeat(3, minmax(0, 1fr));",
-      "gap": "var(--spacer-md)",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
     ".ts-grid-col-4": {
-      "display": "grid",
       "grid-template-columns": "repeat(4, minmax(0, 1fr));",
-      "gap": "var(--spacer-md)",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
+      },
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
     ".ts-grid-col-6": {
-      "display": "grid",
       "grid-template-columns": "repeat(6, minmax(0, 1fr));",
-      "gap": "var(--spacer-md)",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
-    ".ts-grid-7-5": {
-      "display": "grid;",
-      "columns": "12;",
-      "gap": "var(--spacer-md);",
-      "div:nth-of-type(1)": {
-        "grid-column": "1 / span 7;"
+    ".ts-grid-4-8": {
+      "grid-template-columns": "minmax(0,1fr) minmax(0,2fr);",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
+      "@media ( min-width: 768px )": {
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
       },
-      "div:nth-of-type(2)": {
-        "grid-column": "8 / span 5;"
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
+      }
+    },
+    ".ts-grid-7-5": {
+      "grid-template-columns": "minmax(0,1.5fr) minmax(0,1fr);",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
-    ".ts-grid-9-3": {
+    ".ts-grid-8-4": {
+      "grid-template-columns": "2fr 1fr;",
       "display": "grid;",
-      "columns": "12;",
-      "gap": "var(--spacer-md);",
-      "div:nth-of-type(1)": {
-        "grid-column": "1 / span 9;"
-      },
-      "div:nth-of-type(2)": {
-        "grid-column": "10 / span 3;"
+      "gap": "var(--grid-gap);",
+      "@media ( min-width: 768px )": {
+        "gap": "var(--grid-gap-md)"
       },
+      "@media ( min-width: 1026px )": {
+        "gap": "var(--grid-gap-lg)"
+      }
+    },
+    ".ts-grid-9-3": {
+      "grid-template-columns": "minmax(0,3fr) minmax(0,1fr);",
+      "display": "grid",
+      "gap": "var(--grid-gap)",
       "@media ( min-width: 768px )": {
-        "gap": "var(--spacer-xl)"
+        "columns": "var(--grid-columns-md);",
+        "gap": "var(--grid-gap-md)"
+      },
+      "@media ( min-width: 1026px )": {
+        "columns": "var(--grid-columns-lg);",
+        "gap": "var(--grid-gap-lg)"
       },
-      "@media ( min-width: 1025px )": {
-        "gap": "36px"
+      "@media ( min-width: 1440px )": {
+        "columns": "var(--grid-columns-xl);"
       }
     },
     ".ts-grid-center": {

diff --git a/tokens/tailwind-tokens.json b/tokens/tailwind-tokens.json
@@ -33,7 +33,7 @@
       "300": "#ffe380",
       "500": "#ffc700",
       "700": "#b36100",
-      "900": "#0c002e"
+      "900": "#330800"
     },
     "purple": {
       "100": "#ebe6fd",
@@ -62,6 +62,15 @@
       "500": "#0f8a56"
     }
   },
+  "grid": {
+    "columns-sm": "1",
+    "columns-md": "6",
+    "columns-lg": "8",
+    "columns-xl": "12",
+    "gap": "1.5rem",
+    "gap-md": "2rem",
+    "gap-lg": "2.25rem"
+  },
   "screen": {
     "default": "375px",
     "sm": "501px",