# 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 |

## 採用原則

1. `design.wooo.work` 是設計事實來源，不是 runtime dependency。
2. AWOOOI build 必須能在沒有設計站登入狀態時成功。
3. token 要有版本與 changelog；視覺調整先走 token，再逐步清 inline style。
4. AwoooP 是 operator console，圓角採克制密度：卡片 / 面板 8px，控制元件 6px，pill / status dot 才用 full radius。
5. 禁止為了視覺一致性犧牲可掃描性、資料密度與 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`。