Merge pull request #440 from weaveworks/433-proportionally-define-spacing

Proportionally define spacing

Author: bia

src/theme/spacings.js

@@ -1,15 +1,25 @@
 import { forEach } from 'lodash';
 
+const baseSpacingNumber = 16;
+
 export const spacing = {
   none: '0',
-  xxs: '4px',
-  xs: '8px',
-  small: '12px',
-  base: '16px',
-  medium: '24px',
-  large: '32px',
-  xl: '48px',
-  xxl: '64px',
+  // 4px
+  xxs: `${baseSpacingNumber * 0.25}px`,
+  // 8px
+  xs: `${baseSpacingNumber * 0.5}px`,
+  // 12px
+  small: `${baseSpacingNumber * 0.75}px`,
+  // 16px
+  base: `${baseSpacingNumber}px`,
+  // 24px
+  medium: `${baseSpacingNumber * 1.5}px`,
+  // 32px
+  large: `${baseSpacingNumber * 2}px`,
+  // 48px
+  xl: `${baseSpacingNumber * 3}px`,
+  // 64px
+  xxl: `${baseSpacingNumber * 4}px`,
 };
 
 // Collects all theme spacing vars as SCSS vars.