Theming system for styled-components 💅
$ npm install --save styled-theme
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>
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>
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.
Revert the palette
Parameters
palettePalette
Examples
reversePalette({ primary: ['red', 'yellow', 'green'] })
// { primary: ['green', 'yellow', 'red'] }Returns Palette
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
Shorthand to key(['fonts', path])
Parameters
pathstringdefaultValueany
Examples
const Button = styled.button`
font-family: ${font('primary')};
`Returns Font
Shorthand to key(['sizes', path])
Parameters
pathstringdefaultValueany
Examples
const Button = styled.button`
padding: ${size('padding')};
`Returns Size
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
Type: string
Type: string
Type: string
Type: {}
Type: {}
Type: {}
Type: {palette: Palette?, reversePalette: Palette?, fonts: Fonts?, sizes: Sizes?}
- styled-tools - Utilities for styled-components (like lodash)
MIT © Diego Haz
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent