feat: restructure layout design tokens

sbb-design-systems · Mar 29, 2022 · 62a3853 · 62a3853
1 parent 54f47c6
commit 62a3853
Showing 1 changed file with 56 additions and 54 deletions.
diff --git a/designTokens/layout.js b/designTokens/layout.js
@@ -7,101 +7,103 @@ const attributes = (group) => ({
 });
 
 module.exports = {
-  grid: {
-    base: {
+  base: {
+    grid: {
       columns: {
         zero: {
           value: 4,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         micro: {
           value: 4,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         small: {
           value: 4,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         medium: {
           value: 8,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         large: {
           value: 8,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         wide: {
           value: 12,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         },
         ultra: {
           value: 12,
-          ...attributes('grid-base-columns')
+          ...attributes('base-grid-columns')
         }
       },
       gutter: {
+        responsive: {
+          zero: {
+            value: 16,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          micro: {
+            value: 16,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          small: {
+            value: 24,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          medium: {
+            value: 24,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          large: {
+            value: 32,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          wide: {
+            value: 32,
+            ...attributes('base-grid-gutter-responsive')
+          },
+          ultra: {
+            value: 32,
+            ...attributes('base-grid-gutter-responsive')
+          }
+        }
+      }
+    },
+    offset: {
+      responsive: {
         zero: {
           value: 16,
-          ...attributes('grid-base-gutter')
+          ...attributes('base-offset-responsive')
         },
         micro: {
-          value: 16,
-          ...attributes('grid-base-gutter')
+          value: 20,
+          ...attributes('base-offset-responsive')
         },
         small: {
-          value: 24,
-          ...attributes('grid-base-gutter')
+          value: 48,
+          ...attributes('base-offset-responsive')
         },
         medium: {
-          value: 24,
-          ...attributes('grid-base-gutter')
+          value: 56,
+          ...attributes('base-offset-responsive')
         },
         large: {
-          value: 32,
-          ...attributes('grid-base-gutter')
+          value: 64,
+          ...attributes('base-offset-responsive')
         },
         wide: {
-          value: 32,
-          ...attributes('grid-base-gutter')
+          value: 72,
+          ...attributes('base-offset-responsive')
         },
         ultra: {
-          value: 32,
-          ...attributes('grid-base-gutter')
+          value: 124,
+          ...attributes('base-offset-responsive')
         }
       }
     }
-  },
-  offset: {
-    base: {
-      zero: {
-        value: 16,
-        ...attributes('offset-base')
-      },
-      micro: {
-        value: 20,
-        ...attributes('offset-base')
-      },
-      small: {
-        value: 48,
-        ...attributes('offset-base')
-      },
-      medium: {
-        value: 56,
-        ...attributes('offset-base')
-      },
-      large: {
-        value: 64,
-        ...attributes('offset-base')
-      },
-      wide: {
-        value: 72,
-        ...attributes('offset-base')
-      },
-      ultra: {
-        value: 124,
-        ...attributes('offset-base')
-      }
-    }
   }
 };