From 9b170e3ebabe7f5f82825e3d8c2795f9ddf0e820 Mon Sep 17 00:00:00 2001 From: AirboZH Date: Tue, 5 Mar 2024 23:00:52 +0800 Subject: [PATCH] pref: Use base-info-color variable to unify non important prominent text --- .../src/base-comment-item-action.ts | 10 +++++----- packages/comment-widget/src/base-comment-item.ts | 2 +- packages/comment-widget/src/emoji-button.ts | 4 ++-- packages/comment-widget/src/styles/var.ts | 16 +++------------- packages/comment-widget/var.css | 14 ++++++-------- packages/example/index.html | 15 ++++----------- 6 files changed, 21 insertions(+), 40 deletions(-) diff --git a/packages/comment-widget/src/base-comment-item-action.ts b/packages/comment-widget/src/base-comment-item-action.ts index 4898e04..cf04c41 100644 --- a/packages/comment-widget/src/base-comment-item-action.ts +++ b/packages/comment-widget/src/base-comment-item-action.ts @@ -36,26 +36,26 @@ 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; } .item-action:hover .item-action__icon { - background-color: var(--component-comment-item-action-bg-color-hover); + background-color: var(--base-info-bg-color-hover); } .item-action:hover .item-action__text { - color: var(--component-comment-item-action-color-hover); + color: var(--base-info-color-hover); } .item-action:hover .item-action__icon ::slotted(svg) { - color: var(--component-comment-item-action-color-hover); + color: var(--base-info-color-hover); } `; } 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..394e3ab 100644 --- a/packages/comment-widget/src/styles/var.ts +++ b/packages/comment-widget/src/styles/var.ts @@ -4,6 +4,9 @@ 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-info-color-hover: var(--halo-comment-widget-base-info-color-hover, #333); + --base-info-bg-color-hover: var(--halo-comment-widget-base-info-bg-color-hover, #f3f4f6); --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); @@ -76,19 +79,6 @@ const varStyles = css` #4b5563 ); - --component-comment-item-action-bg-color-hover: var( - --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 - ); - --component-pagination-button-bg-color-hover: var( --halo-comment-widget-component-pagination-button-bg-color-hover, #f5f5f5 diff --git a/packages/comment-widget/var.css b/packages/comment-widget/var.css index 86e4891..58653c4 100644 --- a/packages/comment-widget/var.css +++ b/packages/comment-widget/var.css @@ -4,6 +4,9 @@ color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; + --halo-comment-widget-base-info-color-hover: #94a3b8; + --halo-comment-widget-base-info-bg-color-hover: #475569; --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; @@ -16,10 +19,6 @@ --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b; --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; --halo-comment-widget-component-pagination-button-bg-color-active: #475569; --halo-comment-widget-component-pagination-button-border-color-active: #475569; @@ -39,6 +38,9 @@ color-scheme: dark; --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; + --halo-comment-widget-base-info-color-hover: #94a3b8; + --halo-comment-widget-base-info-bg-color-hover: #475569; --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; @@ -51,10 +53,6 @@ --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b; --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; --halo-comment-widget-component-pagination-button-bg-color-active: #475569; --halo-comment-widget-component-pagination-button-border-color-active: #475569; diff --git a/packages/example/index.html b/packages/example/index.html index b84230c..b4741f8 100644 --- a/packages/example/index.html +++ b/packages/example/index.html @@ -17,13 +17,10 @@ color-scheme: dark; /* Basic */ - --halo-comment-widget-base-border-radius: 0.5em; - - /* Color */ - - /* Component */ - --halo-comment-widget-component-avatar-rounded: 9999px; - --halo-comment-widget-component-avatar-size: 2.2em; + --halo-comment-widget-base-color: #ffffff; + --halo-comment-widget-base-info-color: #64748b; + --halo-comment-widget-base-info-color-hover: #94a3b8; + --halo-comment-widget-base-info-bg-color-hover: #475569; --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; @@ -37,10 +34,6 @@ --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b; --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; --halo-comment-widget-component-pagination-button-bg-color-active: #475569; --halo-comment-widget-component-pagination-button-border-color-active: #475569;