@sableui/react 0.0.0-stage → 0.1.0

package/dist/theme-provider-BWcizhAt.d.ts

@@ -0,0 +1,105 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as ThemeManifest } from './_contract-CYScOdf5.js';
+
+declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
+declare const DEFAULT_THEME_ID: string;
+declare const defaultThemeId: string;
+declare const themeManifests: readonly [ThemeManifest, ThemeManifest, ThemeManifest, ThemeManifest, ThemeManifest, ThemeManifest, ThemeManifest];
+/** Six distinct starting points; legacy themes remain addressable separately. */
+declare const featuredThemeManifests: ThemeManifest[];
+type ThemeId = (typeof themeManifests)[number]["id"];
+declare const themeIds: ThemeId[];
+declare const themeManifestById: Record<ThemeId, ThemeManifest>;
+declare function isThemeId(value: string): value is ThemeId;
+declare function getThemeManifest(themeId: ThemeId): ThemeManifest;
+/**
+ * Builds a combined `themeManifestById`-shaped lookup from the built-in
+ * registry plus any consumer-supplied `customThemes`. Used by
+ * `SableThemeProvider` so an externally-supplied theme id survives
+ * storage-restore instead of being silently discarded back to the default.
+ * Custom themes with an id colliding with a built-in one win (last write).
+ */
+declare function buildThemeManifestById(customThemes?: readonly ThemeManifest[]): Record<string, ThemeManifest>;
+/** Own-property check against an arbitrary `themeManifestById`-shaped map. */
+declare function isKnownThemeId(value: string, manifestById: Record<string, ThemeManifest>): boolean;
+
+/**
+ * A theme id: one of Sable's built-in ids (`themeIds`), or any string when a
+ * `customThemes` manifest supplies it. The `string & {}` trick keeps
+ * autocomplete for the closed union while still accepting arbitrary strings
+ * — see https://www.totaltypescript.com/tips/create-autocomplete-helper.
+ */
+type AnyThemeId = ThemeId | (string & {});
+declare const SABLE_COLOR_STORAGE_KEY: "sable-color-preference";
+declare const SABLE_THEME_STORAGE_KEY: "sable-theme-id";
+type SableColorMode = "light" | "dark";
+type SableThemePreference = SableColorMode | "system";
+interface SableThemeContextValue {
+    /** Resolved color mode applied to the target element. */
+    mode: SableColorMode;
+    /** Explicit alias for consumers that prefer color-mode language. */
+    colorMode: SableColorMode;
+    /** Stored color preference; "system" resolves through prefers-color-scheme. */
+    preference: SableThemePreference;
+    /** Explicit alias for consumers that prefer color-preference language. */
+    colorPreference: SableThemePreference;
+    /** Active Sable design theme id. */
+    themeId: AnyThemeId;
+    /** Featured theme manifests; legacy imports remain available separately. */
+    themes: typeof featuredThemeManifests;
+    setPreference: (preference: SableThemePreference) => void;
+    setColorPreference: (preference: SableThemePreference) => void;
+    setThemeId: (themeId: AnyThemeId) => void;
+    toggle: () => void;
+    toggleColorMode: () => void;
+}
+interface SableThemeProviderProps {
+    children: ReactNode;
+    /** Initial color preference when uncontrolled and no stored value exists. @default "dark" */
+    defaultPreference?: SableThemePreference;
+    /** Controlled color preference. */
+    preference?: SableThemePreference;
+    /** Notified whenever setPreference/setColorPreference is called. */
+    onPreferenceChange?: (preference: SableThemePreference) => void;
+    /** Initial design theme when uncontrolled and no stored value exists. @default "base" */
+    defaultThemeId?: AnyThemeId;
+    /** Controlled design theme id. */
+    themeId?: AnyThemeId;
+    /** Notified whenever setThemeId is called. */
+    onThemeIdChange?: (themeId: AnyThemeId) => void;
+    /** localStorage key for the color preference. Pass null to disable persistence. */
+    colorStorageKey?: string | null;
+    /** localStorage key for the design theme id. Pass null to disable persistence. */
+    themeStorageKey?: string | null;
+    /**
+     * Where to write `.dark` and `data-sable-theme`. Defaults to <html> so
+     * portaled overlays share the same token layer.
+     */
+    target?: "root" | (() => HTMLElement | null);
+    /**
+     * Additional theme manifests beyond Sable's built-in themes, e.g. a
+     * theme synthesized for a consumer project from an app-owned preset.
+     * Their ids become valid `themeId` values and survive storage-restore
+     * (localStorage / cross-tab `storage` events) just like built-in ids.
+     * Sable does not inject their CSS — the consumer is responsible for
+     * importing the theme's stylesheet.
+     */
+    customThemes?: ThemeManifest[];
+}
+declare function applySableColorMode(mode: SableColorMode, target?: HTMLElement | null): void;
+declare function applySableTheme(themeId: AnyThemeId, target?: HTMLElement | null): void;
+/**
+ * Applies and persists Sable's two theme axes:
+ *
+ * - color preference: light / dark / system, written as `.dark`
+ * - design theme: any id in `themeIds` (or a custom theme), written as `data-sable-theme`
+ */
+declare function SableThemeProvider({ children, defaultPreference, preference: controlledPreference, onPreferenceChange, defaultThemeId, themeId: controlledThemeId, onThemeIdChange, colorStorageKey, themeStorageKey, target, customThemes, }: SableThemeProviderProps): react.JSX.Element;
+/**
+ * Reads Sable's active color preference and design theme. Safe without a
+ * provider; mutators become no-ops and the default (Base, dark) is reported.
+ */
+declare function useSableTheme(): SableThemeContextValue;
+
+export { type AnyThemeId as A, DEFAULT_THEME_ID as D, SABLE_COLOR_STORAGE_KEY as S, type ThemeId as T, SABLE_THEME_ATTRIBUTE as a, SABLE_THEME_STORAGE_KEY as b, type SableColorMode as c, type SableThemeContextValue as d, type SableThemePreference as e, SableThemeProvider as f, type SableThemeProviderProps as g, applySableColorMode as h, applySableTheme as i, buildThemeManifestById as j, defaultThemeId as k, featuredThemeManifests as l, getThemeManifest as m, isKnownThemeId as n, isThemeId as o, themeManifestById as p, themeManifests as q, themeIds as t, useSableTheme as u };

package/dist/themes/atelier/atelier.css

@@ -0,0 +1,213 @@
+/* ==========================================================================
+   Mono Editorial — 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="atelier"] {
+	/* 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: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
+
+	/*
+	 * Region/page-inset foundation vars consumed by the `Region` layout primitive.
+	 * Previously undefined in this theme, so every `Region` on this page silently
+	 * inherited the original default theme's hardcoded defaults (1536px/1280px/896px, 32px inset) via
+	 * the package's unconditional default-theme import —
+	 * unrelated to this reference's actual measured rhythm. Findings doc's "Layout &
+	 * information architecture" section: capped content sections measured ~1200px
+	 * with 48px side padding; full-bleed media panels use small (~12-20px) margins
+	 * instead (handled per-instance via `bleed`, not this cap).
+	 */
+	--page-inset: clamp(20px, 3vw, 48px);
+	--region-form: 480px;
+	--region-feed: 640px;
+	--region-content: 896px;
+	--region-wide: 1200px; /* 1200px — matches the findings doc's measured container width */
+	--region-full: 1440px;
+	--region-ultrawide: 1800px;
+
+	/* 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;
+
+	/* Type-scale foundation vars consumed by styles.css's paired text-* utilities. */
+	--type-display-4xl-weight: 700;
+	--type-display-4xl-leading: 0.8;
+	--type-display-4xl-tracking: -0.05em;
+	--type-display-3xl-size: 9.1429rem /* 128px at the 14px desktop root */;
+	--type-display-3xl-weight: 700;
+	--type-display-3xl-leading: 0.8;
+	--type-display-3xl-tracking: -0.05em;
+	--type-display-2xl-size: 6.2857rem /* 88px at the 14px desktop root */;
+	--type-display-2xl-weight: 700;
+	--type-display-2xl-leading: 0.85;
+	--type-display-2xl-tracking: -0.045em;
+	--type-display-xl-size: 4.5714rem /* 64px at the 14px desktop root */;
+	--type-display-xl-weight: 700;
+	--type-display-xl-leading: 0.9;
+	--type-display-xl-tracking: -0.04em;
+	--type-display-lg-size: 3.1429rem /* 44px at the 14px desktop root */;
+	--type-display-lg-weight: 700;
+	--type-display-lg-leading: 0.95;
+	--type-display-lg-tracking: -0.035em;
+	--type-heading-weight: 700;
+	--type-heading-1-size: 2.3571rem /* 33px at the 14px desktop root */;
+	--type-heading-1-leading: 1.0;
+	--type-heading-1-tracking: -0.03em;
+	--type-heading-2-size: 1.8571rem /* 26px at the 14px desktop root */;
+	--type-heading-2-leading: 1.1;
+	--type-heading-2-tracking: -0.025em;
+	--type-heading-3-size: 1.3571rem /* 19px at the 14px desktop root */;
+	--type-heading-3-leading: 1.2;
+	--type-heading-3-tracking: -0.02em;
+	--type-heading-4-size: 1.1429rem /* 16px at the 14px desktop root */;
+	--type-heading-4-leading: 1.2;
+	--type-heading-4-tracking: -0.02em;
+	--type-title-weight: 400;
+	--type-title-leading: 1.2;
+	--type-title-tracking: -0.02em;
+	--type-title-sm-tracking: -0.01em;
+
+	/* Overline/eyebrow foundation vars consumed by styles.css's text-overline utility. */
+	--type-overline-size: 0.7857rem /* 11px at the 14px desktop root */;
+	--type-overline-weight: 400;
+	--type-overline-leading: 1.4;
+	--type-overline-tracking: 0em;
+	--type-overline-transform: uppercase;
+
+	/* ----------------------------------------------------------------------
+	   Semantic tokens — light mode
+	   ---------------------------------------------------------------------- */
+	--background: #ffffff;
+	--foreground: #000000;
+	/* White, like the page: Atelier's chrome is flat, so a card is drawn by its
+	   hairline, not a fill. The old 93% grey sat DARKER than --muted (so a card
+	   in a muted well inverted the surface order) and equal to --accent (so a
+	   pressed toggle on a card was invisible), and swallowed its own border. */
+	--card: #ffffff;
+	--card-foreground: #000000;
+	--popover: #ffffff;
+	--popover-foreground: #000000;
+	--muted: oklch(96% 0 0);
+	--muted-foreground: oklch(51% 0 0);
+	--border: oklch(92% 0 0);
+	--border-strong: oklch(85% 0 0);
+	--input: oklch(92% 0 0);
+	--ring: #000000;
+	--primary: #000000;
+	--primary-foreground: #ffffff;
+	--secondary: oklch(96% 0 0);
+	--secondary-foreground: #000000;
+	--accent: oklch(93% 0 0);
+	--accent-foreground: #000000;
+	--destructive: oklch(50% 0.18 22);
+	--destructive-foreground: #ffffff;
+	--success: 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-warning: oklch(52% 0.12 52);
+	--highlight: oklch(93% 0 0);
+	--tone-standard-foreground: #ffffff;
+	--tone-collectible-foreground: #ffffff;
+	--tone-edition-foreground: #ffffff;
+	--tone-info-foreground: #ffffff;
+	--tone-warning-foreground: #ffffff;
+	--highlight-foreground: #000000;
+	--overlay: oklch(7% 0 0 / 0.55);
+	--overlay-foreground: #ffffff;
+	--sidebar: #ffffff;
+	--sidebar-foreground: #000000;
+	--sidebar-primary: #000000;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: oklch(96% 0 0);
+	--sidebar-accent-foreground: #000000;
+	--sidebar-border: oklch(92% 0 0);
+	--sidebar-ring: #000000;
+
+	/* ----------------------------------------------------------------------
+	   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(400ms * var(--motion-scale));
+	--motion-duration-slower: calc(700ms * var(--motion-scale));
+	--motion-duration-enter: calc(400ms * var(--motion-scale));
+	--motion-duration-exit: calc(200ms * var(--motion-scale));
+	--motion-ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--motion-ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--motion-ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1);
+	/* Spring/bounce carried from Sable defaults per the audit ("nothing springy
+	   observed in reference") — not derived curves of their own. */
+	--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
+   ========================================================================== */
+.dark[data-sable-theme="atelier"],
+[data-sable-theme="atelier"].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="atelier"] .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="atelier"]:not(.light) {
+	--background: oklch(13% 0 0);
+	--foreground: #ffffff;
+	--card: oklch(20.5% 0 0);
+	--card-foreground: #ffffff;
+	--popover: oklch(24% 0 0);
+	--popover-foreground: #ffffff;
+	--muted: oklch(26% 0 0);
+	--muted-foreground: oklch(84% 0 0);
+	--border: oklch(29% 0 0);
+	--border-strong: oklch(36% 0 0);
+	--input: oklch(29% 0 0);
+	--ring: #ffffff;
+	--primary: #ffffff;
+	--primary-foreground: #000000;
+	--secondary: oklch(26% 0 0);
+	--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);
+	--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-warning: oklch(80% 0.13 52);
+	--highlight: oklch(26% 0 0);
+	--tone-standard-foreground: oklch(13% 0 0);
+	--tone-collectible-foreground: oklch(13% 0 0);
+	--tone-edition-foreground: oklch(13% 0 0);
+	--tone-info-foreground: oklch(13% 0 0);
+	--tone-warning-foreground: oklch(13% 0 0);
+	--highlight-foreground: #ffffff;
+	--overlay: oklch(0% 0 0 / 0.7);
+	--overlay-foreground: #ffffff;
+	--sidebar: oklch(13% 0 0);
+	--sidebar-foreground: #ffffff;
+	--sidebar-primary: #ffffff;
+	--sidebar-primary-foreground: #000000;
+	--sidebar-accent: oklch(21% 0 0);
+	--sidebar-accent-foreground: #ffffff;
+	--sidebar-border: oklch(26% 0 0);
+	--sidebar-ring: #ffffff;
+}

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

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

package/dist/themes/atelier/index.js

@@ -0,0 +1 @@
+export { atelierTheme, atelier_default as default } from '../../chunk-YXBOYWBN.js';