feat(web): bridge WOOO Open Design tokens

2026-06-04 15:51:31 +08:00
parent 9b0c7f8b5d
commit 0df3f1c352
6 changed files with 109 additions and 14 deletions
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -20,6 +20,14 @@
 :root {
  --font-mono: 'JetBrains Mono', monospace;
  --font-dot-matrix: 'DSEG7-Classic', 'JetBrains Mono', monospace;
+  --wooo-radius-xs: 2px;
+  --wooo-radius-sm: 4px;
+  --wooo-radius-control: 6px;
+  --wooo-radius-card: 8px;
+  --wooo-radius-panel: 8px;
+  --wooo-radius-pill: 9999px;
+  --wooo-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
+  --wooo-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.06);
 }

 /* ==================== Nothing Dot Matrix Font ==================== */
--- a/apps/web/src/components/ui/glass-card.tsx
+++ b/apps/web/src/components/ui/glass-card.tsx
@@ -51,7 +51,7 @@ const variantStyles = {
    // 陰影
    'shadow-[0_4px_24px_rgba(0,0,0,0.06)]',
    // 圓角
-    'rounded-xl',
+    'rounded-card',
  ],
  elevated: [
    'bg-white/80',
@@ -59,7 +59,7 @@ const variantStyles = {
    '-webkit-backdrop-blur-[20px]',
    'border border-black/[0.08]',
    'shadow-[0_8px_32px_rgba(0,0,0,0.10)]',
-    'rounded-xl',
+    'rounded-card',
  ],
  copilot: [
    // AI Copilot 面板 - 帶紫色調
@@ -68,7 +68,7 @@ const variantStyles = {
    '-webkit-backdrop-blur-[20px]',
    'border border-status-thinking/20',
    'shadow-[0_4px_24px_rgba(139,92,246,0.1)]',
-    'rounded-xl',
+    'rounded-card',
  ],
  subtle: [
    'bg-white/50',
@@ -76,7 +76,7 @@ const variantStyles = {
    '-webkit-backdrop-blur-[12px]',
    'border border-black/[0.03]',
    'shadow-[0_2px_12px_rgba(0,0,0,0.04)]',
-    'rounded-lg',
+    'rounded-card',
  ],
 }

--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -196,15 +196,18 @@ const config: Config = {

      // ==================== Spacing & Layout ====================
      borderRadius: {
-        'glass': '12px',
-        'card': '10px',
-        'button': '6px',
+        'wooo-xs': 'var(--wooo-radius-xs)',
+        'wooo-sm': 'var(--wooo-radius-sm)',
+        'glass': 'var(--wooo-radius-panel)',
+        'card': 'var(--wooo-radius-card)',
+        'button': 'var(--wooo-radius-control)',
+        'pill': 'var(--wooo-radius-pill)',
      },

      boxShadow: {
-        'glass': '0 4px 24px rgba(0, 0, 0, 0.06)',
+        'glass': 'var(--wooo-shadow-panel)',
        'glass-hover': '0 8px 32px rgba(0, 0, 0, 0.10)',
-        'card': '0 2px 12px rgba(0, 0, 0, 0.04)',
+        'card': 'var(--wooo-shadow-card)',
        'card-hover': '0 4px 20px rgba(0, 0, 0, 0.08)',
        'glow-red': '0 0 16px rgba(255, 51, 0, 0.3)',
        'glow-green': '0 0 16px rgba(34, 197, 94, 0.3)',
@@ -228,8 +231,8 @@ const config: Config = {
          backdropFilter: 'blur(16px)',
          '-webkit-backdrop-filter': 'blur(16px)',
          border: '1px solid rgba(0, 0, 0, 0.08)',
-          borderRadius: '12px',
-          boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+          borderRadius: 'var(--wooo-radius-panel)',
+          boxShadow: 'var(--wooo-shadow-panel)',
        },
        '.glass-card-hover': {
          background: 'rgba(255, 255, 255, 0.80)',
@@ -249,7 +252,7 @@ const config: Config = {
          backdropFilter: 'blur(20px)',
          '-webkit-backdrop-filter': 'blur(20px)',
          border: '1px solid rgba(139, 92, 246, 0.2)',
-          borderRadius: '12px',
+          borderRadius: 'var(--wooo-radius-panel)',
          boxShadow: '0 4px 24px rgba(139, 92, 246, 0.1)',
        },
        // AI 思考指示器
--- a/docs/LOGBOOK.md
+++ b/docs/LOGBOOK.md
@@ -29030,3 +29030,30 @@ production browser smoke:
 **邊界提醒**：
 - 上述 production smoke 確認服務與 Runs 頁未破；新 raw `timeline_events` 寫入邏輯仍需等新 approval 產生，或做歷史 backfill 後才能在 production 驗到。
 - Phase 1 維持 `48%`，下一步仍是 Telegram 文案與 risk gate 對照。
+
+## 2026-06-04 — WOOO Open Design D0 token bridge
+
+**背景**：
+- 使用者詢問是否能使用自建 `https://design.wooo.work/` 作為 AWOOOI 視覺設計來源。
+- 實測 `design.wooo.work` 目前回 `401 Basic realm="WOOO Open Design"`；可作設計事實來源，但 AWOOOI runtime 不應直接依賴受保護網站。
+
+**本輪完成**：
+- 新增 `docs/design/WOOO_OPEN_DESIGN_ADOPTION.md`：
+  - 定義 `design.wooo.work` 作為上游設計來源。
+  - 明確禁止 runtime 直接載入受保護站點 CSS / 帳密。
+  - 定義 D0 / D1 / D2 / D3 分批採用策略。
+- `apps/web/src/app/globals.css` 新增 WOOO design variables：
+  - `--wooo-radius-xs`
+  - `--wooo-radius-sm`
+  - `--wooo-radius-control`
+  - `--wooo-radius-card`
+  - `--wooo-radius-panel`
+  - `--wooo-radius-pill`
+  - `--wooo-shadow-card`
+  - `--wooo-shadow-panel`
+- `apps/web/tailwind.config.ts` 將 `rounded-glass`、`rounded-card`、`rounded-button`、`rounded-pill` 改為指向 WOOO variables。
+- `GlassCard` 從硬寫 `rounded-xl / rounded-lg` 改吃 `rounded-card`，讓共用卡片先進入 token bridge。
+
+**目前狀態**：
+- Design system：`58% → 60%`。
+- Phase 5 前端產品化已啟動 D0；下一步 D1 是清 AwoooP Runs / Approvals / Work Items 的 inline radius 與過大圓角。
--- a/docs/design/WOOO_OPEN_DESIGN_ADOPTION.md
+++ b/docs/design/WOOO_OPEN_DESIGN_ADOPTION.md
@@ -0,0 +1,53 @@
+# 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`。
--- a/docs/workplans/2026-06-04-navigation-and-ai-flywheel-workplan.md
+++ b/docs/workplans/2026-06-04-navigation-and-ai-flywheel-workplan.md
@@ -198,8 +198,8 @@ Live evidence：
 | 欄位 | 內容 |
 | --- | --- |
 | 優先級 | P1 |
-| 狀態 | 未開始 |
-| 目標完成度 | 首頁產品化入口 88% → 95%；Design system 54% → 70% |
+| 狀態 | 已啟動：WOOO Open Design D0 token bridge |
+| 目標完成度 | 首頁產品化入口 88% → 95%；Design system 58% → 70% |

 細項：
 - [ ] 首頁繼續從大量文字改成圖、表、流程、矩陣。
@@ -212,6 +212,10 @@ Live evidence：
 - [ ] 所有文案 i18n，不硬編中文/英文。
 - [ ] 禁用 emoji 當 UI icon，改 lucide/icons。
 - [ ] 確認首頁與各頁 mobile 可上下滾動、`horizontalOverflow=0`。
+- [x] 接入 WOOO Open Design 採用策略：新增 token bridge 文件，先把 radius / shadow token 版本化。
+- [x] D0 token bridge：`globals.css` 新增 `--wooo-radius-*` / `--wooo-shadow-*`，Tailwind `rounded-glass/card/button/pill` 指向 variables。
+- [ ] D1：AwoooP Runs / Approvals / Work Items 清 inline radius 與過大圓角，保留 operator console 密度。
+- [ ] 若 `design.wooo.work` 對應 npm package / token export 可取得，改為 build-time package import，不做 runtime 遠端依賴。

 ## Phase 6 - P1 Ansible / PlayBook / Auto Repair