@sableui/react 0.6.2 → 0.7.1

package/dist/styles.css

@@ -391,14 +391,19 @@
 	   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. */
+	   preset-scoped preview paints from its own tokens.
+
+   Art that keys off the brand reads `--theme-art-brand`, falling back to
+   `--primary`. They are the same colour until a look turns the primary action
+   neutral (black/white buttons): then the art must keep the brand, or Ember's
+   embers go grey. Set the hook to the brand wherever --primary stops being it. */
 	--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-ground: var(--theme-art-ground, color-mix(in oklab, var(--theme-art-brand, 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);
@@ -1062,6 +1067,103 @@
 	}
 }
 
+/* Reveal on hover — row and tile actions that rest hidden and appear when the
+   pointer is over their item, without ever becoming unreachable.
+
+   Every app hand-writes this, and the hand-written version is wrong in one of
+   three ways: `group-hover:opacity-100` alone hides the action FOREVER on a
+   phone (touch has no hover), `hidden group-hover:flex` drops it from the tab
+   order and the accessibility tree, and the `[@media(hover:hover)]:` fix that
+   handles the first two snaps with no transition. This is the one version that
+   is right on all three:
+
+   - HIDDEN only where `(hover: hover)` — a touch or no-hover device shows the
+     action at rest, always.
+   - SHOWN when the nearest host is hovered, when anything in it holds focus
+     (Tab to the row and its actions appear), and while the action's own popup
+     is open (an overflow menu whose list took focus into a portal does not
+     vanish from under itself).
+   - OPACITY, never display or visibility: the action stays in the tab order
+     and the accessibility tree, so a keyboard or screen-reader user never has
+     to discover it first.
+
+   The host is the nearest ancestor with Tailwind's `group` class (or a
+   `data-reveal-scope` attribute, for a host whose `group` is named). "Nearest"
+   falls out of how hover works: hovering an inner host hovers every host
+   around it, so the action hides exactly when its own host is not hovered or
+   focused. A bare `reveal-on-hover` with no host stays visible — the safe
+   failure. Put the host on the ITEM (the row, the tile), never on the list:
+   hovering anywhere in a list host reveals every action in it at once.
+
+   The transition lists exactly what `motion-interactive` does, so it composes
+   with a Sable Button (which carries that recipe) instead of fighting it for
+   transition-property; the durations are motion tokens, so reduced motion and
+   <MotionProvider> off make the reveal an instant swap. `--reveal-offset`
+   (default 0) adds a short rise while hidden — `[--reveal-offset:--spacing(1)]`.
+
+   `:has()` and selector-list `:not()` are load-bearing. A browser without them
+   drops the hiding rule entirely and the action simply stays visible. */
+@utility reveal-on-hover {
+	transition-property: color, background-color, border-color, box-shadow,
+		opacity, fill, stroke, scale, translate;
+	transition-duration: var(--motion-duration-fast);
+	transition-timing-function: var(--motion-ease-standard);
+
+	@media (hover: hover) {
+		:is(.group, [data-reveal-scope]):not(:hover, :focus-within)
+			&:not(:focus-within, [data-popup-open], [aria-expanded="true"]):not(
+				:has([data-popup-open], [aria-expanded="true"])
+			) {
+			opacity: 0;
+			translate: 0 var(--reveal-offset, 0);
+		}
+	}
+}
+
+/* Stretched link — one link that makes its whole item clickable, while the
+   item's OTHER controls stay separately clickable and focusable.
+
+   Wrapping a card or tile in an <a> is the instinct, and it is invalid the
+   moment the item holds a second link or a button (interactive content cannot
+   nest): browsers re-parent the inner one, screen readers announce the whole
+   card as one link label, and the inner control activates the outer link.
+   Instead the item's PRIMARY link — usually its title — grows a transparent
+   `::after` over the nearest positioned ancestor (give the item `relative`).
+   Pointer clicks anywhere on the item land on the link; the link is still one
+   tab stop with its own short name.
+
+   Raise every other control above it with `relative z-10` — a subtitle link, a
+   play button, an overflow menu. Text that should stay selectable needs the
+   same, or the overlay swallows the drag.
+
+   Focus draws on the overlay, not the text: a ring around the title alone
+   would say "this word is the link" when the whole item is. The ring follows
+   `--stretched-link-radius` (default 0), so set it to the item's corner.
+
+   Not with `hit-target` on the same element — both own `::after`. */
+@utility stretched-link {
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		/* 1, not 0: a positioned sibling later in source (a cover in an
+		   AspectBox) would otherwise paint over the overlay and eat its clicks. */
+		z-index: 1;
+		border-radius: var(--stretched-link-radius, 0);
+	}
+
+	&:focus-visible {
+		outline: none;
+	}
+
+	&:focus-visible::after {
+		outline: 2px solid var(--color-ring);
+		/* 4px, not the controls' 2px: the ring goes around a whole item whose
+		   text runs to its edge, and 2px left the words touching the ring. */
+		outline-offset: 4px;
+	}
+}
+
 /* Link underline — driven by the FONT'S OWN metrics, so it retunes itself when
    a theme swaps typeface (which Sable themes do). `from-font` takes the
    underline position and thickness the type designer shipped in the face,
@@ -1074,12 +1176,25 @@
    the line box. If you want an underline that GROWS on hover, that is a
    separate element (a positioned pseudo-element with a scaled transform), not
    this utility. Pair with `motion-interactive`, whose transition-property list
-   already covers `color`. */
+   already covers `color`.
+
+   It also carries the link's focus treatment, because a plain <a> has no
+   component to supply one and would otherwise fall back to the browser's
+   default ring in the UA colour. An OUTLINE, not the components' box-shadow
+   `ring`: outline follows each line fragment of a link that wraps, and it
+   survives forced-colors where box-shadow is dropped. Full-opacity `--ring`,
+   same floor as every component (sable docs accessibility → Focus). */
 @utility link-underline {
 	text-decoration-line: underline;
 	text-underline-position: from-font;
 	text-decoration-thickness: from-font;
 	text-decoration-skip-ink: auto;
+
+	&:focus-visible {
+		outline: 2px solid var(--color-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
 }
 
 /* ==========================================================================

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

@@ -56,7 +56,12 @@ interface SableThemeContextValue {
 }
 interface SableThemeProviderProps {
     children: ReactNode;
-    /** Initial color preference when uncontrolled and no stored value exists. @default "dark" */
+    /**
+     * Initial color preference when uncontrolled and no stored value exists.
+     * "system", so a first visit follows the visitor's OS. Dark is still the
+     * design's home mode; pass "dark" (or a preset's `defaultMode`) to open there.
+     * @default "system"
+     */
     defaultPreference?: SableThemePreference;
     /** Controlled color preference. */
     preference?: SableThemePreference;

package/dist/{chunk-NETUFI34.js → themes/_contract.js}

@@ -311,5 +311,17 @@ var TYPE_UI_TOKENS = [
   "type-ui-micro-size",
   "type-ui-micro-weight"
 ];
-
-export { ART_TOKENS, DENSITY_TOKENS, DERIVED_EDGE_TOKENS, LAYERING_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS };
+export {
+  ART_TOKENS,
+  DENSITY_TOKENS,
+  DERIVED_EDGE_TOKENS,
+  LAYERING_TOKENS,
+  MOTION_TOKENS,
+  RADIUS_TOKENS,
+  SEMANTIC_TOKENS,
+  TYPE_OVERLINE_TOKENS,
+  TYPE_REFINEMENT_TOKENS,
+  TYPE_SCALE_TOKENS,
+  TYPE_UI_TOKENS,
+  WORKSPACE_SURFACE_TOKENS
+};

package/dist/themes/atelier/index.js

@@ -1 +1,17 @@
-export { atelierTheme, atelier_default as default } from '../../chunk-C4Z3CF54.js';
+// src/themes/atelier/index.ts
+var atelierTheme = {
+  id: "atelier",
+  label: "Atelier",
+  deprecated: { replacement: "sable" },
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: '"Martian Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace'
+  }
+};
+var atelier_default = atelierTheme;
+export {
+  atelierTheme,
+  atelier_default as default
+};

package/dist/themes/contrast.js

@@ -0,0 +1,288 @@
+// 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 srgbToLinear(c) {
+  const v = clamp01(c);
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+}
+function compositeOver(fg, surface) {
+  if (fg.alpha >= 1) return fg.rgb;
+  const a = clamp01(fg.alpha);
+  return [0, 1, 2].map((i) => {
+    const top = linearToSrgb(fg.rgb[i]);
+    const bottom = linearToSrgb(surface[i]);
+    return srgbToLinear(top * a + bottom * (1 - a));
+  });
+}
+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 parseColor(value) {
+  return parseColorWithAlpha(value)?.rgb ?? null;
+}
+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 WCAG_HARD_FLOOR = 3;
+function evaluateContrast(ink, surface) {
+  const ratio = contrastRatio(ink, surface);
+  const lc = apcaLc(ink, surface);
+  const wcagRatioPasses = ratio >= CONTRAST_FLOOR;
+  if (wcagRatioPasses) return { ratio, lc, wcagRatioPasses, passes: true, basis: "wcag" };
+  if (Math.abs(lc) >= PERCEPTUAL_FLOOR && ratio >= WCAG_HARD_FLOOR) {
+    return { ratio, lc, wcagRatioPasses, passes: true, basis: "perceptual" };
+  }
+  return { ratio, lc, wcagRatioPasses, passes: false, basis: "none" };
+}
+var NON_TEXT_FLOOR = 3;
+var NON_TEXT_PERCEPTUAL_FLOOR = 30;
+var NON_TEXT_HARD_FLOOR = 2;
+var HAIRLINE_VISIBILITY_FLOOR = 1.1;
+var NON_TEXT_PAIRS = {
+  // The chrome hairlines, on every page surface a bounded element sits on.
+  border: { surfaces: ["background", "card", "popover", "muted"], tier: "hairline" },
+  "border-strong": {
+    surfaces: ["background", "card", "popover", "muted"],
+    tier: "hairline"
+  },
+  // A form control's outline IS the control's boundary — the case that names
+  // this whole defect class, since an invisible outline makes a text field
+  // indistinguishable from the surface it sits on.
+  input: { surfaces: ["background", "card", "popover", "muted"], tier: "hairline" },
+  // …and where the outline is the WHOLE control, the boundary is the 1.4.11 case
+  // with no softer reading: an unchecked checkbox at 1.4:1 is not a quiet
+  // checkbox, it is a missing one.
+  "control-border": { surfaces: ["background", "card", "popover", "muted"], tier: "control" },
+  ring: { surfaces: ["background", "card", "popover", "muted"], tier: "focus" },
+  // The sidebar family repeats the set against its own surface, which is exactly
+  // why it exists as a family (see token-docs: "tuned against `sidebar`").
+  "sidebar-border": { surfaces: ["sidebar"], tier: "hairline" },
+  "sidebar-ring": { surfaces: ["sidebar"], tier: "focus" }
+};
+function evaluateNonTextContrast(mark, surface, tier = "focus") {
+  const ratio = contrastRatio(mark, surface);
+  const lc = apcaLc(mark, surface);
+  const wcagRatioPasses = ratio >= NON_TEXT_FLOOR;
+  if (tier === "hairline") {
+    const passes = ratio >= HAIRLINE_VISIBILITY_FLOOR;
+    return { ratio, lc, wcagRatioPasses, passes, basis: wcagRatioPasses ? "wcag" : passes ? "visibility" : "none" };
+  }
+  if (tier === "control") {
+    return { ratio, lc, wcagRatioPasses, passes: wcagRatioPasses, basis: wcagRatioPasses ? "wcag" : "none" };
+  }
+  if (wcagRatioPasses) return { ratio, lc, wcagRatioPasses, passes: true, basis: "wcag" };
+  if (Math.abs(lc) >= NON_TEXT_PERCEPTUAL_FLOOR && ratio >= NON_TEXT_HARD_FLOOR) {
+    return { ratio, lc, wcagRatioPasses, passes: true, basis: "perceptual" };
+  }
+  return { ratio, lc, wcagRatioPasses, passes: false, basis: "none" };
+}
+var GAMUT_EPSILON = 1e-4;
+function isInSrgbGamut(rgb, epsilon = GAMUT_EPSILON) {
+  return rgb.every((c) => c >= -epsilon && c <= 1 + epsilon);
+}
+function gamutExcursion(rgb) {
+  return Math.max(0, ...rgb.map((c) => Math.max(-c, c - 1)));
+}
+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 };
+}
+export {
+  BRAND_FILLS,
+  CONTRAST_FLOOR,
+  GAMUT_EPSILON,
+  HAIRLINE_VISIBILITY_FLOOR,
+  LABELLED_FILLS,
+  LABEL_CONTRAST_RULE,
+  NON_TEXT_FLOOR,
+  NON_TEXT_HARD_FLOOR,
+  NON_TEXT_PAIRS,
+  NON_TEXT_PERCEPTUAL_FLOOR,
+  PERCEPTUAL_FLOOR,
+  STATUS_FILLS,
+  WCAG_HARD_FLOOR,
+  apcaLc,
+  checkLabelledFills,
+  compositeOver,
+  contrastRatio,
+  evaluateContrast,
+  evaluateNonTextContrast,
+  fitFillToInk,
+  gamutExcursion,
+  hexToLinearRgb,
+  inkFor,
+  inkPolarity,
+  isInSrgbGamut,
+  labelContrast,
+  linearRgbToOklch,
+  linearToSrgb,
+  luminance,
+  maxChromaAt,
+  oklchToLinearRgb,
+  parseColor,
+  parseColorWithAlpha,
+  srgbToLinear
+};

package/dist/themes/ember/ember.css

@@ -295,12 +295,12 @@
 [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-1: oklch(from var(--theme-art-brand, var(--primary)) 0.17 0.03 calc(h + 20));
+	--theme-art-2: var(--theme-art-brand, var(--primary));
+	--theme-art-3: oklch(from var(--theme-art-brand, var(--primary)) 0.68 0.21 calc(h + 15));
+	--theme-art-4: oklch(from var(--theme-art-brand, var(--primary)) 0.88 0.15 calc(h + 50));
+	--theme-art-5: oklch(from var(--theme-art-brand, var(--primary)) 0.38 0.15 calc(h - 5));
+	--theme-art-ground: oklch(from var(--theme-art-brand, 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.js

@@ -1 +1,16 @@
-export { ember_default as default, emberTheme } from '../../chunk-L4IEIQQA.js';
+// src/themes/ember/index.ts
+var emberTheme = {
+  id: "ember",
+  label: "Ember",
+  modes: ["dark", "light"],
+  defaultMode: "dark",
+  fonts: {
+    sans: '"Work Sans", sans-serif',
+    mono: '"DM Mono", ui-monospace, monospace'
+  }
+};
+var ember_default = emberTheme;
+export {
+  ember_default as default,
+  emberTheme
+};

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-kQszHYji.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-S0NVJs2Y.js';
 export { atelierTheme } from './atelier/index.js';
 export { default as emberTheme } from './ember/index.js';
 export { default as meridianTheme } from './meridian/index.js';

package/dist/themes/index.js

@@ -1,8 +1,3 @@
-export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from '../chunk-EFLC4NA3.js';
-export { prismTheme } from '../chunk-7MG4SHYX.js';
-export { verdantTheme } from '../chunk-KO3NAEBF.js';
-export { emberTheme } from '../chunk-L4IEIQQA.js';
-export { sableTheme } from '../chunk-EHH4MHO6.js';
-export { poppyTheme } from '../chunk-ADLLDWLW.js';
-export { meridianTheme } from '../chunk-K7RUHUGC.js';
-export { atelierTheme } from '../chunk-C4Z3CF54.js';
+// src/themes/index.ts
+export * from "./registry.js";
+export * from "./theme-provider.js";

package/dist/themes/meridian/index.js

@@ -1 +1,16 @@
-export { meridian_default as default, meridianTheme } from '../../chunk-K7RUHUGC.js';
+// src/themes/meridian/index.ts
+var meridianTheme = {
+  id: "meridian",
+  label: "Meridian",
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace'
+  }
+};
+var meridian_default = meridianTheme;
+export {
+  meridian_default as default,
+  meridianTheme
+};

package/dist/themes/poppy/index.js

@@ -1 +1,17 @@
-export { poppy_default as default, poppyTheme } from '../../chunk-ADLLDWLW.js';
+// src/themes/poppy/index.ts
+var poppyTheme = {
+  id: "poppy",
+  label: "Poppy",
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Albert Sans", ui-sans-serif, system-ui, sans-serif',
+    mono: '"Red Hat Mono", ui-monospace, monospace',
+    display: '"Unbounded", ui-sans-serif, system-ui, sans-serif'
+  }
+};
+var poppy_default = poppyTheme;
+export {
+  poppy_default as default,
+  poppyTheme
+};

package/dist/themes/prism/index.js

@@ -1 +1,17 @@
-export { prism_default as default, prismTheme } from '../../chunk-7MG4SHYX.js';
+// src/themes/prism/index.ts
+var prismTheme = {
+  id: "prism",
+  label: "Prism",
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Outfit", ui-sans-serif, system-ui, sans-serif',
+    mono: '"Roboto Mono", ui-monospace, monospace',
+    display: '"Playfair Display", ui-serif, Georgia, serif'
+  }
+};
+var prism_default = prismTheme;
+export {
+  prism_default as default,
+  prismTheme
+};

package/dist/themes/prism/prism.css

@@ -204,8 +204,8 @@
 	--theme-art-1: oklch(from var(--tone-edition) 0.83 0.1 h);
 	--theme-art-2: oklch(from var(--tone-collectible) 0.68 0.16 h);
 	--theme-art-3: oklch(from var(--tone-info) 0.82 0.09 h);
-	--theme-art-4: oklch(from var(--primary) 0.55 0.2 h);
-	--theme-art-ground: oklch(from var(--primary) 0.35 0.14 h);
+	--theme-art-4: oklch(from var(--theme-art-brand, var(--primary)) 0.55 0.2 h);
+	--theme-art-ground: oklch(from var(--theme-art-brand, var(--primary)) 0.35 0.14 h);
 	--theme-art-warp: 0.45;
 	--theme-art-softness: 1;
 	--theme-art-grain: 0;