3.0 KiB
3.0 KiB
WOOO Open Design 採用策略
2026-06-04 更新。
https://design.wooo.work/是 WOOO 自建設計系統入口；AWOOOI 可採用，但必須以可版本化的 token / package / 文件同步方式接入，不能讓正式站 runtime 直接依賴受保護網站。
目前事實
| 項目 | 結論 |
|---|---|
| 設計站可達性 | https://design.wooo.work/ 目前回 401 Basic realm="WOOO Open Design" |
| AWOOOI 內部設計文件 | docs/design/COMPONENT_LIBRARY.md 已有 token、StatusOrb、MetricValue、IconButton 等規格 |
| AWOOOI 現況 | tailwind.config.ts 有 glass/card/button 半套 token，但頁面仍大量 inline borderRadius |
| 第一波採用方式 | 先建立 WOOO radius / shadow CSS variables，再讓 Tailwind token 指向 variables |
採用原則
design.wooo.work是設計事實來源，不是 runtime dependency。- AWOOOI build 必須能在沒有設計站登入狀態時成功。
- token 要有版本與 changelog；視覺調整先走 token，再逐步清 inline style。
- AwoooP 是 operator console，圓角採克制密度：卡片 / 面板 8px，控制元件 6px，pill / status dot 才用 full radius。
- 禁止為了視覺一致性犧牲可掃描性、資料密度與 mobile overflow。
Radius Token 對照
| 用途 | WOOO / AWOOOI token | 值 | 使用場景 |
|---|---|---|---|
| 細節 | --wooo-radius-xs |
2px |
progress bar、細小標記 |
| 小元素 | --wooo-radius-sm |
4px |
kbd、mini badge |
| 控制元件 | --wooo-radius-control / rounded-button |
6px |
button、input、select、toolbar button |
| 卡片 | --wooo-radius-card / rounded-card |
8px |
metric card、table surface、repeated item |
| 面板 | --wooo-radius-panel / rounded-glass |
8px |
glass panel、dialog body、dashboard surface |
| 膠囊 | --wooo-radius-pill / rounded-pill |
9999px |
status pill、avatar、toggle、dot |
不採用的做法
- 不在 AWOOOI 頁面直接
<link>到design.wooo.work的 CSS。 - 不把 Basic Auth 帳密寫進前端 env、repo、CI log 或 public bundle。
- 不一次性全站替換所有
rounded-xl / rounded-2xl，避免大量視覺回歸。 - 不用大圓角包住所有資料區塊；AIOps 工具需要密度與精準感。
分批推進
| Phase | 工作 | 驗證 |
|---|---|---|
| D0 | 接上 radius / shadow token bridge | typecheck、build、AwoooP desktop / mobile smoke |
| D1 | AwoooP Runs / Approvals / Work Items 清 inline radius | Browser 檢查 horizontalOverflow=0，關鍵表格不跳版 |
| D2 | 抽 Surface、Badge、ToolbarButton、DataTableShell |
Story / page smoke，避免 cards inside cards |
| D3 | 若 WOOO Open Design 有 npm package，改為 package import token | build 不需 design site session |
本輪落地
globals.css新增--wooo-radius-*與--wooo-shadow-*variables。tailwind.config.ts的rounded-glass、rounded-card、rounded-button、rounded-pill指向 WOOO variables。GlassCard改吃rounded-card，不再硬寫rounded-xl。