@sableui/react 0.14.0 → 0.16.0

package/dist/styles.css

@@ -86,6 +86,16 @@
 	--color-border-strong: var(--border-strong);
 	--color-border-floating: var(--border-floating);
 	--color-input: var(--input);
+	--color-field: var(--field);
+	--color-field-border: var(--field-border);
+	--color-shell-ground: var(--shell-ground);
+	--color-destructive-mark: var(--destructive-mark);
+	--color-success-mark: var(--success-mark);
+	--color-tone-warning-mark: var(--tone-warning-mark);
+	--color-tone-info-mark: var(--tone-info-mark);
+	--color-tone-1-mark: var(--tone-1-mark);
+	--color-tone-2-mark: var(--tone-2-mark);
+	--color-tone-3-mark: var(--tone-3-mark);
 	--color-control-border: var(--control-border);
 	--color-ring: var(--ring);
 
@@ -378,6 +388,33 @@
 	   and reads as a faint lit edge in dark mode, where shadows barely show. */
 	--border-floating: var(--theme-border-floating, color-mix(in oklch, transparent 92%, var(--foreground)));
 
+	/* The text field: its fill and its outline. Outlined on the card by default;
+	   a theme fills its fields instead with `--theme-field: var(--muted)` and
+	   `--theme-field-border: transparent`. Every field reads the pair through
+	   lib/field-shell, so one choice restyles them all. */
+	--field: var(--theme-field, var(--card));
+	--field-border: var(--theme-field-border, var(--input));
+
+	/* The ground of an inset app frame (`AppShell frame="inset"`): the rail and
+	   the gap around the raised main panel. One step off the rail toward its ink,
+	   because most themes paint the rail the page's colour and the panel would
+	   otherwise sit on its own colour. */
+	--shell-ground: var(--theme-shell-ground, color-mix(in oklch, var(--sidebar) 97%, var(--sidebar-foreground)));
+
+	/* Status and tone colours at graphic strength: a meter's fill, a segmented
+	   bar, a status dot, a chart series, a soft tint. The label fill is dark
+	   enough for white ink; a mark carries no ink, so it is the same hue lifted
+	   and saturated (MARK_TOKENS in themes/_contract.ts). Every bundled theme
+	   tunes its own through the hooks; this derivation is the fallback for a
+	   preset that does not. */
+	--destructive-mark: var(--theme-destructive-mark, oklch(from var(--destructive) max(l, 0.62) calc(c * 1.25) h));
+	--success-mark: var(--theme-success-mark, oklch(from var(--success) max(l, 0.68) calc(c * 1.25) h));
+	--tone-warning-mark: var(--theme-tone-warning-mark, oklch(from var(--tone-warning) max(l, 0.71) calc(c * 1.25) h));
+	--tone-info-mark: var(--theme-tone-info-mark, oklch(from var(--tone-info) max(l, 0.63) calc(c * 1.25) h));
+	--tone-1-mark: var(--theme-tone-1-mark, oklch(from var(--tone-1) max(l, 0.62) calc(c * 1.25) h));
+	--tone-2-mark: var(--theme-tone-2-mark, oklch(from var(--tone-2) max(l, 0.6) calc(c * 1.25) h));
+	--tone-3-mark: var(--theme-tone-3-mark, oklch(from var(--tone-3) max(l, 0.66) calc(c * 1.25) h));
+
 	/* The Switch knob when OFF: light in BOTH modes, like every physical toggle.
 	   It used to be `--background`, which in a dark theme is a near-black knob on
 	   a dark track (well under 3:1). */
@@ -848,6 +885,24 @@
 	}
 }
 
+/* ==========================================================================
+   Search matches — the paint behind `useMatchHighlight` (lib/use-match-highlight),
+   which Combobox and CommandMenu run on their rows and a consumer can run on any
+   results list. The CSS Custom Highlight API marks text Ranges, so nothing is
+   wrapped in a <mark> and React's text nodes stay as rendered.
+
+   On `highlight` because that token exists for exactly this ("search hits" in
+   its intent). A tint of it, not the solid pair: a solid fill behind a few
+   letters is what a text selection looks like, and a list where every row
+   seems half-selected reads as a bug. The tint leaves the row's own ink, so
+   contrast stays the row's. Where the API is missing no ranges are registered
+   and this rule matches nothing.
+   ========================================================================== */
+
+::highlight(sable-match) {
+	background-color: color-mix(in oklab, var(--highlight) 36%, transparent);
+}
+
 /* ==========================================================================
    UI tier — the WORKSPACE register's chrome typography. A separate ramp from the
    six page tiers above, on purpose.
@@ -1995,6 +2050,51 @@
 	background-position: 0 0;
 }
 
+/* texture-dither — a faint field of tiny squares that dissolves, the pixel /
+   halftone texture products lay over the top of a content area or behind an
+   empty-state heading. Pure CSS and static: the dots are the element's own
+   background, cut out by a mask of a small pixel tile intersected with a fade.
+
+   The tile is 12×12 cells of one square each on a 2-unit pitch, about 40%
+   filled at random (no runs of three, no 2×2 clumps) and a third of the dots at
+   half strength, so it reads as dither rather than as a grid of dots. It is a
+   MASK, so the SVG carries no colour of its own: the dots paint in
+   `--border-strong`, the structural-divider ink, which every theme tunes for
+   both modes — faint on a light page, a soft grey on a dark one.
+
+   Decoration only: put it on its own absolutely-positioned, aria-hidden element
+   (it sets pointer-events: none but no position, so it never takes layout),
+   first in a `relative isolate` parent and at -z-10, so the content after it
+   paints on top without a z-index of its own:
+
+     <div class="relative isolate">
+       <div aria-hidden class="texture-dither absolute inset-x-0 top-0 -z-10 h-40" />
+       …content…
+     </div>
+
+   Three hooks, all optional, read with fallbacks (the checkerboard pattern):
+     --dither-fade   the fade's direction, any linear-gradient side or angle
+                     (default `to bottom`: dense at the top, gone at the bottom)
+     --dither-size   the tile (default 48px → 2px squares on a 4px pitch)
+     --dither-color  the dot ink (default var(--border-strong))
+
+   Not `bg-dither`, for the reason `checkerboard` is not `bg-checkerboard`: a
+   `bg-` name joins tailwind-merge's background group and would evict, or be
+   evicted by, a real colour class. */
+@utility texture-dither {
+	pointer-events: none;
+	background-color: var(--dither-color, var(--border-strong));
+	--dither-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM8 0h1v1H8zM16 0h1v1H16zM2 2h1v1H2zM6 2h1v1H6zM14 2h1v1H14zM6 4h1v1H6zM10 4h1v1H10zM22 4h1v1H22zM2 6h1v1H2zM8 6h1v1H8zM14 6h1v1H14zM20 6h1v1H20zM2 8h1v1H2zM12 8h1v1H12zM18 8h1v1H18zM20 8h1v1H20zM12 10h1v1H12zM8 12h1v1H8zM2 14h1v1H2zM6 14h1v1H6zM16 14h1v1H16zM18 14h1v1H18zM0 16h1v1H0zM4 16h1v1H4zM6 16h1v1H6zM22 16h1v1H22zM10 18h1v1H10zM12 18h1v1H12zM16 18h1v1H16zM4 20h1v1H4zM20 20h1v1H20zM22 20h1v1H22zM0 22h1v1H0zM8 22h1v1H8zM12 22h1v1H12zM14 22h1v1H14zM20 22h1v1H20z'/%3E%3Cpath fill-opacity='.5' d='M0 0h1v1H0zM22 0h1v1H22zM20 2h1v1H20zM8 8h1v1H8zM14 8h1v1H14zM0 10h1v1H0zM4 10h1v1H4zM16 10h1v1H16zM22 10h1v1H22zM2 12h1v1H2zM4 12h1v1H4zM10 12h1v1H10zM18 12h1v1H18zM10 14h1v1H10zM0 18h1v1H0zM18 18h1v1H18zM10 20h1v1H10zM16 20h1v1H16zM18 22h1v1H18z'/%3E%3C/svg%3E");
+	-webkit-mask-image: var(--dither-tile), linear-gradient(var(--dither-fade, to bottom), rgb(0 0 0), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0));
+	mask-image: var(--dither-tile), linear-gradient(var(--dither-fade, to bottom), rgb(0 0 0), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0));
+	-webkit-mask-size: var(--dither-size, 48px) var(--dither-size, 48px), 100% 100%;
+	mask-size: var(--dither-size, 48px) var(--dither-size, 48px), 100% 100%;
+	-webkit-mask-repeat: repeat, no-repeat;
+	mask-repeat: repeat, no-repeat;
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+}
+
 /* The default transition for interactive chrome — hover/focus/selection colour
    shifts plus the press/slide transforms. The single transition declarer for
    interactive controls: it lists scale + translate too, so `motion-press` and
@@ -2475,6 +2575,147 @@
 		var(--motion-ease-standard), var(--motion-ease-standard), var(--motion-ease-standard);
 }
 
+/* Bloom — a small glyph landing in its "on" state: a liked heart, a starred
+   item, a toast's status icon. It grows from nothing past its size and settles
+   back, the amplitude a 16px glyph needs to read as an event. Surfaces never
+   bloom: a dialog that overshot 20% would be a lurch, which is why the overlay
+   recipes travel from 0.96. Size is what sets the amplitude.
+
+   A keyframe animation, so it plays whenever the element MOUNTS: remount the
+   glyph (a changing `key`) to replay it on each "on", and leave it off the
+   resting state so a page that loads with a liked post does not bloom every
+   heart. --motion-bloom-delay holds the glyph at nothing first (a raw delay;
+   the recipe scales it), so a ring or burst can lead. Expressive: "subtle"
+   and reduced motion land the glyph at once. Put it on a wrapper around a
+   glyph that carries motion-press or motion-interactive: an animation holds
+   `scale` while it runs. */
+@keyframes sable-bloom {
+	0% {
+		scale: 0;
+	}
+	55% {
+		scale: 1.2;
+	}
+	80% {
+		scale: 0.95;
+	}
+	100% {
+		scale: 1;
+	}
+}
+@utility motion-bloom {
+	animation: sable-bloom calc(var(--motion-duration-slower) * var(--motion-expressive, 1))
+		var(--motion-ease-decelerate)
+		calc(var(--motion-bloom-delay, 0ms) * var(--motion-scale, 1) * var(--motion-expressive, 1))
+		backwards;
+}
+
+/* Burst — the follow-through behind a bloom, drawn by <Burst> (src/motion): a
+   disc that hollows into a ring and shifts colour, then dots thrown outward
+   that shrink as they go. Plain classes, not utilities: the component owns the
+   markup and the per-dot angles. Sized by --burst-size (the ring's diameter,
+   about twice the glyph's). Coloured from the themed palette through
+   `data-palette` scopes, never a step: the ring blooms in currentColor and
+   fades into its scope's dot colour, and each dot carries a family of its
+   own. Every duration is expressive, so under
+   "subtle" or reduced motion it ends on its invisible last frame at once; the
+   component also renders nothing then. */
+.sable-burst {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+/* Centred on the glyph by `translate`, which applies before the animated
+   `scale` and `transform`, so each piece grows and travels from the centre.
+   (A grid cell sized itself to the 2x ring and pinned it off-centre.) */
+.sable-burst > * {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	translate: -50% -50%;
+}
+@keyframes sable-burst-ring {
+	0% {
+		scale: 0.2;
+		border-width: calc(var(--burst-size) / 2);
+		border-color: currentColor;
+		opacity: 1;
+	}
+	45% {
+		scale: 1;
+		border-width: calc(var(--burst-size) / 2);
+	}
+	100% {
+		scale: 1.1;
+		border-width: 0;
+		border-color: var(--palette-dot, currentColor);
+		opacity: 0;
+	}
+}
+.sable-burst-ring {
+	width: var(--burst-size);
+	height: var(--burst-size);
+	border-radius: 9999px;
+	border-style: solid;
+	border-width: 0;
+	opacity: 0;
+	animation: sable-burst-ring calc(var(--motion-duration-slower) * var(--motion-expressive, 1))
+		var(--motion-ease-decelerate) forwards;
+}
+@keyframes sable-burst-dot {
+	0% {
+		opacity: 1;
+		transform: rotate(var(--burst-dot-angle)) translateX(calc(var(--burst-size) * 0.4)) scale(1);
+	}
+	100% {
+		opacity: 1;
+		transform: rotate(var(--burst-dot-angle)) translateX(calc(var(--burst-size) * var(--burst-dot-reach)))
+			scale(0);
+	}
+}
+.sable-burst-dot {
+	width: var(--burst-dot-size);
+	height: var(--burst-dot-size);
+	border-radius: 9999px;
+	background-color: var(--palette-dot, currentColor);
+	opacity: 0;
+	/* Thrown as the ring opens, not with it. */
+	animation: sable-burst-dot calc(var(--motion-duration-slower) * 1.3 * var(--motion-expressive, 1))
+		var(--motion-ease-decelerate) calc(var(--motion-duration-fast) * var(--motion-expressive, 1)) forwards;
+}
+/* A thrown glyph (Burst's `particle`) instead of a disc: the emoji itself,
+   sized by the same --burst-dot-size, so a reaction sprays copies of what was
+   chosen. Counter-rotated on its way out so it travels upright, and it fades
+   at the end of its flight rather than shrinking to a point. */
+@keyframes sable-burst-particle {
+	0% {
+		opacity: 1;
+		transform: rotate(var(--burst-dot-angle)) translateX(calc(var(--burst-size) * 0.3))
+			rotate(calc(var(--burst-dot-angle) * -1)) scale(0.4);
+	}
+	60% {
+		opacity: 1;
+		transform: rotate(var(--burst-dot-angle)) translateX(calc(var(--burst-size) * var(--burst-dot-reach) * 0.9))
+			rotate(calc(var(--burst-dot-angle) * -1)) scale(1);
+	}
+	100% {
+		opacity: 0;
+		transform: rotate(var(--burst-dot-angle)) translateX(calc(var(--burst-size) * var(--burst-dot-reach)))
+			rotate(calc(var(--burst-dot-angle) * -1)) scale(0.7);
+	}
+}
+.sable-burst-dot[data-particle] {
+	display: grid;
+	place-items: center;
+	width: auto;
+	height: auto;
+	border-radius: 0;
+	background-color: transparent;
+	font-size: var(--burst-dot-size);
+	line-height: 1;
+	animation-name: sable-burst-particle;
+}
+
 /* --------------------------------------------------------------------------
    Loader recipes — looping indicators. Durations scale with --motion-scale, so
    the policy switch freezes them to a static first frame.

package/dist/{theme-provider-CdSicAad.d.ts → theme-provider-BydfM5Z0.d.ts}

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

package/dist/themes/_contract.js

@@ -312,6 +312,17 @@ var PALETTE_SLOT_TOKENS = [
   "palette-solid-ink"
 ];
 var DERIVED_EDGE_TOKENS = ["border-floating"];
+var FIELD_TOKENS = ["field", "field-border"];
+var APP_SHELL_TOKENS = ["shell-ground"];
+var MARK_TOKENS = [
+  "destructive-mark",
+  "success-mark",
+  "tone-warning-mark",
+  "tone-info-mark",
+  "tone-1-mark",
+  "tone-2-mark",
+  "tone-3-mark"
+];
 var TYPE_UI_TOKENS = [
   "type-ui-md-size",
   "type-ui-md-weight",
@@ -323,10 +334,13 @@ var TYPE_UI_TOKENS = [
   "type-ui-micro-weight"
 ];
 export {
+  APP_SHELL_TOKENS,
   ART_TOKENS,
   DENSITY_TOKENS,
   DERIVED_EDGE_TOKENS,
+  FIELD_TOKENS,
   LAYERING_TOKENS,
+  MARK_TOKENS,
   MOTION_TOKENS,
   PALETTE_SLOT_TOKENS,
   PALETTE_TOKENS,

package/dist/themes/atelier/atelier.css

@@ -128,6 +128,15 @@
 	--tone-1-foreground: #ffffff;
 	--tone-info-foreground: #ffffff;
 	--tone-warning-foreground: #ffffff;
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.234 22.0);
+	--theme-success-mark: oklch(70.0% 0.130 173.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.156 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.130 250.0);
+	--theme-tone-1-mark: oklch(70.0% 0.117 173.0);
+	--theme-tone-2-mark: oklch(62.0% 0.143 300.0);
+	--theme-tone-3-mark: oklch(60.0% 0.000 0.0);
 	--highlight-foreground: #000000;
 	--overlay: oklch(7% 0 0 / 0.55);
 	--overlay-foreground: #ffffff;
@@ -211,6 +220,15 @@
 	--tone-1-foreground: oklch(13% 0 0);
 	--tone-info-foreground: oklch(13% 0 0);
 	--tone-warning-foreground: oklch(13% 0 0);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.218 22.0);
+	--theme-success-mark: oklch(74.0% 0.137 173.0);
+	--theme-tone-warning-mark: oklch(80.0% 0.129 52.0);
+	--theme-tone-info-mark: oklch(76.0% 0.114 250.0);
+	--theme-tone-1-mark: oklch(76.0% 0.114 173.0);
+	--theme-tone-2-mark: oklch(76.0% 0.137 300.0);
+	--theme-tone-3-mark: oklch(80.0% 0.000 0.0);
 	--highlight-foreground: #ffffff;
 	--overlay: oklch(0% 0 0 / 0.7);
 	--overlay-foreground: #ffffff;

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

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

package/dist/themes/contrast.js

@@ -127,7 +127,16 @@ var NON_TEXT_PAIRS = {
   // 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" }
+  "sidebar-ring": { surfaces: ["sidebar"], tier: "focus" },
+  // Status and tone colours at graphic strength, on the surfaces a meter, dot
+  // or chart sits on. Bundled themes declare these as `--theme-*-mark` hooks.
+  "destructive-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "success-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-warning-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-info-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-1-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-2-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-3-mark": { surfaces: ["background", "card"], tier: "graphic" }
 };
 function evaluateNonTextContrast(mark, surface, tier = "focus") {
   const ratio = contrastRatio(mark, surface);
@@ -140,6 +149,10 @@ function evaluateNonTextContrast(mark, surface, tier = "focus") {
   if (tier === "control") {
     return { ratio, lc, wcagRatioPasses, passes: wcagRatioPasses, basis: wcagRatioPasses ? "wcag" : "none" };
   }
+  if (tier === "graphic") {
+    const passes = ratio >= NON_TEXT_HARD_FLOOR;
+    return { ratio, lc, wcagRatioPasses, passes, basis: wcagRatioPasses ? "wcag" : passes ? "visibility" : "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" };
@@ -198,6 +211,38 @@ function inkPolarity(color, inks) {
   };
   return inks.reduce((best, ink) => cost(ink) < cost(best) ? ink : best);
 }
+var MARK_FLOOR = NON_TEXT_HARD_FLOOR;
+var MARK_NEUTRAL_CHROMA = 0.03;
+function markLightness(h) {
+  const hue = (h % 360 + 360) % 360;
+  if (hue < 38 || hue >= 350) return 0.62;
+  if (hue < 70) return 0.71;
+  if (hue < 110) return 0.78;
+  if (hue < 190) return 0.7;
+  if (hue < 268) return 0.63;
+  if (hue < 300) return 0.6;
+  return 0.62;
+}
+function markFor(fill, mode, surfaces = []) {
+  const neutral = fill.c < MARK_NEUTRAL_CHROMA;
+  const hue = (fill.h % 360 + 360) % 360;
+  let l = fill.l;
+  if (mode === "light") l = neutral ? Math.max(l, 0.6) : Math.max(l, markLightness(hue));
+  else if (!neutral && (hue < 38 || hue >= 350)) l = Math.max(l, 0.65);
+  const lift = mode === "light" ? 1.3 : 1.15;
+  const chromaAt = (lightness) => {
+    if (neutral) return fill.c;
+    const max = maxChromaAt(lightness, fill.h);
+    return Math.max(Math.min(fill.c, max), Math.min(max * FILL_GAMUT_SAFETY, fill.c * lift));
+  };
+  let mark = { ...fill, l, c: chromaAt(l) };
+  const reads = (m) => surfaces.every((s) => contrastRatio(linearOf(m), linearOf(s)) >= MARK_FLOOR);
+  for (let i = 0; i < 60 && !reads(mark); i++) {
+    l = Math.min(0.98, Math.max(0.05, l + (mode === "light" ? -0.01 : 0.01)));
+    mark = { ...mark, l, c: neutral ? fill.c : Math.min(mark.c, maxChromaAt(l, fill.h)) };
+  }
+  return mark;
+}
 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);
@@ -257,6 +302,7 @@ export {
   HAIRLINE_VISIBILITY_FLOOR,
   LABELLED_FILLS,
   LABEL_CONTRAST_RULE,
+  MARK_FLOOR,
   NON_TEXT_FLOOR,
   NON_TEXT_HARD_FLOOR,
   NON_TEXT_PAIRS,
@@ -280,6 +326,7 @@ export {
   linearRgbToOklch,
   linearToSrgb,
   luminance,
+  markFor,
   maxChromaAt,
   oklchToLinearRgb,
   parseColor,

package/dist/themes/ember/ember.css

@@ -184,6 +184,15 @@
 	--tone-1-foreground: oklch(100% 0 0);
 	--tone-info-foreground: oklch(100% 0 0);
 	--tone-warning-foreground: oklch(100% 0 0);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.221 25.0);
+	--theme-success-mark: oklch(70.0% 0.130 165.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.156 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.169 250.0);
+	--theme-tone-1-mark: oklch(62.0% 0.195 309.0);
+	--theme-tone-2-mark: oklch(60.0% 0.182 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.091 130.0);
 	--highlight-foreground: oklch(100% 0 0);
 	--overlay: oklch(14.1% 0.018 70.5);
 	--overlay-foreground: oklch(100% 0 0);
@@ -272,6 +281,15 @@
 	--tone-1-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);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.184 25.0);
+	--theme-success-mark: oklch(74.0% 0.137 165.0);
+	--theme-tone-warning-mark: oklch(78.0% 0.149 60.0);
+	--theme-tone-info-mark: oklch(75.5% 0.126 250.0);
+	--theme-tone-1-mark: oklch(68.0% 0.161 309.0);
+	--theme-tone-2-mark: oklch(70.0% 0.137 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.103 130.0);
 	--highlight-foreground: oklch(100% 0 0);
 	--overlay: oklch(14.1% 0.018 70.5);
 	--overlay-foreground: oklch(100% 0 0);

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.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-CdSicAad.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-BydfM5Z0.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-CkqXDVww.js';
+import '../_contract-CDa9-NdB.js';

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

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

package/dist/themes/meridian/meridian.css

@@ -166,6 +166,15 @@
 	--tone-1-foreground: oklch(94.6% 0.0083 91.48);
 	--tone-info-foreground: oklch(94.6% 0.0083 91.48);
 	--tone-warning-foreground: oklch(94.6% 0.0083 91.48);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.246 25.0);
+	--theme-success-mark: oklch(70.0% 0.130 165.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.156 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.169 250.0);
+	--theme-tone-1-mark: oklch(62.0% 0.195 309.0);
+	--theme-tone-2-mark: oklch(60.0% 0.182 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.091 130.0);
 	--highlight-foreground: oklch(99% 0.004 91.5);
 	--overlay: oklch(22.46% 0.0094 107.13);
 	--overlay-foreground: oklch(94.3% 0.0042 91.45);
@@ -255,6 +264,15 @@
 	--tone-1-foreground: oklch(22.46% 0.0094 107.13);
 	--tone-info-foreground: oklch(22.46% 0.0094 107.13);
 	--tone-warning-foreground: oklch(22.46% 0.0094 107.13);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.231 25.0);
+	--theme-success-mark: oklch(75.5% 0.137 165.0);
+	--theme-tone-warning-mark: oklch(78.0% 0.149 60.0);
+	--theme-tone-info-mark: oklch(76.5% 0.122 250.0);
+	--theme-tone-1-mark: oklch(68.0% 0.161 309.0);
+	--theme-tone-2-mark: oklch(70.0% 0.137 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.103 130.0);
 	--highlight-foreground: oklch(99% 0.004 91.5);
 	--overlay: oklch(22.46% 0.0094 107.13);
 	--overlay-foreground: oklch(94.3% 0.0042 91.45);

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const poppyTheme: ThemeManifest;

package/dist/themes/poppy/poppy.css

@@ -97,6 +97,15 @@
 	--tone-1-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-info-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-warning-foreground: oklch(100.00000% 0.000000 89.8756);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.238 13.5);
+	--theme-success-mark: oklch(70.0% 0.111 159.0);
+	--theme-tone-warning-mark: oklch(76.0% 0.132 75.1);
+	--theme-tone-info-mark: oklch(63.0% 0.152 253.8);
+	--theme-tone-1-mark: oklch(62.0% 0.196 344.9);
+	--theme-tone-2-mark: oklch(62.0% 0.208 301.6);
+	--theme-tone-3-mark: oklch(63.0% 0.065 265.7);
 	--highlight-foreground: oklch(27.91553% 0.070219 323.8141);
 	--overlay: oklch(23.10300% 0.056738 321.2844);
 	--overlay-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -198,6 +207,15 @@
 	--tone-1-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-info-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-warning-foreground: oklch(27.91553% 0.070219 323.8141);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(80.1% 0.118 6.9);
+	--theme-success-mark: oklch(83.1% 0.092 158.2);
+	--theme-tone-warning-mark: oklch(86.6% 0.136 86.7);
+	--theme-tone-info-mark: oklch(85.2% 0.074 252.9);
+	--theme-tone-1-mark: oklch(82.6% 0.111 343.4);
+	--theme-tone-2-mark: oklch(81.8% 0.108 306.5);
+	--theme-tone-3-mark: oklch(82.6% 0.068 270.3);
 }
 
 /* Art direction for generated imagery (GradientArt; ART_TOKENS in

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const prismTheme: ThemeManifest;

package/dist/themes/prism/prism.css

@@ -97,6 +97,15 @@
 	--tone-1-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-info-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-warning-foreground: oklch(100.00000% 0.000000 89.8756);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.238 19.5);
+	--theme-success-mark: oklch(70.0% 0.105 166.9);
+	--theme-tone-warning-mark: oklch(75.0% 0.134 73.8);
+	--theme-tone-info-mark: oklch(63.0% 0.181 259.8);
+	--theme-tone-1-mark: oklch(62.0% 0.183 343.5);
+	--theme-tone-2-mark: oklch(60.0% 0.218 300.0);
+	--theme-tone-3-mark: oklch(63.0% 0.056 257.4);
 	--highlight-foreground: oklch(26.55994% 0.047330 255.4106);
 	--overlay: oklch(21.14912% 0.029163 257.5277);
 	--overlay-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -194,6 +203,15 @@
 	--tone-1-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-info-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-warning-foreground: oklch(25.20350% 0.047984 259.9119);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(79.5% 0.121 8.7);
+	--theme-success-mark: oklch(82.2% 0.098 165.8);
+	--theme-tone-warning-mark: oklch(84.7% 0.124 84.2);
+	--theme-tone-info-mark: oklch(80.6% 0.097 259.5);
+	--theme-tone-1-mark: oklch(80.4% 0.117 341.7);
+	--theme-tone-2-mark: oklch(77.3% 0.135 301.0);
+	--theme-tone-3-mark: oklch(82.0% 0.053 256.5);
 }
 
 /* Art direction for generated imagery (GradientArt; ART_TOKENS in

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.js';
 
 /**
  * Sable — the default theme. Concrete token values live in

package/dist/themes/sable/sable.css

@@ -280,6 +280,15 @@
 	--tone-2-foreground: var(--zinc-50);
 	--tone-1-foreground: var(--zinc-50);
 	--tone-warning-foreground: var(--zinc-50);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.244 22.0);
+	--theme-success-mark: oklch(70.0% 0.131 173.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.169 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.178 250.0);
+	--theme-tone-1-mark: oklch(62.0% 0.269 309.0);
+	--theme-tone-2-mark: oklch(60.0% 0.227 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.131 173.0);
 	--tone-info-foreground: var(--zinc-50);
 	--highlight-foreground: var(--zinc-50);
 
@@ -463,6 +472,15 @@
 	--tone-2-foreground: var(--zinc-950);
 	--tone-1-foreground: var(--zinc-950);
 	--tone-warning-foreground: var(--zinc-950);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.231 25.0);
+	--theme-success-mark: oklch(78.0% 0.157 168.0);
+	--theme-tone-warning-mark: oklch(82.0% 0.132 65.0);
+	--theme-tone-info-mark: oklch(76.0% 0.144 235.0);
+	--theme-tone-1-mark: oklch(62.0% 0.295 318.0);
+	--theme-tone-2-mark: oklch(72.0% 0.151 285.0);
+	--theme-tone-3-mark: oklch(78.0% 0.157 168.0);
 	--tone-info-foreground: var(--zinc-950);
 	--highlight-foreground: var(--zinc-50);
 	--overlay: var(--zinc-950);

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

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