kyleshevlin · June 7, 2021 20:04 · Jun 7, 2021
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,42 @@
+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',
+  },
+})