@sableui/react 0.0.0-stage → 0.1.1

package/dist/themes/poppy/poppy.css

@@ -0,0 +1,174 @@
+/* poppy: an original Sable playful preset. No third-party assets. */
+[data-sable-theme="poppy"] {
+	--font-sans: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: "Red Hat Mono", ui-monospace, monospace;
+	--font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
+	--page-inset: clamp(16px, 3vw, 40px);
+	--region-form: 480px;
+	--region-feed: 640px;
+	--region-content: 896px;
+	--region-wide: 1280px;
+	--region-full: 1536px;
+	--region-ultrawide: 1800px;
+	--theme-radius-none: 0px;
+	--theme-radius-xs: 6px;
+	--theme-radius-sm: 10px;
+	--theme-radius-md: 16px;
+	--theme-radius-lg: 24px;
+	--theme-radius-xl: 32px;
+	--theme-radius-full: 9999px;
+	--type-display-4xl-weight: 800;
+	--type-display-4xl-leading: 1;
+	--type-display-4xl-tracking: -0.035em;
+	--type-display-3xl-size: 6rem;
+	--type-display-3xl-weight: 800;
+	--type-display-3xl-leading: 1;
+	--type-display-3xl-tracking: -0.035em;
+	--type-display-2xl-size: 4.5rem;
+	--type-display-2xl-weight: 800;
+	--type-display-2xl-leading: 1;
+	--type-display-2xl-tracking: -0.035em;
+	--type-display-xl-size: 4rem;
+	--type-display-xl-weight: 800;
+	--type-display-xl-leading: 1.1;
+	--type-display-xl-tracking: -0.035em;
+	--type-display-lg-size: 3rem;
+	--type-display-lg-weight: 800;
+	--type-display-lg-leading: 1.15;
+	--type-display-lg-tracking: -0.035em;
+	--type-heading-weight: 800;
+	--type-heading-1-size: 2.5rem;
+	--type-heading-1-leading: 1.15;
+	--type-heading-1-tracking: -0.015em;
+	--type-heading-2-size: 2rem;
+	--type-heading-2-leading: 1.2;
+	--type-heading-2-tracking: -0.015em;
+	--type-heading-3-size: 1.5rem;
+	--type-heading-3-leading: 1.25;
+	--type-heading-3-tracking: -0.015em;
+	--type-heading-4-size: 1.25rem;
+	--type-heading-4-leading: 1.3;
+	--type-heading-4-tracking: -0.015em;
+	--type-title-weight: 700;
+	--type-title-leading: 1.4;
+	--type-title-tracking: -0.01em;
+	--type-title-sm-tracking: -0.005em;
+	--type-overline-size: 0.8571rem;
+	--type-overline-weight: 600;
+	--type-overline-leading: 1.4;
+	--type-overline-tracking: 0.08em;
+	--type-overline-transform: uppercase;
+	--background: oklch(98.05242% 0.021102 85.9423);
+	--foreground: oklch(27.91553% 0.070219 323.8141);
+	--card: oklch(99.77841% 0.001061 17.1777);
+	--card-foreground: oklch(27.91553% 0.070219 323.8141);
+	--popover: oklch(99.77841% 0.001061 17.1777);
+	--popover-foreground: oklch(27.91553% 0.070219 323.8141);
+	--muted: oklch(92.10223% 0.025248 333.7540);
+	--muted-foreground: oklch(43.69479% 0.076345 321.3851);
+	--border: oklch(69.96908% 0.055090 333.3586);
+	--border-strong: oklch(54.87925% 0.056525 333.9456);
+	--input: oklch(69.96908% 0.055090 333.3586);
+	--ring: oklch(40.99289% 0.130336 325.3125);
+	--primary: oklch(38.38082% 0.116390 323.6155);
+	--primary-foreground: oklch(100.00000% 0.000000 89.8756);
+	--secondary: oklch(92.10223% 0.025248 333.7540);
+	--secondary-foreground: oklch(27.91553% 0.070219 323.8141);
+	--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-foreground: oklch(100.00000% 0.000000 89.8756);
+	--success: 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-warning: 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);
+	--tone-edition-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);
+	--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);
+	--sidebar: oklch(98.05242% 0.021102 85.9423);
+	--sidebar-foreground: oklch(27.91553% 0.070219 323.8141);
+	--sidebar-primary: oklch(38.38082% 0.116390 323.6155);
+	--sidebar-primary-foreground: oklch(100.00000% 0.000000 89.8756);
+	--sidebar-accent: oklch(87.83223% 0.046910 333.7803);
+	--sidebar-accent-foreground: oklch(27.91553% 0.070219 323.8141);
+	--sidebar-border: oklch(69.96908% 0.055090 333.3586);
+	--sidebar-ring: oklch(40.99289% 0.130336 325.3125);
+	--motion-scale: 1;
+	--motion-duration-instant: calc(60ms * var(--motion-scale));
+	--motion-duration-fast: calc(150ms * var(--motion-scale));
+	--motion-duration-base: calc(220ms * var(--motion-scale));
+	--motion-duration-slow: calc(320ms * var(--motion-scale));
+	--motion-duration-slower: calc(500ms * var(--motion-scale));
+	--motion-duration-enter: calc(280ms * var(--motion-scale));
+	--motion-duration-exit: calc(180ms * var(--motion-scale));
+	--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+	--motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+	--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+	--motion-ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1);
+	--motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+	--motion-ease-linear: linear;
+	--spacing: 0.28rem;
+	--theme-button-radius: 12px;
+	--button-radius: var(--theme-button-radius);
+	--theme-shadow-sm: 3px 3px 0 oklch(32% 0.05 320 / 0.12);
+	--theme-shadow-md: 5px 5px 0 oklch(32% 0.05 320 / 0.14);
+}
+
+.dark[data-sable-theme="poppy"],
+[data-sable-theme="poppy"].dark,
+[data-sable-theme="poppy"] .dark,
+.dark [data-sable-theme="poppy"]:not(.light) {
+	--background: oklch(20.33265% 0.047438 308.8247);
+	--foreground: oklch(96.99788% 0.031195 84.5922);
+	--card: oklch(28.82474% 0.059607 315.2029);
+	--card-foreground: oklch(96.99788% 0.031195 84.5922);
+	--popover: oklch(35.18833% 0.068806 316.2087);
+	--popover-foreground: oklch(96.99788% 0.031195 84.5922);
+	--muted: oklch(39.93612% 0.069763 317.7095);
+	--muted-foreground: oklch(89.33070% 0.038250 332.6274);
+	--border: oklch(62.48980% 0.070560 325.5308);
+	--border-strong: oklch(72.17143% 0.060424 328.9840);
+	--input: oklch(62.48980% 0.070560 325.5308);
+	--ring: oklch(86.64637% 0.118528 86.6791);
+	--primary: oklch(86.64637% 0.118528 86.6791);
+	--primary-foreground: oklch(27.91553% 0.070219 323.8141);
+	--secondary: oklch(39.93612% 0.069763 317.7095);
+	--secondary-foreground: oklch(96.99788% 0.031195 84.5922);
+	--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-foreground: oklch(27.91553% 0.070219 323.8141);
+	--success: 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-warning: 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);
+	--overlay-foreground: oklch(100.00000% 0.000000 89.8756);
+	--sidebar: oklch(20.33265% 0.047438 308.8247);
+	--sidebar-foreground: oklch(96.99788% 0.031195 84.5922);
+	--sidebar-primary: oklch(86.64637% 0.118528 86.6791);
+	--sidebar-primary-foreground: oklch(27.91553% 0.070219 323.8141);
+	--sidebar-accent: oklch(45.76059% 0.076204 319.6398);
+	--sidebar-accent-foreground: oklch(96.99788% 0.031195 84.5922);
+	--sidebar-border: oklch(62.48980% 0.070560 325.5308);
+	--sidebar-ring: oklch(86.64637% 0.118528 86.6791);
+	--tone-standard-foreground: oklch(27.91553% 0.070219 323.8141);
+	--tone-collectible-foreground: oklch(27.91553% 0.070219 323.8141);
+	--tone-edition-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);
+}

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

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

package/dist/themes/prism/index.js

@@ -0,0 +1 @@
+export { prism_default as default, prismTheme } from '../../chunk-7MG4SHYX.js';

package/dist/themes/prism/prism.css

@@ -0,0 +1,183 @@
+/* prism: an original Sable technical preset. No third-party assets. */
+[data-sable-theme="prism"] {
+	--font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: "Roboto Mono", ui-monospace, monospace;
+	--font-display: "Playfair Display", ui-serif, Georgia, serif;
+	--page-inset: clamp(16px, 3vw, 40px);
+	--region-form: 480px;
+	--region-feed: 640px;
+	--region-content: 896px;
+	--region-wide: 1280px;
+	--region-full: 1536px;
+	--region-ultrawide: 1800px;
+	--theme-radius-none: 0px;
+	--theme-radius-xs: 2px;
+	--theme-radius-sm: 4px;
+	--theme-radius-md: 4px;
+	--theme-radius-lg: 6px;
+	--theme-radius-xl: 8px;
+	--theme-radius-full: 9999px;
+	--type-display-4xl-weight: 600;
+	--type-display-4xl-leading: 1;
+	--type-display-4xl-tracking: -0.025em;
+	--type-display-3xl-size: 6rem;
+	--type-display-3xl-weight: 600;
+	--type-display-3xl-leading: 1;
+	--type-display-3xl-tracking: -0.025em;
+	--type-display-2xl-size: 4.5rem;
+	--type-display-2xl-weight: 600;
+	--type-display-2xl-leading: 1;
+	--type-display-2xl-tracking: -0.025em;
+	--type-display-xl-size: 3.5rem;
+	--type-display-xl-weight: 600;
+	--type-display-xl-leading: 1.1;
+	--type-display-xl-tracking: -0.025em;
+	--type-display-lg-size: 3rem;
+	--type-display-lg-weight: 600;
+	--type-display-lg-leading: 1.15;
+	--type-display-lg-tracking: -0.025em;
+	--type-heading-weight: 600;
+	--type-heading-1-size: 2.5rem;
+	--type-heading-1-leading: 1.15;
+	--type-heading-1-tracking: -0.015em;
+	--type-heading-2-size: 2rem;
+	--type-heading-2-leading: 1.2;
+	--type-heading-2-tracking: -0.015em;
+	--type-heading-3-size: 1.5rem;
+	--type-heading-3-leading: 1.25;
+	--type-heading-3-tracking: -0.015em;
+	--type-heading-4-size: 1.25rem;
+	--type-heading-4-leading: 1.3;
+	--type-heading-4-tracking: -0.015em;
+	--type-title-weight: 600;
+	--type-title-leading: 1.4;
+	--type-title-tracking: -0.01em;
+	--type-title-sm-tracking: -0.005em;
+	--type-overline-size: 0.8571rem;
+	--type-overline-weight: 600;
+	--type-overline-leading: 1.4;
+	--type-overline-tracking: 0.08em;
+	--type-overline-transform: uppercase;
+	--background: oklch(96.82603% 0.006854 247.8956);
+	--foreground: oklch(26.55994% 0.047330 255.4106);
+	--card: oklch(100.00000% 0.000000 89.8756);
+	--card-foreground: oklch(26.55994% 0.047330 255.4106);
+	--popover: oklch(100.00000% 0.000000 89.8756);
+	--popover-foreground: oklch(26.55994% 0.047330 255.4106);
+	--muted: oklch(93.05963% 0.014930 251.1615);
+	--muted-foreground: oklch(45.04961% 0.039163 252.7680);
+	--border: oklch(79.84882% 0.029246 251.5080);
+	--border-strong: oklch(64.27577% 0.042824 253.1390);
+	--input: oklch(79.84882% 0.029246 251.5080);
+	--ring: oklch(50.45463% 0.203215 263.5596);
+	--primary: oklch(50.45463% 0.203215 263.5596);
+	--primary-foreground: oklch(100.00000% 0.000000 89.8756);
+	--secondary: oklch(93.05963% 0.014930 251.1615);
+	--secondary-foreground: oklch(26.55994% 0.047330 255.4106);
+	--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-foreground: oklch(100.00000% 0.000000 89.8756);
+	--success: 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-warning: 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);
+	--tone-edition-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);
+	--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);
+	--sidebar: oklch(96.82603% 0.006854 247.8956);
+	--sidebar-foreground: oklch(26.55994% 0.047330 255.4106);
+	--sidebar-primary: oklch(50.45463% 0.203215 263.5596);
+	--sidebar-primary-foreground: oklch(100.00000% 0.000000 89.8756);
+	--sidebar-accent: oklch(90.43693% 0.027753 253.2434);
+	--sidebar-accent-foreground: oklch(26.55994% 0.047330 255.4106);
+	--sidebar-border: oklch(79.84882% 0.029246 251.5080);
+	--sidebar-ring: oklch(50.45463% 0.203215 263.5596);
+	--motion-scale: 1;
+	--motion-duration-instant: calc(60ms * var(--motion-scale));
+	--motion-duration-fast: calc(100ms * var(--motion-scale));
+	--motion-duration-base: calc(150ms * var(--motion-scale));
+	--motion-duration-slow: calc(220ms * var(--motion-scale));
+	--motion-duration-slower: calc(350ms * var(--motion-scale));
+	--motion-duration-enter: calc(180ms * var(--motion-scale));
+	--motion-duration-exit: calc(100ms * var(--motion-scale));
+	--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+	--motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+	--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+	--motion-ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1);
+	--motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+	--motion-ease-linear: linear;
+	--spacing: 0.22rem;
+	--theme-button-radius: 4px;
+	--button-radius: var(--theme-button-radius);
+	--type-body-md-size: 1rem;
+	--type-body-lg-size: 1.125rem;
+	--type-label-lg-size: 0.9375rem;
+	--type-mono-sm-size: 0.875rem;
+	--theme-shadow-2xs: 0 0 #0000;
+	--theme-shadow-xs: 0 0 #0000;
+	--theme-shadow-sm: 0 0 #0000;
+	--theme-shadow-md: 0 0 #0000;
+	--theme-shadow-lg: 0 0 #0000;
+	--theme-shadow-xl: 0 0 #0000;
+	--theme-shadow-2xl: 0 0 #0000;
+}
+
+.dark[data-sable-theme="prism"],
+[data-sable-theme="prism"].dark,
+[data-sable-theme="prism"] .dark,
+.dark [data-sable-theme="prism"]:not(.light) {
+	--background: oklch(21.51885% 0.027284 255.8198);
+	--foreground: oklch(96.50786% 0.016545 259.4182);
+	--card: oklch(29.77801% 0.039648 256.2166);
+	--card-foreground: oklch(96.50786% 0.016545 259.4182);
+	--popover: oklch(35.46732% 0.045045 253.8944);
+	--popover-foreground: oklch(96.50786% 0.016545 259.4182);
+	--muted: oklch(39.92007% 0.047979 253.4360);
+	--muted-foreground: oklch(85.60192% 0.027564 255.1044);
+	--border: oklch(58.06940% 0.052170 251.5856);
+	--border-strong: oklch(69.19219% 0.042050 253.1082);
+	--input: oklch(58.06940% 0.052170 251.5856);
+	--ring: oklch(82.28684% 0.088371 261.1846);
+	--primary: oklch(82.28684% 0.088371 261.1846);
+	--primary-foreground: oklch(25.20350% 0.047984 259.9119);
+	--secondary: oklch(39.92007% 0.047979 253.4360);
+	--secondary-foreground: oklch(96.50786% 0.016545 259.4182);
+	--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-foreground: oklch(25.20350% 0.047984 259.9119);
+	--success: 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-warning: 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);
+	--overlay-foreground: oklch(100.00000% 0.000000 89.8756);
+	--sidebar: oklch(21.51885% 0.027284 255.8198);
+	--sidebar-foreground: oklch(96.50786% 0.016545 259.4182);
+	--sidebar-primary: oklch(82.28684% 0.088371 261.1846);
+	--sidebar-primary-foreground: oklch(25.20350% 0.047984 259.9119);
+	--sidebar-accent: oklch(44.66150% 0.052212 253.9323);
+	--sidebar-accent-foreground: oklch(96.50786% 0.016545 259.4182);
+	--sidebar-border: oklch(58.06940% 0.052170 251.5856);
+	--sidebar-ring: oklch(82.28684% 0.088371 261.1846);
+	--tone-standard-foreground: oklch(25.20350% 0.047984 259.9119);
+	--tone-collectible-foreground: oklch(25.20350% 0.047984 259.9119);
+	--tone-edition-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);
+}

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

@@ -0,0 +1,9 @@
+import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+
+/**
+ * Verdant — a Sable theme. Concrete token values live in
+ * `verdant.css`; this manifest is the typed, machine-readable description.
+ */
+declare const verdantTheme: ThemeManifest;
+
+export { verdantTheme as default, verdantTheme };

package/dist/themes/verdant/index.js

@@ -0,0 +1 @@
+export { verdant_default as default, verdantTheme } from '../../chunk-KO3NAEBF.js';

package/dist/themes/verdant/verdant.css

@@ -0,0 +1,210 @@
+/* ==========================================================================
+   Verdant — a Sable theme, developed from reference analysis.
+
+   Components must reference the SEMANTIC tokens (--background, --primary,
+   --tone-edition, …), never any palette ramp directly. See themes/_contract.ts.
+   ========================================================================== */
+
+[data-sable-theme="verdant"] {
+	/* Font stacks (theme-internal; host app provides the actual font files) */
+	--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
+	--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
+
+	/*
+	 * Region/page-inset foundation vars, explicitly declared per the Sable theme
+	 * plugin's theme.md "Layout foundation" rule (previously omitted here, which
+	 * meant every Region in this build was silently drawing on the original default theme's own
+	 * defaults via styles.css's unconditional default-theme import — see atelier's
+	 * theme for the full writeup of that bug). Findings doc measured a ~1280px
+	 * capped inner container almost everywhere — matches Sable's own --region-wide
+	 * default exactly, so no deviation needed; --page-inset has no direct
+	 * measurement in the findings doc, defaulted to Sable's standard clamp.
+	 */
+	--page-inset: clamp(16px, 4vw, 32px);
+	--region-form: 480px;
+	--region-feed: 640px;
+	--region-content: 896px;
+	--region-wide: 1280px; /* 1280px — observed: "1280px capped inner container almost everywhere" */
+	--region-full: 1536px;
+	--region-ultrawide: 1800px;
+
+	/* Theme foundation vars consumed by styles.css. */
+	--theme-radius-none: 0px;
+	--theme-radius-xs: 6px;
+	--theme-radius-sm: 10px;
+	--theme-radius-md: 12px;
+	--theme-radius-lg: 16px;
+	--theme-radius-xl: 24px;
+	--theme-radius-full: 9999px;
+
+	/* Type-scale foundation vars consumed by styles.css's paired text-* utilities. */
+	--type-display-4xl-weight: 400;
+	--type-display-4xl-leading: 1.0;
+	--type-display-4xl-tracking: 0em;
+	--type-display-3xl-size: 6.8571rem /* 96px at the 14px desktop root */;
+	--type-display-3xl-weight: 400;
+	--type-display-3xl-leading: 1.0;
+	--type-display-3xl-tracking: 0em;
+	--type-display-2xl-size: 5.7143rem /* 80px at the 14px desktop root */;
+	--type-display-2xl-weight: 400;
+	--type-display-2xl-leading: 1.1;
+	--type-display-2xl-tracking: 0em;
+	--type-display-xl-size: 4.5714rem /* 64px at the 14px desktop root */;
+	--type-display-xl-weight: 400;
+	--type-display-xl-leading: 1.2;
+	--type-display-xl-tracking: 0em;
+	--type-display-lg-size: 3.4286rem /* 48px at the 14px desktop root */;
+	--type-display-lg-weight: 400;
+	--type-display-lg-leading: 1.0;
+	--type-display-lg-tracking: 0em;
+	--type-heading-weight: 700;
+	--type-heading-1-size: 2.8571rem /* 40px at the 14px desktop root */;
+	--type-heading-1-leading: 1.3;
+	--type-heading-1-tracking: 0em;
+	--type-heading-2-size: 2.2857rem /* 32px at the 14px desktop root */;
+	--type-heading-2-leading: 1.1;
+	--type-heading-2-tracking: 0em;
+	--type-heading-3-size: 1.7143rem /* 24px at the 14px desktop root */;
+	--type-heading-3-leading: 1.15;
+	--type-heading-3-tracking: 0em;
+	--type-heading-4-size: 1.4286rem /* 20px at the 14px desktop root */;
+	--type-heading-4-leading: 1.3;
+	--type-heading-4-tracking: 0em;
+	--type-title-weight: 600;
+	--type-title-leading: 1.4;
+	--type-title-tracking: -0.01em;
+	--type-title-sm-tracking: 0em;
+	--type-title-lg-tracking: 0em;
+	--type-title-md-tracking: 0em;
+
+	/* Overline/eyebrow foundation vars consumed by styles.css's text-overline utility. */
+	--type-overline-size: 0.8571rem /* 12px at the 14px desktop root */;
+	--type-overline-weight: 600;
+	--type-overline-leading: 1.333;
+	--type-overline-tracking: 0em;
+	--type-overline-transform: uppercase;
+
+	/* ----------------------------------------------------------------------
+	   Semantic tokens — light mode
+	   ---------------------------------------------------------------------- */
+	--background: oklch(98.6% 0.004 106);
+	--foreground: oklch(24% 0.035 175);
+	--card: oklch(96.1% 0.005 106);
+	--card-foreground: oklch(24% 0.035 175);
+	--popover: oklch(98.6% 0.004 106);
+	--popover-foreground: oklch(24% 0.035 175);
+	--muted: oklch(93% 0.007 106);
+	--muted-foreground: oklch(49% 0.018 175);
+	--border: oklch(88.5% 0.005 106);
+	--border-strong: oklch(81% 0.008 130);
+	--input: oklch(88.5% 0.005 106);
+	--ring: oklch(24% 0.035 175);
+	--primary: oklch(24% 0.035 175);
+	--primary-foreground: oklch(98.6% 0.004 106);
+	--secondary: oklch(93% 0.007 106);
+	--secondary-foreground: oklch(24% 0.035 175);
+	--accent: oklch(91.5% 0.014 170);
+	--accent-foreground: oklch(24% 0.035 175);
+	--destructive: oklch(51% 0.19 22);
+	--destructive-foreground: oklch(98.6% 0.004 106);
+	--success: 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);
+	--tone-collectible: oklch(45% 0.07 175);
+	--tone-collectible-foreground: oklch(98.6% 0.004 106);
+	--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-foreground: oklch(98.6% 0.004 106);
+	--tone-warning: oklch(53% 0.12 65);
+	--tone-warning-foreground: oklch(98.6% 0.004 106);
+	--highlight: oklch(90% 0.05 100);
+	--highlight-foreground: oklch(24% 0.035 175);
+	--overlay: oklch(16% 0.03 175 / 0.6);
+	--overlay-foreground: oklch(98.6% 0.004 106);
+	--sidebar: oklch(96.1% 0.005 106);
+	--sidebar-foreground: oklch(24% 0.035 175);
+	--sidebar-primary: oklch(24% 0.035 175);
+	--sidebar-primary-foreground: oklch(98.6% 0.004 106);
+	--sidebar-accent: oklch(93% 0.008 170);
+	--sidebar-accent-foreground: oklch(24% 0.035 175);
+	--sidebar-border: oklch(88.5% 0.005 106);
+	--sidebar-ring: oklch(24% 0.035 175);
+
+	/* ----------------------------------------------------------------------
+	   Motion tokens (mode-independent)
+	   ---------------------------------------------------------------------- */
+	--motion-scale: 1;
+	--motion-duration-instant: calc(75ms * var(--motion-scale));
+	--motion-duration-fast: calc(150ms * var(--motion-scale));
+	--motion-duration-base: calc(200ms * var(--motion-scale));
+	--motion-duration-slow: calc(300ms * var(--motion-scale));
+	--motion-duration-slower: calc(500ms * var(--motion-scale));
+	--motion-duration-enter: calc(300ms * var(--motion-scale));
+	--motion-duration-exit: calc(200ms * var(--motion-scale));
+	--motion-ease-standard: ease;
+	--motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+	--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+	--motion-ease-spring: cubic-bezier(0.3, 1.2, 0.5, 1);
+	--motion-ease-bounce: cubic-bezier(0.3, 1.2, 0.5, 1);
+	--motion-ease-linear: linear;
+}
+
+/* ==========================================================================
+   Semantic tokens — dark mode
+   ========================================================================== */
+.dark[data-sable-theme="verdant"],
+[data-sable-theme="verdant"].dark,
+/* A dark island inside a light page: an inspector, a dark sidebar, a dark
+   hero. Without this arm, a nested .dark kept the light tokens. */
+[data-sable-theme="verdant"] .dark,
+/* …and the reverse: a preset-scoped subtree inside a dark page follows the page
+   into dark mode. Add `.light` to the subtree to pin it light. */
+.dark [data-sable-theme="verdant"]:not(.light) {
+	--background: oklch(16% 0.03 175);
+	--foreground: oklch(98.6% 0.004 106);
+	--card: oklch(24% 0.035 175);
+	--card-foreground: oklch(98.6% 0.004 106);
+	--popover: oklch(28% 0.035 175);
+	--popover-foreground: oklch(98.6% 0.004 106);
+	--muted: oklch(30.5% 0.032 175);
+	--muted-foreground: oklch(70% 0.012 172);
+	--border: oklch(36% 0.03 175);
+	--border-strong: oklch(40% 0.028 175);
+	--input: oklch(36% 0.03 175);
+	--ring: oklch(85% 0.015 170);
+	--primary: oklch(98.6% 0.004 106);
+	--primary-foreground: oklch(24% 0.035 175);
+	--secondary: oklch(32% 0.035 175);
+	--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);
+	--success-foreground: oklch(16% 0.03 175);
+	--tone-standard: oklch(72% 0.015 175);
+	--tone-standard-foreground: oklch(16% 0.03 175);
+	--tone-collectible: oklch(74% 0.09 175);
+	--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-foreground: oklch(16% 0.03 175);
+	--tone-warning: 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);
+	--overlay: oklch(8% 0.015 175 / 0.7);
+	--overlay-foreground: oklch(98.6% 0.004 106);
+	--sidebar: oklch(13.5% 0.026 175);
+	--sidebar-foreground: oklch(98.6% 0.004 106);
+	--sidebar-primary: oklch(98.6% 0.004 106);
+	--sidebar-primary-foreground: oklch(24% 0.035 175);
+	--sidebar-accent: oklch(24% 0.035 175);
+	--sidebar-accent-foreground: oklch(98.6% 0.004 106);
+	--sidebar-border: oklch(30% 0.03 175);
+	--sidebar-ring: oklch(85% 0.015 170);
+}

package/dist/themes.css

@@ -0,0 +1,30 @@
+/* ==========================================================================
+   @sableui/react — all bundled alternate themes, in one import.
+
+     @import "tailwindcss";
+     @import "@sableui/react/styles.css";
+     @import "@sableui/react/themes.css";   ← this file
+
+   For an app that offers the bundled set as user-selectable themes (a
+   `<ThemeSelector>` over Base / Meridian / Prism / Verdant / Ember / Poppy). `styles.css`
+   carries Base alone, since the alternates are `[data-sable-theme]`-scoped
+   and dead weight in the overwhelmingly common single-theme app.
+
+   Needing exactly one alternate? Import just that one instead — this file is a
+   convenience for "all of them", not the recommended default:
+
+     @import "@sableui/react/theme/prism.css";
+
+   Base is NOT here: it ships in `styles.css` and must, since it declares
+   the layout floor (`--page-inset`, `--region-*`, `--rhythm-unit`) on a bare
+   `:root` that every other theme inherits.
+   ========================================================================== */
+
+@import "./themes/meridian/meridian.css";
+@import "./themes/prism/prism.css";
+@import "./themes/verdant/verdant.css";
+@import "./themes/ember/ember.css";
+@import "./themes/poppy/poppy.css";
+
+/* Legacy selectors remain available for existing consumers. */
+@import "./themes/atelier/atelier.css";