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

halo-dev · Mar 7, 2024 · 9b170e3 · 9b170e3
1 parent bf04243
commit 9b170e3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 40 deletions.
diff --git 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
@@ -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,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
@@ -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
@@ -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;