From 04be270eceb0e95646deefe10b386b5e28fa7ab8 Mon Sep 17 00:00:00 2001
From: AirboZH <i@airbozh.cn>
Date: Tue, 5 Mar 2024 23:00:52 +0800
Subject: [PATCH] pref: add --component-comment-item-meta-info-color var

---
 packages/comment-widget/src/base-comment-item.ts | 2 +-
 packages/comment-widget/src/styles/var.ts        | 4 ++++
 packages/comment-widget/var.css                  | 2 ++
 packages/example/index.html                      | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts
index 6089a69..45a5392 100644
--- 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
index bdf9953..c72c2de 100644
--- 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
index 86e4891..419579b 100644
--- 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
index b84230c..d3db0b1 100644
--- 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;