Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diegohaz/styled-theme
Extensible theming system for styled-components 💅
https://github.com/diegohaz/styled-theme
css-in-js font palette react sizes styled-components theme
Last synced: 13 days ago
JSON representation
Extensible theming system for styled-components 💅
- Host: GitHub
- URL: https://github.com/diegohaz/styled-theme
- Owner: diegohaz
- License: mit
- Created: 2017-01-11T00:16:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-02T00:06:28.000Z (almost 7 years ago)
- Last Synced: 2024-10-19T10:04:59.045Z (24 days ago)
- Topics: css-in-js, font, palette, react, sizes, styled-components, theme
- Language: JavaScript
- Homepage: https://diegohaz.github.io/styled-theme
- Size: 105 KB
- Stars: 181
- Watchers: 2
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# styled-theme 💅🏿
[](https://github.com/diegohaz/nod)
[](https://npmjs.org/package/styled-theme)
[](https://travis-ci.org/diegohaz/styled-theme) [](https://codecov.io/gh/diegohaz/styled-theme/branch/master)
Theming system for [styled-components 💅](https://github.com/styled-components/styled-components)
## Install
$ npm install --save styled-theme
## Usage
Play with it on [WebpackBin](https://www.webpackbin.com/bins/-KeZfaFl3_761CAGa0CC)
```js
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'
}
```
```jsx
Hello
```
```jsx
Hello
```
```jsx
Hello
```
### Provide your own theme
```jsx
import { ThemeProvider } from 'styled-components'
const xmasTheme = {
fonts: {
primary: 'Georgia, serif'
},
palette: {
// red gradient
primary: ['#D32F2F', '#F44336', '#F8877F', '#FFCDD2']
}
}
Hello
```
## Default theme structure
This is the content of [`src/theme.js`](src/theme.js):
```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`](#reversePalette) is a helper method. Import it from `styled-theme/composer`.
## API
### reversePalette
Revert the palette
**Parameters**
- `palette` **[Palette](#palette)**
**Examples**
```javascript
reversePalette({ primary: ['red', 'yellow', 'green'] })
// { primary: ['green', 'yellow', 'red'] }
```
Returns **[Palette](#palette)**
### key
Returns the value of `props.theme[path]` or `styledTheme[path]`
**Parameters**
- `path` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>)**
- `defaultValue` **any**
**Examples**
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `defaultValue` **any**
**Examples**
```javascript
const Button = styled.button`
font-family: ${font('primary')};
`
```
Returns **[Font](#font)**
### size
Shorthand to `key(['sizes', path])`
**Parameters**
- `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `defaultValue` **any**
**Examples**
```javascript
const Button = styled.button`
padding: ${size('padding')};
`
```
Returns **[Size](#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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** The index of tone in theme palette tones array
- `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** The key of the tones in theme palette object (optional, default `props.palette`)
- `exceptions` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** An object with path as key and index as value
- `reverse` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Flag to return tone from `reversePalette` or `palette`
- `defaultValue` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Default value
- `args` **...any**
**Examples**
```javascript
// index = 1
// exception = { grayscale: 0 }
// reverse = true
const Button = styled.button`
background-color: ${palette({ grayscale: 0 }, 1, true)};
`
// renders props.theme.reversePalette.grayscale[0]
// renders props.theme.palette.danger[1] (nullify reverse)
```
Returns **[Tones](#tones)**
### Tone
Type: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
### Tones
Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Tone](#tone)>
### Font
Type: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
### Size
Type: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
### Palette
Type: {}
### Fonts
Type: {}
### Sizes
Type: {}
### Theme
Type: {palette: [Palette](#palette)?, reversePalette: [Palette](#palette)?, fonts: [Fonts](#fonts)?, sizes: [Sizes](#sizes)?}
## Related
- [styled-tools](https://github.com/diegohaz/styled-tools) - Utilities for styled-components (like lodash)
## License
MIT © [Diego Haz](https://github.com/diegohaz)