Refactor color variables and theme handling

Author: ruibaby

packages/comment-widget/src/comment-editor.ts

@@ -207,7 +207,6 @@ export class CommentEditor extends LitElement {
     ...baseStyles,
     unsafeCSS(contentStyles),
     css`
-      @unocss-placeholder;
 
       :host {
         display: block;
@@ -225,16 +224,18 @@ export class CommentEditor extends LitElement {
       }
 
       .tiptap p.is-editor-empty:first-child::before {
-        color: var(--halo-cw-text-3-color, #6B7280);
         content: attr(data-placeholder);
         float: left;
         height: 0;
         pointer-events: none;
+        color: var(--halo-cw-text-3-color, #334155);
       }
 
       .tiptap code br {
         display: block;
       }
+
+      @unocss-placeholder;
     `,
   ];
 }

packages/comment-widget/src/styles/content.css

@@ -9,11 +9,11 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  color: var(--halo-cw-text-1-color, #111827);
   font-family: var(--base-font-family);
   font-size: var(--base-font-size);
   line-height: var(--base-line-height);
   word-wrap: break-word;
+  @apply text-text-1;
 }
 
 .markdown-body details,
@@ -39,7 +39,7 @@
 
 .markdown-body mark {
   background-color: var(--bgColor-attention-muted);
-  color: var(--halo-cw-text-1-color, #111827);
+  @apply text-text-1;
 }
 
 .markdown-body sub,
@@ -78,12 +78,11 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid var(--halo-cw-muted-1-color, #d1d5db);
   height: 0.25em;
   padding: 0;
   margin: 1.4em 0;
-  background-color: var(--halo-cw-muted-1-color, #d1d5db);
   border: 0;
+  @apply bg-muted-1;
 }
 
 .markdown-body a:hover {
@@ -134,8 +133,9 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: var(--halo-cw-text-1-color, #111827);
-  border-left: 0.25em solid var(--halo-cw-muted-1-color, #d1d5db);
+  border-left: 0.25em;
+  border-style: solid;
+  @apply text-text-1 border-muted-1;
 }
 
 .markdown-body ul,
@@ -256,8 +256,8 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: var(--halo-cw-muted-2-color, #e5e7eb);
   border-radius: 6px;
+  @apply bg-muted-2;
 }
 
 .markdown-body code br {

packages/comment-widget/uno.config.ts

@@ -1,4 +1,10 @@
-import { defineConfig, definePreset, presetIcons, presetWind3 } from 'unocss';
+import {
+  defineConfig,
+  definePreset,
+  presetIcons,
+  presetWind3,
+  transformerDirectives,
+} from 'unocss';
 
 const remRE = /(-?[.\d]+)rem/g;
 
@@ -26,14 +32,14 @@ export default defineConfig({
       },
       background: 'var(--halo-cw-background-color, transparent)',
       text: {
-        1: 'var(--halo-cw-text-1-color, #111827)',
-        2: 'var(--halo-cw-text-2-color, #374151)',
-        3: 'var(--halo-cw-text-3-color, #6B7280)',
+        1: 'var(--halo-cw-text-1-color, #0f172a)',
+        2: 'var(--halo-cw-text-2-color, #1e293b)',
+        3: 'var(--halo-cw-text-3-color, #334155)',
       },
       muted: {
-        1: 'var(--halo-cw-muted-1-color, #D1D5DB)',
-        2: 'var(--halo-cw-muted-2-color, #E5E7EB)',
-        3: 'var(--halo-cw-muted-3-color, #F3F4F6)',
+        1: 'var(--halo-cw-muted-1-color, #cbd5e1)',
+        2: 'var(--halo-cw-muted-2-color, #e2e8f0)',
+        3: 'var(--halo-cw-muted-3-color, #f1f5f9)',
       },
     },
   },
@@ -50,4 +56,5 @@ export default defineConfig({
     avatar:
       'rounded-full size-9 overflow-hidden inline-flex items-center justify-center bg-muted-2',
   },
+  transformers: [transformerDirectives()],
 });

packages/comment-widget/var.css

@@ -105,10 +105,10 @@
   --halo-cw-primary-3-color: #065f46; /* green-800 */
 
   --halo-cw-text-1-color: #f9fafb; /* gray-50 */
-  --halo-cw-text-2-color: #e5e7eb; /* gray-200 */
-  --halo-cw-text-3-color: #9ca3af; /* gray-400 */
+  --halo-cw-text-2-color: #e2e8f0; /* gray-200 */
+  --halo-cw-text-3-color: #94a3b8; /* gray-400 */
 
-  --halo-cw-muted-1-color: #4b5563; /* gray-600 */
-  --halo-cw-muted-2-color: #374151; /* gray-700 */
-  --halo-cw-muted-3-color: #1f2937; /* gray-800 */
+  --halo-cw-muted-1-color: #64748b; /* gray-600 */
+  --halo-cw-muted-2-color: #475569; /* gray-700 */
+  --halo-cw-muted-3-color: #334155; /* gray-800 */
 }

packages/example/index.html

@@ -8,28 +8,35 @@
     <script src="/src/main.ts" type="module"></script>
 
     <style>
-      body {
-        display: flex;
-        justify-content: center;
+      #toggle-theme {
+        margin-bottom: 1rem;
       }
+    </style>
 
-      :root {
-        color-scheme: dark;
-        --halo-cw-primary-1-color: #059669; /* green-600 */
-        --halo-cw-primary-2-color: #047857; /* green-700 */
-        --halo-cw-primary-3-color: #065f46; /* green-800 */
-
-        --halo-cw-text-1-color: #f9fafb; /* gray-50 */
-        --halo-cw-text-2-color: #e5e7eb; /* gray-200 */
-        --halo-cw-text-3-color: #9ca3af; /* gray-400 */
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const button = document.getElementById("toggle-theme");
+        button.addEventListener("click", () => {
+          document.documentElement.classList.toggle("dark");
+          // save the theme to local storage
+          localStorage.setItem(
+            "theme",
+            document.documentElement.classList.contains("dark")
+              ? "dark"
+              : "light"
+          );
+        });
 
-        --halo-cw-muted-1-color: #4b5563; /* gray-600 */
-        --halo-cw-muted-2-color: #374151; /* gray-700 */
-        --halo-cw-muted-3-color: #1f2937; /* gray-800 */
-      }
-    </style>
+        // get the theme from local storage
+        const theme = localStorage.getItem("theme");
+        if (theme) {
+          document.documentElement.classList.add(theme);
+        }
+      });
+    </script>
   </head>
   <body>
+    <button id="toggle-theme">Dark / Light</button>
     <comment-widget
       baseUrl="http://127.0.0.1:8090"
       group="content.halo.run"