Skip to content

Commit

Permalink
pref: Use base-info-color variable to unify non important prominent t…
Browse files Browse the repository at this point in the history
…ext (#89)

增加变量以适配主题颜色

Resolve #88
  • Loading branch information
AirboZH authored Mar 8, 2024
1 parent bf04243 commit 2360cf2
Show file tree
Hide file tree
Showing 7 changed files with 14 additions and 16 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` | 基础行高 |
Expand All @@ -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` | 分页按钮活动状态背景颜色 |
Expand All @@ -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: ;
Expand All @@ -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: ;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/comment-widget/src/base-comment-item-action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/comment-widget/src/base-comment-item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/comment-widget/src/emoji-button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 1 addition & 4 deletions packages/comment-widget/src/styles/var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/comment-widget/var.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion packages/example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 2360cf2

Please sign in to comment.