Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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',
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment