Styled Components / JS Design System - Using functional programming and a color library to generate CSS colors for states (hover, active, focus)

styled-component-states.js

import React from "react"
import Color from "tinycolor2";
import styled from "styled-components"

const colors = {
  fullBlack: "#000000",
  white: "#FFFFFF",
  red: "#DB2828",
  orange: "#F2711C",
}

const hoverColors = (color = primary) => Color(colors[color])
  .darken(10)
  .saturate(10)
  .toHexString()

const focusColors = (color = primary) => Color(colors[color])
  .darken(20)
  .saturate(20)
  .toHexString()

const downColors = (color = primary) => Color(colors[color])
  .darken(30)
  .toHexString()

const activeColors = (color = primary) => Color(colors[color])
  .lighten(10)
  .saturate(20)
  .toHexString()

const coloredButton = ({theme, bg}) => css`
    background-color: ${theme.colors[bg]};
    color: ${theme.colors.white};
    text-shadow: @redTextShadow;
    background-image: ${buttonTheme.coloredBackgroundImage};
    box-shadow: ${buttonTheme.coloredBoxShadow};

  &:hover {
    background-color: ${theme.hoverColors(bg)};
    color: ${theme.colors.white};
    text-shadow: @redTextShadow;
  }
`
const StyledButton = styled(Button)`

  // Colors
  ${props => props.bg && coloredButton(props)}
`