@fibery/ui-kit 1.40.3 → 1.41.0

package/src/palette-generator.test.ts

@@ -0,0 +1,309 @@
+import {getAlpha, OKLCH, parse, to} from "./color-utils";
+import {type ColorScale, makeDefaultPalette, makeThematicPalette} from "./palette-generator";
+import {zeroBasedFromOneBased} from "./scale-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 zeroBasedFromOneBased(scale).map((color) => getOklch(color).l);
+}
+
+function extractChromaNormalized(scale: ColorScale): number[] {
+  const chromas = zeroBasedFromOneBased(scale).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("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(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)",
+        ]
+      `);
+      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)",
+        ]
+      `);
+
+      const whiteADefault = zeroBasedFromOneBased(defaultPalette.whiteA);
+      const blackADefault = zeroBasedFromOneBased(defaultPalette.blackA);
+      const whiteAGenerated = zeroBasedFromOneBased(generated.whiteA);
+      const blackAGenerated = zeroBasedFromOneBased(generated.blackA);
+      // default palette uses hsla strings, generated uses rgba — compare parsed alpha values
+      for (let i = 0; i < 12; i++) {
+        const defWhiteAlpha = getAlpha(whiteADefault[i]);
+        const genWhiteAlpha = getAlpha(whiteAGenerated[i]);
+        expect(genWhiteAlpha).toBeCloseTo(defWhiteAlpha, 2);
+
+        const defBlackAlpha = getAlpha(blackADefault[i]);
+        const genBlackAlpha = getAlpha(blackAGenerated[i]);
+        expect(genBlackAlpha).toBeCloseTo(defBlackAlpha, 2);
+      }
+    });
+  });
+
+  describe("white/black tinting across hues", () => {
+    it("white/black should be tinted for all hues when chroma > 0", () => {
+      const hues = Array.from({length: 36}, (_, i) => i * 10);
+
+      for (const hue of hues) {
+        const palette = makeThematicPalette({baseHue: hue, baseChroma: 0.175, accentHue: hue, accentChroma: 0.16});
+        // white should not be pure white
+        expect(palette.white).not.toBe("rgb(255,255,255)");
+        expect(palette.white).not.toBe("#FFFFFF");
+        // black should not be pure black
+        expect(palette.black).not.toBe("rgb(0,0,0)");
+        expect(palette.black).not.toBe("#000000");
+      }
+    });
+  });
+
+  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);
+      }
+    });
+  });
+});

package/src/palette-generator.ts

@@ -0,0 +1,160 @@
+import {slateUserPalette} from "./palettes/slate-user";
+import {slateArchPalette} from "./palettes/slate-arch";
+import {warmUserPalette} from "./palettes/warm-user";
+import {warmArchPalette} from "./palettes/warm-arch";
+import {
+  DEFAULT_DARK_CURVES,
+  DEFAULT_LIGHT_CURVES,
+  generateBlacks,
+  generateColorScale,
+  generateGrayScale,
+  generateInterpolatedScale,
+  generatePresetScale,
+  generateWhites,
+  type InterpolatedScaleConfig,
+  OneBasedScale,
+  paletteFromHue,
+  paletteFromHueBoth,
+  SCALE_PRESETS,
+  type ScaleConfig,
+  type ScaleCurves,
+  type ZeroBasedScale,
+} from "./scale-generator";
+
+export type ColorScale = OneBasedScale<string>;
+
+export interface ThemePalette {
+  key: string;
+  white: string;
+  black: string;
+  whiteA: ColorScale;
+  blackA: ColorScale;
+  base: ColorScale;
+  baseDark: ColorScale;
+  accent: ColorScale;
+  accentDark: ColorScale;
+  red: ColorScale;
+  redDark: ColorScale;
+  teal: ColorScale;
+  tealDark: ColorScale;
+  yellow: ColorScale;
+  yellowDark: ColorScale;
+}
+
+export const defaultPaletteKey = slateUserPalette.key;
+
+export function makeDefaultPalette(): ThemePalette {
+  return slateUserPalette;
+}
+
+export function selectPalette({
+  warmLook = false,
+  isArchitect = false,
+}: {
+  warmLook?: boolean;
+  isArchitect?: boolean;
+} = {}): ThemePalette {
+  if (warmLook) {
+    return isArchitect ? warmArchPalette : warmUserPalette;
+  } else {
+    return isArchitect ? slateArchPalette : slateUserPalette;
+  }
+}
+
+export type ThematicPrefs = {
+  baseHue?: number;
+  baseChroma?: number;
+  accentHue: number;
+  accentChroma: number;
+  contrast?: number;
+  whiteLuminosity?: number;
+  whiteChroma?: number;
+  blackLuminosity?: number;
+  blackChroma?: number;
+};
+
+function shiftHueTowards(hue: number, targetHue: number, amount: number): number {
+  // Find shortest path on hue circle
+  let diff = targetHue - hue;
+  if (diff > 180) {
+    diff -= 360;
+  } else if (diff < -180) {
+    diff += 360;
+  }
+  return (hue + diff * amount + 360) % 360;
+}
+
+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);
+
+  // 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});
+
+  // Generate accent scales
+  const accent = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "light", contrast});
+  const accentDark = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "dark", contrast});
+
+  // 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 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,
+  });
+
+  return {
+    key: JSON.stringify(config),
+    white,
+    black,
+    whiteA,
+    blackA,
+    base,
+    baseDark,
+    accent,
+    accentDark,
+    red,
+    redDark,
+    teal,
+    tealDark,
+    yellow,
+    yellowDark,
+  };
+}
+
+export {
+  generateBlacks,
+  generateColorScale,
+  generateGrayScale,
+  generateInterpolatedScale,
+  generatePresetScale,
+  generateWhites,
+  paletteFromHue,
+  paletteFromHueBoth,
+  SCALE_PRESETS,
+  DEFAULT_LIGHT_CURVES,
+  DEFAULT_DARK_CURVES,
+  type ZeroBasedScale,
+  type ScaleConfig,
+  type ScaleCurves,
+  type InterpolatedScaleConfig,
+};

package/src/palettes/_.ts

@@ -0,0 +1,72 @@
+import {makeThemeDefs} from "../design-system/colors";
+import {HSL, isValidColor, OKLCH, produceColor, sRGB} from "../color-utils";
+import {ThemePalette} from "../palette-generator";
+
+function verboseColor(color: string) {
+  return `${produceColor(color, [], sRGB)} / ${produceColor(color, [], OKLCH)} / ${produceColor(color, [], HSL)}`;
+}
+
+const COLOR_PREFIXES = ["rgba(", "rgb(", "hsla(", "hsl("] as const;
+const HEX_CHARS = "0123456789abcdefABCDEF";
+
+function replaceColorsInString(str: string) {
+  let result = "";
+  let i = 0;
+  const seen = new Set<string>();
+  while (i < str.length) {
+    const position = i;
+    const prefix = COLOR_PREFIXES.find((p) => str.startsWith(p, position));
+    if (prefix) {
+      const closeIdx = str.indexOf(")", i + prefix.length);
+      if (closeIdx !== -1) {
+        const candidate = str.slice(i, closeIdx + 1);
+        if (isValidColor(candidate)) {
+          const verbose = verboseColor(candidate);
+          result += seen.has(verbose) ? "[SAME]" : verbose;
+          seen.add(verbose);
+          i = closeIdx + 1;
+          continue;
+        }
+      }
+    }
+    if (str[i] === "#") {
+      let end = i + 1;
+      while (end < str.length && HEX_CHARS.includes(str[end])) {
+        end++;
+      }
+      const candidate = str.slice(i, end);
+      if (candidate.length >= 4 && isValidColor(candidate)) {
+        const verbose = verboseColor(candidate);
+        result += seen.has(verbose) ? "[SAME]" : verbose;
+        seen.add(verbose);
+        i = end;
+        continue;
+      }
+    }
+    result += str[i];
+    i++;
+  }
+  return result;
+}
+
+function deepMapColors(value: unknown): unknown {
+  if (typeof value === "string") {
+    if (isValidColor(value)) {
+      return verboseColor(value);
+    }
+    return replaceColorsInString(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(deepMapColors);
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, deepMapColors(v)]));
+  }
+  return value;
+}
+
+export function colors(palette: ThemePalette) {
+  const {colors} = makeThemeDefs(palette);
+
+  return deepMapColors(colors);
+}