💄 Update gutter

gilbarbara · Oct 30, 2018 · 914066a · 914066a
1 parent 6637950
commit 914066a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/utils/system.js b/src/utils/system.js
@@ -281,21 +281,21 @@ export const ContainerStyles = {
       if (!verticalPadding) return '';
 
       return css`
-          padding-bottom: ${px(gutter[2])};
-          padding-top: ${px(gutter[2])};
+          padding-bottom: ${px(space)};
+          padding-top: ${px(space)};
   
           ${grid.md} {
-            padding-bottom: ${px(gutter[3])};
-            padding-top: ${px(gutter[3])};
+            padding-bottom: ${px(gutter[5])};
+            padding-top: ${px(gutter[5])};
           }
         `;
     };
 
     return css`
       margin-left: auto;
       margin-right: auto;
-      padding-left: ${px(gutter[2])};
-      padding-right: ${px(gutter[2])};
+      padding-left: ${px(space)};
+      padding-right: ${px(space)};
       max-width: ${container.maxWidth ? px(container.maxWidth) : 'none'};
       position: relative;
       width: 100%;
@@ -320,8 +320,8 @@ export const ContainerStyles = {
       ${width};
       
       ${grid.md} {
-        padding-left: ${px(gutter[3])};
-        padding-right: ${px(gutter[3])};
+        padding-left: ${px(gutter[5])};
+        padding-right: ${px(gutter[5])};
       }
     `;
   },
@@ -405,7 +405,7 @@ export const FormStyles = {
         ${inline ? 'display: inline-block;' : ''};
         
         + * {
-          ${inline ? `margin-left: ${px(gutter[1])} ;` : ''};
+          ${inline ? `margin-left: ${px(gutter[2])} ;` : ''};
         }
       }
     `;
@@ -677,7 +677,7 @@ export const HeadingStyles = {
       font-family: inherit;
       font-weight: ${headingWeight};
       line-height: ${base.lineHeight};
-      margin: ${px(gutter[2])} 0 ${gutterBottom ? px(gutter[2]) : 0};
+      margin: ${px(space)} 0 ${gutterBottom ? px(space) : 0};
       ${borders};
       ${borderRadius};
       ${fontSize};
@@ -707,7 +707,7 @@ export const GroupStyles = {
       
       > * + * {
         ${grid.sm} {
-          padding-left: ${px(gutter[1])};
+          padding-left: ${px(gutter[2])};
         }
       }
     `;

diff --git a/src/utils/theme.js b/src/utils/theme.js
@@ -6,10 +6,11 @@ import rgba from 'polished/lib/color/rgba';
  */
 export const breakpoints = [400, 580, 768, 1024, 1360, 1920];
 export const fontSizes = [12, 14, 16, 18, 22, 26, 32, 48];
-export const gutter = [4, 8, 16, 32, 64];
 export const lineHeight = 1.4;
 export const space = [0, 4, 8, 12, 16, 24, 32, 64, 128];
 
+export const gutter = [...space];
+
 export const componentSizes = {
   xs: 12,
   sm: 14,
@@ -192,31 +193,31 @@ export const formGroup = {
   borderColor: '#ccc',
   borderRadius: 4,
   helpColor: '#999',
-  helpMarginTop: gutter[0],
-  inlineMargin: gutter[1],
-  marginBottom: gutter[2],
-  padding: gutter[1],
+  helpMarginTop: gutter[1],
+  inlineMargin: gutter[2],
+  marginBottom: gutter[3],
+  padding: gutter[2],
 };
 
 export const fieldset = {
   borderColor: '#ccc',
   borderRadius: 4,
   color: '#343434',
-  marginBottom: gutter[2],
-  padding: gutter[1],
+  marginBottom: gutter[3],
+  padding: gutter[2],
 };
 
 export const label = {
   color: '#343434',
   fontWeight: 'bold',
   inlineFontSize: 14,
-  marginBottom: gutter[1],
+  marginBottom: gutter[2],
 };
 
 export const legend = {
   color: '#343434',
   fontWeight: 'bold',
-  marginBottom: gutter[1],
+  marginBottom: gutter[2],
 };
 
 export const input = {
@@ -236,7 +237,7 @@ export const input = {
     md: 34,
     lg: 42,
   },
-  inlineMargin: gutter[1],
+  inlineMargin: gutter[2],
   lineHeight: 1,
   lineHeightTextarea: 1.4,
   padding: {