@fibery/ui-kit 1.40.2 → 1.40.4

package/src/palette-generator.test.ts

@@ -0,0 +1,566 @@
+/* eslint-disable max-lines */
+import {getAlpha, OKLCH, parse, to, toOKLCH} from "./color-utils";
+import {type ColorScale, makeDefaultPalette, makeThematicPalette} from "./palette-generator";
+
+function roundToThreeDigits(number: number) {
+  return Math.round(number * 1000) / 1000;
+}
+
+function getOklch(color: string): {l: number; c: number; h: number} {
+  const oklch = to(parse(color), OKLCH);
+  return {
+    l: roundToThreeDigits(100 * (oklch.coords[0] ?? 0)),
+    c: oklch.coords[1] ?? 0,
+    h: oklch.coords[2] ?? 0,
+  };
+}
+
+function extractLightness(scale: ColorScale): number[] {
+  return scale.slice(1).map((color) => getOklch(color).l);
+}
+
+function extractChromaNormalized(scale: ColorScale): number[] {
+  const chromas = scale.slice(1).map((color) => getOklch(color).c);
+  const maxChroma = Math.max(...chromas);
+  return chromas.map((c) => roundToThreeDigits(c / maxChroma));
+}
+
+describe("palette-generator", () => {
+  describe("extract curves from default palette", () => {
+    it("extracts YELLOW curves", () => {
+      const palette = makeDefaultPalette();
+      expect(extractLightness(palette.yellow)).toMatchInlineSnapshot(`
+        [
+          99.15,
+          98.666,
+          98.103,
+          97.119,
+          95.34,
+          92.061,
+          86.841,
+          81.273,
+          88.224,
+          85.516,
+          54.771,
+          28.162,
+        ]
+      `);
+      expect(extractChromaNormalized(palette.yellow)).toMatchInlineSnapshot(`
+        [
+          0.04,
+          0.16,
+          0.299,
+          0.419,
+          0.539,
+          0.621,
+          0.692,
+          0.911,
+          1,
+          0.962,
+          0.624,
+          0.231,
+        ]
+      `);
+      expect(extractLightness(palette.yellowDark)).toMatchInlineSnapshot(`
+        [
+          18.975,
+          22.715,
+          25.994,
+          27.672,
+          31.467,
+          35.323,
+          40.577,
+          48.421,
+          88.224,
+          93.814,
+          82.593,
+          97.801,
+        ]
+      `);
+      expect(extractChromaNormalized(palette.yellowDark)).toMatchInlineSnapshot(`
+        [
+          0.213,
+          0.255,
+          0.291,
+          0.31,
+          0.353,
+          0.398,
+          0.444,
+          0.546,
+          1,
+          0.898,
+          0.926,
+          0.289,
+        ]
+      `);
+      // Extract hue from step 9 (primary yellow)
+      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.99954352835232`);
+    });
+
+    it("extracts SLATE curves", () => {
+      const palette = makeDefaultPalette();
+      expect(extractLightness(palette.base)).toMatchInlineSnapshot(`
+        [
+          99.241,
+          97.719,
+          96.955,
+          94.656,
+          93.115,
+          91.568,
+          89.235,
+          82.937,
+          69.959,
+          57.217,
+          48.318,
+          20.441,
+        ]
+      `);
+      expect(extractLightness(palette.baseDark)).toMatchInlineSnapshot(`
+        [
+          20.441,
+          22.667,
+          25.908,
+          28.012,
+          30.078,
+          32.109,
+          36.079,
+          43.714,
+          54.586,
+          59.818,
+          70.787,
+          94.656,
+        ]
+      `);
+    });
+
+    it("extracts INDIGO curves", () => {
+      const palette = makeDefaultPalette();
+      expect(extractLightness(palette.accent)).toMatchInlineSnapshot(`
+        [
+          99.069,
+          98.983,
+          96.966,
+          95.012,
+          92.145,
+          88.367,
+          82.757,
+          76.14,
+          58.48,
+          54.173,
+          49.642,
+          26.071,
+        ]
+      `);
+      expect(extractChromaNormalized(palette.accent)).toMatchInlineSnapshot(`
+        [
+          0.018,
+          0.027,
+          0.08,
+          0.126,
+          0.19,
+          0.27,
+          0.384,
+          0.529,
+          0.934,
+          1,
+          0.878,
+          0.44,
+        ]
+      `);
+      expect(extractLightness(palette.accentDark)).toMatchInlineSnapshot(`
+        [
+          20.512,
+          22.974,
+          27.284,
+          29.742,
+          32.452,
+          35.981,
+          41.256,
+          47.972,
+          57.658,
+          62.928,
+          76.225,
+          95.899,
+        ]
+      `);
+      expect(extractChromaNormalized(palette.accentDark)).toMatchInlineSnapshot(`
+        [
+          0.119,
+          0.226,
+          0.357,
+          0.444,
+          0.475,
+          0.517,
+          0.72,
+          0.952,
+          1,
+          0.921,
+          0.601,
+          0.111,
+        ]
+      `);
+    });
+  });
+
+  describe("makeDefaultPalette", () => {
+    it("snapshots default palette in OKLCH", () => {
+      const palette = makeDefaultPalette();
+      expect({
+        base: palette.base.map(toOKLCH),
+        baseDark: palette.baseDark.map(toOKLCH),
+        accent: palette.accent.map(toOKLCH),
+        accentDark: palette.accentDark.map(toOKLCH),
+      }).toMatchInlineSnapshot(`
+        {
+          "accent": [
+            "oklch(100% 0 none)",
+            "oklch(99.069% 0.00291 264.54)",
+            "oklch(98.983% 0.00437 264.54)",
+            "oklch(96.966% 0.01293 264.51)",
+            "oklch(95.012% 0.02046 264.47)",
+            "oklch(92.145% 0.03068 264.41)",
+            "oklch(88.367% 0.04361 264.32)",
+            "oklch(82.757% 0.06206 264.15)",
+            "oklch(76.14% 0.08554 263.86)",
+            "oklch(58.48% 0.15116 262.64)",
+            "oklch(54.173% 0.16179 262.38)",
+            "oklch(49.642% 0.14201 262.46)",
+            "oklch(26.071% 0.07125 262.54)",
+          ],
+          "accentDark": [
+            "oklch(100% 0 none)",
+            "oklch(20.512% 0.01807 266.69)",
+            "oklch(22.974% 0.03429 266.01)",
+            "oklch(27.284% 0.05415 265.42)",
+            "oklch(29.742% 0.06735 265.08)",
+            "oklch(32.452% 0.07215 265.13)",
+            "oklch(35.981% 0.07843 265.18)",
+            "oklch(41.256% 0.10936 264.62)",
+            "oklch(47.972% 0.14454 264.22)",
+            "oklch(57.658% 0.15178 264.65)",
+            "oklch(62.928% 0.13984 265.13)",
+            "oklch(76.225% 0.09124 266.35)",
+            "oklch(95.899% 0.01681 267.31)",
+          ],
+          "base": [
+            "oklch(100% 0 none)",
+            "oklch(99.241% 0 none)",
+            "oklch(97.719% 0 none)",
+            "oklch(96.955% 0 none)",
+            "oklch(94.656% 0 none)",
+            "oklch(93.115% 0 none)",
+            "oklch(91.568% 0 none)",
+            "oklch(89.235% 0 none)",
+            "oklch(82.937% 0 none)",
+            "oklch(69.959% 0 none)",
+            "oklch(57.217% 0 none)",
+            "oklch(48.318% 0 none)",
+            "oklch(20.441% 0 none)",
+          ],
+          "baseDark": [
+            "oklch(15.789% 0 none)",
+            "oklch(20.441% 0 none)",
+            "oklch(22.667% 0 none)",
+            "oklch(25.908% 0 none)",
+            "oklch(28.012% 0 none)",
+            "oklch(30.078% 0 none)",
+            "oklch(32.109% 0 none)",
+            "oklch(36.079% 0 none)",
+            "oklch(43.714% 0 none)",
+            "oklch(54.586% 0 none)",
+            "oklch(59.818% 0 none)",
+            "oklch(70.787% 0 none)",
+            "oklch(94.656% 0 none)",
+          ],
+        }
+      `);
+    });
+  });
+
+  describe("white/black scales", () => {
+    it("generated neutral scales match default palette", () => {
+      const defaultPalette = makeDefaultPalette();
+      const generated = makeThematicPalette({
+        baseHue: 0,
+        baseChroma: 0,
+        accentHue: 264,
+        accentChroma: 0.16,
+      });
+
+      expect(generated.white).toMatchInlineSnapshot(`
+        [
+          "rgb(255,255,255)",
+          "rgba(255,255,255,0)",
+          "rgba(255,255,255,0.01)",
+          "rgba(255,255,255,0.03)",
+          "rgba(255,255,255,0.06)",
+          "rgba(255,255,255,0.09)",
+          "rgba(255,255,255,0.12)",
+          "rgba(255,255,255,0.18)",
+          "rgba(255,255,255,0.25)",
+          "rgba(255,255,255,0.39)",
+          "rgba(255,255,255,0.45)",
+          "rgba(255,255,255,0.59)",
+          "rgba(255,255,255,0.92)",
+        ]
+      `);
+      expect(generated.black).toMatchInlineSnapshot(`
+        [
+          "rgb(0,0,0)",
+          "rgba(0,0,0,0.01)",
+          "rgba(0,0,0,0.03)",
+          "rgba(0,0,0,0.05)",
+          "rgba(0,0,0,0.07)",
+          "rgba(0,0,0,0.09)",
+          "rgba(0,0,0,0.11)",
+          "rgba(0,0,0,0.14)",
+          "rgba(0,0,0,0.22)",
+          "rgba(0,0,0,0.44)",
+          "rgba(0,0,0,0.48)",
+          "rgba(0,0,0,0.57)",
+          "rgba(0,0,0,0.91)",
+        ]
+      `);
+
+      // default palette uses hsla strings, generated uses rgba — compare parsed alpha values
+      for (let i = 0; i < 13; i++) {
+        const defWhiteAlpha = getAlpha(defaultPalette.white[i]);
+        const genWhiteAlpha = getAlpha(generated.white[i]);
+        expect(genWhiteAlpha).toBeCloseTo(defWhiteAlpha, 2);
+
+        const defBlackAlpha = getAlpha(defaultPalette.black[i]);
+        const genBlackAlpha = getAlpha(generated.black[i]);
+        expect(genBlackAlpha).toBeCloseTo(defBlackAlpha, 2);
+      }
+    });
+  });
+
+  describe("white/black tinting across hues", () => {
+    it("white[0] should be tinted for all hues when chroma > 0", () => {
+      const hues = Array.from({length: 36}, (_, i) => i * 10);
+      const results = hues.map((hue) => {
+        const palette = makeThematicPalette({baseHue: hue, baseChroma: 0.175, accentHue: hue, accentChroma: 0.16});
+        return {hue, white0: palette.white[0], black0: palette.black[0]};
+      });
+
+      // Every hue should produce a tinted white (not pure #fff)
+      for (const {hue, white0} of results) {
+        expect({hue, white0}).not.toEqual({hue, white0: "rgb(255,255,255)"});
+      }
+
+      expect(results).toMatchInlineSnapshot(`
+        [
+          {
+            "black0": "rgb(3,0,1)",
+            "hue": 0,
+            "white0": "rgb(255,245,249)",
+          },
+          {
+            "black0": "rgb(3,0,1)",
+            "hue": 10,
+            "white0": "rgb(255,245,246)",
+          },
+          {
+            "black0": "rgb(3,0,1)",
+            "hue": 20,
+            "white0": "rgb(255,245,244)",
+          },
+          {
+            "black0": "rgb(3,0,0)",
+            "hue": 30,
+            "white0": "rgb(255,245,242)",
+          },
+          {
+            "black0": "rgb(3,1,0)",
+            "hue": 40,
+            "white0": "rgb(255,246,241)",
+          },
+          {
+            "black0": "rgb(3,1,0)",
+            "hue": 50,
+            "white0": "rgb(255,246,239)",
+          },
+          {
+            "black0": "rgb(3,1,0)",
+            "hue": 60,
+            "white0": "rgb(255,247,238)",
+          },
+          {
+            "black0": "rgb(2,1,0)",
+            "hue": 70,
+            "white0": "rgb(255,248,237)",
+          },
+          {
+            "black0": "rgb(2,1,0)",
+            "hue": 80,
+            "white0": "rgb(255,248,236)",
+          },
+          {
+            "black0": "rgb(2,1,0)",
+            "hue": 90,
+            "white0": "rgb(254,249,236)",
+          },
+          {
+            "black0": "rgb(2,1,0)",
+            "hue": 100,
+            "white0": "rgb(252,250,237)",
+          },
+          {
+            "black0": "rgb(1,1,0)",
+            "hue": 110,
+            "white0": "rgb(250,251,237)",
+          },
+          {
+            "black0": "rgb(1,1,0)",
+            "hue": 120,
+            "white0": "rgb(247,251,238)",
+          },
+          {
+            "black0": "rgb(1,1,0)",
+            "hue": 130,
+            "white0": "rgb(245,252,240)",
+          },
+          {
+            "black0": "rgb(0,2,0)",
+            "hue": 140,
+            "white0": "rgb(243,252,241)",
+          },
+          {
+            "black0": "rgb(0,2,0)",
+            "hue": 150,
+            "white0": "rgb(241,253,243)",
+          },
+          {
+            "black0": "rgb(0,2,1)",
+            "hue": 160,
+            "white0": "rgb(240,253,245)",
+          },
+          {
+            "black0": "rgb(0,2,1)",
+            "hue": 170,
+            "white0": "rgb(238,253,247)",
+          },
+          {
+            "black0": "rgb(0,2,1)",
+            "hue": 180,
+            "white0": "rgb(237,253,250)",
+          },
+          {
+            "black0": "rgb(0,2,2)",
+            "hue": 190,
+            "white0": "rgb(237,253,252)",
+          },
+          {
+            "black0": "rgb(0,2,2)",
+            "hue": 200,
+            "white0": "rgb(236,253,254)",
+          },
+          {
+            "black0": "rgb(0,2,2)",
+            "hue": 210,
+            "white0": "rgb(237,253,255)",
+          },
+          {
+            "black0": "rgb(0,2,3)",
+            "hue": 220,
+            "white0": "rgb(237,252,255)",
+          },
+          {
+            "black0": "rgb(0,1,3)",
+            "hue": 230,
+            "white0": "rgb(238,252,255)",
+          },
+          {
+            "black0": "rgb(0,1,3)",
+            "hue": 240,
+            "white0": "rgb(239,251,255)",
+          },
+          {
+            "black0": "rgb(0,1,3)",
+            "hue": 250,
+            "white0": "rgb(241,251,255)",
+          },
+          {
+            "black0": "rgb(0,1,4)",
+            "hue": 260,
+            "white0": "rgb(243,250,255)",
+          },
+          {
+            "black0": "rgb(1,1,4)",
+            "hue": 270,
+            "white0": "rgb(244,249,255)",
+          },
+          {
+            "black0": "rgb(1,1,4)",
+            "hue": 280,
+            "white0": "rgb(247,248,255)",
+          },
+          {
+            "black0": "rgb(1,1,3)",
+            "hue": 290,
+            "white0": "rgb(249,248,255)",
+          },
+          {
+            "black0": "rgb(1,1,3)",
+            "hue": 300,
+            "white0": "rgb(251,247,255)",
+          },
+          {
+            "black0": "rgb(2,1,3)",
+            "hue": 310,
+            "white0": "rgb(253,246,255)",
+          },
+          {
+            "black0": "rgb(2,1,2)",
+            "hue": 320,
+            "white0": "rgb(255,246,255)",
+          },
+          {
+            "black0": "rgb(2,1,2)",
+            "hue": 330,
+            "white0": "rgb(255,245,255)",
+          },
+          {
+            "black0": "rgb(3,1,2)",
+            "hue": 340,
+            "white0": "rgb(255,245,253)",
+          },
+          {
+            "black0": "rgb(3,0,1)",
+            "hue": 350,
+            "white0": "rgb(255,245,251)",
+          },
+        ]
+      `);
+    });
+  });
+
+  describe("createPalette with default config", () => {
+    it("should closely match default palette lightness", () => {
+      const defaultPalette = makeDefaultPalette();
+      const generatedPalette = makeThematicPalette({
+        baseHue: 0,
+        baseChroma: 0,
+        accentHue: 264,
+        accentChroma: 0.16,
+      });
+
+      const defaultBase = extractLightness(defaultPalette.base);
+      const generatedBase = extractLightness(generatedPalette.base);
+      const defaultBaseDark = extractLightness(defaultPalette.baseDark);
+      const generatedBaseDark = extractLightness(generatedPalette.baseDark);
+      const defaultAccent = extractLightness(defaultPalette.accent);
+      const generatedAccent = extractLightness(generatedPalette.accent);
+      const defaultAccentDark = extractLightness(defaultPalette.accentDark);
+      const generatedAccentDark = extractLightness(generatedPalette.accentDark);
+
+      // Allow 0.5% lightness tolerance due to color space conversion
+      for (let i = 0; i < 12; i++) {
+        expect(Math.abs(generatedBase[i] - defaultBase[i])).toBeLessThan(0.5);
+        expect(Math.abs(generatedBaseDark[i] - defaultBaseDark[i])).toBeLessThan(0.5);
+        expect(Math.abs(generatedAccent[i] - defaultAccent[i])).toBeLessThan(0.5);
+        expect(Math.abs(generatedAccentDark[i] - defaultAccentDark[i])).toBeLessThan(0.5);
+      }
+    });
+  });
+});