@clhaas/palette-kit 0.1.8 → 0.3.0

package/dist/generateScale.js

@@ -1,274 +0,0 @@
-import { apcaContrast } from "./contrast/apca.js";
-import { onSolidTextTokens } from "./contrast/onSolid.js";
-import { radixSeeds } from "./data/radixSeeds.js";
-import { resolveCurves } from "./engine/curves.js";
-import { compressToP3, compressToSrgb, hexToOklch, inP3Gamut, inSrgbGamut, oklchToHex, oklchToP3, } from "./engine/oklch.js";
-import { selectTemplateId, templates } from "./engine/templates.js";
-const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const defaultAutoAnchor = {
-    candidateSteps: [8, 9, 10],
-    light: {
-        backgroundStep: 1,
-        backgroundSteps: [1, 2, 3],
-        solidStep: 9,
-        textStep: 12,
-        targetContrast: 90,
-        minBackgroundL: 0.86,
-        maxBackgroundL: 0.98,
-        minTextL: 0.22,
-        maxTextL: 0.55,
-    },
-    dark: {
-        backgroundStep: 1,
-        backgroundSteps: [1, 2, 3],
-        solidStep: 9,
-        textStep: 12,
-        targetContrast: 75,
-        minBackgroundL: 0.1,
-        maxBackgroundL: 0.32,
-        minTextL: 0.75,
-        maxTextL: 0.98,
-    },
-};
-const defaultSeedNormalize = {
-    light: {
-        minL: 0.35,
-        maxL: 0.9,
-    },
-    dark: {
-        minL: 0.32,
-        maxL: 0.82,
-    },
-};
-function getSeedHex(source) {
-    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) {
-    const normalized = ((hue % 360) + 360) % 360;
-    return normalized;
-}
-function clampValue(value, min, max) {
-    let current = value;
-    if (min !== undefined) {
-        current = Math.max(min, current);
-    }
-    if (max !== undefined) {
-        current = Math.min(max, current);
-    }
-    return current;
-}
-function normalizeSeed(seed, range) {
-    const l = clampValue(seed.l, range.minL, range.maxL);
-    const c = clampValue(seed.c, range.minC, range.maxC);
-    return {
-        l,
-        c: Math.max(0, c),
-        h: seed.h,
-    };
-}
-function resolveAnchorOption(option, mode) {
-    if (!option) {
-        return undefined;
-    }
-    if (typeof option === "object") {
-        return option[mode];
-    }
-    return option;
-}
-function resolveSeedNormalizeOptions(options, autoEnabled) {
-    const enabled = options?.enabled ?? autoEnabled;
-    return {
-        enabled,
-        light: { ...defaultSeedNormalize.light, ...options?.light },
-        dark: { ...defaultSeedNormalize.dark, ...options?.dark },
-    };
-}
-function resolveCandidateSteps(candidateSteps) {
-    const unique = Array.from(new Set(candidateSteps ?? defaultAutoAnchor.candidateSteps));
-    return unique.length > 0 ? unique : [9];
-}
-function resolveAutoAnchorModeOptions(base, overrides, candidateSteps) {
-    const resolvedCandidates = resolveCandidateSteps(overrides?.candidateSteps ?? candidateSteps);
-    const resolvedBackgroundStep = overrides?.backgroundStep ?? base.backgroundStep;
-    const resolvedBackgroundSteps = overrides?.backgroundSteps ?? base.backgroundSteps;
-    return {
-        candidateSteps: resolvedCandidates,
-        backgroundStep: resolvedBackgroundStep,
-        backgroundSteps: resolvedBackgroundSteps.length > 0 ? resolvedBackgroundSteps : [resolvedBackgroundStep],
-        solidStep: overrides?.solidStep ?? base.solidStep,
-        textStep: overrides?.textStep ?? base.textStep,
-        targetContrast: overrides?.targetContrast ?? base.targetContrast,
-        minBackgroundL: overrides?.minBackgroundL ?? base.minBackgroundL,
-        maxBackgroundL: overrides?.maxBackgroundL ?? base.maxBackgroundL,
-        minTextL: overrides?.minTextL ?? base.minTextL,
-        maxTextL: overrides?.maxTextL ?? base.maxTextL,
-    };
-}
-function resolveAutoAnchorOptions(options) {
-    const candidateSteps = resolveCandidateSteps(options?.candidateSteps);
-    return {
-        light: resolveAutoAnchorModeOptions(defaultAutoAnchor.light, options?.light, candidateSteps),
-        dark: resolveAutoAnchorModeOptions(defaultAutoAnchor.dark, options?.dark, candidateSteps),
-    };
-}
-function rangePenalty(value, min, max, weight = 100) {
-    if (value < min) {
-        return (min - value) * weight;
-    }
-    if (value > max) {
-        return (value - max) * weight;
-    }
-    return 0;
-}
-function scoreScale(scale, options) {
-    const solid = scale[options.solidStep];
-    const onSolid = onSolidTextTokens(solid);
-    const contrast = Math.abs(apcaContrast(onSolid.primary, solid));
-    const text = scale[options.textStep];
-    const textL = hexToOklch(text).l;
-    const backgroundLs = options.backgroundSteps.map((step) => hexToOklch(scale[step]).l);
-    const minBackgroundL = Math.min(...backgroundLs);
-    const maxBackgroundL = Math.max(...backgroundLs);
-    let score = 0;
-    const contrastDelta = options.targetContrast - contrast;
-    if (contrastDelta > 0) {
-        score += contrastDelta * 2.2;
-    }
-    score += rangePenalty(minBackgroundL, options.minBackgroundL, options.maxBackgroundL, 180);
-    score += rangePenalty(maxBackgroundL, options.minBackgroundL, options.maxBackgroundL, 180);
-    score += rangePenalty(textL, options.minTextL, options.maxTextL, 120);
-    return score;
-}
-function pickAutoAnchorStep(seed, templateId, curves, gamutStrategy, mode, options) {
-    let bestStep = 9;
-    let bestScore = Number.POSITIVE_INFINITY;
-    for (const candidate of options.candidateSteps) {
-        const result = buildScaleForMode(seed, templateId, candidate, curves, gamutStrategy, mode, false);
-        const score = scoreScale(result.scale, options) + Math.abs(candidate - 9) * 2;
-        if (score < bestScore) {
-            bestScore = score;
-            bestStep = candidate;
-        }
-        else if (score === bestScore) {
-            if (Math.abs(candidate - 9) < Math.abs(bestStep - 9)) {
-                bestStep = candidate;
-            }
-        }
-    }
-    return bestStep;
-}
-function buildScaleForMode(seed, templateId, anchorStep, curves, gamutStrategy = "compress", mode = "light", includeP3 = false) {
-    const template = templates[mode][templateId];
-    const anchor = template[anchorStep];
-    const dL = seed.l - anchor.l;
-    const dC = seed.c - anchor.c;
-    const dH = seed.h - anchor.h;
-    const curveSet = resolveCurves(curves);
-    const output = {};
-    const p3Output = includeP3 ? {} : 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) {
-    const seedHex = getSeedHex(options.source);
-    const seedOklch = hexToOklch(seedHex);
-    const mode = options.mode ?? "both";
-    const templateId = options.template === "auto" || !options.template
-        ? selectTemplateId(seedOklch)
-        : options.template;
-    const gamutStrategy = options.gamut?.strategy ?? "compress";
-    const anchorOption = options.anchorStep ?? "auto";
-    const anchorLightOption = resolveAnchorOption(anchorOption, "light");
-    const anchorDarkOption = resolveAnchorOption(anchorOption, "dark");
-    const autoAnchorOptions = resolveAutoAnchorOptions(options.autoAnchor);
-    const autoEnabled = anchorLightOption === "auto" || anchorDarkOption === "auto";
-    const seedNormalize = resolveSeedNormalizeOptions(options.seedNormalize, autoEnabled);
-    const lightSeed = seedNormalize.enabled
-        ? normalizeSeed(seedOklch, seedNormalize.light)
-        : seedOklch;
-    const darkSeed = seedNormalize.enabled ? normalizeSeed(seedOklch, seedNormalize.dark) : seedOklch;
-    const lightAnchorStep = anchorLightOption === "auto"
-        ? pickAutoAnchorStep(lightSeed, templateId, options.curves, gamutStrategy, "light", autoAnchorOptions.light)
-        : (anchorLightOption ?? 9);
-    const darkAnchorStep = anchorDarkOption === "auto"
-        ? pickAutoAnchorStep(darkSeed, templateId, options.curves, gamutStrategy, "dark", autoAnchorOptions.dark)
-        : (anchorDarkOption ?? 9);
-    const lightResult = buildScaleForMode(lightSeed, templateId, lightAnchorStep, options.curves, gamutStrategy, "light", options.p3 ?? false);
-    const darkResult = buildScaleForMode(darkSeed, templateId, darkAnchorStep, options.curves, gamutStrategy, "dark", options.p3 ?? false);
-    const 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,
-            anchorSteps: {
-                light: lightAnchorStep,
-                dark: darkAnchorStep,
-            },
-        },
-    };
-    if (mode === "light") {
-        return {
-            ...scale,
-            dark: scale.light,
-            p3: scale.p3 ? { light: scale.p3.light, dark: scale.p3.light } : undefined,
-            meta: scale.meta
-                ? {
-                    ...scale.meta,
-                    anchorSteps: { light: lightAnchorStep, dark: lightAnchorStep },
-                }
-                : undefined,
-        };
-    }
-    if (mode === "dark") {
-        return {
-            ...scale,
-            light: scale.dark,
-            p3: scale.p3 ? { light: scale.p3.dark, dark: scale.p3.dark } : undefined,
-            meta: scale.meta
-                ? {
-                    ...scale.meta,
-                    anchorSteps: { light: darkAnchorStep, dark: darkAnchorStep },
-                }
-                : undefined,
-        };
-    }
-    return scale;
-}

package/dist/overlays/generateOverlayScale.d.ts

@@ -1,2 +0,0 @@
-import type { OverlayScale } from "../types.js";
-export declare function generateOverlayScale(): OverlayScale;

package/dist/overlays/generateOverlayScale.js

@@ -1,34 +0,0 @@
-import Color from "colorjs.io";
-const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const alphaCurve = {
-    1: 0.05,
-    2: 0.1,
-    3: 0.15,
-    4: 0.2,
-    5: 0.3,
-    6: 0.4,
-    7: 0.5,
-    8: 0.6,
-    9: 0.7,
-    10: 0.8,
-    11: 0.9,
-    12: 0.95,
-};
-function mixWithAlpha(foreground, alpha) {
-    const color = new Color(foreground).to("srgb");
-    const [r, g, b] = color.coords;
-    const hex = new Color({ space: "srgb", coords: [r, g, b], alpha }).toString({
-        format: "hex",
-    });
-    return hex;
-}
-export function generateOverlayScale() {
-    const black = {};
-    const white = {};
-    for (const step of steps) {
-        const alpha = alphaCurve[step];
-        black[step] = mixWithAlpha("#000000", alpha);
-        white[step] = mixWithAlpha("#ffffff", alpha);
-    }
-    return { black, white };
-}

package/dist/text/generateTextScale.d.ts

@@ -1,8 +0,0 @@
-import type { ColorHex, TextScale } from "../types.js";
-type TextScaleOptions = {
-    darkBase?: ColorHex;
-    lightBase?: ColorHex;
-    deltaL?: number;
-};
-export declare function generateTextScale(options?: TextScaleOptions): TextScale;
-export {};

package/dist/text/generateTextScale.js

@@ -1,18 +0,0 @@
-import { compressToSrgb, hexToOklch, oklchToHex } from "../engine/oklch.js";
-const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-export function generateTextScale(options) {
-    const darkBase = options?.darkBase ?? "#1C1C1E";
-    const lightBase = options?.lightBase ?? "#F5F5F7";
-    const deltaL = options?.deltaL ?? 0.055;
-    const darkBaseOklch = hexToOklch(darkBase);
-    const lightBaseOklch = hexToOklch(lightBase);
-    const dark = {};
-    const light = {};
-    for (const step of steps) {
-        const darkL = Math.min(darkBaseOklch.l + (12 - step) * deltaL, 0.92);
-        const lightL = Math.max(lightBaseOklch.l - (step - 1) * deltaL, 0.12);
-        dark[step] = oklchToHex(compressToSrgb({ ...darkBaseOklch, l: darkL }));
-        light[step] = oklchToHex(compressToSrgb({ ...lightBaseOklch, l: lightL }));
-    }
-    return { dark, light };
-}

package/dist/text/resolveOnBgText.d.ts

@@ -1,9 +0,0 @@
-import type { ColorHex, Step, Theme } from "../types.js";
-export type TextOnBgTokens = {
-    zone: "light" | "mid" | "dark";
-    primary: ColorHex;
-    secondary: ColorHex;
-    tertiary?: ColorHex;
-    disabled?: ColorHex;
-};
-export declare function resolveOnBgTextTokens(theme: Theme, mode: "light" | "dark", backgroundStep: Step): TextOnBgTokens;

package/dist/text/resolveOnBgText.js

@@ -1,28 +0,0 @@
-function resolveZone(step) {
-    if (step <= 4) {
-        return "light";
-    }
-    if (step <= 8) {
-        return "mid";
-    }
-    return "dark";
-}
-export function resolveOnBgTextTokens(theme, mode, backgroundStep) {
-    const zone = resolveZone(backgroundStep);
-    const tokens = theme.tokens[mode];
-    const prefix = `text.onBg.${zone}`;
-    const primary = tokens[`${prefix}.primary`];
-    const secondary = tokens[`${prefix}.secondary`];
-    if (!primary || !secondary) {
-        throw new Error(`Missing text.onBg tokens for ${mode} ${zone}.`);
-    }
-    const tertiary = tokens[`${prefix}.tertiary`];
-    const disabled = tokens[`${prefix}.disabled`];
-    return {
-        zone,
-        primary,
-        secondary,
-        tertiary: tertiary || undefined,
-        disabled: disabled || undefined,
-    };
-}

package/dist/tokens/presetRadixLikeUi.d.ts

@@ -1,5 +0,0 @@
-import type { ColorHex, Scale } from "../types.js";
-export declare function buildPresetTokens(scales: Record<string, Scale>): {
-    light: Record<string, ColorHex>;
-    dark: Record<string, ColorHex>;
-};

package/dist/tokens/presetRadixLikeUi.js

@@ -1,55 +0,0 @@
-const tokenMap = [
-    { 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) {
-    const light = {};
-    const dark = {};
-    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/dist/types.d.ts

@@ -1,69 +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;
-    anchorSteps?: {
-        light: Step;
-        dark: Step;
-    };
-};
-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 AlphaScales = Record<string, AlphaScale>;
-export type OverlayScale = {
-    black: Record<Step, ColorHex>;
-    white: Record<Step, ColorHex>;
-};
-export type TextScale = {
-    dark: Record<Step, ColorHex>;
-    light: Record<Step, ColorHex>;
-};
-export type ThemeDiagnostics = {
-    contrast: Record<string, number>;
-    outOfGamutCount: number;
-    warnings?: readonly string[];
-};
-export type Theme = {
-    scales: Record<string, Scale>;
-    tokens: {
-        light: Record<string, ColorHex>;
-        dark: Record<string, ColorHex>;
-    };
-    alpha?: AlphaScales;
-    overlay: OverlayScale;
-    diagnostics?: ThemeDiagnostics;
-};
-export type ThemeColorMode = Omit<Theme, "scales"> & {
-    scales: Record<string, ScaleColorMode>;
-};
-export type OklchColor = {
-    l: number;
-    c: number;
-    h: number;
-};