@sableui/react 0.5.0 → 0.6.0

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

package/dist/themes/meridian/meridian.css

@@ -143,14 +143,18 @@
 	--accent: oklch(57.5% 0.2 31.5);
 	--accent-foreground: oklch(99% 0.004 91.5);
 	--destructive: oklch(48% 0.2 25);
+	--destructive-text: oklch(48% 0.2 25);
 	--destructive-foreground: oklch(94.6% 0.0083 91.48);
 	--success: oklch(43% 0.1 165);
+	--success-text: oklch(43% 0.1 165);
 	--success-foreground: oklch(94.6% 0.0083 91.48);
 	--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(57.5% 0.2 31.5);
 	/* Ember as TEXT (eyebrow numbers, arrows). The fill ember carries white ink
 	   but is too light to be read as ink itself (4.1:1 on the sand); this is the
@@ -230,15 +234,20 @@
 	--secondary-foreground: oklch(94.3% 0.0042 91.45);
 	--accent: oklch(57.5% 0.2 31.5);
 	--accent-foreground: oklch(99% 0.004 91.5);
-	--destructive: oklch(66% 0.21 25);
-	--destructive-foreground: oklch(22.46% 0.0094 107.13);
-	--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(55% 0.21 25);
+	--destructive-text: oklch(78.5% 0.122 25);
+	--destructive-foreground: oklch(94.6% 0.0083 91.48);
+	--success: oklch(75.5% 0.12 165);
+	--success-text: oklch(75.5% 0.12 165);
 	--success-foreground: oklch(22.46% 0.0094 107.13);
 	--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(76.5% 0.11 250);
+	--tone-info-text: oklch(76.5% 0.11 250);
 	--tone-warning: oklch(78% 0.13 60);
+	--tone-warning-text: oklch(78% 0.13 60);
 	--highlight: oklch(57.5% 0.2 31.5);
 	--meridian-ember-ink: oklch(72% 0.17 33); /* 6.4:1 on the dark ground */
 	--tone-standard-foreground: oklch(22.46% 0.0094 107.13);
@@ -258,3 +267,23 @@
 	--sidebar-border: oklch(34.69% 0.0186 98.75);
 	--sidebar-ring: oklch(65.11% 0.2063 32.56);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Grainy monochrome photographic grounds (art-direction.md): soft
+   mid-grey tones, slightly lifted blacks, film grain — and none of the orange
+   accent, which belongs to typography and controls. Greys carry the ink's
+   warm cast.
+   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="meridian"],
+[data-sable-theme="meridian"] .dark,
+[data-sable-theme="meridian"] .light {
+	--theme-art-1: oklch(from var(--foreground) 0.88 0.008 h);
+	--theme-art-2: oklch(from var(--foreground) 0.62 0.006 h);
+	--theme-art-3: oklch(from var(--foreground) 0.38 0.008 h);
+	--theme-art-4: oklch(from var(--foreground) 0.74 0.006 h);
+	--theme-art-ground: oklch(from var(--foreground) 0.28 0.008 h);
+	--theme-art-warp: 0.4;
+	--theme-art-softness: 0.92;
+	--theme-art-grain: 0.55;
+}

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

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

package/dist/themes/poppy/poppy.css

@@ -79,14 +79,18 @@
 	--accent: oklch(87.83223% 0.046910 333.7803);
 	--accent-foreground: oklch(27.91553% 0.070219 323.8141);
 	--destructive: oklch(51.71923% 0.183122 13.5471);
+	--destructive-text: oklch(51.71923% 0.183122 13.5471);
 	--destructive-foreground: oklch(100.00000% 0.000000 89.8756);
 	--success: oklch(44.82304% 0.085811 158.9570);
+	--success-text: oklch(44.82304% 0.085811 158.9570);
 	--success-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-standard: oklch(45.04846% 0.050543 265.7140);
 	--tone-collectible: oklch(44.74226% 0.160756 301.6122);
 	--tone-edition: oklch(48.37678% 0.151106 344.8805);
 	--tone-info: oklch(47.10428% 0.117665 253.7666);
+	--tone-info-text: oklch(47.10428% 0.117665 253.7666);
 	--tone-warning: oklch(48.46763% 0.102195 75.1153);
+	--tone-warning-text: oklch(48.46763% 0.102195 75.1153);
 	--highlight: oklch(86.64637% 0.118528 86.6791);
 	--tone-standard-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-collectible-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -162,14 +166,18 @@
 	--accent: oklch(45.76059% 0.076204 319.6398);
 	--accent-foreground: oklch(96.99788% 0.031195 84.5922);
 	--destructive: oklch(80.09751% 0.118613 6.8786);
+	--destructive-text: oklch(80.09751% 0.118613 6.8786);
 	--destructive-foreground: oklch(27.91553% 0.070219 323.8141);
 	--success: oklch(83.08052% 0.080357 158.1865);
+	--success-text: oklch(83.08052% 0.080357 158.1865);
 	--success-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-standard: oklch(82.64273% 0.059760 270.2687);
 	--tone-collectible: oklch(81.83406% 0.094036 306.4836);
 	--tone-edition: oklch(82.56509% 0.096677 343.4480);
 	--tone-info: oklch(85.19509% 0.074997 252.9332);
+	--tone-info-text: oklch(85.19509% 0.074997 252.9332);
 	--tone-warning: oklch(86.64637% 0.118528 86.6791);
+	--tone-warning-text: oklch(86.64637% 0.118528 86.6791);
 	--highlight: oklch(86.64637% 0.118528 86.6791);
 	--highlight-foreground: oklch(27.91553% 0.070219 323.8141);
 	--overlay: oklch(13.55719% 0.032037 309.1234);
@@ -188,3 +196,23 @@
 	--tone-info-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-warning-foreground: oklch(27.91553% 0.070219 323.8141);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Playful: candy colours in crisp, wobbly blobs — sunny yellow,
+   bubblegum, grape, sky and a mint the palette lacks. Low softness keeps each
+   blob its own colour instead of melting into one.
+   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="poppy"],
+[data-sable-theme="poppy"] .dark,
+[data-sable-theme="poppy"] .light {
+	--theme-art-1: oklch(from var(--highlight) 0.88 0.15 h);
+	--theme-art-2: oklch(from var(--tone-edition) 0.72 0.19 h);
+	--theme-art-3: oklch(from var(--tone-collectible) 0.64 0.2 h);
+	--theme-art-4: oklch(from var(--tone-info) 0.76 0.13 h);
+	--theme-art-5: oklch(0.85 0.12 168);
+	--theme-art-ground: oklch(from var(--tone-collectible) 0.45 0.16 h);
+	--theme-art-warp: 1;
+	--theme-art-softness: 0.5;
+	--theme-art-grain: 0;
+}

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

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

package/dist/themes/prism/prism.css

@@ -79,14 +79,18 @@
 	--accent: oklch(90.43693% 0.027753 253.2434);
 	--accent-foreground: oklch(26.55994% 0.047330 255.4106);
 	--destructive: oklch(51.62734% 0.183834 19.4551);
+	--destructive-text: oklch(51.62734% 0.183834 19.4551);
 	--destructive-foreground: oklch(100.00000% 0.000000 89.8756);
 	--success: oklch(45.54384% 0.081395 166.9049);
+	--success-text: oklch(45.54384% 0.081395 166.9049);
 	--success-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-standard: oklch(44.17719% 0.043085 257.4210);
 	--tone-collectible: oklch(45.52411% 0.167785 299.9667);
 	--tone-edition: oklch(46.78672% 0.141265 343.5094);
 	--tone-info: oklch(46.18475% 0.139719 259.8084);
+	--tone-info-text: oklch(46.18475% 0.139719 259.8084);
 	--tone-warning: oklch(48.72795% 0.103396 73.7587);
+	--tone-warning-text: oklch(48.72795% 0.103396 73.7587);
 	--highlight: oklch(87.60451% 0.060193 266.4847);
 	--tone-standard-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-collectible-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -158,14 +162,18 @@
 	--accent: oklch(44.66150% 0.052212 253.9323);
 	--accent-foreground: oklch(96.50786% 0.016545 259.4182);
 	--destructive: oklch(79.47983% 0.122016 8.7083);
+	--destructive-text: oklch(79.47983% 0.122016 8.7083);
 	--destructive-foreground: oklch(25.20350% 0.047984 259.9119);
 	--success: oklch(82.23776% 0.085532 165.8233);
+	--success-text: oklch(82.23776% 0.085532 165.8233);
 	--success-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-standard: oklch(82.02131% 0.046953 256.4806);
 	--tone-collectible: oklch(77.28561% 0.118760 301.0442);
 	--tone-edition: oklch(80.44093% 0.102099 341.6738);
 	--tone-info: oklch(80.57243% 0.097939 259.4939);
+	--tone-info-text: oklch(80.57243% 0.097939 259.4939);
 	--tone-warning: oklch(84.66478% 0.108333 84.1636);
+	--tone-warning-text: oklch(84.66478% 0.108333 84.1636);
 	--highlight: oklch(82.28684% 0.088371 261.1846);
 	--highlight-foreground: oklch(25.20350% 0.047984 259.9119);
 	--overlay: oklch(14.80476% 0.014876 256.6891);
@@ -184,3 +192,21 @@
 	--tone-info-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-warning-foreground: oklch(25.20350% 0.047984 259.9119);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Long soft airbrushed fields, pink to violet to periwinkle, with one
+   vivid indigo (art-direction.md). Diffuse, sourceless glow; no grain.
+   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="prism"],
+[data-sable-theme="prism"] .dark,
+[data-sable-theme="prism"] .light {
+	--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-warp: 0.45;
+	--theme-art-softness: 1;
+	--theme-art-grain: 0;
+}

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

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

package/dist/themes/sable/sable.css

@@ -220,8 +220,12 @@
 	--tone-standard-dark: oklch(78% 0.205 168);
 	--tone-info-dark: oklch(76% 0.165 235);
 	--tone-warning-dark: oklch(82% 0.165 65);
-	--highlight-dark: oklch(70% 0.285 318);
-	--destructive-dark: oklch(68% 0.225 25);
+	/* A labelled fill: dropped to where white reads (4.8:1, Lc 72) rather than
+	   lifted to where dark ink reads muddy (Lc 46). */
+	--highlight-dark: oklch(57% 0.28 318);
+	/* 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-dark: oklch(77.5% 0.129 25);
+	--destructive-fill-dark: oklch(59% 0.225 25);
 	/* Success twins the standard tone's dark value today (same caribbean-green),
 	   but is a SEPARATE token a theme can retune independently of the post-type. */
 	--success-dark: oklch(78% 0.205 168);
@@ -245,8 +249,10 @@
 	--accent: var(--zinc-100);
 	--accent-foreground: var(--zinc-950);
 	--destructive: var(--torch-red-600);
+	--destructive-text: var(--torch-red-600);
 	--destructive-foreground: var(--white);
 	--success: var(--caribbean-green-600);
+	--success-text: var(--caribbean-green-600);
 	--success-foreground: var(--zinc-50);
 
 	--border: var(--zinc-200);
@@ -263,7 +269,9 @@
 	--tone-collectible: var(--blue-gem-600);
 	--tone-edition: var(--purple-heart-700);
 	--tone-warning: var(--flush-orange-700);
+	--tone-warning-text: var(--flush-orange-700);
 	--tone-info: var(--azure-radiance-600);
+	--tone-info-text: var(--azure-radiance-700); /* a step under the fill: 600 is 4.46:1 as text on muted */
 	--highlight: var(--purple-heart-700);
 
 	/* Tone ink — light mode the tone fills resolve to dark 600/700 steps, so the
@@ -422,15 +430,18 @@
 	--muted-foreground: var(--zinc-400);
 	--accent: var(--zinc-800);
 	--accent-foreground: var(--zinc-50);
-	--destructive: var(--destructive-dark);
-	/* Dark `--destructive` is a light, vibrant red (so `text-destructive` reads on
-	   the near-black canvas). White ink on that fill is only ~3.3:1 (fails AA), so
-	   the legible ink flips to the dark neutral — exactly like the tone fills below.
-	   Dark ink on the light-red fill is ~5.9:1. */
-	--destructive-foreground: var(--zinc-950);
-	/* Like the tone fills, dark `--success` is a light, vibrant green, so the
-	   legible ink flips to the dark neutral (same model as --destructive above). */
+	--destructive: var(--destructive-fill-dark);
+	--destructive-text: var(--destructive-dark);
+	/* Dark destructive is two colours. The fill is a saturated red low enough for
+	   white (4.6:1, Lc 75); dark ink on the old light-red fill passed the ratio but
+	   read muddy (Lc 44). `text-destructive` and its borders and rings read
+	   `--destructive-text`, the light, vibrant red that reads on the near-black
+	   canvas. */
+	--destructive-foreground: var(--white);
+	/* Dark `--success` is a light, vibrant green that works as both fill and text,
+	   so the legible ink flips to the dark neutral. */
 	--success: var(--success-dark);
+	--success-text: var(--success-dark);
 	--success-foreground: var(--zinc-950);
 
 	--border: oklch(from var(--zinc-700) l c h / 0.4);
@@ -444,7 +455,9 @@
 	--tone-collectible: var(--tone-collectible-dark);
 	--tone-edition: var(--tone-edition-dark);
 	--tone-warning: var(--tone-warning-dark);
+	--tone-warning-text: var(--tone-warning-dark);
 	--tone-info: var(--tone-info-dark);
+	--tone-info-text: var(--tone-info-dark);
 	--highlight: var(--highlight-dark);
 
 	/* Tone ink — dark mode the tone fills resolve to lighter dark-tuned values,
@@ -455,7 +468,7 @@
 	--tone-edition-foreground: var(--zinc-950);
 	--tone-warning-foreground: var(--zinc-950);
 	--tone-info-foreground: var(--zinc-950);
-	--highlight-foreground: var(--zinc-950);
+	--highlight-foreground: var(--zinc-50);
 	--overlay: var(--zinc-950);
 	--overlay-foreground: var(--zinc-50);
 

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

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

package/dist/themes/verdant/verdant.css

@@ -111,8 +111,10 @@
 	--accent: oklch(91.5% 0.014 170);
 	--accent-foreground: oklch(24% 0.035 175);
 	--destructive: oklch(51% 0.19 22);
+	--destructive-text: oklch(51% 0.19 22);
 	--destructive-foreground: oklch(98.6% 0.004 106);
 	--success: oklch(50% 0.11 173);
+	--success-text: oklch(50% 0.11 173);
 	--success-foreground: oklch(98.6% 0.004 106);
 	--tone-standard: oklch(49% 0.018 175);
 	--tone-standard-foreground: oklch(98.6% 0.004 106);
@@ -121,8 +123,10 @@
 	--tone-edition: oklch(50% 0.11 173);
 	--tone-edition-foreground: oklch(98.6% 0.004 106);
 	--tone-info: oklch(51% 0.12 250);
+	--tone-info-text: oklch(51% 0.12 250);
 	--tone-info-foreground: oklch(98.6% 0.004 106);
 	--tone-warning: oklch(53% 0.12 65);
+	--tone-warning-text: oklch(51% 0.12 65); /* a step under the fill: 53% is 4.44:1 as text on muted */
 	--tone-warning-foreground: oklch(98.6% 0.004 106);
 	--highlight: oklch(90% 0.05 100);
 	--highlight-foreground: oklch(24% 0.035 175);
@@ -186,9 +190,12 @@
 	--secondary-foreground: oklch(98.6% 0.004 106);
 	--accent: oklch(33% 0.045 175); /* above --popover: a hover row or chip inside a menu/dialog must still read */
 	--accent-foreground: oklch(98.6% 0.004 106);
-	--destructive: oklch(64% 0.19 22);
-	--destructive-foreground: oklch(16% 0.03 175);
-	--success: oklch(72% 0.13 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(57.5% 0.19 22);
+	--destructive-text: oklch(78% 0.125 22);
+	--destructive-foreground: oklch(98.6% 0.004 106);
+	--success: oklch(74% 0.13 173);
+	--success-text: oklch(74% 0.13 173);
 	--success-foreground: oklch(16% 0.03 175);
 	--tone-standard: oklch(72% 0.015 175);
 	--tone-standard-foreground: oklch(16% 0.03 175);
@@ -196,9 +203,11 @@
 	--tone-collectible-foreground: oklch(16% 0.03 175);
 	--tone-edition: oklch(76% 0.12 173);
 	--tone-edition-foreground: oklch(16% 0.03 175);
-	--tone-info: oklch(74% 0.11 250);
+	--tone-info: oklch(76% 0.11 250);
+	--tone-info-text: oklch(76% 0.11 250);
 	--tone-info-foreground: oklch(16% 0.03 175);
 	--tone-warning: oklch(80% 0.13 75);
+	--tone-warning-text: oklch(80% 0.13 75);
 	--tone-warning-foreground: oklch(16% 0.03 175);
 	--highlight: oklch(40% 0.06 90);
 	--highlight-foreground: oklch(98.6% 0.004 106);
@@ -213,3 +222,24 @@
 	--sidebar-border: oklch(30% 0.03 175);
 	--sidebar-ring: oklch(85% 0.015 170);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Out-of-focus stained glass (art-direction.md): saturated teal,
+   orange, magenta, blue and green zones melting into each other, glowing from
+   within, each zone keeping its own colour. Colour lives in imagery only, so the art is far brighter than the
+   two-tone chrome. No grain.
+   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="verdant"],
+[data-sable-theme="verdant"] .dark,
+[data-sable-theme="verdant"] .light {
+	--theme-art-1: oklch(from var(--tone-edition) 0.76 0.15 h);
+	--theme-art-2: oklch(from var(--tone-warning) 0.76 0.16 h);
+	--theme-art-3: oklch(0.66 0.24 355);
+	--theme-art-4: oklch(from var(--tone-info) 0.62 0.17 h);
+	--theme-art-5: oklch(0.8 0.19 140);
+	--theme-art-ground: oklch(from var(--tone-collectible) 0.24 0.05 h);
+	--theme-art-warp: 0.9;
+	--theme-art-softness: 0.62;
+	--theme-art-grain: 0;
+}

package/llms/blocks/danger-zone-block.md

@@ -44,7 +44,7 @@ export function DangerZoneBlock({ className, framed = true, onDelete }: DangerZo
 						Permanently remove your profile, editions, and sales history. Collectors keep the editions they own.
 					</CardDescription>
 				</CardHeader>
-				<CardFooter className="justify-end">
+				<CardFooter actions className="justify-end">
 					<Button variant="destructive" onClick={() => setOpen(true)}>
 						Delete account
 					</Button>

package/llms/blocks/event-card-block.md

@@ -66,7 +66,7 @@ export function EventCardBlock({ className, framed = true, onRespond }: EventCar
 			<CardFooter className="flex-wrap justify-between gap-3">
 				<AvatarGroup aria-label={`${event.total} attendees`} total={event.total} size="sm" surface={framed ? "card" : undefined} fit>
 					{event.attendees.map((initials) => (
-						<Avatar key={initials} fallback={initials} alt={initials} />
+						<Avatar variant="art" key={initials} fallback={initials} alt={initials} />
 					))}
 				</AvatarGroup>
 				<div className="flex gap-2">

package/llms/blocks/feedback-form-block.md

@@ -52,7 +52,7 @@ export function FeedbackFormBlock({ className, framed = true, onDone }: Feedback
 				</ToggleGroup>
 				<Textarea placeholder="What worked, what didn’t…" aria-label="Notes" rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} />
 			</CardContent>
-			<CardFooter className="justify-end">
+			<CardFooter actions className="justify-end">
 				<Button variant="ghost" size="sm" onClick={() => onDone?.(false)}>
 					Skip
 				</Button>

package/llms/blocks/invite-team-block.md

@@ -41,7 +41,7 @@ export function InviteTeamBlock({ className, framed = true, onSend }: InviteTeam
 			<CardContent className="flex flex-col gap-4">
 				<AvatarGroup aria-label={`${collaborators.length} collaborators`} size="sm" surface={framed ? "card" : undefined}>
 					{collaborators.map((initials) => (
-						<Avatar key={initials} fallback={initials} alt={initials} />
+						<Avatar variant="art" key={initials} fallback={initials} alt={initials} />
 					))}
 				</AvatarGroup>
 				<form

package/llms/blocks/media-player-block.md

@@ -21,24 +21,10 @@ A now-playing card: cover, title and artist as an Entity with a Like action, a p
 
 ```tsx
 import { useState } from "react"
-import { Button, Card, CardContent, cn, Entity, Icon, Slider } from "@sableui/react"
+import { Button, Card, CardContent, cn, Entity, GradientArt, Icon, Slider } from "@sableui/react"
 
 const track = { title: "Low tide, high noon", artist: "Juno Avery", position: 38, elapsed: "1:24", remaining: "-2:16" }
 
-/**
- * Placeholder cover painted from the palette — the theme's decorative tones
- * over the brand, so it follows every look. Replace with the cover image.
- */
-const ART_TONES = ["info", "collectible", "edition"]
-const ART_SPOTS = [[20, 20, 70], [85, 30, 60], [60, 90, 65]]
-const cover = [
-	...ART_SPOTS.map(
-		([x, y, reach], i) =>
-			// design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-			`radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
-	),
-	"var(--primary)",
-].join(", ")
 
 export interface MediaPlayerBlockProps {
 	className?: string
@@ -59,7 +45,8 @@ export function MediaPlayerBlock({ className, framed = true, onPlayingChange, on
 				    card already pads it. */}
 				<Entity
 					className="p-0"
-					leading={<div aria-hidden className="size-14 rounded-md" style={{ background: cover }} />}
+					// Placeholder cover painted from the theme. Replace with the cover image.
+					leading={<GradientArt aria-hidden seed={track.title} className="size-14 rounded-md" />}
 					title={track.title}
 					subtitle={track.artist}
 					action={