Styled-theme NPM

styled-theme 💅🏿

Install

$ npm install --save styled-theme

Usage

Play with it on WebpackBin

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

This is the content of src/theme.js:

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

reversePalette is a helper method. Import it from styled-theme/composer.

API

reversePalette

Revert the palette

Parameters

palette Palette

Examples

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

Returns Palette

key

Returns the value of props.theme[path] or styledTheme[path]

Parameters

path (string | Array<string>)
defaultValue any

Examples

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

Returns any

font

Shorthand to key(['fonts', path])

Parameters

path string
defaultValue any

Examples

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

Returns Font

size

Shorthand to key(['sizes', path])

Parameters

path string
defaultValue any

Examples

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

Returns Size

palette

Returns the value of props.theme[palette || reversePalette][path][index] or styledTheme[palette || reversePalette][path][index] (default theme)

The arguments can be passed in any order, as long as types are kept.

Parameters

index number The index of tone in theme palette tones array
path string? The key of the tones in theme palette object (optional, default props.palette)
exceptions Object? An object with path as key and index as value
reverse boolean? Flag to return tone from reversePalette or palette
defaultValue string? Default value
args ...any

Examples

// 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 />

Returns Tones