feat: introduce standard spacing to the theme

Author: fbarl

src/components/Alert/Alert.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 import Text from '../Text';
+import { spacing } from '../../theme/selectors';
 import { fromAtoms } from '../../utils/theme';
 
 const StyledAlert = styled.div`
@@ -13,7 +14,7 @@ const StyledAlert = styled.div`
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: ${props => (props.visible ? '1' : '0')};
-  padding: 1em;
+  padding: ${spacing('small')};
   transition: opacity 0.2s linear;
 
   a {

src/components/Alert/__snapshots__/Alert.test.js.snap

@@ -12,7 +12,7 @@ exports[`<Alert /> snapshots renders default 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -62,7 +62,7 @@ exports[`<Alert /> snapshots renders error 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -112,7 +112,7 @@ exports[`<Alert /> snapshots renders icon if provided 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -162,7 +162,7 @@ exports[`<Alert /> snapshots renders success 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -221,7 +221,7 @@ exports[`<Alert /> snapshots renders title if provided 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -289,7 +289,7 @@ exports[`<Alert /> snapshots renders warning 1`] = `
   margin: 8px 0 8px 0;
   min-height: 1em;
   opacity: 1;
-  padding: 1em;
+  padding: 16px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }

src/components/Input/__snapshots__/Input.test.js.snap

@@ -266,6 +266,15 @@ exports[`<Input /> should render correctly 1`] = `
         "tooltip": 6,
       },
       "overlayIconSize": "300px",
+      "spacing": Object {
+        "base": "24px",
+        "large": "48px",
+        "none": "0px",
+        "small": "16px",
+        "xl": "64px",
+        "xs": "8px",
+        "xss": "4px",
+      },
       "textColor": "hsl(0, 0%, 10%)",
     }
   }

src/theme/index.js

@@ -2,6 +2,7 @@ import { colors, themeColorsAsScss } from './colors';
 import { fontSizes, fontFamilies, themeFontsAsScss } from './fonts';
 import { borderRadius, themeBorderRadiiAsScss } from './borders';
 import { layers, themeLayersAsScss } from './layers';
+import { spacing, themeSpacingsAsScss } from './spacings';
 import { overlayIconSize, textColor, themeMiscVarsAsScss } from './misc';
 import { boxShadow } from './box-shadows';
 import { atoms } from './atoms';
@@ -12,6 +13,7 @@ export function themeVarsAsScss() {
     .concat(themeLayersAsScss())
     .concat(themeFontsAsScss())
     .concat(themeBorderRadiiAsScss())
+    .concat(themeSpacingsAsScss())
     .concat(themeMiscVarsAsScss());
   return `${themeVariables.join('; ')};`;
 }
@@ -36,6 +38,9 @@ const theme = {
   // z-index layers
   layers,
 
+  // Spacings
+  spacing,
+
   // Misc
   overlayIconSize,
   textColor,

src/theme/selectors.js

@@ -18,3 +18,4 @@ export const boxShadow = themeSelector('boxShadow');
 export const borderRadius = themeSelector('borderRadius');
 export const color = themeSelector('colors');
 export const fontSize = themeSelector('fontSizes');
+export const spacing = themeSelector('spacing');

src/theme/spacings.js

@@ -0,0 +1,22 @@
+import { forEach } from 'lodash';
+
+export const spacing = {
+  none: '0px',
+  xss: '4px',
+  xs: '8px',
+  small: '16px',
+  base: '24px',
+  large: '48px',
+  xl: '64px',
+};
+
+// Collects all theme spacing vars as SCSS vars.
+export function themeSpacingsAsScss() {
+  const themeSpacings = [];
+
+  forEach(spacing, (value, name) => {
+    themeSpacings.push(`$spacing-${name}: ${value}`);
+  });
+
+  return themeSpacings;
+}