Color
完整 Token 鏡像
完整列出 packages/configs/style/style.css（OpinionLabs/frontend 原樣鏡像）中所有 color token，不收斂 alias。 以表格呈現，每列一個 token，Dark / Light 兩欄並列；hex 為 runtime 直讀值，下方標注 style.css 原文的 alias 來源，半透明 token 以棋盤底顯示。
對應檔案：packages/configs/style/style.css；Tier 1 primitive ramp（neutral / jungle / cherry / gold / sea / ash / grass / brick / brand 共 9 條）不在此列，見 Color Target 頁。
Surface
整頁、區塊、卡片三層底色與兩階邊線；black / white 是依模式反轉的 role，不是字面黑白
10 TOKENS
| Name | Dark | Light |
|---|---|---|
| bg-primary | —var(--color-neutral-950) | —var(--color-neutral-0) |
| bg-secondary | —var(--color-neutral-850) | —var(--color-neutral-50) |
| bg-tertiary | —var(--color-neutral-800) | —var(--color-neutral-100) |
| card-bg | —var(--color-neutral-950) | —var(--color-neutral-0) |
| card-border | —var(--color-neutral-800) | —var(--color-neutral-100) |
| header-bg light 值為寫死 hex，非 ramp 階 | —var(--color-neutral-975) | — |
| border-primary | —var(--color-neutral-400) | —var(--color-neutral-600) |
| border-secondary | —var(--color-neutral-800) | —var(--color-neutral-100) |
| black Live 的 black = #101319，light mode 變白 | —var(--color-neutral-950) | —var(--color-neutral-0) |
| white dark/light 互換 | —var(--color-neutral-0) | —var(--color-neutral-950) |
Text
四階文字 + brand 文字；gray-3 是 text-tertiary 的舊名，production 仍有 1 處消費
6 TOKENS
| Name | Dark | Light |
|---|---|---|
| text-primary | —var(--color-neutral-0) | —var(--color-neutral-950) |
| text-secondary | —var(--color-neutral-200) | —var(--color-neutral-900) |
| text-tertiary | —var(--color-neutral-400) | —var(--color-neutral-600) |
| text-quaternary | —var(--color-neutral-500) | —var(--color-neutral-600) |
| text-brand-secondary | —var(--color-brand-600) | — |
| gray-3 legacy 名，= text-tertiary | —var(--color-neutral-400) | —var(--color-neutral-600) |
Brand
主橘 brand-600 與 hover / pressed / disable / tint 四階淡底；orange-N 與 brand-N 是同一組透明度階的兩套名字
24 TOKENS
| Name | Dark | Light |
|---|---|---|
| bg-brand-solid | —var(--color-brand-600) | — |
| bg-brand-solid-hover 實心 hover（本 repo 原為 orange α0.8，2026-10-17 隨同步改採 production 值） | —var(--color-brand-700) | — |
| brand-main | —var(--color-brand-600) | —var(--color-brand-600) |
| brand-pressed | —var(--color-brand-700) | —var(--color-brand-700) |
| brand-contrast 走 black role，light 下變白 | —var(--color-black) | —var(--color-black) |
| brand-disable | —var(--color-brand-2) | —var(--color-brand-2) |
| primary-active | —var(--color-orange-1) | —var(--color-orange-1) |
| primary-active-text | —var(--color-brand-600) | —var(--color-brand-600) |
| brand-tint-1 | —var(--color-brand-950) | —var(--color-brand-50) |
| brand-tint-2 | —var(--color-brand-900) | —var(--color-brand-100) |
| brand-tint-3 | —var(--color-brand-800) | —var(--color-brand-200) |
| brand-tint-4 | —var(--color-brand-700) | —var(--color-brand-300) |
| brand-1 | —var(--color-orange-1) | — |
| brand-2 | —var(--color-orange-2) | — |
| brand-3 | —var(--color-orange-3) | — |
| brand-4 | —var(--color-orange-4) | — |
| brand-6 | —var(--color-orange-6) | — |
| brand-8 | —var(--color-orange-8) | — |
| orange-1 | — | — |
| orange-2 | — | — |
| orange-3 | — | — |
| orange-4 | — | — |
| orange-6 | — | — |
| orange-8 | — | — |
Outcome Semantic (YES / NO)
預測極性。Tier 1 = jungle / cherry；light 錨點走 -550 階
8 TOKENS
| Name | Dark | Light |
|---|---|---|
| outcome-yes-solid | —var(--color-jungle-500) | —var(--color-jungle-550) |
| outcome-yes-tint | —var(--color-jungle-950) | —var(--color-jungle-100) |
| outcome-yes-hover | —var(--color-jungle-700) | —var(--color-jungle-300) |
| outcome-yes-pressed | —var(--color-jungle-550) | —var(--color-jungle-600) |
| outcome-no-solid | —var(--color-cherry-500) | —var(--color-cherry-550) |
| outcome-no-tint | —var(--color-cherry-900) | —var(--color-cherry-100) |
| outcome-no-hover | —var(--color-cherry-700) | —var(--color-cherry-300) |
| outcome-no-pressed | —var(--color-cherry-550) | —var(--color-cherry-600) |
Team Identity (Home / Away / Draw)
陣營色。Tier 1 = gold / sea / ash；purple 是 team-draw-solid 的舊名
13 TOKENS
| Name | Dark | Light |
|---|---|---|
| team-home-solid | —var(--color-gold-500) | —var(--color-gold-600) |
| team-home-bg | —var(--color-gold-950) | —var(--color-gold-100) |
| team-home-hover | —var(--color-gold-800) | —var(--color-gold-300) |
| team-home-pressed | —var(--color-gold-600) | —var(--color-gold-700) |
| team-away-solid | —var(--color-sea-500) | —var(--color-sea-565) |
| team-away-bg | —var(--color-sea-900) | —var(--color-sea-100) |
| team-away-hover | —var(--color-sea-700) | —var(--color-sea-300) |
| team-away-pressed | —var(--color-sea-565) | —var(--color-sea-600) |
| team-draw-solid | —var(--color-ash-400) | —var(--color-ash-600) |
| team-draw-bg | —var(--color-ash-900) | —var(--color-ash-100) |
| team-draw-hover | —var(--color-ash-700) | —var(--color-ash-300) |
| team-draw-pressed | —var(--color-ash-500) | —var(--color-ash-700) |
| purple legacy 名，= team-draw-solid | —var(--color-ash-400) | —var(--color-ash-600) |
Status & Trend
漲跌（grass / brick）、系統狀態、直播紅點；green-2-N / red-N 是 asset dashboard 用的 rgba 淡底（production #216 新增，命名沿用舊風格）
12 TOKENS
| Name | Dark | Light |
|---|---|---|
| trend-up | —var(--color-grass-500) | — |
| trend-down | —var(--color-brick-500) | — |
| warning-solid | —var(--color-gold-500) | —var(--color-gold-600) |
| success-solid | —var(--color-trend-up) | — |
| error-solid | —var(--color-trend-down) | — |
| red-live Live indicator 專用，獨立於 brick ramp | — | — |
| green-2-1 | — | — |
| green-2-2 | — | — |
| green-2-4 | — | — |
| red-1 | — | — |
| red-2 | — | — |
| red-5 | — | — |
Interaction & Overlay
pressed / disabled 底色與 white-N 疊色（Button secondary / outline skin 消費）
10 TOKENS
| Name | Dark | Light |
|---|---|---|
| secondary-pressed | —var(--color-neutral-900) | —var(--color-neutral-300) |
| outline-pressed | —var(--color-neutral-700) | —var(--color-neutral-100) |
| disabled-bg | —var(--color-neutral-700) | —var(--color-neutral-100) |
| white-2 | —var(--color-neutral-800) | —var(--color-neutral-100) |
| white-4 | —var(--color-neutral-800) | —var(--color-neutral-100) |
| white-02 | — | —var(--color-neutral-0) |
| white-04 | —var(--color-neutral-900) | —var(--color-neutral-25) |
| white-05 | —var(--color-neutral-900) | —var(--color-neutral-25) |
| white-16 | — | — |
| dark-8 | — | — |
Data Visualization
圖表填色 / 格線 / 參考線 / 標籤墨色，全部指向 neutral ramp；唯一帶色的是 data-fill-focus（最重要的那一個記號）
10 TOKENS
| Name | Dark | Light |
|---|---|---|
| data-fill | —var(--color-neutral-800) | —var(--color-neutral-200) |
| data-fill-strong | —var(--color-neutral-700) | —var(--color-neutral-300) |
| data-fill-accent | —var(--color-neutral-200) | —var(--color-neutral-600) |
| data-fill-focus | —var(--color-brand-600) | —var(--color-brand-600) |
| data-grid | —var(--color-neutral-700) | —var(--color-neutral-200) |
| data-reference | —var(--color-neutral-500) | —var(--color-neutral-500) |
| data-band-edge | —var(--color-neutral-600) | —var(--color-neutral-600) |
| data-point | —var(--color-neutral-400) | —var(--color-neutral-600) |
| data-ink | —var(--color-neutral-400) | —var(--color-neutral-600) |
| data-ink-strong | —var(--color-neutral-200) | —var(--color-neutral-800) |
Skeleton & Campaign
Loading shimmer 底色與高光；worldcup-ink 是 World Cup 活動頁專用墨色
3 TOKENS
| Name | Dark | Light |
|---|---|---|
| skeleton-bg | — | — |
| skeleton-highlight | — | — |
| worldcup-ink | — | — |
本 repo 補充層（非 production）
定義在 src/styles/live-bridge.css；production 還沒收的 token 一律放那裡，不改鏡像本體
2 TOKENS
| Name | Dark | Light |
|---|---|---|
| team-home-950 light mode 黃色 Team Home 的文字色（WCAG 修正，2026-07-06） | —var(--color-gold-950) | — |
| footer-bg production 有 header-bg 無 footer 版；light 值為推導 | —var(--color-neutral-900) | —var(--color-neutral-50) |
Implementation Usage
production packages/components/src（排除 stories / tests）中 text / bg / border 對 color token 的真實使用次數（2026-10-17，mirror @ 0ac828f）。
TEXT TOKEN
| Token | 次數 |
|---|---|
| text-primary | 30 |
| text-quaternary | 3 |
| text-neutral-950 | 2 |
| text-error-solid | 2 |
| text-outcome-yes-solid | 1 |
| text-outcome-no-solid | 1 |
| text-gray-3 | 1 |
BG TOKEN
| Token | 次數 |
|---|---|
| bg-primary | 10 |
| bg-secondary | 5 |
| bg-white-02 | 3 |
| bg-white-05 | 1 |
| bg-white-04 | 1 |
| bg-white | 1 |
| bg-warning-solid | 1 |
| bg-success-solid | 1 |
| bg-outcome-yes-tint | 1 |
| bg-outcome-no-tint | 1 |
BORDER TOKEN
| Token | 次數 |
|---|---|
| border-secondary | 17 |
| border-white | 1 |
Implementation Notes
2026-10-17 · legacy alias 層已退場
production 於 2026-07〜09 把 gray-1 / white-1 / page-bg / blue / green-1 / orange / sport-team-a 等 33 個舊名從 style.css 移除，本 repo 同日跟進：鏡像改為原樣複本， src/ 內 240 處舊名改走 Tier 2 semantic（bg-primary / text-quaternary / outcome-yes-solid / team-home-solid …）。先前此頁記錄的「命名陷阱」（blue 是紅、purple 是灰綠）隨之結案。
OBSERVATION — 仍在的 ALIAS 堆疊
orange-1…8與brand-1…8是同一組透明度階的兩套名字；brand-tint-1…4 才是 mode-aware 的實心版。white-2/white-4同值（neutral-800 / 100），white-04/white-05同值（neutral-900 / 25）。gray-3= text-tertiary、purple= team-draw-solid、brand-main= brand-600：三個舊名仍留著，production 各有零星消費。
OBSERVATION — 命名與階數
--color-black在 Live 是#101319（深藍灰，非黑），且 light mode 反轉為白；brand-contrast 跟著它走。- light 錨點用了非整數階：
jungle-550/cherry-550/sea-565，是為了保住原 light 值而插進 ramp 的座標。 green-2-N/red-N（asset dashboard 淡底）用 rgba 而非 grass / brick ramp 階，α 合成值會隨底色漂移，與 Proposal B 的方向相反。header-bglight 值#fffbf9是寫死 hex，不在任何 ramp 上。
本 repo 與 production 的已知差異
- 本 repo 多兩個 token（上方「本 repo 補充層」），定義在 live-bridge.css，不在鏡像內。
bg-brand-solid-hover本 repo 原為 orange α0.8，2026-10-17 同步後改採 production 的 brand-700 實心值；這是整份 style.css 唯一真正改色的 token。