/** * BrighterTrading design system -- tokens * * Source of truth for every visual primitive in the bt-* component * library. Values extracted from the existing UI in DESIGN_SYSTEM_AUDIT.md * (Phase 0); not invented abstractly. * * Conventions: * - Names are bt--. Stable. * - components.css references these tokens ONLY -- no raw colors, * hex codes, or hard-coded radii live there. * - Theme variants override colors via attribute selectors on * : data-theme, data-density, data-radius. Composable, so a * single theme bucket cannot lock users into a fixed combination. * - User customisation extends the same machinery: inline CSS vars * on (for example, setting --bt-accent) override the * attribute defaults without needing a new bucket. * * Loaded after compatibility/base CSS, so legacy CSS is unaffected. * No existing template or class is restyled by this file alone. * * See also: * DESIGN_SYSTEM_PLAN.md -- migration plan * DESIGN_SYSTEM_AUDIT.md -- inventory + token derivation * ./components.css -- bt-* classes that reference these */ /* ============================================================ */ /* Default light theme */ /* ============================================================ */ :root { /* --- Surface ---------------------------------------------- */ /* Primary page bg matches body background-color in legacy CSS. */ --bt-bg: #f9fafb; --bt-surface: #ffffff; --bt-surface-2: #f8f9fa; /* raised surface / subtle alt */ --bt-border: #e0e0e0; --bt-border-soft: #dddddd; /* dividers */ /* --- Text -------------------------------------------------- */ --bt-text: #333333; /* primary body */ --bt-text-strong: #1a1a2e; /* headings */ --bt-text-muted: #666666; /* secondary */ --bt-text-faint: #888888; /* tertiary / placeholder */ /* --- Brand / accent (canonical, per Codex review) --------- */ --bt-accent: #3e3af2; /* brand purple, primary action */ --bt-accent-hover: #6366f1; /* hover/focus */ --bt-accent-link: #818cf8; /* links / accent-light text */ --bt-accent-fg: #ffffff; /* text on accent */ --bt-accent-soft: rgba(62, 58, 242, 0.10); /* --- App / panel chrome (separate from accent so a theme can * give buttons one colour and section headers another -- * e.g. Brighter Classic uses sage-green for accent but keeps * the indigo section bars from the legacy look). */ --bt-panel-header-bg: #3e3af2; --bt-panel-header-fg: #ffffff; /* --- Status (UI -- separate from chart) ------------------- */ --bt-success: #28a745; --bt-success-hover: #218838; --bt-success-fg: #ffffff; --bt-success-soft: rgba(40, 167, 69, 0.10); --bt-danger: #dc3545; --bt-danger-hover: #c82333; --bt-danger-fg: #ffffff; --bt-danger-soft: rgba(220, 53, 69, 0.10); --bt-warning: #fbbf24; --bt-warning-hover: #e0a800; --bt-warning-fg: #78350f; --bt-warning-soft: rgba(251, 191, 36, 0.10); --bt-verified: #f97316; --bt-info: #0d6efd; --bt-info-hover: #0b5ed7; --bt-info-fg: #ffffff; --bt-info-soft: rgba(13, 110, 253, 0.10); /* --- Chart tokens (do NOT collapse with UI status) -------- */ /* These drive lightweight-charts colors. UI never uses them. */ --bt-chart-bullish: #00c853; --bt-chart-bearish: #ff5252; --bt-chart-grid: #e0e0e0; --bt-chart-text: #666666; /* --- Dark surface family used inside light theme too ------ */ /* HUDs and dialog headers in the existing UI use these. */ --bt-dark-bg: #1a1a2e; --bt-dark-surface: #2a2a4a; --bt-dark-text: #f5f5f5; --bt-dark-text-muted:#aaaaaa; --bt-dark-border: rgba(255, 255, 255, 0.10); /* --- Spacing ---------------------------------------------- */ /* 2/4/8/12/16/24/32/48 covers >95% of grep'd values. */ --bt-space-0: 0; --bt-space-1: 2px; --bt-space-2: 4px; --bt-space-3: 8px; --bt-space-4: 12px; --bt-space-5: 16px; --bt-space-6: 24px; --bt-space-7: 32px; --bt-space-8: 48px; /* --- Radius ----------------------------------------------- */ --bt-radius-none: 0; --bt-radius-sm: 4px; --bt-radius-md: 6px; --bt-radius-lg: 10px; --bt-radius-pill: 9999px; /* --- Typography ------------------------------------------- */ --bt-font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif; --bt-font-mono: 'Menlo', 'Consolas', 'Monaco', monospace; --bt-font-size-xs: 9px; /* badges / footnotes */ --bt-font-size-sm: 11px; /* dense body / HUDs */ --bt-font-size-md: 13px; /* default body */ --bt-font-size-lg: 14px; /* prominent body */ --bt-font-size-xl: 18px; /* section heading */ --bt-font-size-2xl: 24px; /* dialog title / page heading */ --bt-font-weight-normal: 400; --bt-font-weight-bold: 700; --bt-line-height-tight: 1.2; --bt-line-height-normal: 1.5; /* --- Shadow ----------------------------------------------- */ --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --bt-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.20); --bt-shadow-modal: 0 8px 25px rgba(0, 0, 0, 0.50); /* --- Z-index --------------------------------------------- */ /* Layered intentionally so dropdowns sit beneath modals and toasts always win. */ --bt-z-dropdown: 100; --bt-z-sticky: 200; --bt-z-modal-backdrop: 1000; --bt-z-modal: 1010; --bt-z-toast: 2000; /* --- Motion ----------------------------------------------- */ --bt-transition-fast: 120ms ease; --bt-transition-med: 200ms ease; /* --- Focus ring ------------------------------------------- */ --bt-focus-ring: 0 0 0 0.2rem var(--bt-accent-soft); /* --- Overlays (white-at-alpha for hover-on-colored-bg) ----- */ /* Close buttons inside colored dialog headers, hover lifts on colored backgrounds, and overlay scrims live here. Tokens mean dark mode + accent overrides cascade cleanly. */ --bt-overlay-soft: rgba(255, 255, 255, 0.20); --bt-overlay-strong: rgba(255, 255, 255, 0.30); --bt-overlay-scrim: rgba(0, 0, 0, 0.50); } /* ============================================================ */ /* Dark theme override */ /* ============================================================ */ /* Activated by data-theme="dark" on . Composable with data-density and data-radius. */ [data-theme="dark"] { --bt-bg: #0f0f1a; --bt-surface: #1a1a2e; --bt-surface-2: #2a2a4a; --bt-border: rgba(255, 255, 255, 0.10); --bt-border-soft: rgba(255, 255, 255, 0.05); --bt-text: #f5f5f5; --bt-text-strong: #ffffff; --bt-text-muted: #aaaaaa; --bt-text-faint: #888888; /* Accent stays brand purple; the value works on both light and dark surfaces because of its mid luminance. Subtle soft variant adjusted for dark background contrast. */ --bt-accent-soft: rgba(99, 102, 241, 0.20); /* Status soft variants slightly brighter against dark bg. */ --bt-success-soft: rgba(40, 167, 69, 0.20); --bt-danger-soft: rgba(220, 53, 69, 0.20); --bt-warning-soft: rgba(251, 191, 36, 0.20); --bt-info-soft: rgba(13, 110, 253, 0.20); /* Chart grid + text adjusted for dark background. */ --bt-chart-grid: rgba(255, 255, 255, 0.10); --bt-chart-text: #aaaaaa; /* Shadows are stronger against dark bg. */ --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --bt-shadow-modal: 0 12px 30px rgba(0, 0, 0, 0.70); } /* ============================================================ */ /* Density variants (composable with theme) */ /* ============================================================ */ /* Tighten or loosen spacing without changing colors. Activated by data-density="compact|comfortable|spacious" on . Default (no attribute) = comfortable. */ [data-density="compact"] { --bt-space-1: 1px; --bt-space-2: 2px; --bt-space-3: 4px; --bt-space-4: 8px; --bt-space-5: 12px; --bt-space-6: 16px; --bt-space-7: 24px; --bt-space-8: 32px; --bt-font-size-xs: 9px; --bt-font-size-sm: 10px; --bt-font-size-md: 12px; --bt-font-size-lg: 13px; --bt-font-size-xl: 16px; --bt-font-size-2xl: 20px; } [data-density="spacious"] { --bt-space-1: 4px; --bt-space-2: 6px; --bt-space-3: 12px; --bt-space-4: 16px; --bt-space-5: 20px; --bt-space-6: 32px; --bt-space-7: 40px; --bt-space-8: 56px; --bt-font-size-xs: 11px; --bt-font-size-sm: 13px; --bt-font-size-md: 15px; --bt-font-size-lg: 16px; --bt-font-size-xl: 20px; --bt-font-size-2xl: 28px; } /* ============================================================ */ /* Radius variants (composable with theme + density) */ /* ============================================================ */ /* Activated by data-radius="square|soft|round" on . Default (no attribute) keeps the values declared in :root. */ [data-radius="square"] { --bt-radius-sm: var(--bt-radius-none); --bt-radius-md: 2px; --bt-radius-lg: 2px; } /* "Soft" is the default. The explicit selector exists so the demo's data-radius switcher can round-trip through it (set the attribute instead of removing it). */ [data-radius="soft"] { --bt-radius-sm: 4px; --bt-radius-md: 6px; --bt-radius-lg: 10px; } [data-radius="round"] { --bt-radius-sm: 8px; --bt-radius-md: 12px; --bt-radius-lg: 18px; } /* ============================================================ */ /* Font scale (composable; applies on top of theme + density) */ /* ============================================================ */ /* Scales every --bt-font-size-* by a multiplier so users can * pick "make everything bigger" without touching per-component * styles. ``small`` and ``x-large`` are the practical extremes * for trading-app density; ``medium`` is roughly a no-op against * the default scale (kept for symmetry with the editor's options). * * Composes with [data-density]: density picks the base scale, then * font-scale multiplies it. Result: a "compact + large" user sees * compact spacing with normal-ish font sizes; a "spacious + small" * user gets airy spacing with tight fonts. */ [data-font-scale="small"] { --bt-font-size-xs: 8px; --bt-font-size-sm: 9px; --bt-font-size-md: 11px; --bt-font-size-lg: 12px; --bt-font-size-xl: 15px; --bt-font-size-2xl: 20px; } [data-font-scale="medium"] { /* No-op against the default token values; kept so the dropdown has a "Medium" symmetric to "Small/Large/X-Large". */ --bt-font-size-xs: 9px; --bt-font-size-sm: 11px; --bt-font-size-md: 13px; --bt-font-size-lg: 14px; --bt-font-size-xl: 18px; --bt-font-size-2xl: 24px; } [data-font-scale="large"] { --bt-font-size-xs: 10px; --bt-font-size-sm: 12px; --bt-font-size-md: 15px; --bt-font-size-lg: 16px; --bt-font-size-xl: 21px; --bt-font-size-2xl: 28px; } [data-font-scale="x-large"] { --bt-font-size-xs: 12px; --bt-font-size-sm: 14px; --bt-font-size-md: 17px; --bt-font-size-lg: 19px; --bt-font-size-xl: 24px; --bt-font-size-2xl: 32px; } /* ============================================================ */ /* Reduced-motion override */ /* ============================================================ */ /* Honour the OS preference. Components that animate via these tokens get instant transitions instead of fading/sliding. */ @media (prefers-reduced-motion: reduce) { :root { --bt-transition-fast: 0s; --bt-transition-med: 0s; } }