70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
# T503 — fe-radar-css-shell-token-guard
|
||
|
||
> Status: `done`（2026-07-31）
|
||
> Milestone: `M0`
|
||
> Kind: `chore`
|
||
> Est. change: `~60 lines`
|
||
|
||
## Goal
|
||
|
||
完成後系統應：新頁樣式有獨立落點 `src/styles/radar.css`（已匯入且通過 token 守門），後續 radar／crm 樣式一律不進 `global.css`。
|
||
|
||
## Depends on
|
||
|
||
- —
|
||
|
||
## Inputs
|
||
|
||
- Spec：`../spec.md` §5.3（不再灌 6,171 行的 `global.css`）
|
||
- 既有：`apps/web/src/styles/tokens.css`、`src/main.tsx`、`scripts/check-tokens.mjs`
|
||
|
||
## Outputs
|
||
|
||
### 程式變更（預期路徑）
|
||
|
||
| 路徑 | 動作 | 說明 |
|
||
|------|------|------|
|
||
| `apps/web/src/styles/radar.css` | add | 分區骨架：雷達統計列、商機卡、CRM 八格、時間軸、統計 |
|
||
| `apps/web/src/main.tsx` | edit | 匯入 `radar.css`（在 `global.css` 之後） |
|
||
|
||
### 行為變更
|
||
|
||
- 樣式檔存在且被載入；顏色／間距一律引用 `tokens.css` 變數，無硬編碼色值。
|
||
|
||
## Out of scope
|
||
|
||
- 實際頁面樣式內容（跟著各 FE task 寫進本檔）
|
||
- 調整既有 `global.css`
|
||
|
||
## Acceptance
|
||
|
||
- [x] `npm run check:tokens` 通過（`radar.css` 無硬編碼色值）
|
||
- [x] 建置產物含新樣式，既有頁面外觀無變化（一處例外見 Notes）
|
||
- [x] 指令：
|
||
|
||
```bash
|
||
cd apps/web && npm run check:tokens && npm run build
|
||
```
|
||
|
||
## Notes（2026-07-31）
|
||
|
||
`src/styles/radar.css` 依交付順序分區（共用／M1／M2／M3／M4／M5／M6），只放骨架與版面，
|
||
文案與元件結構跟著各 FE task 進來。`main.tsx` 在 `global.css` 之後匯入。
|
||
|
||
### 順手修掉一個擋門的既有錯字
|
||
|
||
`npm run check:tokens` **在本 task 之前就是紅的**，不是 `radar.css` 造成的：
|
||
|
||
```text
|
||
src/styles/global.css:688 用了 tokens.css 沒有的 --hb-text-md（拼錯？）
|
||
```
|
||
|
||
`.hb-public__lead`（行銷頁前言段）寫的是 `var(--hb-text-md, 1.05rem)`，而 `--hb-text-md`
|
||
從來沒定義過，所以一直吃 fallback 1.05rem。這正是 `check-tokens.mjs` 第 3 條規則要抓的情況，
|
||
不修掉這行，本 task 的驗收指令永遠不會綠。
|
||
|
||
改成 `var(--hb-text-lg)`（1.125rem）。**這會讓公開頁前言段從 16.8px 變 18px**：
|
||
選 lg 是因為原意顯然是「比內文大一階」，改成 `--hb-text-base` 會讓它跟內文同大小、失去原意；
|
||
token 尺標本身沒有 17px 這一階，我也不打算為了保住 0.05rem 去新增一個設計尺標。
|
||
如果你想保持原樣，就在 `tokens.css` 補 `--hb-text-md: 1.05rem`，兩種都能過門。
|