enhance(ui): polish logseq accent colors

resources/css/shui.css

@@ -190,6 +190,12 @@ html[data-theme=dark] {
         @apply bg-accent-02;
       }
     }
+
+    .cp__header {
+      > .r > div:not(.ui__dropdown-trigger) a.button, button.button {
+        @apply opacity-60 hover:opacity-90;
+      }
+    }
   }
 }
 

src/main/frontend/components/header.cljs

@@ -47,7 +47,7 @@
                   logged?
                   (not sync-enabled?))
       [:span.flex.space-x-2
-       [:a.button.text-sm.font-medium.block.text-gray-12
+       [:a.button.text-sm.font-medium.block.text-gray-11
         {:on-click #(state/pub-event! [:user/login])}
         [:span (t :login)]
         (when loading?

src/main/frontend/components/header.css

@@ -178,22 +178,13 @@
 }
 
 .button {
-  @apply h-8 px-2.5 py-1 rounded-md opacity-60;
-  display: block;
-  user-select: none;
-
-  &:hover, &.active {
-    opacity: 1;
-    background: none;
+  @apply h-8 px-2.5 py-1 rounded-md opacity-90 block select-none hover:opacity-100 active:opacity-80;
 
+  &:hover {
     @screen md {
-      background: or(--ls-header-button-hover, --lx-gray-04, --ls-tertiary-background-color);
+      background: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04)));
     }
   }
-
-  &:active {
-    opacity: .7;
-  }
 }
 
 .button.icon {

src/main/frontend/components/right_sidebar.css

@@ -27,12 +27,10 @@ html[data-theme=light] a.toggle:hover {
 
 .cp__header {
   > .r > div:not(.ui__dropdown-trigger) a, button {
-    @apply opacity-100;
-
-    color: or(--ls-header-button-text-color, --lx-gray-11, --ls-header-button-background);
+    color: var(--lx-gray-11, var(--ls-header-button-background, var(--rx-gray-11)));
 
     &:hover {
-      color: or(--ls-header-button-text-color-hover, --lx-gray-12, --ls-header-button-background);
+      color: var(--lx-gray-12, var(--ls-header-button-background, var(--rx-gray-12)));
     }
   }
 }
@@ -45,11 +43,3 @@ html[data-theme=light] a.toggle:hover {
     @apply opacity-100;
   }
 }
-
-html[data-theme=dark] {
-  .cp__header {
-    > .r > div:not(.ui__dropdown-trigger) a, button {
-      @apply opacity-70;
-    }
-  }
-}

src/main/frontend/components/settings.cljs

@@ -368,8 +368,11 @@
      (row-with-button-action {:left-label  "Accent color"
                               :description "Choosing an accent color may override any theme you have selected."
                               :-for        "toggle_radix_theme"
-                              :stretch    true
-                              :action     pick-theme})]))
+                              :desc        (when-not _in-modal?
+                                             [:span.pl-6 (ui/render-keyboard-shortcut
+                                                           (shortcut-helper/gen-shortcut-seq :ui/accent-colors-picker))])
+                              :stretch     (boolean _in-modal?)
+                              :action      pick-theme})]))
 
 (rum/defc modal-accent-colors-inner
   []

src/main/frontend/components/user/login.cljs

@@ -84,4 +84,4 @@
     {:close-btn?      true
      :label           "user-login"
      :close-backdrop? false
-     :center?         true}))
+     :center?         false}))