skills
/
deerflow2
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
deerflow2/.planning/phases/08-bg-00000-text-000000/08-03-SUMMARY.md

4.3 KiB
Raw Blame History

phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed
08-bg-00000-text-000000 03 ui
frontend
tailwindcss
tokens
dark-mode
artifacts
phase provides
08-01 workspace color guard and ws token baseline
artifact list/detail svg and state colors migrated to ws tokens/currentColor
artifact preview srcDoc inline color variables migrated to var(--ws-color-*)
missing ws tokens registered in globals and token registry for light/dark
artifact preview
workspace theming
color guard
added patterns
ws-token-first color mapping
svg currentColor inheritance
created modified
frontend/src/components/workspace/artifacts/artifact-file-list.tsx
frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
frontend/src/styles/globals.css
frontend/src/styles/workspace-color-tokens.ts
SVG hardcoded stroke/fill values were unified to currentColor and inherited from tokenized parent text color.
Preview srcDoc keeps readability by defining ws variables in-doc and overriding them with prefers-color-scheme: dark.
Artifact UI colors must resolve through ws tokens, not hex literals.
New ws tokens must be added in both workspace-color-tokens.ts and globals.css (:root/.dark/@theme).
P8-01
P8-04
6min 2026-04-23

Phase 8 Plan 03: Artifact Tokenization Summary

Artifact list/detail/preview color paths now resolve via workspace tokens with SVG currentColor inheritance and dark/light token mappings.

Performance

  • Duration: 6 min
  • Started: 2026-04-23T01:32:02Z
  • Completed: 2026-04-23T01:37:51Z
  • Tasks: 2
  • Files modified: 4

Accomplishments

  • Replaced artifact list and detail hardcoded Tailwind/SVG color literals with ws-* token classes and currentColor.
  • Migrated artifact preview srcDoc inline --bg/--panel/--text/--muted/--line and direct style colors to var(--ws-color-*).
  • Added missing ws token registrations to keep globals.css and token registry aligned for guard validation.

Task Commits

  1. Task 1: 迁移 artifact 列表与详情中的 Tailwind/SVG 硬编码颜色 - b8a44feb (feat)
  2. Task 2: 迁移 artifact 预览区内联 CSS 变量为主题 token - 3ac34138 (feat)

Files Created/Modified

  • frontend/src/components/workspace/artifacts/artifact-file-list.tsx - 列表图标与下载按钮颜色改为 token/currentColor 路径。
  • frontend/src/components/workspace/artifacts/artifact-file-detail.tsx - 详情区 SVG 颜色、选中态与预览内联变量改为 ws token。
  • frontend/src/styles/globals.css - 新增 ws token 的 @theme 映射与 :root/.dark 定义。
  • frontend/src/styles/workspace-color-tokens.ts - 注册新增 ws token 的 light/dark 值并纳入唯一性校验范围。

Decisions Made

  • 使用 currentColor 统一 SVG 路径颜色，避免图标路径内再出现颜色字面量。
  • 预览 srcDoc 采用 ws 变量 + prefers-color-scheme 覆盖，保证 iframe 内容在深浅色下均可读。

Deviations from Plan

Auto-fixed Issues

1. [Rule 2 - Missing Critical] 同步补齐 token 注册表

  • Found during: Task 2
  • Issue: 预览区迁移需要新 ws token；若仅改组件不更新 token 注册，会破坏“token 统一注册 + guard 覆盖”约束。
  • Fix: 在 workspace-color-tokens.ts 与 globals.css 同步新增 token（@theme/:root/.dark）。
  • Files modified: frontend/src/styles/workspace-color-tokens.ts, frontend/src/styles/globals.css
  • Verification: pnpm --dir frontend run guard:colors 显示 ws-vars root=18 dark=18 inline=18。
  • Committed in: 3ac34138

Total deviations: 1 auto-fixed (Rule 2) Impact on plan: 偏差仅用于满足 token 注册完整性与 guard 一致性，无范围蔓延。

Issues Encountered

None.

User Setup Required

None - no external service configuration required.

Next Phase Readiness

  • artifact 关键组件已完成 token 化，可继续推进 Phase 8 其余页面迁移。
  • guard/lint/typecheck 均通过（lint 仅存在仓库既有 warning）。

Self-Check: PASSED

  • FOUND: .planning/phases/08-bg-00000-text-000000/08-03-SUMMARY.md
  • FOUND commit: b8a44feb
  • FOUND commit: 3ac34138

Phase: 08-bg-00000-text-000000 Completed: 2026-04-23