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 themereversePalette is a helper method. Import it from styled-theme/composer.
API
reversePalette
Revert the palette
Parameters
palettePalette
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
pathstringdefaultValueany
Examples
const Button = styled.button`
font-family: ${font('primary')};
`Returns Font
size
Shorthand to key(['sizes', path])
Parameters
pathstringdefaultValueany
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
indexnumber The index of tone in theme palette tones arraypathstring? The key of the tones in theme palette object (optional, defaultprops.palette)exceptionsObject? An object with path as key and index as valuereverseboolean? Flag to return tone fromreversePaletteorpalettedefaultValuestring? Default valueargs...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
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