enhance(ui): polish logseq accent colors

packages/ui/src/vars-classic.css

@@ -15,10 +15,6 @@
   --ls-left-sidebar-sm-width: 74vw;
   --ls-left-sidebar-nav-btn-size: 38px;
   --ls-native-kb-height: 0px;
-  --ls-error-color: var(--color-red-600);
-  --ls-warning-color: var(--color-orange-600);
-  --ls-success-color: var(--color-green-600);
-  --ls-highlight-color-default: var(--ls-secondary-background-color);
 }
 
 .dark-theme,

src/main/frontend/common.css

@@ -26,9 +26,9 @@ html {
 }
 
 body {
-  color: or(--ls-default-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: var(--lx-gray-12, var(--ls-primary-text-color, hsl(var(--foreground))));
+  background-color: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background))));
   line-height: 1.5;
-  background-color: transparent;
   min-height: 100%;
   word-break: break-word; /* compatible for overflow-wrap: anywhere */
 }

src/main/frontend/components/file_sync.css

@@ -1,7 +1,7 @@
 :root {
-  --ls-color-file-sync-error: var(--ls-error-color);
+  --ls-color-file-sync-error: var(--color-red-600);
   --ls-color-file-sync-pending: var(--color-yellow-600);
-  --ls-color-file-sync-idle: var(--ls-success-color);
+  --ls-color-file-sync-idle: var(--color-green-600);
 }
 
 .cp__file-sync {

src/main/frontend/components/settings.cljs

@@ -321,7 +321,7 @@
                                        :gap "0.75rem"
                                        :width "100%"
                                        :max-width "16rem"}}
-                    (for [color colors/color-list
+                    (for [color (concat [:none :logseq] colors/color-list)
                           :let [active? (= color color-accent)]]
                       [:div.flex.items-center {:style {:height 28}}
                        [:div {:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
@@ -345,7 +345,7 @@
 
     [:<>
      (row-with-button-action {:left-label "Accent color"
-                              :description "Choosing an accent color will override any theme you have selected."
+                              :description "Choosing an accent color may override any theme you have selected."
                               :-for       "toggle_radix_theme"
                               :stretch    true
                               :action     pick-theme})]))

src/main/frontend/components/svg.cljs

@@ -82,7 +82,7 @@
   []
   [:svg.h-8.w-8.important
    {:view-box "0 0 512 512"
-    :fill     "var(--ls-error-color)"}
+    :fill     "var(--color-red-600)"}
    [:path
     {:d
      "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"}]])
@@ -91,7 +91,7 @@
   []
   [:svg.h-8.w-8.caution
    {:view-box "0 0 384 512"
-    :fill     "var(--ls-warning-color)"}
+    :fill     "var(--color-orange-600)"}
    [:path
     {:d
      "M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z"}]])
@@ -103,7 +103,7 @@
    [:svg.h-8.w-8.warning
     (merge
       {:view-box "0 0 576 512"
-       :fill     "var(--ls-warning-color)"}
+       :fill     "var(--color-orange-600)"}
       opts)
     [:path
      {:d

src/main/frontend/components/theme.css

@@ -59,10 +59,6 @@
   transform: scale(1.1);
 }
 
-body {
-  background-color: or(--lx-gray-01, --ls-primary-background-color, #fff);
-}
-
 html[data-theme='light'] .theme-container {
   .form-checkbox {
     &:focus {

tailwind.config.js

@@ -7,14 +7,14 @@ const lx = override => ({
   'accent-02': 'or(' + override + ', --lx-accent-02, --ls-page-properties-background-color)',
   'accent-03': 'or(' + override + ', --lx-accent-03, --ls-page-properties-background-color)',
   'accent-04': 'or(' + override + ', --lx-accent-04, --ls-page-properties-background-color)',
-  'accent-05': 'or(' + override + ', --lx-accent-05, --color-blue-900)',
-  'accent-06': 'or(' + override + ', --lx-accent-06, --color-blue-800)',
-  'accent-07': 'or(' + override + ', --lx-accent-07, --color-blue-700)',
-  'accent-08': 'or(' + override + ', --lx-accent-08, --color-blue-600)',
-  'accent-09': 'or(' + override + ', --lx-accent-09, --color-blue-500)',
-  'accent-10': 'or(' + override + ', --lx-accent-10, --color-blue-400)',
-  'accent-11': 'or(' + override + ', --lx-accent-11, --color-blue-200)',
-  'accent-12': 'or(' + override + ', --lx-accent-12, --color-blue-50)',
+  'accent-05': 'or(' + override + ', --lx-accent-05, --rx-blue-03)',
+  'accent-06': 'or(' + override + ', --lx-accent-06, --rx-blue-04)',
+  'accent-07': 'or(' + override + ', --lx-accent-07, --rx-blue-05)',
+  'accent-08': 'or(' + override + ', --lx-accent-08, --rx-blue-06)',
+  'accent-09': 'or(' + override + ', --lx-accent-09, --rx-blue-07)',
+  'accent-10': 'or(' + override + ', --lx-accent-10, --rx-blue-08)',
+  'accent-11': 'or(' + override + ', --lx-accent-11, --rx-blue-09)',
+  'accent-12': 'or(' + override + ', --lx-accent-12, --rx-blue-10)',
   'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)',
   'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)',
   'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)',