docs(08-03): 为artifact色值移植添加总结
This commit is contained in:
parent
fc27d179d4
commit
08b3864673
|
|
@ -0,0 +1,101 @@
|
||||||
|
---
|
||||||
|
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*
|
||||||
Loading…
Reference in New Issue