Refactor emoji picker CSS variable names and usage

Author: ruibaby

packages/comment-widget/src/emoji-button.ts

@@ -198,14 +198,14 @@ export class EmojiButton extends LitElement {
       }
 
       em-emoji-picker {
-        --rgb-color: var(--component-emoji-picker-rgb-color);
-        --rgb-accent: var(--component-emoji-picker-rgb-accent);
-        --rgb-background: var(--component-emoji-picker-rgb-background);
-        --rgb-input: var(--component-emoji-picker-rgb-input);
-        --color-border: var(--component-emoji-picker-color-border);
-        --color-border-over: var(--component-emoji-picker-color-border-over);
+        --rgb-color: var(--halo-cw-emoji-picker-rgb-color, 34, 36, 39);
+        --rgb-accent: var(--halo-cw-emoji-picker-rgb-accent, 34, 102, 237);
+        --rgb-background: var(--halo-cw-emoji-picker-rgb-background, 255, 255, 255);
+        --rgb-input: var(--halo-cw-emoji-picker-rgb-input, 255, 255, 255);
+        --color-border: var(--halo-cw-emoji-picker-color-border, rgba(0, 0, 0, .05));
+        --color-border-over: var(--halo-cw-emoji-picker-color-border-over, rgba(0, 0, 0, .1));
       }
-
+      
       .form__emoji-panel {
         position: absolute;
         box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);

packages/comment-widget/var.css

@@ -1,6 +1,6 @@
 @media (prefers-color-scheme: dark) {
   .color-scheme-auto,
-  [data-color-scheme="auto"] comment-widget {
+  [data-color-scheme="auto"] {
     color-scheme: dark;
 
     /* --halo-comment-widget-base-color: #ffffff;
@@ -24,23 +24,14 @@
     --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;
+    */
 
-    --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
-    --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
-    --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
-    --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
-    --halo-comment-widget-component-emoji-picker-color-border: rgba(
-      255,
-      255,
-      255,
-      0.1
-    );
-    --halo-comment-widget-component-emoji-picker-color-border-over: rgba(
-      255,
-      255,
-      255,
-      0.2
-    ); */
+    --halo-cw-emoji-picker-rgb-color: 222, 222, 221;
+    --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;
+    --halo-cw-emoji-picker-rgb-background: 21, 22, 23;
+    --halo-cw-emoji-picker-rgb-input: 0, 0, 0;
+    --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
+    --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
 
     --halo-cw-primary-1-color: #059669; /* green-600 */
     --halo-cw-primary-2-color: #047857; /* green-700 */
@@ -58,7 +49,7 @@
 
 .color-scheme-dark,
 .dark,
-[data-color-scheme="dark"] comment-widget {
+[data-color-scheme="dark"] {
   color-scheme: dark;
 
   /* --halo-comment-widget-base-color: #ffffff;
@@ -82,23 +73,14 @@
   --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;
+  */
 
-  --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
-  --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
-  --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
-  --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
-  --halo-comment-widget-component-emoji-picker-color-border: rgba(
-    255,
-    255,
-    255,
-    0.1
-  );
-  --halo-comment-widget-component-emoji-picker-color-border-over: rgba(
-    255,
-    255,
-    255,
-    0.2
-  ); */
+  --halo-cw-emoji-picker-rgb-color: 222, 222, 221;
+  --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;
+  --halo-cw-emoji-picker-rgb-background: 21, 22, 23;
+  --halo-cw-emoji-picker-rgb-input: 0, 0, 0;
+  --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
+  --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
 
   --halo-cw-primary-1-color: #059669; /* green-600 */
   --halo-cw-primary-2-color: #047857; /* green-700 */