zidane-ui 9.0.4 → 9.1.3

package/src/theme/color.ts

@@ -1,450 +0,0 @@
-/**
- * Minimal color engine for the theming pipeline. sRGB ⇄ OKLab ⇄ OKLCH,
- * WCAG contrast, perceptual mixing. Pure functions, no DOM, no deps: the
- * derivation (`derive.ts`) and its tests run under vitest/node.
- *
- * Inputs accept `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()/rgba()` and
- * `oklch()`; outputs are always `#rrggbb` (or `rgba()` when alpha < 1) so
- * the values drop straight into CSS custom properties and into shiki /
- * canvas APIs that don't understand modern color syntax.
- */
-
-/** A color in sRGB, every channel from 0 to 1. */
-export interface Rgb {
-  /** Red channel, 0..1 */
-  r: number;
-  /** Green channel, 0..1 */
-  g: number;
-  /** Blue channel, 0..1 */
-  b: number;
-  /** Alpha, 0..1 */
-  a: number;
-}
-
-/** A color in OKLCH: perceptual lightness, chroma and hue, plus alpha. */
-export interface Oklch {
-  /** Lightness, 0..1 */
-  l: number;
-  /** Chroma, 0..~0.4 */
-  c: number;
-  /** Hue in degrees, 0..360 */
-  h: number;
-  /** Alpha, 0..1 */
-  a: number;
-}
-
-const clamp01 = (n: number): number => (n < 0 ? 0 : n > 1 ? 1 : n);
-
-// ---------------------------------------------------------------------------
-// Parsing / formatting
-// ---------------------------------------------------------------------------
-
-/**
- * Parses a CSS color into sRGB. It accepts `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`,
- * `rgba()` and `oklch()`; an OKLCH color out of gamut is chroma-reduced to fit.
- *
- * @param input - The color string.
- * @returns The color, or `undefined` when the string is not a supported color.
- */
-export function parseColor(input: string): Rgb | undefined {
-  const s = input.trim().toLowerCase();
-
-  if (s.startsWith('#')) {
-    return parseHex(s);
-  }
-
-  const fn = /^(rgba?|oklch)\((.*)\)$/.exec(s);
-  if (!fn) {
-    return undefined;
-  }
-
-  const args = fn[2]
-    .replace(/\//g, ' ')
-    .split(/[\s,]+/)
-    .filter(Boolean);
-
-  if (fn[1] === 'oklch') {
-    if (args.length < 3) {
-      return undefined;
-    }
-    const l = pct(args[0], 1);
-    const c = pct(args[1], 0.4);
-    const h = parseFloat(args[2]);
-    const a = args[3] !== undefined ? pct(args[3], 1) : 1;
-    if ([l, c, h, a].some((n) => Number.isNaN(n))) {
-      return undefined;
-    }
-    return oklchToRgb({ l, c, h, a });
-  }
-
-  if (args.length < 3) {
-    return undefined;
-  }
-  const r = pct(args[0], 255) / 255;
-  const g = pct(args[1], 255) / 255;
-  const b = pct(args[2], 255) / 255;
-  const a = args[3] !== undefined ? pct(args[3], 1) : 1;
-  if ([r, g, b, a].some((n) => Number.isNaN(n))) {
-    return undefined;
-  }
-  return { r: clamp01(r), g: clamp01(g), b: clamp01(b), a: clamp01(a) };
-}
-
-/** `50%` → scale*0.5; bare number → as-is. */
-function pct(token: string, scale: number): number {
-  return token.endsWith('%') ? (parseFloat(token) / 100) * scale : parseFloat(token);
-}
-
-function parseHex(s: string): Rgb | undefined {
-  let hex = s.slice(1);
-  if (hex.length === 3 || hex.length === 4) {
-    hex = hex
-      .split('')
-      .map((ch) => ch + ch)
-      .join('');
-  }
-  if (hex.length !== 6 && hex.length !== 8) {
-    return undefined;
-  }
-  if (!/^[0-9a-f]+$/.test(hex)) {
-    return undefined;
-  }
-  const n = parseInt(hex.slice(0, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
-  return { r: ((n >> 16) & 0xff) / 255, g: ((n >> 8) & 0xff) / 255, b: (n & 0xff) / 255, a };
-}
-
-/**
- * Formats a color as CSS: `#rrggbb`, or `rgba()` when alpha is below 1.
- *
- * @param c - The color to format.
- * @returns The CSS color string.
- */
-export function formatColor(c: Rgb): string {
-  const to255 = (n: number): number => Math.round(clamp01(n) * 255);
-  if (c.a < 1) {
-    return `rgba(${to255(c.r)}, ${to255(c.g)}, ${to255(c.b)}, ${round(c.a, 3)})`;
-  }
-  return `#${[c.r, c.g, c.b].map((n) => to255(n).toString(16).padStart(2, '0')).join('')}`;
-}
-
-function round(n: number, digits: number): number {
-  const f = 10 ** digits;
-  return Math.round(n * f) / f;
-}
-
-/**
- * Convenience: parse → OKLCH → format, for terse palette code.
- *
- * @param l - Lightness, 0..1.
- * @param c - Chroma, 0..~0.4.
- * @param h - Hue in degrees.
- * @param a - Alpha, 0..1.
- * @returns The CSS color string, gamut-mapped to sRGB.
- */
-export function oklch(l: number, c: number, h: number, a = 1): string {
-  return formatColor(oklchToRgb({ l, c, h, a }));
-}
-
-/**
- * Returns `color` with its alpha replaced.
- *
- * @param color - The CSS color. Returned unchanged when it cannot be parsed.
- * @param alpha - The new alpha, clamped to 0..1.
- * @returns The CSS color string.
- */
-export function withAlpha(color: string, alpha: number): string {
-  const rgb = parseColor(color);
-  if (!rgb) {
-    return color;
-  }
-  return formatColor({ ...rgb, a: clamp01(alpha) });
-}
-
-// ---------------------------------------------------------------------------
-// sRGB ⇄ OKLab ⇄ OKLCH (Björn Ottosson's reference matrices)
-// ---------------------------------------------------------------------------
-
-function srgbToLinear(v: number): number {
-  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-}
-
-function linearToSrgb(v: number): number {
-  return v <= 0.0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055;
-}
-
-interface Oklab {
-  L: number;
-  a: number;
-  b: number;
-}
-
-function rgbToOklab(c: Rgb): Oklab {
-  const r = srgbToLinear(c.r);
-  const g = srgbToLinear(c.g);
-  const b = srgbToLinear(c.b);
-
-  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-
-  return {
-    L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-  };
-}
-
-function oklabToRgb(c: Oklab, alpha: number): Rgb {
-  const l_ = c.L + 0.3963377774 * c.a + 0.2158037573 * c.b;
-  const m_ = c.L - 0.1055613458 * c.a - 0.0638541728 * c.b;
-  const s_ = c.L - 0.0894841775 * c.a - 1.291485548 * c.b;
-
-  const l = l_ ** 3;
-  const m = m_ ** 3;
-  const s = s_ ** 3;
-
-  return {
-    r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
-    g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
-    b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
-    a: alpha,
-  };
-}
-
-/**
- * Converts an sRGB color to OKLCH. Near-gray colors get a chroma and hue of 0.
- *
- * @param c - The sRGB color.
- * @returns The OKLCH color.
- */
-export function rgbToOklch(c: Rgb): Oklch {
-  const lab = rgbToOklab(c);
-  const chroma = Math.hypot(lab.a, lab.b);
-  let hue = (Math.atan2(lab.b, lab.a) * 180) / Math.PI;
-  if (hue < 0) {
-    hue += 360;
-  }
-  return { l: lab.L, c: chroma < 1e-6 ? 0 : chroma, h: chroma < 1e-6 ? 0 : hue, a: c.a };
-}
-
-/**
- * OKLCH → sRGB with gamut mapping: if the color is out of gamut, chroma is
- * reduced (binary search) until it fits. Lightness and hue are preserved,
- * which is what you want when deriving ramps: a too-vivid accent becomes
- * the most vivid *displayable* version of itself instead of clipping to a
- * different hue.
- *
- * @param c - The OKLCH color.
- * @returns The sRGB color, clamped to 0..1.
- */
-export function oklchToRgb(c: Oklch): Rgb {
-  const toLab = (chroma: number): Oklab => {
-    const rad = (c.h * Math.PI) / 180;
-    return { L: c.l, a: Math.cos(rad) * chroma, b: Math.sin(rad) * chroma };
-  };
-
-  let rgb = oklabToRgb(toLab(c.c), c.a);
-  if (inGamut(rgb)) {
-    return clampRgb(rgb);
-  }
-
-  let lo = 0;
-  let hi = c.c;
-  for (let i = 0; i < 20; i++) {
-    const mid = (lo + hi) / 2;
-    rgb = oklabToRgb(toLab(mid), c.a);
-    if (inGamut(rgb)) {
-      lo = mid;
-    } else {
-      hi = mid;
-    }
-  }
-  return clampRgb(oklabToRgb(toLab(lo), c.a));
-}
-
-function inGamut(c: Rgb): boolean {
-  const eps = 0.0005;
-  return c.r >= -eps && c.r <= 1 + eps && c.g >= -eps && c.g <= 1 + eps && c.b >= -eps && c.b <= 1 + eps;
-}
-
-function clampRgb(c: Rgb): Rgb {
-  return { r: clamp01(c.r), g: clamp01(c.g), b: clamp01(c.b), a: clamp01(c.a) };
-}
-
-/**
- * Parses a CSS color and converts it to OKLCH.
- *
- * @param color - The CSS color string.
- * @returns The OKLCH color, or `undefined` when the string cannot be parsed.
- */
-export function toOklch(color: string): Oklch | undefined {
-  const rgb = parseColor(color);
-  return rgb ? rgbToOklch(rgb) : undefined;
-}
-
-// ---------------------------------------------------------------------------
-// Contrast / luminance
-// ---------------------------------------------------------------------------
-
-/**
- * WCAG relative luminance, 0 (black) .. 1 (white). Alpha is ignored.
- *
- * @param color - A CSS color string or an sRGB color. An unparseable string counts as black.
- */
-export function luminance(color: string | Rgb): number {
-  const c = typeof color === 'string' ? parseColor(color) : color;
-  if (!c) {
-    return 0;
-  }
-  return 0.2126 * srgbToLinear(c.r) + 0.7152 * srgbToLinear(c.g) + 0.0722 * srgbToLinear(c.b);
-}
-
-/**
- * WCAG 2.x contrast ratio, 1..21.
- *
- * @param a - The first color.
- * @param b - The second color.
- */
-export function contrastRatio(a: string | Rgb, b: string | Rgb): number {
-  const la = luminance(a);
-  const lb = luminance(b);
-  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-  return (hi + 0.05) / (lo + 0.05);
-}
-
-/**
- * Threshold under which a surface is "dark" for the purpose of picking a
- * white vs black foreground. 0.179 is the point where white and black text
- * have equal WCAG contrast against the surface.
- */
-export const DARK_LUMINANCE_THRESHOLD = 0.179;
-
-/**
- * Tells whether a surface color is dark enough that white text reads better than black.
- *
- * @param color - The CSS color of the surface.
- * @returns `true` when its luminance is below {@link DARK_LUMINANCE_THRESHOLD}.
- */
-export function isDark(color: string): boolean {
-  return luminance(color) < DARK_LUMINANCE_THRESHOLD;
-}
-
-// ---------------------------------------------------------------------------
-// Mixing / adjustment
-// ---------------------------------------------------------------------------
-
-/**
- * Perceptual mix in OKLab. `t = 0` → a, `t = 1` → b. Alpha is mixed linearly.
- *
- * @param a - The color at `t = 0`. Returned when either color cannot be parsed.
- * @param b - The color at `t = 1`.
- * @param t - How far from `a` to `b`, clamped to 0..1.
- */
-export function mix(a: string, b: string, t: number): string {
-  const ca = parseColor(a);
-  const cb = parseColor(b);
-  if (!ca || !cb) {
-    return a;
-  }
-  const la = rgbToOklab(ca);
-  const lb = rgbToOklab(cb);
-  const k = clamp01(t);
-  return formatColor(
-    oklabToRgb(
-      { L: la.L + (lb.L - la.L) * k, a: la.a + (lb.a - la.a) * k, b: la.b + (lb.b - la.b) * k },
-      ca.a + (cb.a - ca.a) * k,
-    ),
-  );
-}
-
-/**
- * Return `color` with lightness set (0..1), chroma/hue preserved (gamut-mapped).
- *
- * @param color - The CSS color.
- * @param l - The new lightness, 0..1.
- */
-export function withLightness(color: string, l: number): string {
-  const c = toOklch(color);
-  if (!c) {
-    return color;
-  }
-  return formatColor(oklchToRgb({ ...c, l: clamp01(l) }));
-}
-
-/**
- * Return `color` with chroma capped at `max`.
- *
- * @param color - The CSS color.
- * @param max - The highest chroma to keep.
- */
-export function capChroma(color: string, max: number): string {
-  const c = toOklch(color);
-  if (!c) {
-    return color;
-  }
-  return c.c <= max ? color : formatColor(oklchToRgb({ ...c, c: max }));
-}
-
-/**
- * Build a color of the given lightness that carries a faint tint of `hue`
- * source, the "neutral with personality" every good editor theme uses
- * instead of pure gray. Chroma is `tint`, clamped to what stays subtle.
- *
- * @param l - Lightness, 0..1.
- * @param tintSource - The color whose hue the neutral carries. Without a parseable one the result
- * is pure gray.
- * @param tint - The chroma of the tint, clamped to 0..0.06.
- */
-export function tintedNeutral(l: number, tintSource: string, tint: number): string {
-  const src = toOklch(tintSource);
-  const chroma = Math.min(Math.max(tint, 0), 0.06);
-  return formatColor(oklchToRgb({ l: clamp01(l), c: src ? chroma : 0, h: src?.h ?? 0, a: 1 }));
-}
-
-/**
- * Nudge `fg` lightness away from `bg` until `contrastRatio(fg, bg) >= min`,
- * keeping hue/chroma. Returns the first passing color, or the extreme
- * (white / black by surface luminance) when the hue can't reach the target.
- *
- * @param fg - The foreground color to adjust.
- * @param bg - The background it sits on.
- * @param min - The contrast ratio to reach.
- */
-export function ensureContrast(fg: string, bg: string, min: number): string {
-  if (contrastRatio(fg, bg) >= min) {
-    return fg;
-  }
-
-  const c = toOklch(fg);
-  if (!c) {
-    return isDark(bg) ? '#ffffff' : '#000000';
-  }
-
-  const lighten = isDark(bg);
-  // Step in the direction that increases contrast; 50 steps of 0.02 cover
-  // the whole lightness range from any starting point.
-  for (let i = 1; i <= 50; i++) {
-    const l = clamp01(c.l + (lighten ? 1 : -1) * i * 0.02);
-    const candidate = formatColor(oklchToRgb({ ...c, l }));
-    if (contrastRatio(candidate, bg) >= min) {
-      return candidate;
-    }
-    if (l === 0 || l === 1) {
-      break;
-    }
-  }
-  return lighten ? '#ffffff' : '#000000';
-}
-
-/**
- * Pick a readable foreground for `bg`: `preferred` if it already passes
- * `min`, else `preferred` pushed until it does, else pure white/black.
- *
- * @param bg - The background color.
- * @param preferred - The foreground to use when it is readable.
- * @param min - The contrast ratio to reach. Defaults to 4.5.
- */
-export function readableOn(bg: string, preferred: string, min = 4.5): string {
-  return ensureContrast(preferred, bg, min);
-}

package/src/theme/css-vars.ts

@@ -1,187 +0,0 @@
-/**
- * A `ResolvedPalette` as `--zg-*` custom properties (pure: no DOM). The
- * desktop app writes these onto :root at runtime; static sites render them
- * into a stylesheet (`./stylesheet.ts`).
- *
- * Naming contract (also the list `styles/tokens.css` expects):
- *
- *   surfaces   --zg-bg  --zg-surface-1/2/3  --zg-bg-selected  --zg-hover-wash  --zg-row-hover
- *   lines      --zg-border-raw  --zg-border-strong  --zg-ring
- *   text       --zg-text-raw  --zg-text-muted-raw  --zg-text-subtle-raw
- *              (the contrast layer in styles/tokens.css turns the `-raw` inputs into
- *               --zg-text / --zg-text-muted / --zg-text-subtle / --zg-border)
- *   accent     --zg-accent  --zg-accent-hover  --zg-accent-soft(-strong)  --zg-accent-wash
- *              --zg-accent-fg  --zg-accent-fill(-hover/-fg)  --zg-accent-alt  --zg-model
- *   status     --zg-success/-soft  --zg-warn/-soft  --zg-danger/-soft  --zg-info/-soft
- *              --zg-danger-fill(-hover/-fg)
- *   dots       --zg-{accent,accent-alt,success,warn,danger,info}-dot: decorative
- *              fills (dots, the orb, window lights), never text
- *   sphere     --zg-orb-tone  --zg-orb-shade  --zg-orb-rim  --zg-orb-glow
- *   depth      --zg-tray-raw  --zg-raised-raw  --zg-track-raw  --zg-hairline-raw
- *              --zg-well-raw  --zg-overlay-raw  --zg-raised-edge-raw  --zg-tray-ring-raw
- *              (the contrast layer turns the `-raw` inputs into --zg-tray /
- *               --zg-raised / --zg-track / --zg-hairline / --zg-well;
- *               `depthToCssVars` writes --zg-shadow-raised / -live / -inset /
- *               -float / -well / -fill and --zg-fill-sheen, `none` when flat)
- *   misc       --zg-code-bg  --zg-code-fg  --zg-selection  --zg-scrim  --zg-shadow
- *   diff       --zg-diff-{add,remove}-{bg,content-bg,fg}
- *   chips      --zg-chip-{default,skills,files}-{bg,fg}
- *   legacy     --zg-throbber-a/b  --zg-money
- *
- * Legacy aliases (`--zg-bg-elevated`, `--zg-bg-hover`, `--zg-error`,
- * `--zg-border-active`) are declared in styles/tokens.css as `var()` references
- * to the new names, so nothing here writes them.
- */
-import type { Appearance, ResolvedPalette, SurfaceLadder } from './derive';
-
-/** A map of `--zg-*` custom property names to their CSS values. */
-export type CssVarMap = Record<`--zg-${string}`, string>;
-
-/**
- * Turns a resolved palette into `--zg-*` custom properties: surfaces, lines, text, accent,
- * status colours, dots, sphere, depth inputs, diff and chip colours. Pure, with no DOM.
- *
- * @param p - The resolved palette.
- * @returns The custom properties to write onto `:root` or into a stylesheet.
- */
-export function paletteToCssVars(p: ResolvedPalette): CssVarMap {
-  return {
-    '--zg-bg': p.bg,
-    '--zg-surface-1': p.surface1,
-    '--zg-surface-2': p.surface2,
-    '--zg-surface-3': p.surface3,
-    '--zg-bg-selected': p.selected,
-    '--zg-hover-wash': p.hoverWash,
-
-    '--zg-border-raw': p.border,
-    '--zg-border-strong': p.borderStrong,
-    '--zg-ring': p.ring,
-
-    '--zg-text-raw': p.text,
-    '--zg-text-muted-raw': p.textMuted,
-    '--zg-text-subtle-raw': p.textSubtle,
-
-    '--zg-accent': p.accent,
-    '--zg-accent-hover': p.accentHover,
-    '--zg-accent-soft': p.accentSoft,
-    '--zg-accent-soft-strong': p.accentSoftStrong,
-    '--zg-accent-wash': p.accentWash,
-    '--zg-accent-fg': p.accentFg,
-    '--zg-accent-fill': p.accentFill,
-    '--zg-accent-fill-hover': p.accentFillHover,
-    '--zg-accent-fill-fg': p.accentFillFg,
-    '--zg-accent-alt': p.accentAlt,
-    '--zg-model': p.model,
-
-    '--zg-success': p.success,
-    '--zg-success-soft': p.successSoft,
-    '--zg-warn': p.warn,
-    '--zg-warn-soft': p.warnSoft,
-    '--zg-danger': p.danger,
-    '--zg-danger-soft': p.dangerSoft,
-    '--zg-danger-fill': p.dangerFill,
-    '--zg-danger-fill-hover': p.dangerFillHover,
-    '--zg-danger-fill-fg': p.dangerFillFg,
-    '--zg-info': p.info,
-    '--zg-info-soft': p.infoSoft,
-
-    '--zg-accent-dot': p.dots.accent,
-    '--zg-accent-alt-dot': p.dots.accentAlt,
-    '--zg-success-dot': p.dots.success,
-    '--zg-warn-dot': p.dots.warn,
-    '--zg-danger-dot': p.dots.danger,
-    '--zg-info-dot': p.dots.info,
-
-    '--zg-orb-tone': p.surfaces.sphere.tone,
-    '--zg-orb-shade': p.surfaces.sphere.shade,
-    '--zg-orb-rim': p.surfaces.sphere.rim,
-    '--zg-orb-glow': p.surfaces.sphere.glow,
-
-    '--zg-tray-raw': p.surfaces.tray,
-    '--zg-raised-raw': p.surfaces.raised,
-    '--zg-track-raw': p.surfaces.track,
-    '--zg-hairline-raw': p.surfaces.hairline,
-    '--zg-overlay-raw': p.surfaces.overlay,
-    '--zg-well-raw': p.surfaces.well,
-    '--zg-raised-edge-raw': p.surfaces.raisedEdge,
-    '--zg-tray-ring-raw': p.surfaces.trayRing,
-    '--zg-row-hover': p.surfaces.rowHover,
-
-    '--zg-code-bg': p.codeBg,
-    '--zg-code-fg': p.codeFg,
-    '--zg-selection': p.selection,
-    '--zg-scrim': p.scrim,
-    '--zg-shadow': p.shadow,
-
-    '--zg-diff-add-bg': p.diff.addBg,
-    '--zg-diff-remove-bg': p.diff.removeBg,
-    '--zg-diff-add-content-bg': p.diff.addContentBg,
-    '--zg-diff-remove-content-bg': p.diff.removeContentBg,
-    '--zg-diff-add-fg': p.diff.addFg,
-    '--zg-diff-remove-fg': p.diff.removeFg,
-
-    '--zg-chip-default-bg': p.chips.default.bg,
-    '--zg-chip-default-fg': p.chips.default.fg,
-    '--zg-chip-skills-bg': p.chips.skills.bg,
-    '--zg-chip-skills-fg': p.chips.skills.fg,
-    '--zg-chip-files-bg': p.chips.files.bg,
-    '--zg-chip-files-fg': p.chips.files.fg,
-
-    '--zg-throbber-a': p.throbber[0],
-    '--zg-throbber-b': p.throbber[1],
-    '--zg-money': p.money,
-  };
-}
-
-/**
- * Contrast control → the three variables the CSS contrast layer consumes.
- *
- *   level 100 → identity.
- *   level  <100 → text is faded toward the background (`base` < 100%).
- *   level  >100 → text is pushed toward pure white / black (`boost` > 0%).
- *
- * Borders take a quarter of the boost so raising contrast sharpens text
- * without turning every hairline into a wall.
- *
- * @param level - The contrast setting in percent, clamped to 50..200. 100 changes nothing.
- * @param appearance - The palette appearance, which picks white or black as the target text is
- * pushed toward.
- */
-export function contrastToCssVars(level: number, appearance: Appearance): CssVarMap {
-  const clamped = Math.min(200, Math.max(50, Math.round(level)));
-  const base = Math.min(clamped, 100);
-  const boost = Math.max(clamped - 100, 0);
-
-  return {
-    '--zg-contrast-base': `${base}%`,
-    '--zg-contrast-boost': `${boost}%`,
-    '--zg-contrast-boost-border': `${boost / 4}%`,
-    '--zg-contrast-target': appearance === 'dark' ? '#ffffff' : '#000000',
-  };
-}
-
-/**
- * Contrast → depth. Past 150 the surfaces go FLAT: no light, no shadows,
- * hairlines at full border strength, so separation is all line and no
- * atmosphere. Below 100 the ladder compresses toward the canvas along with
- * the text (`--zg-depth-mix`).
- *
- * @param level - The contrast setting in percent, clamped to 50..200. Above 150 the surfaces go
- * flat.
- * @param surfaces - The surface ladder to take the shadows and sheen from.
- */
-export function depthToCssVars(level: number, surfaces: SurfaceLadder): CssVarMap {
-  const clamped = Math.min(200, Math.max(50, Math.round(level)));
-  const flat = clamped > 150;
-  return {
-    '--zg-depth-mix': `${Math.min(clamped, 100)}%`,
-    '--zg-depth-hairline-mix': flat ? '0%' : '100%',
-    '--zg-shadow-raised': flat ? 'none' : surfaces.shadowRaised,
-    '--zg-shadow-live': flat ? 'none' : surfaces.shadowLive,
-    '--zg-shadow-inset': flat ? 'none' : surfaces.shadowInset,
-    '--zg-shadow-float': flat ? 'none' : surfaces.shadowFloat,
-    '--zg-shadow-well': flat ? 'none' : surfaces.shadowWell,
-    '--zg-shadow-fill': flat ? 'none' : surfaces.shadowFill,
-    '--zg-fill-sheen': flat ? 'none' : surfaces.fillSheen,
-  };
-}