/* ───────────────────────────────────────────────────────────── * Yard Dispatch · UI v2 design tokens * * All v2 styles are scoped under `html.v2` so this file can be * imported globally without affecting v1 routes. v2 routes opt in * by adding the `v2` class to on mount (and removing it on * unmount). The mock preview adds it statically. * * Two themes: * default ("cmd" / Command) — dark, industrial command-center * .ws ("ws" / Whiteboard) — light, off-white site-office * * The existing app's `.dark` class is also accepted as an alias * for the Command palette so the live ThemeToggle "just works". * ──────────────────────────────────────────────────────────── */ html.v2 { /* Command (dark) is the v2 default. */ --bg: #0E1014; --surface-1: #15181E; --surface-2: #1B1F26; --surface-3: #252A33; --ink: #E7E9EC; --ink-mute: #9CA3AF; --ink-dim: #6B7280; --line: #262A33; --line-strong: #3A4150; --hi-vis: #F5C242; --hi-vis-ink: #1A1409; --accent: #5BA8B0; --good: #6FB87A; --warn: #E2A23B; --bad: #D5654E; } /* Whiteboard (light) — explicit `.ws` matches the mock's tweaks API. */ html.v2.ws { --bg: #F5F4EE; --surface-1: #FFFFFF; --surface-2: #F1EFE7; --surface-3: #E5E2D6; --ink: #1A1D22; --ink-mute: #5A6068; --ink-dim: #8B8F95; --line: #D9D5C7; --line-strong: #9C9685; --hi-vis: #F5C242; --hi-vis-ink: #1A1409; --accent: #3F7A82; --good: #3D8E4D; --warn: #B57A1F; --bad: #A8442F; } html.v2 body { background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Surfaces ─────────────────────────────────────────────── */ html.v2 .surface-1 { background: var(--surface-1); } html.v2 .surface-2 { background: var(--surface-2); } html.v2 .surface-3 { background: var(--surface-3); } /* ─── Ink ──────────────────────────────────────────────────── */ html.v2 .ink { color: var(--ink); } html.v2 .ink-mute { color: var(--ink-mute); } html.v2 .ink-dim { color: var(--ink-dim); } html.v2 .text-good { color: var(--good); } html.v2 .text-warn { color: var(--warn); } html.v2 .text-bad { color: var(--bad); } html.v2 .text-hivis { color: var(--hi-vis); } /* ─── Backgrounds ──────────────────────────────────────────── */ html.v2 .bg-hivis { background: var(--hi-vis); color: var(--hi-vis-ink); } html.v2 .bg-accent { background: var(--accent); } html.v2 .bg-dots { background-color: var(--bg); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; background-position: -1px -1px; } html.v2 .placeholder-stripes { background-image: repeating-linear-gradient( 135deg, var(--surface-2) 0, var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px ); } /* ─── Borders ──────────────────────────────────────────────── */ html.v2 .border-line { border-color: var(--line); } html.v2 .border-line-strong { border-color: var(--line-strong); } html.v2 .border-l-line { border-left-color: var(--line); } html.v2 .border-r-line { border-right-color: var(--line); } html.v2 .border-t-line { border-top-color: var(--line); } html.v2 .border-b-line { border-bottom-color: var(--line); } /* ─── Typography ───────────────────────────────────────────── */ html.v2 .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } html.v2 .tab-digit { font-variant-numeric: tabular-nums; } html.v2 .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-dim); } /* ─── Components ───────────────────────────────────────────── */ html.v2 .card { background: var(--surface-1); border: 1px solid var(--line); } html.v2 .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; line-height: 1.4; letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-mute); white-space: nowrap; } html.v2 .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); transition: background-color .12s ease, border-color .12s ease; cursor: pointer; } html.v2 .btn:hover { background: var(--surface-3); } html.v2 .btn:active { transform: translateY(0.5px); } html.v2 .btn-primary { background: var(--hi-vis); color: var(--hi-vis-ink); border-color: var(--hi-vis); } html.v2 .btn-primary:hover { filter: brightness(1.06); background: var(--hi-vis); } /* ─── Layout helpers ───────────────────────────────────────── */ html.v2 .screen { background: var(--bg); color: var(--ink); min-height: calc(100vh - 7rem); } html.v2 .no-scrollbar::-webkit-scrollbar { display: none; } html.v2 .no-scrollbar { scrollbar-width: none; } html.v2 .drag-handle { cursor: grab; } html.v2 .drag-handle:active { cursor: grabbing; } /* ─── Tweaks panel (mock-preview floating control) ─────────── */ html.v2 .tweaks-panel { position: fixed; bottom: 16px; right: 16px; width: 280px; padding: 14px; background: var(--surface-1); border: 1px solid var(--line-strong); z-index: 200; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* ─── Animations ───────────────────────────────────────────── */ @keyframes yd-pulse-dot { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } } html.v2 .pulse-dot { animation: yd-pulse-dot 1.6s ease-out infinite; } @keyframes yd-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } html.v2 .ticker-track { animation: yd-ticker 60s linear infinite; will-change: transform; } @keyframes yd-conflict-flash { 0%, 100% { box-shadow: inset 0 0 0 1px var(--bad); } 50% { box-shadow: inset 0 0 0 1px var(--bad), 0 0 0 2px rgba(213, 101, 78, 0.25); } } html.v2 .conflict-flash { animation: yd-conflict-flash 2.2s ease-in-out infinite; } /* ─── Form defaults inside .screen ─────────────────────────── */ html.v2 .screen input, html.v2 .screen select, html.v2 .screen textarea { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 0; } html.v2 .screen input::placeholder { color: var(--ink-dim); } html.v2 .screen input:focus, html.v2 .screen select:focus, html.v2 .screen textarea:focus { outline: none; border-color: var(--hi-vis); } /* Square-corners default — mocks set borderRadius:0 inline; this is a safety net so any descendant doesn't pick up a stray rounded class. */ html.v2 .screen *:not(.btn-primary):not(.bg-hivis):not([data-keep-radius]) { border-radius: 0; }