Themz

Readme

Themz is helpers library for easy theming with StyledComponents, ReactJSS, StyledJSS

Installation

npm install --save themz

Usage

Just import named functions.

import {
  theme,
  cond,
  breakpoint,
  palette,
  size,
  propIfElse,
  propIf,
} from 'themz'

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

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

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 }) => (
  <button className={classes.button}>
    {children}
  </button>
)

export default injectSheet(styles)(Button)

StyledJSS

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

theme

Just select properties from theme property

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

const styles = {
  backgroundColor: cond('opened', ['palette', 'accent']),
  textDecoration: cond('active', 'underline'),
}

breakpoint

Simple select breakpoint from theme. (Default size is medium)

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 ''

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

const styles = {
  width: size('block1/2'), // props => props.theme.sizes['block1/2']
}

propIf

Execute condition, and it true return branch

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

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'),
}