前端样式 STYLE_GUIDE v2.0 合规：P0 token 落地 + P1 禁止项清理 #39

New Issue

2026-08-28T11:13:58+08:00

tao.chen commented

2026-08-28 11:13:58 +08:00

对照 STYLE_GUIDE.md v2.0 的检查结论执行修复。

P0（已完成，CC）：app/app.css @theme 补 11 个官方 token（--text-2xs/3xs/4xs、--font-weight-medium-plus、--color-brand-deep、--color-ink-caption、--spacing-page-x/button-x/gap-icon/gap-sm/gap-md）。

P1（Codex）：

§2.7 废弃色值清理（105 处）：渐变按钮 5 处重复定义收敛为单一共享组件（token 化 from-brand→to-brand-deep）；#e74c3c→text-destructive；#748598/#758497→text-ink-caption；边框系 #dce5ed/#dfe7ef/#e8edf2/#e7ecf1→border-border；#81b2e7→primary 透明度变体。
§4.4 自定义阴影（61 处）映射到官方 shadow-md/lg/xl；焦点阴影改 ring-3 ring-ring/30。
§6.2 越档时长（3 处 ArtifactList duration-[140/160/180ms]）归入五档。
§6.4 button-spinner（11 处）→ Loader2Icon animate-spin，删除 .button-spinner 与 @keyframes spin。

约束：不改 components/ui/*（drawer.tsx duration-300 除外且需用户确认）；不改 visual 结构；P2/P3 任意值不在本任务范围。

验收：pnpm typecheck 通过；pnpm build 通过；grep 复扫 §2.7 色值/button-spinner 归零。

_{Task: or50alp4lzikun92shvpddpi}

对照 STYLE_GUIDE.md v2.0 的检查结论执行修复。 P0（已完成，CC）：app/app.css @theme 补 11 个官方 token（--text-2xs/3xs/4xs、--font-weight-medium-plus、--color-brand-deep、--color-ink-caption、--spacing-page-x/button-x/gap-icon/gap-sm/gap-md）。 P1（Codex）： 1. §2.7 废弃色值清理（105 处）：渐变按钮 5 处重复定义收敛为单一共享组件（token 化 from-brand→to-brand-deep）；#e74c3c→text-destructive；#748598/#758497→text-ink-caption；边框系 #dce5ed/#dfe7ef/#e8edf2/#e7ecf1→border-border；#81b2e7→primary 透明度变体。 2. §4.4 自定义阴影（61 处）映射到官方 shadow-md/lg/xl；焦点阴影改 ring-3 ring-ring/30。 3. §6.2 越档时长（3 处 ArtifactList duration-[140/160/180ms]）归入五档。 4. §6.4 button-spinner（11 处）→ Loader2Icon animate-spin，删除 .button-spinner 与 @keyframes spin。约束：不改 components/ui/*（drawer.tsx duration-300 除外且需用户确认）；不改 visual 结构；P2/P3 任意值不在本任务范围。验收：pnpm typecheck 通过；pnpm build 通过；grep 复扫 §2.7 色值/button-spinner 归零。 --- <sub>Task: or50alp4lzikun92shvpddpi</sub>

tao.chen added the priority:medium status:in-progress labels 2026-08-28 11:14:00 +08:00

tao.chen commented

2026-08-28 11:54:34 +08:00

tao.chen commented:

STYLE_GUIDE P0+P1 迁移完成（Claude 直接受命执行，Codex 因 429 弃用）

P0 — token 落地（app.css @theme）

字号 --text-2xs/3xs/4xs（10/9/8px）、字重 --font-weight-medium-plus: 650
颜色 --color-brand-deep、--color-ink-caption
间距 --spacing-page-x/-button-x/-gap-icon/-gap-sm/-gap-md

P1 — 违规项清理

按钮收敛：新建 components/common/buttonClasses.ts（primaryGradientButtonClass / dangerSolidButtonClass，token 化）；5 处重复定义（modalUi.primaryButtonClass、AppFormDialog.dialogPrimaryButtonClass、admin ×3 PRIMARY_BUTTON_CLASS）全部改为引用，导出名不变（import 路径兼容）；ConfirmDialog 危险按钮迁移；ProjectMembersDrawer 的 legacy .primary-button CSS 类同步迁移
§2.7 废弃 hex 清零（非 ui/ 目录）：border→line、text→ink-caption/ink-subtle/danger、渐变→brand 系列、#81b2e7→brand/70
§4.4 shadow-[...] 清零（非 ui/）：按体量映射 shadow-md/lg/xl；focus/hover/data-* 光晕改 ring-N + ring-{brand,success,danger,ink-subtle}/透明度，所有变体前缀成对保留
§6.4 spinner：删除 @keyframes spin 与 .button-spinner CSS，7 处 span 全部换 Loader2Icon（animate-spin），lucide import 按字母序补齐 8 个文件
§6.2 duration：ArtifactList 140/160→150、180→200
app.css 死代码：.primary-button/.secondary-button 块删除（0 引用），.icon-button 边框 token 化

验证

pnpm typecheck ✅（修复了 perl 逐行循环导致的双重 import / 缺 import）
pnpm build ✅
产物 CSS 21 项 utility 生成确认 ✅（含 border-line、ring-brand、font-medium-plus 等）
残留扫描：废弃 hex / shadow-[ / button-spinner / font-[650]→已完成部分 / duration-[ 均清零（非 ui/）
git diff：34 文件，+199/−239（净减 40 行）

遗留（按"触碰即迁移"边界外，待决策）

components/ui/sidebar.tsx:487 阴影、drawer.tsx:154 duration-300（禁改 ui/*）
ScheduleList.tsx:58 shadow-[inset_3px_0_#247fdc] 结构性左指示条，无等价 elevation tier
ui 语义色 token（primary/border/destructive 等）未在 @theme 定义，border-border 等为死类 — 需单独决策
app.css :root --sidebar-primary: #1479e8（废弃表色值，被 ui/sidebar 依赖）
P2/P3：任意值字号/间距、非表内 hex、模板字符串拼接 className 未动

**tao.chen** commented: > ## STYLE_GUIDE P0+P1 迁移完成（Claude 直接受命执行，Codex 因 429 弃用） ### P0 — token 落地（app.css @theme） - 字号 `--text-2xs/3xs/4xs`（10/9/8px）、字重 `--font-weight-medium-plus: 650` - 颜色 `--color-brand-deep`、`--color-ink-caption` - 间距 `--spacing-page-x/-button-x/-gap-icon/-gap-sm/-gap-md` ### P1 — 违规项清理 1. **按钮收敛**：新建 `components/common/buttonClasses.ts`（primaryGradientButtonClass / dangerSolidButtonClass，token 化）；5 处重复定义（modalUi.primaryButtonClass、AppFormDialog.dialogPrimaryButtonClass、admin ×3 PRIMARY_BUTTON_CLASS）全部改为引用，导出名不变（import 路径兼容）；ConfirmDialog 危险按钮迁移；ProjectMembersDrawer 的 legacy `.primary-button` CSS 类同步迁移 2. **§2.7 废弃 hex 清零**（非 ui/ 目录）：border→line、text→ink-caption/ink-subtle/danger、渐变→brand 系列、#81b2e7→brand/70 3. **§4.4 shadow-[...] 清零**（非 ui/）：按体量映射 shadow-md/lg/xl；focus/hover/data-* 光晕改 ring-N + ring-{brand,success,danger,ink-subtle}/透明度，所有变体前缀成对保留 4. **§6.4 spinner**：删除 `@keyframes spin` 与 `.button-spinner` CSS，7 处 span 全部换 `Loader2Icon`（animate-spin），lucide import 按字母序补齐 8 个文件 5. **§6.2 duration**：ArtifactList 140/160→150、180→200 6. **app.css 死代码**：`.primary-button`/`.secondary-button` 块删除（0 引用），`.icon-button` 边框 token 化 ### 验证 - pnpm typecheck ✅（修复了 perl 逐行循环导致的双重 import / 缺 import） - pnpm build ✅ - 产物 CSS 21 项 utility 生成确认 ✅（含 border-line、ring-brand、font-medium-plus 等） - 残留扫描：废弃 hex / shadow-[ / button-spinner / font-[650]→已完成部分 / duration-[ 均清零（非 ui/） - git diff：34 文件，+199/−239（净减 40 行） ### 遗留（按"触碰即迁移"边界外，待决策） - `components/ui/sidebar.tsx:487` 阴影、`drawer.tsx:154` duration-300（禁改 ui/*） - `ScheduleList.tsx:58` `shadow-[inset_3px_0_#247fdc]` 结构性左指示条，无等价 elevation tier - ui 语义色 token（primary/border/destructive 等）未在 @theme 定义，`border-border` 等为死类 — 需单独决策 - app.css `:root --sidebar-primary: #1479e8`（废弃表色值，被 ui/sidebar 依赖） - P2/P3：任意值字号/间距、非表内 hex、模板字符串拼接 className 未动

tao.chen added status:done and removed status:in-progress labels 2026-08-28 11:54:42 +08:00

tao.chen closed this issue

2026-08-28 11:54:44 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: tao.chen/model-platform#39