[kielchang]

疊在 #42 之上：請先依序合併 #38、#39、#40、#41、#42，合併後這個 PR 只剩自己的一筆改動。

RFC：#36

改了什麼／為什麼

主題（data-color-theme）改為環境色：只換側欄＋頂列這個 L 形外殼的大區塊底色，用顏色一眼認出目前在哪個工作環境；內容區（畫布、卡片、浮層、欄位、表格）一律中性。按鈕、提醒、琥珀欄位都在內容區，主題色碰不到它們。

原本的色相主題同時是品牌按鈕、選中淡底與內容區中性色的色相來源，色相預算只容得下 9 組；現有的 violet↔amethyst 只差 ΔE00 5.0，選中淡底也會撞提醒淡底（teal 對 success-subtle ΔE00 7.0）。

token（@dooping/tokens 0.7.0 → 0.8.0）：

• 主題從 6 組變 18 組：8 個色族（華語基本色名）× 深淺 2 階的深色外殼，加中性的 slate；graphite 仍是預設、維持淺色外殼。
• 環境主題只宣告 --sidebar 家族 9 個鍵；新 token --sidebar-muted-foreground。
• --brand 在所有主題鏡射 --primary（Button 的 brand variant 淘汰，外觀等同 default）。
• 新 utility .on-shell；主題島（data-color-theme 放在元素上，只換那塊的外殼鍵）。
• 生成器重跑兩次輸出相同；預設主題的有效值與改版前 0 差異。

元件（規範併進 0.15.0）：

• AppShell 頂列改用外殼色並套 .on-shell；SidebarHeader／SidebarContent／SidebarFooter 內建 .on-shell。
• 群組標題改 --sidebar-muted-foreground、側欄項聚焦環改 --sidebar-ring；AppMenubar 所在分區底線跟著文字色。
• NavLeaf 新增選填的 colorTheme：應用切換清單畫出那個應用的外殼色塊。
• 外殼上的狀態徽章加 ring-2 ring-sidebar-foreground（紅點直接疊在深色外殼上只有約 1.9:1）。

文件：新頁〈基礎 → 環境色票〉（色票清單＋色彩學語意，只給判準）；〈色彩語意〉〈深淺主題〉〈色票配色策略〉〈提醒色辭典〉〈後台系統的資訊架構〉、AGENTS.md、CHANGELOG 改寫。

守衛：

• verify-color：外殼文字／次要文字／選中項／聚焦環／標誌塊、環境主題只能有外殼鍵、brand 鏡射、色票同族 ≥ 8／跨族 ≥ 10、家族色相連續、環境外框 ≥ 10、外殼 chroma 低於 danger、外殼狀態層逐主題驗。移除 brand 對狀態色、色相、停用外觀三條（brand 不再帶色）。
• 新 tests/environment-theme.test.ts：主題島選擇器、〈環境色票〉表與 tokens 同步。
• verify-visual：禁用色改看其他主題的外殼色；只數 2×2 實色區塊（Windows 的彩色次像素反鋸齒在深色外殼上會湊出假命中）。
• story「頁面/多應用外殼/環境色跟著應用」的 play：外殼跟著應用換色、內容區不變、徽章外圈。
• 文件站 webpack 加 extensionAlias（文件第一次從原始碼引用 @dooping/tokens 的 JS API）。

自查

• npm run build:tokens → npm run typecheck → npm test 全綠（rebase 到 chore: 外掛釘版、每週漏洞檢查、核准版本、本機腳本路徑防護 #42 之後 32 檔）
• 改了 packages/react/src → npm run build:registry 並提交 registry/；host:sync 一致
• 版號：tokens 0.8.0（package.json、tokens.json、@dooping/react 的相依、宿主）；規範併進未發佈的 0.15.0
• CHANGELOG 未發佈節補一項（改了什麼／我需要做什麼），標「行為改變」
• 措辭過去領域化詞表
• 反向驗證：新守衛 13 條逐條改壞都會紅在對的地方。另跑過 verify:color、verify:storybook、verify:visual（108 組）、verify:host（180 組）、build:book＋verify:book、verify:consumer。

注意：token 有變，staging → main 合併後要推 tokens-v0.8.0。

🤖 Generated with Claude Code