feat: layout design tokens

- add grid columns and gutter tokens for the base grid variant for each break breakpoint - add page layout offset tokens for each break breakpoint
sbb-design-systems · Mar 28, 2022 · abbd2e6 · abbd2e6
1 parent ee1e458
commit abbd2e6
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 0 deletions.
diff --git a/designTokens/index.js b/designTokens/index.js
@@ -3,6 +3,7 @@ module.exports = {
   border: require('./border'),
   breakpoint: require('./breakpoint'),
   color: require('./color'),
+  layout: require('./layout'),
   shadow: require('./shadow'),
   size: require('./size'),
   spacing: require('./spacing'),

diff --git a/designTokens/layout.js b/designTokens/layout.js
@@ -0,0 +1,108 @@
+/* eslint-disable sort-keys */
+
+const attributes = (group) => ({
+  attributes: {
+    group
+  }
+});
+
+module.exports = {
+  grid: {
+    base: {
+      columns: {
+        zero: {
+          value: 4,
+          ...attributes('grid')
+        },
+        micro: {
+          value: 4,
+          ...attributes('grid')
+        },
+        small: {
+          value: 4,
+          ...attributes('grid')
+        },
+        medium: {
+          value: 8,
+          ...attributes('grid')
+        },
+        large: {
+          value: 8,
+          ...attributes('grid')
+        },
+        wide: {
+          value: 12,
+          ...attributes('grid')
+        },
+        ultra: {
+          value: 12,
+          ...attributes('grid')
+        }
+      },
+      gutter: {
+        zero: {
+          value: 16,
+          ...attributes('grid')
+        },
+        micro: {
+          value: 16,
+          ...attributes('grid')
+        },
+        small: {
+          value: 24,
+          ...attributes('grid')
+        },
+        medium: {
+          value: 24,
+          ...attributes('grid')
+        },
+        large: {
+          value: 32,
+          ...attributes('grid')
+        },
+        wide: {
+          value: 32,
+          ...attributes('grid')
+        },
+        ultra: {
+          value: 32,
+          ...attributes('grid')
+        }
+      }
+    },
+    offset: {
+      base: {
+        zero: {
+          value: 16,
+          ...attributes('layout')
+        },
+        micro: {
+          value: 20,
+          ...attributes('layout')
+        },
+        small: {
+          value: 48,
+          ...attributes('layout')
+        },
+        medium: {
+          value: 56,
+          ...attributes('layout')
+        },
+        large: {
+          value: 64,
+          ...attributes('layout')
+        },
+        wide: {
+          value: 72,
+          ...attributes('layout')
+        },
+        ultra: {
+          value: 124,
+          ...attributes('layout')
+        }
+      }
+    }
+  }
+};
+
+/* eslint-enable sort-keys */