@epilot/spark-ui 0.10.0 → 0.11.0

package/dist/lib/accent-theme.cjs

@@ -33,24 +33,86 @@ const DEFAULTS = {
 		background: "#000000"
 	}
 };
+/** Radix step-9 per neutral family — the generator's `gray` seed, so a regenerated
+neutral lands on the family `[data-neutral-color]` would have selected statically. */
+const NEUTRAL_BASE = {
+	slate: _radix_ui_colors.slate.slate9,
+	mauve: _radix_ui_colors.mauve.mauve9,
+	gray: _radix_ui_colors.gray.gray9,
+	sage: _radix_ui_colors.sage.sage9,
+	olive: _radix_ui_colors.olive.olive9,
+	sand: _radix_ui_colors.sand.sand9
+};
+/** Which appearance a canvas belongs to, by OKLCH lightness. */
+function appearanceForBackground(background) {
+	const [lightness] = new colorjs_io.default(background).to("oklch").coords;
+	return (lightness ?? 1) >= .5 ? "light" : "dark";
+}
+/** 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.
+*
+* 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.
+*
+* 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 the default output — and portal parity — is untouched either way.
+*/
+function opaqueWhereUnsolvable(background, solid, alpha) {
+	let bg;
+	try {
+		bg = new colorjs_io.default(background).to("srgb").coords;
+	} catch {
+		return alpha;
+	}
+	return alpha.map((step, i) => {
+		const target = solid[i];
+		if (!target) return step;
+		try {
+			const ink = new colorjs_io.default(step);
+			const fg = ink.to("srgb").coords;
+			const a = ink.alpha;
+			return new colorjs_io.default("srgb", [
+				0,
+				1,
+				2
+			].map((k) => bg[k] * (1 - a) + fg[k] * a)).deltaE(new colorjs_io.default(target), "2000") <= ALPHA_SOLVE_TOLERANCE ? step : target;
+		} catch {
+			return target;
+		}
+	});
+}
 /** Generate the Radix-style accent scale for one appearance from a single accent color. */
-function generateAccentScale(accent, appearance) {
+function generateAccentScale(accent, appearance, opts) {
+	const background = opts?.background ?? DEFAULTS[appearance].background;
 	const scale = require_lib_generate_radix_colors.generateRadixColors({
 		appearance,
 		accent,
-		gray: DEFAULTS[appearance].gray,
-		background: DEFAULTS[appearance].background
+		gray: opts?.neutral ? NEUTRAL_BASE[opts.neutral] : DEFAULTS[appearance].gray,
+		background
 	});
-	return {
+	const solved = opts?.background ? {
 		...scale,
-		accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),
-		accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST)
+		accentScaleAlpha: opaqueWhereUnsolvable(background, scale.accentScale, scale.accentScaleAlpha),
+		accentScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.accentScaleWideGamut, scale.accentScaleAlphaWideGamut),
+		grayScaleAlpha: opaqueWhereUnsolvable(background, scale.grayScale, scale.grayScaleAlpha),
+		grayScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.grayScaleWideGamut, scale.grayScaleAlphaWideGamut)
+	} : scale;
+	return {
+		...solved,
+		accentContrast: readableContrast(solved.accentScale[8], solved.accentContrast, MIN_TEXT_CONTRAST),
+		accentOnSolid: readableContrast(solved.accentScale[8], solved.accentContrast, MIN_GRAPHIC_CONTRAST)
 	};
 }
 const MIN_TEXT_CONTRAST = 4.5;
 const MIN_GRAPHIC_CONTRAST = 3;
-function readableContrast(scale, min) {
-	const step9 = new colorjs_io.default(scale.accentScale[8]);
+function readableContrast(step9Hex, native, min) {
+	const step9 = new colorjs_io.default(step9Hex);
 	const [, chroma, hue] = step9.to("oklch").coords;
 	const tinted = (lightness) => new colorjs_io.default("oklch", [
 		lightness,
@@ -58,7 +120,7 @@ function readableContrast(scale, min) {
 		hue ?? 0
 	]).to("srgb").toString({ format: "hex" });
 	const candidates = [
-		scale.accentContrast,
+		native,
 		tinted(.25),
 		tinted(.15)
 	];
@@ -107,24 +169,50 @@ function getMatchingNeutral(accent) {
 		return "slate";
 	}
 }
+/** The 27 tokens every scale family declares, under an arbitrary prefix. */
+function scaleVars(prefix, steps, alpha, contrast, onSolid, surface) {
+	return [
+		...steps.map((c, i) => `--${prefix}-${i + 1}: ${c};`),
+		...alpha.map((c, i) => `--${prefix}-a${i + 1}: ${c};`),
+		`--${prefix}-contrast: ${contrast};`,
+		`--${prefix}-on-solid: ${onSolid};`,
+		`--${prefix}-surface: ${surface};`
+	];
+}
 function sparkVars(steps, alpha, contrast, onSolid, surface, background) {
 	const indicator = steps[8];
 	return [
-		...steps.map((c, i) => `--spark-${i + 1}: ${c};`),
-		...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),
-		`--spark-contrast: ${contrast};`,
-		`--spark-on-solid: ${onSolid};`,
-		`--spark-surface: ${surface};`,
+		...scaleVars("spark", steps, alpha, contrast, onSolid, surface),
 		`--spark-background: ${background};`,
 		`--spark-indicator: ${indicator};`,
 		`--spark-track: ${indicator};`
 	];
 }
+/**
+* `--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
+* families' alpha steps are pre-baked against white/black, so on any other background
+* they composite wrong (every gray text/border reads through `--neutral-a*`).
+*
+* `--neutral-surface` is step 2, matching the static families' own convention rather
+* than the generator's translucent `graySurface`.
+*/
+function neutralSparkVars(scale) {
+	return scaleVars("neutral", scale.grayScale, scale.grayScaleAlpha, readableContrast(scale.grayScale[8], "#fff", MIN_TEXT_CONTRAST), readableContrast(scale.grayScale[8], "#fff", MIN_GRAPHIC_CONTRAST), scale.grayScale[1]);
+}
+/** Wide-gamut (P3) twin of `neutralSparkVars`. */
+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
 exports.CURATED_ACCENTS = CURATED_ACCENTS;
 exports.accentSparkVars = accentSparkVars;
 exports.accentSparkVarsP3 = accentSparkVarsP3;
+exports.appearanceForBackground = appearanceForBackground;
 exports.generateAccentScale = generateAccentScale;
 exports.getMatchingNeutral = getMatchingNeutral;
+exports.neutralSparkVars = neutralSparkVars;
+exports.neutralSparkVarsP3 = neutralSparkVarsP3;
 
 //# sourceMappingURL=accent-theme.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"accent-theme.cjs","names":["RadixColors","generateRadixColors","Color"],"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/** Generate the Radix-style accent scale for one appearance from a single accent color. */\nexport function generateAccentScale(\n  accent: string,\n  appearance: Appearance,\n): SparkAccentScale {\n  const scale = generateRadixColors({\n    appearance,\n    accent,\n    gray: DEFAULTS[appearance].gray,\n    background: DEFAULTS[appearance].background,\n  })\n  // accentContrast → 4.5:1 (button text); accentOnSolid → 3:1 (graphical glyph,\n  // see SparkAccentScale). Same picker, different WCAG threshold.\n  return {\n    ...scale,\n    accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),\n    accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST),\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(scale: GeneratedColors, min: number): string {\n  const step9 = new Color(scale.accentScale[8]!)\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 = [scale.accentContrast, 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, SparkNeutral> = {\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): SparkNeutral {\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\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    ...steps.map((c, i) => `--spark-${i + 1}: ${c};`),\n    ...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),\n    `--spark-contrast: ${contrast};`,\n    `--spark-on-solid: ${onSolid};`,\n    `--spark-surface: ${surface};`,\n    `--spark-background: ${background};`,\n    `--spark-indicator: ${indicator};`,\n    `--spark-track: ${indicator};`,\n  ]\n}\n"],"mappings":";;;;;;;;;;AAyBA,MAAa,kBAA0C;CACrD,MAAMA,iBAAY,KAAK;CACvB,QAAQA,iBAAY,OAAO;CAC3B,QAAQA,iBAAY,OAAO;CAC3B,QAAQA,iBAAY,OAAO;CAC3B,MAAMA,iBAAY,KAAK;CACvB,MAAMA,iBAAY,KAAK;CACvB,OAAOA,iBAAY,MAAM;CACzB,OAAOA,iBAAY,MAAM;CACzB,QAAQA,iBAAY,OAAO;CAC3B,KAAKA,iBAAY,IAAI;CACrB,MAAMA,iBAAY,KAAK;CACvB,MAAMA,iBAAY,KAAK;AACzB;;AAGA,MAAM,WAAqE;CACzE,OAAO;EAAE,MAAM;EAAW,YAAY;CAAU;CAGhD,MAAM;EAAE,MAAM;EAAW,YAAY;CAAU;AACjD;;AAGA,SAAgB,oBACd,QACA,YACkB;CAClB,MAAM,QAAQC,kCAAAA,oBAAoB;EAChC;EACA;EACA,MAAM,SAAS,YAAY;EAC3B,YAAY,SAAS,YAAY;CACnC,CAAC;CAGD,OAAO;EACL,GAAG;EACH,gBAAgB,iBAAiB,OAAO,iBAAiB;EACzD,eAAe,iBAAiB,OAAO,oBAAoB;CAC7D;AACF;AAEA,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAQ7B,SAAS,iBAAiB,OAAwB,KAAqB;CACrE,MAAM,QAAQ,IAAIC,WAAAA,QAAM,MAAM,YAAY,EAAG;CAC7C,MAAM,GAAG,QAAQ,OAAO,MAAM,GAAG,OAAO,EAAE;CAC1C,MAAM,UAAU,cACd,IAAIA,WAAAA,QAAM,SAAS;EACjB;EACA,KAAK,IAAI,OAAQ,UAAU,IAAI,GAAI;EACnC,OAAO;CACT,CAAC,EACE,GAAG,MAAM,EACT,SAAS,EAAE,QAAQ,MAAM,CAAC;CAC/B,MAAM,aAAa;EAAC,MAAM;EAAgB,OAAO,GAAI;EAAG,OAAO,GAAI;CAAC;CACpE,MAAM,SAAS,WAAW,KAAK,MAAM,IAAIA,WAAAA,QAAM,CAAC,EAAE,SAAS,OAAO,QAAQ,CAAC;CAC3E,MAAM,UAAU,OAAO,WAAW,MAAM,KAAK,GAAG;CAChD,IAAI,YAAY,IAAI,OAAO,WAAW;CACtC,OAAO,WAAW,OAAO,QAAQ,KAAK,IAAI,GAAG,MAAM,CAAC;AACtD;;AAGA,SAAgB,gBAAgB,OAAmC;CACjE,OAAO,UACL,MAAM,aACN,MAAM,kBACN,MAAM,gBACN,MAAM,eACN,MAAM,eACN,MAAM,UACR;AACF;;AAGA,SAAgB,kBAAkB,OAAmC;CACnE,OAAO,UACL,MAAM,sBACN,MAAM,2BACN,MAAM,gBACN,MAAM,eACN,MAAM,wBACN,MAAM,UACR;AACF;;AAGA,MAAM,oBAAkD;CACtD,MAAM;CACN,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;AACR;;AAGA,SAAgB,mBAAmB,QAA8B;CAC/D,MAAM,SAAS,kBAAkB;CACjC,IAAI,QAAQ,OAAO;CACnB,IAAI;EACF,MAAM,GAAG,QAAQ,UAAU,IAAIA,WAAAA,QAAM,MAAM,EAAE,GAAG,OAAO,EAAE;EACzD,IAAI,CAAC,UAAU,SAAS,KAAM,OAAO;EACrC,MAAM,QAAS,UAAU,KAAK,MAAO,OAAO;EAC5C,IAAI,OAAO,OAAO,MAAM,IAAI,OAAO;EACnC,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,UACP,OACA,OACA,UACA,SACA,SACA,YACU;CACV,MAAM,YAAY,MAAM;CACxB,OAAO;EACL,GAAG,MAAM,KAAK,GAAG,MAAM,WAAW,IAAI,EAAE,IAAI,EAAE,EAAE;EAChD,GAAG,MAAM,KAAK,GAAG,MAAM,YAAY,IAAI,EAAE,IAAI,EAAE,EAAE;EACjD,qBAAqB,SAAS;EAC9B,qBAAqB,QAAQ;EAC7B,oBAAoB,QAAQ;EAC5B,uBAAuB,WAAW;EAClC,sBAAsB,UAAU;EAChC,kBAAkB,UAAU;CAC9B;AACF"}
+{"version":3,"file":"accent-theme.cjs","names":["RadixColors","Color","generateRadixColors"],"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":";;;;;;;;;;AAyBA,MAAa,kBAA0C;CACrD,MAAMA,iBAAY,KAAK;CACvB,QAAQA,iBAAY,OAAO;CAC3B,QAAQA,iBAAY,OAAO;CAC3B,QAAQA,iBAAY,OAAO;CAC3B,MAAMA,iBAAY,KAAK;CACvB,MAAMA,iBAAY,KAAK;CACvB,OAAOA,iBAAY,MAAM;CACzB,OAAOA,iBAAY,MAAM;CACzB,QAAQA,iBAAY,OAAO;CAC3B,KAAKA,iBAAY,IAAI;CACrB,MAAMA,iBAAY,KAAK;CACvB,MAAMA,iBAAY,KAAK;AACzB;;AAGA,MAAM,WAAqE;CACzE,OAAO;EAAE,MAAM;EAAW,YAAY;CAAU;CAGhD,MAAM;EAAE,MAAM;EAAW,YAAY;CAAU;AACjD;;;AAIA,MAAM,eAA8D;CAClE,OAAOA,iBAAY,MAAM;CACzB,OAAOA,iBAAY,MAAM;CACzB,MAAMA,iBAAY,KAAK;CACvB,MAAMA,iBAAY,KAAK;CACvB,OAAOA,iBAAY,MAAM;CACzB,MAAMA,iBAAY,KAAK;AACzB;;AAcA,SAAgB,wBAAwB,YAAgC;CACtE,MAAM,CAAC,aAAa,IAAIC,WAAAA,QAAM,UAAU,EAAE,GAAG,OAAO,EAAE;CACtD,QAAQ,aAAa,MAAM,KAAM,UAAU;AAC7C;;AAGA,MAAM,wBAAwB;;;;;;;;;;;;;;AAe9B,SAAS,sBACP,YACA,OACA,OACU;CACV,IAAI;CACJ,IAAI;EACF,KAAK,IAAIA,WAAAA,QAAM,UAAU,EAAE,GAAG,MAAM,EAAE;CACxC,QAAQ;EACN,OAAO;CACT;CACA,OAAO,MAAM,KAAK,MAAM,MAAM;EAC5B,MAAM,SAAS,MAAM;EACrB,IAAI,CAAC,QAAQ,OAAO;EACpB,IAAI;GACF,MAAM,MAAM,IAAIA,WAAAA,QAAM,IAAI;GAC1B,MAAM,KAAK,IAAI,GAAG,MAAM,EAAE;GAC1B,MAAM,IAAI,IAAI;GASd,OAAO,IARgBA,WAAAA,QACrB,QACA;IAAC;IAAG;IAAG;GAAC,EAAE,KAAK,MAAM,GAAG,MAAO,IAAI,KAAK,GAAG,KAAM,CAAC,CAMpC,EAAE,OAAO,IAAIA,WAAAA,QAAM,MAAM,GAAG,MAAM,KAChD,wBACE,OACA;EACN,QAAQ;GACN,OAAO;EACT;CACF,CAAC;AACH;;AAGA,SAAgB,oBACd,QACA,YACA,MACkB;CAClB,MAAM,aAAa,MAAM,cAAc,SAAS,YAAY;CAC5D,MAAM,QAAQC,kCAAAA,oBAAoB;EAChC;EACA;EACA,MAAM,MAAM,UACR,aAAa,KAAK,WAClB,SAAS,YAAY;EACzB;CACF,CAAC;CACD,MAAM,SAAS,MAAM,aACjB;EACE,GAAG;EACH,kBAAkB,sBAChB,YACA,MAAM,aACN,MAAM,gBACR;EACA,2BAA2B,sBACzB,YACA,MAAM,sBACN,MAAM,yBACR;EACA,gBAAgB,sBACd,YACA,MAAM,WACN,MAAM,cACR;EACA,yBAAyB,sBACvB,YACA,MAAM,oBACN,MAAM,uBACR;CACF,IACA;CAGJ,OAAO;EACL,GAAG;EACH,gBAAgB,iBACd,OAAO,YAAY,IACnB,OAAO,gBACP,iBACF;EACA,eAAe,iBACb,OAAO,YAAY,IACnB,OAAO,gBACP,oBACF;CACF;AACF;AAEA,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAQ7B,SAAS,iBACP,UACA,QACA,KACQ;CACR,MAAM,QAAQ,IAAID,WAAAA,QAAM,QAAQ;CAChC,MAAM,GAAG,QAAQ,OAAO,MAAM,GAAG,OAAO,EAAE;CAC1C,MAAM,UAAU,cACd,IAAIA,WAAAA,QAAM,SAAS;EACjB;EACA,KAAK,IAAI,OAAQ,UAAU,IAAI,GAAI;EACnC,OAAO;CACT,CAAC,EACE,GAAG,MAAM,EACT,SAAS,EAAE,QAAQ,MAAM,CAAC;CAC/B,MAAM,aAAa;EAAC;EAAQ,OAAO,GAAI;EAAG,OAAO,GAAI;CAAC;CACtD,MAAM,SAAS,WAAW,KAAK,MAAM,IAAIA,WAAAA,QAAM,CAAC,EAAE,SAAS,OAAO,QAAQ,CAAC;CAC3E,MAAM,UAAU,OAAO,WAAW,MAAM,KAAK,GAAG;CAChD,IAAI,YAAY,IAAI,OAAO,WAAW;CACtC,OAAO,WAAW,OAAO,QAAQ,KAAK,IAAI,GAAG,MAAM,CAAC;AACtD;;AAGA,SAAgB,gBAAgB,OAAmC;CACjE,OAAO,UACL,MAAM,aACN,MAAM,kBACN,MAAM,gBACN,MAAM,eACN,MAAM,eACN,MAAM,UACR;AACF;;AAGA,SAAgB,kBAAkB,OAAmC;CACnE,OAAO,UACL,MAAM,sBACN,MAAM,2BACN,MAAM,gBACN,MAAM,eACN,MAAM,wBACN,MAAM,UACR;AACF;;AAGA,MAAM,oBAAmE;CACvE,MAAM;CACN,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;AACR;;AAGA,SAAgB,mBACd,QAC+B;CAC/B,MAAM,SAAS,kBAAkB;CACjC,IAAI,QAAQ,OAAO;CACnB,IAAI;EACF,MAAM,GAAG,QAAQ,UAAU,IAAIA,WAAAA,QAAM,MAAM,EAAE,GAAG,OAAO,EAAE;EACzD,IAAI,CAAC,UAAU,SAAS,KAAM,OAAO;EACrC,MAAM,QAAS,UAAU,KAAK,MAAO,OAAO;EAC5C,IAAI,OAAO,OAAO,MAAM,IAAI,OAAO;EACnC,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;;AAGA,SAAS,UACP,QACA,OACA,OACA,UACA,SACA,SACU;CACV,OAAO;EACL,GAAG,MAAM,KAAK,GAAG,MAAM,KAAK,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE;EACpD,GAAG,MAAM,KAAK,GAAG,MAAM,KAAK,OAAO,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE;EACrD,KAAK,OAAO,aAAa,SAAS;EAClC,KAAK,OAAO,aAAa,QAAQ;EACjC,KAAK,OAAO,YAAY,QAAQ;CAClC;AACF;AAEA,SAAS,UACP,OACA,OACA,UACA,SACA,SACA,YACU;CACV,MAAM,YAAY,MAAM;CACxB,OAAO;EACL,GAAG,UAAU,SAAS,OAAO,OAAO,UAAU,SAAS,OAAO;EAC9D,uBAAuB,WAAW;EAClC,sBAAsB,UAAU;EAChC,kBAAkB,UAAU;CAC9B;AACF;;;;;;;;;;;AAYA,SAAgB,iBAAiB,OAAmC;CAClE,OAAO,UACL,WACA,MAAM,WACN,MAAM,gBACN,iBAAiB,MAAM,UAAU,IAAK,QAAQ,iBAAiB,GAC/D,iBAAiB,MAAM,UAAU,IAAK,QAAQ,oBAAoB,GAClE,MAAM,UAAU,EAClB;AACF;;AAGA,SAAgB,mBAAmB,OAAmC;CACpE,OAAO,UACL,WACA,MAAM,oBACN,MAAM,yBACN,iBAAiB,MAAM,UAAU,IAAK,QAAQ,iBAAiB,GAC/D,iBAAiB,MAAM,UAAU,IAAK,QAAQ,oBAAoB,GAClE,MAAM,mBAAmB,EAC3B;AACF"}

package/dist/lib/accent-theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { o as SparkNeutral } from "../theme-types-8wjgiNA_.cjs";
+import { o as SparkNeutral } from "../theme-types-1yB0d8mp.cjs";
 import { t as generateRadixColors } from "../generate-radix-colors-Bw-RYaV4.cjs";
 
 //#region src/lib/accent-theme.d.ts
@@ -22,14 +22,39 @@ type SparkAccentScale = GeneratedColors & {
 type Appearance = 'light' | 'dark';
 /** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */
 declare const CURATED_ACCENTS: Record<string, string>;
+interface GenerateScaleOptions {
+  /**
+   * Page canvas the scale is composited against. Drives the lightness curve of all 12
+   * steps AND every alpha step (each is solved as `target = bg·(1-α) + fg·α`), so it
+   * must match what's actually painted or the alpha ramp renders wrong.
+   */
+  background?: string;
+  /** Neutral family to regenerate against `background`. Pass a resolved family, not `'auto'`. */
+  neutral?: Exclude<SparkNeutral, 'auto'>;
+}
+/** Which appearance a canvas belongs to, by OKLCH lightness. */
+declare function appearanceForBackground(background: string): Appearance;
 /** Generate the Radix-style accent scale for one appearance from a single accent color. */
-declare function generateAccentScale(accent: string, appearance: Appearance): SparkAccentScale;
+declare function generateAccentScale(accent: string, appearance: Appearance, opts?: GenerateScaleOptions): SparkAccentScale;
 /** sRGB `--spark-*` declarations for a generated accent scale. */
 declare function accentSparkVars(scale: SparkAccentScale): string[];
 /** Wide-gamut (P3) `--spark-*` declarations — for a `color-gamut: p3` `@supports` block. */
 declare function accentSparkVarsP3(scale: SparkAccentScale): string[];
 /** Radix's "auto" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */
-declare function getMatchingNeutral(accent: string): SparkNeutral;
+declare function getMatchingNeutral(accent: string): Exclude<SparkNeutral, 'auto'>;
+/**
+ * `--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
+ * families' alpha steps are pre-baked against white/black, so on any other background
+ * they composite wrong (every gray text/border reads through `--neutral-a*`).
+ *
+ * `--neutral-surface` is step 2, matching the static families' own convention rather
+ * than the generator's translucent `graySurface`.
+ */
+declare function neutralSparkVars(scale: SparkAccentScale): string[];
+/** Wide-gamut (P3) twin of `neutralSparkVars`. */
+declare function neutralSparkVarsP3(scale: SparkAccentScale): string[];
 //#endregion
-export { Appearance, CURATED_ACCENTS, GeneratedColors, SparkAccentScale, accentSparkVars, accentSparkVarsP3, generateAccentScale, getMatchingNeutral };
+export { Appearance, CURATED_ACCENTS, GenerateScaleOptions, GeneratedColors, SparkAccentScale, accentSparkVars, accentSparkVarsP3, appearanceForBackground, generateAccentScale, getMatchingNeutral, neutralSparkVars, neutralSparkVarsP3 };
 //# sourceMappingURL=accent-theme.d.cts.map

package/dist/lib/accent-theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { o as SparkNeutral } from "../theme-types-8wjgiNA_.js";
+import { o as SparkNeutral } from "../theme-types-1yB0d8mp.js";
 import { t as generateRadixColors } from "../generate-radix-colors-Bw-RYaV4.js";
 
 //#region src/lib/accent-theme.d.ts
@@ -22,14 +22,39 @@ type SparkAccentScale = GeneratedColors & {
 type Appearance = 'light' | 'dark';
 /** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */
 declare const CURATED_ACCENTS: Record<string, string>;
+interface GenerateScaleOptions {
+  /**
+   * Page canvas the scale is composited against. Drives the lightness curve of all 12
+   * steps AND every alpha step (each is solved as `target = bg·(1-α) + fg·α`), so it
+   * must match what's actually painted or the alpha ramp renders wrong.
+   */
+  background?: string;
+  /** Neutral family to regenerate against `background`. Pass a resolved family, not `'auto'`. */
+  neutral?: Exclude<SparkNeutral, 'auto'>;
+}
+/** Which appearance a canvas belongs to, by OKLCH lightness. */
+declare function appearanceForBackground(background: string): Appearance;
 /** Generate the Radix-style accent scale for one appearance from a single accent color. */
-declare function generateAccentScale(accent: string, appearance: Appearance): SparkAccentScale;
+declare function generateAccentScale(accent: string, appearance: Appearance, opts?: GenerateScaleOptions): SparkAccentScale;
 /** sRGB `--spark-*` declarations for a generated accent scale. */
 declare function accentSparkVars(scale: SparkAccentScale): string[];
 /** Wide-gamut (P3) `--spark-*` declarations — for a `color-gamut: p3` `@supports` block. */
 declare function accentSparkVarsP3(scale: SparkAccentScale): string[];
 /** Radix's "auto" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */
-declare function getMatchingNeutral(accent: string): SparkNeutral;
+declare function getMatchingNeutral(accent: string): Exclude<SparkNeutral, 'auto'>;
+/**
+ * `--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
+ * families' alpha steps are pre-baked against white/black, so on any other background
+ * they composite wrong (every gray text/border reads through `--neutral-a*`).
+ *
+ * `--neutral-surface` is step 2, matching the static families' own convention rather
+ * than the generator's translucent `graySurface`.
+ */
+declare function neutralSparkVars(scale: SparkAccentScale): string[];
+/** Wide-gamut (P3) twin of `neutralSparkVars`. */
+declare function neutralSparkVarsP3(scale: SparkAccentScale): string[];
 //#endregion
-export { Appearance, CURATED_ACCENTS, GeneratedColors, SparkAccentScale, accentSparkVars, accentSparkVarsP3, generateAccentScale, getMatchingNeutral };
+export { Appearance, CURATED_ACCENTS, GenerateScaleOptions, GeneratedColors, SparkAccentScale, accentSparkVars, accentSparkVarsP3, appearanceForBackground, generateAccentScale, getMatchingNeutral, neutralSparkVars, neutralSparkVarsP3 };
 //# sourceMappingURL=accent-theme.d.ts.map

package/dist/lib/accent-theme.js

@@ -29,24 +29,86 @@ const DEFAULTS = {
 		background: "#000000"
 	}
 };
+/** Radix step-9 per neutral family — the generator's `gray` seed, so a regenerated
+neutral lands on the family `[data-neutral-color]` would have selected statically. */
+const NEUTRAL_BASE = {
+	slate: RadixColors.slate.slate9,
+	mauve: RadixColors.mauve.mauve9,
+	gray: RadixColors.gray.gray9,
+	sage: RadixColors.sage.sage9,
+	olive: RadixColors.olive.olive9,
+	sand: RadixColors.sand.sand9
+};
+/** Which appearance a canvas belongs to, by OKLCH lightness. */
+function appearanceForBackground(background) {
+	const [lightness] = new Color(background).to("oklch").coords;
+	return (lightness ?? 1) >= .5 ? "light" : "dark";
+}
+/** 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.
+*
+* 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.
+*
+* 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 the default output — and portal parity — is untouched either way.
+*/
+function opaqueWhereUnsolvable(background, solid, alpha) {
+	let bg;
+	try {
+		bg = new Color(background).to("srgb").coords;
+	} catch {
+		return alpha;
+	}
+	return alpha.map((step, i) => {
+		const target = solid[i];
+		if (!target) return step;
+		try {
+			const ink = new Color(step);
+			const fg = ink.to("srgb").coords;
+			const a = ink.alpha;
+			return new Color("srgb", [
+				0,
+				1,
+				2
+			].map((k) => bg[k] * (1 - a) + fg[k] * a)).deltaE(new Color(target), "2000") <= ALPHA_SOLVE_TOLERANCE ? step : target;
+		} catch {
+			return target;
+		}
+	});
+}
 /** Generate the Radix-style accent scale for one appearance from a single accent color. */
-function generateAccentScale(accent, appearance) {
+function generateAccentScale(accent, appearance, opts) {
+	const background = opts?.background ?? DEFAULTS[appearance].background;
 	const scale = generateRadixColors({
 		appearance,
 		accent,
-		gray: DEFAULTS[appearance].gray,
-		background: DEFAULTS[appearance].background
+		gray: opts?.neutral ? NEUTRAL_BASE[opts.neutral] : DEFAULTS[appearance].gray,
+		background
 	});
-	return {
+	const solved = opts?.background ? {
 		...scale,
-		accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),
-		accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST)
+		accentScaleAlpha: opaqueWhereUnsolvable(background, scale.accentScale, scale.accentScaleAlpha),
+		accentScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.accentScaleWideGamut, scale.accentScaleAlphaWideGamut),
+		grayScaleAlpha: opaqueWhereUnsolvable(background, scale.grayScale, scale.grayScaleAlpha),
+		grayScaleAlphaWideGamut: opaqueWhereUnsolvable(background, scale.grayScaleWideGamut, scale.grayScaleAlphaWideGamut)
+	} : scale;
+	return {
+		...solved,
+		accentContrast: readableContrast(solved.accentScale[8], solved.accentContrast, MIN_TEXT_CONTRAST),
+		accentOnSolid: readableContrast(solved.accentScale[8], solved.accentContrast, MIN_GRAPHIC_CONTRAST)
 	};
 }
 const MIN_TEXT_CONTRAST = 4.5;
 const MIN_GRAPHIC_CONTRAST = 3;
-function readableContrast(scale, min) {
-	const step9 = new Color(scale.accentScale[8]);
+function readableContrast(step9Hex, native, min) {
+	const step9 = new Color(step9Hex);
 	const [, chroma, hue] = step9.to("oklch").coords;
 	const tinted = (lightness) => new Color("oklch", [
 		lightness,
@@ -54,7 +116,7 @@ function readableContrast(scale, min) {
 		hue ?? 0
 	]).to("srgb").toString({ format: "hex" });
 	const candidates = [
-		scale.accentContrast,
+		native,
 		tinted(.25),
 		tinted(.15)
 	];
@@ -103,20 +165,43 @@ function getMatchingNeutral(accent) {
 		return "slate";
 	}
 }
+/** The 27 tokens every scale family declares, under an arbitrary prefix. */
+function scaleVars(prefix, steps, alpha, contrast, onSolid, surface) {
+	return [
+		...steps.map((c, i) => `--${prefix}-${i + 1}: ${c};`),
+		...alpha.map((c, i) => `--${prefix}-a${i + 1}: ${c};`),
+		`--${prefix}-contrast: ${contrast};`,
+		`--${prefix}-on-solid: ${onSolid};`,
+		`--${prefix}-surface: ${surface};`
+	];
+}
 function sparkVars(steps, alpha, contrast, onSolid, surface, background) {
 	const indicator = steps[8];
 	return [
-		...steps.map((c, i) => `--spark-${i + 1}: ${c};`),
-		...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),
-		`--spark-contrast: ${contrast};`,
-		`--spark-on-solid: ${onSolid};`,
-		`--spark-surface: ${surface};`,
+		...scaleVars("spark", steps, alpha, contrast, onSolid, surface),
 		`--spark-background: ${background};`,
 		`--spark-indicator: ${indicator};`,
 		`--spark-track: ${indicator};`
 	];
 }
+/**
+* `--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
+* families' alpha steps are pre-baked against white/black, so on any other background
+* they composite wrong (every gray text/border reads through `--neutral-a*`).
+*
+* `--neutral-surface` is step 2, matching the static families' own convention rather
+* than the generator's translucent `graySurface`.
+*/
+function neutralSparkVars(scale) {
+	return scaleVars("neutral", scale.grayScale, scale.grayScaleAlpha, readableContrast(scale.grayScale[8], "#fff", MIN_TEXT_CONTRAST), readableContrast(scale.grayScale[8], "#fff", MIN_GRAPHIC_CONTRAST), scale.grayScale[1]);
+}
+/** Wide-gamut (P3) twin of `neutralSparkVars`. */
+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, generateAccentScale, getMatchingNeutral };
+export { CURATED_ACCENTS, accentSparkVars, accentSparkVarsP3, appearanceForBackground, generateAccentScale, getMatchingNeutral, neutralSparkVars, neutralSparkVarsP3 };
 
 //# 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/** Generate the Radix-style accent scale for one appearance from a single accent color. */\nexport function generateAccentScale(\n  accent: string,\n  appearance: Appearance,\n): SparkAccentScale {\n  const scale = generateRadixColors({\n    appearance,\n    accent,\n    gray: DEFAULTS[appearance].gray,\n    background: DEFAULTS[appearance].background,\n  })\n  // accentContrast → 4.5:1 (button text); accentOnSolid → 3:1 (graphical glyph,\n  // see SparkAccentScale). Same picker, different WCAG threshold.\n  return {\n    ...scale,\n    accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),\n    accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST),\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(scale: GeneratedColors, min: number): string {\n  const step9 = new Color(scale.accentScale[8]!)\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 = [scale.accentContrast, 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, SparkNeutral> = {\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): SparkNeutral {\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\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    ...steps.map((c, i) => `--spark-${i + 1}: ${c};`),\n    ...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),\n    `--spark-contrast: ${contrast};`,\n    `--spark-on-solid: ${onSolid};`,\n    `--spark-surface: ${surface};`,\n    `--spark-background: ${background};`,\n    `--spark-indicator: ${indicator};`,\n    `--spark-track: ${indicator};`,\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 { 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":";;;;;;AAyBA,MAAa,kBAA0C;CACrD,MAAM,YAAY,KAAK;CACvB,QAAQ,YAAY,OAAO;CAC3B,QAAQ,YAAY,OAAO;CAC3B,QAAQ,YAAY,OAAO;CAC3B,MAAM,YAAY,KAAK;CACvB,MAAM,YAAY,KAAK;CACvB,OAAO,YAAY,MAAM;CACzB,OAAO,YAAY,MAAM;CACzB,QAAQ,YAAY,OAAO;CAC3B,KAAK,YAAY,IAAI;CACrB,MAAM,YAAY,KAAK;CACvB,MAAM,YAAY,KAAK;AACzB;;AAGA,MAAM,WAAqE;CACzE,OAAO;EAAE,MAAM;EAAW,YAAY;CAAU;CAGhD,MAAM;EAAE,MAAM;EAAW,YAAY;CAAU;AACjD;;;AAIA,MAAM,eAA8D;CAClE,OAAO,YAAY,MAAM;CACzB,OAAO,YAAY,MAAM;CACzB,MAAM,YAAY,KAAK;CACvB,MAAM,YAAY,KAAK;CACvB,OAAO,YAAY,MAAM;CACzB,MAAM,YAAY,KAAK;AACzB;;AAcA,SAAgB,wBAAwB,YAAgC;CACtE,MAAM,CAAC,aAAa,IAAI,MAAM,UAAU,EAAE,GAAG,OAAO,EAAE;CACtD,QAAQ,aAAa,MAAM,KAAM,UAAU;AAC7C;;AAGA,MAAM,wBAAwB;;;;;;;;;;;;;;AAe9B,SAAS,sBACP,YACA,OACA,OACU;CACV,IAAI;CACJ,IAAI;EACF,KAAK,IAAI,MAAM,UAAU,EAAE,GAAG,MAAM,EAAE;CACxC,QAAQ;EACN,OAAO;CACT;CACA,OAAO,MAAM,KAAK,MAAM,MAAM;EAC5B,MAAM,SAAS,MAAM;EACrB,IAAI,CAAC,QAAQ,OAAO;EACpB,IAAI;GACF,MAAM,MAAM,IAAI,MAAM,IAAI;GAC1B,MAAM,KAAK,IAAI,GAAG,MAAM,EAAE;GAC1B,MAAM,IAAI,IAAI;GASd,OAAO,IARgB,MACrB,QACA;IAAC;IAAG;IAAG;GAAC,EAAE,KAAK,MAAM,GAAG,MAAO,IAAI,KAAK,GAAG,KAAM,CAAC,CAMpC,EAAE,OAAO,IAAI,MAAM,MAAM,GAAG,MAAM,KAChD,wBACE,OACA;EACN,QAAQ;GACN,OAAO;EACT;CACF,CAAC;AACH;;AAGA,SAAgB,oBACd,QACA,YACA,MACkB;CAClB,MAAM,aAAa,MAAM,cAAc,SAAS,YAAY;CAC5D,MAAM,QAAQ,oBAAoB;EAChC;EACA;EACA,MAAM,MAAM,UACR,aAAa,KAAK,WAClB,SAAS,YAAY;EACzB;CACF,CAAC;CACD,MAAM,SAAS,MAAM,aACjB;EACE,GAAG;EACH,kBAAkB,sBAChB,YACA,MAAM,aACN,MAAM,gBACR;EACA,2BAA2B,sBACzB,YACA,MAAM,sBACN,MAAM,yBACR;EACA,gBAAgB,sBACd,YACA,MAAM,WACN,MAAM,cACR;EACA,yBAAyB,sBACvB,YACA,MAAM,oBACN,MAAM,uBACR;CACF,IACA;CAGJ,OAAO;EACL,GAAG;EACH,gBAAgB,iBACd,OAAO,YAAY,IACnB,OAAO,gBACP,iBACF;EACA,eAAe,iBACb,OAAO,YAAY,IACnB,OAAO,gBACP,oBACF;CACF;AACF;AAEA,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAQ7B,SAAS,iBACP,UACA,QACA,KACQ;CACR,MAAM,QAAQ,IAAI,MAAM,QAAQ;CAChC,MAAM,GAAG,QAAQ,OAAO,MAAM,GAAG,OAAO,EAAE;CAC1C,MAAM,UAAU,cACd,IAAI,MAAM,SAAS;EACjB;EACA,KAAK,IAAI,OAAQ,UAAU,IAAI,GAAI;EACnC,OAAO;CACT,CAAC,EACE,GAAG,MAAM,EACT,SAAS,EAAE,QAAQ,MAAM,CAAC;CAC/B,MAAM,aAAa;EAAC;EAAQ,OAAO,GAAI;EAAG,OAAO,GAAI;CAAC;CACtD,MAAM,SAAS,WAAW,KAAK,MAAM,IAAI,MAAM,CAAC,EAAE,SAAS,OAAO,QAAQ,CAAC;CAC3E,MAAM,UAAU,OAAO,WAAW,MAAM,KAAK,GAAG;CAChD,IAAI,YAAY,IAAI,OAAO,WAAW;CACtC,OAAO,WAAW,OAAO,QAAQ,KAAK,IAAI,GAAG,MAAM,CAAC;AACtD;;AAGA,SAAgB,gBAAgB,OAAmC;CACjE,OAAO,UACL,MAAM,aACN,MAAM,kBACN,MAAM,gBACN,MAAM,eACN,MAAM,eACN,MAAM,UACR;AACF;;AAGA,SAAgB,kBAAkB,OAAmC;CACnE,OAAO,UACL,MAAM,sBACN,MAAM,2BACN,MAAM,gBACN,MAAM,eACN,MAAM,wBACN,MAAM,UACR;AACF;;AAGA,MAAM,oBAAmE;CACvE,MAAM;CACN,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;AACR;;AAGA,SAAgB,mBACd,QAC+B;CAC/B,MAAM,SAAS,kBAAkB;CACjC,IAAI,QAAQ,OAAO;CACnB,IAAI;EACF,MAAM,GAAG,QAAQ,UAAU,IAAI,MAAM,MAAM,EAAE,GAAG,OAAO,EAAE;EACzD,IAAI,CAAC,UAAU,SAAS,KAAM,OAAO;EACrC,MAAM,QAAS,UAAU,KAAK,MAAO,OAAO;EAC5C,IAAI,OAAO,OAAO,MAAM,IAAI,OAAO;EACnC,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,IAAI,MAAM,KAAK,OAAO;EACtB,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;;AAGA,SAAS,UACP,QACA,OACA,OACA,UACA,SACA,SACU;CACV,OAAO;EACL,GAAG,MAAM,KAAK,GAAG,MAAM,KAAK,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE;EACpD,GAAG,MAAM,KAAK,GAAG,MAAM,KAAK,OAAO,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE;EACrD,KAAK,OAAO,aAAa,SAAS;EAClC,KAAK,OAAO,aAAa,QAAQ;EACjC,KAAK,OAAO,YAAY,QAAQ;CAClC;AACF;AAEA,SAAS,UACP,OACA,OACA,UACA,SACA,SACA,YACU;CACV,MAAM,YAAY,MAAM;CACxB,OAAO;EACL,GAAG,UAAU,SAAS,OAAO,OAAO,UAAU,SAAS,OAAO;EAC9D,uBAAuB,WAAW;EAClC,sBAAsB,UAAU;EAChC,kBAAkB,UAAU;CAC9B;AACF;;;;;;;;;;;AAYA,SAAgB,iBAAiB,OAAmC;CAClE,OAAO,UACL,WACA,MAAM,WACN,MAAM,gBACN,iBAAiB,MAAM,UAAU,IAAK,QAAQ,iBAAiB,GAC/D,iBAAiB,MAAM,UAAU,IAAK,QAAQ,oBAAoB,GAClE,MAAM,UAAU,EAClB;AACF;;AAGA,SAAgB,mBAAmB,OAAmC;CACpE,OAAO,UACL,WACA,MAAM,oBACN,MAAM,yBACN,iBAAiB,MAAM,UAAU,IAAK,QAAQ,iBAAiB,GAC/D,iBAAiB,MAAM,UAAU,IAAK,QAAQ,oBAAoB,GAClE,MAAM,mBAAmB,EAC3B;AACF"}

package/dist/lib/container-chrome.cjs

@@ -0,0 +1,53 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/lib/container-chrome.ts
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	"2xl": "rounded-2xl",
+	"3xl": "rounded-3xl",
+	full: "rounded-full"
+};
+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))]"
+};
+const containerPaddingX = {
+	ambient: "px-(--spark-card-px,1rem)",
+	soft: "px-4",
+	surface: "px-4",
+	outline: "px-4",
+	ghost: "",
+	solid: "px-4"
+};
+const containerPaddingAll = {
+	ambient: "p-(--spark-card-px,1rem)",
+	soft: "p-4",
+	surface: "p-4",
+	outline: "p-4",
+	ghost: "",
+	solid: "p-4"
+};
+function containerInteractiveClasses(resolved) {
+	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))"
+	];
+}
+//#endregion
+exports.containerChrome = containerChrome;
+exports.containerInteractiveClasses = containerInteractiveClasses;
+exports.containerPaddingAll = containerPaddingAll;
+exports.containerPaddingX = containerPaddingX;
+exports.radiusClasses = radiusClasses;
+
+//# sourceMappingURL=container-chrome.cjs.map

package/dist/lib/container-chrome.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3))',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))',\n  outline: 'border border-(--spark-card-c-border,var(--neutral-a6))',\n  ghost: '',\n  solid:\n    '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))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\nexport function containerInteractiveClasses(resolved: ContainerVariant) {\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    (resolved === 'ambient' || resolved === 'soft') &&\n      'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))',\n  ]\n}\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAIA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SAAS;CACT,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,SAAgB,4BAA4B,UAA4B;CACtE,OAAO;EACL;EACA;EACA;GAEC,aAAa,aAAa,aAAa,WACtC;CACJ;AACF"}

package/dist/lib/container-chrome.d.cts

@@ -0,0 +1,15 @@
+"use client";
+
+import { n as SparkCardVariant } from "../theme-types-1yB0d8mp.cjs";
+
+//#region src/lib/container-chrome.d.ts
+type ContainerVariant = SparkCardVariant | 'ambient';
+type ContainerRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+declare const radiusClasses: Record<ContainerRadius, string>;
+declare const containerChrome: Record<ContainerVariant, string>;
+declare const containerPaddingX: Record<ContainerVariant, string>;
+declare const containerPaddingAll: Record<ContainerVariant, string>;
+declare function containerInteractiveClasses(resolved: ContainerVariant): (string | false)[];
+//#endregion
+export { ContainerRadius, ContainerVariant, containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
+//# sourceMappingURL=container-chrome.d.cts.map