index.tsx

import { styled } from '@stitches/react'

const clamp = (min: number, max: number) => (num: number) =>
  Math.min(Math.max(min, num), max)

const optionize = fn => (options = {}) => fn(options)

const hslColor = (hue: number, sat: number, lum: number) => ({
  brighten = 0,
  darken = 0,
  desaturate = 0,
  saturate = 0,
  shift = 0,
}) => {
  const resultingHue = clamp(0, 360)(hue + shift)
  const resultingSat = clamp(0, 100)(sat + saturate - desaturate)
  const resultingLum = clamp(0, 100)(lum + brighten - darken)

  return `hsl(${resultingHue} ${resultingSat}% ${resultingLum}%)`
}

const theme = {
  colors: {
    accent: optionize(hslColor(150, 45, 55)),
    contra: optionize(hslColor(350, 70, 55)),
  },
}

// Then use it in a styled component like this...
const StyledButton = styled('button', {
  appearance: 'none',
  backgroundColor: theme.colors.accent(),
  border: 'none',
  color: 'white',
  padding: bs(0.5),
  transition: 'all .2s ease',

  '&:hover': {
    backgroundColor: theme.colors.accent({ darken: 3 }),
    cursor: 'pointer',
  },
})