enhance(ui): polish logseq color vars

packages/ui/src/colors.css

@@ -1,3 +1,24 @@
+html[data-theme=light] {
+  --accent: var(--rx-gray-04-hsl);
+  --accent-foreground: var(--rx-gray-12-hsl);
+  --input: var(--rx-gray-03-hsl);
+}
+
+html[data-theme=dark] {
+  --primary-foreground: 255 92% 100%;
+  --background: 0 0% 11%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 11%;
+  --card-foreground: 0 0% 95%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 98%;
+  --border: 0 0% 16%;
+  --muted: 0 0% 15%;
+  --popover: 0 0% 7%;
+  --popover-foreground: 0 0 95%;
+  --input: 0 0% 25%;
+}
+
 html {
   &[data-color=logseq] {
     --lx-accent-01: var(--rx-logseq-01);
@@ -14,6 +35,12 @@ html {
     --lx-accent-12: var(--rx-logseq-12);
 
     &[data-theme=light] {
+      --primary: 200 97% 37%;
+      --primary-foreground: 255 92% 100%;
+      --accent: 200 97% 37%;
+      --accent-foreground: 255 92% 100%;
+      --ring: 200 97% 37%;
+
       --lx-gray-01: var(--rx-gray-01);
       --lx-gray-02: var(--rx-gray-02);
       --lx-gray-03: var(--rx-gray-03);
@@ -27,6 +54,24 @@ html {
       --lx-gray-11: var(--rx-gray-11);
       --lx-gray-12: var(--rx-gray-12);
     }
+
+    &[data-theme=dark] {
+      --background: 192 100% 11%;
+      --foreground: 0 0% 95%;
+      --accent: 192 80% 10%;
+      --accent-foreground: 255 92% 100%;
+      --primary: 200 97% 37%;
+      --primary-foreground: 255 92% 100%;
+      --ring: 200 97% 37%;
+      --secondary: 203 50% 20%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 192 100% 13%;
+      --border: 192 100% 14%;
+      --card: 192 100% 10%;
+      --card-foreground: 0 0% 95%;
+      --popover: 192 100% 11%;
+      --input: 203 35% 25%;
+    }
   }
 
   &[data-color=tomato] {

resources/css/shui.css

@@ -12,7 +12,6 @@ html {
     --muted: var(--rx-gray-05-hsl);
   }
 
-
   &:not([data-color=logseq]) {
     .ui__dropdown-menu-item,
     div[data-radix-popper-content-wrapper] div[role=menuitem] {
@@ -47,17 +46,7 @@ html {
 }
 
 html[data-theme=light] {
-  --accent: var(--rx-gray-04-hsl);
-  --accent-foreground: var(--rx-gray-12-hsl);
-  --input: var(--rx-gray-03-hsl);
-
   &[data-color=logseq] {
-    --primary: 200 97% 37%;
-    --primary-foreground: 255 92% 100%;
-    --accent: 200 97% 37%;
-    --accent-foreground: 255 92% 100%;
-    --ring: 200 97% 37%;
-
     .references-blocks-item {
       --lx-bg-override: var(--rx-gray-03-alpha);
     }
@@ -69,19 +58,6 @@ html[data-theme=light] {
 }
 
 html[data-theme=dark] {
-  --primary-foreground: 255 92% 100%;
-  --background: 0 0% 11%;
-  --foreground: 0 0% 95%;
-  --card: 0 0% 11%;
-  --card-foreground: 0 0% 95%;
-  --secondary: 0 0% 20%;
-  --secondary-foreground: 0 0% 98%;
-  --border: 0 0% 16%;
-  --muted: 0 0% 15%;
-  --popover: 0 0% 7%;
-  --popover-foreground: 0 0 95%;
-  --input: 0 0% 25%;
-
   background-color: #161616;
 
   &:not([data-color=logseq]) {
@@ -91,22 +67,6 @@ html[data-theme=dark] {
   }
 
   &[data-color=logseq] {
-    --background: 192 100% 11%;
-    --foreground: 0 0% 95%;
-    --accent: 192 80% 10%;
-    --accent-foreground: 255 92% 100%;
-    --primary: 200 97% 37%;
-    --primary-foreground: 255 92% 100%;
-    --ring: 200 97% 37%;
-    --secondary: 203 50% 20%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 192 100% 13%;
-    --border: 192 100% 14%;
-    --card: 192 100% 10%;
-    --card-foreground: 0 0% 95%;
-    --popover: 192 100% 11%;
-    --input: 203 35% 25%;
-
     @apply bg-[#002b36];
 
     .ui__button {

src/main/frontend/ui.css

@@ -66,7 +66,9 @@
   }
 
   .notification-area {
-    background-color: or(--logseq-of-notification-background, --lx-gray-04, --ls-tertiary-background-color, #fff);
+    @apply border;
+
+    background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, #fff);
     color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color);
   }
 }