@clhaas/palette-kit 0.1.0 → 0.1.1

package/src/contrast/onSolid.ts

@@ -1,38 +0,0 @@
-import type { ColorHex } from "../types.js";
-import { apcaContrast } from "./apca.js";
-
-const white: ColorHex = "#ffffff";
-const black: ColorHex = "#000000";
-
-const alphaLevels = {
-  primary: 0.92,
-  secondary: 0.72,
-  disabled: 0.48,
-};
-
-function withAlpha(hex: ColorHex, alpha: number): ColorHex {
-  const normalized = hex.replace("#", "");
-  const alphaHex = Math.round(alpha * 255)
-    .toString(16)
-    .padStart(2, "0");
-  return `#${normalized}${alphaHex}` as ColorHex;
-}
-
-function chooseTextColor(background: ColorHex): ColorHex {
-  const whiteScore = Math.abs(apcaContrast(white, background));
-  const blackScore = Math.abs(apcaContrast(black, background));
-  return whiteScore >= blackScore ? white : black;
-}
-
-export function onSolidTextTokens(background: ColorHex): {
-  primary: ColorHex;
-  secondary: ColorHex;
-  disabled: ColorHex;
-} {
-  const base = chooseTextColor(background);
-  return {
-    primary: withAlpha(base, alphaLevels.primary),
-    secondary: withAlpha(base, alphaLevels.secondary),
-    disabled: withAlpha(base, alphaLevels.disabled),
-  };
-}

package/src/contrast/solveText.ts

@@ -1,49 +0,0 @@
-import Color from "colorjs.io";
-import { compressToSrgb, oklchToHex } from "../engine/oklch.js";
-import type { ColorHex, OklchColor } from "../types.js";
-import { apcaContrast } from "./apca.js";
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
-
-function adjustLightness(
-  oklch: OklchColor,
-  background: ColorHex,
-  target: number,
-  maxIterations = 24,
-): OklchColor {
-  const bg = new Color(background).to("oklch");
-  const bgL = bg.coords[0] ?? 0;
-  const direction = bgL > 0.5 ? -1 : 1;
-  let current = { ...oklch };
-
-  for (let i = 0; i < maxIterations; i += 1) {
-    const contrast = Math.abs(apcaContrast(oklchToHex(current), background));
-    if (contrast >= target) {
-      return current;
-    }
-
-    current = {
-      ...current,
-      l: clamp(current.l + direction * 0.02, 0, 1),
-    };
-  }
-
-  return current;
-}
-
-export function adjustTextColor(
-  foreground: ColorHex,
-  background: ColorHex,
-  target: number,
-): ColorHex {
-  const fg = new Color(foreground).to("oklch");
-  const [l, c, h] = fg.coords;
-  let candidate: OklchColor = { l: l ?? 0, c: c ?? 0, h: h ?? 0 };
-
-  candidate = adjustLightness(candidate, background, target);
-  candidate = compressToSrgb(candidate);
-
-  return oklchToHex(candidate);
-}

package/src/createTheme.ts

@@ -1,130 +0,0 @@
-import { generateAlphaScale } from "./alpha/generateAlphaScale.js";
-import { onSolidTextTokens } from "./contrast/onSolid.js";
-import { adjustTextColor } from "./contrast/solveText.js";
-import { analyzeTheme } from "./diagnostics/analyzeTheme.js";
-import { generateScale } from "./generateScale.js";
-import { buildPresetTokens } from "./tokens/presetRadixLikeUi.js";
-import type { AlphaScale, ColorHex, ColorSource, Scale, Theme } from "./types.js";
-
-export type TokenOverrides = {
-  light?: Record<string, ColorHex>;
-  dark?: Record<string, ColorHex>;
-};
-
-export type CreateThemeOptions = {
-  neutral: ColorSource;
-  accent: ColorSource;
-  semantic?: {
-    success?: ColorSource;
-    warning?: ColorSource;
-    danger?: ColorSource;
-  };
-  extras?: Record<string, ColorSource>;
-  tokens?: { preset?: "radix-like-ui"; overrides?: TokenOverrides };
-  alpha?: {
-    enabled?: boolean;
-    background?: { light?: ColorHex; dark?: ColorHex };
-  };
-  contrast?: {
-    textPrimary?: number;
-    textSecondary?: number;
-  };
-  p3?: boolean;
-};
-
-export function createTheme(options: CreateThemeOptions): Theme {
-  const includeP3 = options.p3 ?? false;
-  const scales: Record<string, Scale> = {
-    neutral: generateScale({ source: options.neutral, p3: includeP3 }),
-    accent: generateScale({ source: options.accent, p3: includeP3 }),
-  };
-
-  if (options.semantic?.success) {
-    scales.success = generateScale({ source: options.semantic.success, p3: includeP3 });
-  }
-  if (options.semantic?.warning) {
-    scales.warning = generateScale({ source: options.semantic.warning, p3: includeP3 });
-  }
-  if (options.semantic?.danger) {
-    scales.danger = generateScale({ source: options.semantic.danger, p3: includeP3 });
-  }
-
-  if (options.extras) {
-    for (const [key, source] of Object.entries(options.extras)) {
-      scales[key] = generateScale({ source, p3: includeP3 });
-    }
-  }
-
-  const preset = options.tokens?.preset ?? "radix-like-ui";
-  const tokens = preset === "radix-like-ui" ? buildPresetTokens(scales) : { light: {}, dark: {} };
-
-  const lightBg = tokens.light["bg.app"];
-  const darkBg = tokens.dark["bg.app"];
-  const textPrimaryTarget = options.contrast?.textPrimary ?? 75;
-  const textSecondaryTarget = options.contrast?.textSecondary ?? 60;
-
-  if (lightBg && tokens.light["text.primary"]) {
-    tokens.light["text.primary"] = adjustTextColor(
-      tokens.light["text.primary"],
-      lightBg,
-      textPrimaryTarget,
-    );
-  }
-  if (lightBg && tokens.light["text.secondary"]) {
-    tokens.light["text.secondary"] = adjustTextColor(
-      tokens.light["text.secondary"],
-      lightBg,
-      textSecondaryTarget,
-    );
-  }
-  if (darkBg && tokens.dark["text.primary"]) {
-    tokens.dark["text.primary"] = adjustTextColor(
-      tokens.dark["text.primary"],
-      darkBg,
-      textPrimaryTarget,
-    );
-  }
-  if (darkBg && tokens.dark["text.secondary"]) {
-    tokens.dark["text.secondary"] = adjustTextColor(
-      tokens.dark["text.secondary"],
-      darkBg,
-      textSecondaryTarget,
-    );
-  }
-
-  const accentScale = scales.accent;
-  const lightOnSolid = onSolidTextTokens(accentScale.light[9]);
-  const darkOnSolid = onSolidTextTokens(accentScale.dark[9]);
-
-  tokens.light["onSolid.primary"] = lightOnSolid.primary;
-  tokens.light["onSolid.secondary"] = lightOnSolid.secondary;
-  tokens.light["onSolid.disabled"] = lightOnSolid.disabled;
-  tokens.dark["onSolid.primary"] = darkOnSolid.primary;
-  tokens.dark["onSolid.secondary"] = darkOnSolid.secondary;
-  tokens.dark["onSolid.disabled"] = darkOnSolid.disabled;
-
-  if (options.tokens?.overrides?.light) {
-    Object.assign(tokens.light, options.tokens.overrides.light);
-  }
-  if (options.tokens?.overrides?.dark) {
-    Object.assign(tokens.dark, options.tokens.overrides.dark);
-  }
-
-  let alpha: AlphaScale | undefined;
-  if (options.alpha?.enabled !== false) {
-    const background = {
-      light: options.alpha?.background?.light ?? "#ffffff",
-      dark: options.alpha?.background?.dark ?? "#111111",
-    } as const;
-    alpha = generateAlphaScale(accentScale.light[9], background);
-  }
-
-  const diagnostics = analyzeTheme({ scales, tokens, alpha });
-
-  return {
-    scales,
-    tokens,
-    alpha,
-    diagnostics,
-  };
-}

package/src/data/radixSeeds.ts

@@ -1,37 +0,0 @@
-import type { ColorHex, RadixSeedName } from "../types.js";
-
-export const radixSeeds: Record<RadixSeedName, ColorHex> = {
-  amber: "#ffc53d",
-  blue: "#0090ff",
-  bronze: "#a18072",
-  brown: "#ad7f58",
-  crimson: "#e93d82",
-  cyan: "#00a2c7",
-  gold: "#978365",
-  grass: "#46a758",
-  gray: "#8d8d8d",
-  green: "#30a46c",
-  indigo: "#3e63dd",
-  iris: "#5b5bd6",
-  jade: "#29a383",
-  lime: "#bdee63",
-  mauve: "#8e8c99",
-  mint: "#86ead4",
-  olive: "#898e87",
-  orange: "#f76b15",
-  pink: "#d6409f",
-  plum: "#ab4aba",
-  purple: "#8e4ec6",
-  red: "#e5484d",
-  ruby: "#e54666",
-  sage: "#868e8b",
-  sand: "#8d8d86",
-  sky: "#7ce2fe",
-  slate: "#8b8d98",
-  teal: "#12a594",
-  tomato: "#e54d2e",
-  violet: "#6e56cf",
-  yellow: "#ffe629",
-};
-
-export const radixSeedNames = Object.keys(radixSeeds).sort();

package/src/diagnostics/analyzeScale.ts

@@ -1,6 +0,0 @@
-import type { Scale, ScaleDiagnostics } from "../types.js";
-
-export function analyzeScale(scale: Scale): ScaleDiagnostics {
-  const outOfGamutCount = scale.meta?.outOfGamutCount ?? 0;
-  return { outOfGamutCount };
-}

package/src/diagnostics/analyzeTheme.ts

@@ -1,54 +0,0 @@
-import { apcaContrast } from "../contrast/apca.js";
-import type { Theme, ThemeDiagnostics } from "../types.js";
-import { analyzeWarnings } from "./warnings.js";
-
-export function analyzeTheme(theme: Theme): ThemeDiagnostics {
-  const contrast: Record<string, number> = {};
-
-  const lightBg = theme.tokens.light["bg.app"];
-  const darkBg = theme.tokens.dark["bg.app"];
-
-  if (lightBg) {
-    if (theme.tokens.light["text.primary"]) {
-      contrast["light.text.primary"] = apcaContrast(theme.tokens.light["text.primary"], lightBg);
-    }
-    if (theme.tokens.light["text.secondary"]) {
-      contrast["light.text.secondary"] = apcaContrast(
-        theme.tokens.light["text.secondary"],
-        lightBg,
-      );
-    }
-  }
-
-  if (darkBg) {
-    if (theme.tokens.dark["text.primary"]) {
-      contrast["dark.text.primary"] = apcaContrast(theme.tokens.dark["text.primary"], darkBg);
-    }
-    if (theme.tokens.dark["text.secondary"]) {
-      contrast["dark.text.secondary"] = apcaContrast(theme.tokens.dark["text.secondary"], darkBg);
-    }
-  }
-
-  if (theme.tokens.light["onSolid.primary"] && theme.tokens.light["accent.solid"]) {
-    contrast["light.onSolid.primary"] = apcaContrast(
-      theme.tokens.light["onSolid.primary"],
-      theme.tokens.light["accent.solid"],
-    );
-  }
-
-  if (theme.tokens.dark["onSolid.primary"] && theme.tokens.dark["accent.solid"]) {
-    contrast["dark.onSolid.primary"] = apcaContrast(
-      theme.tokens.dark["onSolid.primary"],
-      theme.tokens.dark["accent.solid"],
-    );
-  }
-
-  let outOfGamutCount = 0;
-  for (const scale of Object.values(theme.scales)) {
-    outOfGamutCount += scale.meta?.outOfGamutCount ?? 0;
-  }
-
-  const warnings = analyzeWarnings(theme);
-
-  return { contrast, outOfGamutCount, warnings };
-}

package/src/diagnostics/warnings.ts

@@ -1,25 +0,0 @@
-import Color from "colorjs.io";
-import type { Theme } from "../types.js";
-
-export function analyzeWarnings(theme: Theme): string[] {
-  const warnings: string[] = [];
-
-  const accent = theme.scales.accent?.light?.[9];
-  if (accent) {
-    const { coords } = new Color(accent).to("oklch");
-    const l = coords[0] ?? 0;
-    const c = coords[1] ?? 0;
-
-    if (c < 0.03) {
-      warnings.push("Accent seed has very low chroma; the palette may look gray.");
-    }
-    if (l < 0.2) {
-      warnings.push("Accent seed is very dark; light mode solids may lack contrast.");
-    }
-    if (l > 0.9) {
-      warnings.push("Accent seed is very light; dark mode solids may lack contrast.");
-    }
-  }
-
-  return warnings;
-}

package/src/engine/curves.ts

@@ -1,64 +0,0 @@
-import type { Step } from "../types.js";
-
-export type CurveConfig = {
-  lightness?: Partial<Record<Step, number>>;
-  chroma?: Partial<Record<Step, number>>;
-};
-
-const steps: Step[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-const defaultLightness: Record<Step, number> = {
-  1: 0.3,
-  2: 0.3,
-  3: 0.6,
-  4: 0.6,
-  5: 0.6,
-  6: 0.85,
-  7: 0.85,
-  8: 0.85,
-  9: 1,
-  10: 1,
-  11: 1,
-  12: 1,
-};
-
-const defaultChroma: Record<Step, number> = {
-  1: 0.2,
-  2: 0.2,
-  3: 0.6,
-  4: 0.6,
-  5: 0.6,
-  6: 0.8,
-  7: 0.8,
-  8: 0.8,
-  9: 1,
-  10: 1,
-  11: 0.7,
-  12: 0.7,
-};
-
-export function resolveCurves(curves?: CurveConfig): {
-  lightness: Record<Step, number>;
-  chroma: Record<Step, number>;
-} {
-  const lightness = { ...defaultLightness };
-  const chroma = { ...defaultChroma };
-
-  if (curves?.lightness) {
-    for (const step of steps) {
-      if (curves.lightness[step] !== undefined) {
-        lightness[step] = curves.lightness[step] as number;
-      }
-    }
-  }
-
-  if (curves?.chroma) {
-    for (const step of steps) {
-      if (curves.chroma[step] !== undefined) {
-        chroma[step] = curves.chroma[step] as number;
-      }
-    }
-  }
-
-  return { lightness, chroma };
-}

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 };
-}