styled-components utils

styled-components-utils.js

import styled, { css } from 'styled-components';
import at from 'lodash.at';



export const Blue = css`
  border-bottom-color: blue;
`
export const Red = css`
  border-top-color: red;
`
export const Yellow = css`
  border-top-color: yellow;
`
export const Gray = css`
  background-color: #cecece;
`

export const match = (contained, container) => {
  return Object.keys(contained).every(key => {
    return contained[key] === container[key]
  })
}

/**
 * if state match what's in props
 */

export const $if = (state, styleMatch, styleNoMatch=null) => props => (
    match(state, props) ? styleMatch: styleNoMatch
)

/**
 * extract value from upper theme
 */
export const theme = (themePath, defaults='') => ({theme}) => {
    const value = at(theme, themePath)[0]
    if (!value) return defaults;
    return value
}



export const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: ${theme('red', 'blue')};
  border: 2px solid palevioletred;
  ${$if({
    red: true
  }, Red)};

  ${$if({
    blue: true
  }, Blue)};

  ${$if({
    yellow: true
  }, Yellow, Gray)};
`;