@wildo-ai/presets-components 1.0.1 → 1.1.1

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

@@ -0,0 +1,704 @@
+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 };
+}
+// ============================================================
+// Trading theme
+//
+// Persona: trading desks, market data, ops/observability dashboards,
+// any UI where information density and glance-able status matter more
+// than aesthetics.
+// References: classic financial-data terminals (you know the one),
+// TradingView, IBKR, Refinitiv Eikon — without naming any specific
+// product. The "amber-on-black, monospace, max-density" tradition is
+// older than any single vendor (PLATO IV, Reuters Stockmaster, etc.).
+//
+// Design DNA:
+//   - MONOSPACE EVERYTHING. Headings, body, indicators, code — all
+//     IBM Plex Mono / JetBrains Mono. Fixed-width is the entire point:
+//     numerics align column-wise, ticker tapes lock to grid.
+//   - ULTRA-TIGHT density (h-6/h-7 control ladder, smallest in lineup).
+//     A single screen needs to show twice as many rows as default.
+//   - AMBER primary (`oklch(0.78 0.15 80)`) — the canonical "data
+//     terminal" hue. No vendor owns the wavelength. Pairs with
+//     near-black surfaces for the iconic "amber phosphor" look.
+//   - SEMANTIC up/down green/red are non-negotiable: chartreuse-green
+//     for "tick-up" (`oklch(0.78 0.22 145)`), hot red for "tick-down"
+//     (`oklch(0.62 0.26 22)`). Wired through `success` / `destructive`
+//     so existing semantic-indicator code Just Works in trading apps.
+//   - SHARP corners (`rounded-none` baseline, `rounded-sm` on a few
+//     overlays). Every pixel of vertical space matters; rounded
+//     corners eat density and add no information.
+//   - INSTANT motion (duration-instant, linear). Ticking data must
+//     never animate — animations are for marketing pages, not for
+//     a price changing 12 times per second.
+//   - 1px hard borders, no shadows. Elevation is irrelevant; what
+//     matters is GRID — every cell separated by a single hairline.
+// ============================================================
+// -- Shared constants --
+const TR = {
+    /** Ultra-thin grid line — the visual atom of a trading UI. */
+    hairline: 'border border-foreground/15',
+    edge: 'border border-foreground/25',
+    /** Square corners by default. */
+    radius: 'rounded-none',
+    /** Tiny radius (2px) for overlays where pure squares feel too brutalist. */
+    radiusXs: 'rounded-sm',
+    focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/80 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+    disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+    invalid: 'aria-invalid:ring-destructive/40 dark:aria-invalid:ring-destructive/60 aria-invalid:border-destructive',
+};
+// ============================================================
+// MOTION PERSONALITY — Trading
+// ============================================================
+//   Hover/focus  : INSTANT (50ms)  + LINEAR  → 1:1 input/output, never
+//                                              competes with ticking data
+//                                              re-renders.
+//   Overlay enter: FAST    (150ms) + LINEAR  → fast enough to feel
+//                                              instant on click, slow
+//                                              enough to convey direction
+//                                              for tooltip/popover anchor.
+//   Overlay exit : INSTANT (50ms)  + LINEAR  → close = vanish.
+//   Backdrop     : FAST/INSTANT    + LINEAR  → consistent with overlays.
+//   Gestures     : NONE — no spring physics. Trading desks need DOM
+//                  events to land before motion completes; springs add
+//                  perceived latency.
+//
+// Why LINEAR explicitly: a "snappy/instant" theme that omits ease- on
+// CSS transitions silently inherits the browser default `ease` curve
+// (cubic-bezier(0.25, 0.1, 0.25, 1)) — a soft S-curve that is the
+// OPPOSITE of "instant linear." The TR-14 motion-coherence pass adds
+// explicit `ease-[var(--motion-easing-linear)]` to every overlay so
+// the LINEAR personality reaches the user's eye.
+//
+// Why FAST (not INSTANT) on overlay enter: at INSTANT (50ms) the
+// directional `slide-in-from-{side}-1` and `zoom-in-95` cues are
+// invisible (one frame at 60Hz). At FAST (150ms = ~9 frames) the
+// spatial cue is perceptible without feeling slow. Trading dashboards
+// rely on direction-of-anchor for tooltip-to-cell mental binding.
+// ============================================================
+const TR_MOTION = {
+    interactive: 'transition-[background-color,color,border-color] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    formControl: 'transition-[color,border-color,box-shadow] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    selectable: 'transition-[background-color,color,border-color] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    // Overlay enter: fade + tight zoom (95→100). Direction-less variant
+    // for centered overlays (Dialog, Toast). LINEAR easing explicit.
+    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-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] 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-instant)] data-[state=closed]:ease-[var(--motion-easing-linear)] motion-reduce:data-[state=closed]:animate-none',
+    // Directional variant (Tooltip, Popover, Dropdown, Hover Card):
+    // adds slide-in-from-{side}-1 — TR-14 restored these. Tight 1px
+    // slide (vs default's 2px) matches trading's compact density; 2px
+    // would feel sluggish next to h-5/h-6 controls.
+    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-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] 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-instant)] data-[state=closed]:ease-[var(--motion-easing-linear)] motion-reduce:data-[state=closed]:animate-none',
+};
+// ============================================================
+// INTERACTIVE
+// Smallest control ladder in the lineup. h-6 (xs) is intentional —
+// trading desks routinely use h-5/h-6 buttons to fit dense order
+// blotters. Mono font signals "this is a data action".
+// ============================================================
+const interactiveSizes = {
+    xs: 'h-5 px-1.5 text-[0.6875rem] gap-1 pointer-coarse:min-h-9',
+    sm: 'h-6 px-2 text-xs gap-1 pointer-coarse:min-h-11',
+    md: 'h-7 px-2.5 text-xs gap-1 pointer-coarse:min-h-11',
+    lg: 'h-9 px-4 text-sm pointer-coarse:min-h-11',
+    icon: 'size-7 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+    'icon-sm': 'size-5 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+};
+const interactive = {
+    [InteractiveVariant.PRIMARY]: recipe({
+        base: `bg-primary text-primary-foreground font-mono font-semibold uppercase tracking-tight ${TR.radius} cursor-pointer`,
+        states: {
+            hover: 'hover:bg-primary/85',
+            active: 'active:bg-primary/95',
+            focus: TR.focus,
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.SECONDARY]: recipe({
+        base: `bg-secondary text-secondary-foreground font-mono uppercase tracking-tight ${TR.hairline} ${TR.radius} cursor-pointer`,
+        states: {
+            hover: 'hover:bg-secondary/80 hover:border-foreground/30',
+            active: 'active:bg-secondary/90',
+            focus: TR.focus,
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.OUTLINE]: recipe({
+        base: `bg-transparent text-foreground font-mono uppercase tracking-tight ${TR.edge} ${TR.radius} cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:border-primary/50 hover:text-primary',
+            active: 'active:bg-muted/80',
+            focus: TR.focus,
+            selected: 'data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary',
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.DESTRUCTIVE]: recipe({
+        // SELL / SHORT button. Mapped to destructive so existing UIs that
+        // wire confirmDelete-style flows render as red SELL actions in
+        // trading mode without changing call sites.
+        base: `bg-destructive text-destructive-foreground font-mono font-bold uppercase tracking-tight ${TR.radius} cursor-pointer`,
+        states: {
+            hover: 'hover:bg-destructive/85',
+            active: 'active:bg-destructive/95',
+            focus: TR.focus,
+            highlighted: 'focus:bg-destructive/15 focus:text-destructive',
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.GHOST]: recipe({
+        base: `text-foreground font-mono uppercase tracking-tight ${TR.radius} cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:text-primary',
+            active: 'active:bg-muted/80',
+            focus: TR.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:text-primary',
+            highlighted: 'focus:bg-muted',
+            open: 'data-[state=open]:bg-muted data-[state=open]:text-primary',
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.LINK]: recipe({
+        // Trading "link" — typically a ticker symbol click. Underlined,
+        // mono, amber. No transition (clicks are decisive).
+        base: 'text-primary font-mono underline underline-offset-2 decoration-1 decoration-primary/60 uppercase cursor-pointer',
+        states: {
+            hover: 'hover:decoration-primary hover:bg-primary/10',
+            active: 'active:text-primary/80',
+            focus: TR.focus,
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: {
+            xs: 'h-5 px-1 text-[0.6875rem] gap-1 pointer-coarse:min-h-9',
+            sm: 'h-6 px-1 text-xs gap-1 pointer-coarse:min-h-11',
+            md: 'h-7 px-1 text-xs gap-1 pointer-coarse:min-h-11',
+            lg: 'h-9 px-1 text-sm pointer-coarse:min-h-11',
+            icon: 'size-7 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+            'icon-sm': 'size-5 pointer-coarse:min-h-9 pointer-coarse:min-w-9',
+        },
+        motion: { transition: TR_MOTION.interactive },
+    }),
+    [InteractiveVariant.ACCENT]: recipe({
+        // Trading accent: amber sweep with a "scanline" feel. Used for
+        // marquee actions like "EXECUTE", "PLACE ORDER".
+        base: `bg-primary text-primary-foreground font-mono font-bold uppercase tracking-wider ${TR.radius} bg-[length:200%_100%] bg-gradient-to-r from-accent-gradient-from via-accent-gradient-via to-accent-gradient-to animate-[gradient-rotate_2s_linear_infinite] motion-reduce:animate-none cursor-pointer`,
+        states: {
+            hover: 'hover:brightness-110',
+            active: 'active:brightness-90',
+            focus: TR.focus,
+            disabled: TR.disabled,
+            invalid: TR.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: {
+            transition: 'transition-[background-position,filter] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// SURFACE
+// SURFACE PERSONALITY — dense grid panels: sharp edges, mono data posture,
+// tabular numerals where policy applies, and compact alert tiles.
+// Grid panels. Sharp corners, 1px borders, no shadows.
+// ============================================================
+const surface = {
+    [SurfaceVariant.BASE]: recipe({
+        base: `bg-background text-foreground ${TR.hairline} ${TR.radius}`,
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Content card: distinct `surface-raised` fill + amber-tinted edge + the
+        // tight trading radius. Always painted.
+        base: `bg-surface-raised text-surface-raised-foreground ${TR.edge} ${TR.radiusXs}`,
+    }),
+    [SurfaceVariant.RAISED]: recipe({
+        // Popover: amber-tinted edge so it pops against the dark grid.
+        // `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 ${TR.edge} ${TR.radiusXs} shadow-[0_2px_8px_rgba(0,0,0,0.3)]`,
+        motion: {
+            enter: TR_MOTION.enterDirectional,
+            exit: TR_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.OVERLAY]: recipe({
+        base: `bg-background text-foreground ${TR.edge} ${TR.radiusXs} shadow-[0_8px_32px_rgba(0,0,0,0.5)]`,
+        motion: {
+            enter: TR_MOTION.enterFadeZoom,
+            exit: TR_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.INSET]: recipe({
+        base: `bg-muted/40 text-foreground font-mono ${TR.radius}`,
+    }),
+    [SurfaceVariant.SUNKEN]: recipe({
+        base: 'bg-muted/30 text-foreground border-r border-foreground/20',
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // Grid panel under a tab strip: sharp, top edge omitted, mono data posture.
+        base: `bg-background text-foreground border-x border-b border-foreground/20 font-mono ${TR.radius}`,
+        policy: {
+            content: {
+                numericAlignment: 'tabular',
+            },
+        },
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // Trading shell: dark grid canvas; cards/tables draw all chrome.
+        base: 'bg-background text-foreground font-mono',
+        policy: {
+            content: {
+                numericAlignment: 'tabular',
+            },
+        },
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        // Toast: compact alert tile with amber edge and tabular numerals.
+        base: `bg-background text-foreground ${TR.edge} ${TR.radiusXs} font-mono shadow-[0_4px_16px_rgba(0,0,0,0.35)]`,
+        motion: {
+            enter: TR_MOTION.enterDirectional,
+            exit: TR_MOTION.exitFadeZoom,
+        },
+        policy: {
+            content: {
+                numericAlignment: 'tabular',
+            },
+        },
+    }),
+};
+// ============================================================
+// FORM_CONTROL
+// Tight, sharp, mono. Even the placeholder is mono — every text input
+// in a trading UI is for entering a symbol, a quantity, or a price.
+// ============================================================
+const formControl = {
+    [FormControlVariant.DEFAULT]: recipe({
+        base: `bg-background ${TR.edge} ${TR.radius} text-base md:text-xs font-mono text-foreground placeholder:text-muted-foreground/50 placeholder:font-mono selection:bg-primary/40 selection:text-foreground`,
+        states: {
+            focus: TR.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TR.invalid,
+        },
+        sizes: {
+            md: 'h-7 px-2 py-0.5 pointer-coarse:min-h-11',
+            sm: 'h-6 px-1.5 text-xs pointer-coarse:min-h-11',
+            lg: 'h-9 px-3 py-1 pointer-coarse:min-h-11',
+        },
+        motion: { transition: TR_MOTION.formControl },
+    }),
+    [FormControlVariant.FILLED]: recipe({
+        base: `bg-muted/60 ${TR.radius} border-0 text-base md:text-xs font-mono text-foreground placeholder:text-muted-foreground/50`,
+        states: {
+            focus: TR.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TR.invalid,
+        },
+        sizes: {
+            md: 'h-7 px-2 py-0.5 pointer-coarse:min-h-11',
+            sm: 'h-6 px-1.5 text-xs pointer-coarse:min-h-11',
+            lg: 'h-9 px-3 py-1 pointer-coarse:min-h-11',
+        },
+        motion: { transition: TR_MOTION.formControl },
+    }),
+    [FormControlVariant.UNDERLINED]: recipe({
+        base: 'bg-transparent border-0 border-b border-foreground/30 rounded-none text-base md:text-xs font-mono text-foreground placeholder:text-muted-foreground/50',
+        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-7 px-0 py-0.5 pointer-coarse:min-h-11',
+            sm: 'h-6 px-0 text-xs pointer-coarse:min-h-11',
+            lg: 'h-9 px-0 py-1 pointer-coarse:min-h-11',
+        },
+        motion: {
+            transition: 'transition-[border-color] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.CHECKBOX]: recipe({
+        base: `${TR.edge} ${TR.radius}`,
+        states: {
+            focus: TR.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: TR.invalid,
+        },
+        motion: {
+            transition: 'transition-[color,box-shadow] duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.SWITCH]: recipe({
+        base: 'data-[state=unchecked]:bg-muted/70 border border-foreground/25',
+        states: {
+            focus: TR.focus,
+            selected: 'data-[state=checked]:bg-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TR.invalid,
+        },
+        motion: {
+            transition: 'transition-all duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// INDICATOR
+// Square, mono, uppercase. Paired with the SUCCESS=up-green /
+// DESTRUCTIVE=down-red palette overrides below, the existing semantic
+// API (NEUTRAL/INFO/SUCCESS/WARNING/ERROR) renders as exactly the
+// indicators a trading UI needs:
+//   - SUCCESS  → ▲ up-tick green
+//   - ERROR    → ▼ down-tick red
+//   - WARNING  → halt / circuit breaker amber
+//   - INFO     → news / advisory cyan
+//   - NEUTRAL  → reference data grey
+// (The arrow glyph itself is the consumer's responsibility — the
+// theme just guarantees the COLOR + SHAPE.)
+// ============================================================
+const trIndicatorShared = {
+    states: { hover: '[a&]:hover:opacity-[var(--opacity-hover)]', focus: TR.focus, invalid: TR.invalid },
+    motion: { transition: TR_MOTION.interactive },
+};
+const indicator = {
+    [IndicatorVariant.NEUTRAL]: recipe({
+        base: `bg-muted/60 text-muted-foreground ${TR.radius} ${TR.hairline} px-1.5 py-0 font-mono text-2xs font-semibold uppercase tracking-wider`,
+        ...trIndicatorShared,
+    }),
+    [IndicatorVariant.INFO]: recipe({
+        base: `bg-info/15 text-info ${TR.radius} border border-info/40 px-1.5 py-0 font-mono text-2xs font-semibold uppercase tracking-wider`,
+        ...trIndicatorShared,
+    }),
+    [IndicatorVariant.SUCCESS]: recipe({
+        // ↑ tick-up green — high contrast against dark grid.
+        base: `bg-success/20 text-success ${TR.radius} border border-success/50 px-1.5 py-0 font-mono text-2xs font-bold uppercase tracking-wider`,
+        ...trIndicatorShared,
+    }),
+    [IndicatorVariant.WARNING]: recipe({
+        base: `bg-warning/20 text-warning ${TR.radius} border border-warning/50 px-1.5 py-0 font-mono text-2xs font-bold uppercase tracking-wider`,
+        ...trIndicatorShared,
+    }),
+    [IndicatorVariant.ERROR]: recipe({
+        // ↓ tick-down red — same intensity as SUCCESS so the up/down pair
+        // reads as a balanced semantic axis.
+        base: `bg-destructive/20 text-destructive ${TR.radius} border border-destructive/50 px-1.5 py-0 font-mono text-2xs font-bold uppercase tracking-wider`,
+        ...trIndicatorShared,
+    }),
+};
+// ============================================================
+// SELECTABLE
+// Tab + sidebar variants. Active state is amber-on-dark.
+// ============================================================
+const selectable = {
+    [SelectableVariant.FILLED]: recipe({
+        base: `${TR.radius} text-xs font-mono uppercase outline-hidden`,
+        states: {
+            hover: 'hover:bg-muted hover:text-primary',
+            focus: 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+            selected: 'data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:font-bold data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:font-bold',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-5 text-[0.6875rem]', md: 'h-6 text-xs', lg: 'h-9 text-sm' },
+        motion: { transition: TR_MOTION.selectable },
+    }),
+    [SelectableVariant.UNDERLINE]: recipe({
+        base: 'rounded-none border-b-2 border-transparent text-xs font-mono uppercase text-muted-foreground outline-hidden',
+        states: {
+            hover: 'hover:text-foreground',
+            focus: 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+            selected: 'data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:font-bold',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-6 text-[0.6875rem] pb-0.5', md: 'h-7 text-xs pb-1', lg: 'h-9 text-sm pb-1.5' },
+        motion: { transition: TR_MOTION.selectable },
+    }),
+    [SelectableVariant.PILL]: recipe({
+        // Trading "pill" stays square — the variant name is semantic,
+        // not literal. We're not adding actual pill shapes here.
+        base: `${TR.radius} text-xs font-mono uppercase outline-hidden ${TR.hairline} border-transparent`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/25 hover:text-primary',
+            focus: 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+            selected: 'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary data-[state=active]:font-bold',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-5 px-2 text-[0.6875rem]', md: 'h-6 px-2.5 text-xs', lg: 'h-9 px-4 text-sm' },
+        motion: { transition: TR_MOTION.selectable },
+    }),
+    [SelectableVariant.INDICATOR]: recipe({
+        base: `${TR.radius} text-xs font-mono uppercase outline-hidden border-s-2 border-transparent`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+            selected: 'data-[active=true]:border-primary data-[active=true]:bg-muted data-[active=true]:text-primary data-[active=true]:font-bold',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-5 text-[0.6875rem]', md: 'h-6 text-xs', lg: 'h-9 text-sm' },
+        motion: { transition: TR_MOTION.selectable },
+    }),
+};
+// ============================================================
+// OVERLAY, DIVIDER, SKELETON
+// ============================================================
+const overlayBackdrop = recipe({
+    // Trading scrim: very dark, no blur (preserves the data behind it
+    // for context while a confirmation dialog opens).
+    base: 'bg-foreground/60',
+    motion: {
+        enter: TR_MOTION.backdropEnter,
+        exit: TR_MOTION.backdropExit,
+    },
+});
+const divider = recipe({ base: 'bg-foreground/15 shrink-0' });
+const skeleton = recipe({
+    // Trading skeletons are LINEAR (no rounded corners) so they
+    // perfectly replace tabular cells while loading.
+    base: `bg-muted/70 animate-pulse ${TR.radius} motion-reduce:animate-none`,
+});
+const loadingSpinner = recipe({
+    base: 'text-primary animate-spin motion-reduce:animate-none',
+});
+const loadingOverlay = recipe({
+    base: 'bg-background/90',
+    motion: {
+        enter: 'animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:animate-none',
+        exit: 'animate-out fade-out-0 duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:animate-none',
+    },
+});
+// ============================================================
+// TYPOGRAPHY
+// Mono for everything. Sizes compress: BODY at 12px (default 14px)
+// because every line of text in a trading UI is competing with rows
+// of numerics. CODE at 1em (no shrink) — code blocks are the same
+// size as body since body IS already mono.
+// ============================================================
+const typography = {
+    [TypographyVariant.HEADING]: recipe({
+        base: 'font-mono font-bold uppercase tracking-tight text-foreground',
+        sizes: {
+            h1: 'text-2xl',
+            h2: 'text-xl',
+            h3: 'text-base',
+            h4: 'text-sm',
+            md: 'text-sm',
+        },
+    }),
+    [TypographyVariant.BODY]: recipe({
+        // 12px mono body — fits ~50% more rows on screen than default's
+        // 14px sans body. The whole theme assumes the user is parsing
+        // tabular data, not reading prose.
+        base: 'font-mono text-foreground text-xs leading-tight',
+        sizes: { sm: 'text-[0.6875rem]', md: 'text-xs', lg: 'text-sm' },
+    }),
+    [TypographyVariant.LABEL]: recipe({
+        base: 'font-mono font-semibold text-2xs leading-none uppercase tracking-wider text-muted-foreground',
+        sizes: { sm: 'text-[0.5625rem]', md: 'text-2xs', lg: 'text-xs' },
+    }),
+    [TypographyVariant.DESCRIPTION]: recipe({
+        base: 'font-mono text-muted-foreground text-[0.6875rem] leading-tight',
+        sizes: { sm: 'text-2xs', md: 'text-[0.6875rem]' },
+    }),
+    [TypographyVariant.CODE]: recipe({
+        // Body is already mono, so CODE just adds a subtle bg + border.
+        base: 'font-mono text-[1em] bg-muted/60 rounded-none px-1 border border-foreground/15',
+        sizes: { sm: 'text-[0.875em]', md: 'text-[1em]', lg: 'text-[1.0625em]' },
+    }),
+};
+// ============================================================
+// SPACING
+// ULTRA-tight — smallest in lineup by a wide margin. A trading desk
+// running 6 displays still wants more rows on each one.
+// ============================================================
+const spacing = {
+    [SpacingSemantic.ELEMENT]: '0.25rem',
+    [SpacingSemantic.ITEM]: '0.125rem',
+    [SpacingSemantic.GROUP]: '0.5rem',
+    [SpacingSemantic.FIELD]: '0.625rem',
+    [SpacingSemantic.SECTION]: '0.875rem',
+    [SpacingSemantic.REGION]: '1.25rem',
+    [SpacingSemantic.CARD]: '0.625rem',
+    [SpacingSemantic.CONTAINER]: '0.875rem',
+};
+// ============================================================
+// REQUIRED CUSTOM TOKENS — amber + tick-up/down semantic palette
+//
+// The trading palette is the entire reason the theme exists.
+// Without these overrides, the host's "primary blue" on a dense
+// grid reads as a dashboard, not as a market terminal.
+//
+// Light mode: warm off-white grid background, charcoal foreground,
+// dimmed amber accent. Trading apps DO occasionally run in light
+// mode (regulatory snapshots, daylight ops floors), so we take it
+// as seriously as dark mode.
+// ============================================================
+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 cream in light (matches paper tape /
+    // newsprint stocklists), near-black in dark (the canonical "data
+    // terminal" surface). Slight amber tint at hue 80 keeps the dark
+    // mode from feeling cold/clinical.
+    background: colorOverride('0.965 0.008 80', '0.11 0.005 80'),
+    foreground: colorOverride('0.18 0.005 80', '0.92 0.008 80'),
+    // === Primary: TRADING AMBER (~#f5a623 family). Light L=0.65 keeps
+    // black primary-foreground at ~5.4:1; dark L=0.78 keeps black at
+    // ~6.8:1. Both well above WCAG AA. The amber hue (80) is the same
+    // wavelength every data terminal has used since the CRT phosphor
+    // era — it's not owned by anyone.
+    primary: colorOverride('0.65 0.16 80', '0.78 0.15 80'),
+    'primary-foreground': colorSingle('0.10 0.005 80'),
+    // === Secondary: subtle off-bg (slightly darker in light, slightly
+    // lighter in dark). The "non-amber action" — for cancel buttons,
+    // close-position buttons, any non-primary action.
+    secondary: colorOverride('0.92 0.008 80', '0.16 0.005 80'),
+    'secondary-foreground': colorOverride('0.18 0.005 80', '0.92 0.008 80'),
+    // === Muted: the grid-line / inset cell color.
+    muted: colorOverride('0.94 0.008 80', '0.18 0.005 80'),
+    'muted-foreground': colorOverride('0.45 0.008 80', '0.62 0.008 80'),
+    // === Borders: the GRID. Trading UIs are made of grid lines; this
+    // is the most consequential token in the theme.
+    border: colorOverride('0.85 0.008 80', '0.22 0.005 80'),
+    ring: colorOverride('0.65 0.16 80', '0.78 0.15 80'),
+    input: colorOverride('0.85 0.008 80', '0.22 0.005 80'),
+    // === Destructive = TICK-DOWN RED. Hot, saturated, unmissable.
+    // Wired through `destructive` so existing UIs that render a "delete"
+    // button get a SELL/SHORT visual without rewiring call sites.
+    // Light L=0.55 keeps white text at ~5.0:1; dark L=0.65 keeps white
+    // at ~5.2:1.
+    destructive: colorOverride('0.55 0.24 22', '0.65 0.26 22'),
+    'destructive-foreground': colorSingle('1 0 0'),
+    // === Semantic colors — the up/down/halt axis.
+    // SUCCESS = TICK-UP GREEN (chartreuse-leaning). Saturated and
+    // bright enough to balance the SELL red — the eye should track
+    // the up/down pair as equal-weight, opposite-polarity signals.
+    success: colorOverride('0.62 0.22 145', '0.78 0.22 145'),
+    'success-foreground': colorSingle('0.08 0.005 80'),
+    // WARNING = HALT / CIRCUIT-BREAKER AMBER. A different amber from
+    // primary (slightly orangier, hue 70 vs 80) so a "warning indicator"
+    // doesn't blur into a "primary action".
+    warning: colorOverride('0.72 0.18 70', '0.80 0.20 70'),
+    'warning-foreground': colorSingle('0.08 0.005 80'),
+    // INFO = NEWS / ADVISORY CYAN. Cool counterpoint, used for
+    // non-actionable advisories.
+    //
+    // ⚠ Wave G follow-up TR-13 (contrast correction): cyan at L=0.62
+    // hue 220 has sRGB Y≈0.27 → only ~3.4:1 with white text, well
+    // below WCAG AA 4.5:1. SUCCESS and WARNING in this theme already
+    // use near-black foreground (the "phosphor on amber" convention
+    // is dark text on bright signal); INFO was inconsistent with white.
+    // Fix: flip info-foreground to the same near-black L=0.08 as the
+    // other two semantic foregrounds. New contrast: ~5.4:1 light, even
+    // higher in dark mode (cyan L=0.74 → ~7.5:1). This also reads as
+    // a coherent semantic family (all three semantic indicators use
+    // the same dark-text rule on bright bg).
+    info: colorOverride('0.62 0.14 220', '0.74 0.16 220'),
+    'info-foreground': colorSingle('0.08 0.005 80'),
+    // === Accent gradient: amber → orange → red. A "ticker tape"
+    // sweep that fits the trading aesthetic (vs default's cool
+    // violet/blue/pink).
+    'accent-gradient-from': colorOverride('0.65 0.16 80', '0.78 0.15 80'),
+    'accent-gradient-via': colorOverride('0.68 0.20 50', '0.78 0.20 50'),
+    'accent-gradient-to': colorOverride('0.55 0.24 22', '0.65 0.26 22'),
+    // === Font stacks: monospace EVERYTHING. IBM Plex Mono is the
+    // canonical "professional terminal" mono (designed by IBM for
+    // exactly this use case); JetBrains Mono / Roboto Mono are
+    // excellent fallbacks. No sans/serif stacks — trading is mono.
+    'font-heading': stringSingle("'IBM Plex Mono', 'JetBrains Mono', 'Roboto Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace"),
+    'font-body': stringSingle("'IBM Plex Mono', 'JetBrains Mono', 'Roboto Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace"),
+    'font-mono': stringSingle("'IBM Plex Mono', 'JetBrains Mono', 'Roboto Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace"),
+};
+// ============================================================
+// ASSEMBLED THEME
+// ============================================================
+export const tradingTheme = {
+    id: 'trading',
+    name: 'Trading',
+    description: 'Maximum-density theme for trading desks, market data, and observability dashboards. Monospace EVERYTHING (IBM Plex Mono / JetBrains Mono / Roboto Mono) — body, headings, indicators, code. Ultra-tight control ladder (h-5 xs / h-6 sm / h-7 md, smallest in lineup). Sharp corners (rounded-none baseline), 1px hard borders forming a grid, no shadows. Trading-amber primary (oklch(0.65–0.78 0.16 80) — the "data terminal phosphor" hue). Semantic SUCCESS=tick-up-green / DESTRUCTIVE=tick-down-red wired so existing semantic-indicator code renders as the up/down/halt axis a market UI needs. Instant linear motion (ticking data must never animate). Ships its own amber + up/down palette + monospace stacks via requiredCustomTokens.',
+    requiredCustomTokens,
+    spacing,
+    interactive,
+    surface,
+    formControl,
+    indicator,
+    selectable,
+    overlayBackdrop,
+    divider,
+    skeleton,
+    loadingSpinner,
+    loadingOverlay,
+    typography,
+    radius: '0px',
+    backgroundLayer: undefined,
+    chartStyle: {
+        // Trading charts: tight grid, mono labels, instant animation,
+        // bright series, hard candles (square corners).
+        colorShadeLight: 600,
+        colorShadeDark: 400,
+        gridPadding: { top: 16, right: 12, bottom: 24, left: 48 },
+        axis: {
+            showAxisLine: true,
+            showTicks: true,
+            splitLineType: 'dashed',
+            hideOverlap: true,
+            yAxisNameLocation: 'middle',
+            yAxisNameGap: 40,
+        },
+        tooltip: {
+            extraCss: 'font-family: "IBM Plex Mono", "JetBrains Mono", monospace; border: 1px solid color-mix(in oklch, currentColor 30%, transparent); border-radius: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.4);',
+            borderWidth: 1,
+        },
+        animation: { enabled: false, durationMs: 0, easing: 'linear' },
+        series: { lineWidth: 1, pointSize: 2, areaOpacity: 0.10, barBorderRadius: 0, pieBorderWidth: 1 },
+        typography: {
+            titleFontSize: 13,
+            titleFontWeight: 700,
+            subtitleFontSize: 11,
+            legendFontSize: 10,
+            tooltipFontSize: 11,
+            axisLabelFontSize: 10,
+            axisNameFontSize: 10,
+        },
+        emphasis: { shadowBlur: 0, shadowColor: 'transparent', shadowOffsetX: 0 },
+        responsive: {
+            smallMaxWidth: 400,
+            mediumMaxWidth: 799,
+            smallGridPadding: { top: 12, right: 8, bottom: 16, left: 28 },
+            mediumGridPadding: { left: 36, right: 12, bottom: 24 },
+            hideLegendOnSmall: true,
+            smallAxisLabelRotate: 45,
+            smallFontSize: 9,
+            mediumFontSize: 10,
+        },
+        multiSeriesLegendBottomPadding: 32,
+    },
+};
+//# sourceMappingURL=trading.theme.js.map