Skip to content
Extensible theming system for styled-components πŸ’…
Branch: master
Clone or download
Latest commit 4009214 Dec 2, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.eslintrc Remove coolors in favor of coolors-to-hex package Jan 15, 2017
.flowconfig
.gitattributes
.gitignore Target build to last 2 browser versions Jan 16, 2017
.travis.yml
LICENSE
README.md
_config.yml
composer.js Remove coolors in favor of coolors-to-hex package Jan 15, 2017
index.js
package.json
yarn.lock

README.md

styled-theme πŸ’…πŸΏ

Generated with nod NPM version Build Status Coverage Status

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>

image

<Text reverse>Hello</Text>

image

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

image

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>

image

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

Examples

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

Returns Palette

key

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

Parameters

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.