Skip to content

feat: 新增 --halo-cw-primary-contrast-color 支持自定义主色按钮文字颜色 - #257

Merged
ruibaby merged 1 commit into
halo-dev:mainfrom
SinonJZH:main
Sep 28, 2026
Merged

ruibaby merged 1 commit into
halo-dev:mainfrom
SinonJZH:main

Conversation

@SinonJZH

@SinonJZH SinonJZH commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

动机

3.0 UnoCSS 重构(ace1c1a)删除了整套旧组件级 CSS 变量,其中提交按钮文字颜色变量 --halo-comment-widget-component-form-button-submit-color 没有提供替代:按钮背景后来已接回 --halo-cw-primary-1-color(12e83c2),字色却一直写死 text-white,成为主色按钮上唯一不由变量驱动的样式面。

这带来两个问题:

  1. 主题无法适配:README 宣称「支持通过 CSS 变量自定义样式,适配明亮和暗黑模式」,但主要操作按钮的字色无法被主题覆盖;
  2. 默认主题对比度不达标:实测白字对比度——亮色 fallback #4CCBA0 上 2.03:1、官方暗色方案 #059669 上 3.77:1,均低于 14px 按钮文字 WCAG AA 要求的 4.5:1,主题作者无从修复。

方案

按 review 意见,变量归入 primary 系对比色 token,定名 --halo-cw-primary-contrast-color(原提案为 --halo-cw-text-submit-color):

  • 新增变量 --halo-cw-primary-contrast-color(默认 #ffffff,不改变现有观感);
  • 在 uno.config.ts 的 theme.colors.primary 中注册为 contrast token(与 primary-1 等同组同款写法),评论/回复提交按钮与编辑表单的提交/重试按钮统一消费(text-primary-contrast);
  • 同步 dev/theme-integration.md:现行变量表与 CSS 模板补行,废弃表中旧变量的备注回填替代名。

验证

  • pnpm build 通过,产物 CSS 生成 text-primary-contrast{color:var(--halo-cw-primary-contrast-color, #ffffff);};
  • 未设置变量时回退 #ffffff,与现有渲染完全一致(无视觉 diff);
  • 未新增测试:现有测试无断言涉及按钮类名,改动为纯样式 token 接线。

说明

默认配色的对比度问题(见动机中的数据)超出本 PR 范围,欢迎另行讨论。

@ruibaby

ruibaby commented Sep 28, 2026

Copy link
Copy Markdown
Member

感谢贡献,我更加倾向于 --halo-cw-primary-contrast-color

@SinonJZH SinonJZH changed the title feat: 支持通过 CSS 变量自定义提交按钮文字颜色 feat: 新增 --halo-cw-primary-contrast-color 支持自定义主色按钮文字颜色 Sep 28, 2026
@SinonJZH

Copy link
Copy Markdown
Contributor Author

感谢建议,这个命名确实更贴合 primary 系 token 的语义。已按 --halo-cw-primary-contrast-color 更名:token 移入 theme.colors.primary 组(text-primary-contrast),评论/回复提交按钮与编辑表单按钮统一消费;dev/theme-integration.md 三处(变量表、CSS 模板、废弃表备注)同步更新,PR 描述也已改。默认值仍为 #ffffff,现有观感不变。

@ruibaby

ruibaby commented Sep 28, 2026

Copy link
Copy Markdown
Member

…able

The submit button text color has been hardcoded to white since the 3.0
UnoCSS refactor removed the legacy
--halo-comment-widget-component-form-button-submit-color variable
without a replacement, while the button background was already wired to
--halo-cw-primary-contrast-color's sibling --halo-cw-primary-1-color.
...

Introduce --halo-cw-primary-contrast-color (default #ffffff, preserving
the current look) and consume it via a text-primary-contrast theme token
on the comment/reply submit button and the edit form's submit/retry
buttons. Name picked per review discussion.
@SinonJZH

Copy link
Copy Markdown
Contributor Author

我傻了😓,已修正。

@ruibaby
ruibaby merged commit 0a2beeb into halo-dev:main Sep 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants