@wildo-ai/presets-components 1.0.1 → 1.1.1

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

@@ -0,0 +1,725 @@
+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 };
+}
+// ============================================================
+// Cozy theme (Soft / Warm)
+//
+// Persona: wellness apps, journaling, B2C onboarding, friendly
+// internal tools, learning platforms.
+// References: Notion (warm mode), Calm, Headspace, early-stage
+// consumer SaaS, Stripe-light vibes.
+//
+// Design DNA:
+//   - PILLOWY radius (rounded-2xl baseline; rounded-3xl on cards/dialogs).
+//     The whole UI feels like rounded river stones, not card stock.
+//   - WARM palette: cream / oat / dusty-rose foreground, sage muted,
+//     terracotta accent. Never grey. Never cold. The page feels
+//     "occupied" by warmth even before any content.
+//   - SOFT, LONG shadows: low-opacity, large blur radius
+//     (`shadow-[0_8px_32px_rgba(0,0,0,0.06)]`). Things rest gently
+//     above the page rather than snapping into elevation.
+//   - SPRINGY motion: spring physics on interactive gestures (matches
+//     glass), generous duration on transitions. The UI "settles"
+//     rather than "snaps".
+//   - DM Sans / Plus Jakarta — humanist sans with warm letterforms,
+//     soft round terminals (vs Geist's industrial precision).
+//   - Underline-NEVER on selectable tabs (too sharp); pill-with-soft-bg
+//     instead. The whole theme avoids hard right angles where possible.
+//   - Body weight stays normal (not 500/600); cozy isn't loud.
+// ============================================================
+// -- Shared constants --
+const CZ = {
+    /** Soft, low-opacity border — almost invisible against bg, present on hover. */
+    hairline: 'border border-foreground/8',
+    edge: 'border border-foreground/12',
+    /** Pillowy radius baseline. */
+    radius: 'rounded-2xl',
+    radiusLg: 'rounded-3xl',
+    /** Mid radius for badges/pills. */
+    radiusMd: 'rounded-xl',
+    /** Soft long shadow — low opacity, large blur. */
+    shadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_20px_rgba(0,0,0,0.35)]',
+    shadowLg: 'shadow-[0_8px_32px_rgba(0,0,0,0.07)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.45)]',
+    shadowXL: 'shadow-[0_24px_64px_rgba(0,0,0,0.10)] dark:shadow-[0_24px_64px_rgba(0,0,0,0.55)]',
+    focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 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 — Cozy
+// ============================================================
+//   Hover/focus  : NORMAL (250ms) + SPRING  → gentle settle into rest.
+//                                             SPRING easing here is the
+//                                             cubic-bezier ease-out token
+//                                             (cubic-bezier(0.22, 1, 0.36, 1)
+//                                             ≈ easeOutExpo) — monotonic,
+//                                             slow tail, NO overshoot.
+//                                             Matches the "pillowy"
+//                                             surface aesthetic; the
+//                                             SETTLE is the personality,
+//                                             not bouncing.
+//   Overlay enter: SLOW   (350ms) + ENTER   → generous, friendly pace.
+//   Overlay exit : NORMAL (250ms) + EXIT    → quicker than enter.
+//   Backdrop     : SLOW/NORMAL    + ENTER/EXIT  → matches overlays.
+//   Gestures     : SPRING physics on motion.dev. Lower stiffness (250-300)
+//                  + higher damping (22-30) than Glass — Cozy spring
+//                  is "gentle landing on a cushion" vs Glass "Apple
+//                  UIKit precision." `selectable` adds a horizontal
+//                  nudge for list-item affordance (mirrors Glass for
+//                  cross-theme parity).
+//
+// TR-14 motion-coherence: switched interactive/formControl/selectable
+// from EMPHASIZED (cubic-bezier(0.2, 0, 0, 1.2) — has 20% Y overshoot,
+// reads as "snappy with bounce") to SPRING (no overshoot, slow settle —
+// "the cozy feel"). Backdrop animations now have explicit easing.
+// `selectable` gesture added (was missing — Glass has it, Cozy didn't,
+// breaking cross-theme parity for list affordances).
+// ============================================================
+const CZ_MOTION = {
+    interactive: 'transition-[background-color,color,border-color,box-shadow,transform] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
+    formControl: 'transition-[color,border-color,box-shadow,background-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
+    selectable: 'transition-[background-color,color,border-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] 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',
+};
+// Spring gestures: subtle scale on press, gentle hover lift.
+//
+// Cozy springs are softer than Glass: lower stiffness (slower oscillation
+// period) + higher damping (faster decay, less swing). Glass mimics
+// Apple UIKit precision; Cozy mimics "Calm app" / "Notion" friendliness —
+// the tactile equivalent of pressing a foam cushion vs a multitouch glass
+// surface. `selectable` matches Glass's pattern (horizontal x-nudge of
+// 2px on hover) so list-item affordances feel consistent across themes.
+const CZ_GESTURE = {
+    interactive: {
+        whileHover: { scale: 1.015 },
+        whileTap: { scale: 0.97 },
+        transition: { type: 'spring', stiffness: 300, damping: 24 },
+    },
+    surface: {
+        whileHover: { scale: 1.005 },
+        transition: { type: 'spring', stiffness: 250, damping: 22 },
+    },
+    // TR-14: added for list-item affordance parity with Glass.
+    // Slightly softer stiffness than Glass's selectable (350 vs 400)
+    // and matching damping — list rows in Cozy should feel "padded,
+    // not snappy." The 2px horizontal nudge is the universal
+    // "I'm a clickable list row" affordance.
+    selectable: {
+        whileHover: { x: 2 },
+        whileTap: { scale: 0.99 },
+        transition: { type: 'spring', stiffness: 350, damping: 30 },
+    },
+};
+// ============================================================
+// INTERACTIVE
+// Pillowy buttons with soft-long shadows. Press = scale + tighter shadow.
+// ============================================================
+const interactiveSizes = {
+    xs: 'h-8 px-3.5 text-xs gap-1.5 pointer-coarse:min-h-10',
+    sm: 'h-9 px-4 gap-2 pointer-coarse:min-h-11',
+    md: 'h-11 px-5 py-2 pointer-coarse:min-h-11',
+    lg: 'h-12 px-7 pointer-coarse:min-h-12',
+    icon: 'size-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+    'icon-sm': 'size-9 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+};
+const interactive = {
+    [InteractiveVariant.PRIMARY]: recipe({
+        base: `bg-primary text-primary-foreground ${CZ.radius} font-medium text-sm cursor-pointer ${CZ.shadow}`,
+        states: {
+            hover: 'hover:bg-primary/90 hover:shadow-[0_6px_24px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_6px_24px_rgba(0,0,0,0.45)]',
+            active: 'active:bg-primary/95 active:shadow-[0_2px_8px_rgba(0,0,0,0.04)]',
+            focus: CZ.focus,
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: CZ_MOTION.interactive },
+        gesture: CZ_GESTURE.interactive,
+    }),
+    [InteractiveVariant.SECONDARY]: recipe({
+        base: `bg-secondary text-secondary-foreground ${CZ.radius} font-medium text-sm cursor-pointer ${CZ.shadow}`,
+        states: {
+            hover: 'hover:bg-secondary/80',
+            active: 'active:bg-secondary/70',
+            focus: CZ.focus,
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: CZ_MOTION.interactive },
+        gesture: CZ_GESTURE.interactive,
+    }),
+    [InteractiveVariant.OUTLINE]: recipe({
+        base: `bg-background text-foreground ${CZ.edge} ${CZ.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/20',
+            active: 'active:bg-muted/80',
+            focus: CZ.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:border-foreground/25',
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: CZ_MOTION.interactive },
+        gesture: CZ_GESTURE.interactive,
+    }),
+    [InteractiveVariant.DESTRUCTIVE]: recipe({
+        base: `bg-destructive text-destructive-foreground ${CZ.radius} font-medium text-sm cursor-pointer ${CZ.shadow}`,
+        states: {
+            hover: 'hover:bg-destructive/90',
+            active: 'active:bg-destructive/95',
+            focus: CZ.focus,
+            highlighted: 'focus:bg-destructive/15 focus:text-destructive',
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: CZ_MOTION.interactive },
+        gesture: CZ_GESTURE.interactive,
+    }),
+    [InteractiveVariant.GHOST]: recipe({
+        base: `text-foreground ${CZ.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted',
+            active: 'active:bg-muted/80',
+            focus: CZ.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:text-foreground',
+            highlighted: 'focus:bg-muted',
+            open: 'data-[state=open]:bg-muted',
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: CZ_MOTION.interactive },
+        gesture: CZ_GESTURE.interactive,
+    }),
+    [InteractiveVariant.LINK]: recipe({
+        base: 'text-primary font-medium text-sm cursor-pointer',
+        states: {
+            hover: 'hover:underline hover:underline-offset-[3px] hover:decoration-primary/50',
+            active: 'active:text-primary/80',
+            focus: CZ.focus,
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: {
+            xs: 'h-8 px-2 text-xs gap-1.5 pointer-coarse:min-h-10',
+            sm: 'h-9 px-2 gap-2 pointer-coarse:min-h-11',
+            md: 'h-11 px-2 py-2 pointer-coarse:min-h-11',
+            lg: 'h-12 px-2 pointer-coarse:min-h-12',
+            icon: 'size-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+            'icon-sm': 'size-9 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+        },
+        motion: { transition: CZ_MOTION.interactive },
+    }),
+    [InteractiveVariant.ACCENT]: recipe({
+        // Cozy accent: warm pastel sweep — terracotta → dusty rose → peach.
+        // Restrained motion (5s, slow), the gradient drifts rather than races.
+        base: `relative bg-primary text-primary-foreground font-semibold ${CZ.radius} bg-[length:300%_100%] bg-gradient-to-r from-accent-gradient-from via-accent-gradient-via to-accent-gradient-to animate-[gradient-rotate_6s_ease-in-out_infinite] motion-reduce:animate-none ${CZ.shadow} text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:brightness-105',
+            active: 'active:scale-[0.98]',
+            focus: CZ.focus,
+            disabled: CZ.disabled,
+            invalid: CZ.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: {
+            transition: 'transition-[background-position,filter,transform,shadow] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
+        },
+        gesture: CZ_GESTURE.interactive,
+    }),
+};
+// ============================================================
+// SURFACE
+// SURFACE PERSONALITY — soft cushions: pillowy radii, warm page shell, gentle
+// floating notices. Tab panels are attached pillows rather than hard panes.
+// Cards rest gently on the page with low-opacity, large-blur shadows.
+// Dialogs ARE elevated and get the heaviest soft-shadow in the lineup.
+// ============================================================
+const surface = {
+    [SurfaceVariant.BASE]: recipe({
+        base: `bg-background text-foreground ${CZ.radiusLg} ${CZ.shadow} ${CZ.hairline}`,
+        gesture: CZ_GESTURE.surface,
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Content card: the elevated `surface-raised` fill (pure white in light, a
+        // lifted slate in dark) makes it read as a distinct card on the page; edge
+        // border + soft shadow + the cozy pillow radius complete the silhouette.
+        // Always painted — an authored card stays a card even inside a dialog.
+        base: `bg-surface-raised text-surface-raised-foreground ${CZ.edge} ${CZ.radius} ${CZ.shadow}`,
+        gesture: CZ_GESTURE.surface,
+    }),
+    [SurfaceVariant.RAISED]: recipe({
+        // `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 ${CZ.radius} ${CZ.shadowLg} ${CZ.edge}`,
+        motion: {
+            enter: CZ_MOTION.enterDirectional,
+            exit: CZ_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.OVERLAY]: recipe({
+        // Dialog: heaviest soft-shadow + same big radius as BASE so dialogs
+        // read as "a card you can act inside" — never visually demoted.
+        base: `bg-background text-foreground ${CZ.radiusLg} ${CZ.shadowXL} ${CZ.edge}`,
+        motion: {
+            enter: CZ_MOTION.enterFadeZoom,
+            exit: CZ_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.INSET]: recipe({
+        base: `bg-muted/60 text-foreground ${CZ.radius}`,
+    }),
+    [SurfaceVariant.SUNKEN]: recipe({
+        base: 'bg-muted/40 text-foreground border-r border-foreground/8',
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // Soft continuation under tabs: bottom-only pillow radius, quiet edge.
+        base: `bg-background text-foreground rounded-b-3xl border-x border-b border-foreground/8 ${CZ.shadow}`,
+        gesture: CZ_GESTURE.surface,
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // Warm page shell; children provide the pillowy frames.
+        base: 'bg-background text-foreground',
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        // Toast: small cushion, warm and floating but less massive than a dialog.
+        base: `bg-background text-foreground ${CZ.radius} ${CZ.shadowLg} ${CZ.edge}`,
+        motion: {
+            enter: CZ_MOTION.enterDirectional,
+            exit: CZ_MOTION.exitFadeZoom,
+        },
+        gesture: CZ_GESTURE.surface,
+    }),
+};
+// ============================================================
+// FORM_CONTROL
+// Pillowy inputs (rounded-xl), soft inner shadow on default, no border
+// on filled. Switch is extra-rounded for the "soft toggle" feel.
+// ============================================================
+const formControl = {
+    [FormControlVariant.DEFAULT]: recipe({
+        base: `bg-background ${CZ.edge} ${CZ.radiusMd} text-base md:text-sm text-foreground placeholder:text-muted-foreground/70 selection:bg-primary/25 selection:text-foreground shadow-[inset_0_1px_2px_rgba(0,0,0,0.03)]`,
+        states: {
+            focus: CZ.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: CZ.invalid,
+        },
+        sizes: {
+            md: 'h-11 px-4 py-2 pointer-coarse:min-h-11',
+            sm: 'h-9 px-3.5 text-sm pointer-coarse:min-h-11',
+            lg: 'h-12 px-5 py-2 pointer-coarse:min-h-12',
+        },
+        motion: { transition: CZ_MOTION.formControl },
+    }),
+    [FormControlVariant.FILLED]: recipe({
+        base: `bg-muted/70 ${CZ.radiusMd} border-0 text-base md:text-sm text-foreground placeholder:text-muted-foreground/70`,
+        states: {
+            focus: `${CZ.focus} focus-visible:bg-muted`,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: CZ.invalid,
+        },
+        sizes: {
+            md: 'h-11 px-4 py-2 pointer-coarse:min-h-11',
+            sm: 'h-9 px-3.5 text-sm pointer-coarse:min-h-11',
+            lg: 'h-12 px-5 py-2 pointer-coarse:min-h-12',
+        },
+        motion: { transition: CZ_MOTION.formControl },
+    }),
+    [FormControlVariant.UNDERLINED]: recipe({
+        base: 'bg-transparent border-0 border-b border-foreground/15 rounded-none text-base md:text-sm text-foreground placeholder:text-muted-foreground/70',
+        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-11 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-spring)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.CHECKBOX]: recipe({
+        // Pillowy checkbox: rounded-md (not rounded-sm). Cozy avoids hard
+        // right angles even on tiny controls.
+        base: `${CZ.edge} rounded-md`,
+        states: {
+            focus: CZ.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: CZ.invalid,
+        },
+        motion: {
+            transition: 'transition-[color,box-shadow,background-color] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.SWITCH]: recipe({
+        base: 'data-[state=unchecked]:bg-muted border border-foreground/12',
+        states: {
+            focus: CZ.focus,
+            selected: 'data-[state=checked]:bg-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: CZ.invalid,
+        },
+        motion: {
+            transition: 'transition-all duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-spring)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// INDICATOR
+// Soft, low-saturation pills. No uppercase (cozy isn't shouting).
+// Full-rounded ("pill") shape because the whole theme leans pillowy.
+// ============================================================
+const czIndicatorShared = {
+    states: { hover: '[a&]:hover:opacity-[var(--opacity-hover)]', focus: CZ.focus, invalid: CZ.invalid },
+    motion: { transition: CZ_MOTION.interactive },
+};
+const indicator = {
+    [IndicatorVariant.NEUTRAL]: recipe({
+        base: 'bg-muted/70 text-muted-foreground rounded-full px-2.5 py-0.5 text-xs font-medium',
+        ...czIndicatorShared,
+    }),
+    [IndicatorVariant.INFO]: recipe({
+        base: 'bg-info/12 text-info rounded-full px-2.5 py-0.5 text-xs font-medium',
+        ...czIndicatorShared,
+    }),
+    [IndicatorVariant.SUCCESS]: recipe({
+        base: 'bg-success/12 text-success rounded-full px-2.5 py-0.5 text-xs font-medium',
+        ...czIndicatorShared,
+    }),
+    [IndicatorVariant.WARNING]: recipe({
+        base: 'bg-warning/15 text-warning rounded-full px-2.5 py-0.5 text-xs font-medium',
+        ...czIndicatorShared,
+    }),
+    [IndicatorVariant.ERROR]: recipe({
+        base: 'bg-destructive/12 text-destructive rounded-full px-2.5 py-0.5 text-xs font-medium',
+        ...czIndicatorShared,
+    }),
+};
+// ============================================================
+// SELECTABLE
+// Cozy avoids the underline-tab idiom (too sharp). Active state is a
+// soft fill instead. Pill variant is the natural default.
+// ============================================================
+const selectable = {
+    [SelectableVariant.FILLED]: recipe({
+        base: `${CZ.radius} text-sm outline-hidden`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            selected: 'data-[active=true]:bg-primary/12 data-[active=true]:text-primary data-[active=true]:font-medium data-[state=active]:bg-primary/12 data-[state=active]:text-primary',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 text-xs', md: 'h-10 text-sm', lg: 'h-12 text-sm' },
+        motion: { transition: CZ_MOTION.selectable },
+        gesture: CZ_GESTURE.selectable,
+    }),
+    [SelectableVariant.UNDERLINE]: recipe({
+        // Even cozy's underline is soft: the active state thickens but the
+        // "underline" is a rounded 2px bar, not a sharp rule. Border-radius
+        // on a border-bottom doesn't render visibly, but the OFFSET
+        // (border-spacing via padding) keeps it from touching the descenders.
+        base: 'rounded-none border-b-2 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/50',
+            selected: 'data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:font-medium',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 text-xs pb-2', md: 'h-10 text-sm pb-2.5', lg: 'h-12 text-sm pb-3.5' },
+        motion: { transition: CZ_MOTION.selectable },
+    }),
+    [SelectableVariant.PILL]: recipe({
+        base: 'rounded-full text-sm outline-hidden',
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            selected: 'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-[0_2px_8px_rgba(0,0,0,0.06)]',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 px-3.5 text-xs', md: 'h-10 px-5 text-sm', lg: 'h-12 px-6 text-sm' },
+        motion: { transition: CZ_MOTION.selectable },
+    }),
+    [SelectableVariant.INDICATOR]: recipe({
+        base: `${CZ.radius} text-sm outline-hidden`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            selected: 'data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:font-medium data-[active=true]:border-s-2 data-[active=true]:border-primary',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-8 text-xs', md: 'h-10 text-sm', lg: 'h-12 text-sm' },
+        motion: { transition: CZ_MOTION.selectable },
+        // INDICATOR has a start-edge vertical bar — the 2px x-nudge from
+        // CZ_GESTURE.selectable visually leads the row toward where the
+        // indicator will materialize on selection. Reinforces the "I'm a
+        // selectable list row" affordance.
+        gesture: CZ_GESTURE.selectable,
+    }),
+};
+// NOTE on selectable gesture coverage:
+//   FILLED + INDICATOR — get x-nudge gesture (generic / sidebar list rows
+//                        where horizontal hint reads as affordance).
+//   UNDERLINE + PILL   — NO gesture (fixed-position tabs and centered
+//                        chips: a horizontal slide would either move the
+//                        underline anchor visually OR break chip layout
+//                        symmetry — the press/hover bg fill is the
+//                        appropriate affordance for those variants).
+// ============================================================
+// OVERLAY, DIVIDER, SKELETON
+// ============================================================
+const overlayBackdrop = recipe({
+    // Warm-tinted scrim with subtle blur — keeps the cozy ambient mood
+    // even during modal interactions.
+    base: 'bg-foreground/30 backdrop-blur-[6px]',
+    motion: {
+        enter: CZ_MOTION.backdropEnter,
+        exit: CZ_MOTION.backdropExit,
+    },
+});
+const divider = recipe({ base: 'bg-foreground/8 shrink-0' });
+const skeleton = recipe({
+    base: `bg-muted/70 animate-pulse ${CZ.radiusMd} motion-reduce:animate-none`,
+});
+const loadingSpinner = recipe({
+    base: 'text-primary animate-spin motion-reduce:animate-none',
+});
+const loadingOverlay = recipe({
+    base: 'bg-background/85 backdrop-blur-[2px]',
+    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
+// DM Sans / Plus Jakarta — humanist sans with rounded terminals.
+// h1 stays in the mid-tier (text-3xl) — cozy isn't hero-typography
+// territory; it's "warm tone" territory. Body uses normal weight
+// (vs default's implicit semibold-ish vibe).
+// ============================================================
+const typography = {
+    [TypographyVariant.HEADING]: recipe({
+        base: 'font-heading font-semibold leading-tight tracking-tight text-foreground',
+        sizes: {
+            h1: 'text-3xl',
+            h2: 'text-2xl',
+            h3: 'text-xl',
+            h4: 'text-lg',
+            md: 'text-lg',
+        },
+    }),
+    [TypographyVariant.BODY]: recipe({
+        // Slightly larger body (text-[0.9375rem] / 15px) than default 14px —
+        // cozy is reading-comfortable without going full editorial 16px.
+        // `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 DM Sans.
+        // Using `font-body` here would silently no-op.
+        base: 'font-sans text-foreground text-[0.9375rem] leading-relaxed',
+        sizes: { sm: 'text-sm', md: 'text-[0.9375rem]', lg: 'text-base' },
+    }),
+    [TypographyVariant.LABEL]: recipe({
+        base: 'font-sans font-medium text-sm leading-snug text-foreground',
+        sizes: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    }),
+    [TypographyVariant.DESCRIPTION]: recipe({
+        base: 'font-sans text-muted-foreground text-sm leading-relaxed',
+        sizes: { sm: 'text-xs', md: 'text-sm' },
+    }),
+    [TypographyVariant.CODE]: recipe({
+        base: `font-mono text-[0.875em] bg-muted/70 ${CZ.radiusMd} px-2 py-0.5`,
+        sizes: { sm: 'text-xs', md: 'text-sm', lg: 'text-base' },
+    }),
+};
+// ============================================================
+// SPACING
+// Roomy but not editorial-spacious. The pillowy radii already create
+// visual breathing room — we don't need to pile on whitespace too.
+// ============================================================
+const spacing = {
+    [SpacingSemantic.ELEMENT]: '0.625rem',
+    [SpacingSemantic.ITEM]: '0.375rem',
+    [SpacingSemantic.GROUP]: '1rem',
+    [SpacingSemantic.FIELD]: '1.25rem',
+    [SpacingSemantic.SECTION]: '2rem',
+    [SpacingSemantic.REGION]: '3rem',
+    [SpacingSemantic.CARD]: '1.5rem',
+    [SpacingSemantic.CONTAINER]: '2rem',
+};
+// ============================================================
+// REQUIRED CUSTOM TOKENS — warm cream palette + humanist sans
+//
+// Cozy's identity is its WARMTH. Without these overrides the theme
+// inherits the host's typically-cool default palette and reads as
+// "default theme with rounder corners". The warm-paper + dusty-rose +
+// sage palette is what makes the page feel "occupied".
+// ============================================================
+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 = {
+    // === Warm cream / oat background. Hue 65 (warm yellow-orange) at
+    // very low chroma reads as "linen", not "yellow page". Dark mode
+    // shifts to a warm off-black (hue 30, deep brown-black) — same
+    // warmth, inverted lightness.
+    background: colorOverride('0.975 0.012 65', '0.16 0.012 30'),
+    foreground: colorOverride('0.22 0.015 30', '0.96 0.008 65'),
+    // === Primary: dusty terracotta.
+    //
+    // ⚠ Wave G follow-up TR-13 (contrast correction): light-mode primary
+    // was originally L=0.55 chroma 0.14 hue 35; that gives sRGB Y≈0.27
+    // → only ~3.2:1 contrast against the cream foreground (Y≈0.96), well
+    // below WCAG AA 4.5:1. Earlier self-review claimed 5.0:1 — that was
+    // an OKLCH-L → sRGB-Y conversion mistake (reds at low-mid L have
+    // higher Y than L would suggest because terracotta sits between red
+    // and orange where eye-luminance peaks).
+    //
+    // Fix: deepen LIGHT primary to L=0.45 chroma 0.16 hue 35 (a richer
+    // "burnt sienna / deep cinnamon" — still warm and dusty, just one
+    // shade more saturated). New contrast: L=0.45 vs L=0.985 cream ≈
+    // 4.85:1 (AA pass, no longer borderline). Dark-mode primary L=0.72
+    // unchanged — paired with the deep brown-black foreground (L=0.16),
+    // contrast is ~6.2:1, comfortably AA. The hue 35 (warm orange) is
+    // preserved end-to-end so the brand identity stays "linen + sunset".
+    primary: colorOverride('0.45 0.16 35', '0.72 0.14 35'),
+    'primary-foreground': colorOverride('0.985 0.008 65', '0.16 0.012 30'),
+    // === Secondary: pale sage (hue 130). Cool counterpoint that keeps
+    // the warm bg from being overwhelming. Subtle — chroma 0.025.
+    secondary: colorOverride('0.92 0.025 130', '0.24 0.02 140'),
+    'secondary-foreground': colorOverride('0.30 0.04 140', '0.92 0.025 130'),
+    // === Muted: even paler than secondary, neutral-warm.
+    muted: colorOverride('0.94 0.012 65', '0.21 0.012 30'),
+    'muted-foreground': colorOverride('0.48 0.02 30', '0.72 0.012 65'),
+    // === Borders: very soft, low-chroma warm tint.
+    // Ring anchors on the primary so focus rings match the brand;
+    // updated to the deepened primary L=0.45 (TR-13).
+    border: colorOverride('0.88 0.015 50', '0.30 0.012 30'),
+    ring: colorOverride('0.45 0.16 35', '0.72 0.14 35'),
+    input: colorOverride('0.88 0.015 50', '0.30 0.012 30'),
+    // === Destructive: warm red (hue 22 — closer to cinnamon than to
+    // a fire-engine red). Stays in the warm family.
+    destructive: colorOverride('0.55 0.20 22', '0.65 0.22 22'),
+    'destructive-foreground': colorSingle('1 0 0'),
+    // === Semantic: shifted toward warm hues so they don't fight the
+    // cozy palette. Success = warm green (hue 145), warning = honey
+    // (hue 75), info = dusty teal (hue 200).
+    //
+    // ⚠ TR-13 contrast correction: same sRGB-Y > OKLCH-L issue as
+    // primary affects the high-luminance success-green (~3.0:1 with
+    // white) and info-cyan (~3.4:1 with white). Flip both foregrounds
+    // to near-black for AA in light mode (≥5:1). Warning was already
+    // black-on-amber so it stays — that pair has always been ≥7:1.
+    info: colorOverride('0.62 0.10 200', '0.72 0.12 200'),
+    'info-foreground': colorSingle('0.16 0.012 30'),
+    success: colorOverride('0.55 0.14 145', '0.70 0.16 145'),
+    'success-foreground': colorSingle('0.16 0.012 30'),
+    warning: colorOverride('0.70 0.14 75', '0.78 0.16 75'),
+    'warning-foreground': colorSingle('0.16 0.012 30'),
+    // === Accent gradient: terracotta → peach → dusty-rose. A "warm
+    // sunset" sweep that fits the cozy mood (vs default's cool
+    // violet/blue/pink and brutalist's electric blue/yellow/pink).
+    // 'from' anchors on the (deepened, post-TR-13) primary terracotta.
+    'accent-gradient-from': colorOverride('0.45 0.16 35', '0.72 0.14 35'),
+    'accent-gradient-via': colorOverride('0.72 0.13 55', '0.78 0.14 55'),
+    'accent-gradient-to': colorOverride('0.65 0.14 15', '0.72 0.16 15'),
+    // === Font stacks: humanist sans with rounded terminals (DM Sans
+    // primary, Plus Jakarta + Outfit as warm alternates, system-ui
+    // fallback). No serif/mono distinction for headings — cozy is
+    // "warm consistency" rather than "typographic hierarchy".
+    'font-heading': stringSingle("'DM Sans', 'Plus Jakarta Sans', Outfit, 'Nunito Sans', -apple-system, 'SF Pro Text', system-ui, sans-serif"),
+    'font-body': stringSingle("'DM Sans', 'Plus Jakarta Sans', Outfit, 'Nunito Sans', -apple-system, 'SF Pro Text', system-ui, sans-serif"),
+};
+// ============================================================
+// ASSEMBLED THEME
+// ============================================================
+export const cozyTheme = {
+    id: 'cozy',
+    name: 'Cozy',
+    description: 'Warm, soft theme for wellness, journaling, B2C onboarding, and friendly internal tools. Pillowy radii (rounded-2xl baseline, rounded-3xl on cards/dialogs), soft long-blur shadows (low opacity, 20–64px blur), spring-physics gestures, generous ease-out motion. Warm-cream background with dusty-terracotta primary and sage secondary — a "linen + sunset" palette that never goes grey or cold. DM Sans / Plus Jakarta humanist sans with rounded letterforms. Pill-shaped indicators (no uppercase shouting), pill-active selectables (underline avoided as too sharp). Ships its own warm palette + humanist sans stack via requiredCustomTokens.',
+    requiredCustomTokens,
+    spacing,
+    interactive,
+    surface,
+    formControl,
+    indicator,
+    selectable,
+    overlayBackdrop,
+    divider,
+    skeleton,
+    loadingSpinner,
+    loadingOverlay,
+    typography,
+    radius: '1rem',
+    backgroundLayer: {
+        // Subtle warm radial-gradient mesh — barely-perceptible "ambient
+        // glow" behind content. Animates very slowly (45s) so it never
+        // distracts from reading.
+        background: 'radial-gradient(at 25% 20%, oklch(0.85 0.08 35) 0px, transparent 50%), radial-gradient(at 80% 70%, oklch(0.88 0.06 130) 0px, transparent 50%)',
+        classes: 'opacity-30 animate-[mesh-shift_45s_ease_infinite] dark:opacity-15 motion-reduce:animate-none',
+    },
+    chartStyle: {
+        // Cozy charts: rounded bar corners, soft tooltip shadows, generous
+        // typography, normal animation.
+        colorShadeLight: 400,
+        colorShadeDark: 300,
+        gridPadding: { top: 30, right: 20, bottom: 30, left: 60 },
+        axis: {
+            showAxisLine: false,
+            showTicks: false,
+            splitLineType: 'dashed',
+            hideOverlap: true,
+            yAxisNameLocation: 'middle',
+            yAxisNameGap: 50,
+        },
+        tooltip: {
+            extraCss: 'border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 1px solid color-mix(in oklch, currentColor 12%, transparent);',
+            borderWidth: 1,
+        },
+        animation: { enabled: true, durationMs: 600, easing: 'cubicOut' },
+        series: { lineWidth: 2, pointSize: 5, areaOpacity: 0.18, barBorderRadius: 8, pieBorderWidth: 2 },
+        typography: {
+            titleFontSize: 16,
+            titleFontWeight: 500,
+            subtitleFontSize: 13,
+            legendFontSize: 12,
+            tooltipFontSize: 12,
+            axisLabelFontSize: 11,
+            axisNameFontSize: 12,
+        },
+        emphasis: { shadowBlur: 16, shadowColor: 'rgba(0, 0, 0, 0.10)', 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=cozy.theme.js.map