refactor: Use variables for button padding, font and weight

src/atoms/Button.js

@@ -1,7 +1,8 @@
 import propTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { getColor, getVariable, calculateTextColorFromName } from '../utils';
+import { getColor, calculateTextColorFromName, getVariable } from '../utils';
 
+/* eslint-disable max-len */
 const Button = styled.button`
 	letter-spacing: .1rem;
 	text-transform: uppercase;
@@ -14,24 +15,31 @@ const Button = styled.button`
 	border-style: solid;
 	border-width: 0;
 	cursor: pointer;
-	font-weight: 400;
+	font-weight: ${getVariable('uiWeight')};
 	font-family: inherit;
-	font-size: 1.28rem;
 	line-height: normal;
-	margin: 0 .25rem 1.25rem;
+	margin: 0 calc(1/6 * ${getVariable('horizontalBase')}) calc(1/2 * ${getVariable('verticalBase')});
 	position: relative;
 	text-decoration: none;
 	text-align: center;
 	border-radius: ${props => props.borderRadius};
 	display: inline-block;
-	padding-top: calc(${getVariable('verticalBase')} / 2);
-	padding-right: calc(${getVariable('horizontalBase')} * 1.5);
-	padding-bottom: calc(${getVariable('verticalBase')} / 2);
-	padding-left: calc(${getVariable('horizontalBase')} * 1.5);
 	transition: background-color 300ms ease-out;
 	${props => (props.ALLCAPS && 'text-transform: uppercase')};
 
-	& a {
+	${props => props.size === 'small'  && css`padding: calc(1/3*${getVariable('verticalBase')}) ${getVariable('horizontalBase')};`}
+	${props => props.size === 'medium' && css`padding: calc(1/2*${getVariable('verticalBase')}) ${getVariable('horizontalBase')};`}
+	${props => props.size === 'large'  && css`padding: calc(2/3*${getVariable('verticalBase')}) ${getVariable('horizontalBase')};`}
+
+	${props => props.size === 'small'  && css`font-size: ${getVariable('uiTinySize')};`}
+	${props => props.size === 'medium' && css`font-size: ${getVariable('uiSmallSize')};`}
+	${props => props.size === 'large'  && css`font-size: ${getVariable('uiRegularSize')};`}
+
+	${props => props.size === 'small'  && css`line-height: ${getVariable('uiTinyLineHeight')};`}
+	${props => props.size === 'medium' && css`line-height: ${getVariable('uiSmallLineHeight')};`}
+	${props => props.size === 'large'  && css`line-height: ${getVariable('uiRegularLineHeight')};`}
+
+	a {
 		color: inherit;
 		font-size: inherit;
 		font-weight: inherit;
@@ -51,11 +59,11 @@ const Button = styled.button`
 		}
 	`}
 
-	& span {
-		font-size: 2.048rem;
+	span {
+		font-size: 2.048rem; /* TODO: Let's revisit these values */
 		line-height: 0;
 		position: relative;
-		top: 0.48rem;
+		top: 0.48rem; /* TODO: Let's revisit these values */
 	}
 `;
 
@@ -64,13 +72,15 @@ Button.defaultProps = {
 	textColor: null,
 	borderRadius: 0,
 	ALLCAPS: false,
+	size: 'medium',
 };
 
 
 Button.propTypes = {
 	background: propTypes.string,
 	textColor: propTypes.string,
 	ALLCAPS: propTypes.bool,
+	size: propTypes.oneOf(['small', 'medium', 'large']),
 };
 
 export { Button };

src/themes/default-theme/variables.js

@@ -37,5 +37,26 @@ export default {
 	headingHugeSize: '4.8rem',
 	headingHugeLineHeight: '6.3rem',
 
+	buttonSizes: {
+		small: {
+			vertical: '0.7rem',
+			horizontal: '1.4rem',
+			fontSize: '0.9rem',
+			fontWeight: '400',
+		},
+		medium: {
+			vertical: '0.9rem',
+			horizontal: '1.7rem',
+			fontSize: '1.1rem',
+			fontWeight: '400',
+		},
+		large: {
+			vertical: '1.2rem',
+			horizontal: '2.25rem',
+			fontSize: '1.28rem',
+			fontWeight: '400',
+		},
+	},
+
 	adWrapperCase: 'uppercase',
 };

src/themes/mat/variables.js

@@ -22,4 +22,16 @@ export default {
 	headingXlargeLineHeight: '3.3rem',
 	headingHugeSize: '3.8rem',
 	headingHugeLineHeight: '6.4rem',
+
+	buttonSizes: {
+		small: {
+			fontWeight: '700',
+		},
+		medium: {
+			fontWeight: '700',
+		},
+		large: {
+			fontWeight: '700',
+		},
+	},
 };

src/utils/get-variable.js

@@ -1,4 +1,12 @@
+
 /**
  * Create a function that returns a variable from your theme.
+ *
+ * Dot-seperated variable names will look for nested variables.
+ * getVariable('horizontalBase')
+ * getVariable('ui.large.fontSize')
  */
-export const getVariable = variable => props => props.theme.variables[variable];
+export const getVariable = variable => props =>
+	variable.split('.').reduce((prev, curr) => {
+		return prev ? prev[curr] : undefined;
+	}, props.theme.variables);

stories/typography/buttons.js

@@ -21,19 +21,37 @@ export default () => (
 
 		<Heading>Demo</Heading>
 		<DemoContainer background="white">
-			<Heading> Simple buttons </Heading>
+			<Heading>Simple buttons</Heading>
 			<Row>
-				<Button> Default </Button>
-				<Button background="primary"> Colored </Button>
+				<Button size="large">Large Default</Button>
+				<Button background="primary" size="large"> Large Colored </Button>
+			</Row>
+			<Row>
+				<Button size="medium">Medium Default</Button>
+				<Button background="primary" size="medium">Medium Colored </Button>
+			</Row>
+			<Row>
+				<Button size="small">Small Default</Button>
+				<Button background="primary" size="small">Small Colored </Button>
+			</Row>
+
+			<Heading>Bordered buttons</Heading>
+			<Row>
+				<BorderedButton size="large">Large Default</BorderedButton>
+				<BorderedButton size="large" isActive>Large Active</BorderedButton>
+			</Row>
+
+			<Row>
+				<BorderedButton size="medium">Medium Default</BorderedButton>
+				<BorderedButton size="medium" isActive>Medium Active</BorderedButton>
 			</Row>
 
-			<Heading> Bordered buttons </Heading>
 			<Row>
-				<BorderedButton> Default </BorderedButton>
-				<BorderedButton isActive> Active </BorderedButton>
+				<BorderedButton size="small">Small Default</BorderedButton>
+				<BorderedButton size="small" isActive>Small Active</BorderedButton>
 			</Row>
 
-			<Heading> Rounded button </Heading>
+			<Heading>Rounded button</Heading>
 			<Row>
 				<RoundedButton>default background</RoundedButton>
 			</Row>
@@ -44,12 +62,12 @@ export default () => (
 				</RoundedButton>
 			</Row>
 
-			<Heading> Small rounded button </Heading>
+			<Heading>Small rounded button</Heading>
 			<Row>
 				<SmallRoundedButton background="secondary">secondary background</SmallRoundedButton>
 			</Row>
 
-			<Heading> Tiny rounded button </Heading>
+			<Heading>Tiny rounded button</Heading>
 			<Row>
 				<TinyRoundedButton background="secondary" color="primaryLight">primaryLight text color</TinyRoundedButton>
 			</Row>