# F25 Phase C — Batch tokenize exact-match (auto-fix docs pages)

## 改动摘要

- 新增 [`figma-sync/auto-tokenize-exact-match.mjs`](../../../figma-sync/auto-tokenize-exact-match.mjs) helper（含 `--dry-run` 预览模式）
- 跑 helper 自动替换 `playground/docs/pages/*Page.vue` 中 hardcoded 值有 exact-match design token 的位置
- FormItemPage.vue 跳过（属于 F23 范围）
- 27 个 page 改动，245 个值替换

## 替换规则（保守版）

仅替换"exact match → 现有 token"的情况：

| CSS 属性 | 原值 | 替换为 |
|---|---|---|
| `padding` / `padding-*` / `margin` / `margin-*` / `gap` / `row-gap` / `column-gap` | `Npx`（如 `4px` / `8px` / `12px` / `16px` / `24px` / `32px` / `40px` / `56px`） | `var(--sp-xxs)` / `var(--sp-xs)` / ... / `var(--sp-xxxl)` |
| `border-radius` / `border-*-radius` | `Npx`（`2px` / `4px` / `8px` / `12px` / `16px` / `100px`） | `var(--r-xs)` / `var(--r-s)` / ... / `var(--r-xxl)` |
| `background` / `background-color` / `color` / `border` / `border-color` / `outline` / `fill` / `stroke` / etc. | `#hex` exact-match in token table | `var(--token-name)` |

**绝不**替换非 exact-match 的值；保留 hex/px 不动等待 plan owner phase D 决策。

## Audit before / after

| Audit category | before phase C | after phase C | drop |
|---|---:|---:|---|
| total findings | 456 | 211 | -245 (-53.7%) |
| color | 10 | 6 | -4 |
| spacing | 351 | 146 | -205 |
| radius | 95 | 59 | -36 |
| exactMatch (在 audit 维度) | 280 | 35 | -245 |
| noMatch (留 phase D) | 176 | 176 | 0 |

仅看 `playground/docs/pages/`：414 → 169（-59.2%）

**Gate (master §1 Step 4)**：finding drop ≥ 30% — **PASS** (53.7% drop)

## 残留 35 exact-match findings

剩余的 35 个 exact-match findings 都在 `src/components/` / `src/canonical/` 下（**不在** Phase C 范围）。Phase C 只动 docs page；产品组件层 token 化要更谨慎，因为：

1. canonical 组件可能用 hardcoded px 表达 figma 设计意图（domain-specific 控件尺寸，不是 spacing scale 的应用）
2. src/components 是实现层，可能依赖具体像素值才正确渲染
3. 需要 plan owner 逐条 review 是否 token 化（vs 加 domain token）

后续如要扩展到组件层：单开 phase D 任务 + 视觉验收每条改动。

## 改动文件清单

- `figma-sync/auto-tokenize-exact-match.mjs` (new helper script)
- `playground/docs/pages/*Page.vue` (modified 27 pages)
  - BadgePage / BorderPage / BreadcrumbPage / ButtonPage / CheckboxPage / ColorPage / DateTimePage / EffectPage / IconPage / InputNumberPage / InputPage / NotificationPage / OverviewPage / PaginationPage / ProgressPage / PromptMessagePage / RadioPage / RatingPage / SelectPage / SliderPage / StepsPage / SwitchPage / TablePage / TabsPage / TooltipPage / TopBarPage / TypographyPage
- `docs/internal/_reports/f25-phase-c-tokenize-report.md` (this file)

总计：1 + 27 + 1 = **29 文件**，≤ 200 cap ✓

跳过：`playground/docs/pages/FormItemPage.vue`（F23 重写范围，hard skip in script SKIP_FILES set）

## Per-file 替换数量

| Page | replaced |
|---|---:|
| ButtonPage.vue | 20 |
| TopBarPage.vue | 20 |
| TablePage.vue | 14 |
| TooltipPage.vue | 13 |
| StepsPage.vue | 12 |
| BreadcrumbPage.vue | 11 |
| ColorPage.vue | 11 |
| PromptMessagePage.vue | 11 |
| RatingPage.vue | 11 |
| BadgePage.vue | 10 |
| InputNumberPage.vue | 9 |
| SliderPage.vue | 9 |
| TabsPage.vue | 9 |
| TypographyPage.vue | 9 |
| DateTimePage.vue | 8 |
| InputPage.vue | 8 |
| NotificationPage.vue | 8 |
| ProgressPage.vue | 8 |
| SelectPage.vue | 8 |
| SwitchPage.vue | 8 |
| BorderPage.vue | 5 |
| EffectPage.vue | 5 |
| IconPage.vue | 5 |
| PaginationPage.vue | 4 |
| CheckboxPage.vue | 3 |
| OverviewPage.vue | 3 |
| RadioPage.vue | 3 |

## 验收 self-check

- [x] auto-tokenize-exact-match.mjs 文件存在
- [x] 跑后 vue-tsc 0 errors
- [x] audit:no-hardcoded-design-tokens 重跑：findings 下降 53.7% ≥ 30%
- [x] 修改文件 27 个 (远 ≤ 200 cap)
- [x] 文件改动全在 docs page，src/ 不动
- [x] FormItemPage.vue 跳过 (F23 范围)
- [x] audit:figma-conformance overallPass=true
- [x] audit:docs-site 仅历史 in-review warn
- [x] audit-page-t2-sample 18 page exit 0

## Phase C 后剩余工作（plan owner phase D / 后续）

1. **noMatch 176 findings**：留待 plan owner 决策 —— 加 domain-specific token / 接受字面量 / 视为 phase E 范围
   - 实例：`padding: 6px 10px;`、`box-shadow: 0 0 4px #00ff66`、ColorPage 的 swatch hex 等
2. **src/components / src/canonical 层 35 exact-match findings**：phase D 单独评估
3. **A4 contrast finding (36 条)**：未在本 phase 自动修；逐条 review 后 case-by-case 修
4. **multi-color icon allowlist 填充**：phase A 启用 + phase B 后 40 个 multi-color finding 待人工标注入 `figma-sync/audit-allowlist/icon-multicolor.json`
5. **A1 残留 83 mono-color non-#dbdbdb finding**：semantic 色待 plan owner review (建议加 semantic-mono-allowlist 或调整 audit 规则)