Themz
Readme
Themz is helpers library for easy theming with StyledComponents, ReactJSS, StyledJSS
Installation
npm install --save themz
Usage
Just import named functions.
And define theme object
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
const Button = styledbutton` border: none; padding: ; background-color: ;`
ReactJSS
const styles = button: backgroundColor: padding: const Button = <button className=classesbutton> children </button> stylesButton
StyledJSS
const Button = boxShadow: backgroundColor: width:
API
See tests
theme
Just select properties from theme
property
const styles = value: // will be object color: // like: palette('accent', 'Light') width: // same as: props => props.theme.width.control.medium
cond
Apply value if property exists in props object
const styles = backgroundColor: textDecoration:
breakpoint
Simple select breakpoint from theme. (Default size is medium
)
const Demo = styleddiv` @media screen and (max-width: ) { padding: ; } @media screen and (max-width: ) { padding: ; }`
palette
Select color from theme. By default shade is ''
const styles = backgroundColor: // same as props => props.theme.palette.accentLight color: // props => props.theme.palette.black
size
Get size from theme.sizes
const styles = width: // props => props.theme.sizes['block1/2']
propIf
Execute condition, and it true
return branch
const styles = padding: color: boxShadow:
propIfElse
const styles = padding: color: boxShadow: