zidane-ui 9.0.4 → 9.1.3

package/src/theme/derive.ts

@@ -1,700 +0,0 @@
-/**
- * Palette derivation: the one place a theme becomes a complete token set.
- *
- * Input is a `ThemeSeed`: the few colors a theme author actually chooses
- * (canvas, accent, optionally text / status hues / diff / chips). Output is
- * a `ResolvedPalette`: every role token the renderer paints with, all
- * contrast-checked against the surfaces they sit on.
- *
- * Built-in themes and extension themes all pass through here, so "does this
- * theme look right in light mode" or "is muted text readable" is answered
- * once, by code, not per theme.
- *
- * Pure: no DOM, no React. `css-vars.ts` turns the result into CSS variables.
- */
-import {
-  capChroma,
-  contrastRatio,
-  ensureContrast,
-  isDark,
-  mix,
-  oklch,
-  readableOn,
-  tintedNeutral,
-  toOklch,
-  withAlpha,
-  withLightness,
-} from './color';
-
-/** Whether a palette is built for a `light` or a `dark` canvas. */
-export type Appearance = 'light' | 'dark';
-
-/**
- * The few colours a theme author chooses: `canvas` and `accent` are required, the rest are
- * overrides that `derivePalette` derives when omitted.
- */
-export interface ThemeSeed {
-  /** Window background. The only required color besides `accent`. */
-  canvas: string;
-  /** Brand / interactive hue: buttons, links, focus, selected states. */
-  accent: string;
-  /** Forced appearance; inferred from `canvas` luminance when omitted. */
-  appearance?: Appearance;
-
-  // ---- Optional overrides. Anything omitted is derived. ----
-  /** Body text. Derived from `canvas` with a faint tint when omitted. */
-  text?: string;
-  /** Secondary text. Pushed until it clears its contrast floor. */
-  textMuted?: string;
-  /** Tertiary text, such as hints. Pushed until it clears its contrast floor. */
-  textSubtle?: string;
-  /** Elevated surface: sidebar, composer card. Derived from `canvas` when omitted. */
-  surface1?: string;
-  /** Hover and pressed surface. Derived from `canvas` when omitted. */
-  surface2?: string;
-  /** Overlay surface: popovers, menus, modals. Derived from `canvas` when omitted. */
-  surface3?: string;
-  /** Default border and divider colour. */
-  border?: string;
-  /** Stronger border, for inputs and emphasis. */
-  borderStrong?: string;
-  /** Focus ring / active rim. Defaults to `accent`. */
-  ring?: string;
-  /** Secondary hue (the TUI's `accent`; success green in most themes). */
-  accentAlt?: string;
-  /** Model-identity tint. */
-  model?: string;
-  /** Success status colour. Pushed until it clears its contrast floor on `canvas` and the active row. */
-  success?: string;
-  /** Warning status colour. Pushed until it clears its contrast floor on `canvas` and the active row. */
-  warn?: string;
-  /** Danger and error status colour. Pushed until it clears its contrast floor on `canvas` and the active row. */
-  danger?: string;
-  /** Info status colour. Pushed until it clears its contrast floor on `canvas` and the active row. */
-  info?: string;
-  /** Text selection background. Defaults to a translucent `accent`. */
-  selection?: string;
-  /** Code block background. Defaults to a step off `canvas`. */
-  codeBg?: string;
-  /** Diff colours. Any left out are mixed from `canvas` and the status colours. */
-  diff?: Partial<DiffColors>;
-  /** Colours of the reference chips, by kind. Any left out come from `accent` and `model`. */
-  chips?: Partial<Record<ChipKind, ChipColors>>;
-  /** The two colours of the busy indicator. Defaults to `accent` and a muted `accentAlt`. */
-  throbber?: readonly [string, string];
-  /** Colour of cost figures. Defaults to the muted text colour. */
-  money?: string;
-}
-
-/**
- * Colours of a diff: backgrounds for added and removed lines, a stronger background for the
- * changed text inside them, and the text colours.
- */
-export interface DiffColors {
-  /** Background of an added line. */
-  addBg: string;
-  /** Background of a removed line. */
-  removeBg: string;
-  /** Stronger background behind the changed text inside an added line. */
-  addContentBg: string;
-  /** Stronger background behind the changed text inside a removed line. */
-  removeContentBg: string;
-  /** Text colour of an added line. */
-  addFg: string;
-  /** Text colour of a removed line. */
-  removeFg: string;
-}
-
-/** The kind of a reference chip: `default`, `skills` or `files`. */
-export type ChipKind = 'default' | 'skills' | 'files';
-
-/**
- * The surface ladder from canvas to tray to raised to overlay: its tones, edges, shadows and
- * sphere shading. Each appearance derives it its own way.
- */
-export interface SurfaceLadder {
-  /** The bed a surface sits in: a soft step toward depth (darker in both modes). */
-  tray: string;
-  /** A surface set into a tray, or a control lifted off it: the lightest step. */
-  raised: string;
-  /** A recessed track for grouped controls, set into a raised surface. */
-  track: string;
-  /** Floating surfaces (menus, popovers, palette, modals): above whatever they open from. */
-  overlay: string;
-  /** Row hover inside any surface: a wash, never a slab. */
-  rowHover: string;
-  /** Low-contrast edge, only where tone alone can't separate two layers. */
-  hairline: string;
-  /** The border of a raised surface: the hairline in dark, softer in light where the shadow draws the edge. */
-  raisedEdge: string;
-  /** The ring a raised card sits in (the composer): the tray in dark, a half step in light, so it frames without banding. */
-  trayRing: string;
-  /** Box-shadow for raised things: top light + a tight soft drop. */
-  shadowRaised: string;
-  /** The same, one step up, while a surface is live (a run streaming). */
-  shadowLive: string;
-  /** Box-shadow for trays and tracks: pressed in from the top. */
-  shadowInset: string;
-  /** Box-shadow for floating surfaces: top light + a deep, soft, layered drop. */
-  shadowFloat: string;
-  /**
-   * Input wells: a translucent shade, so the field is carved into whatever it
-   * sits on (canvas, tray or raised card) instead of carrying an absolute tone
-   * that only reads on one of them.
-   */
-  well: string;
-  /** Box-shadow for wells: shade under the top edge, a lip of light on the bottom one. */
-  shadowWell: string;
-  /** Box-shadow for solid accent fills: top light, bottom edge, a drop tinted by the fill. */
-  shadowFill: string;
-  /** Background-image over a solid accent fill: light falling from above. */
-  fillSheen: string;
-  /** How a small lit sphere (the daemon orb) shades: see `SphereShading`. */
-  sphere: SphereShading;
-}
-
-/**
- * A lit sphere's shading, per appearance. Dark shades toward black, deep;
- * light shades toward a cool slate, shallow, so a vivid fill stays vivid
- * instead of turning to mud. `shade` / `rim` are how much of `tone` the
- * body's far side and its bottom rim take; `glow` scales the halo.
- */
-export interface SphereShading {
-  /** Base colour the sphere shades from. */
-  tone: string;
-  /** How much of `tone` the body's far side takes, as a CSS percentage. */
-  shade: string;
-  /** How much of `tone` the bottom rim takes, as a CSS percentage. */
-  rim: string;
-  /** Scale of the halo, as a number in a string. */
-  glow: string;
-}
-
-/**
- * Decorative fills: dots, the orb, window lights, badge pips. Colour that
- * is a shape, not text, so it isn't held to the text floors the status
- * tokens carry. Dark: the status colour itself (already bright). Light: the
- * same hue lifted to a vivid, light-appropriate tone (see `dotFor`).
- */
-export interface DotColors {
-  /** Dot colour for `accent`. */
-  accent: string;
-  /** Dot colour for `accentAlt`. */
-  accentAlt: string;
-  /** Dot colour for `success`. */
-  success: string;
-  /** Dot colour for `warn`. */
-  warn: string;
-  /** Dot colour for `danger`. */
-  danger: string;
-  /** Dot colour for `info`. */
-  info: string;
-}
-
-/** Background and text colour of a reference chip. */
-export interface ChipColors {
-  /** Chip background. */
-  bg: string;
-  /** Chip text colour. */
-  fg: string;
-}
-
-/**
- * Every colour role the renderer paints with, derived from a {@link ThemeSeed} and checked for
- * contrast against the surfaces it sits on.
- */
-export interface ResolvedPalette {
-  /** Whether the palette is light or dark. */
-  appearance: Appearance;
-
-  /** Window background (the canvas). */
-  bg: string;
-  /** Elevated surface: sidebar, composer card, code block chrome. */
-  surface1: string;
-  /** Hover / pressed surface. */
-  surface2: string;
-  /** Overlay surface: popovers, menus, modals. */
-  surface3: string;
-  /** Selected row (neutral, no accent tint). */
-  selected: string;
-  /** Alpha wash for hover on arbitrary surfaces. */
-  hoverWash: string;
-
-  /** Default border and divider colour. */
-  border: string;
-  /** Stronger border, for inputs and emphasis. */
-  borderStrong: string;
-  /** Focus ring and active rim colour. */
-  ring: string;
-
-  /** Body text. */
-  text: string;
-  /** Secondary text. */
-  textMuted: string;
-  /** Tertiary text, such as hints. */
-  textSubtle: string;
-  /** Text on top of `accent`-filled controls. */
-  accentFg: string;
-  /**
-   * Solid fill for buttons and markers: the accent, stepped darker along
-   * its own hue until white clears `CONTRAST.accentFg` on it, so glyphs on
-   * filled controls are white on every theme. Text-on-canvas keeps
-   * `accent` (contrast is checked against the background there).
-   */
-  accentFill: string;
-  /** Hover state of `accentFill`, one step deeper. */
-  accentFillHover: string;
-  /** Text and glyph colour on `accentFill`. */
-  accentFillFg: string;
-
-  /** Brand and interactive colour, checked for contrast against `bg`. */
-  accent: string;
-  /** Hover state of `accent`: brighter in dark, deeper in light. */
-  accentHover: string;
-  /** Translucent `accent` for quiet backgrounds. */
-  accentSoft: string;
-  /** Stronger translucent `accent`, for hover on soft backgrounds. */
-  accentSoftStrong: string;
-  /** The sent prompt's bubble: the accent's wash, lighter in light where an alpha tint reads far stronger. */
-  accentWash: string;
-  /** Secondary hue, often a green. */
-  accentAlt: string;
-  /** Tint that identifies the model. */
-  model: string;
-
-  /** Success status colour. */
-  success: string;
-  /** Translucent `success` for backgrounds. */
-  successSoft: string;
-  /** Warning status colour. */
-  warn: string;
-  /** Translucent `warn` for backgrounds. */
-  warnSoft: string;
-  /** Danger and error status colour. */
-  danger: string;
-  /** Translucent `danger` for backgrounds. */
-  dangerSoft: string;
-  /** Solid fill for destructive commits: `danger` stepped darker like `accentFill`, so white clears `CONTRAST.accentFg` on it. */
-  dangerFill: string;
-  /** Hover state of `dangerFill`, one step deeper. */
-  dangerFillHover: string;
-  /** Text and glyph colour on `dangerFill`. */
-  dangerFillFg: string;
-  /** Info status colour. */
-  info: string;
-  /** Translucent `info` for backgrounds. */
-  infoSoft: string;
-  /** Decorative fills for dots, the orb and window lights. They are shapes, not text. */
-  dots: DotColors;
-
-  /**
-   * The surface ladder (canvas → tray → raised) and its edges. Separation
-   * comes from tone and light, not outlines; each appearance derives it its
-   * own way (see `SURFACE`). `.zg-tray` / `.zg-raised` / `.zg-segment` in
-   * styles/primitives.css are the only consumers components should need.
-   */
-  surfaces: SurfaceLadder;
-
-  /** Code block background. */
-  codeBg: string;
-  /** Code block text, checked for contrast against `codeBg`. */
-  codeFg: string;
-  /** Text selection background. */
-  selection: string;
-  /** Backdrop colour behind modal layers. */
-  scrim: string;
-  /** Base shadow colour. */
-  shadow: string;
-
-  /** Diff colours. */
-  diff: DiffColors;
-  /** Reference chip colours, by kind. */
-  chips: Record<ChipKind, ChipColors>;
-  /** The two colours of the busy indicator. */
-  throbber: readonly [string, string];
-  /** Colour of cost figures. */
-  money: string;
-}
-
-/**
- * Minimum contrast targets. Body text follows WCAG AA (4.5); muted/subtle
- * relax on purpose. Text on accent-filled controls and chips uses the WCAG
- * UI-component threshold (3.0): it keeps white labels on bright accents,
- * which every platform button does, instead of flipping to dark text.
- */
-export const CONTRAST = {
-  text: 4.5,
-  textMuted: 3.4,
-  textSubtle: 2.2,
-  status: 3,
-  accentFg: 3,
-  diffFg: 4,
-  /** Decorative fills (`DotColors`): a shape that must not vanish into the canvas, not a text floor. */
-  dot: 1.5,
-} as const;
-
-/** Default status hues per appearance; tuned so they pass `CONTRAST.status` on typical canvases. */
-const STATUS_DEFAULTS: Record<Appearance, { success: string; warn: string; danger: string; info: string }> = {
-  dark: { success: '#4ade80', warn: '#fbbf24', danger: '#f87171', info: '#60a5fa' },
-  light: { success: '#1b9247', warn: '#b47500', danger: '#de3b3d', info: '#3177dc' },
-};
-
-/**
- * Lightness offsets for the neutral ramp, relative to the canvas. Dark
- * canvases step up, light canvases step down. Small on purpose: separation
- * should come from borders and hover, not from stacked gray slabs.
- */
-const RAMP: Record<
-  Appearance,
-  { surface1: number; surface2: number; surface3: number; border: number; borderStrong: number }
-> = {
-  dark: { surface1: 0.035, surface2: 0.07, surface3: 0.1, border: 0.11, borderStrong: 0.18 },
-  light: { surface1: -0.025, surface2: -0.055, surface3: 0.012, border: -0.12, borderStrong: -0.2 },
-};
-
-/**
- * How each appearance builds depth. Dark lifts with LIGHT (a faint top
- * highlight; shadows barely read on dark); light lifts with SHADOW (a soft,
- * tight, cool-neutral drop) plus a white inner top edge that reads on the
- * grey tray. Lightness offsets are relative to the canvas.
- */
-const SURFACE: Record<
-  Appearance,
-  {
-    tray: number;
-    raised: number;
-    track: number;
-    overlay: number;
-    highlight: string;
-    drop: string;
-    dropLive: string;
-    inset: string;
-    float: string;
-    rowHover: string;
-    well: string;
-    wellInset: string;
-    fill: string;
-    sphere: SphereShading;
-    /** Tray-ring step, relative to the canvas (see `trayRing`). */
-    ring: number;
-    /** How far the raised edge moves from the border toward the raised tone (0 = border, 1 = invisible). */
-    edgeFade: number;
-  }
-> = {
-  dark: {
-    tray: 0.016,
-    raised: 0.052,
-    track: 0.024,
-    highlight: 'inset 0 1px 0 rgba(255, 255, 255, 0.06)',
-    drop: '0 1px 2px rgba(0, 0, 0, 0.32), 0 6px 16px -8px rgba(0, 0, 0, 0.5)',
-    dropLive: '0 1px 2px rgba(0, 0, 0, 0.36), 0 10px 28px -10px rgba(0, 0, 0, 0.62)',
-    inset: 'inset 0 1px 2px rgba(0, 0, 0, 0.3)',
-    overlay: 0.064,
-    float:
-      '0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 32px 64px -24px rgba(0, 0, 0, 0.5)',
-    rowHover: 'rgba(255, 255, 255, 0.055)',
-    well: 'rgba(0, 0, 0, 0.22)',
-    wellInset: 'inset 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.04)',
-    // Lit like a raised chip, shadowed in neutral: an accent-tinted glow reads as decoration, not depth.
-    fill: 'inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 8px -4px rgba(0, 0, 0, 0.45)',
-    sphere: { tone: '#000000', shade: '38%', rim: '60%', glow: '1' },
-    ring: 0.016,
-    edgeFade: 0.4,
-  },
-  light: {
-    // A touch deeper than dark's lift (equal steps read smaller near white),
-    // but only a touch: the white card's shadow does the separating, and a
-    // deep grey tray reads as a slab next to a white chat.
-    tray: -0.022,
-    raised: 0.02,
-    track: -0.032,
-    highlight: 'inset 0 1px 0 rgba(255, 255, 255, 0.85)',
-    // Light carries depth in the shadow (dark carries it in the tone step): a
-    // tight contact shadow, a short soft one, and a long falloff, so a white
-    // card on a near-white canvas still reads as lifted.
-    drop: '0 1px 2px rgba(20, 24, 40, 0.06), 0 2px 6px -2px rgba(20, 24, 40, 0.05), 0 10px 24px -12px rgba(20, 24, 40, 0.18)',
-    dropLive:
-      '0 1px 2px rgba(20, 24, 40, 0.07), 0 3px 8px -2px rgba(20, 24, 40, 0.06), 0 14px 32px -12px rgba(20, 24, 40, 0.24)',
-    // Pressed in: shade under the top edge, a lip of light on the bottom one.
-    inset: 'inset 0 1px 2px rgba(20, 24, 40, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.75)',
-    overlay: 0.02,
-    float:
-      '0 0 0 1px rgba(20, 24, 40, 0.06), 0 2px 4px rgba(20, 24, 40, 0.05), 0 12px 28px -8px rgba(20, 24, 40, 0.16), 0 28px 56px -24px rgba(20, 24, 40, 0.14)',
-    rowHover: 'rgba(20, 24, 40, 0.045)',
-    well: 'rgba(20, 24, 40, 0.045)',
-    wellInset: 'inset 0 1px 2px rgba(20, 24, 40, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7)',
-    fill: 'inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(20, 24, 40, 0.14), 0 3px 8px -4px rgba(20, 24, 40, 0.18)',
-    sphere: { tone: '#1b2333', shade: '16%', rim: '30%', glow: '0.6' },
-    ring: -0.012,
-    edgeFade: 0.62,
-  },
-};
-
-function deriveSurfaces(ctx: {
-  appearance: Appearance;
-  step: (delta: number) => string;
-  canvasL: number;
-  border: string;
-}): SurfaceLadder {
-  const rule = SURFACE[ctx.appearance];
-  // Light canvases already sit near white: the raised step can't go past it.
-  const raisedDelta = Math.min(rule.raised, 0.995 - ctx.canvasL);
-  const raised = ctx.step(raisedDelta);
-  const overlay = ctx.step(Math.min(rule.overlay, 0.998 - ctx.canvasL));
-  return {
-    tray: ctx.step(rule.tray),
-    raised,
-    track: ctx.step(rule.track),
-    overlay,
-    rowHover: rule.rowHover,
-    hairline: mix(ctx.border, raised, 0.4),
-    raisedEdge: mix(ctx.border, raised, rule.edgeFade),
-    trayRing: ctx.step(rule.ring),
-    shadowRaised: `${rule.highlight}, ${rule.drop}`,
-    shadowLive: `${rule.highlight}, ${rule.dropLive}`,
-    shadowInset: rule.inset,
-    shadowFloat: `${rule.highlight}, ${rule.float}`,
-    well: rule.well,
-    shadowWell: rule.wellInset,
-    shadowFill: rule.fill,
-    fillSheen: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%)',
-    sphere: rule.sphere,
-  };
-}
-
-/**
- * Picks the appearance that suits a canvas: `dark` when its luminance is low, else `light`.
- *
- * @param canvas - The window background colour.
- * @returns The appearance.
- */
-export function inferAppearance(canvas: string): Appearance {
-  return isDark(canvas) ? 'dark' : 'light';
-}
-
-/**
- * Derives a complete, contrast-checked palette from a seed. Anything the seed leaves out is
- * computed from `canvas` and `accent`. Pure, with no DOM.
- *
- * @param seed - The colours the theme author chose.
- * @returns The resolved palette.
- */
-export function derivePalette(seed: ThemeSeed): ResolvedPalette {
-  const appearance = seed.appearance ?? inferAppearance(seed.canvas);
-  const dark = appearance === 'dark';
-  const bg = seed.canvas;
-  const canvas = toOklch(bg) ?? { l: dark ? 0.15 : 0.98, c: 0, h: 0, a: 1 };
-  const ramp = RAMP[appearance];
-
-  // Neutral ramp: same hue family as the canvas, chroma kept faint. When the
-  // canvas is pure gray we borrow a whisper of the accent hue so the ramp
-  // doesn't read as dead gray next to a colorful accent.
-  const tintSource = canvas.c > 0.004 ? bg : seed.accent;
-  const tint = canvas.c > 0.004 ? Math.min(canvas.c, 0.03) : 0.006;
-  const step = (delta: number): string => tintedNeutral(canvas.l + delta, tintSource, tint);
-
-  const surface1 = seed.surface1 ?? step(ramp.surface1);
-  const surface2 = seed.surface2 ?? step(ramp.surface2);
-  const surface3 = seed.surface3 ?? step(ramp.surface3);
-  const border = seed.border ?? step(ramp.border);
-  // Strong border steps from the *resolved* border so a seeded border never
-  // ends up lighter than its own emphasis variant.
-  const borderStrong =
-    seed.borderStrong ?? withLightness(border, (toOklch(border)?.l ?? canvas.l) + (dark ? 0.07 : -0.08));
-  const selected = mix(surface2, border, 0.35);
-  const hoverWash = dark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)';
-
-  // Text: the seed's choice if readable, else pushed toward the extreme.
-  const textBase = seed.text ?? tintedNeutral(dark ? 0.93 : 0.24, tintSource, tint * 0.5);
-  const text = ensureContrast(textBase, surface2, CONTRAST.text);
-  const textMuted = ensureContrast(seed.textMuted ?? mix(text, bg, 0.42), surface2, CONTRAST.textMuted);
-  const textSubtle = ensureContrast(seed.textSubtle ?? mix(text, bg, 0.62), bg, CONTRAST.textSubtle);
-
-  // Accent family. Hover moves toward the text extreme so it reads as
-  // "brighter" in dark and "deeper" in light, matching platform conventions.
-  const accent = ensureContrast(seed.accent, bg, 3);
-  const accentL = toOklch(accent)?.l ?? 0.6;
-  const accentHover = withLightness(accent, accentL + (dark ? 0.07 : -0.07));
-  const accentSoft = withAlpha(accent, 0.12);
-  const accentSoftStrong = withAlpha(accent, 0.2);
-  const accentWash = dark ? accentSoftStrong : withAlpha(accent, 0.1);
-  const accentFg = onFillText(accent, bg);
-  const accentFill = fillForWhite(accent);
-  // Hover deepens in both appearances: lighter would drop white below the fill contrast on dark themes.
-  const accentFillHover = withLightness(accentFill, (toOklch(accentFill)?.l ?? 0.5) - 0.05);
-  const accentFillFg = onFillText(accentFill, bg);
-  const ring = seed.ring ?? accent;
-  const accentAlt = ensureContrast(seed.accentAlt ?? accent, bg, 3);
-  const model = ensureContrast(seed.model ?? accentHover, bg, 3);
-
-  const surfaces = deriveSurfaces({ appearance, step, canvasL: canvas.l, border });
-  // Status text sits in rows too: the active one (`--zg-row-active`, text at 9% over the tray) is
-  // the surface furthest from it, so the floor holds there and on the canvas alike.
-  const activeRow = mix(surfaces.tray, text, 0.09);
-  const statusDefaults = STATUS_DEFAULTS[appearance];
-  const status = (value: string | undefined, fallback: string): string =>
-    ensureContrast(ensureContrast(value ?? fallback, bg, CONTRAST.status), activeRow, CONTRAST.status);
-  const success = status(seed.success, statusDefaults.success);
-  const warn = status(seed.warn, statusDefaults.warn);
-  const danger = status(seed.danger, statusDefaults.danger);
-  const dangerFill = fillForWhite(danger);
-  const dangerFillHover = withLightness(dangerFill, (toOklch(dangerFill)?.l ?? 0.5) - 0.05);
-  const dangerFillFg = onFillText(dangerFill, bg);
-  const info = status(seed.info, statusDefaults.info);
-
-  // Light: a whisper under the canvas, as dark's panel is a whisper over it.
-  const codeBg = seed.codeBg ?? step(dark ? 0.02 : -0.018);
-  const codeFg = ensureContrast(text, codeBg, CONTRAST.text);
-  const selection = seed.selection ?? withAlpha(accent, dark ? 0.28 : 0.22);
-  const scrim = dark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.35)';
-  const shadow = dark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 15, 20, 0.16)';
-
-  const diff = deriveDiff(seed.diff, { bg, success, danger, dark });
-  const chips = deriveChips(seed.chips, { accent, model, bg });
-
-  const dot = (color: string): string => dotFor(color, appearance, bg);
-  const dots: DotColors = {
-    accent: dot(accent),
-    accentAlt: dot(accentAlt),
-    success: dot(success),
-    warn: dot(warn),
-    danger: dot(danger),
-    info: dot(info),
-  };
-
-  const throbber = seed.throbber ?? ([accent, capChroma(accentAlt, 0.2)] as const);
-  const money = seed.money ?? textMuted;
-
-  return {
-    appearance,
-    bg,
-    surface1,
-    surface2,
-    surface3,
-    selected,
-    hoverWash,
-    border,
-    borderStrong,
-    ring,
-    text,
-    textMuted,
-    textSubtle,
-    accentFg,
-    accentFill,
-    accentFillHover,
-    accentFillFg,
-    accent,
-    accentHover,
-    accentSoft,
-    accentSoftStrong,
-    accentWash,
-    accentAlt,
-    model,
-    success,
-    successSoft: withAlpha(success, 0.14),
-    warn,
-    warnSoft: withAlpha(warn, 0.14),
-    danger,
-    dangerSoft: withAlpha(danger, 0.14),
-    dangerFill,
-    dangerFillHover,
-    dangerFillFg,
-    info,
-    infoSoft: withAlpha(info, 0.14),
-    dots,
-    surfaces,
-    codeBg,
-    codeFg,
-    selection,
-    scrim,
-    shadow,
-    diff,
-    chips,
-    throbber,
-    money,
-  };
-}
-
-/**
- * A status / accent colour as a decorative fill. Dark returns it as is. Light
- * lifts it along its own hue to a vivid tone (yellows sit higher: they turn
- * olive below ~0.8), with a chroma floor so a deep text tone doesn't come
- * back pastel-grey; neutrals stay neutral. Never below `CONTRAST.dot`.
- */
-function dotFor(color: string, appearance: Appearance, bg: string): string {
-  const o = toOklch(color);
-  if (appearance === 'dark' || !o) {
-    return color;
-  }
-  const yellow = o.h >= 60 && o.h <= 110;
-  const l = Math.max(o.l, yellow ? 0.82 : 0.7);
-  const c = o.c < 0.03 ? o.c : Math.max(o.c, 0.15);
-  return ensureContrast(oklch(l, c, o.h), bg, CONTRAST.dot);
-}
-
-/**
- * Darken `color` along its hue until `#ffffff` reads on it, in small steps
- * so the fill stays recognisably the theme's accent. Gives up after a
- * bounded walk (a near-white accent on a dark theme): `onFillText` then
- * picks a dark foreground.
- */
-function fillForWhite(color: string): string {
-  let fill = color;
-  let l = toOklch(color)?.l ?? 0.6;
-  for (let i = 0; i < 12 && contrastRatio('#ffffff', fill) < CONTRAST.accentFg; i++) {
-    l -= 0.04;
-    fill = withLightness(color, l);
-  }
-  return fill;
-}
-
-/**
- * Text on a filled control (accent, danger). White when it passes, else the canvas
- * color (dark-on-bright reads as intentional and matches chips), else the
- * nearest passing extreme.
- */
-function onFillText(fill: string, canvas: string): string {
-  if (contrastRatio('#ffffff', fill) >= CONTRAST.accentFg) {
-    return '#ffffff';
-  }
-  if (contrastRatio(canvas, fill) >= CONTRAST.accentFg) {
-    return canvas;
-  }
-  return readableOn(fill, canvas, CONTRAST.accentFg);
-}
-
-function deriveDiff(
-  seed: Partial<DiffColors> | undefined,
-  ctx: { bg: string; success: string; danger: string; dark: boolean },
-): DiffColors {
-  const addBg = seed?.addBg ?? mix(ctx.bg, ctx.success, ctx.dark ? 0.16 : 0.14);
-  const removeBg = seed?.removeBg ?? mix(ctx.bg, ctx.danger, ctx.dark ? 0.16 : 0.14);
-  const addContentBg = seed?.addContentBg ?? mix(ctx.bg, ctx.success, ctx.dark ? 0.3 : 0.26);
-  const removeContentBg = seed?.removeContentBg ?? mix(ctx.bg, ctx.danger, ctx.dark ? 0.3 : 0.26);
-
-  return {
-    addBg,
-    removeBg,
-    addContentBg,
-    removeContentBg,
-    addFg: ensureContrast(seed?.addFg ?? ctx.success, addContentBg, CONTRAST.diffFg),
-    removeFg: ensureContrast(seed?.removeFg ?? ctx.danger, removeContentBg, CONTRAST.diffFg),
-  };
-}
-
-function deriveChips(
-  seed: Partial<Record<ChipKind, ChipColors>> | undefined,
-  ctx: { accent: string; model: string; bg: string },
-): Record<ChipKind, ChipColors> {
-  const make = (bg: string): ChipColors => ({ bg, fg: onFillText(bg, ctx.bg) });
-  const fix = (chip: ChipColors): ChipColors => ({
-    bg: chip.bg,
-    fg: contrastRatio(chip.fg, chip.bg) >= CONTRAST.accentFg ? chip.fg : readableOn(chip.bg, chip.fg),
-  });
-
-  return {
-    default: seed?.default ? fix(seed.default) : make(ctx.accent),
-    skills: seed?.skills ? fix(seed.skills) : make(ctx.accent),
-    files: seed?.files ? fix(seed.files) : make(ctx.model),
-  };
-}