54 lines
3.0 KiB
Markdown
54 lines
3.0 KiB
Markdown
# 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`。
|