@clhaas/palette-kit 0.1.0 → 0.1.2

package/src/engine/oklch.ts

@@ -1,53 +0,0 @@
-import Color from "colorjs.io";
-
-import type { ColorHex, ColorP3, OklchColor } from "../types.js";
-
-export function hexToOklch(hex: ColorHex): OklchColor {
-  const color = new Color(hex).to("oklch");
-  const [l, c, h] = color.coords;
-  return { l: l ?? 0, c: c ?? 0, h: h ?? 0 };
-}
-
-export function oklchToHex(oklch: OklchColor): ColorHex {
-  const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-  return color.to("srgb").toString({ format: "hex" }) as ColorHex;
-}
-
-export function inSrgbGamut(oklch: OklchColor): boolean {
-  const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-  return color.inGamut("srgb");
-}
-
-export function compressToSrgb(oklch: OklchColor): OklchColor {
-  let current = { ...oklch };
-  let iterations = 0;
-
-  while (!inSrgbGamut(current) && current.c > 0 && iterations < 40) {
-    current = { ...current, c: current.c * 0.95 };
-    iterations += 1;
-  }
-
-  return current;
-}
-
-export function inP3Gamut(oklch: OklchColor): boolean {
-  const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-  return color.inGamut("p3");
-}
-
-export function compressToP3(oklch: OklchColor): OklchColor {
-  let current = { ...oklch };
-  let iterations = 0;
-
-  while (!inP3Gamut(current) && current.c > 0 && iterations < 40) {
-    current = { ...current, c: current.c * 0.95 };
-    iterations += 1;
-  }
-
-  return current;
-}
-
-export function oklchToP3(oklch: OklchColor): ColorP3 {
-  const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-  return color.to("p3").toString({ format: "color" }) as ColorP3;
-}

package/src/engine/templates.ts

@@ -1,58 +0,0 @@
-import type { OklchColor, Step, TemplateId } from "../types.js";
-
-const steps: Step[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-const lightnessLight = [0.99, 0.975, 0.95, 0.92, 0.89, 0.84, 0.77, 0.68, 0.58, 0.5, 0.4, 0.3];
-const lightnessDark = [0.12, 0.14, 0.18, 0.22, 0.26, 0.32, 0.4, 0.48, 0.58, 0.66, 0.76, 0.86];
-
-const chromaNeutral = [
-  0.01, 0.012, 0.016, 0.02, 0.024, 0.03, 0.04, 0.05, 0.055, 0.045, 0.035, 0.028,
-];
-const chromaWarm = [0.02, 0.03, 0.05, 0.08, 0.12, 0.16, 0.18, 0.2, 0.22, 0.19, 0.12, 0.08];
-const chromaCool = [0.02, 0.03, 0.05, 0.075, 0.1, 0.14, 0.17, 0.19, 0.21, 0.18, 0.11, 0.08];
-
-const baseHue: Record<TemplateId, number> = {
-  neutral: 250,
-  warm: 40,
-  cool: 220,
-};
-
-function buildTemplate(
-  lightness: number[],
-  chroma: number[],
-  hue: number,
-): Record<Step, OklchColor> {
-  const output = {} as Record<Step, OklchColor>;
-  for (let i = 0; i < steps.length; i += 1) {
-    const step = steps[i];
-    output[step] = {
-      l: lightness[i],
-      c: chroma[i],
-      h: hue,
-    };
-  }
-  return output;
-}
-
-export const templates = {
-  light: {
-    neutral: buildTemplate(lightnessLight, chromaNeutral, baseHue.neutral),
-    warm: buildTemplate(lightnessLight, chromaWarm, baseHue.warm),
-    cool: buildTemplate(lightnessLight, chromaCool, baseHue.cool),
-  },
-  dark: {
-    neutral: buildTemplate(lightnessDark, chromaNeutral, baseHue.neutral),
-    warm: buildTemplate(lightnessDark, chromaWarm, baseHue.warm),
-    cool: buildTemplate(lightnessDark, chromaCool, baseHue.cool),
-  },
-};
-
-export function selectTemplateId(oklch: OklchColor): TemplateId {
-  if (oklch.c < 0.05) {
-    return "neutral";
-  }
-
-  const hue = ((oklch.h % 360) + 360) % 360;
-  const isWarm = hue <= 60 || hue >= 330;
-  return isWarm ? "warm" : "cool";
-}

package/src/exporters/selectColorMode.ts

@@ -1,25 +0,0 @@
-import type { Theme, ThemeColorMode } from "../types.js";
-
-export function selectThemeColorMode(theme: Theme, mode: "srgb" | "p3"): ThemeColorMode {
-  if (mode === "srgb") {
-    return theme;
-  }
-
-  const scales = Object.fromEntries(
-    Object.entries(theme.scales).map(([slot, scale]) => {
-      if (!scale.p3) {
-        return [slot, scale];
-      }
-      return [
-        slot,
-        {
-          ...scale,
-          light: scale.p3.light,
-          dark: scale.p3.dark,
-        },
-      ];
-    }),
-  );
-
-  return { ...theme, scales };
-}

package/src/exporters/toCssVars.ts

@@ -1,116 +0,0 @@
-import Color from "colorjs.io";
-
-import type { ColorHex, Step, Theme } from "../types.js";
-
-type CssVarsOptions = {
-  prefix?: string;
-  includeTokens?: boolean;
-  includeScales?: boolean;
-  includeAlpha?: boolean;
-  includeP3?: boolean;
-  lightSelector?: string;
-  darkSelector?: string;
-};
-
-function tokenToCssVar(token: string, prefix: string): string {
-  const normalized = token.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-  const dashed = normalized.replace(/\./g, "-");
-  return `--${prefix}-${dashed}`;
-}
-
-function scaleToCssVar(slot: string, step: Step, prefix: string): string {
-  return `--${prefix}-scale-${slot}-${step}`;
-}
-
-function alphaToCssVar(step: Step, prefix: string): string {
-  return `--${prefix}-alpha-${step}`;
-}
-
-function hexToP3(value: ColorHex): string {
-  return new Color(value).to("p3").toString({ format: "color" });
-}
-
-export function toCssVars(theme: Theme, options?: CssVarsOptions): string {
-  const prefix = options?.prefix ?? "pk";
-  const includeTokens = options?.includeTokens ?? true;
-  const includeScales = options?.includeScales ?? true;
-  const includeAlpha = options?.includeAlpha ?? true;
-  const includeP3 = options?.includeP3 ?? false;
-  const lightSelector = options?.lightSelector ?? ":root";
-  const darkSelector = options?.darkSelector ?? ".dark";
-
-  const lines: string[] = [];
-  const hasP3 = Object.values(theme.scales).some((scale) => scale.p3);
-
-  function emitSelector(selector: string, mode: "light" | "dark") {
-    lines.push(`${selector} {`);
-
-    if (includeTokens) {
-      for (const [token, value] of Object.entries(theme.tokens[mode])) {
-        lines.push(`  ${tokenToCssVar(token, prefix)}: ${value};`);
-      }
-    }
-
-    if (includeScales) {
-      for (const [slot, scale] of Object.entries(theme.scales)) {
-        for (const [step, value] of Object.entries(scale[mode])) {
-          lines.push(`  ${scaleToCssVar(slot, Number(step) as Step, prefix)}: ${value};`);
-        }
-      }
-    }
-
-    if (includeAlpha && theme.alpha) {
-      for (const [step, value] of Object.entries(theme.alpha[mode])) {
-        lines.push(`  ${alphaToCssVar(Number(step) as Step, prefix)}: ${value};`);
-      }
-    }
-
-    lines.push("}");
-  }
-
-  emitSelector(lightSelector, "light");
-  lines.push("");
-  emitSelector(darkSelector, "dark");
-
-  if (includeP3 && hasP3) {
-    lines.push("");
-    lines.push("@supports (color: color(display-p3 1 1 1)) {");
-
-    function emitP3Selector(selector: string, mode: "light" | "dark") {
-      lines.push(`  ${selector} {`);
-
-      if (includeTokens) {
-        for (const [token, value] of Object.entries(theme.tokens[mode])) {
-          lines.push(`    ${tokenToCssVar(token, prefix)}: ${hexToP3(value)};`);
-        }
-      }
-
-      if (includeScales) {
-        for (const [slot, scale] of Object.entries(theme.scales)) {
-          const p3Scale = scale.p3?.[mode];
-          if (!p3Scale) {
-            continue;
-          }
-          for (const [step, value] of Object.entries(p3Scale)) {
-            lines.push(`    ${scaleToCssVar(slot, Number(step) as Step, prefix)}: ${value};`);
-          }
-        }
-      }
-
-      if (includeAlpha && theme.alpha) {
-        for (const [step, value] of Object.entries(theme.alpha[mode])) {
-          lines.push(`    ${alphaToCssVar(Number(step) as Step, prefix)}: ${hexToP3(value)};`);
-        }
-      }
-
-      lines.push("  }");
-    }
-
-    emitP3Selector(lightSelector, "light");
-    lines.push("");
-    emitP3Selector(darkSelector, "dark");
-    lines.push("}");
-  }
-
-  return lines.join("\n");
-}

package/src/exporters/toJson.ts

@@ -1,31 +0,0 @@
-import type { Theme, ThemeColorMode } from "../types.js";
-
-export function toJson(theme: Theme): string {
-  return JSON.stringify(theme, null, 2);
-}
-
-export function toJsonWithMode(theme: Theme, mode: "srgb" | "p3"): string {
-  if (mode === "p3") {
-    return JSON.stringify(toP3Theme(theme), null, 2);
-  }
-  return JSON.stringify(theme, null, 2);
-}
-
-function toP3Theme(theme: Theme): ThemeColorMode {
-  const scales = Object.fromEntries(
-    Object.entries(theme.scales).map(([slot, scale]) => {
-      if (!scale.p3) {
-        return [slot, scale];
-      }
-      return [
-        slot,
-        {
-          ...scale,
-          light: scale.p3.light,
-          dark: scale.p3.dark,
-        },
-      ];
-    }),
-  );
-  return { ...theme, scales };
-}

package/src/exporters/toReactNative.ts

@@ -1,39 +0,0 @@
-import type { Theme } from "../types.js";
-
-type ReactNativeOptions = {
-  includeTokens?: boolean;
-  includeScales?: boolean;
-  includeAlpha?: boolean;
-  includeP3?: boolean;
-};
-
-export function toReactNative(theme: Theme, options?: ReactNativeOptions) {
-  const includeTokens = options?.includeTokens ?? true;
-  const includeScales = options?.includeScales ?? true;
-  const includeAlpha = options?.includeAlpha ?? true;
-  const includeP3 = options?.includeP3 ?? false;
-
-  function buildMode(mode: "light" | "dark") {
-    const scales = includeScales
-      ? Object.fromEntries(Object.entries(theme.scales).map(([slot, scale]) => [slot, scale[mode]]))
-      : {};
-    const p3 = includeP3
-      ? Object.fromEntries(
-          Object.entries(theme.scales)
-            .filter(([, scale]) => scale.p3?.[mode])
-            .map(([slot, scale]) => [slot, scale.p3?.[mode]]),
-        )
-      : undefined;
-    return {
-      tokens: includeTokens ? theme.tokens[mode] : {},
-      scales,
-      alpha: includeAlpha ? theme.alpha?.[mode] : undefined,
-      p3,
-    };
-  }
-
-  return {
-    light: buildMode("light"),
-    dark: buildMode("dark"),
-  };
-}

package/src/exporters/toTailwind.ts

@@ -1,110 +0,0 @@
-import type { Theme } from "../types.js";
-
-type TailwindOptions = {
-  mode?: "light" | "dark" | "both";
-  includeTokens?: boolean;
-  includeScales?: boolean;
-  includeAlpha?: boolean;
-  includeP3?: boolean;
-};
-
-function setNested(target: Record<string, unknown>, path: string[], value: unknown) {
-  let cursor = target;
-  for (let i = 0; i < path.length - 1; i += 1) {
-    const key = path[i];
-    if (!cursor[key] || typeof cursor[key] !== "object") {
-      cursor[key] = {};
-    }
-    cursor = cursor[key] as Record<string, unknown>;
-  }
-  cursor[path[path.length - 1]] = value;
-}
-
-function tokensToNested(tokens: Record<string, string>): Record<string, unknown> {
-  const output: Record<string, unknown> = {};
-  for (const [token, value] of Object.entries(tokens)) {
-    setNested(output, token.split("."), value);
-  }
-  return output;
-}
-
-function scalesToNested(scales: Theme["scales"], mode: "light" | "dark", useP3?: boolean) {
-  const output: Record<string, unknown> = {};
-  for (const [slot, scale] of Object.entries(scales)) {
-    const source = useP3 ? scale.p3?.[mode] : scale[mode];
-    if (!source) {
-      continue;
-    }
-    const stepMap: Record<string, string> = {};
-    for (const [step, value] of Object.entries(source)) {
-      stepMap[String(step)] = value;
-    }
-    output[slot] = stepMap;
-  }
-  return output;
-}
-
-function alphaToNested(alpha: Theme["alpha"], mode: "light" | "dark") {
-  if (!alpha) {
-    return undefined;
-  }
-  const output: Record<string, string> = {};
-  for (const [step, value] of Object.entries(alpha[mode])) {
-    output[String(step)] = value;
-  }
-  return output;
-}
-
-export function toTailwind(theme: Theme, options?: TailwindOptions) {
-  const mode = options?.mode ?? "both";
-  const includeTokens = options?.includeTokens ?? true;
-  const includeScales = options?.includeScales ?? false;
-  const includeAlpha = options?.includeAlpha ?? false;
-  const includeP3 = options?.includeP3 ?? false;
-
-  function buildModeTokens(modeKey: "light" | "dark", useP3?: boolean) {
-    const colors: Record<string, unknown> = {};
-
-    if (includeTokens) {
-      colors.tokens = tokensToNested(theme.tokens[modeKey]);
-    }
-    if (includeScales) {
-      colors.scale = scalesToNested(theme.scales, modeKey, useP3);
-    }
-    if (includeAlpha && theme.alpha) {
-      colors.alpha = alphaToNested(theme.alpha, modeKey);
-    }
-
-    return colors;
-  }
-
-  const colors: Record<string, unknown> = {};
-  if (mode === "light" || mode === "both") {
-    colors.light = buildModeTokens("light");
-  }
-  if (mode === "dark" || mode === "both") {
-    colors.dark = buildModeTokens("dark");
-  }
-
-  if (includeP3) {
-    const hasP3 = Object.values(theme.scales).some((scale) => scale.p3);
-    if (hasP3) {
-      const p3: Record<string, unknown> = {};
-      if (mode === "light" || mode === "both") {
-        p3.light = buildModeTokens("light", true);
-      }
-      if (mode === "dark" || mode === "both") {
-        p3.dark = buildModeTokens("dark", true);
-      }
-      colors.p3 = p3;
-    }
-  }
-
-  return {
-    theme: {
-      extend: {
-        colors,
-      },
-    },
-  };
-}

package/src/exporters/toTs.ts

@@ -1,34 +0,0 @@
-import type { Theme, ThemeColorMode } from "../types.js";
-
-export function toTs(theme: Theme): string {
-  const serialized = JSON.stringify(theme, null, 2);
-  return `export const theme = ${serialized} as const;\n`;
-}
-
-export function toTsWithMode(theme: Theme, mode: "srgb" | "p3"): string {
-  if (mode === "p3") {
-    const serialized = JSON.stringify(toP3Theme(theme), null, 2);
-    return `export const theme = ${serialized} as const;\n`;
-  }
-  const serialized = JSON.stringify(theme, null, 2);
-  return `export const theme = ${serialized} as const;\n`;
-}
-
-function toP3Theme(theme: Theme): ThemeColorMode {
-  const scales = Object.fromEntries(
-    Object.entries(theme.scales).map(([slot, scale]) => {
-      if (!scale.p3) {
-        return [slot, scale];
-      }
-      return [
-        slot,
-        {
-          ...scale,
-          light: scale.p3.light,
-          dark: scale.p3.dark,
-        },
-      ];
-    }),
-  );
-  return { ...theme, scales };
-}

package/src/generateScale.ts

@@ -1,163 +0,0 @@
-import { radixSeeds } from "./data/radixSeeds.js";
-import { type CurveConfig, resolveCurves } from "./engine/curves.js";
-import {
-  compressToP3,
-  compressToSrgb,
-  hexToOklch,
-  inP3Gamut,
-  inSrgbGamut,
-  oklchToHex,
-  oklchToP3,
-} from "./engine/oklch.js";
-import { selectTemplateId, templates } from "./engine/templates.js";
-import type { ColorHex, ColorP3, ColorSource, Scale, Step, TemplateId } from "./types.js";
-
-const steps: Step[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-type GenerateScaleOptions = {
-  source: ColorSource;
-  mode?: "light" | "dark" | "both";
-  anchorStep?: Step;
-  template?: "auto" | TemplateId;
-  curves?: CurveConfig;
-  gamut?: { strategy: "compress" | "clip" };
-  p3?: boolean;
-};
-
-function getSeedHex(source: ColorSource): ColorHex {
-  if (source.source === "seed") {
-    return source.value;
-  }
-
-  const seed = radixSeeds[source.name];
-  if (!seed) {
-    throw new Error(`Unknown Radix seed: ${source.name}`);
-  }
-  return seed;
-}
-
-function normalizeHue(hue: number): number {
-  const normalized = ((hue % 360) + 360) % 360;
-  return normalized;
-}
-
-function buildScaleForMode(
-  seedHex: ColorHex,
-  templateId: TemplateId,
-  anchorStep: Step,
-  curves?: CurveConfig,
-  gamutStrategy: "compress" | "clip" = "compress",
-  mode: "light" | "dark" = "light",
-  includeP3 = false,
-): {
-  scale: Record<Step, ColorHex>;
-  p3?: Record<Step, ColorP3>;
-  outOfGamutCount: number;
-  outOfP3GamutCount: number;
-} {
-  const seedOklch = hexToOklch(seedHex);
-  const template = templates[mode][templateId];
-  const anchor = template[anchorStep];
-  const dL = seedOklch.l - anchor.l;
-  const dC = seedOklch.c - anchor.c;
-  const dH = seedOklch.h - anchor.h;
-  const curveSet = resolveCurves(curves);
-
-  const output = {} as Record<Step, ColorHex>;
-  const p3Output = includeP3 ? ({} as Record<Step, ColorP3>) : undefined;
-  let outOfGamutCount = 0;
-  let outOfP3GamutCount = 0;
-
-  for (const step of steps) {
-    const base = template[step];
-    const l = base.l + dL * curveSet.lightness[step];
-    const c = Math.max(0, base.c + dC * curveSet.chroma[step]);
-    const h = normalizeHue(base.h + dH);
-    const candidate = { l, c, h };
-    let current = candidate;
-
-    if (!inSrgbGamut(current)) {
-      outOfGamutCount += 1;
-      if (gamutStrategy === "compress") {
-        current = compressToSrgb(current);
-      }
-    }
-
-    output[step] = oklchToHex(current);
-
-    if (p3Output) {
-      let p3Current = candidate;
-      if (!inP3Gamut(p3Current)) {
-        outOfP3GamutCount += 1;
-        p3Current = compressToP3(p3Current);
-      }
-      p3Output[step] = oklchToP3(p3Current);
-    }
-  }
-
-  return {
-    scale: output,
-    p3: p3Output,
-    outOfGamutCount,
-    outOfP3GamutCount,
-  };
-}
-
-export function generateScale(options: GenerateScaleOptions): Scale {
-  const seedHex = getSeedHex(options.source);
-  const anchorStep = options.anchorStep ?? 9;
-  const mode = options.mode ?? "both";
-  const templateId =
-    options.template === "auto" || !options.template
-      ? selectTemplateId(hexToOklch(seedHex))
-      : options.template;
-  const gamutStrategy = options.gamut?.strategy ?? "compress";
-
-  const lightResult = buildScaleForMode(
-    seedHex,
-    templateId,
-    anchorStep,
-    options.curves,
-    gamutStrategy,
-    "light",
-    options.p3 ?? false,
-  );
-
-  const darkResult = buildScaleForMode(
-    seedHex,
-    templateId,
-    anchorStep,
-    options.curves,
-    gamutStrategy,
-    "dark",
-    options.p3 ?? false,
-  );
-
-  const scale: Scale = {
-    light: lightResult.scale,
-    dark: darkResult.scale,
-    p3:
-      lightResult.p3 && darkResult.p3 ? { light: lightResult.p3, dark: darkResult.p3 } : undefined,
-    meta: {
-      outOfGamutCount: lightResult.outOfGamutCount + darkResult.outOfGamutCount,
-      outOfP3GamutCount: lightResult.outOfP3GamutCount + darkResult.outOfP3GamutCount,
-    },
-  };
-
-  if (mode === "light") {
-    return {
-      ...scale,
-      dark: scale.light,
-      p3: scale.p3 ? { light: scale.p3.light, dark: scale.p3.light } : undefined,
-    };
-  }
-  if (mode === "dark") {
-    return {
-      ...scale,
-      light: scale.dark,
-      p3: scale.p3 ? { light: scale.p3.dark, dark: scale.p3.dark } : undefined,
-    };
-  }
-
-  return scale;
-}