diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 5531b65c..e87dc600 100644 --- 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 ==================== */ diff --git a/apps/web/src/components/ui/glass-card.tsx b/apps/web/src/components/ui/glass-card.tsx index 437228ae..50ff93e7 100644 --- 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', ], } diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts index ac64a323..53cee327 100644 --- 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 思考指示器 diff --git a/docs/LOGBOOK.md b/docs/LOGBOOK.md index 952f723e..2e9d5db2 100644 --- 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 與過大圓角。 diff --git a/docs/design/WOOO_OPEN_DESIGN_ADOPTION.md b/docs/design/WOOO_OPEN_DESIGN_ADOPTION.md new file mode 100644 index 00000000..16c1da81 --- /dev/null +++ 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 頁面直接 `` 到 `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`。 diff --git a/docs/workplans/2026-06-04-navigation-and-ai-flywheel-workplan.md b/docs/workplans/2026-06-04-navigation-and-ai-flywheel-workplan.md index 39c9b3d6..5cd3419f 100644 --- 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