@wildo-ai/presets-components 1.0.1 → 1.1.0

package/dist/esm/themes/editorial.theme.js

@@ -0,0 +1,645 @@
+import { InteractiveVariant, SurfaceVariant, FormControlVariant, IndicatorVariant, SelectableVariant, TypographyVariant, SpacingSemantic, DesignTokenModeStrategy, DesignTokenValueType, } from '@wildo-ai/presets-components-models';
+function recipe(r) {
+    return { base: r.base, states: r.states ?? {}, sizes: r.sizes, motion: r.motion ?? {}, gesture: r.gesture, policy: r.policy };
+}
+// ============================================================
+// Editorial theme
+//
+// Persona: long-form reading, knowledge bases, thought-leadership SaaS,
+// publication-grade dashboards.
+// References: NYTimes, Stripe Press, Substack, The Verge, Vercel Press.
+//
+// Design DNA:
+//   - SERIF headings (Source Serif 4 / Crimson Pro / Tiempos / Georgia fallback)
+//     — every other theme in the lineup is sans; serif is the immediate
+//     visual signature of "publication-grade".
+//   - Humanist-sans body (Source Sans 3 / Inter) with generous line-height
+//     so paragraphs feel like article copy, not UI strings.
+//   - Hairline borders only (`border-foreground/10`), almost no shadows —
+//     editorial layouts trust whitespace and typography to do the heavy
+//     lifting; box-shadows would feel "gadget-y".
+//   - 2px radius — the page reads as paper, not as plastic chrome.
+//   - GENEROUS spacing scale (largest in lineup) — column-grid breathing
+//     room, like a printed magazine spread.
+//   - Single-accent palette: warm off-white background, charcoal text,
+//     deep ink-blue accent. The whole page is monochrome until you reach
+//     a link, a tag, or a focus ring — then a single intentional color.
+//   - Slow, elegant motion (normal duration, ease-out) — refined, not snappy.
+//   - Underlined links by default (web-typographic convention), hover
+//     thickens the underline rather than removing it.
+// ============================================================
+// -- Shared constants --
+const ED = {
+    /** Hairline rule: hugely subtle, lets typography lead. */
+    hairline: 'border border-foreground/10',
+    /** Slightly stronger hairline for surfaces that need a definitive edge. */
+    edge: 'border border-foreground/15',
+    radius: 'rounded-sm',
+    focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+    invalid: 'aria-invalid:ring-destructive/30 dark:aria-invalid:ring-destructive/50 aria-invalid:border-destructive',
+};
+// ============================================================
+// MOTION PERSONALITY — Editorial
+// ============================================================
+//   Hover/focus  : NORMAL (250ms) + DEFAULT  → bidirectional state-change
+//                                              tempo. DEFAULT (Material
+//                                              Standard) is correct here
+//                                              over ENTER because hover
+//                                              flips both ways and a
+//                                              pure ease-out feels mushy
+//                                              when reverting to rest.
+//   Overlay enter: SLOW   (350ms) + ENTER   → "page-turn" pacing.
+//                                              ENTER (pure decelerate)
+//                                              for the slow settle that
+//                                              defines publication UI.
+//   Overlay exit : NORMAL (250ms) + EXIT    → quicker than enter (rule
+//                                              of thumb: exit < enter,
+//                                              "out faster than in").
+//   Backdrop     : SLOW/NORMAL    + ENTER/EXIT  → matches overlays.
+//   Gestures     : NONE — print/serif aesthetics avoid bouncy
+//                  interactivity. The tempo IS the personality; springs
+//                  would feel like Material Design pasted into NYT.
+//
+// TR-14 motion-coherence: backdrop animations now carry explicit
+// ENTER/EXIT easing tokens (previously omitted, fell back to CSS `ease`).
+// ============================================================
+const ED_MOTION = {
+    interactive: 'transition-[background-color,color,border-color,box-shadow,text-decoration-thickness] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+    formControl: 'transition-[color,border-color,box-shadow] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+    selectable: 'transition-[background-color,color,border-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+    enterFadeZoom: 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none',
+    exitFadeZoom: 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--motion-duration-normal)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none',
+    enterDirectional: 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:data-[state=open]:animate-none',
+    backdropEnter: 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-slow)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none',
+    backdropExit: 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-[var(--motion-duration-normal)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none',
+};
+// ============================================================
+// INTERACTIVE
+// Editorial buttons are restrained: no shadows, hairline borders, type
+// is the focal point. Press feedback is a subtle bg shift, not a scale.
+// ============================================================
+const interactiveSizes = {
+    xs: 'h-7 px-3 text-xs gap-1.5 pointer-coarse:min-h-9',
+    sm: 'h-8 px-3.5 gap-2 pointer-coarse:min-h-11',
+    md: 'h-10 px-5 py-2 pointer-coarse:min-h-11',
+    lg: 'h-12 px-7 pointer-coarse:min-h-12',
+    icon: 'size-10 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+    'icon-sm': 'size-8 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+};
+const interactive = {
+    [InteractiveVariant.PRIMARY]: recipe({
+        base: `bg-primary text-primary-foreground ${ED.radius} font-medium text-sm tracking-tight cursor-pointer`,
+        states: {
+            hover: 'hover:bg-primary/90',
+            active: 'active:bg-primary/80',
+            focus: ED.focus,
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    [InteractiveVariant.SECONDARY]: recipe({
+        base: `bg-secondary text-secondary-foreground ${ED.radius} font-medium text-sm tracking-tight cursor-pointer`,
+        states: {
+            hover: 'hover:bg-secondary/80',
+            active: 'active:bg-secondary/70',
+            focus: ED.focus,
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    [InteractiveVariant.OUTLINE]: recipe({
+        base: `bg-transparent text-foreground ${ED.edge} ${ED.radius} font-medium text-sm tracking-tight cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/25',
+            active: 'active:bg-muted/80',
+            focus: ED.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:border-foreground/30',
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    [InteractiveVariant.DESTRUCTIVE]: recipe({
+        base: `bg-destructive text-destructive-foreground ${ED.radius} font-medium text-sm tracking-tight cursor-pointer`,
+        states: {
+            hover: 'hover:bg-destructive/90',
+            active: 'active:bg-destructive/80',
+            focus: ED.focus,
+            highlighted: 'focus:bg-destructive/10 focus:text-destructive',
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    [InteractiveVariant.GHOST]: recipe({
+        base: `text-foreground ${ED.radius} font-medium text-sm tracking-tight cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted',
+            active: 'active:bg-muted/80',
+            focus: ED.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:text-foreground',
+            highlighted: 'focus:bg-muted',
+            open: 'data-[state=open]:bg-muted',
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    // Editorial links: underlined by default, web-typographic convention.
+    // Hover thickens the decoration rather than removing it (the underline IS
+    // the affordance — never strip it on hover, that's an anti-pattern in
+    // long-form copy).
+    [InteractiveVariant.LINK]: recipe({
+        base: 'text-primary underline underline-offset-[3px] decoration-primary/40 decoration-1 font-medium text-sm cursor-pointer',
+        states: {
+            hover: 'hover:decoration-primary hover:decoration-2',
+            active: 'active:text-primary/80',
+            focus: ED.focus,
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: {
+            xs: 'h-7 px-2 text-xs gap-1 pointer-coarse:min-h-9',
+            sm: 'h-8 px-2 gap-1.5 pointer-coarse:min-h-11',
+            md: 'h-10 px-2 py-2 pointer-coarse:min-h-11',
+            lg: 'h-12 px-2 pointer-coarse:min-h-12',
+            icon: 'size-10 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+            'icon-sm': 'size-8 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+        },
+        motion: { transition: ED_MOTION.interactive },
+    }),
+    // Editorial accent: a refined letterpress-feel button — primary fill,
+    // restrained gradient sweep (no rainbow), small caps tracking.
+    [InteractiveVariant.ACCENT]: recipe({
+        base: `relative bg-primary text-primary-foreground font-semibold uppercase tracking-[0.08em] ${ED.radius} bg-[length:200%_100%] bg-gradient-to-r from-accent-gradient-from via-accent-gradient-via to-accent-gradient-to animate-[gradient-rotate_5s_ease_infinite] motion-reduce:animate-none text-xs cursor-pointer`,
+        states: {
+            hover: 'hover:brightness-105',
+            active: 'active:brightness-95',
+            focus: ED.focus,
+            disabled: ED.disabled,
+            invalid: ED.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: {
+            transition: 'transition-[background-position,filter] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// SURFACE
+// SURFACE PERSONALITY — paper, not chrome: hairlines over shadows, page shell
+// as paper stock, transient notices as restrained clipping cards.
+// Editorial surfaces are paper, not chrome. Hairline rules + warm bg.
+// No drop shadows on cards (a magazine doesn't levitate its articles).
+// Dialogs get one soft shadow because they ARE elevated above the page.
+// ============================================================
+const surface = {
+    [SurfaceVariant.BASE]: recipe({
+        base: `bg-background text-foreground ${ED.hairline} ${ED.radius}`,
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Content card: distinct `surface-raised` fill + editorial edge + radius.
+        // Restrained — no shadow on an inline card (editorial reserves shadows for
+        // genuinely floating surfaces). Always painted.
+        base: `bg-surface-raised text-surface-raised-foreground ${ED.edge} ${ED.radius}`,
+    }),
+    [SurfaceVariant.RAISED]: recipe({
+        // Popover: a small shadow IS warranted (it's actually floating), but
+        // restrained — no two-step "md+xl" stack like Material.
+        // `fill-*` mirrors `bg-*` so the Tooltip's Radix arrow (an SVG painted via
+        // `fill`, inherited across Radix's arrow-wrapper span) matches the body.
+        base: `bg-background fill-background text-foreground ${ED.edge} ${ED.radius} shadow-[0_4px_12px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.4)]`,
+        motion: {
+            enter: ED_MOTION.enterDirectional,
+            exit: ED_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.OVERLAY]: recipe({
+        // Dialog: this is the only surface where editorial accepts a real
+        // shadow — modals genuinely lift "off the page" and the eye needs
+        // depth to lock onto them.
+        base: `bg-background text-foreground ${ED.edge} ${ED.radius} shadow-[0_24px_64px_rgba(0,0,0,0.12)] dark:shadow-[0_24px_64px_rgba(0,0,0,0.6)]`,
+        motion: {
+            enter: ED_MOTION.enterFadeZoom,
+            exit: ED_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.INSET]: recipe({
+        base: `bg-muted/40 text-foreground ${ED.radius}`,
+    }),
+    [SurfaceVariant.SUNKEN]: recipe({
+        base: 'bg-muted/30 text-foreground border-r border-foreground/10',
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // A paper continuation below the tab rule: no shadow, no top border.
+        base: 'bg-background text-foreground border-x border-b border-foreground/12 rounded-b-sm',
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // Page shell is simply the paper stock.
+        base: 'bg-background text-foreground',
+        policy: {
+            content: {
+                wrapStrategy: 'pretty',
+            },
+        },
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        // Toast: newspaper notice card — hairline, restrained lift.
+        base: `bg-background text-foreground ${ED.edge} ${ED.radius} shadow-[0_8px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.5)]`,
+        motion: {
+            enter: ED_MOTION.enterDirectional,
+            exit: ED_MOTION.exitFadeZoom,
+        },
+    }),
+};
+// ============================================================
+// FORM_CONTROL
+// Inputs are quiet. Hairline border, no shadow. Focus ring becomes a
+// solid 2px ring (the only loud thing in the form).
+// ============================================================
+const formControl = {
+    [FormControlVariant.DEFAULT]: recipe({
+        base: `bg-background ${ED.edge} ${ED.radius} text-base md:text-sm text-foreground placeholder:text-muted-foreground selection:bg-primary/20 selection:text-foreground`,
+        states: {
+            focus: ED.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: ED.invalid,
+        },
+        sizes: {
+            md: 'h-10 px-3 py-2 pointer-coarse:min-h-11',
+            sm: 'h-9 px-3 text-sm pointer-coarse:min-h-11',
+            lg: 'h-12 px-4 py-2 pointer-coarse:min-h-12',
+        },
+        motion: { transition: ED_MOTION.formControl },
+    }),
+    [FormControlVariant.FILLED]: recipe({
+        base: `bg-muted/50 ${ED.radius} border-0 text-base md:text-sm text-foreground placeholder:text-muted-foreground`,
+        states: {
+            focus: ED.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: ED.invalid,
+        },
+        sizes: {
+            md: 'h-10 px-3 py-2 pointer-coarse:min-h-11',
+            sm: 'h-9 px-3 text-sm pointer-coarse:min-h-11',
+            lg: 'h-12 px-4 py-2 pointer-coarse:min-h-12',
+        },
+        motion: { transition: ED_MOTION.formControl },
+    }),
+    [FormControlVariant.UNDERLINED]: recipe({
+        // The most editorial-looking form variant: a single hairline rule
+        // under the field — like filling in a paper form.
+        base: 'bg-transparent border-0 border-b border-foreground/20 rounded-none text-base md:text-sm text-foreground placeholder:text-muted-foreground',
+        states: {
+            focus: 'focus-visible:outline-none focus-visible:border-primary focus-visible:border-b-2',
+            disabled: 'disabled:opacity-[var(--opacity-disabled)]',
+            invalid: 'aria-invalid:border-destructive',
+        },
+        sizes: {
+            md: 'h-10 px-0 py-2 pointer-coarse:min-h-11',
+            sm: 'h-9 px-0 text-sm pointer-coarse:min-h-11',
+            lg: 'h-12 px-0 py-2 pointer-coarse:min-h-12',
+        },
+        motion: {
+            transition: 'transition-[border-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.CHECKBOX]: recipe({
+        base: `${ED.edge} ${ED.radius}`,
+        states: {
+            focus: ED.focus,
+            selected: 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: ED.invalid,
+        },
+        motion: {
+            transition: 'transition-[color,box-shadow] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.SWITCH]: recipe({
+        base: 'data-[state=unchecked]:bg-muted border border-foreground/15',
+        states: {
+            focus: ED.focus,
+            selected: 'data-[state=checked]:bg-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: ED.invalid,
+        },
+        motion: {
+            transition: 'transition-all duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// INDICATOR
+// Editorial indicators are muted, restrained. No fill saturation —
+// indicator background is a tint, text carries the semantic color.
+// ============================================================
+const edIndicatorShared = {
+    states: { hover: '[a&]:hover:opacity-[var(--opacity-hover)]', focus: ED.focus, invalid: ED.invalid },
+    motion: { transition: ED_MOTION.interactive },
+};
+const indicator = {
+    [IndicatorVariant.NEUTRAL]: recipe({
+        base: `bg-muted/60 text-muted-foreground ${ED.radius} ${ED.hairline} px-2 py-0.5 text-xs font-medium uppercase tracking-wider`,
+        ...edIndicatorShared,
+    }),
+    [IndicatorVariant.INFO]: recipe({
+        base: `bg-info/10 text-info ${ED.radius} border border-info/20 px-2 py-0.5 text-xs font-medium uppercase tracking-wider`,
+        ...edIndicatorShared,
+    }),
+    [IndicatorVariant.SUCCESS]: recipe({
+        base: `bg-success/10 text-success ${ED.radius} border border-success/20 px-2 py-0.5 text-xs font-medium uppercase tracking-wider`,
+        ...edIndicatorShared,
+    }),
+    [IndicatorVariant.WARNING]: recipe({
+        base: `bg-warning/10 text-warning ${ED.radius} border border-warning/20 px-2 py-0.5 text-xs font-medium uppercase tracking-wider`,
+        ...edIndicatorShared,
+    }),
+    [IndicatorVariant.ERROR]: recipe({
+        base: `bg-destructive/10 text-destructive ${ED.radius} border border-destructive/25 px-2 py-0.5 text-xs font-medium uppercase tracking-wider`,
+        ...edIndicatorShared,
+    }),
+};
+// ============================================================
+// SELECTABLE
+// The underline-active tab pattern is editorial-iconic (think TOC of a
+// magazine). Pill and indicator variants follow but the underline is the
+// theme's signature selectable.
+// ============================================================
+const selectable = {
+    [SelectableVariant.FILLED]: recipe({
+        base: `${ED.radius} text-sm outline-hidden`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60',
+            selected: 'data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-medium data-[state=active]:bg-muted data-[state=active]:text-foreground',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-7 text-xs', md: 'h-9 text-sm', lg: 'h-12 text-sm' },
+        motion: { transition: ED_MOTION.selectable },
+    }),
+    [SelectableVariant.UNDERLINE]: recipe({
+        // Editorial signature: 1px hairline becomes 2px solid on active —
+        // the same visual language as section headers in print.
+        base: 'rounded-none border-b border-transparent text-sm text-muted-foreground outline-hidden',
+        states: {
+            hover: 'hover:text-foreground',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60',
+            selected: 'data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:font-medium',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 text-xs pb-1', md: 'h-10 text-sm pb-2', lg: 'h-12 text-sm pb-3' },
+        motion: { transition: ED_MOTION.selectable },
+    }),
+    [SelectableVariant.PILL]: recipe({
+        base: `${ED.radius} text-sm outline-hidden ${ED.hairline} border-transparent`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/15',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60',
+            selected: 'data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 px-3 text-xs', md: 'h-9 px-4 text-sm', lg: 'h-11 px-5 text-sm' },
+        motion: { transition: ED_MOTION.selectable },
+    }),
+    [SelectableVariant.INDICATOR]: recipe({
+        base: `${ED.radius} text-sm outline-hidden border-s border-transparent`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60',
+            selected: 'data-[active=true]:border-s-2 data-[active=true]:border-primary data-[active=true]:text-foreground data-[active=true]:font-medium',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 text-xs', md: 'h-9 text-sm', lg: 'h-12 text-sm' },
+        motion: { transition: ED_MOTION.selectable },
+    }),
+};
+// ============================================================
+// OVERLAY, DIVIDER, SKELETON
+// ============================================================
+const overlayBackdrop = recipe({
+    // Editorial backdrop: warm sepia-tinted scrim, very subtle blur.
+    base: 'bg-foreground/40 backdrop-blur-[2px]',
+    motion: {
+        enter: ED_MOTION.backdropEnter,
+        exit: ED_MOTION.backdropExit,
+    },
+});
+const divider = recipe({ base: 'bg-foreground/12 shrink-0' });
+const skeleton = recipe({
+    base: `bg-muted/60 animate-pulse ${ED.radius} motion-reduce:animate-none`,
+});
+const loadingSpinner = recipe({
+    base: 'text-muted-foreground animate-spin motion-reduce:animate-none',
+});
+const loadingOverlay = recipe({
+    base: 'bg-background/85',
+    motion: {
+        enter: 'animate-in fade-in-0 duration-[var(--motion-duration-slow)] ease-[var(--motion-easing-enter)] motion-reduce:animate-none',
+        exit: 'animate-out fade-out-0 duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-exit)] motion-reduce:animate-none',
+    },
+});
+// ============================================================
+// TYPOGRAPHY
+// The signature of the theme. Serif headings, generous body line-height,
+// classical scale. We keep the mid-tier sizes so existing layouts don't
+// shift — but h1 stays large because editorial is unapologetic about
+// hero typography (it's the article title).
+// ============================================================
+const typography = {
+    [TypographyVariant.HEADING]: recipe({
+        // `font-heading` resolves to the serif stack (see requiredCustomTokens
+        // below). Tracking-tight on serifs prevents the natural air between
+        // wide letters from looking sloppy at large sizes.
+        base: 'font-heading font-semibold leading-tight tracking-tight text-foreground',
+        sizes: {
+            display: 'text-6xl',
+            h1: 'text-5xl',
+            h2: 'text-3xl',
+            h3: 'text-2xl',
+            h4: 'text-xl',
+            md: 'text-lg',
+        },
+    }),
+    [TypographyVariant.BODY]: recipe({
+        // `leading-relaxed` (1.625) on body is the most editorial-feeling
+        // change in the whole theme — it turns UI strings into article copy.
+        base: 'font-sans text-foreground text-base leading-relaxed',
+        sizes: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+    }),
+    [TypographyVariant.LABEL]: recipe({
+        // Small caps tracking on labels — print-typography idiom for "section
+        // marker" / "metadata". Pairs with the indicator uppercase tracking.
+        // `font-sans` (NOT `font-body`) — only `font-sans/serif/mono/heading/display`
+        // are exposed as Tailwind utilities via @theme; `font-sans` resolves to
+        // `var(--font-body)` which our requiredCustomTokens overrides to the
+        // humanist-sans stack. Using `font-body` here would silently no-op.
+        base: 'font-sans font-medium text-2xs leading-none uppercase tracking-[0.08em] text-muted-foreground',
+        sizes: { sm: 'text-2xs', md: 'text-xs', lg: 'text-sm' },
+    }),
+    [TypographyVariant.DESCRIPTION]: recipe({
+        base: 'font-sans text-muted-foreground text-base leading-relaxed italic',
+        sizes: { sm: 'text-sm', md: 'text-base' },
+    }),
+    [TypographyVariant.CODE]: recipe({
+        base: 'font-mono text-[0.9em] bg-muted/60 rounded-sm px-1.5 py-0.5 border border-foreground/10',
+        sizes: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    }),
+};
+// ============================================================
+// SPACING
+// Editorial is the most spacious theme. We're not optimising for
+// information density — we're optimising for legibility, breathing
+// room, and the "magazine spread" feel. Card and container padding
+// are deliberately bigger than glass (the previous spaciousness
+// champion) to push the lineup further apart.
+// ============================================================
+const spacing = {
+    [SpacingSemantic.ELEMENT]: '0.625rem',
+    [SpacingSemantic.ITEM]: '0.5rem',
+    [SpacingSemantic.GROUP]: '1.125rem',
+    [SpacingSemantic.FIELD]: '1.5rem',
+    [SpacingSemantic.SECTION]: '2.5rem',
+    [SpacingSemantic.REGION]: '4rem',
+    [SpacingSemantic.CARD]: '1.75rem',
+    [SpacingSemantic.CONTAINER]: '2.5rem',
+};
+// ============================================================
+// REQUIRED CUSTOM TOKENS — palette + serif font stack
+//
+// Editorial is fully defined by its serif headings + warm-paper palette.
+// Without these overrides the theme would inherit the host's sans-serif
+// stack and read as "default theme with bigger margins". Same mechanism
+// as neo-brutalist: `requiredCustomTokens` is applied AFTER both
+// `applyDesignTokens` and `applyTypographyConfiguration` (TR-11), so
+// these wins over both host palette AND host font config.
+// ============================================================
+function colorOverride(lightOklch, darkOklch) {
+    return {
+        type: DesignTokenValueType.COLOR,
+        modeStrategy: DesignTokenModeStrategy.LIGHT_DARK,
+        lightValue: lightOklch,
+        darkValue: darkOklch,
+    };
+}
+function colorSingle(oklch) {
+    return { type: DesignTokenValueType.COLOR, modeStrategy: DesignTokenModeStrategy.SINGLE, value: oklch };
+}
+function stringSingle(value) {
+    return { type: DesignTokenValueType.STRING, modeStrategy: DesignTokenModeStrategy.SINGLE, value };
+}
+const requiredCustomTokens = {
+    // === Page palette: warm off-white "newsprint" in light, deep ink-grey
+    // in dark. The slight warmth (0.005 chroma at hue 80) reads as paper,
+    // not as cold UI white.
+    background: colorOverride('0.985 0.005 80', '0.145 0.008 270'),
+    foreground: colorOverride('0.18 0.008 270', '0.96 0.005 80'),
+    // === Accent: deep ink-blue (the classic "publication" color). Light
+    // mode at L=0.42 ensures black-on-blue would be too low contrast, so
+    // primary-foreground stays white. Dark mode lifts to 0.68 so it pops
+    // against the dark page without losing the ink quality.
+    primary: colorOverride('0.42 0.13 255', '0.68 0.14 255'),
+    'primary-foreground': colorOverride('0.985 0.005 80', '0.10 0.01 270'),
+    // === Secondary: very pale cream / very deep slate (almost-bg).
+    secondary: colorOverride('0.95 0.008 80', '0.21 0.01 270'),
+    'secondary-foreground': colorOverride('0.20 0.008 270', '0.95 0.005 80'),
+    // === Muted: even paler — for inset surfaces, code blocks, etc.
+    muted: colorOverride('0.94 0.01 80', '0.22 0.01 270'),
+    'muted-foreground': colorOverride('0.45 0.015 270', '0.70 0.01 80'),
+    // === Borders: hairline-grey, never approaches foreground darkness.
+    border: colorOverride('0.88 0.005 80', '0.30 0.008 270'),
+    ring: colorOverride('0.42 0.13 255', '0.68 0.14 255'),
+    input: colorOverride('0.88 0.005 80', '0.30 0.008 270'),
+    // === Destructive: a refined publishing red — warmer and more "ink"
+    // than the default theme's cool red. Light L=0.50 is comfortable with
+    // white text (~6:1).
+    destructive: colorOverride('0.50 0.20 28', '0.62 0.22 28'),
+    'destructive-foreground': colorSingle('1 0 0'),
+    // === Accent gradient: subdued ink-blue → muted gold → terracotta —
+    // a "library spine" gradient, nothing neon. Dramatically less saturated
+    // than default's violet/blue/pink.
+    'accent-gradient-from': colorOverride('0.42 0.13 255', '0.68 0.14 255'),
+    'accent-gradient-via': colorOverride('0.65 0.10 80', '0.72 0.10 80'),
+    'accent-gradient-to': colorOverride('0.55 0.13 30', '0.65 0.14 30'),
+    // === Font stacks: the heart of the theme. Serif heading + humanist
+    // sans body. Hosts that @font-face Source Serif 4 / Source Sans 3
+    // get the canonical look; everyone else falls through to system serif
+    // (Georgia/Iowan Old Style on macOS, Cambria on Windows) — still
+    // distinctively serif vs the rest of the lineup.
+    'font-heading': stringSingle("'Source Serif 4', 'Source Serif Pro', 'Crimson Pro', 'Tiempos Text', 'Iowan Old Style', Georgia, 'Times New Roman', serif"),
+    'font-body': stringSingle("'Source Sans 3', 'Source Sans Pro', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"),
+};
+// ============================================================
+// ASSEMBLED THEME
+// ============================================================
+export const editorialTheme = {
+    id: 'editorial',
+    name: 'Editorial',
+    description: 'Publication-grade theme for long-form reading and knowledge bases. Serif headings (Source Serif / Crimson Pro / Georgia fallback), humanist-sans body with relaxed line-height, hairline borders (no shadows on cards — only on dialogs), 2px radius, generous spacing scale (largest in lineup). Warm-paper palette with deep ink-blue accent and a subdued ink-gold-terracotta accent gradient. Slow ease-out motion, underlined links by default. Ships its own serif/sans font stacks via requiredCustomTokens — host fonts are overridden when this theme is active.',
+    requiredCustomTokens,
+    spacing,
+    interactive,
+    surface,
+    formControl,
+    indicator,
+    selectable,
+    overlayBackdrop,
+    divider,
+    skeleton,
+    loadingSpinner,
+    loadingOverlay,
+    typography,
+    radius: '2px',
+    backgroundLayer: undefined,
+    chartStyle: {
+        // Editorial charts are restrained: thin lines, no fills, no tooltip
+        // shadows, classical typography.
+        colorShadeLight: 600,
+        colorShadeDark: 400,
+        gridPadding: { top: 30, right: 20, bottom: 30, left: 60 },
+        axis: {
+            showAxisLine: true,
+            showTicks: true,
+            splitLineType: 'dashed',
+            hideOverlap: true,
+            yAxisNameLocation: 'middle',
+            yAxisNameGap: 50,
+        },
+        tooltip: {
+            extraCss: 'border: 1px solid color-mix(in oklch, currentColor 15%, transparent); box-shadow: none;',
+            borderWidth: 1,
+        },
+        animation: { enabled: true, durationMs: 500, easing: 'cubicOut' },
+        series: { lineWidth: 1.5, pointSize: 4, areaOpacity: 0.08, barBorderRadius: 0, pieBorderWidth: 1 },
+        typography: {
+            titleFontSize: 17,
+            titleFontWeight: 600,
+            subtitleFontSize: 13,
+            legendFontSize: 12,
+            tooltipFontSize: 12,
+            axisLabelFontSize: 11,
+            axisNameFontSize: 12,
+        },
+        emphasis: { shadowBlur: 0, shadowColor: 'transparent', shadowOffsetX: 0 },
+        responsive: {
+            smallMaxWidth: 400,
+            mediumMaxWidth: 799,
+            smallGridPadding: { top: 20, right: 10, bottom: 20, left: 30 },
+            mediumGridPadding: { left: 50, right: 20, bottom: 40 },
+            hideLegendOnSmall: true,
+            smallAxisLabelRotate: 45,
+            smallFontSize: 10,
+            mediumFontSize: 11,
+        },
+        multiSeriesLegendBottomPadding: 50,
+    },
+};
+//# sourceMappingURL=editorial.theme.js.map