Skip to content

feat: 支持通过 CSS 变量自定义提交按钮文字颜色 - #257

Open
SinonJZH wants to merge 1 commit into
halo-dev:mainfrom
SinonJZH:main
Open

SinonJZH wants to merge 1 commit into
halo-dev:mainfrom
SinonJZH:main

Conversation

@SinonJZH

Copy link
Copy Markdown

动机

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,主题作者无从修复。

方案

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

验证

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

说明

  • 变量命名可商量——如果更倾向于把字色归入 primary 系(如对比色 token --halo-cw-primary-contrast-color),我可以随时调整;
  • 默认配色的对比度问题(见动机中的数据)超出本 PR 范围,欢迎另行讨论。

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-1-color. Themes therefore cannot adjust the text color
on primary buttons, and the default white on the light fallback
(#4CCBA0) fails WCAG AA contrast (2.03:1); the shipped dark palette
(#059669) yields 3.77:1 — both below the 4.5:1 required for 14px text.

Introduce --halo-cw-text-submit-color (default #ffffff, preserving the
current look) and consume it via a text-text-submit theme token on the
comment/reply submit button and the edit form's submit/retry buttons.
The deprecated variable row in the theme integration docs now points to
its replacement.
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.

1 participant