@fibery/ui-kit 2.0.1 → 2.1.0

package/src/palette-generator.test.ts

@@ -1,5 +1,5 @@
-import {getAlpha, OKLCH, parse, to} from "./color-utils";
-import {type ColorScale, makeDefaultPalette, makeThematicPalette} from "./palette-generator";
+import {getAlpha, oklchFrom} from "./color-utils";
+import {type ColorScale, makeThematicPalette, selectPalette} from "./palette-generator";
 import {zeroBasedFromOneBased} from "./scale-generator";
 
 function roundToThreeDigits(number: number) {
@@ -7,11 +7,11 @@ function roundToThreeDigits(number: number) {
 }
 
 function getOklch(color: string): {l: number; c: number; h: number} {
-  const oklch = to(parse(color), OKLCH);
+  const oklch = oklchFrom(color)!;
   return {
-    l: roundToThreeDigits(100 * (oklch.coords[0] ?? 0)),
-    c: oklch.coords[1] ?? 0,
-    h: oklch.coords[2] ?? 0,
+    l: roundToThreeDigits(100 * (oklch.l ?? 0)),
+    c: oklch.c ?? 0,
+    h: oklch.h ?? 0,
   };
 }
 
@@ -26,177 +26,175 @@ function extractChromaNormalized(scale: ColorScale): number[] {
 }
 
 describe("palette-generator", () => {
+  const palette = selectPalette();
   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,
+          99.045,
+          98.732,
+          98.022,
+          96.973,
+          95.329,
+          92.067,
+          86.923,
+          81.33,
+          88.234,
+          85.486,
+          54.685,
+          28.215,
         ]
       `);
       expect(extractChromaNormalized(palette.yellow)).toMatchInlineSnapshot(`
         [
-          0.04,
-          0.16,
-          0.299,
-          0.419,
-          0.539,
-          0.621,
-          0.692,
-          0.911,
+          0.036,
+          0.165,
+          0.311,
+          0.439,
+          0.562,
+          0.647,
+          0.722,
+          0.923,
           1,
-          0.962,
-          0.624,
-          0.231,
+          0.969,
+          0.62,
+          0.241,
         ]
       `);
       expect(extractLightness(palette.yellowDark)).toMatchInlineSnapshot(`
         [
-          18.975,
-          22.715,
-          25.994,
-          27.672,
-          31.467,
-          35.323,
-          40.577,
+          19.025,
+          22.663,
+          25.911,
+          27.619,
+          31.603,
+          35.465,
+          40.659,
           48.421,
-          88.224,
-          93.814,
-          82.593,
-          97.801,
+          88.234,
+          93.164,
+          82.621,
+          97.627,
         ]
       `);
       expect(extractChromaNormalized(palette.yellowDark)).toMatchInlineSnapshot(`
         [
-          0.213,
-          0.255,
-          0.291,
-          0.31,
-          0.353,
-          0.398,
-          0.444,
-          0.546,
+          0.216,
+          0.256,
+          0.294,
+          0.313,
+          0.358,
+          0.402,
+          0.462,
+          0.548,
           1,
-          0.898,
-          0.926,
-          0.289,
+          0.932,
+          0.937,
+          0.298,
         ]
       `);
       // Extract hue from step 9 (primary yellow)
-      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.99954352835232`);
+      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.46939874406455`);
     });
 
     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,
+          99.107,
+          97.614,
+          97.015,
+          94.611,
+          93.1,
+          91.583,
+          89.143,
+          82.968,
+          69.926,
+          57.268,
+          48.193,
+          20.463,
         ]
       `);
       expect(extractLightness(palette.baseDark)).toMatchInlineSnapshot(`
         [
-          20.441,
-          22.667,
-          25.908,
-          28.012,
-          30.078,
+          20.463,
+          22.645,
+          26.032,
+          28.094,
+          30.118,
           32.109,
-          36.079,
-          43.714,
-          54.586,
-          59.818,
-          70.787,
-          94.656,
+          36.002,
+          43.86,
+          54.517,
+          59.649,
+          70.9,
+          94.611,
         ]
       `);
     });
 
     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,
+          99.087,
+          99.04,
+          96.971,
+          95.096,
+          92.071,
+          88.315,
+          82.769,
+          76.075,
+          58.528,
+          54.075,
+          49.731,
+          25.927,
         ]
       `);
       expect(extractChromaNormalized(palette.accent)).toMatchInlineSnapshot(`
         [
           0.018,
-          0.027,
-          0.08,
-          0.126,
-          0.19,
-          0.27,
-          0.384,
-          0.529,
-          0.934,
+          0.028,
+          0.078,
+          0.125,
+          0.188,
+          0.266,
+          0.382,
+          0.53,
+          0.923,
           1,
-          0.878,
+          0.871,
           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,
+          20.482,
+          22.847,
+          27.295,
+          29.616,
+          32.447,
+          35.965,
+          41.195,
+          48.06,
+          57.653,
+          62.937,
+          76.313,
+          95.785,
         ]
       `);
       expect(extractChromaNormalized(palette.accentDark)).toMatchInlineSnapshot(`
         [
-          0.119,
-          0.226,
-          0.357,
-          0.444,
-          0.475,
-          0.517,
-          0.72,
-          0.952,
+          0.126,
+          0.23,
+          0.362,
+          0.453,
+          0.479,
+          0.516,
+          0.725,
+          0.951,
           1,
           0.921,
-          0.601,
-          0.111,
+          0.602,
+          0.112,
         ]
       `);
     });
@@ -204,7 +202,7 @@ describe("palette-generator", () => {
 
   describe("white/black scales", () => {
     it("generated neutral scales match default palette", () => {
-      const defaultPalette = makeDefaultPalette();
+      const defaultPalette = selectPalette();
       const generated = makeThematicPalette({
         baseHue: 0,
         baseChroma: 0,
@@ -214,34 +212,34 @@ describe("palette-generator", () => {
 
       expect(zeroBasedFromOneBased(generated.whiteA)).toMatchInlineSnapshot(`
         [
-          "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)",
+          "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(zeroBasedFromOneBased(generated.blackA)).toMatchInlineSnapshot(`
         [
-          "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)",
+          "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)",
         ]
       `);
 
@@ -280,7 +278,7 @@ describe("palette-generator", () => {
 
   describe("createPalette with default config", () => {
     it("should closely match default palette lightness", () => {
-      const defaultPalette = makeDefaultPalette();
+      const defaultPalette = selectPalette();
       const generatedPalette = makeThematicPalette({
         baseHue: 0,
         baseChroma: 0,

package/src/palette-generator.ts

@@ -1,5 +1,5 @@
-import {slateUserPalette} from "./palettes/slate-user";
-import {slateArchPalette} from "./palettes/slate-arch";
+import {neutralUserPalette} from "./palettes/neutral-user";
+import {neutralArchPalette} from "./palettes/neutral-arch";
 import {warmUserPalette} from "./palettes/warm-user";
 import {warmArchPalette} from "./palettes/warm-arch";
 import {
@@ -20,6 +20,7 @@ import {
   type ScaleCurves,
   type ZeroBasedScale,
 } from "./scale-generator";
+import {type ColorFilterSpec} from "./color-filter";
 
 export type ColorScale = OneBasedScale<string>;
 
@@ -39,12 +40,7 @@ export interface ThemePalette {
   tealDark: ColorScale;
   yellow: ColorScale;
   yellowDark: ColorScale;
-}
-
-export const defaultPaletteKey = slateUserPalette.key;
-
-export function makeDefaultPalette(): ThemePalette {
-  return slateUserPalette;
+  deneutralize?: ColorFilterSpec;
 }
 
 export function selectPalette({
@@ -57,7 +53,7 @@ export function selectPalette({
   if (warmLook) {
     return isArchitect ? warmArchPalette : warmUserPalette;
   } else {
-    return isArchitect ? slateArchPalette : slateUserPalette;
+    return isArchitect ? neutralArchPalette : neutralUserPalette;
   }
 }
 
@@ -66,15 +62,12 @@ export type ThematicPrefs = {
   baseChroma?: number;
   accentHue: number;
   accentChroma: number;
-  contrast?: number;
-  whiteLuminosity?: number;
-  whiteChroma?: number;
-  blackLuminosity?: number;
-  blackChroma?: number;
+  hueShiftTargetHue?: number;
+  hueShiftAmount?: number;
+  filter?: Partial<ColorFilterSpec>;
 };
 
-function shiftHueTowards(hue: number, targetHue: number, amount: number): number {
-  // Find shortest path on hue circle
+export function shiftHueTowards(hue: number, targetHue: number, amount: number): number {
   let diff = targetHue - hue;
   if (diff > 180) {
     diff -= 360;
@@ -85,40 +78,36 @@ function shiftHueTowards(hue: number, targetHue: number, amount: number): number
 }
 
 export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
-  const {baseHue = 0, baseChroma = 0, accentHue, accentChroma, contrast} = config;
-  const {white, whiteA} = generateWhites(baseHue, baseChroma, config.whiteLuminosity, config.whiteChroma);
-  const {black, blackA} = generateBlacks(baseHue, baseChroma, config.blackLuminosity, config.blackChroma);
+  const {accentHue, accentChroma} = config;
+  const baseChroma = config.baseChroma ?? 0;
+  const baseHue = config.hueShiftTargetHue ?? config.baseHue ?? 0;
+  const hueShift = config.hueShiftAmount ?? Math.min(baseChroma * 2, 0.3);
 
-  // Generate base/gray scales with tinted base colors
-  const base = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "light", contrast});
-  const baseDark = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "dark", contrast});
+  const {white, whiteA} = generateWhites(baseHue, baseChroma);
+  const {black, blackA} = generateBlacks(baseHue, baseChroma);
 
-  // Generate accent scales
-  const accent = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "light", contrast});
-  const accentDark = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "dark", contrast});
+  const base = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "light"});
+  const baseDark = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "dark"});
+  const accent = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "light"});
+  const accentDark = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "dark"});
 
-  // Shift semantic hues towards base hue when baseChroma is high
-  const hueShift = Math.min(baseChroma * 2, 0.3); // max 30% shift at chroma 0.15+
   const redHue = shiftHueTowards(SCALE_PRESETS.red.hue, baseHue, hueShift);
   const tealHue = shiftHueTowards(SCALE_PRESETS.teal.hue, baseHue, hueShift);
   const yellowHue = shiftHueTowards(SCALE_PRESETS.yellow.hue, baseHue, hueShift);
-
-  const red = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "light", contrast});
-  const redDark = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "dark", contrast});
-  const teal = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "light", contrast});
-  const tealDark = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "dark", contrast});
+  const red = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "light"});
+  const redDark = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "dark"});
+  const teal = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "light"});
+  const tealDark = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "dark"});
   const yellow = generateColorScale({
     hue: yellowHue,
     chroma: SCALE_PRESETS.yellow.chroma,
     mode: "light",
-    contrast,
     curves: SCALE_PRESETS.yellow.lightCurves,
   });
   const yellowDark = generateColorScale({
     hue: yellowHue,
     chroma: SCALE_PRESETS.yellow.chroma,
     mode: "dark",
-    contrast,
     curves: SCALE_PRESETS.yellow.darkCurves,
   });
 
@@ -138,6 +127,7 @@ export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
     tealDark,
     yellow,
     yellowDark,
+    deneutralize: config.filter,
   };
 }