@fibery/ui-kit 1.40.2 → 1.40.4

package/src/root-theme-provider.test.tsx

@@ -0,0 +1,316 @@
+import {act, render, screen} from "@testing-library/react";
+import {
+  RootThemeProvider,
+  ThemeProvider,
+  useThematic,
+  useTheme,
+  useThemeMenuPreference,
+  useThemeMode,
+  useThemePreference,
+} from "./theme-provider";
+import {makeDefaultPalette, ThemePalette} from "./palette-generator";
+import {defaultDarkTheme, defaultLightTheme} from "./theme-styles";
+import {createInlineTheme, getThemeColors} from "./design-system";
+
+jest.unmock("./create-inline-theme");
+
+const palette = makeDefaultPalette();
+
+function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
+  const theme = useTheme();
+  const mode = useThemeMode();
+  return (
+    <div data-testid={testId} data-mode={mode} data-primary={theme.primary}>
+      {theme.key}
+    </div>
+  );
+}
+
+function PreferenceDisplay() {
+  const preference = useThemePreference();
+  const menuPreference = useThemeMenuPreference();
+  return (
+    <div data-testid="preferences" data-preference={preference} data-menu-preference={menuPreference}>
+      {preference}/{menuPreference}
+    </div>
+  );
+}
+
+function ThematicDisplay() {
+  const {palette, setPalette} = useThematic();
+  return (
+    <div data-testid="thematic" data-has-palette={Boolean(palette)} data-has-setter={typeof setPalette === "function"}>
+      thematic
+    </div>
+  );
+}
+
+describe("RootThemeProvider", () => {
+  beforeEach(() => {
+    document.documentElement.className = "";
+    document.documentElement.style.colorScheme = "";
+  });
+
+  describe("context provision", () => {
+    it("provides theme via useTheme", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("theme-display")).toHaveAttribute("data-mode", "light");
+    });
+
+    it("provides dark theme when initialThemeMode is dark", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("theme-display")).toHaveAttribute("data-mode", "dark");
+    });
+
+    it("provides themePreference via useThemePreference", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="auto" initialMenuPreference="auto">
+          <PreferenceDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("preferences")).toHaveAttribute("data-preference", "auto");
+    });
+
+    it("provides themeMenuPreference via useThemeMenuPreference", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="dark">
+          <PreferenceDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("preferences")).toHaveAttribute("data-menu-preference", "dark");
+    });
+
+    it("provides thematic context with palette and setPalette", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThematicDisplay />
+        </RootThemeProvider>
+      );
+      const el = screen.getByTestId("thematic");
+      expect(el).toHaveAttribute("data-has-palette", "true");
+      expect(el).toHaveAttribute("data-has-setter", "true");
+    });
+  });
+
+  describe("base context for diff optimization", () => {
+    it("sets light base context in light mode", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeProvider theme={defaultLightTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with same light theme should have empty diff
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      // The innermost div (from nested ThemeProvider) should have no styles
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style).toBe("");
+    });
+
+    it("sets dark base context in dark mode", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeProvider theme={defaultDarkTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with same dark theme should have empty diff
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style).toBe("");
+    });
+
+    it("nested light ThemeProvider in dark RootThemeProvider produces diff", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeProvider theme={defaultLightTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with light theme should have diff (dark->light)
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("document element classes", () => {
+    it("adds dark-theme class in dark mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("dark-theme")).toBe(true);
+    });
+
+    it("does not add dark-theme class in light mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("dark-theme")).toBe(false);
+    });
+
+    it("adds light-theme-and-dark-menu class in light2 mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light2" initialPreference="light" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("light-theme-and-dark-menu")).toBe(true);
+    });
+
+    it("sets colorScheme to dark in dark mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.style.colorScheme).toBe("dark");
+    });
+
+    it("sets colorScheme to light in light mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.style.colorScheme).toBe("light");
+    });
+  });
+
+  describe("diff optimization integrity", () => {
+    it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
+      const lightStyles = createInlineTheme(defaultLightTheme, []);
+      const lightTheme = getThemeColors(null, "light", palette);
+      const actualStyles = createInlineTheme(lightTheme, []);
+
+      // Count expected diff (theme from getThemeColors vs defaultLightTheme)
+      let expectedDiffCount = 0;
+      for (const key in actualStyles) {
+        if (actualStyles[key] !== lightStyles[key]) {
+          expectedDiffCount++;
+        }
+      }
+
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <span>content</span>
+        </RootThemeProvider>
+      );
+
+      // Get the ThemeProvider's div style
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      if (divs.length > 0) {
+        const style = divs[0].getAttribute("style") || "";
+        const actualCount = style.split(";").filter((s) => s.includes(":")).length;
+        // Actual diff should match expected diff count (or be close)
+        expect(actualCount).toBeLessThanOrEqual(expectedDiffCount + 5);
+      }
+    });
+
+    it("deeply nested ThemeProviders accumulate correct diffs", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeProvider mode="dark">
+            <ThemeProvider mode="light">
+              <span data-testid="deepest">deep</span>
+            </ThemeProvider>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Each transition (light->dark, dark->light) should produce diffs
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      // Should have multiple styled divs (root's ThemeProvider + nested ones)
+      expect(divs.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe("setPalette", () => {
+    it("setPalette updates theme colors", () => {
+      let capturedSetPalette: (p: ThemePalette) => void = () => {};
+
+      function ThemeCapture() {
+        const {setPalette} = useThematic();
+        const theme = useTheme();
+        capturedSetPalette = setPalette;
+        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeCapture />
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+
+      // cardBg in light mode = white[0], so modify white scale
+      const newPalette = makeDefaultPalette();
+      newPalette.key = "test-palette"; // must change key - getThemeColors is memoized by key
+      newPalette.white = {...newPalette.white, 0: "oklch(0.9 0.05 200)"};
+
+      act(() => capturedSetPalette(newPalette));
+
+      const updatedCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+      expect(updatedCardBg).toBe("oklch(0.9 0.05 200)");
+      expect(updatedCardBg).not.toBe(initialCardBg);
+    });
+
+    it("nested ThemeProvider inherits updated palette", () => {
+      let capturedSetPalette: (p: ThemePalette) => void = () => {};
+
+      function PaletteControl() {
+        const {setPalette} = useThematic();
+        capturedSetPalette = setPalette;
+        return null;
+      }
+
+      function NestedTheme() {
+        const theme = useTheme();
+        return <div data-testid="nested" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteControl />
+          <ThemeProvider mode="light">
+            <NestedTheme />
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
+
+      const newPalette = makeDefaultPalette();
+      newPalette.key = "test-palette-2";
+      newPalette.white = {...newPalette.white, 0: "oklch(0.8 0.02 100)"};
+
+      act(() => capturedSetPalette(newPalette));
+
+      const updatedCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
+      expect(updatedCardBg).toBe("oklch(0.8 0.02 100)");
+      expect(updatedCardBg).not.toBe(initialCardBg);
+    });
+  });
+});

package/src/scale-generator.ts

@@ -0,0 +1,347 @@
+import {fromOKLCH} from "./color-utils";
+import type {ColorScale} from "./palette-generator";
+
+export type BasedScale12<T> = readonly [
+  base00: T,
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T
+];
+
+export type Scale12<T> = readonly [
+  step01: T,
+  step02: T,
+  step03: T,
+  step04: T,
+  step05: T,
+  step06: T,
+  step07: T,
+  step08: T,
+  step09: T,
+  step10: T,
+  step11: T,
+  step12: T
+];
+
+export interface ScaleCurves {
+  lightness: Scale12<number>; // 0-100 scale
+  chroma: Scale12<number>; // multipliers relative to peakChroma
+}
+
+export interface ScaleConfig {
+  hue: number;
+  chroma: number;
+  mode: "light" | "dark";
+  curves?: ScaleCurves;
+  /** Adjusts lightness contrast. >1 = more contrast, <1 = less. Default 1. */
+  contrast?: number;
+  /** Override step 0 (base) color. Defaults to white. */
+  base?: string;
+}
+
+// Based on indigo scale (default accent) from palette.ts
+export const DEFAULT_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.069, 98.983, 96.966, 95.012, 92.145, 88.367, 82.757, 76.14, 58.48, 54.173, 49.642, 26.071],
+  chroma: [0.018, 0.027, 0.08, 0.126, 0.19, 0.27, 0.384, 0.529, 0.934, 1.0, 0.878, 0.44],
+};
+
+export const DEFAULT_DARK_CURVES: ScaleCurves = {
+  lightness: [20.512, 22.974, 27.284, 29.742, 32.452, 35.981, 41.256, 47.972, 57.658, 62.928, 76.225, 95.899],
+  chroma: [0.119, 0.226, 0.357, 0.444, 0.475, 0.517, 0.72, 0.952, 1.0, 0.921, 0.601, 0.111],
+};
+
+// Curves extracted from current palette.ts
+const SLATE_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.241, 97.719, 96.955, 94.656, 93.115, 91.568, 89.235, 82.937, 69.959, 57.217, 48.318, 20.441],
+  chroma: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+};
+
+const SLATE_DARK_CURVES: ScaleCurves = {
+  lightness: [20.441, 22.667, 25.908, 28.012, 30.078, 32.109, 36.079, 43.714, 54.586, 59.818, 70.787, 94.656],
+  chroma: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+};
+
+const INDIGO_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.069, 98.983, 96.966, 95.012, 92.145, 88.367, 82.757, 76.14, 58.48, 54.173, 49.642, 26.071],
+  chroma: [0.018, 0.027, 0.08, 0.126, 0.19, 0.27, 0.384, 0.529, 0.934, 1.0, 0.878, 0.44],
+};
+
+const INDIGO_DARK_CURVES: ScaleCurves = {
+  lightness: [20.512, 22.974, 27.284, 29.742, 32.452, 35.981, 41.256, 47.972, 57.658, 62.928, 76.225, 95.899],
+  chroma: [0.119, 0.226, 0.357, 0.444, 0.475, 0.517, 0.72, 0.952, 1.0, 0.921, 0.601, 0.111],
+};
+
+const RED_LIGHT_CURVES: ScaleCurves = {
+  lightness: [98.9, 98.9, 96.6, 94.4, 91.4, 87.5, 81.8, 74.5, 62.5, 59.7, 55.7, 24.9],
+  chroma: [0.027, 0.027, 0.084, 0.138, 0.207, 0.289, 0.403, 0.562, 0.975, 0.985, 1.0, 0.307],
+};
+
+const RED_DARK_CURVES: ScaleCurves = {
+  lightness: [20.6, 22.2, 25.9, 28.7, 31.5, 35.2, 40.8, 48.1, 62.5, 66.2, 70.5, 95.7],
+  chroma: [0.101, 0.178, 0.288, 0.369, 0.441, 0.54, 0.687, 0.872, 1.0, 0.992, 0.967, 0.104],
+};
+
+const TEAL_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.4, 98.4, 96.7, 94.3, 91.2, 86.8, 80.5, 71.8, 65, 61.7, 51.8, 29],
+  chroma: [0.03, 0.094, 0.174, 0.255, 0.337, 0.449, 0.6, 0.859, 1.0, 0.953, 0.799, 0.353],
+};
+
+const TEAL_DARK_CURVES: ScaleCurves = {
+  lightness: [18.9, 22, 25.2, 28.4, 31.6, 34.7, 40.7, 48.5, 65, 68.8, 74.4, 96.5],
+  chroma: [0.163, 0.269, 0.31, 0.354, 0.4, 0.44, 0.528, 0.636, 0.864, 0.913, 1.0, 0.215],
+};
+
+const YELLOW_LIGHT_CURVES: ScaleCurves = {
+  lightness: [99.15, 98.666, 98.103, 97.119, 95.34, 92.061, 86.841, 81.273, 88.224, 85.516, 54.771, 28.162],
+  chroma: [0.04, 0.16, 0.299, 0.419, 0.539, 0.621, 0.692, 0.911, 1.0, 0.962, 0.624, 0.231],
+};
+
+const YELLOW_DARK_CURVES: ScaleCurves = {
+  lightness: [18.975, 22.715, 25.994, 27.672, 31.467, 35.323, 40.577, 48.421, 88.224, 93.814, 82.593, 97.801],
+  chroma: [0.213, 0.255, 0.291, 0.31, 0.353, 0.398, 0.444, 0.546, 1.0, 0.898, 0.926, 0.289],
+};
+
+// ============ PRESET CONFIGS ============
+export const SCALE_PRESETS = {
+  slate: {
+    hue: 0,
+    chroma: 0,
+    lightCurves: SLATE_LIGHT_CURVES,
+    darkCurves: SLATE_DARK_CURVES,
+  },
+  indigo: {
+    hue: 264,
+    chroma: 0.1618, // peak chroma at step 10 light
+    lightCurves: INDIGO_LIGHT_CURVES,
+    darkCurves: INDIGO_DARK_CURVES,
+  },
+  red: {
+    hue: 19,
+    chroma: 0.1978, // peak chroma at step 11 light
+    lightCurves: RED_LIGHT_CURVES,
+    darkCurves: RED_DARK_CURVES,
+  },
+  teal: {
+    hue: 183,
+    chroma: 0.1137, // peak chroma at step 9 light
+    lightCurves: TEAL_LIGHT_CURVES,
+    darkCurves: TEAL_DARK_CURVES,
+  },
+  yellow: {
+    hue: 100, // OKLCH yellow hue
+    chroma: 0.19, // peak chroma at step 9 light
+    lightCurves: YELLOW_LIGHT_CURVES,
+    darkCurves: YELLOW_DARK_CURVES,
+  },
+} as const;
+
+/**
+ * Generate a 12-step color scale from hue + peak chroma.
+ * Returns ColorScale (13 elements: base + 12 steps)
+ */
+function applyContrast(L: number, contrast: number): number {
+  // Scale lightness away from midpoint (50)
+  const adjusted = 50 + (L - 50) * contrast;
+  return Math.max(0, Math.min(100, adjusted));
+}
+
+export function generateColorScale(config: ScaleConfig): ColorScale {
+  const {hue, chroma, mode, curves, contrast = 1, base = "hsl(0, 0%, 100%)"} = config;
+
+  const defaultCurves = mode === "light" ? DEFAULT_LIGHT_CURVES : DEFAULT_DARK_CURVES;
+  const {lightness, chroma: chromaCurve} = curves ?? defaultCurves;
+
+  const steps = lightness.map((L, i) => {
+    const adjustedL = applyContrast(L, contrast);
+    const C = chroma * chromaCurve[i];
+    return fromOKLCH(adjustedL / 100, C, hue);
+  });
+
+  return [base, ...steps] as unknown as ColorScale;
+}
+
+/**
+ * Generate a scale using a named preset
+ */
+export function generatePresetScale(name: keyof typeof SCALE_PRESETS, mode: "light" | "dark"): ColorScale {
+  const preset = SCALE_PRESETS[name];
+  const curves = "lightCurves" in preset ? (mode === "light" ? preset.lightCurves : preset.darkCurves) : undefined;
+  return generateColorScale({
+    hue: preset.hue,
+    chroma: preset.chroma,
+    mode,
+    curves,
+  });
+}
+
+const GRAY_CURVES: ScaleCurves = {
+  // Based on slate (default base) from palette.ts
+  lightness: SLATE_LIGHT_CURVES.lightness,
+  chroma: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+};
+
+const GRAY_DARK_CURVES: ScaleCurves = {
+  lightness: SLATE_DARK_CURVES.lightness,
+  chroma: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+};
+
+/**
+ * Generate a gray scale with optional subtle hue tint
+ */
+export function generateGrayScale(config: {
+  hue?: number;
+  chroma?: number;
+  mode: "light" | "dark";
+  contrast?: number;
+  base?: string;
+}): ColorScale {
+  const {hue = 0, chroma = 0, mode, contrast, base} = config;
+  const curves = mode === "light" ? GRAY_CURVES : GRAY_DARK_CURVES;
+  const defaultBase = mode === "dark" ? "hsl(0, 0%, 5%)" : undefined;
+  return generateColorScale({hue, chroma, mode, contrast, curves, base: base ?? defaultBase});
+}
+
+// ============ HUE INTERPOLATION ============
+
+interface HueReference {
+  hue: number;
+  chroma: number;
+  lightCurves: ScaleCurves;
+  darkCurves: ScaleCurves;
+}
+
+// Reference scales sorted by hue for interpolation
+const HUE_REFERENCES: HueReference[] = [
+  {hue: 19, chroma: 0.1978, lightCurves: RED_LIGHT_CURVES, darkCurves: RED_DARK_CURVES},
+  {hue: 183, chroma: 0.1137, lightCurves: TEAL_LIGHT_CURVES, darkCurves: TEAL_DARK_CURVES},
+  {hue: 264, chroma: 0.1618, lightCurves: INDIGO_LIGHT_CURVES, darkCurves: INDIGO_DARK_CURVES},
+].sort((a, b) => a.hue - b.hue);
+
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+function lerpArray<T extends readonly number[]>(a: T, b: T, t: number): {[K in keyof T]: number} {
+  return a.map((v, i) => lerp(v, b[i], t)) as {[K in keyof T]: number};
+}
+
+function normalizeHue(h: number): number {
+  return ((h % 360) + 360) % 360;
+}
+
+/**
+ * Find bracketing references and interpolation factor for a target hue
+ */
+function findHueBracket(targetHue: number): {before: HueReference; after: HueReference; t: number} {
+  const h = normalizeHue(targetHue);
+  const refs = HUE_REFERENCES;
+
+  // Find which two references bracket the target hue
+  let beforeIdx = refs.length - 1;
+  let afterIdx = 0;
+
+  for (let i = 0; i < refs.length; i++) {
+    if (refs[i].hue <= h) {
+      beforeIdx = i;
+      afterIdx = (i + 1) % refs.length;
+    }
+  }
+
+  const before = refs[beforeIdx];
+  const after = refs[afterIdx];
+
+  // Calculate interpolation factor
+  const beforeHue = before.hue;
+  let afterHue = after.hue;
+
+  // Handle wrap-around (e.g., from indigo 264 to red 19)
+  if (afterHue <= beforeHue) {
+    afterHue += 360;
+  }
+
+  let targetH = h;
+  if (targetH < beforeHue) {
+    targetH += 360;
+  }
+
+  const range = afterHue - beforeHue;
+  const t = range > 0 ? (targetH - beforeHue) / range : 0;
+
+  return {before, after, t: Math.max(0, Math.min(1, t))};
+}
+
+/**
+ * Interpolate curves between two references
+ */
+function interpolateCurves(before: ScaleCurves, after: ScaleCurves, t: number): ScaleCurves {
+  return {
+    lightness: lerpArray(before.lightness, after.lightness, t),
+    chroma: lerpArray(before.chroma, after.chroma, t),
+  };
+}
+
+export interface InterpolatedScaleConfig {
+  /** Target hue (0-360). Curves are interpolated from nearby reference scales. */
+  hue: number;
+  /** Optional chroma override. If not provided, interpolated from references. */
+  chroma?: number;
+  /** Light or dark mode */
+  mode: "light" | "dark";
+}
+
+/**
+ * Generate a scale for any hue by interpolating curves from reference scales.
+ * This produces smooth, natural-looking palettes for any color.
+ */
+export function generateInterpolatedScale(config: InterpolatedScaleConfig): ColorScale {
+  const {hue, chroma: chromaOverride, mode} = config;
+
+  const {before, after, t} = findHueBracket(hue);
+
+  // Interpolate curves
+  const beforeCurves = mode === "light" ? before.lightCurves : before.darkCurves;
+  const afterCurves = mode === "light" ? after.lightCurves : after.darkCurves;
+  const curves = interpolateCurves(beforeCurves, afterCurves, t);
+
+  // Interpolate chroma if not overridden
+  const chroma = chromaOverride ?? lerp(before.chroma, after.chroma, t);
+
+  return generateColorScale({hue, chroma, mode, curves});
+}
+
+export function paletteFromHue(hue: number, mode: "light" | "dark"): ColorScale {
+  return generateInterpolatedScale({hue, mode});
+}
+
+export function paletteFromHueBoth(hue: number): {light: ColorScale; dark: ColorScale} {
+  return {
+    light: generateInterpolatedScale({hue, mode: "light"}),
+    dark: generateInterpolatedScale({hue, mode: "dark"}),
+  };
+}
+
+const WHITE_ALPHAS: BasedScale12<number> = [1, 0, 0.01, 0.03, 0.06, 0.09, 0.12, 0.18, 0.25, 0.39, 0.45, 0.59, 0.92];
+const BLACK_ALPHAS: BasedScale12<number> = [1, 0.01, 0.03, 0.05, 0.07, 0.09, 0.11, 0.14, 0.22, 0.44, 0.48, 0.57, 0.91];
+
+function alphaScale(L: number, C: number, H: number, alphas: BasedScale12<number>): ColorScale {
+  return alphas.map((a) => fromOKLCH(L, C, H, a)) as {length: 13; [i: number]: string} as ColorScale;
+}
+
+export function generateWhiteScale(hue: number, chroma: number, luminosity = 1, chromaMul = 1): ColorScale {
+  const c = chroma * 0.1 * chromaMul;
+  return alphaScale((1 - chroma * 0.1) * luminosity, c, hue, WHITE_ALPHAS);
+}
+
+export function generateBlackScale(hue: number, chroma: number, luminosity = 1, chromaMul = 1): ColorScale {
+  const c = chroma * 0.1 * chromaMul;
+  return alphaScale(chroma * 0.1 * 4 * luminosity, c, hue, BLACK_ALPHAS);
+}