@clhaas/palette-kit 0.1.8 → 0.3.0

package/dist/engine/oklch.d.ts

@@ -1,8 +0,0 @@
-import type { ColorHex, ColorP3, OklchColor } from "../types.js";
-export declare function hexToOklch(hex: ColorHex): OklchColor;
-export declare function oklchToHex(oklch: OklchColor): ColorHex;
-export declare function inSrgbGamut(oklch: OklchColor): boolean;
-export declare function compressToSrgb(oklch: OklchColor): OklchColor;
-export declare function inP3Gamut(oklch: OklchColor): boolean;
-export declare function compressToP3(oklch: OklchColor): OklchColor;
-export declare function oklchToP3(oklch: OklchColor): ColorP3;

package/dist/engine/oklch.js

@@ -1,40 +0,0 @@
-import Color from "colorjs.io";
-export function hexToOklch(hex) {
-    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) {
-    const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-    return color.to("srgb").toString({ format: "hex" });
-}
-export function inSrgbGamut(oklch) {
-    const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-    return color.inGamut("srgb");
-}
-export function compressToSrgb(oklch) {
-    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) {
-    const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-    return color.inGamut("p3");
-}
-export function compressToP3(oklch) {
-    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) {
-    const color = new Color("oklch", [oklch.l, oklch.c, oklch.h]);
-    return color.to("p3").toString({ format: "color" });
-}

package/dist/engine/templates.d.ts

@@ -1,14 +0,0 @@
-import type { OklchColor, Step, TemplateId } from "../types.js";
-export declare const templates: {
-    light: {
-        neutral: Record<Step, OklchColor>;
-        warm: Record<Step, OklchColor>;
-        cool: Record<Step, OklchColor>;
-    };
-    dark: {
-        neutral: Record<Step, OklchColor>;
-        warm: Record<Step, OklchColor>;
-        cool: Record<Step, OklchColor>;
-    };
-};
-export declare function selectTemplateId(oklch: OklchColor): TemplateId;

package/dist/engine/templates.js

@@ -1,45 +0,0 @@
-const steps = [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 = {
-    neutral: 250,
-    warm: 40,
-    cool: 220,
-};
-function buildTemplate(lightness, chroma, hue) {
-    const output = {};
-    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) {
-    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/dist/exporters/selectColorMode.d.ts

@@ -1,2 +0,0 @@
-import type { Theme, ThemeColorMode } from "../types.js";
-export declare function selectThemeColorMode(theme: Theme, mode: "srgb" | "p3"): ThemeColorMode;

package/dist/exporters/selectColorMode.js

@@ -1,19 +0,0 @@
-export function selectThemeColorMode(theme, mode) {
-    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/dist/exporters/toCssVars.d.ts

@@ -1,13 +0,0 @@
-import type { Theme } from "../types.js";
-type CssVarsOptions = {
-    prefix?: string;
-    includeTokens?: boolean;
-    includeScales?: boolean;
-    includeAlpha?: boolean;
-    includeOverlays?: boolean;
-    includeP3?: boolean;
-    lightSelector?: string;
-    darkSelector?: string;
-};
-export declare function toCssVars(theme: Theme, options?: CssVarsOptions): string;
-export {};

package/dist/exporters/toCssVars.js

@@ -1,108 +0,0 @@
-import Color from "colorjs.io";
-function tokenToCssVar(token, prefix) {
-    const normalized = token.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    const dashed = normalized.replace(/\./g, "-");
-    return `--${prefix}-${dashed}`;
-}
-function scaleToCssVar(slot, step, prefix) {
-    return `--${prefix}-scale-${slot}-${step}`;
-}
-function alphaToCssVar(slot, step, prefix) {
-    return `--${prefix}-alpha-${slot}-${step}`;
-}
-function overlayToCssVar(color, step, prefix) {
-    return `--${prefix}-overlay-${color}-${step}`;
-}
-function hexToP3(value) {
-    return new Color(value).to("p3").toString({ format: "color" });
-}
-export function toCssVars(theme, options) {
-    const prefix = options?.prefix ?? "pk";
-    const includeTokens = options?.includeTokens ?? true;
-    const includeScales = options?.includeScales ?? true;
-    const includeAlpha = options?.includeAlpha ?? true;
-    const includeOverlays = options?.includeOverlays ?? true;
-    const includeP3 = options?.includeP3 ?? false;
-    const lightSelector = options?.lightSelector ?? ":root";
-    const darkSelector = options?.darkSelector ?? ".dark";
-    const lines = [];
-    const hasP3 = Object.values(theme.scales).some((scale) => scale.p3);
-    function emitSelector(selector, mode) {
-        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), prefix)}: ${value};`);
-                }
-            }
-        }
-        if (includeAlpha && theme.alpha) {
-            for (const [slot, scale] of Object.entries(theme.alpha)) {
-                for (const [step, value] of Object.entries(scale[mode])) {
-                    lines.push(`  ${alphaToCssVar(slot, Number(step), prefix)}: ${value};`);
-                }
-            }
-        }
-        if (includeOverlays) {
-            for (const [step, value] of Object.entries(theme.overlay.black)) {
-                lines.push(`  ${overlayToCssVar("black", Number(step), prefix)}: ${value};`);
-            }
-            for (const [step, value] of Object.entries(theme.overlay.white)) {
-                lines.push(`  ${overlayToCssVar("white", Number(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, mode) {
-            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), prefix)}: ${value};`);
-                    }
-                }
-            }
-            if (includeAlpha && theme.alpha) {
-                for (const [slot, scale] of Object.entries(theme.alpha)) {
-                    for (const [step, value] of Object.entries(scale[mode])) {
-                        lines.push(`    ${alphaToCssVar(slot, Number(step), prefix)}: ${hexToP3(value)};`);
-                    }
-                }
-            }
-            if (includeOverlays) {
-                for (const [step, value] of Object.entries(theme.overlay.black)) {
-                    lines.push(`    ${overlayToCssVar("black", Number(step), prefix)}: ${hexToP3(value)};`);
-                }
-                for (const [step, value] of Object.entries(theme.overlay.white)) {
-                    lines.push(`    ${overlayToCssVar("white", Number(step), prefix)}: ${hexToP3(value)};`);
-                }
-            }
-            lines.push("  }");
-        }
-        emitP3Selector(lightSelector, "light");
-        lines.push("");
-        emitP3Selector(darkSelector, "dark");
-        lines.push("}");
-    }
-    return lines.join("\n");
-}

package/dist/exporters/toJson.d.ts

@@ -1,3 +0,0 @@
-import type { Theme } from "../types.js";
-export declare function toJson(theme: Theme): string;
-export declare function toJsonWithMode(theme: Theme, mode: "srgb" | "p3"): string;

package/dist/exporters/toJson.js

@@ -1,25 +0,0 @@
-export function toJson(theme) {
-    return JSON.stringify(theme, null, 2);
-}
-export function toJsonWithMode(theme, mode) {
-    if (mode === "p3") {
-        return JSON.stringify(toP3Theme(theme), null, 2);
-    }
-    return JSON.stringify(theme, null, 2);
-}
-function toP3Theme(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/dist/exporters/toReactNative.d.ts

@@ -1,54 +0,0 @@
-import type { Theme } from "../types.js";
-type ReactNativeOptions = {
-    includeTokens?: boolean;
-    includeScales?: boolean;
-    includeAlpha?: boolean;
-    includeOverlays?: boolean;
-    includeP3?: boolean;
-};
-type Mode = "light" | "dark";
-type ModeTokens<T extends Theme, O extends ReactNativeOptions, M extends Mode> = O extends {
-    includeTokens: false;
-} ? Record<string, never> : T["tokens"][M];
-type ModeScales<T extends Theme, O extends ReactNativeOptions, M extends Mode> = O extends {
-    includeScales: false;
-} ? Record<string, never> : {
-    [K in keyof T["scales"]]: T["scales"][K][M];
-};
-type ThemeAlpha<T extends Theme> = T["alpha"] extends undefined ? undefined : T["alpha"];
-type ModeAlpha<T extends Theme, O extends ReactNativeOptions, M extends Mode> = O extends {
-    includeAlpha: false;
-} ? undefined : ThemeAlpha<T> extends undefined ? undefined : ThemeAlpha<T> extends Record<string, {
-    light: infer L;
-    dark: infer D;
-}> ? M extends "light" ? Record<string, L> : Record<string, D> : undefined;
-type ModeOverlays<T extends Theme, O extends ReactNativeOptions> = O extends {
-    includeOverlays: false;
-} ? undefined : T["overlay"];
-type ModeP3<T extends Theme, O extends ReactNativeOptions, M extends Mode> = O extends {
-    includeP3: true;
-} ? Partial<{
-    [K in keyof T["scales"]]: T["scales"][K] extends {
-        p3?: {
-            light: infer L;
-            dark: infer D;
-        };
-    } ? M extends "light" ? L : D : never;
-}> : undefined;
-type ReactNativeTheme<T extends Theme, O extends ReactNativeOptions> = {
-    overlay: ModeOverlays<T, O>;
-    light: {
-        tokens: ModeTokens<T, O, "light">;
-        scales: ModeScales<T, O, "light">;
-        alpha: ModeAlpha<T, O, "light">;
-        p3: ModeP3<T, O, "light">;
-    };
-    dark: {
-        tokens: ModeTokens<T, O, "dark">;
-        scales: ModeScales<T, O, "dark">;
-        alpha: ModeAlpha<T, O, "dark">;
-        p3: ModeP3<T, O, "dark">;
-    };
-};
-export declare function toReactNative<T extends Theme, O extends ReactNativeOptions = ReactNativeOptions>(theme: T, options?: O): ReactNativeTheme<T, O>;
-export {};

package/dist/exporters/toReactNative.js

@@ -1,33 +0,0 @@
-export function toReactNative(theme, options) {
-    const includeTokens = options?.includeTokens ?? true;
-    const includeScales = options?.includeScales ?? true;
-    const includeAlpha = options?.includeAlpha ?? true;
-    const includeOverlays = options?.includeOverlays ?? true;
-    const includeP3 = options?.includeP3 ?? false;
-    function buildMode(mode) {
-        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;
-        const alpha = includeAlpha
-            ? (theme.alpha
-                ? Object.fromEntries(Object.entries(theme.alpha).map(([slot, scale]) => [slot, scale[mode]]))
-                : undefined)
-            : undefined;
-        return {
-            tokens: (includeTokens ? theme.tokens[mode] : {}),
-            scales,
-            alpha,
-            p3,
-        };
-    }
-    return {
-        overlay: (includeOverlays ? theme.overlay : undefined),
-        light: buildMode("light"),
-        dark: buildMode("dark"),
-    };
-}

package/dist/exporters/toTailwind.d.ts

@@ -1,17 +0,0 @@
-import type { Theme } from "../types.js";
-type TailwindOptions = {
-    mode?: "light" | "dark" | "both";
-    includeTokens?: boolean;
-    includeScales?: boolean;
-    includeAlpha?: boolean;
-    includeOverlays?: boolean;
-    includeP3?: boolean;
-};
-export declare function toTailwind(theme: Theme, options?: TailwindOptions): {
-    theme: {
-        extend: {
-            colors: Record<string, unknown>;
-        };
-    };
-};
-export {};

package/dist/exporters/toTailwind.js

@@ -1,111 +0,0 @@
-function setNested(target, path, value) {
-    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];
-    }
-    cursor[path[path.length - 1]] = value;
-}
-function tokensToNested(tokens) {
-    const output = {};
-    for (const [token, value] of Object.entries(tokens)) {
-        setNested(output, token.split("."), value);
-    }
-    return output;
-}
-function scalesToNested(scales, mode, useP3) {
-    const output = {};
-    for (const [slot, scale] of Object.entries(scales)) {
-        const source = useP3 ? scale.p3?.[mode] : scale[mode];
-        if (!source) {
-            continue;
-        }
-        const stepMap = {};
-        for (const [step, value] of Object.entries(source)) {
-            stepMap[String(step)] = value;
-        }
-        output[slot] = stepMap;
-    }
-    return output;
-}
-function alphaToNested(alpha, mode) {
-    if (!alpha) {
-        return undefined;
-    }
-    const output = {};
-    for (const [slot, scale] of Object.entries(alpha)) {
-        const stepMap = {};
-        for (const [step, value] of Object.entries(scale[mode])) {
-            stepMap[String(step)] = value;
-        }
-        output[slot] = stepMap;
-    }
-    return output;
-}
-function overlaysToNested(overlays) {
-    const output = {
-        black: {},
-        white: {},
-    };
-    for (const [step, value] of Object.entries(overlays.black)) {
-        output.black[String(step)] = value;
-    }
-    for (const [step, value] of Object.entries(overlays.white)) {
-        output.white[String(step)] = value;
-    }
-    return output;
-}
-export function toTailwind(theme, options) {
-    const mode = options?.mode ?? "both";
-    const includeTokens = options?.includeTokens ?? true;
-    const includeScales = options?.includeScales ?? false;
-    const includeAlpha = options?.includeAlpha ?? false;
-    const includeOverlays = options?.includeOverlays ?? false;
-    const includeP3 = options?.includeP3 ?? false;
-    function buildModeTokens(modeKey, useP3) {
-        const colors = {};
-        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);
-        }
-        if (includeOverlays) {
-            colors.overlay = overlaysToNested(theme.overlay);
-        }
-        return colors;
-    }
-    const colors = {};
-    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 = {};
-            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/dist/exporters/toTs.d.ts

@@ -1,3 +0,0 @@
-import type { Theme } from "../types.js";
-export declare function toTs(theme: Theme): string;
-export declare function toTsWithMode(theme: Theme, mode: "srgb" | "p3"): string;

package/dist/exporters/toTs.js

@@ -1,43 +0,0 @@
-export function toTs(theme) {
-    const serialized = JSON.stringify(theme, null, 2);
-    return `export const theme = ${serialized} as const;\n${typeExports()}`;
-}
-export function toTsWithMode(theme, mode) {
-    if (mode === "p3") {
-        const serialized = JSON.stringify(toP3Theme(theme), null, 2);
-        return `export const theme = ${serialized} as const;\n${typeExports()}`;
-    }
-    const serialized = JSON.stringify(theme, null, 2);
-    return `export const theme = ${serialized} as const;\n${typeExports()}`;
-}
-function toP3Theme(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 };
-}
-function typeExports() {
-    return [
-        "export type Theme = typeof theme;",
-        'export type ThemeScaleName = keyof Theme["scales"];',
-        'export type ThemeTokenName = keyof Theme["tokens"]["light"];',
-        'export type ThemeTokenMap = Theme["tokens"]["light"];',
-        'export type ThemeOverlay = Theme["overlay"];',
-        'export type ThemeMode = keyof Theme["tokens"];',
-        'export type ThemeScaleStep = keyof Theme["scales"][ThemeScaleName]["light"];',
-        'export type ThemeTokenHex = Theme["tokens"][ThemeMode][ThemeTokenName];',
-        'export type ThemeScaleHex = Theme["scales"][ThemeScaleName][ThemeMode][ThemeScaleStep];',
-        'export type ThemeAlphaHex = Theme["alpha"] extends undefined ? never : Theme["alpha"][ThemeScaleName][ThemeMode][ThemeScaleStep];',
-        "",
-    ].join("\n");
-}

package/dist/generateScale.d.ts

@@ -1,48 +0,0 @@
-import { type CurveConfig } from "./engine/curves.js";
-import type { ColorSource, Scale, Step, TemplateId } from "./types.js";
-export type AnchorStepOption = Step | "auto" | {
-    light?: Step | "auto";
-    dark?: Step | "auto";
-};
-export type AutoAnchorModeOptions = {
-    candidateSteps?: Step[];
-    backgroundStep?: Step;
-    backgroundSteps?: Step[];
-    solidStep?: Step;
-    textStep?: Step;
-    targetContrast?: number;
-    minBackgroundL?: number;
-    maxBackgroundL?: number;
-    minTextL?: number;
-    maxTextL?: number;
-};
-export type AutoAnchorOptions = {
-    candidateSteps?: Step[];
-    light?: AutoAnchorModeOptions;
-    dark?: AutoAnchorModeOptions;
-};
-export type SeedNormalizeRange = {
-    minL?: number;
-    maxL?: number;
-    minC?: number;
-    maxC?: number;
-};
-export type SeedNormalizeOptions = {
-    enabled?: boolean;
-    light?: SeedNormalizeRange;
-    dark?: SeedNormalizeRange;
-};
-export type GenerateScaleOptions = {
-    source: ColorSource;
-    mode?: "light" | "dark" | "both";
-    anchorStep?: AnchorStepOption;
-    autoAnchor?: AutoAnchorOptions;
-    seedNormalize?: SeedNormalizeOptions;
-    template?: "auto" | TemplateId;
-    curves?: CurveConfig;
-    gamut?: {
-        strategy: "compress" | "clip";
-    };
-    p3?: boolean;
-};
-export declare function generateScale(options: GenerateScaleOptions): Scale;