@clhaas/palette-kit 0.1.0 → 0.1.1

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

package/src/tokens/presetRadixLikeUi.ts

@@ -1,75 +0,0 @@
-import type { ColorHex, Scale, Step } from "../types.js";
-
-type TokenMapEntry = {
-  token: string;
-  slot: string;
-  step: Step;
-  required?: boolean;
-};
-
-const tokenMap: TokenMapEntry[] = [
-  { token: "bg.app", slot: "neutral", step: 1 },
-  { token: "bg.subtle", slot: "neutral", step: 2 },
-  { token: "surface.card", slot: "neutral", step: 2 },
-  { token: "surface.raised", slot: "neutral", step: 3 },
-  { token: "component.bg", slot: "neutral", step: 3 },
-  { token: "component.bgHover", slot: "neutral", step: 4 },
-  { token: "component.bgActive", slot: "neutral", step: 5 },
-  { token: "border.subtle", slot: "neutral", step: 6 },
-  { token: "border.default", slot: "neutral", step: 7 },
-  { token: "border.strong", slot: "neutral", step: 8 },
-  { token: "text.secondary", slot: "neutral", step: 11 },
-  { token: "text.primary", slot: "neutral", step: 12 },
-  { token: "text.disabled", slot: "neutral", step: 10 },
-
-  { token: "focus.ring", slot: "accent", step: 8 },
-  { token: "accent.solid", slot: "accent", step: 9 },
-  { token: "accent.solidHover", slot: "accent", step: 10 },
-  { token: "accent.border", slot: "accent", step: 7 },
-  { token: "accent.subtle", slot: "accent", step: 3 },
-  { token: "accent.subtleHover", slot: "accent", step: 4 },
-
-  { token: "status.success.solidBg", slot: "success", step: 9, required: false },
-  { token: "status.success.solidHover", slot: "success", step: 10, required: false },
-  { token: "status.success.subtleBg", slot: "success", step: 3, required: false },
-  { token: "status.success.border", slot: "success", step: 7, required: false },
-  { token: "status.success.text", slot: "success", step: 11, required: false },
-  { token: "status.success.textStrong", slot: "success", step: 12, required: false },
-
-  { token: "status.warning.solidBg", slot: "warning", step: 9, required: false },
-  { token: "status.warning.solidHover", slot: "warning", step: 10, required: false },
-  { token: "status.warning.subtleBg", slot: "warning", step: 3, required: false },
-  { token: "status.warning.border", slot: "warning", step: 7, required: false },
-  { token: "status.warning.text", slot: "warning", step: 11, required: false },
-  { token: "status.warning.textStrong", slot: "warning", step: 12, required: false },
-
-  { token: "status.danger.solidBg", slot: "danger", step: 9, required: false },
-  { token: "status.danger.solidHover", slot: "danger", step: 10, required: false },
-  { token: "status.danger.subtleBg", slot: "danger", step: 3, required: false },
-  { token: "status.danger.border", slot: "danger", step: 7, required: false },
-  { token: "status.danger.text", slot: "danger", step: 11, required: false },
-  { token: "status.danger.textStrong", slot: "danger", step: 12, required: false },
-];
-
-export function buildPresetTokens(scales: Record<string, Scale>): {
-  light: Record<string, ColorHex>;
-  dark: Record<string, ColorHex>;
-} {
-  const light: Record<string, ColorHex> = {};
-  const dark: Record<string, ColorHex> = {};
-
-  for (const { token, slot, step, required } of tokenMap) {
-    const scale = scales[slot];
-    if (!scale) {
-      if (required === false) {
-        continue;
-      }
-      throw new Error(`Missing scale for slot: ${slot}`);
-    }
-
-    light[token] = scale.light[step];
-    dark[token] = scale.dark[step];
-  }
-
-  return { light, dark };
-}

package/src/types.ts

@@ -1,63 +0,0 @@
-export type Step = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type ColorHex = `#${string}`;
-export type ColorP3 = string;
-
-export type RadixSeedName = string;
-
-export type TemplateId = "neutral" | "warm" | "cool";
-
-export type ColorSource =
-  | { source: "seed"; value: ColorHex }
-  | { source: "radix"; name: RadixSeedName };
-
-export type ScaleDiagnostics = {
-  outOfGamutCount: number;
-  outOfP3GamutCount?: number;
-};
-
-export type Scale = {
-  light: Record<Step, ColorHex>;
-  dark: Record<Step, ColorHex>;
-  p3?: {
-    light: Record<Step, ColorP3>;
-    dark: Record<Step, ColorP3>;
-  };
-  meta?: ScaleDiagnostics;
-};
-
-export type ScaleColorMode = Omit<Scale, "light" | "dark"> & {
-  light: Record<Step, string>;
-  dark: Record<Step, string>;
-};
-
-export type AlphaScale = {
-  light: Record<Step, ColorHex>;
-  dark: Record<Step, ColorHex>;
-};
-
-export type ThemeDiagnostics = {
-  contrast: Record<string, number>;
-  outOfGamutCount: number;
-  warnings?: string[];
-};
-
-export type Theme = {
-  scales: Record<string, Scale>;
-  tokens: {
-    light: Record<string, ColorHex>;
-    dark: Record<string, ColorHex>;
-  };
-  alpha?: AlphaScale;
-  diagnostics?: ThemeDiagnostics;
-};
-
-export type ThemeColorMode = Omit<Theme, "scales"> & {
-  scales: Record<string, ScaleColorMode>;
-};
-
-export type OklchColor = {
-  l: number;
-  c: number;
-  h: number;
-};

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "declaration": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["examples/**", "tests/**", "node_modules/**"]
-}