refactor(colors): use culori + easing to generate color scale

itsjavi · Jul 10, 2024 · 087930b · 087930b
1 parent 7036e1e
commit 087930b
Showing 1 changed file with 13 additions and 41 deletions.
diff --git a/app/(components)/colors/_ui/color-scaler.ts b/app/(components)/colors/_ui/color-scaler.ts
@@ -1,71 +1,45 @@
 import easing from 'bezier-easing'
-import { type Hsl, interpolate, samples } from 'culori'
+import { type Hsl, interpolate, interpolatorPiecewise, lerp, samples } from 'culori'
 import type { ColorSystemStateColorConfig } from './client-state'
 
 const bezierCurve = easing(1, 0.55, 0.6, 0.7)
 
-import { interpolatorPiecewise, lerp } from 'culori'
 function piecewiseEasing() {
   return interpolatorPiecewise((a, b, t) => lerp(a, b, bezierCurve(t)))
 }
 
+const interpolator = {
+  mode: 'hsl',
+  h: piecewiseEasing(),
+  s: piecewiseEasing(),
+  l: piecewiseEasing(),
+  alpha: piecewiseEasing(),
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+} as any
+
 export function generateColorScale(color: ColorSystemStateColorConfig): Required<Hsl>[] {
   const maxHueShift = color.hueShift * color.maxStops
   const maxChromaShift = color.chromaShift * color.maxStops
-  // const luminancePerStop = (color.luminanceMax - color.luminanceMin) / color.maxStops
-  // const stopsTwoThirds = Math.floor(color.maxStops * 0.56)
-
-  const luminanceAvg = (color.luminanceMax + color.luminanceMin) / 2
-  const darkColorCount = Math.ceil(color.maxStops / 2)
-  const lightColorCount = color.maxStops - darkColorCount
 
-  const darkStartColor: Hsl = {
+  const startColor: Hsl = {
     mode: 'hsl',
     h: color.hue + maxHueShift,
     s: (color.chroma + maxChromaShift) / 100,
     l: color.luminanceMin / 100,
     alpha: color.alpha / 100,
   }
 
-  const darkEndColor: Hsl = {
-    mode: 'hsl',
-    h: color.hue,
-    s: color.chroma / 100,
-    l: color.luminanceMax / 2 / 100,
-    alpha: color.alpha / 100,
-  }
-
-  const lightStartColor: Hsl = {
-    mode: 'hsl',
-    h: color.hue,
-    s: color.chroma / 100,
-    l: color.luminanceMax / 2 / 100,
-    alpha: color.alpha / 100,
-  }
-
-  const lightEndColor: Hsl = {
+  const endColor: Hsl = {
     mode: 'hsl',
     h: color.hue,
     s: color.chroma / 100,
     l: color.luminanceMax / 100,
     alpha: color.alpha / 100,
   }
 
-  return [
-    ...generateColorScaleFrom(darkStartColor, lightEndColor, color.maxStops),
-    // ...generateColorScaleFrom(lightStartColor, lightEndColor, lightColorCount),
-  ]
+  return generateColorScaleFrom(startColor, endColor, color.maxStops)
 }
 
-const interpolator = {
-  mode: 'hsl',
-  h: piecewiseEasing(),
-  s: piecewiseEasing(),
-  l: piecewiseEasing(),
-  alpha: piecewiseEasing(),
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-} as any
-
 function generateColorScaleFrom(startColor: Hsl, endColor: Hsl, numStops: number): Required<Hsl>[] {
   const colors = samples(numStops)
     .map(interpolate([startColor, endColor], 'hsl', interpolator))
@@ -79,7 +53,5 @@ function generateColorScaleFrom(startColor: Hsl, endColor: Hsl, numStops: number
       }
     })
 
-  // console.log({ initialColor, baseColor, endColor, colors })
-
   return colors
 }