Add arc-theme

package.json

@@ -55,6 +55,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
+    "arc-theme": "^0.2.1",
     "history": "3.0.0",
     "lodash": "^4.16.4",
     "react": "^15.3.2",
@@ -63,6 +64,6 @@
     "react-modal": "^1.6.4",
     "react-router": "^3.0.0",
     "react-router-scroll": "^0.4.1",
-    "styled-components": "1.1.1"
+    "styled-components": "^1.2.1"
   }
 }

src/components/App.js

@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react'
 import { injectGlobal, ThemeProvider } from 'styled-components'
 
-import theme from './theme'
+import theme from './themes/default'
 
 injectGlobal`
   body {

src/components/atoms/Atom/index.js

@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color } from 'arc-theme'
 
 const Atom = styled.span`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 Atom.propTypes = {
@@ -17,18 +13,7 @@ Atom.propTypes = {
 }
 
 Atom.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Atom

src/components/atoms/Atom/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Atom, * as styles from '.'
+import Atom from '.'
 
 const wrap = (props = {}) => shallow(<Atom {...props} />)
 
@@ -13,34 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})

src/components/atoms/Badge/index.js

@@ -1,21 +1,14 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ reverse, theme }) =>
-  reverse ? theme.colors.grayscale[0] : theme.reverseColors.grayscale[0]
-
-export const backgroundColor = ({ reverse, theme, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][1]
+import { font, color, reverseColor } from 'arc-theme'
 
 const Badge = styled.span`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   font-size: 0.75rem;
   line-height: 1.5em;
   padding: 0 0.3em;
-  color: ${color};
-  background-color: ${backgroundColor};
+  color: ${reverseColor('grayscale', 0)};
+  background-color: ${color(1)};
   border-radius: 0.16667em;
 `
 
@@ -25,20 +18,7 @@ Badge.propTypes = {
 }
 
 Badge.defaultProps = {
-  color: 'primary',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
+  color: 'primary'
 }
 
 export default Badge

src/components/atoms/Badge/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Badge, * as styles from '.'
+import Badge from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
 
@@ -13,38 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme, reverse: false })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.colors.grayscale[0])
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'primary',
-      reverse: false,
-      theme
-    }
-    expect(styles.backgroundColor(props)).toBe(theme.colors.primary[1])
-    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-  })
-})

src/components/atoms/Block/index.js

@@ -1,18 +1,11 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const backgroundColor = ({ theme, reverse, color, transparent }) =>
-  transparent ? 'transparent' : theme[reverse ? 'colors' : 'reverseColors'][color][0]
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
 const Block = styled.div`
-  font-family: ${fontFamily};
-  background-color: ${backgroundColor};
-  color: ${color};
+  font-family: ${font('primary')};
+  background-color: ${ifProps('transparent', 'transparent', reverseColor(0))};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 Block.propTypes = {
@@ -21,18 +14,7 @@ Block.propTypes = {
 }
 
 Block.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Block

src/components/atoms/Block/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Block, * as styles from '.'
+import Block from '.'
 
 const wrap = (props = {}) => shallow(<Block {...props} />)
 
@@ -13,47 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 0: 'darkred', 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 0: 'lightblue', 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.backgroundColor(props)).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.backgroundColor({ ...props, transparent: true })).toBe('transparent')
-    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.colors.grayscale[0])
-    expect(styles.backgroundColor({ ...props, color: 'primary' }))
-      .toBe(theme.reverseColors.primary[0])
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})