Add arc-theme

package.json

@@ -55,6 +55,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
+    "arc-theme": "^0.1.1",
     "history": "3.0.0",
     "lodash": "^4.16.4",
     "react": "^15.3.2",

src/components/atoms/Atom/index.js

@@ -1,10 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
+import { get, getColor } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
 
 const Atom = styled.span`
   font-family: ${fontFamily};
@@ -17,18 +17,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,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import theme from 'arc-theme'
 import Atom, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Atom {...props} />)
@@ -15,20 +16,6 @@ it('renders props when passed in', () => {
 })
 
 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)
   })

src/components/atoms/Badge/index.js

@@ -1,13 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
+import { get, getColor } from 'arc-theme'
 
-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]
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
+export const color = ({ reverse, theme }) => getColor('grayscale[0]', !reverse, theme)
+export const backgroundColor = ({ reverse, theme, color }) => getColor([color, 1], reverse, theme)
 
 const Badge = styled.span`
   font-family: ${fontFamily};
@@ -25,20 +22,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,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import theme from 'arc-theme'
 import Badge, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
@@ -15,20 +16,6 @@ it('renders props when passed in', () => {
 })
 
 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)
   })

src/components/atoms/Block/index.js

@@ -1,13 +1,14 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
+import { get, getColor } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 
 export const backgroundColor = ({ theme, reverse, color, transparent }) =>
-  transparent ? 'transparent' : theme[reverse ? 'colors' : 'reverseColors'][color][0]
+  transparent ? 'transparent' : getColor([color, 0], !reverse, theme)
 
 export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
 
 const Block = styled.div`
   font-family: ${fontFamily};
@@ -21,18 +22,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,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import theme from 'arc-theme'
 import Block, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Block {...props} />)
@@ -15,20 +16,6 @@ it('renders props when passed in', () => {
 })
 
 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)
   })

src/components/atoms/Button/index.js

@@ -1,28 +1,27 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link } from 'react-router'
+import { get, getColor } from 'arc-theme'
 
-export const colorKind = ({ theme, reverse }) => theme[reverse ? 'reverseColors' : 'colors']
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 export const fontSize = ({ height }) => `${height / 40}rem`
 export const borderColor = ({ transparent }) => transparent ? 'currentcolor' : 'transparent'
 export const cursor = ({ disabled }) => disabled ? 'default' : 'pointer'
 export const pointerEvents = ({ disabled }) => disabled ? 'none' : 'auto'
 
-export const backgroundColor = ({ transparent, disabled, color, ...props }) =>
-  transparent ? 'transparent' : colorKind(props)[color][disabled ? 2 : 1]
+export const backgroundColor = ({ transparent, disabled, color, theme, reverse }) =>
+  transparent ? 'transparent' : getColor([color, disabled ? 2 : 1], reverse, theme)
 
-export const color = ({ transparent, disabled, color, ...props, reverse }) =>
+export const color = ({ transparent, disabled, color, theme, reverse }) =>
   transparent
-  ? colorKind(props)[color][disabled ? 2 : 1]
-  : colorKind({ ...props, reverse: !reverse }).grayscale[0]
+  ? getColor([color, disabled ? 2 : 1], reverse, theme)
+  : getColor('grayscale[0]', !reverse, theme)
 
-export const hoverBackgroundColor = ({ disabled, transparent, color, ...props }) =>
-  !disabled && !transparent && colorKind(props)[color][0]
+export const hoverBackgroundColor = ({ disabled, transparent, color, theme, reverse }) =>
+  !disabled && !transparent && getColor([color, 0], reverse, theme)
 
-export const hoverColor = ({ disabled, transparent, color, ...props }) =>
-  !disabled && transparent && colorKind(props)[color][0]
+export const hoverColor = ({ disabled, transparent, color, theme, reverse }) =>
+  !disabled && transparent && getColor([color, 0], reverse, theme)
 
 const styles = css`
   display: inline-flex;
@@ -83,20 +82,7 @@ Button.propTypes = {
 Button.defaultProps = {
   color: 'primary',
   type: 'button',
-  height: 40,
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555', 2: '#888' },
-      primary: { 0: '#1976d2', 1: '#2196f3', 2: '#71bcf7' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb', 2: '#888' },
-      primary: { 0: '#c2e2fb', 1: '#71bcf7', 2: '#2196f3' }
-    }
-  }
+  height: 40
 }
 
 export default Button

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import theme from 'arc-theme'
 import Button, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Button {...props} />).dive()
@@ -30,25 +31,6 @@ it('renders Link when to is passed in', () => {
 })
 
 describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555', 2: '#888' },
-      primary: { 0: '#1976d2', 1: '#2196f3', 2: '#71bcf7' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb', 2: '#888' },
-      primary: { 0: '#c2e2fb', 1: '#71bcf7', 2: '#2196f3' }
-    }
-  }
-
-  test('colorKind', () => {
-    expect(styles.colorKind({ theme, reverse: false })).toEqual(theme.colors)
-    expect(styles.colorKind({ theme, reverse: true })).toEqual(theme.reverseColors)
-  })
-
   test('fontFamily', () => {
     expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
   })

src/components/atoms/Caption/index.js

@@ -1,10 +1,9 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
+import { get, getColor } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[1]
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
+export const color = ({ theme, reverse }) => getColor('grayscale[1]', reverse, theme)
 
 const Caption = styled.caption`
   font-family: ${fontFamily};
@@ -19,18 +18,4 @@ Caption.propTypes = {
   reverse: PropTypes.bool
 }
 
-Caption.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-}
-
 export default Caption

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import theme from 'arc-theme'
 import Caption, * as styles from '.'
 
 const wrap = (props = {}) => shallow(<Caption {...props} />)
@@ -15,18 +16,6 @@ it('renders props when passed in', () => {
 })
 
 describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-
   test('fontFamily', () => {
     expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
   })

src/components/atoms/Heading/index.js

@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
+import { get, getColor } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
+export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 export const fontSize = ({ level }) => `${0.75 + 1 * (1 / level)}rem`
 
 export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
 
 const styles = css`
   font-family: ${fontFamily};
@@ -30,18 +31,7 @@ Heading.propTypes = {
 
 Heading.defaultProps = {
   level: 1,
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Heading