From eb742dd2f23ecd61cb91d42c33487bf12b18822f Mon Sep 17 00:00:00 2001 From: SinonJZH <44700327+SinonJZH@users.noreply.github.com> Date: Fri, 25 Sep 2026 14:29:09 +0800 Subject: [PATCH] feat: make submit button text color customizable via CSS variable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- dev/theme-integration.md | 4 +++- packages/comment-widget/src/base-form.ts | 2 +- packages/comment-widget/src/comment-edit-form.ts | 4 ++-- packages/comment-widget/uno.config.ts | 1 + 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/dev/theme-integration.md b/dev/theme-integration.md index 65be0ba..db76268 100644 --- a/dev/theme-integration.md +++ b/dev/theme-integration.md @@ -18,6 +18,7 @@ | `--halo-cw-text-1-color` | 主要文本颜色，用于标题、正文等 | | `--halo-cw-text-2-color` | 次要文本颜色 | | `--halo-cw-text-3-color` | 辅助文本颜色 | +| `--halo-cw-text-submit-color` | 提交按钮文字颜色 | | `--halo-cw-muted-1-color` | 弱化色，用于边框、分割线、背景等辅助元素 | | `--halo-cw-muted-2-color` | 更浅的弱化色 | | `--halo-cw-muted-3-color` | 最浅的弱化色 | @@ -39,6 +40,7 @@ --halo-cw-text-1-color: ; --halo-cw-text-2-color: ; --halo-cw-text-3-color: ; + --halo-cw-text-submit-color: ; --halo-cw-muted-1-color: ; --halo-cw-muted-2-color: ; @@ -76,7 +78,7 @@ | `--halo-comment-widget-component-form-button-login-bg-color-hover` | 登录按钮悬停背景颜色 | 已废弃 | | `--halo-comment-widget-component-form-button-login-border-color` | 登录按钮边框颜色 | 已废弃 | | `--halo-comment-widget-component-form-button-submit-bg-color` | 提交按钮背景颜色 | 已废弃，后续使用 `--halo-cw-primary-1-color` 代替 | -| `--halo-comment-widget-component-form-button-submit-color` | 提交按钮文字颜色 | 已废弃 | +| `--halo-comment-widget-component-form-button-submit-color` | 提交按钮文字颜色 | 已废弃，后续使用 `--halo-cw-text-submit-color` 代替 | | `--halo-comment-widget-component-form-button-submit-border-color` | 提交按钮边框颜色 | 已废弃 | | `--halo-comment-widget-component-form-button-submit-border-color-hover` | 提交按钮悬停边框颜色 | 已废弃，后续使用 `--halo-cw-primary-3-color` 代替 | | `--halo-comment-widget-component-form-button-emoji-color` | 表情按钮颜色 | 已废弃 | diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts index 655b7f0..2f32c14 100644 --- a/packages/comment-widget/src/base-form.ts +++ b/packages/comment-widget/src/base-form.ts @@ -546,7 +546,7 @@ export class BaseForm extends LitElement { @@ -282,7 +282,7 @@ export class CommentEditForm extends LitElement { type="button" ?disabled=${!this.canSave} @click=${this.handleSave} - class="edit-form-submit outline-none focus-visible:shadow-input h-9 text-sm inline-flex items-center justify-center gap-2 bg-primary-1 text-white px-4 rounded-base hover:opacity-80 transition-[opacity,box-shadow] disabled:opacity-50 disabled:cursor-not-allowed" + class="edit-form-submit outline-none focus-visible:shadow-input h-9 text-sm inline-flex items-center justify-center gap-2 bg-primary-1 text-text-submit px-4 rounded-base hover:opacity-80 transition-[opacity,box-shadow] disabled:opacity-50 disabled:cursor-not-allowed" > ${when(this.saving, () => html``)} ${msg('Save')} diff --git a/packages/comment-widget/uno.config.ts b/packages/comment-widget/uno.config.ts index b8e9bd5..3ab3416 100644 --- a/packages/comment-widget/uno.config.ts +++ b/packages/comment-widget/uno.config.ts @@ -40,6 +40,7 @@ export default defineConfig({ 1: 'var(--halo-cw-text-1-color, #0f172a)', 2: 'var(--halo-cw-text-2-color, #1e293b)', 3: 'var(--halo-cw-text-3-color, #475569)', + submit: 'var(--halo-cw-text-submit-color, #ffffff)', }, muted: { 1: 'var(--halo-cw-muted-1-color, #cbd5e1)',