CSS in JS using styled-components, polished & styled-system

index.js

import React from 'react';
import styled, { ThemeProvider, css } from 'styled-components'
import { darken, lighten } from 'polished'
import { space, width, fontSize, color } from 'styled-system'

import { storiesOf } from '@storybook/react';
// import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';

//Theme for Layers
const layers = {
  breakpoints: [
    32, 48, 64
  ],
  space: [
    0, 2, 4, 6, 8, 10, 12, 16, 32 ],
  fontSizes: [
    8, 12, 14, 16, 24, 32, 40, 64 ],
  colors: {
    black: '#4D4D4D',
    white: '#FFF',
    primary: '#277AE5',
    warning: '#FF502D',
    alert: '#FFCC00',
    success: '#39db8c',
    info: '#29BDE7'
  }
}

const Container = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  padding: 1em;
`;

//Button Styling
const BaseButton = styled.button`
  user-select: none;
  position: relative;
  border-radius: 2px;
  border: 1px solid;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  outline: none;
`
const Button = BaseButton.extend`
  color: ${props => props.color || props.theme.colors.black};
  border-color: ${props => darken(0.4, props.theme.colors.white)};
  background-color: ${props => props.theme.colors.white};
  box-shadow: inset 0 -2px 0 0 ${props => darken(0.15, props.theme.colors.white)};;
  &:not([disabled]):hover {
    background-color: ${props => darken(0.1, props.theme.colors.white)};
  }
  &:not([disabled]):active {
    background-color: ${props => darken(0.15, props.theme.colors.white)};
    box-shadow: inset 0 2px 0 0 ${props => darken(0.2, props.theme.colors.white)};
  }
  ${fontSize}
  ${space}
  ${width}
`

//Button Defaults
Button.defaultProps = {
  fontSize:2,
  pl:7,
  pr:7,
  pt: 6,
  pb: 6,
}

//Storybook
storiesOf('Button', module)
.add('Default', () => (
  <ThemeProvider theme={layers}>
    <Container>
      <Button children='Hellos' />
      <Button children='Hellos' pt={4} pb={4}/>
      <Button children='Hellos' pt={7} pb={7} fontSize={3} width={2/8}/>
      <Button children='Hello color' color='rebeccapurple' />
    </Container>
  </ThemeProvider>
  ))
;