Update arc-theme to v0.2.1

package.json

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

src/components/atoms/Atom/index.js

@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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 = {

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Atom, * as styles from '.'
+import Atom from '.'
 
 const wrap = (props = {}) => shallow(<Atom {...props} />)
 
@@ -14,20 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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,18 +1,14 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-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)
+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;
 `
 

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Badge, * as styles from '.'
+import Badge from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
 
@@ -14,24 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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,19 +1,11 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-
-export const backgroundColor = ({ theme, reverse, color, transparent }) =>
-  transparent ? 'transparent' : getColor([color, 0], !reverse, theme)
-
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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 = {

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Block, * as styles from '.'
+import Block from '.'
 
 const wrap = (props = {}) => shallow(<Block {...props} />)
 
@@ -14,33 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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])
-  })
-})

src/components/atoms/Button/index.js

@@ -1,51 +1,42 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link } from 'react-router'
-import { get, getColor } from 'arc-theme'
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
-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'
+const fontSize = ({ height }) => `${height / 40}rem`
 
-export const backgroundColor = ({ transparent, disabled, color, theme, reverse }) =>
-  transparent ? 'transparent' : getColor([color, disabled ? 2 : 1], reverse, theme)
+const backgroundColor = ({ transparent, disabled }) =>
+  transparent ? 'transparent' : color(disabled ? 2 : 1)
 
-export const color = ({ transparent, disabled, color, theme, reverse }) =>
-  transparent
-  ? getColor([color, disabled ? 2 : 1], reverse, theme)
-  : getColor('grayscale[0]', !reverse, theme)
+const foregroundColor = ({ transparent, disabled }) =>
+  transparent ? color(disabled ? 2 : 1) : reverseColor('grayscale', 0)
 
-export const hoverBackgroundColor = ({ disabled, transparent, color, theme, reverse }) =>
-  !disabled && !transparent && getColor([color, 0], reverse, theme)
-
-export const hoverColor = ({ disabled, transparent, color, theme, reverse }) =>
-  !disabled && transparent && getColor([color, 0], reverse, theme)
+const hoverBackgroundColor = ({ disabled, transparent }) => !disabled && !transparent && color(0)
+const hoverForegroundColor = ({ disabled, transparent }) => !disabled && transparent && color(0)
 
 const styles = css`
   display: inline-flex;
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   align-items: center;
   white-space: nowrap;
   font-size: ${fontSize};
-  border: 0.0625em solid ${borderColor};
+  border: 0.0625em solid ${ifProps('transparent', 'currentcolor', 'transparent')};
   height: 2.5em;
   justify-content: center;
   text-decoration: none;
-  cursor: ${cursor};
+  cursor: ${ifProps('disabled', 'default', 'pointer')};
   appearance: none;
   padding: 0 1em;
   border-radius: 0.125em;
   box-sizing: border-box;
-  pointer-events: ${pointerEvents};
+  pointer-events: ${ifProps('disabled', 'none', 'auto')};
   transition: background-color 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out;
   background-color: ${backgroundColor};
-  color: ${color};
+  color: ${foregroundColor};
 
   &:hover, &:focus, &:active {
     background-color: ${hoverBackgroundColor};
-    color: ${hoverColor};
+    color: ${hoverForegroundColor};
   }
 
   &:focus {

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

@@ -1,10 +1,15 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Button, * as styles from '.'
+import Button from '.'
 
 const wrap = (props = {}) => shallow(<Button {...props} />).dive()
 
+it('renders with different combination of props', () => {
+  wrap({ disabled: true })
+  wrap({ transparent: true })
+  wrap({ disabled: true, transparent: true })
+})
+
 it('renders children when passed in', () => {
   const wrapper = wrap({ children: 'test' })
   expect(wrapper.contains('test')).toBe(true)
@@ -29,90 +34,3 @@ it('renders Link when to is passed in', () => {
   const wrapper = wrap({ to: 'test' }).dive()
   expect(wrapper.find('Link')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('borderColor', () => {
-    expect(styles.borderColor({ transparent: false })).toBe('transparent')
-    expect(styles.borderColor({ transparent: true })).toBe('currentcolor')
-  })
-
-  test('cursor', () => {
-    expect(styles.cursor({ disabled: false })).toBe('pointer')
-    expect(styles.cursor({ disabled: true })).toBe('default')
-  })
-
-  test('pointerEvents', () => {
-    expect(styles.pointerEvents({ disabled: false })).toBe('auto')
-    expect(styles.pointerEvents({ disabled: true })).toBe('none')
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: false,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.backgroundColor
-    expect(f(props)).toBe(theme.colors.primary[1])
-    expect(f({ ...props, color: 'grayscale' })).toBe(theme.colors.grayscale[1])
-    expect(f({ ...props, transparent: true })).toBe('transparent')
-    expect(f({ ...props, disabled: true })).toBe(theme.colors.primary[2])
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(theme.reverseColors.primary[2])
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'primary',
-      transparent: true,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.color
-    expect(f(props)).toBe(theme.colors.primary[1])
-    expect(f({ ...props, transparent: false })).toBe(theme.reverseColors.grayscale[0])
-    expect(f({ ...props, disabled: true })).toBe(theme.colors.primary[2])
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(theme.reverseColors.primary[2])
-  })
-
-  test('hoverBackgroundColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: false,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.hoverBackgroundColor
-    expect(f(props)).toBe(theme.colors.primary[0])
-    expect(f({ ...props, color: 'grayscale' })).toBe(theme.colors.grayscale[0])
-    expect(f({ ...props, transparent: true })).toBe(false)
-    expect(f({ ...props, disabled: true })).toBe(false)
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[0])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(false)
-  })
-
-  test('hoverColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: true,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.hoverColor
-    expect(f(props)).toBe(theme.colors.primary[0])
-    expect(f({ ...props, transparent: false })).toBe(false)
-    expect(f({ ...props, disabled: true })).toBe(false)
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[0])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(false)
-  })
-})

src/components/atoms/Caption/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 }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[1]', reverse, theme)
+import { font, color } from 'arc-theme'
 
 const Caption = styled.caption`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 1)};
   font-weight: 500;
   line-height: 2rem;
   font-size: 0.875rem;

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Caption, * as styles from '.'
+import Caption from '.'
 
 const wrap = (props = {}) => shallow(<Caption {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[1])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[1])
-  })
-})