102 lines
4.3 KiB
Markdown
102 lines
4.3 KiB
Markdown
---
|
||
phase: 08-bg-00000-text-000000
|
||
plan: 03
|
||
subsystem: ui
|
||
tags: [frontend, tailwindcss, tokens, dark-mode, artifacts]
|
||
requires:
|
||
- phase: 08-01
|
||
provides: workspace color guard and ws token baseline
|
||
provides:
|
||
- 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
|
||
affects: [artifact preview, workspace theming, color guard]
|
||
tech-stack:
|
||
added: []
|
||
patterns: [ws-token-first color mapping, svg currentColor inheritance]
|
||
key-files:
|
||
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
|
||
key-decisions:
|
||
- "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."
|
||
patterns-established:
|
||
- "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)."
|
||
requirements-completed: [P8-01, P8-04]
|
||
duration: 6min
|
||
completed: 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*
|