/* ═══════════════════════════════════════════════════════════════════════════ ViiSync Design System — tokens.css Extracted from src/Client/wwwroot/css/viisync.css (the "ViiSync Database" IDE theme). Basalt (deep charcoal-gray, silver accent) is the default; the former near-black look is opt-in via `data-theme="dark"` and the Nord arctic look via `data-theme="light"` on the element — every token auto-inverts. RULE FOR CONSUMERS: never hardcode a color, size, or radius that exists here. Use var(--token). The extended-accent section lists the only raw hex values the app uses outside the variables — treat them as named constants too. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── DEFAULT THEME = BASALT (deep charcoal-gray, silver accent) ────────── The house default. Softer than the former near-black look (now opt-in via data-theme="dark"). Same token names; values are the Basalt palette. */ /* ── Background layers (darkest → lightest) ───────────────────────────── bg page + sidebar + main background (charcoal-gray) bg2 subtle alt surface (zebra rows, chart cards, dock footer) panel cards, table headers, popovers, modals titlebar top title bar AND bottom status bar (darkest chrome) hover universal hover wash sel selected-row wash (translucent so it works on any layer) */ --bg:#34353a; --bg2:#3a3b41; --panel:#414248; --titlebar:#2c2d32; --hover:#45464d; --sel:rgba(206,210,224,0.10); /* ── Elevated surfaces (used heavily by inline styles + dense views) ──── */ --surf0:#3d3e44; --surf1:#42434a; --surf2:#4a4b52; --chip:#54555c; /* ── Borders (softest → strongest) ────────────────────────────────────── border-soft hairlines inside tables / panel splits (barely visible) border-tb title-bar & table-header underline border default card/table outline border2 inputs, popovers, modals (slightly stronger) border3/4 disabled-ish strokes, faint text-on-border uses */ --border:#4a4b52; --border2:#57585f; --border-tb:#3c3d43; --border-soft:#3d3e44; --border3:#63646c; --border4:#72737b; /* ── Text hierarchy ────────────────────────────────────────────────────── fg2 brightest (titles, primary cell values) fg default body text fg-dim secondary text fg-faint labels, placeholders, muted meta tx2/tx-dim2/tx-faint2 the mono-table text ramp (rows, dim cells, empty) */ --fg:#c9cbd0; --fg2:#edeef2; --fg-dim:#aeafb5; --fg-faint:#8b8d95; --tx2:#dcdde2; --tx-dim2:#adaeb5; --tx-faint2:#8b8d95; /* ── Accent: monochrome silver. The brand has NO hue — the logo is the theme. accent = interactive/focus silver, accent2 = dimmer variant. */ --accent:#b6bac4; --accent2:#8d9099; /* ── Status colors (the ONLY saturated colors in the chrome) ─────────────── Provisional Basalt-tuned values — re-checked against charcoal surfaces. A full WCAG AA audit is a test-stage follow-up. */ --green:#5e9d5a; --green2:#4d8449; --gray:#8c8e95; --yellow:#c79a34; --red:#d3706f; /* ── Chart line colors (monochrome ramp) ───────────────────────────────── */ --chart-read:#c8cbd4; --chart-write:#9a9ca4; --chart-clients:#75777f; /* ── Brand: silver-sheen gradient + glow. Used for the active-tab strip, selected-node bar, primary buttons (with dark ink text), avatar. */ --grad:linear-gradient(135deg,#d6d9e0,#b6bac4 52%,#8d9099); --logo-ink:#c0c3cc; --logo-glow:rgba(200,204,216,0.16); --glow:rgba(200,204,216,0.22); /* ── Typography ────────────────────────────────────────────────────────── Sans for UI copy, mono for ALL data/labels/tables/terminal. */ --mono:"IBM Plex Mono","SF Mono",ui-monospace,Consolas,"Courier New",monospace; } html[data-theme="dark"]{ /* "Dark" theme = the former near-black IDE default, now opt-in. Deep graphite, highest contrast — kept 1:1 as the pre-Basalt baseline. Same token names. */ --bg:#0c0c0e; --bg2:#0e0e10; --panel:#101013; --titlebar:#0a0a0c; --hover:#1a1a1e; --sel:rgba(206,210,224,0.10); --surf0:#131316; --surf1:#161619; --surf2:#1b1b1f; --chip:#26262a; --border:#242428; --border2:#2c2c31; --border-tb:#1d1d20; --border-soft:#161619; --border3:#3a3a40; --border4:#4c4c52; --fg:#d6d6da; --fg2:#e8e8ec; --fg-dim:#9a9aa0; --fg-faint:#6e6e75; --tx2:#c8c8ce; --tx-dim2:#8a8a90; --tx-faint2:#5c5c62; --accent:#c6c9d2; --accent2:#94969f; --green:#3fb950; --green2:#2ea043; --gray:#6e7681; --yellow:#d29922; --red:#f06a6a; --chart-read:#c2c5cf; --chart-write:#8e9099; --chart-clients:#6c6e76; --grad:linear-gradient(135deg,#eef0f4,#b4b6bd 52%,#7c7e85); --logo-ink:#9b9ea8; --logo-glow:rgba(190,196,212,0.16); --glow:rgba(226,229,239,0.45); } html[data-theme="light"]{ /* "Light" theme = Nord Frost · muted arctic. A soft, low-contrast arctic-slate palette (lighter than the Basalt default). Same token names; values flip. */ --bg:#20242e; --bg2:#242a35; --panel:#2a303c; --titlebar:#1b1f27; --hover:#353d4b; --sel:rgba(136,192,208,0.16); --border:#3a4250; --border2:#454e5e; --border-tb:#333b47; --border-soft:#2f3642; --surf0:#2e3542; --surf1:#333b48; --surf2:#3a4350; --chip:#455066; --border3:#4a5364; --border4:#5a6478; --tx2:#cbd2de; --tx-dim2:#8b96a8; --tx-faint2:#5e6878; --fg:#d8dee9; --fg2:#eceff4; --fg-dim:#9aa5b5; --fg-faint:#6d7789; --accent:#88c0d0; --accent2:#6a97a5; --gray:#7a8496; --green:#a3be8c; --green2:#8fa878; --yellow:#ebcb8b; --red:#bf616a; --chart-read:#cbd2de; --chart-write:#9aa5b5; --chart-clients:#6d7789; --grad:linear-gradient(135deg,#aee0e0,#88c0d0 52%,#5e97a8); /* Nord logo: soft arctic tint, no glow. */ --logo-ink:#88c0d0; --logo-glow:rgba(136,192,208,0.16); --glow:rgba(136,192,208,0.30); } /* the dark theme adds a drop-shadow glow filter on .logo; light removes it */ html[data-theme="light"] .logo{filter:none} /* ═══════════════════════════════════════════════════════════════════════════ The tokens below are NOT custom properties in the source file — the app uses these literal values directly in its rules. They are promoted to variables here (values unchanged, extracted from usage) so new code can reference them. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Extended accents — the only raw hexes used outside the variables. Data-viz / domain tints, all low-saturation to sit on the mono theme. */ --acc-bid:#74c7be; /* bid price column (.tk-r .c-bid) — faded turquoise */ --acc-ask:#a68fd6; /* ask price column, wallet tree icons — faded purple */ --acc-violet:#9b7cff; /* symbol-mapping arrows, mapped counts, DM user */ --acc-lavender:#9b8cff; /* tree section icons (execution flows, routing), form select values */ --acc-peri:#7c9cf0; /* numeric form values (execution-flow editor) */ --acc-gold:#d8b24a; /* tree section icons (symbols, watchlists, …) */ --acc-amber:#e0b64a; /* tree section icon variant */ --acc-copper:#c8915f; /* tree section icons (venues) */ --acc-teal:#5ad0c8; /* tree section icons (charts & ticks) */ --acc-aqua:#7fd9d0; /* tree leaf icons */ --acc-steel:#5fb0c8; /* tree section icons (data feeds) */ --acc-purple:#b07fd6; /* chat tree icons */ --live-green:#7ef0a6; /* "· LIVE" pulse text/dot (brighter than --green) */ --soft-green:#7ee0a0; /* green pill text (rolepill.green, id-pill) */ --pnl-long:#74c7be; /* long-exposure bar — faded turquoise (up) */ --pnl-short:#a68fd6; /* short-exposure bar / danger hover — faded purple (down) */ --tick-up:#74c7be; /* price uptick chevron (.dirchip.up) — faded turquoise */ --tick-dn:#a68fd6; /* price downtick chevron (.dirchip.dn) — faded purple */ --err-soft:#e06a6a; /* modal error text */ --on-grad-ink:#1c1d21; /* text color on top of --grad buttons/pills (Basalt-tuned dark ink) */ /* ── Type scale (px sizes actually used; base is 13px on ) ──────── 8.5/9/9.5/10 dense-rail micro-labels · 10.5 section labels (uppercase, letter-spaced) · 11/11.5 table headers, meta · 12/12.5 table rows, body small · 13 body/base · 14–16 dialog headings · 20 view title · 22–26 stat values · 30 big stat. Weights: 400 body · 500 labels · 600 headings, buttons, emphasized cells · 700 stats, key identifiers. */ --fs-micro:9.5px; --fs-label:10.5px; --fs-th:11px; --fs-meta:11.5px; --fs-row:12px; --fs-body-s:12.5px; --fs-body:13px; --fs-dialog:14px; --fs-modal-h:16px; --fs-title:20px; --fs-stat:23px; --fs-stat-lg:30px; --sans:"IBM Plex Sans",system-ui,sans-serif; /* ── Chrome dimensions (fixed rows of the shell) ─────────────────────── */ --h-titlebar:36px; /* .titlebar */ --h-tab:30px; /* .tab inside the title bar */ --h-bar:34px; /* .crumbs, .side-head, .dock-head, .mdp-head */ --h-statusbar:24px; /* .statusbar */ --h-node:23px; /* .node tree row */ --h-dock:228px; /* .dock default; 380px in .dock.trade */ --w-sidebar:300px; /* .sidebar (min 230 / max 520, user-resizable) */ --w-rightpanel:340px;/* .rightpanel (min 280 / max 560, user-resizable) */ --w-scope-rail:188px;/* .dock-scope right rail inside the dock */ /* ── Radii (as used; smaller = denser element) ─────────────────────────── 4 tab-close hover · 5 tiny hover chips · 6 icon buttons, menu items · 7 inputs, small buttons, pills · 8 buttons, search boxes · 9 toggles, context menu · 10 cards, tables · 11 list tables · 12 popover, stat cards · 14 modal, identity card. */ --r-xs:4px; --r-sm:6px; --r-input:7px; --r-btn:8px; --r-menu:9px; --r-card:10px; --r-table:11px; --r-pop:12px; --r-modal:14px; /* ── Shadows ───────────────────────────────────────────────────────────── */ --sh-pop:0 16px 48px rgba(0,0,0,.5); /* popover */ --sh-menu:0 16px 48px rgba(0,0,0,.55); /* context menu */ --sh-modal:0 24px 64px rgba(0,0,0,.6); /* modal */ --sh-glow:0 0 10px var(--glow); /* primary silver CTA glow */ --sh-glow-lg:0 0 12px var(--glow); /* large CTA glow */ --overlay:rgba(0,0,0,.55); /* modal backdrop */ /* ── Spacing — the app uses no strict scale; these are the recurring values, extracted from usage. Gaps: 2 (icon clusters) · 6–8 (inline icon+text) · 10 (form rows) · 12 (card grids) · 14 (grid2/grid3) · 16 (statusbar groups). Paddings: 0 16px (table rows) · 7px 10px (inputs) · 16px 18px (stat cards) · 16px 20px (modal head) · 24px 28px 40px 34px (main content). */ --gap-icon:2px; --gap-inline:8px; --gap-form:10px; --gap-grid:12px; --gap-grid-lg:14px; --pad-cell:16px; --pad-card:16px 18px; --pad-content:24px 28px 40px 34px; } /* ── Base element setup (copied from the app) ──────────────────────────── */ *{box-sizing:border-box} html,body{height:100%;margin:0} body{font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--bg);color:var(--fg);font-size:13px;line-height:normal;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} .mono{font-family:var(--mono)} button{font-family:inherit;cursor:pointer} /* Fonts are loaded from Google Fonts in the app: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap */