styled-theme

Theming system for styled-components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
styled-theme
18380.3.36 years ago6 years agoMinified + gzip package size for styled-theme in KB

Readme

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
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
any
Examples
const Button = styled.button`
 font-family: ${font('primary')};
`

Returns
Font

size

Shorthand to key(['sizes', path])
Parameters
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