@sableui/react 0.0.0-stage → 0.1.0

package/dist/themes/base/base.css

@@ -0,0 +1,443 @@
+/* ==========================================================================
+   Base — the default Sable theme.
+
+   Dark-by-default, content-first, fluid product aesthetic. Palette authored in
+   OKLCH (locked hue per ramp, perceptually-even lightness, sRGB-capped chroma).
+   Light values live in :root; dark overrides in .dark.
+
+   Fonts: this theme EXPECTS the host app to provide "Figtree" (sans) and
+   "DM Mono" (mono). It declares the font stacks as --font-sans / --font-mono but
+   does not load the font files (load them via <link> or @font-face in your app).
+
+   Components must reference the SEMANTIC tokens (--background, --primary,
+   --tone-edition, …), never the palette steps below. See themes/_contract.ts.
+   ========================================================================== */
+
+:root,
+[data-sable-theme="base"] {
+	/* Font stacks (theme-internal; host app provides the actual font files) */
+	--font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
+
+	/* Theme foundation vars consumed by styles.css. */
+	--theme-radius-none: 0px;
+	--theme-radius-xs: 4px;
+	--theme-radius-sm: 8px;
+	--theme-radius-md: 12px;
+	--theme-radius-lg: 16px;
+	--theme-radius-xl: 20px;
+	--theme-radius-full: 9999px;
+
+	/* Elevation, light. Layered: a tight contact shadow plus one or two soft drops
+	   whose offsets roughly double per step. A single 5% blur read mushy and
+	   barely separated a menu from the page (DESIGN.md → Elevation). */
+	--theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.03);
+	--theme-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 2px 6px -1px rgb(0 0 0 / 0.05);
+	--theme-shadow-md: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 12px 24px -6px rgb(0 0 0 / 0.07);
+	--theme-shadow-lg: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 8px 16px -4px rgb(0 0 0 / 0.07), 0 24px 48px -12px rgb(0 0 0 / 0.11);
+	--theme-shadow-xl: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 12px 24px -6px rgb(0 0 0 / 0.08), 0 32px 64px -16px rgb(0 0 0 / 0.13);
+
+	/* Type-scale foundation vars consumed by styles.css's paired text-* utilities.
+	   Values mirror styles.css's own fallback defaults exactly (zero visual
+	   change) — declared explicitly here so the theme owns its type contract. */
+	--type-display-4xl-weight: 800;
+	--type-display-4xl-leading: 0.9;
+	--type-display-4xl-tracking: -0.05em;
+	--type-display-3xl-size: 6rem;
+	--type-display-3xl-weight: 700;
+	--type-display-3xl-leading: 0.95;
+	--type-display-3xl-tracking: -0.045em;
+	--type-display-2xl-size: 4.5rem;
+	--type-display-2xl-weight: 700;
+	--type-display-2xl-leading: 1;
+	--type-display-2xl-tracking: -0.04em;
+	--type-display-xl-size: 3.75rem;
+	--type-display-xl-weight: 700;
+	--type-display-xl-leading: 1.05;
+	--type-display-xl-tracking: -0.035em;
+	--type-display-lg-size: 3rem;
+	--type-display-lg-weight: 700;
+	--type-display-lg-leading: 1.1;
+	--type-display-lg-tracking: -0.03em;
+	--type-heading-weight: 600;
+	--type-heading-1-size: 2.25rem;
+	--type-heading-1-leading: 1.15;
+	--type-heading-1-tracking: -0.025em;
+	--type-heading-2-size: 1.75rem;
+	--type-heading-2-leading: 1.2;
+	--type-heading-2-tracking: -0.02em;
+	--type-heading-3-size: 1.375rem;
+	--type-heading-3-leading: 1.25;
+	--type-heading-3-tracking: -0.015em;
+	--type-heading-4-size: 1.125rem;
+	--type-heading-4-leading: 1.3;
+	--type-heading-4-tracking: -0.01em;
+	--type-title-weight: 600;
+	--type-title-leading: 1.4;
+	--type-title-tracking: -0.01em;
+	--type-title-sm-tracking: -0.005em;
+
+	/* Overline/eyebrow foundation vars consumed by styles.css's text-overline
+	   utility. Values mirror styles.css's own fallback defaults exactly (zero
+	   visual change) — declared explicitly so the theme owns its type contract. */
+	--type-overline-size: 0.75rem;
+	--type-overline-weight: 600;
+	--type-overline-leading: 1.2;
+	--type-overline-tracking: 0.08em;
+	--type-overline-transform: uppercase;
+
+	/* ----------------------------------------------------------------------
+	   Palette ramps (OKLCH). 50 → 950. Theme-internal — never used directly
+	   by components. Each 600 clears WCAG AA on white except flush-orange-600
+	   (AA-Large only; use 700 for body text on white).
+	   ---------------------------------------------------------------------- */
+
+	/* Absolute white — deliberately OUTSIDE every ramp. Zinc tops out at zinc-50
+	   (97.2% L, 0.002 C), a faint blue cast that is right for a raised surface and
+	   wrong for the page itself, so white has no ramp step to come from. It lived
+	   as a raw literal at five sites for that reason; naming it here is what lets
+	   the semantic layer reference the palette everywhere with no exceptions.
+
+	   Stays HEX rather than `oklch(100% 0 0)`: the two are the same colour, and at
+	   the extremes there is nothing for OKLCH to buy. Perceptual notation earns its
+	   keep on a ramp, where even lightness steps and a locked hue matter; #ffffff
+	   is just unambiguous and shorter. Same for #000000. Every other colour token
+	   in every theme is OKLCH — asserted in themes.test.ts, which exempts exactly
+	   these two. */
+	--white: #ffffff;
+
+	/* Zinc — Hue 264° (cool neutral, near-zero chroma) */
+	--zinc-50: oklch(97.2% 0.002 264);
+	--zinc-100: oklch(94% 0.003 264);
+	--zinc-200: oklch(88% 0.004 264);
+	--zinc-300: oklch(79% 0.004 264);
+	--zinc-400: oklch(68% 0.004 264);
+	--zinc-500: oklch(58% 0.005 264);
+	--zinc-600: oklch(48% 0.005 264);
+	--zinc-700: oklch(39% 0.004 264);
+	--zinc-800: oklch(30% 0.004 264);
+	--zinc-850: oklch(27.5% 0.0035 264); /* dark popover: one visible step above the zinc-900 card */
+	--zinc-900: oklch(23% 0.003 264);
+	--zinc-950: oklch(15% 0.003 264);
+
+	/* Torch Red — Hue 22° (destructive). 600 darkened to 53% L for AA on white. */
+	--torch-red-50: oklch(97.2% 0.013 22);
+	--torch-red-100: oklch(94% 0.028 22);
+	--torch-red-200: oklch(88% 0.06 22);
+	--torch-red-300: oklch(79% 0.118 22);
+	--torch-red-400: oklch(68% 0.19 22);
+	--torch-red-500: oklch(60% 0.235 22);
+	--torch-red-600: oklch(53% 0.225 22);
+	--torch-red-700: oklch(45% 0.19 22);
+	--torch-red-800: oklch(36% 0.15 22);
+	--torch-red-900: oklch(28% 0.11 22);
+	--torch-red-950: oklch(18% 0.075 22);
+
+	/* Blue Gem — Hue 285° (collectible, violet-blue) */
+	--blue-gem-50: oklch(97.2% 0.014 285);
+	--blue-gem-100: oklch(94% 0.03 285);
+	--blue-gem-200: oklch(88% 0.065 285);
+	--blue-gem-300: oklch(79% 0.13 285);
+	--blue-gem-400: oklch(68% 0.205 285);
+	--blue-gem-500: oklch(58% 0.265 285);
+	--blue-gem-600: oklch(48% 0.265 285);
+	--blue-gem-700: oklch(40% 0.225 285);
+	--blue-gem-800: oklch(31% 0.18 285);
+	--blue-gem-900: oklch(23% 0.135 285);
+	--blue-gem-950: oklch(15% 0.09 285);
+
+	/* Purple Heart — Hue 309° (edition / brand accent, magenta-purple) */
+	--purple-heart-50: oklch(97.2% 0.014 309);
+	--purple-heart-100: oklch(94% 0.03 309);
+	--purple-heart-200: oklch(88% 0.065 309);
+	--purple-heart-300: oklch(79% 0.135 309);
+	--purple-heart-400: oklch(68% 0.215 309);
+	--purple-heart-500: oklch(60% 0.275 309);
+	--purple-heart-600: oklch(52% 0.275 309);
+	--purple-heart-700: oklch(43% 0.23 309);
+	--purple-heart-800: oklch(33% 0.18 309);
+	--purple-heart-900: oklch(24% 0.135 309);
+	--purple-heart-950: oklch(15% 0.09 309);
+
+	/* Caribbean Green — Hue 173° (standard / success, teal-green).
+	   600 darkened to 45% L for AA on white. */
+	--caribbean-green-50: oklch(97.2% 0.018 173);
+	--caribbean-green-100: oklch(94% 0.035 173);
+	--caribbean-green-200: oklch(88% 0.07 173);
+	--caribbean-green-300: oklch(79% 0.115 173);
+	--caribbean-green-400: oklch(68% 0.14 173);
+	--caribbean-green-500: oklch(58% 0.135 173);
+	--caribbean-green-600: oklch(45% 0.118 173);
+	--caribbean-green-700: oklch(38% 0.1 173);
+	--caribbean-green-800: oklch(30% 0.08 173);
+	--caribbean-green-900: oklch(23% 0.06 173);
+	--caribbean-green-950: oklch(15% 0.04 173);
+
+	/* Flush Orange — Hue 52° (warning, amber-orange). Use 700 for body on white. */
+	--flush-orange-50: oklch(97.2% 0.018 52);
+	--flush-orange-100: oklch(94% 0.038 52);
+	--flush-orange-200: oklch(88% 0.075 52);
+	--flush-orange-300: oklch(79% 0.13 52);
+	--flush-orange-400: oklch(72% 0.17 52);
+	--flush-orange-500: oklch(68% 0.18 52);
+	--flush-orange-600: oklch(54% 0.155 52);
+	--flush-orange-700: oklch(45% 0.13 52);
+	--flush-orange-800: oklch(36% 0.105 52);
+	--flush-orange-900: oklch(28% 0.08 52);
+	--flush-orange-950: oklch(18% 0.055 52);
+
+	/* Azure Radiance — Hue 250° (info, sky-blue) */
+	--azure-radiance-50: oklch(97.2% 0.014 250);
+	--azure-radiance-100: oklch(94% 0.03 250);
+	--azure-radiance-200: oklch(88% 0.06 250);
+	--azure-radiance-300: oklch(79% 0.115 250);
+	--azure-radiance-400: oklch(68% 0.175 250);
+	--azure-radiance-500: oklch(60% 0.215 250);
+	--azure-radiance-600: oklch(52% 0.225 250);
+	--azure-radiance-700: oklch(43% 0.195 250);
+	--azure-radiance-800: oklch(34% 0.155 250);
+	--azure-radiance-900: oklch(25% 0.115 250);
+	--azure-radiance-950: oklch(16% 0.075 250);
+
+	/* Dark-tuned tone values (boosted chroma; activated via .dark below) */
+	--tone-edition-dark: oklch(62% 0.295 318);
+	--tone-collectible-dark: oklch(72% 0.225 285);
+	--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);
+	/* 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);
+
+	/* ----------------------------------------------------------------------
+	   Semantic tokens — light mode (the counterpart)
+	   ---------------------------------------------------------------------- */
+	--background: var(--white);
+	--foreground: var(--zinc-950);
+	--card: var(--white);
+	--card-foreground: var(--zinc-950);
+	--popover: var(--white);
+	--popover-foreground: var(--zinc-950);
+
+	--primary: var(--zinc-950);
+	--primary-foreground: var(--zinc-50);
+	--secondary: var(--zinc-100);
+	--secondary-foreground: var(--zinc-950);
+	--muted: var(--zinc-100);
+	--muted-foreground: var(--zinc-600);
+	--accent: var(--zinc-100);
+	--accent-foreground: var(--zinc-950);
+	--destructive: var(--torch-red-600);
+	--destructive-foreground: var(--white);
+	--success: var(--caribbean-green-600);
+	--success-foreground: var(--zinc-50);
+
+	--border: var(--zinc-200);
+	/* Stronger structural divider (grid lines, table rules) — a higher-contrast
+	   step on the same neutral ramp as --border. */
+	--border-strong: var(--zinc-300);
+	--input: var(--zinc-200);
+	--ring: var(--zinc-500);
+
+	/* Tones — light (all clear WCAG AA on white) */
+	--tone-standard: var(--caribbean-green-600);
+	--tone-collectible: var(--blue-gem-600);
+	--tone-edition: var(--purple-heart-700);
+	--tone-warning: var(--flush-orange-700);
+	--tone-info: var(--azure-radiance-600);
+	--highlight: var(--purple-heart-700);
+
+	/* Tone ink — light mode the tone fills resolve to dark 600/700 steps, so the
+	   legible ink on them is the light neutral. (Flips to dark ink under .dark.) */
+	--tone-standard-foreground: var(--zinc-50);
+	--tone-collectible-foreground: var(--zinc-50);
+	--tone-edition-foreground: var(--zinc-50);
+	--tone-warning-foreground: var(--zinc-50);
+	--tone-info-foreground: var(--zinc-50);
+	--highlight-foreground: var(--zinc-50);
+
+	/* Overlay — a fixed, theme-independent dark surface (subtly-tinted near-black,
+	   never pure #000) for scrims, media letterbox, and pills on imagery, with a
+	   light ink. Mode-independent: a scrim darkens content in both themes, so the
+	   same value is repeated verbatim under .dark below (kept explicit so every
+	   semantic token resolves within each mode block — see themes.test.ts). */
+	--overlay: var(--zinc-950);
+	--overlay-foreground: var(--zinc-50);
+
+	/* Sidebar — light */
+	--sidebar: var(--white);
+	--sidebar-foreground: var(--zinc-950);
+	--sidebar-primary: var(--zinc-950);
+	--sidebar-primary-foreground: var(--zinc-50);
+	--sidebar-accent: var(--zinc-100);
+	--sidebar-accent-foreground: var(--zinc-950);
+	--sidebar-border: var(--zinc-200);
+	--sidebar-ring: var(--zinc-500);
+
+	/* ----------------------------------------------------------------------
+	   Layout tokens (mode-independent) — see DESIGN.md → Grid & layout.
+	   Fluid-first: no global max-width; max-width is opt-in per region.
+	   ---------------------------------------------------------------------- */
+	/* Two spacing steps — 8px at the default scale — so every Stack/Row/Grid
+	   gap number follows the density ("Character") control with the rest of
+	   the spacing scale instead of staying a fixed 8px beside it. */
+	--rhythm-unit: calc(var(--spacing) * 2);
+	--grid-columns: 12;
+	/* Inter-column gutter: 16px on phones, easing to 24px on desktop. */
+	--grid-gutter: clamp(1rem, 0.8rem + 1vw, 1.5rem);
+	/* Page margin (outer inset): 16px → 32px, fluid. */
+	--page-inset: clamp(16px, 4vw, 32px);
+
+	/* Content-width scale — opt-in per Region (`max="…"`), named by PURPOSE not
+	   size. Cap text MEASURE (prose) separately from layout WIDTH. A page's width
+	   is a Region; the 12-col grid is used WITHIN a region for multi-column content.
+	   See DESIGN.md → Grid & layout. */
+	--measure-prose: 65ch; /* reading measure (~66 chars) — long-form text */
+
+	/* px, NEVER rem — a region cap is a layout measurement, not type.
+	   These were declared in rem with the px values stated in these very
+	   comments, and the comments were wrong in any app that retunes the root
+	   font size. The docs app runs a 14px responsive root, so `56rem` rendered
+	   784px while claiming 896px and `80rem` rendered 1120px while claiming
+	   1280px — the default theme silently 12.5% under its own spec, in its own
+	   primary consumer. Every generated theme already declares px; Base was
+	   the only one that did not, which is the worst possible one to get wrong.
+	   The values below are DESIGN.md's table verbatim. */
+	--region-form: 480px; /* narrow single-col forms, auth, dialogs */
+	--region-feed: 640px; /* single-column timeline / reading feed */
+	--region-content: 896px; /* general content + settings/admin panes */
+	--region-wide: 1280px; /* dashboards, tables, multi-column grids */
+	--region-full: 1536px; /* full-bleed safety ceiling */
+	--region-ultrawide: 1800px; /* legacy — prefer --region-full */
+
+	--nav-height: 56px;
+	--sidebar-width: 256px;
+	--sidebar-width-collapsed: 64px;
+
+	/* Layering (z-index) moved to styles.css in 0.44.0 — it is contract, not
+	   theme. A theme may override an individual step here; it must not be the
+	   only place a step exists. See DESIGN.md → Layering. */
+
+	/* ----------------------------------------------------------------------
+	   Motion tokens (mode-independent) — see DESIGN.md → Motion.
+	   Quick, deliberate, skippable; no spring/overshoot in product UI.
+
+	   Every duration is multiplied by --motion-scale, so one switch damps or
+	   kills all token-driven motion: the global reduced-motion rule and the
+	   <MotionProvider> toggle both set --motion-scale to 0 (see styles.css).
+	   A duration of 0 makes transitions resolve instantly and infinite loaders
+	   hold their first frame — i.e. motion becomes static, never broken.
+	   ---------------------------------------------------------------------- */
+	--motion-scale: 1;
+
+	/* Duration ladder — the 75/150/200/300/500 scale, scaled by --motion-scale. */
+	--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));
+
+	/* Semantic durations — entrances settle a touch longer than exits. */
+	--motion-duration-enter: var(--motion-duration-base);
+	--motion-duration-exit: var(--motion-duration-fast);
+
+	/* Easings — semantic names (Material-family curves).
+	   standard   ≈ ease-in-out — two-way moves, the general default.
+	   decelerate ≈ ease-out    — entrances (fast in, soft settle).
+	   emphasized — strong settle for larger surfaces (dialogs, sheets, drawers).
+	   linear     — indeterminate loaders (spin/shimmer).
+	   spring     — a gentle single overshoot (~+4%); the default for delightful
+	                pops (overlay open, control selection). Tasteful, not gaudy.
+	   bounce     — a stronger overshoot (~+10%); opt-in for playful accents
+	                (success ticks, celebratory moments). Use sparingly.
+	   Springs are applied on ENTER only; exits stay overshoot-free. */
+	--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;
+}
+
+/* ==========================================================================
+   Semantic tokens — dark mode (the brand default)
+   ========================================================================== */
+.dark,
+.dark[data-sable-theme="base"],
+[data-sable-theme="base"].dark,
+/* A preset-scoped subtree inside a dark page follows the page into dark mode;
+   add `.light` to that subtree to pin it light. */
+.dark [data-sable-theme="base"]:not(.light) {
+	/* Elevation, dark. A drop barely registers on near-black, so depth is the
+	   surface step (popover above card) plus a faint top-edge highlight that
+	   catches "light" on anything floating. Deeper drops than light mode, since
+	   black on near-black needs more alpha to read at all. */
+	--theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+	--theme-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px -1px rgb(0 0 0 / 0.25);
+	--theme-shadow-md: inset 0 1px 0 0 rgb(255 255 255 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.45);
+	--theme-shadow-lg: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.3), 0 20px 40px -12px rgb(0 0 0 / 0.55);
+	--theme-shadow-xl: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.3), 0 28px 56px -16px rgb(0 0 0 / 0.6);
+
+	--background: var(--zinc-950);
+	--foreground: var(--zinc-50);
+	--card: var(--zinc-900);
+	--card-foreground: var(--zinc-50);
+	--popover: var(--zinc-850);
+	--popover-foreground: var(--zinc-50);
+
+	--primary: var(--zinc-50);
+	--primary-foreground: var(--zinc-950);
+	--secondary: var(--zinc-800);
+	--secondary-foreground: var(--zinc-50);
+	--muted: var(--zinc-800);
+	--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). */
+	--success: var(--success-dark);
+	--success-foreground: var(--zinc-950);
+
+	--border: oklch(from var(--zinc-700) l c h / 0.4);
+	--border-strong: oklch(from var(--zinc-500) l c h / 0.55);
+	--input: oklch(from var(--zinc-700) l c h / 0.4);
+	--ring: var(--zinc-500);
+
+	/* Tones — dark-tuned (boosted chroma for vibrancy on the dark canvas) */
+	--tone-standard: var(--tone-standard-dark);
+	--tone-collectible: var(--tone-collectible-dark);
+	--tone-edition: var(--tone-edition-dark);
+	--tone-warning: var(--tone-warning-dark);
+	--tone-info: var(--tone-info-dark);
+	--highlight: var(--highlight-dark);
+
+	/* Tone ink — dark mode the tone fills resolve to lighter dark-tuned values,
+	   so the legible ink flips to the dark neutral. (--overlay* repeat the :root
+	   values verbatim — a dark scrim is the same in both modes.) */
+	--tone-standard-foreground: var(--zinc-950);
+	--tone-collectible-foreground: var(--zinc-950);
+	--tone-edition-foreground: var(--zinc-950);
+	--tone-warning-foreground: var(--zinc-950);
+	--tone-info-foreground: var(--zinc-950);
+	--highlight-foreground: var(--zinc-950);
+	--overlay: var(--zinc-950);
+	--overlay-foreground: var(--zinc-50);
+
+	/* Sidebar — dark */
+	--sidebar: var(--zinc-950);
+	--sidebar-foreground: var(--zinc-50);
+	--sidebar-primary: var(--zinc-50);
+	--sidebar-primary-foreground: var(--zinc-950);
+	--sidebar-accent: var(--zinc-800);
+	--sidebar-accent-foreground: var(--zinc-50);
+	--sidebar-border: var(--zinc-900);
+	--sidebar-ring: var(--zinc-500);
+}

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

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

package/dist/themes/base/index.js

@@ -0,0 +1 @@
+export { baseTheme, base_default as default } from '../../chunk-EP55KSYA.js';