pref: add --component-comment-item-meta-info-color var

halo-dev · Mar 5, 2024 · 04be270 · 04be270
1 parent bf04243
commit 04be270
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
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(--component-comment-item-meta-info-color);
         font-size: 0.75em;
         line-height: 1em;
       }

diff --git a/packages/comment-widget/src/styles/var.ts b/packages/comment-widget/src/styles/var.ts
@@ -76,6 +76,10 @@ const varStyles = css`
       #4b5563
     );
 
+    --component-comment-item-meta-info-color: var(
+      --halo-comment-widget-component-comment-item-meta-info-color,
+      darkcyan
+    );
     --component-comment-item-action-bg-color-hover: var(
       --halo-comment-widget-component-comment-item-action-bg-color-hover,
       #f3f4f6

diff --git a/packages/comment-widget/var.css b/packages/comment-widget/var.css
@@ -16,6 +16,7 @@
     --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-meta-info-color: darkcyan;
     --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;
@@ -51,6 +52,7 @@
   --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-meta-info-color: darkcyan;
   --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;

diff --git a/packages/example/index.html b/packages/example/index.html
@@ -37,6 +37,7 @@
         --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-meta-info-color: darkcyan;
         --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;