@sableui/react 0.4.0 → 0.6.0

package/dist/presets/index.d.ts

@@ -1,4 +1,81 @@
-import { T as ThemeManifest } from '../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../_contract-C2M1SjBf.js';
+
+/** An OKLCH colour, lightness 0–1. Extra fields (alpha) ride along untouched. */
+interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+/** Ratio and Lc of a label on a fill, and whether it clears both floors. */
+declare function labelContrast(ink: OklchColor, fill: OklchColor): {
+    ratio: number;
+    lc: number;
+    reads: boolean;
+};
+/**
+ * The ink for a fill that cannot move (a status colour, a decorative tone).
+ * One that reads; of two, the stronger. Of none, the one meeting the ratio,
+ * because APCA cannot waive it; failing that, the stronger.
+ */
+declare function inkFor<T extends OklchColor>(fill: OklchColor, inks: readonly T[]): T;
+/**
+ * The fill nearest `fill` on which `ink` reads: lightness moves away from the
+ * ink in small steps, hue holds, and chroma is kept unless the new lightness
+ * cannot show it. Returns `fill` itself when the ink already reads, and the
+ * furthest step tried when nothing in range does.
+ */
+declare function fitFillToInk<T extends OklchColor>(fill: T, ink: OklchColor): T;
+/**
+ * Which ink a colour takes: the one that reads on it with the least change to
+ * it — none, when one already reads (the stronger, when both do). Decide this
+ * once, on the colour as picked, then `fitFillToInk` each mode's fill to it.
+ */
+declare function inkPolarity<T extends OklchColor>(color: OklchColor, inks: readonly T[]): T;
+/** Fills a theme or preset authors from its brand. Their ink follows the colour as picked. */
+declare const BRAND_FILLS: readonly ["primary", "sidebar-primary", "highlight"];
+/**
+ * Status fills. Each has a separate `-text` token for the colour drawn on a
+ * surface (`text-destructive` reads `--destructive-text`), so the fill is free to
+ * sit where its label reads — a dark-mode red under white ink — without taking
+ * the page's error text down with it.
+ */
+declare const STATUS_FILLS: readonly ["destructive", "success", "tone-warning", "tone-info"];
+/**
+ * Every fill a label sits on that the rule measures. Sable's own themes are held
+ * to it (themes.test.ts); a preset or an app is told, offered a fix, and may keep
+ * its choice on the record.
+ */
+declare const LABELLED_FILLS: readonly ["primary", "sidebar-primary", "highlight", "destructive", "success", "tone-warning", "tone-info"];
+/** The rule's id, shared by `sable-lint`, `sable preset --check` and preset `exceptions`. */
+declare const LABEL_CONTRAST_RULE = "label-contrast";
+interface LabelFinding {
+    mode: "light" | "dark";
+    /** The fill token, without `--`; its ink is `${fill}-foreground`. */
+    fill: string;
+    ratio: number;
+    lc: number;
+    /** The nearest pair that reads, decided as the customizer decides it. */
+    suggestion: {
+        fill: string;
+        ink: string;
+    };
+}
+/**
+ * Check each labelled fill against its ink, in both modes.
+ *
+ * Takes resolved values (`oklch(…)` or hex; anything else is counted as
+ * unmeasured, never guessed). Which ink a fix uses is decided on the LIGHT-mode
+ * fill — the colour as picked — so a dark-mode failure on a colour that takes
+ * white is fixed by bringing the fill down, not by flipping the label dark.
+ */
+declare function checkLabelledFills(tokens: {
+    light: Record<string, string | undefined>;
+    dark: Record<string, string | undefined>;
+}): {
+    findings: LabelFinding[];
+    measured: number;
+    unmeasured: string[];
+};
 
 /** The public theme vocabulary. Presets never need component overrides. */
 declare const PRESET_TOKEN_NAMES: readonly string[];
@@ -26,12 +103,38 @@ interface SablePreset {
         light: Record<string, string>;
         dark: Record<string, string>;
     };
+    /**
+     * Sable's opinions the preset declines, on the record. A check reports an
+     * accepted finding with its reason instead of failing on it.
+     */
+    exceptions?: PresetException[];
+}
+/** A deliberate departure from a Sable check — e.g. a brand that requires dark ink on its primary. */
+interface PresetException {
+    rule: typeof LABEL_CONTRAST_RULE;
+    mode: "light" | "dark";
+    /** The fill token, e.g. `primary`. */
+    token: (typeof LABELLED_FILLS)[number];
+    reason: string;
 }
-/** Structural/contract validation; visual contrast and brief fit still need review. */
-declare function validatePreset(input: unknown): string[];
-declare function parsePreset(input: unknown): SablePreset;
+declare function validatePreset(raw: unknown): string[];
+declare function parsePreset(raw: unknown): SablePreset;
 declare function presetManifest(input: SablePreset): ThemeManifest;
 /** Scoped CSS can coexist with built-in presets. Never changes :root globally. */
 declare function presetCss(input: SablePreset): string;
+/**
+ * Labels on the preset's brand and status fills (contrast.ts, "Labels on fills"): each
+ * failing pair with the nearest pair that reads. Findings the preset accepts in
+ * `exceptions` come back under `accepted` with their reason — reported, not
+ * failed, because the choice is the preset author's to make.
+ */
+declare function presetLabelContrast(input: SablePreset): {
+    open: LabelFinding[];
+    accepted: (LabelFinding & {
+        reason: string;
+    })[];
+    measured: number;
+    unmeasured: string[];
+};
 
-export { PRESET_TOKEN_NAMES, type SablePreset, parsePreset, presetCss, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -1,10 +1,193 @@
-import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS } from '../chunk-OQACYT2D.js';
+import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS, ART_TOKENS } from '../chunk-NETUFI34.js';
+
+// src/themes/contrast.ts
+function oklchToLinearRgb(L, C, H) {
+  const h = H * Math.PI / 180;
+  const a = C * Math.cos(h);
+  const b = C * Math.sin(h);
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function hexToLinearRgb(hex) {
+  const m = hex.trim().match(/^#([0-9a-f]{6})$/i);
+  if (!m) return null;
+  const n = Number.parseInt(m[1], 16);
+  const toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  return [
+    toLinear((n >> 16 & 255) / 255),
+    toLinear((n >> 8 & 255) / 255),
+    toLinear((n & 255) / 255)
+  ];
+}
+var clamp01 = (x) => Math.min(1, Math.max(0, x));
+function linearToSrgb(c) {
+  const v = clamp01(c);
+  return v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+}
+function parseColorWithAlpha(value) {
+  const v = value.trim();
+  if (v.startsWith("#")) {
+    const rgb2 = hexToLinearRgb(v.length === 9 ? v.slice(0, 7) : v);
+    if (!rgb2) return null;
+    const alpha2 = v.length === 9 ? Number.parseInt(v.slice(7), 16) / 255 : 1;
+    return { rgb: rgb2, alpha: Number.isNaN(alpha2) ? 1 : alpha2 };
+  }
+  const m = v.match(
+    /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+)(%?))?\s*\)/i
+  );
+  if (!m) return null;
+  const rgb = oklchToLinearRgb(
+    m[2] === "%" ? Number(m[1]) / 100 : Number(m[1]),
+    Number(m[3]),
+    Number(m[4])
+  );
+  const alpha = m[5] === void 0 ? 1 : m[6] === "%" ? Number(m[5]) / 100 : Number(m[5]);
+  return { rgb, alpha };
+}
+function luminance([r, g, b]) {
+  return 0.2126 * clamp01(r) + 0.7152 * clamp01(g) + 0.0722 * clamp01(b);
+}
+function contrastRatio(a, b) {
+  const [l1, l2] = [luminance(a), luminance(b)];
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+var CONTRAST_FLOOR = 4.5;
+var toSrgb = linearToSrgb;
+function apcaLc(ink, surface) {
+  const Y = (rgb) => {
+    const [r, g, b] = rgb.map(toSrgb);
+    const y = 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
+    return y < 0.022 ? y + (0.022 - y) ** 1.414 : y;
+  };
+  const Yt = Y(ink);
+  const Yb = Y(surface);
+  if (Math.abs(Yb - Yt) < 5e-4) return 0;
+  let out;
+  if (Yb > Yt) {
+    const s = (Yb ** 0.56 - Yt ** 0.57) * 1.14;
+    out = s < 0.035 ? 0 : s - 0.027;
+  } else {
+    const s = (Yb ** 0.65 - Yt ** 0.62) * 1.14;
+    out = s > -0.035 ? 0 : s + 0.027;
+  }
+  return out * 100;
+}
+var PERCEPTUAL_FLOOR = 60;
+var GAMUT_EPSILON = 1e-4;
+function isInSrgbGamut(rgb, epsilon = GAMUT_EPSILON) {
+  return rgb.every((c) => c >= -epsilon && c <= 1 + epsilon);
+}
+var linearOf = ({ l, c, h }) => oklchToLinearRgb(l, c, h);
+function maxChromaAt(l, h) {
+  if (l <= 0 || l >= 1) return 0;
+  let lo = 0;
+  let hi = 0.4;
+  for (let i = 0; i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    if (isInSrgbGamut(oklchToLinearRgb(l, mid, h))) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function labelContrast(ink, fill) {
+  const a = linearOf(ink);
+  const b = linearOf(fill);
+  const ratio = contrastRatio(a, b);
+  const lc = apcaLc(a, b);
+  return { ratio, lc, reads: ratio >= CONTRAST_FLOOR && Math.abs(lc) >= PERCEPTUAL_FLOOR };
+}
+function inkFor(fill, inks) {
+  const rank = (ink) => {
+    const v = labelContrast(ink, fill);
+    return (v.reads ? 2 : v.ratio >= CONTRAST_FLOOR ? 1 : 0) * 1e3 + Math.abs(v.lc);
+  };
+  return inks.reduce((best, ink) => rank(ink) > rank(best) ? ink : best);
+}
+var FILL_GAMUT_SAFETY = 0.98;
+function fitFillToInk(fill, ink) {
+  if (labelContrast(ink, fill).reads) return fill;
+  const step = ink.l > fill.l ? -5e-3 : 5e-3;
+  let candidate = fill;
+  for (let l = fill.l + step; l > 0.05 && l < 0.98; l += step) {
+    candidate = { ...fill, l, c: Math.min(fill.c, maxChromaAt(l, fill.h) * FILL_GAMUT_SAFETY) };
+    if (labelContrast(ink, candidate).reads) return candidate;
+  }
+  return candidate;
+}
+function inkPolarity(color, inks) {
+  const cost = (ink) => {
+    const fitted = fitFillToInk(color, ink);
+    const v = labelContrast(ink, fitted);
+    return (v.reads ? 0 : 10) + Math.abs(fitted.l - color.l) - Math.abs(v.lc) / 1e4;
+  };
+  return inks.reduce((best, ink) => cost(ink) < cost(best) ? ink : best);
+}
+function linearRgbToOklch([r, g, b]) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  return { l: L, c, h: c < 1e-4 ? 0 : (Math.atan2(B, A) * 180 / Math.PI + 360) % 360 };
+}
+var formatOklchColor = ({ l, c, h }) => `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(1)})`;
+var BRAND_FILLS = ["primary", "sidebar-primary", "highlight"];
+var STATUS_FILLS = ["destructive", "success", "tone-warning", "tone-info"];
+var LABELLED_FILLS = [...BRAND_FILLS, ...STATUS_FILLS];
+var LABEL_CONTRAST_RULE = "label-contrast";
+function checkLabelledFills(tokens) {
+  const findings = [];
+  const unmeasured = [];
+  let measured = 0;
+  const read = (value) => {
+    const parsed = value ? parseColorWithAlpha(value) : null;
+    return parsed && parsed.alpha >= 1 ? linearRgbToOklch(parsed.rgb) : null;
+  };
+  for (const mode of ["light", "dark"]) {
+    for (const fill of LABELLED_FILLS) {
+      const rawFill = tokens[mode][fill];
+      const rawInk = tokens[mode][`${fill}-foreground`];
+      if (!rawFill && !rawInk) continue;
+      const fillColor = read(rawFill);
+      const ink = read(rawInk);
+      if (!fillColor || !ink) {
+        unmeasured.push(`${mode}.${fill}`);
+        continue;
+      }
+      measured++;
+      const verdict = labelContrast(ink, fillColor);
+      if (verdict.reads) continue;
+      const opposite = ink.l > 0.5 ? { l: 0.2, c: 0.03, h: fillColor.h } : { l: 0.985, c: 0.01, h: fillColor.h };
+      const reference = read(tokens.light[fill]) ?? fillColor;
+      const chosen = inkPolarity(reference, [ink, { ...opposite, h: reference.h }]);
+      const nextInk = chosen === ink ? ink : opposite;
+      findings.push({
+        mode,
+        fill,
+        ratio: verdict.ratio,
+        lc: verdict.lc,
+        suggestion: { fill: formatOklchColor(fitFillToInk(fillColor, nextInk)), ink: formatOklchColor(nextInk) }
+      });
+    }
+  }
+  return { findings, measured, unmeasured };
+}
 
 // src/presets/index.ts
 var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
   ...DERIVED_EDGE_TOKENS.map((name) => `theme-${name}`),
+  // Art direction: optional hooks — a preset without them paints the default art.
+  ...ART_TOKENS.map((name) => `theme-${name}`),
   ...WORKSPACE_SURFACE_TOKENS,
   ...DERIVED_EDGE_TOKENS,
   ...RADIUS_TOKENS,
@@ -38,7 +221,31 @@ var tokenNames = new Set(PRESET_TOKEN_NAMES);
 var record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
 var text = (value) => typeof value === "string" && value.trim().length > 0;
 var safeCss = (value) => value.length <= 2048 && !/[;{}<>\\@]|\/\*|\*\/|!important|url\s*\(|expression\s*\(|REPLACE/i.test(value);
-function validatePreset(input) {
+var STATUS_TEXT_FROM_FILL = {
+  "destructive-text": "destructive",
+  "success-text": "success",
+  "tone-warning-text": "tone-warning",
+  "tone-info-text": "tone-info"
+};
+function upgradePreset(input) {
+  if (!record(input) || !record(input.tokens)) return input;
+  const tokens = input.tokens;
+  const shared = record(tokens.shared) ? tokens.shared : {};
+  const upgraded = { ...tokens };
+  for (const mode of ["light", "dark"]) {
+    const values = tokens[mode];
+    if (!record(values)) continue;
+    const next = { ...values };
+    for (const [name, fill] of Object.entries(STATUS_TEXT_FROM_FILL)) {
+      const value = values[fill] ?? shared[fill];
+      if (!text(values[name]) && !text(shared[name]) && text(value)) next[name] = value;
+    }
+    upgraded[mode] = next;
+  }
+  return { ...input, tokens: upgraded };
+}
+function validatePreset(raw) {
+  const input = upgradePreset(raw);
   if (!record(input)) return ["Preset must be a JSON object."];
   const issues = [];
   if (input.schemaVersion !== 1) issues.push("Unsupported preset schemaVersion; expected 1.");
@@ -58,6 +265,13 @@ function validatePreset(input) {
       if (!record(item) || !text(item.source) || !text(item.observation) || !["measured", "estimated", "derived", "user-edited"].includes(String(item.method))) issues.push(`Invalid reference observation ${index + 1}.`);
     });
   }
+  if (input.exceptions !== void 0) {
+    if (!Array.isArray(input.exceptions) || input.exceptions.length > 50) issues.push("exceptions must be an array of at most 50 entries.");
+    else input.exceptions.forEach((item, index) => {
+      if (!record(item) || item.rule !== LABEL_CONTRAST_RULE || !["light", "dark"].includes(String(item.mode)) || !LABELLED_FILLS.includes(item.token) || !text(item.reason) || item.reason.length > 500)
+        issues.push(`Invalid exception ${index + 1}: needs rule "${LABEL_CONTRAST_RULE}", mode light|dark, token (${LABELLED_FILLS.join(", ")}) and a reason.`);
+    });
+  }
   if (!record(input.tokens)) return [...issues, "tokens must contain shared, light, and dark objects."];
   const groups = input.tokens;
   for (const group of ["shared", "light", "dark"]) {
@@ -92,10 +306,10 @@ function validatePreset(input) {
   }
   return issues;
 }
-function parsePreset(input) {
-  const issues = validatePreset(input);
+function parsePreset(raw) {
+  const issues = validatePreset(raw);
   if (issues.length) throw new Error(issues.join("\n"));
-  return input;
+  return upgradePreset(raw);
 }
 function presetManifest(input) {
   const preset = parsePreset(input);
@@ -122,5 +336,24 @@ ${declarations(preset.tokens.light)}
 }
 `;
 }
+function presetLabelContrast(input) {
+  const preset = parsePreset(input);
+  const values = (mode) => {
+    const all = { ...preset.tokens.shared, ...preset.tokens[mode] };
+    const resolve = (value, depth = 0) => depth > 10 ? value : value.replace(/^var\(\s*--([\w-]+)\s*\)$/, (m, name) => all[name] ? resolve(all[name], depth + 1) : m);
+    return Object.fromEntries(Object.entries(all).map(([name, value]) => [name, resolve(value)]));
+  };
+  const { findings, measured, unmeasured } = checkLabelledFills({ light: values("light"), dark: values("dark") });
+  const reasonFor = (f) => preset.exceptions?.find((e) => e.rule === LABEL_CONTRAST_RULE && e.mode === f.mode && e.token === f.fill)?.reason;
+  return {
+    open: findings.filter((f) => !reasonFor(f)),
+    accepted: findings.flatMap((f) => {
+      const reason = reasonFor(f);
+      return reason ? [{ ...f, reason }] : [];
+    }),
+    measured,
+    unmeasured
+  };
+}
 
-export { PRESET_TOKEN_NAMES, parsePreset, presetCss, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, PRESET_TOKEN_NAMES, STATUS_FILLS, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/styles.css

@@ -109,6 +109,39 @@
 	--color-tone-edition-foreground: var(--tone-edition-foreground);
 	--color-tone-warning-foreground: var(--tone-warning-foreground);
 	--color-tone-info-foreground: var(--tone-info-foreground);
+	/* Status text: a status colour drawn on a surface. Tailwind resolves each
+	   property's own namespace before --color-*, so `text-destructive`,
+	   `border-destructive`, `ring-destructive` (and outline, decoration, fill,
+	   stroke) read --destructive-text while `bg-destructive` keeps the fill.
+	   Same class names; the value fits the job. */
+	--text-color-destructive: var(--destructive-text);
+	--border-color-destructive: var(--destructive-text);
+	--ring-color-destructive: var(--destructive-text);
+	--outline-color-destructive: var(--destructive-text);
+	--text-decoration-color-destructive: var(--destructive-text);
+	--fill-destructive: var(--destructive-text);
+	--stroke-destructive: var(--destructive-text);
+	--text-color-success: var(--success-text);
+	--border-color-success: var(--success-text);
+	--ring-color-success: var(--success-text);
+	--outline-color-success: var(--success-text);
+	--text-decoration-color-success: var(--success-text);
+	--fill-success: var(--success-text);
+	--stroke-success: var(--success-text);
+	--text-color-tone-warning: var(--tone-warning-text);
+	--border-color-tone-warning: var(--tone-warning-text);
+	--ring-color-tone-warning: var(--tone-warning-text);
+	--outline-color-tone-warning: var(--tone-warning-text);
+	--text-decoration-color-tone-warning: var(--tone-warning-text);
+	--fill-tone-warning: var(--tone-warning-text);
+	--stroke-tone-warning: var(--tone-warning-text);
+	--text-color-tone-info: var(--tone-info-text);
+	--border-color-tone-info: var(--tone-info-text);
+	--ring-color-tone-info: var(--tone-info-text);
+	--outline-color-tone-info: var(--tone-info-text);
+	--text-decoration-color-tone-info: var(--tone-info-text);
+	--fill-tone-info: var(--tone-info-text);
+	--stroke-tone-info: var(--tone-info-text);
 	--color-highlight-foreground: var(--highlight-foreground);
 
 	/* Overlay — fixed dark scrim/media surface + its light ink (bg-overlay,
@@ -345,6 +378,30 @@
 	   a dark track (well under 3:1). When ON the knob takes `--primary-foreground`,
 	   the ink every theme already tunes against its primary fill. */
 	--switch-thumb: var(--theme-switch-thumb, oklch(99% 0.002 90));
+
+	/* The contact shadow under a knob: the Switch thumb, the Slider thumb, the
+	   ColorField handle. NOT the elevation ladder. `shadow-sm` is a surface's
+	   lift, and a theme or a Depth setting may make it a long offset (Poppy's
+	   are hard 3–12px drops); on a 20px knob inside its track that drop escaped
+	   the track. A knob only sits on its rail, so it keeps one small shadow. */
+	--knob-shadow: var(--theme-knob-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+
+	/* Art direction for generated imagery (GradientArt; see ART_TOKENS in
+	   themes/_contract.ts). The default paints the four decorative tones,
+	   lifted from their text strength to an art strength, glowing over the brand
+	   steeped in the first tone; a theme overrides any of it through the
+	   --theme-art-* hooks. Declared here, on every scope, so a .dark island or a
+	   preset-scoped preview paints from its own tokens. */
+	--art-1: var(--theme-art-1, oklch(from var(--tone-info) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-2: var(--theme-art-2, oklch(from var(--tone-collectible) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-3: var(--theme-art-3, oklch(from var(--tone-edition) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-4: var(--theme-art-4, oklch(from var(--tone-standard) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-5: var(--theme-art-5, transparent);
+	--art-6: var(--theme-art-6, transparent);
+	--art-ground: var(--theme-art-ground, color-mix(in oklab, var(--primary) 55%, oklch(from var(--tone-info) 0.3 c h)));
+	--art-warp: var(--theme-art-warp, 0.8);
+	--art-softness: var(--theme-art-softness, 0.88);
+	--art-grain: var(--theme-art-grain, 0);
 }
 
 /* ==========================================================================

package/dist/{theme-provider-CGeiusgu.d.ts → theme-provider-kQszHYji.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as ThemeManifest } from './_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from './_contract-C2M1SjBf.js';
 
 declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
 declare const DEFAULT_THEME_ID: string;

package/dist/themes/atelier/atelier.css

@@ -110,14 +110,18 @@
 	--accent: oklch(93% 0 0);
 	--accent-foreground: #000000;
 	--destructive: oklch(50% 0.18 22);
+	--destructive-text: oklch(50% 0.18 22);
 	--destructive-foreground: #ffffff;
 	--success: oklch(50% 0.10 173);
+	--success-text: oklch(50% 0.10 173);
 	--success-foreground: #ffffff;
 	--tone-standard: oklch(45% 0 0);
 	--tone-collectible: oklch(46% 0.11 300);
 	--tone-edition: oklch(46% 0.09 173);
 	--tone-info: oklch(47% 0.10 250);
+	--tone-info-text: oklch(47% 0.10 250);
 	--tone-warning: oklch(52% 0.12 52);
+	--tone-warning-text: oklch(52% 0.12 52);
 	--highlight: oklch(93% 0 0);
 	--tone-standard-foreground: #ffffff;
 	--tone-collectible-foreground: #ffffff;
@@ -187,15 +191,20 @@
 	--secondary-foreground: #ffffff;
 	--accent: oklch(28% 0 0); /* above --popover: a hover row or chip inside a menu/dialog must still read */
 	--accent-foreground: #ffffff;
-	--destructive: oklch(66% 0.19 22);
-	--destructive-foreground: oklch(13% 0 0);
-	--success: oklch(72% 0.12 173);
+	/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
+	--destructive: oklch(58.5% 0.19 22);
+	--destructive-text: oklch(77.5% 0.129 22);
+	--destructive-foreground: #ffffff;
+	--success: oklch(74% 0.12 173);
+	--success-text: oklch(74% 0.12 173);
 	--success-foreground: oklch(13% 0 0);
 	--tone-standard: oklch(80% 0 0);
 	--tone-collectible: oklch(76% 0.12 300);
 	--tone-edition: oklch(76% 0.10 173);
 	--tone-info: oklch(76% 0.10 250);
+	--tone-info-text: oklch(76% 0.10 250);
 	--tone-warning: oklch(80% 0.13 52);
+	--tone-warning-text: oklch(80% 0.13 52);
 	--highlight: oklch(26% 0 0);
 	--tone-standard-foreground: oklch(13% 0 0);
 	--tone-collectible-foreground: oklch(13% 0 0);
@@ -214,3 +223,22 @@
 	--sidebar-border: oklch(26% 0 0);
 	--sidebar-ring: #ffffff;
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Cinematic monochrome (art-direction.md): a dark studio ground with
+   one warm amber glow, a little film grain. Saturation lives in the light, never
+   in the chrome.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="atelier"],
+[data-sable-theme="atelier"] .dark,
+[data-sable-theme="atelier"] .light {
+	--theme-art-1: oklch(0.16 0 0);
+	--theme-art-2: oklch(0.34 0.01 60);
+	--theme-art-3: oklch(from var(--tone-warning) 0.74 0.14 h);
+	--theme-art-4: oklch(0.1 0 0);
+	--theme-art-ground: oklch(0.12 0 0);
+	--theme-art-warp: 0.6;
+	--theme-art-softness: 0.8;
+	--theme-art-grain: 0.3;
+}

package/dist/themes/atelier/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /**
  * Mono Editorial — a Sable theme. Concrete token values live in

package/dist/themes/ember/ember.css

@@ -166,14 +166,18 @@
 	--accent: oklch(92% 0.011 74);
 	--accent-foreground: oklch(23.1% 0.014 70);
 	--destructive: oklch(50% 0.17 25);
+	--destructive-text: oklch(50% 0.17 25);
 	--destructive-foreground: oklch(100% 0 0);
 	--success: oklch(43% 0.10 165);
+	--success-text: oklch(43% 0.10 165);
 	--success-foreground: oklch(100% 0 0);
 	--tone-standard: oklch(40% 0.07 130);
 	--tone-collectible: oklch(46% 0.14 285);
 	--tone-edition: oklch(45% 0.15 309);
 	--tone-info: oklch(48% 0.13 250);
+	--tone-info-text: oklch(48% 0.13 250);
 	--tone-warning: oklch(50% 0.12 52);
+	--tone-warning-text: oklch(50% 0.12 52);
 	--highlight: oklch(58% 0.245 32.9);
 	--tone-standard-foreground: oklch(100% 0 0);
 	--tone-collectible-foreground: oklch(100% 0 0);
@@ -240,29 +244,35 @@
 	--ring: oklch(65.2% 0.235 32.9);
 	/* The light-mode fill, not a brighter one: on the brighter fill WCAG preferred
 	   dark ink (5.6:1), but it reads at APCA Lc 42 — muddy — against Lc 67 for
-	   white. At 58% white clears both (4.8:1, Lc 76). */
+	   white. At 58% white clears both (4.8:1, Lc 76). The sidebar's active item
+	   and the highlight are the same brand fill and follow. */
 	--primary: oklch(58% 0.245 32.9);
 	--primary-foreground: oklch(100% 0 0);
 	--secondary: oklch(26% 0.012 67.2); /* a step ABOVE the card, so a secondary Button reads on a card and on the page */
 	--secondary-foreground: oklch(100% 0 0);
 	--accent: oklch(29% 0.014 60);
 	--accent-foreground: oklch(100% 0 0);
-	--destructive: oklch(62% 0.16 25);
-	--destructive-foreground: oklch(14.1% 0.018 70.5);
-	--success: oklch(72% 0.12 165);
+	/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
+	--destructive: oklch(58% 0.16 25);
+	--destructive-text: oklch(77.5% 0.129 25);
+	--destructive-foreground: oklch(100% 0 0);
+	--success: oklch(74% 0.12 165);
+	--success-text: oklch(74% 0.12 165);
 	--success-foreground: oklch(14.1% 0.018 70.5);
 	--tone-standard: oklch(70% 0.09 130);
 	--tone-collectible: oklch(70% 0.12 285);
 	--tone-edition: oklch(68% 0.14 309);
-	--tone-info: oklch(72% 0.11 250);
+	--tone-info: oklch(75.5% 0.11 250);
+	--tone-info-text: oklch(75.5% 0.11 250);
 	--tone-warning: oklch(78% 0.13 60);
-	--highlight: oklch(65.2% 0.235 32.9);
+	--tone-warning-text: oklch(78% 0.13 60);
+	--highlight: oklch(58% 0.245 32.9);
 	--tone-standard-foreground: oklch(14.1% 0.018 70.5);
 	--tone-collectible-foreground: oklch(14.1% 0.018 70.5);
 	--tone-edition-foreground: oklch(14.1% 0.018 70.5);
 	--tone-info-foreground: oklch(14.1% 0.018 70.5);
 	--tone-warning-foreground: oklch(14.1% 0.018 70.5);
-	--highlight-foreground: oklch(14.1% 0.018 70.5);
+	--highlight-foreground: oklch(100% 0 0);
 	--overlay: oklch(14.1% 0.018 70.5);
 	--overlay-foreground: oklch(100% 0 0);
 	--sidebar: oklch(15.9% 0.016 65);
@@ -274,3 +284,24 @@
 	--sidebar-border: oklch(25.2% 0.012 67.2);
 	--sidebar-ring: oklch(65.2% 0.235 32.9);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Light as the accent (art-direction.md): a hot core blooming out of a
+   warm near-black ground and falling off steeply — fire, not a wash. Perfectly
+   flat, no grain. Every colour is the brand moved along the flame, so a new
+   brand still burns in its own hue.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="ember"],
+[data-sable-theme="ember"] .dark,
+[data-sable-theme="ember"] .light {
+	--theme-art-1: oklch(from var(--primary) 0.17 0.03 calc(h + 20));
+	--theme-art-2: var(--primary);
+	--theme-art-3: oklch(from var(--primary) 0.68 0.21 calc(h + 15));
+	--theme-art-4: oklch(from var(--primary) 0.88 0.15 calc(h + 50));
+	--theme-art-5: oklch(from var(--primary) 0.38 0.15 calc(h - 5));
+	--theme-art-ground: oklch(from var(--primary) 0.14 0.02 calc(h + 20));
+	--theme-art-warp: 0.95;
+	--theme-art-softness: 0.72;
+	--theme-art-grain: 0;
+}

package/dist/themes/ember/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /**
  * Ember — a Sable theme. Concrete token values live in

package/dist/themes/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-CGeiusgu.js';
+export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-kQszHYji.js';
 export { atelierTheme } from './atelier/index.js';
 export { default as emberTheme } from './ember/index.js';
 export { default as meridianTheme } from './meridian/index.js';
@@ -7,4 +7,4 @@ export { default as prismTheme } from './prism/index.js';
 export { default as sableTheme } from './sable/index.js';
 export { default as verdantTheme } from './verdant/index.js';
 import 'react';
-import '../_contract-Cn3lUpih.js';
+import '../_contract-C2M1SjBf.js';

package/dist/themes/meridian/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /**
  * Meridian — a Sable theme. Concrete token values live in