From 2360cf2547df256f5414549418bd37fc1011b074 Mon Sep 17 00:00:00 2001 From: AirboZH Date: Fri, 8 Mar 2024 11:24:06 +0800 Subject: [PATCH] pref: Use base-info-color variable to unify non important prominent text (#89) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 增加变量以适配主题颜色 Resolve #88 --- README.md | 8 ++++---- packages/comment-widget/src/base-comment-item-action.ts | 4 ++-- packages/comment-widget/src/base-comment-item.ts | 2 +- packages/comment-widget/src/emoji-button.ts | 4 ++-- packages/comment-widget/src/styles/var.ts | 5 +---- packages/comment-widget/var.css | 4 ++-- packages/example/index.html | 3 ++- 7 files changed, 14 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index c46c56d..ac3ff46 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c | 变量名 | 描述 | |-------------------------------------------------------------------------|------------------------| | `--halo-comment-widget-base-color` | 基础文字颜色 | +| `--halo-comment-widget-base-info-color` | 非重要突出文字 | | `--halo-comment-widget-base-border-radius` | 基础元素的圆角 | | `--halo-comment-widget-base-font-size` | 基础字体大小 | | `--halo-comment-widget-base-line-height` | 基础行高 | @@ -69,7 +70,6 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c | `--halo-comment-widget-component-form-button-submit-border-color-hover` | 提交按钮悬停边框颜色 | | `--halo-comment-widget-component-form-button-emoji-color` | 表情按钮颜色 | | `--halo-comment-widget-component-comment-item-action-bg-color-hover` | 评论项操作悬停背景颜色 | -| `--halo-comment-widget-component-comment-item-action-color` | 评论项操作颜色 | | `--halo-comment-widget-component-comment-item-action-color-hover` | 评论项操作悬停颜色 | | `--halo-comment-widget-component-pagination-button-bg-color-hover` | 分页按钮悬停背景颜色 | | `--halo-comment-widget-component-pagination-button-bg-color-active` | 分页按钮活动状态背景颜色 | @@ -88,6 +88,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c :root { --halo-comment-widget-base-color: ; + --halo-comment-widget-base-info-color: ; --halo-comment-widget-base-border-radius: ; --halo-comment-widget-base-font-size: ; --halo-comment-widget-base-line-height: ; @@ -108,7 +109,6 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c --halo-comment-widget-component-form-button-submit-border-color-hover: ; --halo-comment-widget-component-form-button-emoji-color: ; --halo-comment-widget-component-comment-item-action-bg-color-hover: ; - --halo-comment-widget-component-comment-item-action-color: ; --halo-comment-widget-component-comment-item-action-color-hover: ; --halo-comment-widget-component-pagination-button-bg-color-hover: ; --halo-comment-widget-component-pagination-button-bg-color-active: ; @@ -137,6 +137,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; --halo-comment-widget-component-form-input-bg-color: #475569; --halo-comment-widget-component-form-input-color: #ffffff; --halo-comment-widget-component-form-input-border-color: #495056; @@ -150,7 +151,6 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c --halo-comment-widget-component-form-button-emoji-color: #cbd5e1; --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569; - --halo-comment-widget-component-comment-item-action-color: #64748b; --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8; --halo-comment-widget-component-pagination-button-bg-color-hover: #475569; @@ -172,6 +172,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; --halo-comment-widget-component-form-input-bg-color: #475569; --halo-comment-widget-component-form-input-color: #ffffff; --halo-comment-widget-component-form-input-border-color: #495056; @@ -185,7 +186,6 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c --halo-comment-widget-component-form-button-emoji-color: #cbd5e1; --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569; - --halo-comment-widget-component-comment-item-action-color: #64748b; --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8; --halo-comment-widget-component-pagination-button-bg-color-hover: #475569; diff --git a/packages/comment-widget/src/base-comment-item-action.ts b/packages/comment-widget/src/base-comment-item-action.ts index 4898e04..ad58046 100644 --- a/packages/comment-widget/src/base-comment-item-action.ts +++ b/packages/comment-widget/src/base-comment-item-action.ts @@ -36,13 +36,13 @@ export class BaseCommentItemAction extends LitElement { } .item-action__icon ::slotted(svg) { - color: var(--component-comment-item-action-color); + color: var(--base-info-color); width: 1em; height: 1em; } .item-action__text { - color: var(--component-comment-item-action-color); + color: var(--base-info-color); user-select: none; } diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts index 6089a69..5ef358d 100644 --- a/packages/comment-widget/src/base-comment-item.ts +++ b/packages/comment-widget/src/base-comment-item.ts @@ -88,7 +88,7 @@ export class BaseCommentItem extends LitElement { } .item__meta-info { - color: darkcyan; + color: var(--base-info-color); font-size: 0.75em; line-height: 1em; } diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts index bcd4271..d31dc52 100644 --- a/packages/comment-widget/src/emoji-button.ts +++ b/packages/comment-widget/src/emoji-button.ts @@ -113,13 +113,13 @@ export class EmojiButton extends LitElement { } .emoji-button { - color: var(--component-form-button-emoji-color); + color: var(--base-color); display: inline-flex; position: relative; } .emoji-button:hover { - color: var(--base-color); + opacity: 0.8; } .form__emoji-panel { diff --git a/packages/comment-widget/src/styles/var.ts b/packages/comment-widget/src/styles/var.ts index bdf9953..75cd0ff 100644 --- a/packages/comment-widget/src/styles/var.ts +++ b/packages/comment-widget/src/styles/var.ts @@ -4,6 +4,7 @@ const varStyles = css` :host { /* Base */ --base-color: var(--halo-comment-widget-base-color, #333); + --base-info-color: var(--halo-comment-widget-base-info-color, #4b5563); --base-border-radius: var(--halo-comment-widget-base-border-radius, 0.4em); --base-font-size: var(--halo-comment-widget-base-font-size, 1rem); --base-line-height: var(--halo-comment-widget-base-line-height, 1.25em); @@ -80,10 +81,6 @@ const varStyles = css` --halo-comment-widget-component-comment-item-action-bg-color-hover, #f3f4f6 ); - --component-comment-item-action-color: var( - --halo-comment-widget-component-comment-item-action-color, - #4b5563 - ); --component-comment-item-action-color-hover: var( --halo-comment-widget-component-comment-item-action-color-hover, #333 diff --git a/packages/comment-widget/var.css b/packages/comment-widget/var.css index 86e4891..4e9cf87 100644 --- a/packages/comment-widget/var.css +++ b/packages/comment-widget/var.css @@ -4,6 +4,7 @@ color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; --halo-comment-widget-component-form-input-bg-color: #475569; --halo-comment-widget-component-form-input-color: #ffffff; --halo-comment-widget-component-form-input-border-color: #495056; @@ -17,7 +18,6 @@ --halo-comment-widget-component-form-button-emoji-color: #cbd5e1; --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569; - --halo-comment-widget-component-comment-item-action-color: #64748b; --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8; --halo-comment-widget-component-pagination-button-bg-color-hover: #475569; @@ -39,6 +39,7 @@ color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; --halo-comment-widget-component-form-input-bg-color: #475569; --halo-comment-widget-component-form-input-color: #ffffff; --halo-comment-widget-component-form-input-border-color: #495056; @@ -52,7 +53,6 @@ --halo-comment-widget-component-form-button-emoji-color: #cbd5e1; --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569; - --halo-comment-widget-component-comment-item-action-color: #64748b; --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8; --halo-comment-widget-component-pagination-button-bg-color-hover: #475569; diff --git a/packages/example/index.html b/packages/example/index.html index b84230c..8f69b53 100644 --- a/packages/example/index.html +++ b/packages/example/index.html @@ -20,6 +20,8 @@ --halo-comment-widget-base-border-radius: 0.5em; /* Color */ + --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; /* Component */ --halo-comment-widget-component-avatar-rounded: 9999px; @@ -38,7 +40,6 @@ --halo-comment-widget-component-form-button-emoji-color: #cbd5e1; --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569; - --halo-comment-widget-component-comment-item-action-color: #64748b; --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8; --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;