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;