Skip to content

feat(ui): unify visual tokens, container patterns, and CTA hierarchy - #59

Merged
chake111 merged 1 commit into
mainfrom
codex/define-design-tokens-in-globals.css
Apr 20, 2026
Merged

chake111 merged 1 commit into
mainfrom
codex/define-design-tokens-in-globals.css

Conversation

@chake111

Copy link
Copy Markdown
Owner

Motivation

  • 以一套可复用的 design token 和语义类统一页面与组件的视觉规则,便于后续开发复用和视觉一致性。
  • home-* / compare-* / result-* 的容器、交互和按钮层级标准化以减少视觉碎片化并明确 CTA 优先级。

Description

  • ui/app/globals.css 中新增 spacing、radius、surface、border、shadow、typography 等 token 并增加语义类(例如 app-page-containerapp-panelapp-panel-subtleapp-toolbarapp-interactiveapp-chipapp-section-title)。
  • 将 Home 模块的 home-herohome-quick-sceneshome-results-preview 改为使用 token 与语义类(例如使用 app-panel-subtleapp-chip[data-active]app-panel)。
  • 将 Compare / Results 相关容器和交互统一为 app-page-containerapp-toolbarapp-panelapp-interactive,并在组件内调整卡片与列表样式以使用这些语义类(涉及 ui/app/[locale]/compare/page.tsxui/app/[locale]/results/page.tsxui/components/* 等文件)。
  • 统一 CTA 层级策略:主动作保留 default,次级动作统一为 outline,低优先级动作使用 ghost,并在组件中相应调整 Button variant 的使用;同时新增 docs/component-visual-baseline.md 作为视觉对照基线文档。

Testing

  • 运行类型检查:npm --prefix ui run typecheck 成功通过。
  • 运行静态检查:npm --prefix ui run lint 因仓库未提供 ESLint v9 所需的 eslint.config.* 报错(不是代码类型错误,需补充 ESLint 配置)。

Codex Task

@vercel

vercel Bot commented Apr 20, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ai-tool-picker Error Error Apr 20, 2026 0:53am

@chake111
chake111 merged commit 882e319 into main Apr 20, 2026
2 of 3 checks passed

This branch had an error being deployed

1 failed deployment
Preview 4fe4ee5f Deployed Apr 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant