styled-theme

Install

$ npm install --save styled-theme

Usage

import styled from 'styled-components'
import { font, palette } from 'styled-theme' 

const Text = styled.span`
  font-family: ${font('primary')};
  background-color: ${palette(1)};
  color: ${palette('grayscale', 0, true)};
`

Text.defaultProps = {
  palette: 'primary'
}

<Text>Hello</Text>

<Text reverse>Hello</Text>

<Text palette="secondary">Hello</Text>

Provide your own theme

import { ThemeProvider } from 'styled-components'

const xmasTheme = {
  fonts: {
    primary: 'Georgia, serif'
  },
  palette: {
    // red gradient
    primary: ['#D32F2F', '#F44336', '#F8877F', '#FFCDD2']
  }
}

<ThemeProvider theme={xmasTheme}>
  <Text>Hello</Text>
</ThemeProvider>

Default theme structure

import coolorsToHex from 'coolors-to-hex'
import { reversePalette } from './composer'

const theme = {}

theme.palette = {
  primary: coolorsToHex('https://coolors.co/1976d2-2196f3-71bcf7-97cef9-c2e2fb'),
  secondary: coolorsToHex('https://coolors.co/c2185b-e91e63-f06292-f48caf-f8bbd0'),
  danger: coolorsToHex('https://coolors.co/d32f2f-f44336-f8877f-f9a7a1-ffcdd2'),
  alert: coolorsToHex('https://coolors.co/ffa000-ffc107-ffd761-ffecb3-fff2ce'),
  success: coolorsToHex('https://coolors.co/388e3c-4caf50-7cc47f-9fd4a1-c8e6c9'),
  grayscale: ['#212121', '#616161', '#9e9e9e', '#bdbdbd', '#e0e0e0', '#ffffff']
}

theme.reversePalette = reversePalette(theme.palette)

theme.fonts = {
  primary: 'Helvetica Neue, Helvetica, Roboto, sans-serif',
  pre: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
  quote: 'Georgia, serif'
}

theme.sizes = {
  maxWidth: '1100px'
}

export default theme

API

reversePalette

• palette Palette

reversePalette({ primary: ['red', 'yellow', 'green'] })
// { primary: ['green', 'yellow', 'red'] }

const Button = styled.button`
 font-family: ${key('fonts.primary')};
 color: ${key(['colors', 'primary', 0])};
`

const Button = styled.button`
 font-family: ${font('primary')};
`

const Button = styled.button`
 padding: ${size('padding')};
`

// index = 1
// exception = { grayscale: 0 }
// reverse = true
const Button = styled.button`
 background-color: ${palette({ grayscale: 0 }, 1, true)};
`

// renders props.theme.reversePalette.grayscale[0]
<Button palette="grayscale" />

// renders props.theme.palette.danger[1] (nullify reverse)
<Button palette="danger" reverse />

Tones

Font

Size

Palette

Fonts

Sizes

Theme

Related

• styled-tools - Utilities for styled-components (like lodash)

License