/* ============================================================================ omni-tokens.css — T36 Terminal 皮（Omni 語意契約的第二套實作） ---------------------------------------------------------------------------- 來源：~/.claude/skills/omni-web/assets/tokens.t36.css（2026-08-29 套用） 前一套（Omni 3.3 深色）在 git 歷史裡，要回去 revert 這一支即可。 T36 是給「一天看很多次的數字介面」用的：淺色優先、高密度、等寬數字、 卡片有框、主色是近黑的 ink（彩色留給漲跌與警示）。本專案是看盤儀表板， 正是它的目標場景。 本專案是 Flask + 原生 CSS —— 只移植 token 層；style.css 的 2400 行 全部吃語意變數，改這支就是整站換皮。 ========================================================================== */ /* ---- 1. PRIMITIVES（元件不要直接用這一層）------------------------------- */ :root { --p-white: #ffffff; /* 中性階：偏冷的藍灰 —— 純灰配等寬數字會顯得死板 */ --p-paper: #eef1f4; /* 頁面底（淺） */ --p-card: #ffffff; /* 卡片底（淺） */ --p-ink: #141c24; /* 主文字 / 主按鈕底 */ --p-ink-2: #4a5764; /* 次要文字 7.40:1 */ --p-ink-3: #8593a1; /* 標籤色 3.14:1 —— 不可當正文（量測過） */ --p-line: #d3dae1; --p-line-soft: #e6ebef; --p-paper-d: #10151a; --p-card-d: #171e25; --p-ink-d: #e7edf3; --p-ink-2-d: #a8b6c3; --p-ink-3-d: #6f7f8d; --p-line-d: #2a343e; --p-line-soft-d: #212a33; /* 紅綠是「漲跌」不是「好壞」—— 對應關係見 data-updir */ --p-red: #c8102e; --p-red-bg: #fbe3e6; --p-green: #0f7b52; --p-green-bg: #e2f1ea; --p-red-d: #ff5c74; --p-red-bg-d: #3a1d24; --p-green-d: #33c48d; --p-green-bg-d: #12332a; /* wire：連結/焦點/資訊。低彩度靛藍 —— 密集畫面裡飽和色會一直搶注意力 */ --p-wire: #2c5f8a; --p-wire-d: #6fb3e8; /* amber 警示。原色白底只有 3.77:1，文字另給壓深的（5.09:1） */ --p-amber: #b57614; --p-amber-text: #986311; --p-amber-d: #e0a33a; } /* ---- 2. SEMANTIC —— 淺色（T36 的原生預設）------------------------------- */ :root { color-scheme: light dark; --canvas: var(--p-paper); --surface: var(--p-card); --surface-raised: var(--p-card); --surface-sunken: var(--p-line-soft); --surface-hover: var(--p-line-soft); --surface-active: var(--p-line); --surface-disabled: var(--p-line-soft); --line: var(--p-line); --line-subtle: var(--p-line-soft); --line-strong: var(--p-ink); /* 頂欄下那條實心線是 T36 的視覺骨架 */ --fg: var(--p-ink); /* 17.19:1 */ --fg-muted: var(--p-ink-2); /* 7.40:1 */ --fg-subtle: var(--p-ink-3); /* 3.14:1 — 只給大字與非必要標籤 */ --fg-disabled: var(--p-ink-3); /* 主色是 ink：彩色＝有事發生，介面本身不搶 */ --primary: var(--p-ink); --primary-hover: color-mix(in srgb, var(--p-ink) 86%, transparent); --primary-active: color-mix(in srgb, var(--p-ink) 78%, transparent); --on-primary: var(--p-card); --primary-soft: var(--p-line-soft); --primary-line: var(--p-line); --primary-text: var(--p-wire); /* 連結色 6.75:1 */ --success: var(--p-green); --success-soft: var(--p-green-bg); --success-line: var(--p-green); --success-text: var(--p-green); /* 4.53:1 on soft */ --warning: var(--p-amber); --warning-soft: color-mix(in srgb, var(--p-amber) 10%, var(--p-card)); --warning-line: var(--p-amber); --warning-text: var(--p-amber-text); --danger: var(--p-red); --danger-soft: var(--p-red-bg); --danger-line: var(--p-red); --danger-text: var(--p-red); /* 4.83:1 on soft */ --info: var(--p-wire); --info-soft: color-mix(in srgb, var(--p-wire) 8%, var(--p-card)); --info-text: var(--p-wire); /* idle 在本專案的語意是「留意」（橘色 chip）→ 落在 amber 家族 */ --idle: var(--p-amber); --idle-soft: color-mix(in srgb, var(--p-amber) 10%, var(--p-card)); --idle-text: var(--p-amber-text); --neutral-soft: var(--p-line-soft); --neutral-line: var(--p-line); --neutral-text: var(--p-ink-2); --focus: var(--p-wire); --focus-ring: color-mix(in srgb, var(--p-wire) 35%, transparent); --overlay: color-mix(in srgb, var(--p-ink) 42%, transparent); /* 圖表：相近明度的中性 + amber 做分組；真正的彩色留給漲跌 */ --chart-1: var(--p-wire); --chart-2: var(--p-amber); --chart-3: var(--p-ink-2); --chart-4: var(--p-green); --chart-5: var(--p-red); --chart-grid: var(--p-line); --chart-axis: var(--p-ink-2); /* MCPT 小時線的賽事時段底色（mcpt.js 讀取）。深色時代寫死 rgba(0,0,0,.4)， 淺色下那條黑帶會把 K 棒整個蓋掉 —— 主題各給各的濃度 */ --session-bg-pre: color-mix(in srgb, var(--p-ink) 5%, transparent); --session-bg-open: color-mix(in srgb, var(--p-ink) 10%, transparent); --session-bg-break: color-mix(in srgb, var(--p-ink) 3%, transparent); /* 卡片有框 → 不用陰影撐層級；陰影只給浮層 */ --shadow-xs: 0 1px 2px rgb(20 28 36 / .06); --shadow-sm: 0 2px 6px rgb(20 28 36 / .08); --shadow-md: 0 6px 18px rgb(20 28 36 / .12); --shadow-lg: 0 18px 48px rgb(0 0 0 / .22); } /* ---- 2.5 漲跌方向（T36 獨有）-------------------------------------------- */ /* 預設紅漲綠跌（台/港/日）；本站看的是美股 → base.html 的 上 放 data-updir="green" 整組對調。下跌不是錯誤，所以漲跌不併進 success/danger。 */ :root { --rise: var(--p-red); --fall: var(--p-green); --rise-soft: var(--p-red-bg); --fall-soft: var(--p-green-bg); } :root[data-updir='green'] { --rise: var(--p-green); --fall: var(--p-red); --rise-soft: var(--p-green-bg); --fall-soft: var(--p-red-bg); } /* ---- 2.9 深色（跟隨 prefers-color-scheme；T36 淺色優先，深色不是品牌預設）*/ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --canvas: var(--p-paper-d); --surface: var(--p-card-d); --surface-raised: var(--p-card-d); --surface-sunken: var(--p-line-soft-d); --surface-hover: var(--p-line-soft-d); --surface-active: var(--p-line-d); --surface-disabled: var(--p-line-soft-d); --line: var(--p-line-d); --line-subtle: var(--p-line-soft-d); --line-strong: var(--p-ink-d); --fg: var(--p-ink-d); --fg-muted: var(--p-ink-2-d); --fg-subtle: var(--p-ink-3-d); --fg-disabled: var(--p-ink-3-d); --primary: var(--p-ink-d); --primary-hover: color-mix(in srgb, var(--p-ink-d) 86%, transparent); --primary-active: color-mix(in srgb, var(--p-ink-d) 78%, transparent); --on-primary: var(--p-card-d); --primary-soft: var(--p-line-soft-d); --primary-line: var(--p-line-d); --primary-text: var(--p-wire-d); --success: var(--p-green-d); --success-soft: var(--p-green-bg-d); --success-line: var(--p-green-d); --success-text: var(--p-green-d); --warning: var(--p-amber-d); --warning-soft: color-mix(in srgb, var(--p-amber-d) 14%, var(--p-card-d)); --warning-line: var(--p-amber-d); --warning-text: var(--p-amber-d); /* 深色 amber 7.58:1，不用另壓 */ --danger: var(--p-red-d); --danger-soft: var(--p-red-bg-d); --danger-line: var(--p-red-d); --danger-text: var(--p-red-d); --info: var(--p-wire-d); --info-soft: color-mix(in srgb, var(--p-wire-d) 12%, var(--p-card-d)); --info-text: var(--p-wire-d); --idle: var(--p-amber-d); --idle-soft: color-mix(in srgb, var(--p-amber-d) 14%, var(--p-card-d)); --idle-text: var(--p-amber-d); --neutral-soft: var(--p-line-soft-d); --neutral-line: var(--p-line-d); --neutral-text: var(--p-ink-2-d); --focus: var(--p-wire-d); --focus-ring: color-mix(in srgb, var(--p-wire-d) 35%, transparent); --overlay: color-mix(in srgb, #000 55%, transparent); --chart-1: var(--p-wire-d); --chart-2: var(--p-amber-d); --chart-3: var(--p-ink-2-d); --chart-4: var(--p-green-d); --chart-5: var(--p-red-d); --chart-grid: var(--p-line-d); --chart-axis: var(--p-ink-2-d); --session-bg-pre: rgba(150, 160, 175, 0.10); --session-bg-open: rgba(0, 0, 0, 0.40); --session-bg-break: rgba(150, 160, 175, 0.03); --shadow-lg: 0 18px 48px rgb(0 0 0 / .5); --rise: var(--p-red-d); --fall: var(--p-green-d); --rise-soft: var(--p-red-bg-d); --fall-soft: var(--p-green-bg-d); } :root[data-updir='green']:not([data-theme='light']) { --rise: var(--p-green-d); --fall: var(--p-red-d); --rise-soft: var(--p-green-bg-d); --fall-soft: var(--p-red-bg-d); } } /* ---- 3. 排版／造型／密度（T36：整體比一般 web 小一階，密度是目的）-------- */ :root { /* 系統中文字型堆疊 —— 不自架 Roboto（繁中一個字重好幾 MB，會壓垮首屏） */ --ff-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* 八階字級（T36 收斂後的定案）。正文是 --fs-lg(14) 不是 md(13)！ */ --fs-2xs: 10px; --lh-2xs: 1.4; --ls-2xs: 0.06em; --fs-xs: 11px; --lh-xs: 1.5; --ls-xs: 0.02em; --fs-sm: 12px; --lh-sm: 1.55; --ls-sm: 0; --fs-md: 13px; --lh-md: 1.7; --ls-md: 0; --fs-lg: 14px; --lh-lg: 1.6; --ls-lg: 0; --fs-xl: 16px; --lh-xl: 1.4; --ls-xl: -0.02em; --fs-2xl: 19px; --lh-2xl: 1.25; --ls-2xl: -0.02em; --fs-3xl: 21px; --lh-3xl: 1.2; --ls-3xl: -0.015em; /* 層級靠重量拉開：頁標 800、卡標 700（字級本來就壓小） */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --ls-display: -0.02em; --ls-caps: 0.06em; /* 圓角很小：3px 是主要值 —— 大圓角讓密集版面顯得鬆散 */ --rad-sm: 3px; --rad-md: 4px; --rad-lg: 5px; --rad-xl: 6px; --rad-full: 9999px; --rad-button: 3px; /* ← 與 Omni 的膠囊相反，是 T36 識別 */ --rad-textfield: 3px; --rad-dialog: 6px; --rad-toast: 4px; --space-half: 4px; --space-1: 8px; --space-1-half: 12px; --space-2: 16px; --space-2-half: 20px; --space-3: 24px; --space-4: 32px; --control-h-sm: 24px; --control-h-md: 32px; --dur-fast: 120ms; --dur-base: 180ms; --motion-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================================ 4. 對映層 —— 本專案既有變數名 → T36 語意 token ---------------------------------------------------------------------------- ・--border 用 --line（T36 卡片「一定要有框」，框線是密集版面的分區主力 —— 跟 Omni 時代用 line-subtle 的判斷相反，這是換皮的一部分） ・hl-bull / hl-bear 在 style.css 改走 --rise / --fall（漲跌≠好壞） ========================================================================== */ :root { --bg: var(--canvas); --bg-card: var(--surface); --bg-card-hover: var(--surface-hover); --bg-input: var(--surface); /* T36 輸入框：白底有框 */ --border: var(--line); --border-soft: var(--line-subtle); --text: var(--fg); --text-primary: var(--fg); --text-secondary: var(--fg-muted); --text-muted: var(--fg-muted); /* 刻意不給 ink-3：3.14:1 不夠當說明文字 */ --text-dim: var(--fg-subtle); --surface-2: var(--surface-sunken); --primary-on: var(--on-primary); --bear: var(--fall); --status-ok: var(--success); --status-info: var(--info); --status-warn: var(--warning-text); --status-alert: var(--danger); --status-error: var(--fg-disabled); --font-mono: var(--ff-sans); /* 舊名：整站 body 字型指到它 */ } body { font-family: var(--ff-sans); font-size: var(--fs-lg); /* T36 正文＝14px（lg），不是 md */ letter-spacing: var(--ls-lg); font-variant-numeric: tabular-nums; } /* T36 層級：頁標 800 收字距、卡標 700 */ h1, h2 { font-weight: var(--fw-extrabold); letter-spacing: var(--ls-display); } h3, h4 { font-weight: var(--fw-bold); letter-spacing: var(--ls-display); } /* 數字是拿來「對齊著比較」的 —— 等寬 + tabular（T36 識別 ②） */ .num, td.num, th.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; } input, select, textarea { border-radius: var(--rad-textfield); font-family: inherit; background: var(--surface); color: var(--fg); border: 1px solid var(--line); } input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* ── 捲動條也是皮的一部分 ──────────────────────────────────────────── 不指定就是 scrollbar-color: auto，交給瀏覽器決定 —— macOS Chrome 開了 「總是顯示捲軸」時會畫成淺色，在深色卡片上就是一條白槓（使用者回報）。 scrollbar-color 會繼承，所以放 :root 就蓋到所有捲動容器； ::-webkit-* 是給還不支援 scrollbar-color 的舊引擎的退路。 */ :root { scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); background-clip: content-box; }