pref: Use base-info-color variable to unify non important prominent t…

…ext (#89) 增加变量以适配主题颜色 Resolve #88
halo-dev · Mar 8, 2024 · 2360cf2 · 2360cf2
1 parent bf04243
commit 2360cf2
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;