Quick Color Utils for Styled-Components

colors.js

import { convert } from 'css-color-function';

/**
 * Some helpful notes:
 *
 * Documentation of convert interface:
 *   https://github.com/postcss/postcss-color-function#interface-according-to-css-specs
 *
 * shade: mixes color with pure black https://drafts.csswg.org/css-color/#tint-shade-adjusters
 * tint: mixes color with pure white https://drafts.csswg.org/css-color/#tint-shade-adjusters
 *
 * hue: adjusts the hue of the base color, when the base color is interpreted as an HSL color
 */

const d2p = decimal => `${decimal * 100}%`; // decimal to percentage

const alpha = (color, decimal) => convert(`color(${color} a(${decimal}))`);
const lighten = (color, decimal) =>
  convert(`color(${color} tint(${d2p(decimal)}))`);
const darken = (color, decimal) =>
  convert(`color(${color} shade(${d2p(decimal)}))`);

const hover = color => darken(color, 0.1);
const click = color => darken(color, 0.2);
const disabled = color => lighten(color, 0.5);

export default {
  active: click,
  alpha,
  click,
  darken,
  disabled,
  focus: hover,
  hover,
  lighten,
};