Test using HSL + curves to build a scale

styles/src/system/algorithm.ts

@@ -1,6 +1,8 @@
 // Adapted from @k-vyn/coloralgorithm
 
+import bezier from "bezier-easing";
 import chroma, { Scale } from "chroma-js";
+import { Curve } from "./curves";
 import { ColorFamily, ColorProps, ColorSet } from "./types";
 
 function validColor(color: string) {
@@ -58,6 +60,91 @@ export function generateColors(props: ColorProps, inverted: boolean) {
   return colors;
 }
 
+export function generateColorsUsingCurve(
+  startColor: string,
+  endColor: string,
+  curve: number[]
+) {
+  const NUM_STEPS = 101;
+
+  const easing = bezier(curve[0], curve[1], curve[2], curve[3]);
+  const curveProgress = [];
+  for (let i = 0; i <= NUM_STEPS; i++) {
+    curveProgress.push(easing(i / NUM_STEPS));
+  }
+
+  const colors: chroma.Color[] = [];
+  for (let i = 0; i < NUM_STEPS; i++) {
+    // Use HSL as an input as it is easier to construct programatically
+    // const color = chroma.hsl();
+    const color = chroma.mix(startColor, endColor, curveProgress[i], "lch");
+    colors.push(color);
+  }
+
+  return colors;
+}
+
+export function generateColors2(
+  hue: {
+    start: number;
+    end: number;
+    curve: Curve;
+  },
+  saturation: {
+    start: number;
+    end: number;
+    curve: Curve;
+  },
+  lightness: {
+    start: number;
+    end: number;
+    curve: Curve;
+  }
+) {
+  const NUM_STEPS = 9;
+
+  const hueEasing = bezier(
+    hue.curve.value[0],
+    hue.curve.value[1],
+    hue.curve.value[2],
+    hue.curve.value[3]
+  );
+  const saturationEasing = bezier(
+    saturation.curve.value[0],
+    saturation.curve.value[1],
+    saturation.curve.value[2],
+    saturation.curve.value[3]
+  );
+  const lightnessEasing = bezier(
+    lightness.curve.value[0],
+    lightness.curve.value[1],
+    lightness.curve.value[2],
+    lightness.curve.value[3]
+  );
+
+  const colors: chroma.Color[] = [];
+  for (let i = 0; i < NUM_STEPS; i++) {
+    const hueValue =
+      hueEasing(i / NUM_STEPS) * (hue.end - hue.start) + hue.start;
+    const saturationValue =
+      saturationEasing(i / NUM_STEPS) * (saturation.end - saturation.start) +
+      saturation.start;
+    const lightnessValue =
+      lightnessEasing(i / NUM_STEPS) * (lightness.end - lightness.start) +
+      lightness.start;
+
+    const color = chroma.hsl(
+      hueValue,
+      saturationValue / 100,
+      lightnessValue / 100
+    );
+    colors.push(color);
+  }
+
+  const scale = chroma.scale(colors).mode("lch");
+  return scale;
+}
+
 /** Generates two color ramps:
  * One for for light, and one for dark.
  * By generating two ramps, rather than two default themes, we can use the same reference palette values for tokens in components.

styles/src/system/curves.ts

@@ -7,6 +7,8 @@ export interface Curve {
 }
 
 export interface Curves {
+  lightness: Curve;
+  saturation: Curve;
   linear: Curve;
   easeInCubic: Curve;
   easeOutCubic: Curve;
@@ -35,6 +37,16 @@ export interface Curves {
 }
 
 export const curve: Curves = {
+  lightness: {
+    name: "nate",
+    formatted_name: "Nate",
+    value: [0.2, 0, 0.85, 1.1],
+  },
+  saturation: {
+    name: "nate",
+    formatted_name: "Nate",
+    value: [0.67, 0.6, 0.55, 1.0],
+  },
   linear: {
     name: "linear",
     formatted_name: "Linear",

styles/src/system/ref/color.ts

@@ -1,5 +1,10 @@
 import chroma from "chroma-js";
-import { generateColorSet } from "../algorithm";
+import {
+  generateColors2,
+  generateColorSet,
+  generateColorsUsingCurve,
+} from "../algorithm";
+import { curve } from "../curves";
 import { ColorFamily } from "../types";
 
 // These are the source colors for the color scales in the system.
@@ -59,6 +64,28 @@ const red: ColorFamily = generateColorSet({
 export const redLight = chroma.scale(red.colors).mode("lch");
 export const redDark = chroma.scale(red.invertedColors).mode("lch");
 
+// Red 2 ======================================== //
+
+const red2 = generateColors2(
+  {
+    start: 0,
+    end: 0,
+    curve: curve.linear,
+  },
+  {
+    start: 95,
+    end: 75,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 25,
+    curve: curve.lightness,
+  }
+);
+
+export const red2Light = red2;
+
 // Orange ======================================== //
 
 const orange: ColorFamily = generateColorSet({
@@ -73,6 +100,28 @@ const orange: ColorFamily = generateColorSet({
 export const orangeLight = chroma.scale(orange.colors).mode("lch");
 export const orangeDark = chroma.scale(orange.invertedColors).mode("lch");
 
+// Orange 2 ======================================== //
+
+const orange2 = generateColors2(
+  {
+    start: 25,
+    end: 25,
+    curve: curve.linear,
+  },
+  {
+    start: 100,
+    end: 100,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 25,
+    curve: curve.lightness,
+  }
+);
+
+export const orange2Light = orange2;
+
 // Amber ======================================== //
 
 const amber: ColorFamily = generateColorSet({
@@ -87,6 +136,28 @@ const amber: ColorFamily = generateColorSet({
 export const amberLight = chroma.scale(amber.colors).mode("lch");
 export const amberDark = chroma.scale(amber.invertedColors).mode("lch");
 
+// Amber 2 ======================================== //
+
+const amber2 = generateColors2(
+  {
+    start: 34,
+    end: 34,
+    curve: curve.linear,
+  },
+  {
+    start: 100,
+    end: 100,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 25,
+    curve: curve.lightness,
+  }
+);
+
+export const amber2Light = amber2;
+
 // Yellow ======================================== //
 
 const yellow: ColorFamily = generateColorSet({
@@ -101,6 +172,28 @@ const yellow: ColorFamily = generateColorSet({
 export const yellowLight = chroma.scale(yellow.colors).mode("lch");
 export const yellowDark = chroma.scale(yellow.invertedColors).mode("lch");
 
+// Yellow 2 ======================================== //
+
+const yellow2 = generateColors2(
+  {
+    start: 48,
+    end: 48,
+    curve: curve.linear,
+  },
+  {
+    start: 90,
+    end: 100,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 30,
+    curve: curve.lightness,
+  }
+);
+
+export const yellow2Light = yellow2;
+
 // Lime ======================================== //
 
 const lime: ColorFamily = generateColorSet({
@@ -115,6 +208,50 @@ const lime: ColorFamily = generateColorSet({
 export const limeLight = chroma.scale(lime.colors).mode("lch");
 export const limeDark = chroma.scale(lime.invertedColors).mode("lch");
 
+// Lime 2 ======================================== //
+
+const lime2 = generateColors2(
+  {
+    start: 85,
+    end: 85,
+    curve: curve.linear,
+  },
+  {
+    start: 85,
+    end: 70,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 30,
+    curve: curve.lightness,
+  }
+);
+
+export const lime2Light = lime2;
+
+// Citron 2 ======================================== //
+
+const citron2 = generateColors2(
+  {
+    start: 65,
+    end: 65,
+    curve: curve.linear,
+  },
+  {
+    start: 85,
+    end: 70,
+    curve: curve.saturation,
+  },
+  {
+    start: 97,
+    end: 30,
+    curve: curve.lightness,
+  }
+);
+
+export const citron2Light = citron2;
+
 // Green ======================================== //
 
 const green: ColorFamily = generateColorSet({