style snippets

colors.js

const shades = [87, 54, 26]
const black = '#000'
const white = '#fff'

const dark = {
  primary: lighten(black, shades[0])
  secondary: lighten(black, shades[1])
  disabled: lighten(black, shades[2])
}

const light = {
  primary: darken(white, 100 - shades[0])
  secondary: darken(white, 100 - shades[1])
  disabled: darken(white, 100 - shades[2])
}

const grays = [
  '#e0e0e0',
  '#f5f5f5',
  '#fafafa',
  '#ffffff'
]

export default {
  font: {
    
  },
  
  border: {
    
  },
  
  background: {
    
  }
}

positions.js

export default {
  relative: { position: 'relative' },
  absolute: { position: 'absolute' },
  fixed: { position: 'fixed' },
  top0: { top: 0 },
  bottom0: { bottom: 0 },
  left0: { left: 0 },
  right0: { right: 0 },
  
  zindex: [
    throw new Error('index should be between 1 and 4'),
    { zIndex: 1 },
    { zIndex: 2 },
    { zIndex: 3 },
    { zIndex: 4 }
  ]
}

/**
 * Usage
 */

mergeAll([
  positions.top0,
  positions.zIndex[3],
  positions.absolute
])

utility-typography.js

export default {
  bold: { fontWeight: 'bold' }
  normal: { fontWeight: 'normal' },
  italic: { fontWeight: 'italic' },
  
  caps: {
    textTransform: 'uppercase',
    letterSpacing: '.2em'
  },
  
  align: {
    left: { textAlign: 'left' },
    center: { textAlign: 'center' },
    right: { textAlign: 'right' }
  },
  
  nowrap: { whiteSpace: 'no-wrap' },
  breakword: { whiteSpace: 'break-word' },
  
  listReset: {
    listStyle: 'none',
    paddingLeft: 0
  }
}