theme-example.js

import theme from './theme'

const buttonTheme = {
  radii: theme.radii, // Entire scale
  space: [
    // Explicit steps from the scale
    theme.space[3],
    theme.space[4],
  ],
  fontSize: theme.fontSize.slice(0,-8), // Everything but the last 8 steps in the scale
  fontFamily: theme.fontFamily[0], // An explicit step in the scale
  borderStyle: [
    theme.borderStyle[0],
    theme.borderStyle[1]
  ],
  borderWidth: theme.borderWidth,
  fontWeight: theme.fontWeight,
  colors: theme.colors,
  backgroundColors: theme.colors,

  // hover, focus, active states
  
  hoverColor: [ 
    theme.colors[0].text, 
    theme.colors[1].text 
  ],
  hoverBgColor: [ 
    theme.colors[0].bg, 
    theme.colors[0].bg 
  ],
  focusColor: [ 
    theme.colors[1].text, 
    theme.colors[1].bg 
  ],
  textTransform: ['uppercase', 'capitalized'],
  transitionProperty: ['opacity', 'color', 'background-color'],
  transitionDuration: ['.25s'],
  transitionTimingFunction: ['ease-out'],
}

export default buttonTheme