https://github.com/sergeysova/themz
Easy theming for StyledComponent, StyledJSS and ReactJSS
https://github.com/sergeysova/themz
jss library react styled-components styled-jss theme theming
Last synced: about 2 months ago
JSON representation
Easy theming for StyledComponent, StyledJSS and ReactJSS
- Host: GitHub
- URL: https://github.com/sergeysova/themz
- Owner: sergeysova
- License: mit
- Created: 2017-05-18T11:13:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-13T16:58:28.000Z (about 8 years ago)
- Last Synced: 2025-03-29T11:06:17.015Z (7 months ago)
- Topics: jss, library, react, styled-components, styled-jss, theme, theming
- Language: JavaScript
- Homepage: https://npmjs.com/themz
- Size: 83 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# Themz
[](https://travis-ci.org/LestaD/themz)
[](https://npmjs.com/themz)
[](https://github.com/lestad/themz)
[](https://github.com/lestad/themz)
## Readme
Themz is helpers library for easy theming with [StyledComponents](https://styled-components.com), [ReactJSS](http://cssinjs.org/react-jss), [StyledJSS](http://cssinjs.org/styled-jss)
## Installation
```bash
npm install --save themz
```
## Usage
Just import named functions.
```js
import {
theme,
cond,
breakpoint,
palette,
size,
propIfElse,
propIf,
} from 'themz'
```
And define theme object
```js
const theme = {
palette: {
primary: '#ff0',
primaryLight: '#ff9',
accent: '#f00',
accentDark: '#900',
},
breakpoints: {
mobile: {
small: '320px',
middle: '480px',
},
desktop: {
wide: '1920px',
},
},
sizes: {
large: '22px',
middle: '15px',
small: '8px',
control: '12px',
},
}
```
### StyledComponents
```js
import styled from 'styled-components'
import { palette, size } from 'themz'
export const Button = styled.button`
border: none;
padding: ${size('middle')};
background-color: ${palette('accent')};
`
```
### ReactJSS
```js
import React from 'react'
import injectSheet from 'react-jss'
import { propIfElse, palette, size } from 'themz'
const styles = {
button: {
backgroundColor: propIfElse('accent', palette('accent'), palette('control', 'Light')),
padding: size('middle'),
}
}
const Button = ({ classes, children }) => (
{children}
)
export default injectSheet(styles)(Button)
```
### StyledJSS
```js
import styled from 'styled-jss'
import { propIf, palette, breakpoint } from 'themz'
export const Button = styled('button')({
boxShadow: propIf('shadowed', `1px 1px 5px -1px black`),
backgroundColor: palette('accent', 'Dark'),
width: breakpoint('mobile', 'small'),
})
```
## API
See [tests](/test/index.js)
### theme
Just select properties from `theme` property
```js
const styles = {
value: theme('palette'), // will be object
color: theme(['palette', 'accentLight']), // like: palette('accent', 'Light')
width: theme(['width', 'control', 'medium']), // same as: props => props.theme.width.control.medium
}
```
### cond
Apply value if property exists in props object
```js
const styles = {
backgroundColor: cond('opened', ['palette', 'accent']),
textDecoration: cond('active', 'underline'),
}
```
### breakpoint
Simple select breakpoint from theme. (Default size is `medium`)
```js
const Demo = styled.div`
@media screen and (max-width: ${breakpoint('desktop')}) {
padding: ${size('controlPadding')};
}
@media screen and (max-width: ${breakpoint('desktop', 'small')}) {
padding: ${size('controlSmall')};
}
`
```
### palette
Select color from theme. By default shade is `''`
```js
const styles = {
backgroundColor: palette('accent', 'Light'), // same as props => props.theme.palette.accentLight
color: palette('black'), // props => props.theme.palette.black
}
```
### size
Get size from `theme.sizes`
```js
const styles = {
width: size('block1/2'), // props => props.theme.sizes['block1/2']
}
```
### propIf
Execute condition, and it `true` return branch
```js
const styles = {
padding: propIf(props => props.type === 'global', size('controlLarge')),
color: propIf('active', palette('secondary', 'Light')),
boxShadow: propIf('active', '1px 0 9px -1px #121412'),
}
```
### propIfElse
```js
const styles = {
padding: propIf(
props => props.type === 'global',
size('controlLarge'),
size('controlMedium')
),
color: propIf('active', palette('secondary', 'Light'), palette('accent')),
boxShadow: propIf('active', '1px 0 9px -1px #121412', 'none'),
}
```