From d5a2d7b44dae9d211d37acdfff79046d74669b06 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 primary action button text color customizable via CSS variable 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. --- 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..baa10ad 100644 --- a/dev/theme-integration.md +++ b/dev/theme-integration.md @@ -15,6 +15,7 @@ | `--halo-cw-primary-1-color` | 主要的主题色，用于按钮背景，输入框边框等 | | `--halo-cw-primary-2-color` | 较浅的主题色 | | `--halo-cw-primary-3-color` | 最浅的主题色 | +| `--halo-cw-primary-contrast-color` | 主要主题色上的文字颜色（提交按钮等） | | `--halo-cw-text-1-color` | 主要文本颜色，用于标题、正文等 | | `--halo-cw-text-2-color` | 次要文本颜色 | | `--halo-cw-text-3-color` | 辅助文本颜色 | @@ -35,6 +36,7 @@ --halo-cw-primary-1-color: ; --halo-cw-primary-2-color: ; --halo-cw-primary-3-color: ; + --halo-cw-primary-contrast-color: ; --halo-cw-text-1-color: ; --halo-cw-text-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-primary-contrast-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..dd81830 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-primary-contrast 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..7cd315d 100644 --- a/packages/comment-widget/uno.config.ts +++ b/packages/comment-widget/uno.config.ts @@ -35,6 +35,7 @@ export default defineConfig({ 1: 'var(--halo-cw-primary-1-color, #4CCBA0)', 2: 'var(--halo-cw-primary-2-color, #6EE7B7)', 3: 'var(--halo-cw-primary-3-color, #99F6E4)', + contrast: 'var(--halo-cw-primary-contrast-color, #ffffff)', }, text: { 1: 'var(--halo-cw-text-1-color, #0f172a)',