Design SystemFoundationsShadow

Shadow

Scale

Live DS 在 style.css 的 @theme 區塊定義了三個 shadow token：--shadow-sm / --shadow-md / --shadow-xl。 這些值與 Claude DS / Tailwind 預設**不同**，特別重 — 適合 Live 線上深色背景。

TokenSpec次數
shadow-sm0 4px 8px 4px rgba(0,0,0,0.8), 0 12px 32px 20px rgba(0,0,0,0.6)0
shadow-md0 8px 8px -5px rgba(0,0,0,0.4), 0 20px 20px 0 rgba(16,24,40,0.48)0
shadow-xl0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03)0
shadow (Tailwind default)0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)1

Preview Cards

每張 card 套用對應 shadow token，背景刻意拉開以看清 shadow spread。

shadow-sm

shadow-md

shadow-xl

Scope Note

--shadow-sm/-md/-xl 是 Claude DS 與 Live DS 同名但不同值的 token。live-bridge.css 第 (2)(3) 條負責處理衝突：

  • :root 之下 → 回到 Claude DS 預設值
  • .live-scope 之下（也就是這個 preview 頁所在的 /live/* 路由）→ 切換為 Ethan 的值

Implementation Notes

Observation only — no migration planned

本區僅記錄 audit 觀察，不對應任何 active rule 或重構計畫。

OBSERVATION

  • Shadow token 有定義，但 component implementation 幾乎沒採用（只 1 處 shadow，且是 Tailwind 預設而非 Live token）。
  • shadow-sm 在 Live 比一般 sm 重很多（雙層大半徑），更接近 modal/popover 浮起效果而非小元件。
  • 命名（sm/md/xl）與 spec 強度不直觀對應 — Live 的 sm 可能比 Claude DS 的 md 還重。

FUTURE DIRECTION (NOT PLANNED)

若未來治理：可考慮把命名改為意圖導向（如 elevation-low/mid/high），或將實際未採用的 sm/md/xl 標 deprecated。 現階段不執行。