@clhaas/palette-kit 0.1.8 → 0.3.0

package/src/export/exportTheme.test.ts

@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { createTheme } from "../core/createTheme.js";
+import * as gamut from "../engine/gamut.js";
+import { exportThemeCss, exportThemeJson, type ThemeTokens } from "./exportTheme.js";
+
+type ExportFixture = {
+  resolve: ReturnType<typeof createTheme>["resolve"];
+  tokens: ThemeTokens;
+};
+
+const buildTheme = (): ExportFixture => {
+  const theme = createTheme({
+    seeds: {
+      light: { neutral: "#111827", accent: "#3d63dd" },
+      dark: { neutral: "#111827", accent: "#3d63dd" },
+    },
+  });
+
+  const tokens: ThemeTokens = {
+    "text.primary": {
+      usage: "text",
+      surface: "surface",
+      emphasis: "default",
+    },
+    "bg.app": {
+      usage: "bg",
+      surface: "app",
+    },
+    "custom.alias": {
+      role: "text.primary",
+      usage: "text",
+      surface: "surface",
+    },
+  };
+
+  return {
+    resolve: theme.resolve.bind(theme),
+    tokens,
+  };
+};
+
+describe("exportTheme", () => {
+  it("throws when theme tokens are missing", () => {
+    const theme = createTheme({
+      seeds: {
+        light: { neutral: "#111827", accent: "#3d63dd" },
+        dark: { neutral: "#111827", accent: "#3d63dd" },
+      },
+    });
+
+    expect(() => exportThemeCss(theme, {})).toThrow(/Theme tokens are required for export/i);
+    expect(() => exportThemeJson(theme, {})).toThrow(/Theme tokens are required for export/i);
+  });
+
+  it("exports deterministic CSS with @supports overrides", () => {
+    const theme = buildTheme();
+    const { css } = exportThemeCss(theme, theme.tokens, {
+      preferSpace: "oklch",
+      includeSpaces: ["p3", "oklch"],
+    });
+
+    expect(css).toMatchSnapshot();
+  });
+
+  it("includes meta when requested and omits when not", () => {
+    const theme = buildTheme();
+
+    const withMeta = exportThemeJson(theme, theme.tokens, { includeMeta: true });
+    expect(withMeta.tokens.light["bg.app"].meta?.gamutMapping).toBe("preferP3ThenCompress");
+    expect(withMeta.meta).toEqual({
+      gamutMapping: "preferP3ThenCompress",
+      preferSpace: "oklch",
+      includeSpaces: [],
+      precision: { l: 1, c: 3, h: 1, alpha: 2 },
+      srgbFormat: "hex",
+      strict: false,
+    });
+
+    const withoutMeta = exportThemeJson(theme, theme.tokens, { includeMeta: false });
+    expect(withoutMeta.tokens.light["bg.app"].meta).toBeUndefined();
+  });
+
+  it("includes export meta for CSS when requested", () => {
+    const theme = buildTheme();
+    const { meta } = exportThemeCss(theme, theme.tokens, { includeMeta: true });
+
+    expect(meta).toEqual({
+      gamutMapping: "preferP3ThenCompress",
+      preferSpace: "oklch",
+      includeSpaces: [],
+      precision: { l: 1, c: 3, h: 1, alpha: 2 },
+      srgbFormat: "hex",
+      strict: false,
+    });
+  });
+
+  it("exports deterministic JSON with light/dark contexts", () => {
+    const theme = buildTheme();
+    const { tokens } = exportThemeJson(theme, theme.tokens, {
+      preferSpace: "oklch",
+      includeSpaces: ["srgb"],
+    });
+
+    expect(tokens).toMatchSnapshot();
+  });
+
+  it("keeps ordering stable regardless of token map order", () => {
+    const theme = buildTheme();
+    const shuffled: ThemeTokens = {
+      "custom.alias": theme.tokens["custom.alias"],
+      "bg.app": theme.tokens["bg.app"],
+      "text.primary": theme.tokens["text.primary"],
+    };
+
+    const cssA = exportThemeCss(theme, theme.tokens, { preferSpace: "oklch" }).css;
+    const cssB = exportThemeCss(theme, shuffled, { preferSpace: "oklch" }).css;
+    const jsonA = exportThemeJson(theme, theme.tokens, { preferSpace: "oklch" }).tokens;
+    const jsonB = exportThemeJson(theme, shuffled, { preferSpace: "oklch" }).tokens;
+
+    expect(cssA).toBe(cssB);
+    expect(jsonA).toEqual(jsonB);
+  });
+
+  it("throws when strict preferred space cannot be serialized", () => {
+    const theme = buildTheme();
+    const original = gamut.toGamutRgb;
+    const spy = vi
+      .spyOn(gamut, "toGamutRgb")
+      .mockImplementation((color, target) => (target === "p3" ? null : original(color, target)));
+
+    try {
+      expect(() =>
+        exportThemeCss(theme, theme.tokens, {
+          preferSpace: "p3",
+          includeSpaces: ["p3"],
+          strict: true,
+        }),
+      ).toThrow(/Unable to serialize preferred space: p3/i);
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

package/src/export/exportTheme.ts

@@ -0,0 +1,251 @@
+import type { OkLchColor } from "../engine/generateScale.js";
+import { serializeColorJson } from "../serialize/serializeColor.js";
+import type { ColorContext, ColorMeta, ColorQuery, OutputOptions } from "../types/index.js";
+import { serializeColor } from "./serializeColor.js";
+
+export type ThemeToken = Omit<ColorQuery, "role" | "output"> & { role?: string };
+export type ThemeTokens = Record<string, ThemeToken>;
+
+export type ExportableTheme = {
+  resolve: (query: ColorQuery) => { oklch: OkLchColor };
+};
+
+export type TokenValue = {
+  value: string;
+  srgb?: string;
+  p3?: string;
+  oklch?: string;
+  alpha: number;
+  meta?: ColorMeta;
+};
+
+export type ExportMeta = {
+  gamutMapping: NonNullable<OutputOptions["gamutMapping"]>;
+  preferSpace: NonNullable<OutputOptions["preferSpace"]>;
+  includeSpaces: NonNullable<OutputOptions["includeSpaces"]>;
+  precision: Required<NonNullable<OutputOptions["precision"]>>;
+  srgbFormat: NonNullable<OutputOptions["srgbFormat"]>;
+  strict: boolean;
+};
+
+const DEFAULT_OUTPUT = {
+  preferSpace: "oklch" as const,
+  includeSpaces: [] as NonNullable<OutputOptions["includeSpaces"]>,
+  gamutMapping: "preferP3ThenCompress" as const,
+  precision: { l: 1, c: 3, h: 1, alpha: 2 },
+  srgbFormat: "hex" as const,
+  strict: false,
+  includeMeta: false,
+};
+
+const normalizeExportOutput = (output?: OutputOptions) => ({
+  preferSpace: output?.preferSpace ?? DEFAULT_OUTPUT.preferSpace,
+  includeSpaces: output?.includeSpaces ?? DEFAULT_OUTPUT.includeSpaces,
+  gamutMapping: output?.gamutMapping ?? DEFAULT_OUTPUT.gamutMapping,
+  precision: {
+    ...DEFAULT_OUTPUT.precision,
+    ...output?.precision,
+  },
+  srgbFormat: output?.srgbFormat ?? DEFAULT_OUTPUT.srgbFormat,
+  strict: output?.strict ?? DEFAULT_OUTPUT.strict,
+  includeMeta: output?.includeMeta ?? DEFAULT_OUTPUT.includeMeta,
+});
+
+const buildExportMeta = (output: ReturnType<typeof normalizeExportOutput>): ExportMeta => ({
+  gamutMapping: output.gamutMapping,
+  preferSpace: output.preferSpace,
+  includeSpaces: output.includeSpaces,
+  precision: output.precision,
+  srgbFormat: output.srgbFormat,
+  strict: output.strict,
+});
+
+const getTokenEntries = (tokens: ThemeTokens) => {
+  if (!tokens || Object.keys(tokens).length === 0) {
+    throw new Error("Theme tokens are required for export");
+  }
+
+  return Object.entries(tokens).sort(([a], [b]) => a.localeCompare(b));
+};
+
+const getTokenRole = (name: string, token: ThemeToken) => token.role ?? name;
+
+const buildTokenQuery = (name: string, token: ThemeToken, context?: ColorContext): ColorQuery => {
+  const { role: _role, ...rest } = token;
+  return {
+    ...rest,
+    role: getTokenRole(name, token),
+    ...(context ? { context } : {}),
+  };
+};
+
+const buildTokenMeta = (name: string, token: ThemeToken, context?: ColorContext): ColorMeta => ({
+  role: getTokenRole(name, token),
+  ...(token.variant ? { variant: token.variant } : {}),
+  ...(token.usage ? { usage: token.usage } : {}),
+  ...(context ? { context } : token.context ? { context: token.context } : {}),
+  ...(token.surface ? { surface: token.surface } : {}),
+  ...(token.state ? { state: token.state } : {}),
+  ...(token.emphasis ? { emphasis: token.emphasis } : {}),
+  ...(token.on ? { on: token.on } : {}),
+  ...(token.contrast ? { contrast: token.contrast } : {}),
+});
+
+const buildTokenValue = (serialized: TokenValue): TokenValue => ({
+  value: serialized.value,
+  ...(serialized.srgb !== undefined ? { srgb: serialized.srgb } : {}),
+  ...(serialized.p3 !== undefined ? { p3: serialized.p3 } : {}),
+  ...(serialized.oklch !== undefined ? { oklch: serialized.oklch } : {}),
+  alpha: serialized.alpha,
+  ...(serialized.meta !== undefined ? { meta: serialized.meta } : {}),
+});
+
+const toCssVarName = (name: string) => name.replace(/\./g, "-");
+
+const indent = (lines: string[], prefix: string) =>
+  lines.length === 0 ? "" : lines.map((line) => `${prefix}${line}`).join("\n");
+
+/**
+ * Export CSS variables for a token map with progressive fallbacks.
+ *
+ * - Base output uses sRGB for maximum compatibility.
+ * - @supports blocks override the main token value with OKLCH and/or P3 as requested.
+ */
+export const exportThemeCss = (
+  theme: ExportableTheme,
+  tokens: ThemeTokens,
+  output?: OutputOptions,
+) => {
+  const normalized = normalizeExportOutput(output);
+  const entries = getTokenEntries(tokens);
+  const baseDecl: string[] = [];
+  const oklchDecl: string[] = [];
+  const p3Decl: string[] = [];
+
+  const needsOklch =
+    normalized.preferSpace === "oklch" || normalized.includeSpaces.includes("oklch");
+  const needsP3 = normalized.preferSpace === "p3" || normalized.includeSpaces.includes("p3");
+
+  for (const [name, token] of entries) {
+    const query = buildTokenQuery(name, token);
+    const resolved = theme.resolve(query);
+    const meta = normalized.includeMeta ? buildTokenMeta(name, token) : undefined;
+    const baseName = toCssVarName(name);
+
+    // Base fallback MUST be sRGB (no silent OKLCH fallback).
+    const baseSrgb = serializeColor(
+      resolved.oklch,
+      { ...normalized, preferSpace: "srgb", includeSpaces: [], strict: normalized.strict },
+      meta,
+    ).value;
+
+    baseDecl.push(`--pk-${baseName}: ${baseSrgb};`);
+    if (normalized.includeSpaces.includes("srgb")) {
+      baseDecl.push(`--pk-${baseName}-srgb: ${baseSrgb};`);
+    }
+
+    if (needsOklch) {
+      const oklchValue = serializeColor(
+        resolved.oklch,
+        { ...normalized, preferSpace: "oklch", includeSpaces: [] },
+        meta,
+      ).value;
+
+      if (normalized.preferSpace === "oklch") {
+        oklchDecl.push(`--pk-${baseName}: ${oklchValue};`);
+      }
+      if (normalized.includeSpaces.includes("oklch")) {
+        oklchDecl.push(`--pk-${baseName}-oklch: ${oklchValue};`);
+      }
+    }
+
+    if (needsP3) {
+      const p3Text = serializeColor(
+        resolved.oklch,
+        { ...normalized, preferSpace: "oklch", includeSpaces: ["p3"] },
+        meta,
+      ).p3;
+
+      if (normalized.preferSpace === "p3") {
+        if (!p3Text) {
+          if (normalized.strict) {
+            throw new Error("Unable to serialize preferred space: p3");
+          }
+        } else {
+          p3Decl.push(`--pk-${baseName}: ${p3Text};`);
+        }
+      }
+
+      if (normalized.includeSpaces.includes("p3") && p3Text) {
+        p3Decl.push(`--pk-${baseName}-p3: ${p3Text};`);
+      }
+    }
+  }
+
+  const blocks: string[] = [];
+  blocks.push(`:root {\n${indent(baseDecl, "  ")}\n}\n`);
+
+  if (oklchDecl.length > 0) {
+    blocks.push(
+      `@supports (color: oklch(0% 0 0)) {\n  :root {\n${indent(oklchDecl, "    ")}\n  }\n}\n`,
+    );
+  }
+  if (p3Decl.length > 0) {
+    blocks.push(
+      `@supports (color: color(display-p3 1 1 1)) {\n  :root {\n${indent(p3Decl, "    ")}\n  }\n}\n`,
+    );
+  }
+
+  return {
+    css: `${blocks.join("\n").trimEnd()}\n`,
+    meta: normalized.includeMeta ? buildExportMeta(normalized) : undefined,
+  };
+};
+
+/**
+ * Export JSON tokens for both light and dark contexts.
+ */
+export const exportThemeJson = (
+  theme: ExportableTheme,
+  tokens: ThemeTokens,
+  output?: OutputOptions,
+) => {
+  const normalized = normalizeExportOutput(output);
+  const entries = getTokenEntries(tokens);
+  const lightTokens: Record<string, TokenValue> = {};
+  const darkTokens: Record<string, TokenValue> = {};
+
+  const contexts: ColorContext[] = ["light", "dark"];
+
+  for (const [name, token] of entries) {
+    for (const context of contexts) {
+      const query = buildTokenQuery(name, token, context);
+      const resolved = theme.resolve(query);
+      const meta = normalized.includeMeta ? buildTokenMeta(name, token, context) : undefined;
+      const serialized = serializeColorJson(resolved.oklch, normalized, meta);
+
+      const entry = buildTokenValue({
+        value: serialized.value,
+        srgb: serialized.srgb,
+        p3: serialized.p3,
+        oklch: serialized.oklch,
+        alpha: serialized.alpha,
+        meta: serialized.meta,
+      });
+
+      if (context === "light") {
+        lightTokens[name] = entry;
+      } else {
+        darkTokens[name] = entry;
+      }
+    }
+  }
+
+  return {
+    tokens: {
+      light: lightTokens,
+      dark: darkTokens,
+    },
+    meta: normalized.includeMeta ? buildExportMeta(normalized) : undefined,
+  };
+};

package/src/export/index.ts

@@ -0,0 +1 @@
+export * from "./exportTheme.js";

package/src/export/serializeColor.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { serializeColor } from "./serializeColor.js";
+import { serializeColorJson } from "../serialize/serializeColor.js";
+import * as gamut from "../engine/gamut.js";
+
+describe("serializeColor", () => {
+  it("serializes CSS with precision and includeSpaces", () => {
+    const color = { l: 60.12, c: 0.2345, h: 40.49, alpha: 0.5 };
+    const result = serializeColor(color, {
+      preferSpace: "oklch",
+      includeSpaces: ["srgb", "p3", "oklch"],
+      gamutMapping: "compressChroma",
+      precision: { l: 1, c: 2, h: 0, alpha: 2 },
+    });
+
+    expect(result.value).toBe("oklch(60.1% 0.23 40 / 0.5)");
+    expect(result.oklch).toBe("oklch(60.1% 0.23 40 / 0.5)");
+    expect(result.srgb).toMatch(/^#[0-9a-f]{8}$/i);
+    expect(result.p3?.startsWith("color(display-p3 ")).toBe(true);
+  });
+
+  it("serializes JSON with includeSpaces and rounding", () => {
+    const color = { l: 60.12, c: 0.2345, h: 40.49, alpha: 0.5 };
+    const result = serializeColorJson(color, {
+      preferSpace: "p3",
+      includeSpaces: ["srgb", "oklch"],
+      gamutMapping: "preferP3ThenCompress",
+      precision: { l: 1, c: 2, h: 0, alpha: 2 },
+    });
+
+    expect(result.value.startsWith("color(display-p3 ")).toBe(true);
+    expect(result.oklch).toBeDefined();
+    expect(result.srgb).toBeDefined();
+    expect(result.oklch).toBe("oklch(60.1% 0.23 40 / 0.5)");
+    expect(result.alpha).toBe(0.5);
+  });
+
+  it("clamps alpha to [0..1] in CSS and JSON outputs", () => {
+    const colorHi = { l: 60, c: 0.2, h: 40, alpha: 2 };
+    const cssHi = serializeColor(colorHi, { preferSpace: "oklch", precision: { alpha: 2 } });
+    expect(cssHi.alpha).toBe(1);
+    expect(cssHi.value).toMatch(/^oklch\(/);
+
+    const colorLo = { l: 60, c: 0.2, h: 40, alpha: -1 };
+    const jsonLo = serializeColorJson(colorLo, { preferSpace: "oklch", precision: { alpha: 2 } });
+    expect(jsonLo.alpha).toBe(0);
+    expect(jsonLo.value).toMatch(/\/\s*0(\.0+)?\)/);
+    expect(jsonLo.oklch).toMatch(/\/\s*0(\.0+)?\)/);
+  });
+
+  it("throws in strict mode when preferred space cannot be serialized", () => {
+    const spy = vi.spyOn(gamut, "toGamutRgb").mockReturnValue(null);
+
+    try {
+      expect(() =>
+        serializeColor(
+          { l: 60, c: 0.2, h: 40, alpha: 1 },
+          { preferSpace: "srgb", includeSpaces: ["srgb"], strict: true },
+        ),
+      ).toThrow(/Unable to serialize preferred space: srgb/i);
+
+      expect(() =>
+        serializeColorJson(
+          { l: 60, c: 0.2, h: 40, alpha: 1 },
+          { preferSpace: "p3", includeSpaces: ["p3"], strict: true },
+        ),
+      ).toThrow(/Unable to serialize preferred space: p3/i);
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

package/src/export/serializeColor.ts

@@ -0,0 +1 @@
+export { serializeColor } from "../serialize/serializeColor.js";

package/src/export.ts

@@ -0,0 +1 @@
+export * from "./export/index.js";

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { PaletteConfig, TokenPresetName } from "./cli/config.js";
+export * from "./core/index.js";
+export * from "./types/index.js";

package/src/operators/emphasis.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+
+import { applyEmphasisOperator } from "./emphasis.js";
+import { getStepLightness } from "./utils.js";
+
+const base = {
+  oklch: { l: 62, c: 0.06, h: 215 },
+  context: "light" as const,
+  surface: "surface" as const,
+  usage: "text" as const,
+  state: "default" as const,
+  emphasis: "default" as const,
+  preset: "modern" as const,
+  step: 11,
+};
+
+describe("applyEmphasisOperator", () => {
+  it("muted and subtle reduce chroma predictably", () => {
+    const muted = applyEmphasisOperator({ ...base, emphasis: "muted" });
+    const subtle = applyEmphasisOperator({ ...base, emphasis: "subtle" });
+
+    expect(muted.c).toBeLessThan(base.oklch.c);
+    expect(subtle.c).toBeLessThan(base.oklch.c);
+    expect(subtle.c).toBeGreaterThan(muted.c);
+  });
+
+  it("strong increases chroma", () => {
+    const strong = applyEmphasisOperator({ ...base, emphasis: "strong" });
+
+    expect(strong.c).toBeGreaterThan(base.oklch.c);
+  });
+
+  it("strong shifts text lightness by context", () => {
+    const strongLight = applyEmphasisOperator({ ...base, emphasis: "strong", usage: "text" });
+    const strongDark = applyEmphasisOperator({
+      ...base,
+      emphasis: "strong",
+      usage: "text",
+      context: "dark",
+    });
+
+    expect(strongLight.l).toBeLessThan(base.oklch.l);
+    expect(strongDark.l).toBeGreaterThan(base.oklch.l);
+  });
+
+  it("does not change hue", () => {
+    const muted = applyEmphasisOperator({ ...base, emphasis: "muted" });
+
+    expect(muted.h).toBeCloseTo(base.oklch.h, 6);
+  });
+
+  it("inverted leaves backgrounds unchanged", () => {
+    const invertedBg = applyEmphasisOperator({
+      ...base,
+      emphasis: "inverted",
+      usage: "bg",
+    });
+
+    expect(invertedBg.l).toBeCloseTo(base.oklch.l, 6);
+  });
+
+  it("inverted leaves non-text usage unchanged", () => {
+    const invertedBorder = applyEmphasisOperator({
+      ...base,
+      emphasis: "inverted",
+      usage: "border",
+    });
+
+    expect(invertedBorder.l).toBeCloseTo(base.oklch.l, 6);
+    expect(invertedBorder.c).toBeCloseTo(base.oklch.c, 6);
+    expect(invertedBorder.h).toBeCloseTo(base.oklch.h, 6);
+  });
+
+  it("inverted moves text toward the target step without changing hue", () => {
+    const targetL = getStepLightness(base.preset, base.surface, base.context, 12);
+    const inverted = applyEmphasisOperator({
+      ...base,
+      emphasis: "inverted",
+      usage: "text",
+    });
+
+    expect(Math.abs(inverted.l - targetL)).toBeLessThan(Math.abs(base.oklch.l - targetL));
+    expect(inverted.h).toBeCloseTo(base.oklch.h, 6);
+  });
+});

package/src/operators/emphasis.ts

@@ -0,0 +1,132 @@
+import type { OkLchColor } from "../engine/generateScale.js";
+import { clamp } from "../utils/clamp.js";
+import type { OperatorInput } from "./types.js";
+import { getNeutralL, getStepLightness, getSurfaceRange } from "./utils.js";
+
+type EmphasisTuning = {
+  mutedChroma: number;
+  subtleChroma: number;
+  strongChroma: number;
+  mutedNeutralPull: number;
+  subtleNeutralPull: number;
+  strongDelta: number;
+};
+
+const EMPHASIS_TUNING: Record<OperatorInput["surface"], EmphasisTuning> = {
+  app: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.45,
+    subtleNeutralPull: 0.2,
+    strongDelta: 2,
+  },
+  surface: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.45,
+    subtleNeutralPull: 0.2,
+    strongDelta: 2.5,
+  },
+  subtle: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.5,
+    subtleNeutralPull: 0.25,
+    strongDelta: 3,
+  },
+  solid: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.5,
+    subtleNeutralPull: 0.25,
+    strongDelta: 4,
+  },
+  overlay: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.5,
+    subtleNeutralPull: 0.25,
+    strongDelta: 3,
+  },
+  data: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.5,
+    subtleNeutralPull: 0.25,
+    strongDelta: 4,
+  },
+  transparent: {
+    mutedChroma: 0.55,
+    subtleChroma: 0.75,
+    strongChroma: 1.1,
+    mutedNeutralPull: 0.45,
+    subtleNeutralPull: 0.2,
+    strongDelta: 2,
+  },
+};
+
+const INVERTED_LERP_FACTOR = 0.8;
+
+const clampOkLch = (color: OkLchColor, maxChroma: number): OkLchColor => ({
+  ...color,
+  l: clamp(color.l, 0, 100),
+  c: clamp(color.c, 0, maxChroma),
+});
+
+export const applyEmphasisOperator = (input: OperatorInput): OkLchColor => {
+  const { emphasis, context, surface, usage } = input;
+  const tuning = EMPHASIS_TUNING[surface];
+  const range = getSurfaceRange(input.preset, surface, context);
+  const neutralL = getNeutralL(input.preset, surface, context);
+
+  if (emphasis === "default") {
+    return input.oklch;
+  }
+
+  const next: OkLchColor = { ...input.oklch };
+
+  switch (emphasis) {
+    case "muted":
+      next.c *= tuning.mutedChroma;
+      next.l += (neutralL - next.l) * tuning.mutedNeutralPull;
+      break;
+    case "subtle":
+      next.c *= tuning.subtleChroma;
+      next.l += (neutralL - next.l) * tuning.subtleNeutralPull;
+      break;
+    case "strong": {
+      const diff = next.l - neutralL;
+      let direction = diff === 0 ? (context === "light" ? -1 : 1) : Math.sign(diff);
+
+      if (usage === "text" || usage === "icon") {
+        direction = context === "light" ? -1 : 1;
+      } else if (context === "light" && direction > 0) {
+        direction = -1;
+      } else if (context === "dark" && direction < 0) {
+        direction = 1;
+      }
+
+      next.c *= tuning.strongChroma;
+      next.l += direction * tuning.strongDelta;
+      break;
+    }
+    case "inverted": {
+      if (usage === "text" || usage === "icon") {
+        const targetStep = input.step === 12 ? 11 : 12;
+        const targetL = getStepLightness(input.preset, surface, context, targetStep);
+        next.l += (targetL - next.l) * INVERTED_LERP_FACTOR;
+      }
+      break;
+    }
+    default:
+      return input.oklch;
+  }
+
+  return clampOkLch(next, range.cMax);
+};