实现与符合性门禁

Token 源码、确定性生成器、运行时外观与无障碍 Provider 已经落地。本页描述当前实现结构与持续生效的符合性门禁。

目录结构

frontend/packages/materials/src/tokens/
├── source/
│   ├── reference.tokens.json
│   ├── system.tokens.json
│   ├── component.tokens.json
│   └── themes/*.tokens.json
└── generated/
    ├── tokens.css
    ├── tokens.ts
    └── tokens.schema.json

生成链：

Canonical JSON
  -> schema validation
  -> color conversion and gamut check
  -> CSS / TypeScript / schema output
  -> shadcn compatibility aliases
  -> app runtime injection
  -> component and visual tests

实施进度

步骤	状态
在 `packages/materials` 建立 Source、schema 和确定性 generator	已完成
生成 Reference/System/Component 与 shadcn Compatibility CSS	已完成
在 Web App 根部注入 Mode、Brand、Density，不在页面重复注入	已完成（AppearanceProvider）
无障碍覆写四轴（fontScale/contrast/colorVision/reduceMotion）	已完成（AccessibilityProvider）
将 `packages/widgets/src/theme/` 和登录页私有 Token 迁移到兼容层	已完成
建立 List/Detail/Edit/Wizard/Dashboard/Identity Recipe	Identity 已作为 tracer-bullet 交付，其余按切片推进
补 Token lint、WCAG、键盘、组件状态和视觉回归	持续推进中

实现符合性门禁

只有全部通过，具体前端版本才能声明 Design System 1.2 conformant：

单一源生成 Hex、OKLCH、CSS、TypeScript 与 schema，无手工漂移；
Light × Dark × 6 Brand × 4 Density 无缺失、循环或非法 fallback；
正文、链接、按钮、状态、focus ring 和控件边界通过 WCAG 2.2；
Button、Input、Select、Table、Dialog、Sidebar、Form 状态矩阵有测试；
Side 折叠、Top More、1024/768 断点有回归；
Managed Tabs 的溢出、固定、脏数据和恢复有测试；
Advanced Filter、Query Studio 的错误、取消和键盘路径有测试；
Loading、Empty、Filter-empty、Error、Unauthorized、Stale 有真实样例；
视觉回归使用真实 HTML/CSS 与稳定字体，不用生成图片伪文字；
Frontend Design Guardian 结论为 pass。

当前可运行命令

从 frontend/ 运行：

# 从 frontend/ 根目录运行当前真实存在的门禁。
yarn install --immutable
yarn lint
yarn typecheck
yarn build

yarn scaffold:page、yarn dev:ui 和 yarn ui:check 是冻结的开发体验目标，当前尚未实现，不能写进 CI 或开发说明当成可用命令。

扫尾检查

实现切片应至少运行：

# 业务源码中的裸颜色；预期为 0，生成目录与登记例外除外
rg -n '#[0-9A-Fa-f]{3,8}|rgb\\(|hsl\\(|oklch\\(' \
  apps packages --glob '!**/generated/**'

# 页面是否越层消费 Reference Token；预期为 0
rg -n -- '--ref-' apps packages/widgets

# token 生成漂移检测；预期无差异
node packages/materials/scripts/generate-tokens.mjs --check

已知命中必须进入实现切片的风险清单，不能以临时标记留在源码。