@epilot/spark-ui 0.11.1 → 0.12.1

package/dist/lib/accent-theme.js

@@ -1,5 +1,6 @@
 "use client";
-import { generateRadixColors } from "./generate-radix-colors.js";
+import { generateRadixColors, getAlphaColorP3, getAlphaColorSrgb } from "./generate-radix-colors.js";
+import { isSparkNeutralFamily } from "./theme-types.js";
 import * as RadixColors from "@radix-ui/colors";
 import Color from "colorjs.io";
 //#region src/lib/accent-theme.ts
@@ -47,22 +48,45 @@ function appearanceForBackground(background) {
 /** deltaE2000 ≈ 2 is the just-noticeable bar — a good solve lands far inside it. */
 const ALPHA_SOLVE_TOLERANCE = 2;
 /**
-* Replace alpha steps the solver could not actually solve with their opaque solid.
+* OKLCH chroma below which a color reads as neutral rather than tinted — shared by every
+* "is this canvas/accent actually chromatic" check (getMatchingNeutral, resolveAutoNeutral,
+* accentScaleForCanvas).
+*/
+const CHROMATIC_THRESHOLD = .04;
+/**
+* An alpha step past this needs to cover the canvas almost completely to reproduce its
+* target — at that point it isn't a tint anymore, and the opaque solid is both cheaper and
+* more predictable. Only applied to the accent ramp's canvas-tinted low steps (gap #12a,
+* ask 2 — specifically the steps `tintLowStepsFromCanvas` retargets; steps 6-12 are by-design
+* high-alpha ink/solid tokens even on plain white — capping *those* would be a regression, not
+* a fix). Same shape as the deltaE check below, widened from "could not solve" to "solved, but
+* not usefully".
+*/
+const ALPHA_CAP = .5;
+/**
+* Replace alpha steps the solver could not actually solve — or, within `capAlphaSteps` leading
+* steps, solved only at a near-opaque alpha — with their opaque solid.
 *
 * Each `aN` is solved so that compositing it over the background reproduces step N
 * (`target = bg·(1-α) + fg·α`). From a saturated canvas a desaturated ink target is
 * unreachable within alpha bounds, and Radix's solver **degrades silently** rather than
 * failing — on `#FFD400` it returns `#0000ff39` for slate a11, which composites to
-* 1.66:1 body text where the solid step is a correct 9.03:1.
+* 1.66:1 body text where the solid step is a correct 9.03:1. Separately, even a solve that
+* *succeeds* can need alpha past `ALPHA_CAP` to get there — technically correct only over
+* that exact background, and no longer a usable "tint" anywhere else (gap #12a, ask 2).
+*
+* `space` must match whatever space `alpha` was actually solved in — `getAlphaColorP3` solves
+* per-channel in P3, and verifying that against an sRGB composite rejects perfectly good
+* solves (they were never trying to reproduce the sRGB composite in the first place).
 *
-* So verify the solve and fall back to the opaque value where it doesn't hold. Only ever
-* called for a custom background; on white/black every step solves exactly (deltaE ~0),
+* So verify the solve and fall back to the opaque value where either check fails. Only ever
+* called for a custom background; on white/black every step solves exactly at low alpha,
 * so the default output — and portal parity — is untouched either way.
 */
-function opaqueWhereUnsolvable(background, solid, alpha) {
+function opaqueWhereUnsolvable(background, solid, alpha, capAlphaSteps = 0, space = "srgb") {
 	let bg;
 	try {
-		bg = new Color(background).to("srgb").coords;
+		bg = new Color(background).to(space).coords;
 	} catch {
 		return alpha;
 	}
@@ -71,9 +95,10 @@ function opaqueWhereUnsolvable(background, solid, alpha) {
 		if (!target) return step;
 		try {
 			const ink = new Color(step);
-			const fg = ink.to("srgb").coords;
+			const fg = ink.to(space).coords;
 			const a = ink.alpha;
-			return new Color("srgb", [
+			if (i < capAlphaSteps && a > ALPHA_CAP) return target;
+			return new Color(space, [
 				0,
 				1,
 				2
@@ -83,21 +108,139 @@ function opaqueWhereUnsolvable(background, solid, alpha) {
 		}
 	});
 }
+/**
+* Weight (0–1) each of the accent scale's first 5 steps is pulled toward the canvas's own
+* hue/chroma; step 6 and up (borders, solid, text) stay the true accent untouched.
+*/
+const CANVAS_TINT_WEIGHTS = [
+	1,
+	.8,
+	.6,
+	.4,
+	.2
+];
+/**
+* Pull the accent scale's low steps toward the canvas's own color (gap #12a, ask 1): Radix's
+* generator sets every step's hue/chroma from the accent itself and only re-curves lightness
+* against the background, so on a chromatic canvas the low steps (app/component background
+* territory) stay a flat wash of the accent instead of a tint of the page — right where the
+* now-canvas-tinted neutral scale (gap #12) visibly disagrees with it. Step 9 (the solid,
+* brand-defining step) and everything above step 5 is left exactly as Radix generated it.
+*
+* Mixed in OKLab (rectangular a/b), not OKLCH (polar hue + chroma): a circular hue
+* interpolation between two far-apart hues (a blue accent on a yellow-green canvas, say) has
+* to sweep through whatever unrelated hues sit on the "shorter" arc between them — a vivid
+* green/teal/cyan that belongs to neither endpoint. Linearly mixing a/b instead moves along
+* the straight line between the two points, which naturally desaturates toward neutral as the
+* two colors pull in more different directions, rather than swinging through a third, unrelated
+* hue. Lightness (shared between OKLab and OKLCH) is untouched either way — Radix's own
+* background-aware curve already owns it.
+*
+* Takes/returns `Color` objects rather than strings so callers can reuse the same tinted
+* coordinates for both the sRGB and wide-gamut representations without a lossy round trip.
+*/
+function tintLowStepsFromCanvas(solidScale, bg) {
+	const [, bgA, bgB] = bg.to("oklab").coords;
+	return solidScale.map((step, i) => {
+		const weight = CANVAS_TINT_WEIGHTS[i];
+		if (!weight) return step;
+		const [lightness, a, b] = step.to("oklab").coords;
+		return new Color("oklab", [
+			lightness ?? 0,
+			(a ?? 0) * (1 - weight) + (bgA ?? 0) * weight,
+			(b ?? 0) * (1 - weight) + (bgB ?? 0) * weight
+		]);
+	});
+}
+/** Mirrors generate-radix-colors.tsx's private toOklchString (not exported by the vendored file). */
+function toOklchWideGamutString(color) {
+	const L = +((color.coords[0] ?? 0) * 100).toFixed(1);
+	return color.to("oklch").toString({ precision: 4 }).replace(/(\S+)(.+)/, `oklch(${L}%$2`);
+}
+/** Same fixed alpha the vendored generator uses for `accentSurface` — a stylistic choice, not a solve. */
+function surfaceAlphaFor(appearance) {
+	return appearance === "light" ? .8 : .5;
+}
+/**
+* Canvas-tinted low steps for the accent scale, or the untouched scale (and `tinted: false`)
+* when the canvas isn't chromatic enough to bother (gap #12a, ask 1). Only indices
+* `0..CANVAS_TINT_WEIGHTS.length-1` are ever replaced — steps 6-12 come back byte-identical to
+* what Radix generated, in both representations (no lossy sRGB round trip for the untouched
+* wide-gamut steps).
+*
+* `tinted` tells the caller whether to scope `opaqueWhereUnsolvable`'s alpha cap in at all —
+* the cap only makes sense for steps this function actually retargeted; a caller that applied
+* it unconditionally on any custom `background` would wrongly force perfectly fine low-alpha
+* steps opaque on an *achromatic* custom background (an explicit `#000000`/`#f5f5f5`, say),
+* where nothing here ever ran.
+*
+* Re-solves alpha for the tinted indices too: the generator's own `accentScaleAlpha` was
+* solved against the *pre-tint* solid, so once that solid moves the old alpha value no longer
+* reproduces it — left alone, every tinted step would fail `opaqueWhereUnsolvable`'s deltaE
+* check and go opaque, defeating the point (the `soft`-card fill this exists for would never
+* actually be translucent on a tinted canvas). Reuses Radix's own alpha solver so the result
+* matches what the generator itself would have produced had it been given this target directly.
+*
+* `accentSurface` (the `surface` card variant's fill) gets the same treatment: the generator
+* computes it as a fixed-alpha composite of step 2 — index 1, always tinted — over the
+* background, so recomputing it from the *tinted* step 2 at that same fixed alpha (0.8 light,
+* 0.5 dark; not a solve) keeps it in sync with `soft`'s fill instead of staying the old,
+* untinted wash (review-findings.md #13).
+*/
+function accentScaleForCanvas(scale, background, appearance) {
+	try {
+		const bg = new Color(background).to("oklch");
+		const [, bgChroma] = bg.coords;
+		if (!bgChroma || bgChroma < CHROMATIC_THRESHOLD) return {
+			...scale,
+			tinted: false
+		};
+		const tinted = tintLowStepsFromCanvas(scale.accentScale.map((hex) => new Color(hex).to("oklch")), bg);
+		const accentScale = scale.accentScale.map((original, i) => CANVAS_TINT_WEIGHTS[i] ? tinted[i].to("srgb").toString({ format: "hex" }) : original);
+		const accentScaleWideGamut = scale.accentScaleWideGamut.map((original, i) => CANVAS_TINT_WEIGHTS[i] ? toOklchWideGamutString(tinted[i]) : original);
+		const accentScaleAlpha = scale.accentScaleAlpha.map((original, i) => CANVAS_TINT_WEIGHTS[i] ? getAlphaColorSrgb(accentScale[i], scale.background) : original);
+		const accentScaleAlphaWideGamut = scale.accentScaleAlphaWideGamut.map((original, i) => CANVAS_TINT_WEIGHTS[i] ? getAlphaColorP3(accentScaleWideGamut[i], scale.background) : original);
+		const surfaceAlpha = surfaceAlphaFor(appearance);
+		return {
+			accentScale,
+			accentScaleWideGamut,
+			accentScaleAlpha,
+			accentScaleAlphaWideGamut,
+			accentSurface: getAlphaColorSrgb(accentScale[1], scale.background, surfaceAlpha),
+			accentSurfaceWideGamut: getAlphaColorP3(accentScaleWideGamut[1], scale.background, surfaceAlpha),
+			tinted: true
+		};
+	} catch {
+		return {
+			...scale,
+			tinted: false
+		};
+	}
+}
 /** Generate the Radix-style accent scale for one appearance from a single accent color. */
 function generateAccentScale(accent, appearance, opts) {
 	const background = opts?.background ?? DEFAULTS[appearance].background;
 	const scale = generateRadixColors({
 		appearance,
 		accent,
-		gray: opts?.neutral ? NEUTRAL_BASE[opts.neutral] : DEFAULTS[appearance].gray,
+		gray: opts?.neutral ? isSparkNeutralFamily(opts.neutral) ? NEUTRAL_BASE[opts.neutral] : opts.neutral : DEFAULTS[appearance].gray,
 		background
 	});
+	const { accentScale, accentScaleWideGamut, accentScaleAlpha: canvasAccentScaleAlpha, accentScaleAlphaWideGamut: canvasAccentScaleAlphaWideGamut, accentSurface, accentSurfaceWideGamut, tinted } = opts?.background ? accentScaleForCanvas(scale, background, appearance) : {
+		...scale,
+		tinted: false
+	};
+	const capAlphaSteps = tinted ? CANVAS_TINT_WEIGHTS.length : 0;
 	const solved = opts?.background ? {
 		...scale,
-		accentScaleAlpha: opaqueWhereUnsolvable(background, scale.accentScale, scale.accentScaleAlpha),
-		accentScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.accentScaleWideGamut, scale.accentScaleAlphaWideGamut),
+		accentScale,
+		accentScaleWideGamut,
+		accentSurface,
+		accentSurfaceWideGamut,
+		accentScaleAlpha: opaqueWhereUnsolvable(background, accentScale, canvasAccentScaleAlpha, capAlphaSteps),
+		accentScaleAlphaWideGamut: opaqueWhereUnsolvable(background, accentScaleWideGamut, canvasAccentScaleAlphaWideGamut, capAlphaSteps, "p3"),
 		grayScaleAlpha: opaqueWhereUnsolvable(background, scale.grayScale, scale.grayScaleAlpha),
-		grayScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.grayScaleWideGamut, scale.grayScaleAlphaWideGamut)
+		grayScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.grayScaleWideGamut, scale.grayScaleAlphaWideGamut, 0, "p3")
 	} : scale;
 	return {
 		...solved,
@@ -115,15 +258,28 @@ function readableContrast(step9Hex, native, min) {
 		Math.max(.08 * (chroma ?? 0), .04),
 		hue ?? 0
 	]).to("srgb").toString({ format: "hex" });
+	const ratioOf = (hex) => new Color(hex).contrast(step9, "WCAG21");
 	const candidates = [
 		native,
 		tinted(.25),
 		tinted(.15)
 	];
-	const ratios = candidates.map((c) => new Color(c).contrast(step9, "WCAG21"));
-	const passing = ratios.findIndex((r) => r >= min);
+	const passing = candidates.map(ratioOf).findIndex((r) => r >= min);
 	if (passing !== -1) return candidates[passing];
-	return candidates[ratios.indexOf(Math.max(...ratios))];
+	const lightness9 = step9.to("oklch").coords[0] ?? .5;
+	const toward = ratioOf(tinted(0)) >= ratioOf(tinted(1)) ? 0 : 1;
+	let fails = lightness9;
+	let passes = toward;
+	for (let i = 0; i < 16; i++) {
+		const mid = (fails + passes) / 2;
+		if (ratioOf(tinted(mid)) >= min) passes = mid;
+		else fails = mid;
+	}
+	const found = tinted(passes);
+	if (ratioOf(found) >= min) return found;
+	const all = [...candidates, tinted(toward)];
+	const allRatios = all.map(ratioOf);
+	return all[allRatios.indexOf(Math.max(...allRatios))];
 }
 /** sRGB `--spark-*` declarations for a generated accent scale. */
 function accentSparkVars(scale) {
@@ -154,7 +310,7 @@ function getMatchingNeutral(accent) {
 	if (byName) return byName;
 	try {
 		const [, chroma, hueRaw] = new Color(accent).to("oklch").coords;
-		if (!chroma || chroma < .04) return "gray";
+		if (!chroma || chroma < CHROMATIC_THRESHOLD) return "gray";
 		const hue = ((hueRaw ?? 0) % 360 + 360) % 360;
 		if (hue >= 300 || hue < 35) return "mauve";
 		if (hue < 115) return "sand";
@@ -165,6 +321,180 @@ function getMatchingNeutral(accent) {
 		return "slate";
 	}
 }
+/**
+* Fill steps (Radix roles 1-5), measured from the surface toward the *scrim* — the pole
+* opposite the ink. Magnitudes are unchanged from the original ink-directed ramp; only
+* the direction flips, so a fill and the text on it move apart instead of together.
+*/
+const INVERTED_FILL_RAMP = [
+	.06,
+	.12,
+	.2,
+	.3,
+	.4
+];
+/** Strongest border step (8, the hover/active edge). 6 is solved per accent; 7 splits them. */
+const INVERTED_BORDER_TOP = .82;
+/**
+* Ink steps (9-12), measured from the surface toward the ink. Step 9 (the solid fill)
+* lands on the ink itself; 10 eases back for hover; 11-12 are full-strength ink.
+*/
+const INVERTED_INK_RAMP = [
+	1,
+	.88,
+	1,
+	1
+];
+/**
+* Lowest alpha at which the ink, laid over the surface, is 3:1 distinguishable from it
+* (WCAG 1.4.11) — the floor for a border that has to read as an edge at all.
+*
+* Solved rather than hardcoded because it moves with the accent (0.57-0.72 across the
+* curated set). Contrast against the surface rises monotonically with `t`, so bisection
+* finds the boundary.
+*
+* Targets 1% above the floor rather than landing on it: the step ships as `#rrggbbaa`, and
+* 8-bit rounding on any of the four channels can drop an exact solve back under 3:1.
+*/
+function solveBorderFloor(surface, ink) {
+	const target = MIN_GRAPHIC_CONTRAST * 1.01;
+	const ratioAt = (t) => new Color(Color.mix(surface, ink, t, { space: "srgb" })).contrast(surface, "WCAG21");
+	let fails = 0;
+	let passes = 1;
+	for (let i = 0; i < 16; i++) {
+		const mid = (fails + passes) / 2;
+		if (ratioAt(mid) >= target) passes = mid;
+		else fails = mid;
+	}
+	return passes;
+}
+/** OKLCH string in the wide-gamut format the generator emits (`oklch(96.1% 0.0155 254.2)`). */
+function oklchString(color) {
+	const oklch = color.to("oklch");
+	const lightness = +((oklch.coords[0] ?? 0) * 100).toFixed(1);
+	return oklch.toString({ precision: 4 }).replace(/(\S+)(.+)/, `oklch(${lightness}%$2`);
+}
+/**
+* Re-cast a scale for use ON its own solid (step-9) fill — the `inverted` knob.
+*
+* A solid accent control on a solid accent surface is invisible: both paint `--spark-9`.
+* Inverting swaps that pair — step 9 and its contrast ink trade places — so the solid fill
+* and its text are contrast-safe **by construction, for any accent**: `accentContrast` is
+* already the WCAG-checked readable ink for step 9 (`readableContrast`).
+*
+* The non-solid styles need a second idea, because the ink is also the text colour. A fill
+* blended surface→ink moves the background *toward* the foreground, so ink-on-fill contrast
+* falls monotonically with `t` — and measured across the curated set, the highest `t` that
+* still clears 4.5:1 (0.174) sits below the lowest `t` that is 3:1 distinguishable from the
+* surface (0.543). On that line no fill can be both legible and visible, on any accent.
+*
+* So fills blend the other way, toward the **scrim** — the lightness pole opposite the ink,
+* carrying the surface's own hue. Contrast against the ink now *rises* with `t`, which puts
+* every non-solid style at or above the solid pair's ratio for free. Borders keep stepping
+* toward the ink (a scrim-side border caps at ~2:1 on light accents like orange, so it can
+* never clear 1.4.11), starting at the solved 3:1 floor.
+*
+* Appearance-stable on purpose. The generator pins step 9 to the accent itself, so the
+* surface is identical in light and dark — which makes the whole inverted scale identical
+* too, and `[data-inverted]` needs no `.dark` twin.
+*
+* Two things this is deliberately NOT:
+* - **A positional mirror** (`1↔12`). It leaves the solid fill only 2.04:1 from the card in
+*   dark and 2.23:1 on a light accent like orange — under the 3:1 graphical floor, i.e. still
+*   invisible, which is the bug this exists to fix.
+* - **A regenerated on-surface ramp.** Feeding the surface back in as `background` produces
+*   off-hue overlays (a warm wash on a blue card) and ink at 3.35:1.
+*
+* Values are literals, not `var(--spark-N)` aliases: a scale can't re-point to itself
+* (`--spark-1: var(--spark-12)` next to `--spark-12: var(--spark-1)` is a cycle, and CSS
+* discards both).
+*/
+function invertAccentScale(scale) {
+	const surface = scale.accentScale[8];
+	const ink = scale.accentContrast;
+	const surfaceColor = new Color(surface);
+	const inkColor = new Color(ink);
+	const [surfaceLightness, surfaceChroma, surfaceHue] = surfaceColor.to("oklch").coords;
+	const scrimColor = new Color("oklch", [
+		(inkColor.to("oklch").coords[0] ?? 0) > (surfaceLightness ?? 0) ? .12 : .98,
+		Math.max(.08 * (surfaceChroma ?? 0), .02),
+		surfaceHue ?? 0
+	]);
+	const borderFloor = solveBorderFloor(surfaceColor, inkColor);
+	const ramp = [
+		...INVERTED_FILL_RAMP.map((t) => ({
+			toward: scrimColor,
+			t
+		})),
+		{
+			toward: inkColor,
+			t: borderFloor
+		},
+		{
+			toward: inkColor,
+			t: (borderFloor + INVERTED_BORDER_TOP) / 2
+		},
+		{
+			toward: inkColor,
+			t: INVERTED_BORDER_TOP
+		},
+		...INVERTED_INK_RAMP.map((t) => ({
+			toward: inkColor,
+			t
+		}))
+	];
+	const blend = ({ toward, t }) => new Color(Color.mix(surfaceColor, toward, t, { space: "srgb" }));
+	const steps = ramp.map((s) => blend(s).to("srgb").toString({ format: "hex" }));
+	const stepsWideGamut = ramp.map((s) => oklchString(blend(s)));
+	const alpha = ramp.map(({ toward, t }) => {
+		const translucent = toward.clone();
+		translucent.alpha = t;
+		return translucent.to("srgb").toString({ format: "hex" });
+	});
+	const alphaWideGamut = ramp.map(({ toward, t }) => {
+		const translucent = toward.clone().to("p3");
+		translucent.alpha = t;
+		return translucent.toString({ precision: 4 }).replace("color(p3 ", "color(display-p3 ");
+	});
+	return {
+		...scale,
+		accentScale: steps,
+		accentScaleWideGamut: stepsWideGamut,
+		accentScaleAlpha: alpha,
+		accentScaleAlphaWideGamut: alphaWideGamut,
+		accentContrast: surface,
+		accentOnSolid: surface,
+		accentSurface: steps[1],
+		accentSurfaceWideGamut: stepsWideGamut[1]
+	};
+}
+/**
+* `neutralColor="auto"` resolution: prefer the canvas's own tint when it has one — a
+* chromatic `background` seeds a visibly warmer/cooler ramp than bucketing it into one
+* of the 6 named families would (see gap #12). Falls back to accent-matched bucketing
+* when there's no tinted canvas to pull from.
+*/
+function resolveAutoNeutral(accent, background) {
+	if (background) try {
+		const [, chroma] = new Color(background).to("oklch").coords;
+		if (chroma && chroma >= CHROMATIC_THRESHOLD) return background;
+	} catch {}
+	return getMatchingNeutral(accent);
+}
+/**
+* Whether a string parses as a color at all — for validating a custom `neutralColor`
+* before it reaches the generator. An unparseable seed (e.g. a typo'd family name like
+* `"slat"`) would otherwise throw deep inside `generateRadixColors`, taking the whole
+* accent scale down with it via the caller's shared try/catch.
+*/
+function isParsableColor(value) {
+	try {
+		new Color(value).to("oklch");
+		return true;
+	} catch {
+		return false;
+	}
+}
 /** The 27 tokens every scale family declares, under an arbitrary prefix. */
 function scaleVars(prefix, steps, alpha, contrast, onSolid, surface) {
 	return [
@@ -185,6 +515,23 @@ function sparkVars(steps, alpha, contrast, onSolid, surface, background) {
 	];
 }
 /**
+* The same `--neutral-*` tokens `neutralSparkVars` emits, pointed back at a static Radix
+* family instead of a generated scale — the counterpart for an appearance that has *no*
+* custom canvas of its own.
+*
+* Ambient (no explicit `appearance`) mode emits both appearances' scales into one unlayered
+* `<style>`, but a custom canvas only regenerates neutrals for the appearance it belongs to.
+* Left undeclared, the other block doesn't fall back — nothing resets a custom property, so
+* its sibling's canvas-tinted values simply stay in effect there, and being unlayered they
+* outrank `[data-neutral-color]`'s own `@layer base` mapping too. Declaring the same token
+* set closes that. `var(--<family>-*)` is itself appearance-aware (Radix ships the dark
+* scales under `.dark`), so one declaration resolves correctly wherever the block applies.
+*/
+function neutralFamilyVars(family) {
+	const ref = (suffix) => `var(--${family}-${suffix})`;
+	return scaleVars("neutral", Array.from({ length: 12 }, (_, i) => ref(`${i + 1}`)), Array.from({ length: 12 }, (_, i) => ref(`a${i + 1}`)), "var(--neutral-12)", "#fff", "var(--neutral-2)");
+}
+/**
 * `--neutral-*` declarations from the gray scale the generator produces alongside the
 * accent — normally discarded, because `[data-neutral-color]` points `--neutral-*` at a
 * static Radix family. Worth consuming only when the canvas is custom: the static
@@ -202,6 +549,6 @@ function neutralSparkVarsP3(scale) {
 	return scaleVars("neutral", scale.grayScaleWideGamut, scale.grayScaleAlphaWideGamut, readableContrast(scale.grayScale[8], "#fff", MIN_TEXT_CONTRAST), readableContrast(scale.grayScale[8], "#fff", MIN_GRAPHIC_CONTRAST), scale.grayScaleWideGamut[1]);
 }
 //#endregion
-export { CURATED_ACCENTS, accentSparkVars, accentSparkVarsP3, appearanceForBackground, generateAccentScale, getMatchingNeutral, neutralSparkVars, neutralSparkVarsP3 };
+export { CURATED_ACCENTS, accentSparkVars, accentSparkVarsP3, appearanceForBackground, generateAccentScale, getMatchingNeutral, invertAccentScale, isParsableColor, neutralFamilyVars, neutralSparkVars, neutralSparkVarsP3, resolveAutoNeutral };
 
 //# sourceMappingURL=accent-theme.js.map

package/dist/lib/accent-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent-theme.js","names":[],"sources":["../../src/lib/accent-theme.ts"],"sourcesContent":["// Accent is the one runtime knob (colour math, not a CSS-var swap): generate the\n// `--spark-*` scale with the same Radix algorithm live portals use, apply as inline vars.\nimport * as RadixColors from '@radix-ui/colors'\nimport Color from 'colorjs.io'\nimport { generateRadixColors } from './generate-radix-colors'\nimport type { SparkNeutral } from './theme-types'\n\n/** Shape returned by the vendored Radix generator (it doesn't export a named type). */\nexport type GeneratedColors = ReturnType<typeof generateRadixColors>\n\n/**\n * generateAccentScale output: the raw scale, but with two readable foregrounds on the\n * solid (step-9) fill, each meeting a different WCAG bar:\n * - `accentContrast` — 4.5:1 (WCAG 1.4.3), for button/label **text**.\n * - `accentOnSolid` — 3:1 (WCAG 1.4.11), for a **graphical glyph** (the checkbox check).\n * A checkmark is graphical, not text, so it uses the looser-but-correct 3:1 bar: white\n * where it clears 3:1 (most accents, incl. neutral & red — the convention), and a dark\n * accent-tint where white is too weak (e.g. orange). Using the 4.5:1 text contrast for\n * the glyph over-darkened it (a black tick on a red/neutral checkbox).\n */\nexport type SparkAccentScale = GeneratedColors & { accentOnSolid: string }\n\nexport type Appearance = 'light' | 'dark'\n\n/** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */\nexport const CURATED_ACCENTS: Record<string, string> = {\n  blue: RadixColors.blue.blue9,\n  indigo: RadixColors.indigo.indigo9,\n  violet: RadixColors.violet.violet9,\n  purple: RadixColors.purple.purple9,\n  cyan: RadixColors.cyan.cyan9,\n  teal: RadixColors.teal.teal9,\n  green: RadixColors.green.green9,\n  grass: RadixColors.grass.grass9,\n  orange: RadixColors.orange.orange9,\n  red: RadixColors.red.red9,\n  pink: RadixColors.pink.pink9,\n  gray: RadixColors.gray.gray9,\n}\n\n/** ECP `DesignUtils` generator inputs, so a generated scale matches live portals. */\nconst DEFAULTS: Record<Appearance, { gray: string; background: string }> = {\n  light: { gray: '#333333', background: '#ffffff' },\n  // Matches ECP DesignUtils' DEFAULT_DARK_BACKGROUND_COLOR -- the alpha ramp\n  // is composited against this, so it must match what's actually painted.\n  dark: { gray: '#8b8d98', background: '#000000' },\n}\n\n/** Radix step-9 per neutral family — the generator's `gray` seed, so a regenerated\n    neutral lands on the family `[data-neutral-color]` would have selected statically. */\nconst NEUTRAL_BASE: Record<Exclude<SparkNeutral, 'auto'>, string> = {\n  slate: RadixColors.slate.slate9,\n  mauve: RadixColors.mauve.mauve9,\n  gray: RadixColors.gray.gray9,\n  sage: RadixColors.sage.sage9,\n  olive: RadixColors.olive.olive9,\n  sand: RadixColors.sand.sand9,\n}\n\nexport interface GenerateScaleOptions {\n  /**\n   * Page canvas the scale is composited against. Drives the lightness curve of all 12\n   * steps AND every alpha step (each is solved as `target = bg·(1-α) + fg·α`), so it\n   * must match what's actually painted or the alpha ramp renders wrong.\n   */\n  background?: string\n  /** Neutral family to regenerate against `background`. Pass a resolved family, not `'auto'`. */\n  neutral?: Exclude<SparkNeutral, 'auto'>\n}\n\n/** Which appearance a canvas belongs to, by OKLCH lightness. */\nexport function appearanceForBackground(background: string): Appearance {\n  const [lightness] = new Color(background).to('oklch').coords\n  return (lightness ?? 1) >= 0.5 ? 'light' : 'dark'\n}\n\n/** deltaE2000 ≈ 2 is the just-noticeable bar — a good solve lands far inside it. */\nconst ALPHA_SOLVE_TOLERANCE = 2\n\n/**\n * Replace alpha steps the solver could not actually solve with their opaque solid.\n *\n * Each `aN` is solved so that compositing it over the background reproduces step N\n * (`target = bg·(1-α) + fg·α`). From a saturated canvas a desaturated ink target is\n * unreachable within alpha bounds, and Radix's solver **degrades silently** rather than\n * failing — on `#FFD400` it returns `#0000ff39` for slate a11, which composites to\n * 1.66:1 body text where the solid step is a correct 9.03:1.\n *\n * So verify the solve and fall back to the opaque value where it doesn't hold. Only ever\n * called for a custom background; on white/black every step solves exactly (deltaE ~0),\n * so the default output — and portal parity — is untouched either way.\n */\nfunction opaqueWhereUnsolvable(\n  background: string,\n  solid: string[],\n  alpha: string[],\n): string[] {\n  let bg: number[]\n  try {\n    bg = new Color(background).to('srgb').coords\n  } catch {\n    return alpha\n  }\n  return alpha.map((step, i) => {\n    const target = solid[i]\n    if (!target) return step\n    try {\n      const ink = new Color(step)\n      const fg = ink.to('srgb').coords\n      const a = ink.alpha as number\n      const composited = new Color(\n        'srgb',\n        [0, 1, 2].map((k) => bg[k]! * (1 - a) + fg[k]! * a) as [\n          number,\n          number,\n          number,\n        ],\n      )\n      return composited.deltaE(new Color(target), '2000') <=\n        ALPHA_SOLVE_TOLERANCE\n        ? step\n        : target\n    } catch {\n      return target\n    }\n  })\n}\n\n/** Generate the Radix-style accent scale for one appearance from a single accent color. */\nexport function generateAccentScale(\n  accent: string,\n  appearance: Appearance,\n  opts?: GenerateScaleOptions,\n): SparkAccentScale {\n  const background = opts?.background ?? DEFAULTS[appearance].background\n  const scale = generateRadixColors({\n    appearance,\n    accent,\n    gray: opts?.neutral\n      ? NEUTRAL_BASE[opts.neutral]\n      : DEFAULTS[appearance].gray,\n    background,\n  })\n  const solved = opts?.background\n    ? {\n        ...scale,\n        accentScaleAlpha: opaqueWhereUnsolvable(\n          background,\n          scale.accentScale,\n          scale.accentScaleAlpha,\n        ) as typeof scale.accentScaleAlpha,\n        accentScaleAlphaWideGamut: opaqueWhereUnsolvable(\n          background,\n          scale.accentScaleWideGamut,\n          scale.accentScaleAlphaWideGamut,\n        ) as typeof scale.accentScaleAlphaWideGamut,\n        grayScaleAlpha: opaqueWhereUnsolvable(\n          background,\n          scale.grayScale,\n          scale.grayScaleAlpha,\n        ) as typeof scale.grayScaleAlpha,\n        grayScaleAlphaWideGamut: opaqueWhereUnsolvable(\n          background,\n          scale.grayScaleWideGamut,\n          scale.grayScaleAlphaWideGamut,\n        ) as typeof scale.grayScaleAlphaWideGamut,\n      }\n    : scale\n  // accentContrast → 4.5:1 (button text); accentOnSolid → 3:1 (graphical glyph,\n  // see SparkAccentScale). Same picker, different WCAG threshold.\n  return {\n    ...solved,\n    accentContrast: readableContrast(\n      solved.accentScale[8]!,\n      solved.accentContrast,\n      MIN_TEXT_CONTRAST,\n    ),\n    accentOnSolid: readableContrast(\n      solved.accentScale[8]!,\n      solved.accentContrast,\n      MIN_GRAPHIC_CONTRAST,\n    ),\n  }\n}\n\nconst MIN_TEXT_CONTRAST = 4.5 // WCAG 1.4.3 — button / label text\nconst MIN_GRAPHIC_CONTRAST = 3 // WCAG 1.4.11 — a check / indicator glyph on a solid fill\n\n// Pick the readable foreground on step 9: prefer the generator's native contrast\n// (usually white), else fall to progressively darker accent-tinted inks until one\n// clears `min`. Text uses 4.5:1; a graphical glyph (the checkmark) uses 3:1 — which\n// keeps white on most accents (incl. neutral 3.32:1, red 3.91:1) but flips to a dark\n// tint where white is too weak (e.g. orange, 2.97:1). The vendored generator keeps\n// white at APCA Lc >= 40, which can sit below both WCAG thresholds — hence this guard.\nfunction readableContrast(\n  step9Hex: string,\n  native: string,\n  min: number,\n): string {\n  const step9 = new Color(step9Hex)\n  const [, chroma, hue] = step9.to('oklch').coords\n  const tinted = (lightness: number) =>\n    new Color('oklch', [\n      lightness,\n      Math.max(0.08 * (chroma ?? 0), 0.04),\n      hue ?? 0,\n    ])\n      .to('srgb')\n      .toString({ format: 'hex' })\n  const candidates = [native, tinted(0.25), tinted(0.15)]\n  const ratios = candidates.map((c) => new Color(c).contrast(step9, 'WCAG21'))\n  const passing = ratios.findIndex((r) => r >= min)\n  if (passing !== -1) return candidates[passing]!\n  return candidates[ratios.indexOf(Math.max(...ratios))]!\n}\n\n/** sRGB `--spark-*` declarations for a generated accent scale. */\nexport function accentSparkVars(scale: SparkAccentScale): string[] {\n  return sparkVars(\n    scale.accentScale,\n    scale.accentScaleAlpha,\n    scale.accentContrast,\n    scale.accentOnSolid,\n    scale.accentSurface,\n    scale.background,\n  )\n}\n\n/** Wide-gamut (P3) `--spark-*` declarations — for a `color-gamut: p3` `@supports` block. */\nexport function accentSparkVarsP3(scale: SparkAccentScale): string[] {\n  return sparkVars(\n    scale.accentScaleWideGamut,\n    scale.accentScaleAlphaWideGamut,\n    scale.accentContrast,\n    scale.accentOnSolid,\n    scale.accentSurfaceWideGamut,\n    scale.background,\n  )\n}\n\n/** Radix's `grayColor=\"auto\"` pairing (accent family → gray), mapped to our 6 neutrals. */\nconst NEUTRAL_BY_ACCENT: Record<string, Exclude<SparkNeutral, 'auto'>> = {\n  blue: 'slate',\n  indigo: 'slate',\n  cyan: 'slate',\n  violet: 'mauve',\n  purple: 'mauve',\n  pink: 'mauve',\n  red: 'mauve',\n  teal: 'sage',\n  green: 'sage',\n  grass: 'olive',\n  orange: 'sand',\n  gray: 'gray',\n}\n\n/** Radix's \"auto\" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */\nexport function getMatchingNeutral(\n  accent: string,\n): Exclude<SparkNeutral, 'auto'> {\n  const byName = NEUTRAL_BY_ACCENT[accent]\n  if (byName) return byName\n  try {\n    const [, chroma, hueRaw] = new Color(accent).to('oklch').coords\n    if (!chroma || chroma < 0.04) return 'gray'\n    const hue = (((hueRaw ?? 0) % 360) + 360) % 360\n    if (hue >= 300 || hue < 35) return 'mauve'\n    if (hue < 115) return 'sand'\n    if (hue < 145) return 'olive'\n    if (hue < 200) return 'sage'\n    return 'slate'\n  } catch {\n    return 'slate'\n  }\n}\n\n/** The 27 tokens every scale family declares, under an arbitrary prefix. */\nfunction scaleVars(\n  prefix: string,\n  steps: string[],\n  alpha: string[],\n  contrast: string,\n  onSolid: string,\n  surface: string,\n): string[] {\n  return [\n    ...steps.map((c, i) => `--${prefix}-${i + 1}: ${c};`),\n    ...alpha.map((c, i) => `--${prefix}-a${i + 1}: ${c};`),\n    `--${prefix}-contrast: ${contrast};`,\n    `--${prefix}-on-solid: ${onSolid};`,\n    `--${prefix}-surface: ${surface};`,\n  ]\n}\n\nfunction sparkVars(\n  steps: string[],\n  alpha: string[],\n  contrast: string,\n  onSolid: string,\n  surface: string,\n  background: string,\n): string[] {\n  const indicator = steps[8]! // step 9 — the brand step (matches --spark-indicator/-track)\n  return [\n    ...scaleVars('spark', steps, alpha, contrast, onSolid, surface),\n    `--spark-background: ${background};`,\n    `--spark-indicator: ${indicator};`,\n    `--spark-track: ${indicator};`,\n  ]\n}\n\n/**\n * `--neutral-*` declarations from the gray scale the generator produces alongside the\n * accent — normally discarded, because `[data-neutral-color]` points `--neutral-*` at a\n * static Radix family. Worth consuming only when the canvas is custom: the static\n * families' alpha steps are pre-baked against white/black, so on any other background\n * they composite wrong (every gray text/border reads through `--neutral-a*`).\n *\n * `--neutral-surface` is step 2, matching the static families' own convention rather\n * than the generator's translucent `graySurface`.\n */\nexport function neutralSparkVars(scale: SparkAccentScale): string[] {\n  return scaleVars(\n    'neutral',\n    scale.grayScale,\n    scale.grayScaleAlpha,\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_TEXT_CONTRAST),\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_GRAPHIC_CONTRAST),\n    scale.grayScale[1]!,\n  )\n}\n\n/** Wide-gamut (P3) twin of `neutralSparkVars`. */\nexport function neutralSparkVarsP3(scale: SparkAccentScale): string[] {\n  return scaleVars(\n    'neutral',\n    scale.grayScaleWideGamut,\n    scale.grayScaleAlphaWideGamut,\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_TEXT_CONTRAST),\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_GRAPHIC_CONTRAST),\n    scale.grayScaleWideGamut[1]!,\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"accent-theme.js","names":[],"sources":["../../src/lib/accent-theme.ts"],"sourcesContent":["// Accent is the one runtime knob (colour math, not a CSS-var swap): generate the\n// `--spark-*` scale with the same Radix algorithm live portals use, apply as inline vars.\nimport * as RadixColors from '@radix-ui/colors'\nimport Color from 'colorjs.io'\nimport {\n  generateRadixColors,\n  getAlphaColorP3,\n  getAlphaColorSrgb,\n} from './generate-radix-colors'\nimport {\n  isSparkNeutralFamily,\n  type SparkNeutral,\n  type SparkNeutralFamily,\n} from './theme-types'\n\n/** Shape returned by the vendored Radix generator (it doesn't export a named type). */\nexport type GeneratedColors = ReturnType<typeof generateRadixColors>\n\n/**\n * generateAccentScale output: the raw scale, but with two readable foregrounds on the\n * solid (step-9) fill, each meeting a different WCAG bar:\n * - `accentContrast` — 4.5:1 (WCAG 1.4.3), for button/label **text**.\n * - `accentOnSolid` — 3:1 (WCAG 1.4.11), for a **graphical glyph** (the checkbox check).\n * A checkmark is graphical, not text, so it uses the looser-but-correct 3:1 bar: white\n * where it clears 3:1 (most accents, incl. neutral & red — the convention), and a dark\n * accent-tint where white is too weak (e.g. orange). Using the 4.5:1 text contrast for\n * the glyph over-darkened it (a black tick on a red/neutral checkbox).\n */\nexport type SparkAccentScale = GeneratedColors & { accentOnSolid: string }\n\nexport type Appearance = 'light' | 'dark'\n\n/** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */\nexport const CURATED_ACCENTS: Record<string, string> = {\n  blue: RadixColors.blue.blue9,\n  indigo: RadixColors.indigo.indigo9,\n  violet: RadixColors.violet.violet9,\n  purple: RadixColors.purple.purple9,\n  cyan: RadixColors.cyan.cyan9,\n  teal: RadixColors.teal.teal9,\n  green: RadixColors.green.green9,\n  grass: RadixColors.grass.grass9,\n  orange: RadixColors.orange.orange9,\n  red: RadixColors.red.red9,\n  pink: RadixColors.pink.pink9,\n  gray: RadixColors.gray.gray9,\n}\n\n/** ECP `DesignUtils` generator inputs, so a generated scale matches live portals. */\nconst DEFAULTS: Record<Appearance, { gray: string; background: string }> = {\n  light: { gray: '#333333', background: '#ffffff' },\n  // Matches ECP DesignUtils' DEFAULT_DARK_BACKGROUND_COLOR -- the alpha ramp\n  // is composited against this, so it must match what's actually painted.\n  dark: { gray: '#8b8d98', background: '#000000' },\n}\n\n/** Radix step-9 per neutral family — the generator's `gray` seed, so a regenerated\n    neutral lands on the family `[data-neutral-color]` would have selected statically. */\nconst NEUTRAL_BASE: Record<SparkNeutralFamily, string> = {\n  slate: RadixColors.slate.slate9,\n  mauve: RadixColors.mauve.mauve9,\n  gray: RadixColors.gray.gray9,\n  sage: RadixColors.sage.sage9,\n  olive: RadixColors.olive.olive9,\n  sand: RadixColors.sand.sand9,\n}\n\nexport interface GenerateScaleOptions {\n  /**\n   * Page canvas the scale is composited against. Drives the lightness curve of all 12\n   * steps AND every alpha step (each is solved as `target = bg·(1-α) + fg·α`), so it\n   * must match what's actually painted or the alpha ramp renders wrong.\n   */\n  background?: string\n  /**\n   * Neutral family, or an arbitrary color to seed the neutral scale (regenerated against\n   * `background`, same as a named family). Pass a resolved value, not `'auto'` — this\n   * option isn't itself typed to exclude it (an open string union can't forbid one\n   * literal), but nothing in `<Theme>` ever forwards `'auto'` this far.\n   */\n  neutral?: SparkNeutral\n}\n\n/** Which appearance a canvas belongs to, by OKLCH lightness. */\nexport function appearanceForBackground(background: string): Appearance {\n  const [lightness] = new Color(background).to('oklch').coords\n  return (lightness ?? 1) >= 0.5 ? 'light' : 'dark'\n}\n\n/** deltaE2000 ≈ 2 is the just-noticeable bar — a good solve lands far inside it. */\nconst ALPHA_SOLVE_TOLERANCE = 2\n\n/**\n * OKLCH chroma below which a color reads as neutral rather than tinted — shared by every\n * \"is this canvas/accent actually chromatic\" check (getMatchingNeutral, resolveAutoNeutral,\n * accentScaleForCanvas).\n */\nconst CHROMATIC_THRESHOLD = 0.04\n\n/**\n * An alpha step past this needs to cover the canvas almost completely to reproduce its\n * target — at that point it isn't a tint anymore, and the opaque solid is both cheaper and\n * more predictable. Only applied to the accent ramp's canvas-tinted low steps (gap #12a,\n * ask 2 — specifically the steps `tintLowStepsFromCanvas` retargets; steps 6-12 are by-design\n * high-alpha ink/solid tokens even on plain white — capping *those* would be a regression, not\n * a fix). Same shape as the deltaE check below, widened from \"could not solve\" to \"solved, but\n * not usefully\".\n */\nconst ALPHA_CAP = 0.5\n\n/**\n * Replace alpha steps the solver could not actually solve — or, within `capAlphaSteps` leading\n * steps, solved only at a near-opaque alpha — with their opaque solid.\n *\n * Each `aN` is solved so that compositing it over the background reproduces step N\n * (`target = bg·(1-α) + fg·α`). From a saturated canvas a desaturated ink target is\n * unreachable within alpha bounds, and Radix's solver **degrades silently** rather than\n * failing — on `#FFD400` it returns `#0000ff39` for slate a11, which composites to\n * 1.66:1 body text where the solid step is a correct 9.03:1. Separately, even a solve that\n * *succeeds* can need alpha past `ALPHA_CAP` to get there — technically correct only over\n * that exact background, and no longer a usable \"tint\" anywhere else (gap #12a, ask 2).\n *\n * `space` must match whatever space `alpha` was actually solved in — `getAlphaColorP3` solves\n * per-channel in P3, and verifying that against an sRGB composite rejects perfectly good\n * solves (they were never trying to reproduce the sRGB composite in the first place).\n *\n * So verify the solve and fall back to the opaque value where either check fails. Only ever\n * called for a custom background; on white/black every step solves exactly at low alpha,\n * so the default output — and portal parity — is untouched either way.\n */\nfunction opaqueWhereUnsolvable(\n  background: string,\n  solid: string[],\n  alpha: string[],\n  capAlphaSteps = 0,\n  space: 'srgb' | 'p3' = 'srgb',\n): string[] {\n  let bg: number[]\n  try {\n    bg = new Color(background).to(space).coords\n  } catch {\n    return alpha\n  }\n  return alpha.map((step, i) => {\n    const target = solid[i]\n    if (!target) return step\n    try {\n      const ink = new Color(step)\n      const fg = ink.to(space).coords\n      const a = ink.alpha as number\n      if (i < capAlphaSteps && a > ALPHA_CAP) return target\n      const composited = new Color(\n        space,\n        [0, 1, 2].map((k) => bg[k]! * (1 - a) + fg[k]! * a) as [\n          number,\n          number,\n          number,\n        ],\n      )\n      return composited.deltaE(new Color(target), '2000') <=\n        ALPHA_SOLVE_TOLERANCE\n        ? step\n        : target\n    } catch {\n      return target\n    }\n  })\n}\n\n/**\n * Weight (0–1) each of the accent scale's first 5 steps is pulled toward the canvas's own\n * hue/chroma; step 6 and up (borders, solid, text) stay the true accent untouched.\n */\nconst CANVAS_TINT_WEIGHTS = [1, 0.8, 0.6, 0.4, 0.2]\n\n/**\n * Pull the accent scale's low steps toward the canvas's own color (gap #12a, ask 1): Radix's\n * generator sets every step's hue/chroma from the accent itself and only re-curves lightness\n * against the background, so on a chromatic canvas the low steps (app/component background\n * territory) stay a flat wash of the accent instead of a tint of the page — right where the\n * now-canvas-tinted neutral scale (gap #12) visibly disagrees with it. Step 9 (the solid,\n * brand-defining step) and everything above step 5 is left exactly as Radix generated it.\n *\n * Mixed in OKLab (rectangular a/b), not OKLCH (polar hue + chroma): a circular hue\n * interpolation between two far-apart hues (a blue accent on a yellow-green canvas, say) has\n * to sweep through whatever unrelated hues sit on the \"shorter\" arc between them — a vivid\n * green/teal/cyan that belongs to neither endpoint. Linearly mixing a/b instead moves along\n * the straight line between the two points, which naturally desaturates toward neutral as the\n * two colors pull in more different directions, rather than swinging through a third, unrelated\n * hue. Lightness (shared between OKLab and OKLCH) is untouched either way — Radix's own\n * background-aware curve already owns it.\n *\n * Takes/returns `Color` objects rather than strings so callers can reuse the same tinted\n * coordinates for both the sRGB and wide-gamut representations without a lossy round trip.\n */\nfunction tintLowStepsFromCanvas(\n  solidScale: readonly Color[],\n  bg: Color,\n): Color[] {\n  const [, bgA, bgB] = bg.to('oklab').coords\n  return solidScale.map((step, i) => {\n    const weight = CANVAS_TINT_WEIGHTS[i]\n    if (!weight) return step\n    const [lightness, a, b] = step.to('oklab').coords\n    return new Color('oklab', [\n      lightness ?? 0,\n      (a ?? 0) * (1 - weight) + (bgA ?? 0) * weight,\n      (b ?? 0) * (1 - weight) + (bgB ?? 0) * weight,\n    ])\n  })\n}\n\n/** Mirrors generate-radix-colors.tsx's private toOklchString (not exported by the vendored file). */\nfunction toOklchWideGamutString(color: Color): string {\n  const L = +((color.coords[0] ?? 0) * 100).toFixed(1)\n  return color\n    .to('oklch')\n    .toString({ precision: 4 })\n    .replace(/(\\S+)(.+)/, `oklch(${L}%$2`)\n}\n\n/** Same fixed alpha the vendored generator uses for `accentSurface` — a stylistic choice, not a solve. */\nfunction surfaceAlphaFor(appearance: Appearance): number {\n  return appearance === 'light' ? 0.8 : 0.5\n}\n\n/**\n * Canvas-tinted low steps for the accent scale, or the untouched scale (and `tinted: false`)\n * when the canvas isn't chromatic enough to bother (gap #12a, ask 1). Only indices\n * `0..CANVAS_TINT_WEIGHTS.length-1` are ever replaced — steps 6-12 come back byte-identical to\n * what Radix generated, in both representations (no lossy sRGB round trip for the untouched\n * wide-gamut steps).\n *\n * `tinted` tells the caller whether to scope `opaqueWhereUnsolvable`'s alpha cap in at all —\n * the cap only makes sense for steps this function actually retargeted; a caller that applied\n * it unconditionally on any custom `background` would wrongly force perfectly fine low-alpha\n * steps opaque on an *achromatic* custom background (an explicit `#000000`/`#f5f5f5`, say),\n * where nothing here ever ran.\n *\n * Re-solves alpha for the tinted indices too: the generator's own `accentScaleAlpha` was\n * solved against the *pre-tint* solid, so once that solid moves the old alpha value no longer\n * reproduces it — left alone, every tinted step would fail `opaqueWhereUnsolvable`'s deltaE\n * check and go opaque, defeating the point (the `soft`-card fill this exists for would never\n * actually be translucent on a tinted canvas). Reuses Radix's own alpha solver so the result\n * matches what the generator itself would have produced had it been given this target directly.\n *\n * `accentSurface` (the `surface` card variant's fill) gets the same treatment: the generator\n * computes it as a fixed-alpha composite of step 2 — index 1, always tinted — over the\n * background, so recomputing it from the *tinted* step 2 at that same fixed alpha (0.8 light,\n * 0.5 dark; not a solve) keeps it in sync with `soft`'s fill instead of staying the old,\n * untinted wash (review-findings.md #13).\n */\nfunction accentScaleForCanvas(\n  scale: GeneratedColors,\n  background: string,\n  appearance: Appearance,\n): Pick<\n  GeneratedColors,\n  | 'accentScale'\n  | 'accentScaleWideGamut'\n  | 'accentScaleAlpha'\n  | 'accentScaleAlphaWideGamut'\n  | 'accentSurface'\n  | 'accentSurfaceWideGamut'\n> & { tinted: boolean } {\n  try {\n    const bg = new Color(background).to('oklch')\n    const [, bgChroma] = bg.coords\n    if (!bgChroma || bgChroma < CHROMATIC_THRESHOLD)\n      return { ...scale, tinted: false }\n    const tinted = tintLowStepsFromCanvas(\n      scale.accentScale.map((hex) => new Color(hex).to('oklch')),\n      bg,\n    )\n    const accentScale = scale.accentScale.map((original, i) =>\n      CANVAS_TINT_WEIGHTS[i]\n        ? tinted[i]!.to('srgb').toString({ format: 'hex' })\n        : original,\n    ) as typeof scale.accentScale\n    const accentScaleWideGamut = scale.accentScaleWideGamut.map((original, i) =>\n      CANVAS_TINT_WEIGHTS[i] ? toOklchWideGamutString(tinted[i]!) : original,\n    ) as typeof scale.accentScaleWideGamut\n    const accentScaleAlpha = scale.accentScaleAlpha.map((original, i) =>\n      CANVAS_TINT_WEIGHTS[i]\n        ? getAlphaColorSrgb(accentScale[i]!, scale.background)\n        : original,\n    ) as typeof scale.accentScaleAlpha\n    const accentScaleAlphaWideGamut = scale.accentScaleAlphaWideGamut.map(\n      (original, i) =>\n        CANVAS_TINT_WEIGHTS[i]\n          ? getAlphaColorP3(accentScaleWideGamut[i]!, scale.background)\n          : original,\n    ) as typeof scale.accentScaleAlphaWideGamut\n    const surfaceAlpha = surfaceAlphaFor(appearance)\n    const accentSurface = getAlphaColorSrgb(\n      accentScale[1]!,\n      scale.background,\n      surfaceAlpha,\n    )\n    const accentSurfaceWideGamut = getAlphaColorP3(\n      accentScaleWideGamut[1]!,\n      scale.background,\n      surfaceAlpha,\n    )\n    return {\n      accentScale,\n      accentScaleWideGamut,\n      accentScaleAlpha,\n      accentScaleAlphaWideGamut,\n      accentSurface,\n      accentSurfaceWideGamut,\n      tinted: true,\n    }\n  } catch {\n    return { ...scale, tinted: false }\n  }\n}\n\n/** Generate the Radix-style accent scale for one appearance from a single accent color. */\nexport function generateAccentScale(\n  accent: string,\n  appearance: Appearance,\n  opts?: GenerateScaleOptions,\n): SparkAccentScale {\n  const background = opts?.background ?? DEFAULTS[appearance].background\n  const scale = generateRadixColors({\n    appearance,\n    accent,\n    gray: opts?.neutral\n      ? isSparkNeutralFamily(opts.neutral)\n        ? NEUTRAL_BASE[opts.neutral]\n        : opts.neutral\n      : DEFAULTS[appearance].gray,\n    background,\n  })\n  const {\n    accentScale,\n    accentScaleWideGamut,\n    accentScaleAlpha: canvasAccentScaleAlpha,\n    accentScaleAlphaWideGamut: canvasAccentScaleAlphaWideGamut,\n    accentSurface,\n    accentSurfaceWideGamut,\n    tinted,\n  } = opts?.background\n    ? accentScaleForCanvas(scale, background, appearance)\n    : { ...scale, tinted: false }\n  const capAlphaSteps = tinted ? CANVAS_TINT_WEIGHTS.length : 0\n  const solved = opts?.background\n    ? {\n        ...scale,\n        accentScale,\n        accentScaleWideGamut,\n        accentSurface,\n        accentSurfaceWideGamut,\n        accentScaleAlpha: opaqueWhereUnsolvable(\n          background,\n          accentScale,\n          canvasAccentScaleAlpha,\n          capAlphaSteps,\n        ) as typeof scale.accentScaleAlpha,\n        accentScaleAlphaWideGamut: opaqueWhereUnsolvable(\n          background,\n          accentScaleWideGamut,\n          canvasAccentScaleAlphaWideGamut,\n          capAlphaSteps,\n          'p3',\n        ) as typeof scale.accentScaleAlphaWideGamut,\n        grayScaleAlpha: opaqueWhereUnsolvable(\n          background,\n          scale.grayScale,\n          scale.grayScaleAlpha,\n        ) as typeof scale.grayScaleAlpha,\n        grayScaleAlphaWideGamut: opaqueWhereUnsolvable(\n          background,\n          scale.grayScaleWideGamut,\n          scale.grayScaleAlphaWideGamut,\n          0,\n          'p3',\n        ) as typeof scale.grayScaleAlphaWideGamut,\n      }\n    : scale\n  // accentContrast → 4.5:1 (button text); accentOnSolid → 3:1 (graphical glyph,\n  // see SparkAccentScale). Same picker, different WCAG threshold.\n  return {\n    ...solved,\n    accentContrast: readableContrast(\n      solved.accentScale[8]!,\n      solved.accentContrast,\n      MIN_TEXT_CONTRAST,\n    ),\n    accentOnSolid: readableContrast(\n      solved.accentScale[8]!,\n      solved.accentContrast,\n      MIN_GRAPHIC_CONTRAST,\n    ),\n  }\n}\n\nconst MIN_TEXT_CONTRAST = 4.5 // WCAG 1.4.3 — button / label text\nconst MIN_GRAPHIC_CONTRAST = 3 // WCAG 1.4.11 — a check / indicator glyph on a solid fill\n\n// Pick the readable foreground on step 9: prefer the generator's native contrast\n// (usually white), else fall to progressively darker accent-tinted inks until one\n// clears `min`. Text uses 4.5:1; a graphical glyph (the checkmark) uses 3:1 — which\n// keeps white on most accents (incl. neutral 3.32:1, red 3.91:1) but flips to a dark\n// tint where white is too weak (e.g. orange, 2.97:1). The vendored generator keeps\n// white at APCA Lc >= 40, which can sit below both WCAG thresholds — hence this guard.\nfunction readableContrast(\n  step9Hex: string,\n  native: string,\n  min: number,\n): string {\n  const step9 = new Color(step9Hex)\n  const [, chroma, hue] = step9.to('oklch').coords\n  const tinted = (lightness: number) =>\n    new Color('oklch', [\n      lightness,\n      Math.max(0.08 * (chroma ?? 0), 0.04),\n      hue ?? 0,\n    ])\n      .to('srgb')\n      .toString({ format: 'hex' })\n  const ratioOf = (hex: string) => new Color(hex).contrast(step9, 'WCAG21')\n  const candidates = [native, tinted(0.25), tinted(0.15)]\n  const ratios = candidates.map(ratioOf)\n  const passing = ratios.findIndex((r) => r >= min)\n  if (passing !== -1) return candidates[passing]!\n\n  // The ladder above is a *preference* (least extreme ink first), not a search — it\n  // stops at 0.15 and so missed accents that only clear `min` a little darker still\n  // (#936c89 landed at 4.47 when 0.05 gives 4.73). Contrast rises monotonically as\n  // the ink's lightness moves away from the fill's, so search outward from step 9\n  // toward whichever extreme is stronger: if a passing ink exists, this finds it.\n  const lightness9 = step9.to('oklch').coords[0] ?? 0.5\n  const toward = ratioOf(tinted(0)) >= ratioOf(tinted(1)) ? 0 : 1\n  let fails = lightness9\n  let passes = toward\n  for (let i = 0; i < 16; i++) {\n    const mid = (fails + passes) / 2\n    if (ratioOf(tinted(mid)) >= min) passes = mid\n    else fails = mid\n  }\n  const found = tinted(passes)\n  if (ratioOf(found) >= min) return found\n\n  // No ink of any lightness clears `min` on this fill — step 9 itself is too\n  // mid-toned. Return the strongest available; the palette sweep flags the accent.\n  const all = [...candidates, tinted(toward)]\n  const allRatios = all.map(ratioOf)\n  return all[allRatios.indexOf(Math.max(...allRatios))]!\n}\n\n/** sRGB `--spark-*` declarations for a generated accent scale. */\nexport function accentSparkVars(scale: SparkAccentScale): string[] {\n  return sparkVars(\n    scale.accentScale,\n    scale.accentScaleAlpha,\n    scale.accentContrast,\n    scale.accentOnSolid,\n    scale.accentSurface,\n    scale.background,\n  )\n}\n\n/** Wide-gamut (P3) `--spark-*` declarations — for a `color-gamut: p3` `@supports` block. */\nexport function accentSparkVarsP3(scale: SparkAccentScale): string[] {\n  return sparkVars(\n    scale.accentScaleWideGamut,\n    scale.accentScaleAlphaWideGamut,\n    scale.accentContrast,\n    scale.accentOnSolid,\n    scale.accentSurfaceWideGamut,\n    scale.background,\n  )\n}\n\n/** Radix's `grayColor=\"auto\"` pairing (accent family → gray), mapped to our 6 neutrals. */\nconst NEUTRAL_BY_ACCENT: Record<string, SparkNeutralFamily> = {\n  blue: 'slate',\n  indigo: 'slate',\n  cyan: 'slate',\n  violet: 'mauve',\n  purple: 'mauve',\n  pink: 'mauve',\n  red: 'mauve',\n  teal: 'sage',\n  green: 'sage',\n  grass: 'olive',\n  orange: 'sand',\n  gray: 'gray',\n}\n\n/** Radix's \"auto\" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */\nexport function getMatchingNeutral(accent: string): SparkNeutralFamily {\n  const byName = NEUTRAL_BY_ACCENT[accent]\n  if (byName) return byName\n  try {\n    const [, chroma, hueRaw] = new Color(accent).to('oklch').coords\n    if (!chroma || chroma < CHROMATIC_THRESHOLD) return 'gray'\n    const hue = (((hueRaw ?? 0) % 360) + 360) % 360\n    if (hue >= 300 || hue < 35) return 'mauve'\n    if (hue < 115) return 'sand'\n    if (hue < 145) return 'olive'\n    if (hue < 200) return 'sage'\n    return 'slate'\n  } catch {\n    return 'slate'\n  }\n}\n\n/**\n * Fill steps (Radix roles 1-5), measured from the surface toward the *scrim* — the pole\n * opposite the ink. Magnitudes are unchanged from the original ink-directed ramp; only\n * the direction flips, so a fill and the text on it move apart instead of together.\n */\nconst INVERTED_FILL_RAMP = [0.06, 0.12, 0.2, 0.3, 0.4]\n\n/** Strongest border step (8, the hover/active edge). 6 is solved per accent; 7 splits them. */\nconst INVERTED_BORDER_TOP = 0.82\n\n/**\n * Ink steps (9-12), measured from the surface toward the ink. Step 9 (the solid fill)\n * lands on the ink itself; 10 eases back for hover; 11-12 are full-strength ink.\n */\nconst INVERTED_INK_RAMP = [1, 0.88, 1, 1]\n\n/**\n * Lowest alpha at which the ink, laid over the surface, is 3:1 distinguishable from it\n * (WCAG 1.4.11) — the floor for a border that has to read as an edge at all.\n *\n * Solved rather than hardcoded because it moves with the accent (0.57-0.72 across the\n * curated set). Contrast against the surface rises monotonically with `t`, so bisection\n * finds the boundary.\n *\n * Targets 1% above the floor rather than landing on it: the step ships as `#rrggbbaa`, and\n * 8-bit rounding on any of the four channels can drop an exact solve back under 3:1.\n */\nfunction solveBorderFloor(surface: Color, ink: Color): number {\n  const target = MIN_GRAPHIC_CONTRAST * 1.01\n  const ratioAt = (t: number) =>\n    new Color(Color.mix(surface, ink, t, { space: 'srgb' })).contrast(\n      surface,\n      'WCAG21',\n    )\n  let fails = 0\n  let passes = 1\n  for (let i = 0; i < 16; i++) {\n    const mid = (fails + passes) / 2\n    if (ratioAt(mid) >= target) passes = mid\n    else fails = mid\n  }\n  return passes\n}\n\n/** OKLCH string in the wide-gamut format the generator emits (`oklch(96.1% 0.0155 254.2)`). */\nfunction oklchString(color: Color): string {\n  const oklch = color.to('oklch')\n  const lightness = +((oklch.coords[0] ?? 0) * 100).toFixed(1)\n  return oklch\n    .toString({ precision: 4 })\n    .replace(/(\\S+)(.+)/, `oklch(${lightness}%$2`)\n}\n\n/**\n * Re-cast a scale for use ON its own solid (step-9) fill — the `inverted` knob.\n *\n * A solid accent control on a solid accent surface is invisible: both paint `--spark-9`.\n * Inverting swaps that pair — step 9 and its contrast ink trade places — so the solid fill\n * and its text are contrast-safe **by construction, for any accent**: `accentContrast` is\n * already the WCAG-checked readable ink for step 9 (`readableContrast`).\n *\n * The non-solid styles need a second idea, because the ink is also the text colour. A fill\n * blended surface→ink moves the background *toward* the foreground, so ink-on-fill contrast\n * falls monotonically with `t` — and measured across the curated set, the highest `t` that\n * still clears 4.5:1 (0.174) sits below the lowest `t` that is 3:1 distinguishable from the\n * surface (0.543). On that line no fill can be both legible and visible, on any accent.\n *\n * So fills blend the other way, toward the **scrim** — the lightness pole opposite the ink,\n * carrying the surface's own hue. Contrast against the ink now *rises* with `t`, which puts\n * every non-solid style at or above the solid pair's ratio for free. Borders keep stepping\n * toward the ink (a scrim-side border caps at ~2:1 on light accents like orange, so it can\n * never clear 1.4.11), starting at the solved 3:1 floor.\n *\n * Appearance-stable on purpose. The generator pins step 9 to the accent itself, so the\n * surface is identical in light and dark — which makes the whole inverted scale identical\n * too, and `[data-inverted]` needs no `.dark` twin.\n *\n * Two things this is deliberately NOT:\n * - **A positional mirror** (`1↔12`). It leaves the solid fill only 2.04:1 from the card in\n *   dark and 2.23:1 on a light accent like orange — under the 3:1 graphical floor, i.e. still\n *   invisible, which is the bug this exists to fix.\n * - **A regenerated on-surface ramp.** Feeding the surface back in as `background` produces\n *   off-hue overlays (a warm wash on a blue card) and ink at 3.35:1.\n *\n * Values are literals, not `var(--spark-N)` aliases: a scale can't re-point to itself\n * (`--spark-1: var(--spark-12)` next to `--spark-12: var(--spark-1)` is a cycle, and CSS\n * discards both).\n */\nexport function invertAccentScale(scale: SparkAccentScale): SparkAccentScale {\n  const surface = scale.accentScale[8]! // the solid fill this scale will sit on\n  const ink = scale.accentContrast // already AA-checked against that fill\n  const surfaceColor = new Color(surface)\n  const inkColor = new Color(ink)\n\n  // The scrim: opposite the ink in lightness, tinted with the surface's own hue by the\n  // same rule readableContrast uses for its ink ladder. Derived from the surface, so this\n  // introduces no new palette input.\n  const [surfaceLightness, surfaceChroma, surfaceHue] =\n    surfaceColor.to('oklch').coords\n  const inkLightness = inkColor.to('oklch').coords[0] ?? 0\n  const scrimColor = new Color('oklch', [\n    inkLightness > (surfaceLightness ?? 0) ? 0.12 : 0.98,\n    Math.max(0.08 * (surfaceChroma ?? 0), 0.02),\n    surfaceHue ?? 0,\n  ])\n\n  const borderFloor = solveBorderFloor(surfaceColor, inkColor)\n  const ramp: { toward: Color; t: number }[] = [\n    ...INVERTED_FILL_RAMP.map((t) => ({ toward: scrimColor, t })),\n    { toward: inkColor, t: borderFloor },\n    { toward: inkColor, t: (borderFloor + INVERTED_BORDER_TOP) / 2 },\n    { toward: inkColor, t: INVERTED_BORDER_TOP },\n    ...INVERTED_INK_RAMP.map((t) => ({ toward: inkColor, t })),\n  ]\n\n  // sRGB, not OKLab: the browser composites `--spark-aN` as source-over in gamma sRGB, so\n  // mixing the opaque twin in any other space makes `--spark-N` a different colour from it\n  // (measured up to dE2000 2.8 on the old OKLab mix, over ALPHA_SOLVE_TOLERANCE).\n  const blend = ({ toward, t }: { toward: Color; t: number }) =>\n    new Color(Color.mix(surfaceColor, toward, t, { space: 'srgb' }))\n  const steps = ramp.map((s) =>\n    blend(s).to('srgb').toString({ format: 'hex' }),\n  ) as typeof scale.accentScale\n  const stepsWideGamut = ramp.map((s) =>\n    oklchString(blend(s)),\n  ) as typeof scale.accentScaleWideGamut\n  // Mixing surface→X at t in sRGB is the same colour as X at alpha t over the surface, so\n  // each alpha step is just its own pole at rising opacity — no solve needed.\n  const alpha = ramp.map(({ toward, t }) => {\n    const translucent = toward.clone()\n    translucent.alpha = t\n    return translucent.to('srgb').toString({ format: 'hex' })\n  }) as typeof scale.accentScaleAlpha\n  const alphaWideGamut = ramp.map(({ toward, t }) => {\n    const translucent = toward.clone().to('p3')\n    translucent.alpha = t\n    return translucent\n      .toString({ precision: 4 })\n      .replace('color(p3 ', 'color(display-p3 ')\n  }) as typeof scale.accentScaleAlphaWideGamut\n  return {\n    ...scale,\n    accentScale: steps,\n    accentScaleWideGamut: stepsWideGamut,\n    accentScaleAlpha: alpha,\n    accentScaleAlphaWideGamut: alphaWideGamut,\n    // Ink on the inverted solid fill is the accent itself — the other half of the swapped pair.\n    accentContrast: surface,\n    accentOnSolid: surface,\n    accentSurface: steps[1]!,\n    accentSurfaceWideGamut: stepsWideGamut[1]!,\n  }\n}\n\n/**\n * `neutralColor=\"auto\"` resolution: prefer the canvas's own tint when it has one — a\n * chromatic `background` seeds a visibly warmer/cooler ramp than bucketing it into one\n * of the 6 named families would (see gap #12). Falls back to accent-matched bucketing\n * when there's no tinted canvas to pull from.\n */\nexport function resolveAutoNeutral(\n  accent: string,\n  background?: string,\n): string {\n  if (background) {\n    try {\n      const [, chroma] = new Color(background).to('oklch').coords\n      if (chroma && chroma >= CHROMATIC_THRESHOLD) return background\n    } catch {\n      // fall through to accent-matched neutral\n    }\n  }\n  return getMatchingNeutral(accent)\n}\n\n/**\n * Whether a string parses as a color at all — for validating a custom `neutralColor`\n * before it reaches the generator. An unparseable seed (e.g. a typo'd family name like\n * `\"slat\"`) would otherwise throw deep inside `generateRadixColors`, taking the whole\n * accent scale down with it via the caller's shared try/catch.\n */\nexport function isParsableColor(value: string): boolean {\n  try {\n    new Color(value).to('oklch')\n    return true\n  } catch {\n    return false\n  }\n}\n\n/** The 27 tokens every scale family declares, under an arbitrary prefix. */\nfunction scaleVars(\n  prefix: string,\n  steps: string[],\n  alpha: string[],\n  contrast: string,\n  onSolid: string,\n  surface: string,\n): string[] {\n  return [\n    ...steps.map((c, i) => `--${prefix}-${i + 1}: ${c};`),\n    ...alpha.map((c, i) => `--${prefix}-a${i + 1}: ${c};`),\n    `--${prefix}-contrast: ${contrast};`,\n    `--${prefix}-on-solid: ${onSolid};`,\n    `--${prefix}-surface: ${surface};`,\n  ]\n}\n\nfunction sparkVars(\n  steps: string[],\n  alpha: string[],\n  contrast: string,\n  onSolid: string,\n  surface: string,\n  background: string,\n): string[] {\n  const indicator = steps[8]! // step 9 — the brand step (matches --spark-indicator/-track)\n  return [\n    ...scaleVars('spark', steps, alpha, contrast, onSolid, surface),\n    `--spark-background: ${background};`,\n    `--spark-indicator: ${indicator};`,\n    `--spark-track: ${indicator};`,\n  ]\n}\n\n/**\n * The same `--neutral-*` tokens `neutralSparkVars` emits, pointed back at a static Radix\n * family instead of a generated scale — the counterpart for an appearance that has *no*\n * custom canvas of its own.\n *\n * Ambient (no explicit `appearance`) mode emits both appearances' scales into one unlayered\n * `<style>`, but a custom canvas only regenerates neutrals for the appearance it belongs to.\n * Left undeclared, the other block doesn't fall back — nothing resets a custom property, so\n * its sibling's canvas-tinted values simply stay in effect there, and being unlayered they\n * outrank `[data-neutral-color]`'s own `@layer base` mapping too. Declaring the same token\n * set closes that. `var(--<family>-*)` is itself appearance-aware (Radix ships the dark\n * scales under `.dark`), so one declaration resolves correctly wherever the block applies.\n */\nexport function neutralFamilyVars(\n  family: Exclude<SparkNeutral, 'auto'>,\n): string[] {\n  const ref = (suffix: string) => `var(--${family}-${suffix})`\n  return scaleVars(\n    'neutral',\n    Array.from({ length: 12 }, (_, i) => ref(`${i + 1}`)),\n    Array.from({ length: 12 }, (_, i) => ref(`a${i + 1}`)),\n    // The companion tokens' own static defaults, from spark-default.css's .light/.dark.\n    'var(--neutral-12)',\n    '#fff',\n    'var(--neutral-2)',\n  )\n}\n\n/**\n * `--neutral-*` declarations from the gray scale the generator produces alongside the\n * accent — normally discarded, because `[data-neutral-color]` points `--neutral-*` at a\n * static Radix family. Worth consuming only when the canvas is custom: the static\n * families' alpha steps are pre-baked against white/black, so on any other background\n * they composite wrong (every gray text/border reads through `--neutral-a*`).\n *\n * `--neutral-surface` is step 2, matching the static families' own convention rather\n * than the generator's translucent `graySurface`.\n */\nexport function neutralSparkVars(scale: SparkAccentScale): string[] {\n  return scaleVars(\n    'neutral',\n    scale.grayScale,\n    scale.grayScaleAlpha,\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_TEXT_CONTRAST),\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_GRAPHIC_CONTRAST),\n    scale.grayScale[1]!,\n  )\n}\n\n/** Wide-gamut (P3) twin of `neutralSparkVars`. */\nexport function neutralSparkVarsP3(scale: SparkAccentScale): string[] {\n  return scaleVars(\n    'neutral',\n    scale.grayScaleWideGamut,\n    scale.grayScaleAlphaWideGamut,\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_TEXT_CONTRAST),\n    readableContrast(scale.grayScale[8]!, '#fff', MIN_GRAPHIC_CONTRAST),\n    scale.grayScaleWideGamut[1]!,\n  )\n}\n"],"mappings":"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"}

package/dist/lib/container-chrome.cjs

@@ -13,11 +13,11 @@ const radiusClasses = {
 };
 const containerChrome = {
 	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
-	soft: "bg-(--spark-card-c-soft,var(--neutral-a3))",
-	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))",
-	outline: "border border-(--spark-card-c-border,var(--neutral-a6))",
-	ghost: "",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
+	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
+	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
+	ghost: "[--spark-card-bg:transparent]",
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",
@@ -35,16 +35,18 @@ const containerPaddingAll = {
 	ghost: "",
 	solid: "p-4"
 };
-function containerInteractiveClasses(resolved) {
+function containerInteractiveClasses(resolved, elevated) {
 	return [
 		"cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none",
 		"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
 		"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-		(resolved === "ambient" || resolved === "soft") && "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))"
+		(resolved === "ambient" || resolved === "soft") && (elevated ? "hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]" : "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))")
 	];
 }
+const containerElevated = "bg-(--spark-elevated) [background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] shadow-(--spark-card-shadow,var(--spark-shadow-1))";
 //#endregion
 exports.containerChrome = containerChrome;
+exports.containerElevated = containerElevated;
 exports.containerInteractiveClasses = containerInteractiveClasses;
 exports.containerPaddingAll = containerPaddingAll;
 exports.containerPaddingX = containerPaddingX;