styled-theme 💅🏿

Theming system for styled-components 💅

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

Tone

Type: string

Tones

Type: Array<Tone>

Font

Type: string

Size

Type: string

Palette

Type: {}

Fonts

Type: {}

Sizes

Type: {}

Theme

Type: {palette: Palette?, reversePalette: Palette?, fonts: Fonts?, sizes: Sizes?}

Related

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

License

MIT © Diego Haz