enhance(ui): polish details for the accent color theme

resources/css/shui.css

@@ -76,7 +76,8 @@ html {
       @apply bg-primary/20;
     }
 
-    #ui__ac-inner {}
+    #ui__ac-inner {
+    }
 
     .cp__cmdk {
       --lx-gray-07: var(--rx-gray-07);
@@ -162,6 +163,12 @@ html[data-theme=dark] {
       --muted: 192 100% 13%;
     }
 
+    .ui__button {
+      &.as-ghost {
+        @apply hover:bg-accent-01;
+      }
+    }
+
     .menu-separator {
       @apply opacity-20;
     }
@@ -175,14 +182,15 @@ html[data-theme=dark] {
     }
 
     .cp__cmdk {
-      .bg-gray-02 {
-        background-color: var(--ls-secondary-background-color, var(--lx-gray-02));
-      }
-
-      .border-gray-06, .border-gray-07 {
+      .border-gray-06,
+      .border-gray-07 {
         border-color: var(--ls-border-color, var(--lx-gray-06));
         opacity: .6;
       }
+
+      > .hints {
+        @apply border-accent-01 bg-gray-02;
+      }
     }
 
     .tl-button {

src/main/frontend/components/cmdk.cljs

@@ -824,9 +824,7 @@
                       {:on-click #(handle-action action (assoc state :opts opts) %)
                        :muted    true}))]
     (when action
-      [:div {:class "flex w-full px-3 py-2 gap-2 justify-between hints"
-             :style {:background "var(--lx-gray-03)"
-                     :border-top "1px solid var(--lx-gray-07)"}}
+      [:div.hints
        [:div.text-sm.leading-6
         [:div.flex.flex-row.gap-1.items-center
          [:div.font-medium.text-gray-12 "Tip:"]

src/main/frontend/components/container.css

@@ -346,14 +346,14 @@
     }
   }
 
+  .dark & {
+    --left-sidebar-bg-color: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--secondary, var(--rx-gray-03-hsl)))));
+  }
+
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
 
-    .dark & {
-      --left-sidebar-bg-color: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--secondary, var(--rx-gray-03-hsl)))));
-    }
-
     > .wrap {
       margin-top: 52px;
     }