co-ui

Getting Started

import { Button } from 'co-ui'

return (
  <Button>
    Click Meh
  </Button>
)

Theming

All elements come with a default theme for things like sizing, spacing, border radius, transitions, etc.

A app specific theme should be provided to specify the font-face, palette, spacing, and other app specific design elements.

// EXAMPLE THEME
// =============
const theme = {
  palette: {
    primary: 'red',
    accent: 'blue',
    grayLight: 'gray',
    ...
  }
  font: {
    family: {
      body: 'Gotham',
      header: 'Futura'
    }
    size: {
      displayLarge: '48px',
      displayMedium: '42px',
      displaySmall: '36px',
      header: '28px',
      subheader: '24px',
      body: '18px',
      caption: '14px',
    },
    weight: {
      bold: 700,
      medium: 500,
      regular: 300,
      light: 100,
    }
  },
  space: {
    container: '50px',
    outer: '25px',
    inner: '12.5px',
  },
  layout: {
    width: '1024px'
  },
  border: {
    radius: '3px',
  },
  shadow: {
    hover: '1px 2px 6px 1px rgba(0,0,0,.3)'
  }
  transition: {
    hover: 'all 0.15s cubic-bezier(0, 0, .7, 1)'
  }
}