enhance(ui): make consistent accent colors for all the popover dropdown

resources/css/shui.css

@@ -8,6 +8,8 @@ html {
   .ui__select-content {
     --accent: var(--rx-gray-04-hsl);
     --accent-foreground: var(--rx-gray-12-hsl);
+
+    --muted: var(--rx-gray-05-hsl);
   }
 
   .ui__dropdown-menu-item,
@@ -103,6 +105,7 @@ html[data-theme=dark] {
     .ui__context-menu-content,
     .ui__select-content {
       --accent: 190 100% 15%;
+      --muted: 192 100% 13%;
     }
 
     .ui__calendar {

src/main/frontend/common.css

@@ -392,16 +392,14 @@ button.menu {
 .menu-link:hover,
 button.pull:hover,
 button.menu:focus {
-  background-color: or(--ls-settings-list-item-hover-background-color, --lx-gray-05, --ls-menu-hover-color, #f4f5f7);
+  background-color: or(--lx-gray-05, --ls-menu-hover-color, #f4f5f7);
 }
 
 .menu-links-wrapper,
 .menu-links-outer {
-  @apply py-2 rounded-md shadow-lg overflow-y-auto;
+  @apply py-2 rounded-lg shadow-lg overflow-y-auto border bg-popovelx min-w-[12rem];
 
   max-height: calc(100vh - 100px) !important;
-  background-color: or(--ls-settings-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
-  min-width: 12rem;
 }
 
 .menu-backdrop {
@@ -411,9 +409,8 @@ button.menu:focus {
 }
 
 .menu-link {
-  background-color: or(--ls-settings-dropdown-link-item-background, --lx-gray-03, --ls-primary-background-color, #fff);
-  color: or(--ls-settings-dropdown-link-text-color, --lx-gray-11, --ls-primary-text-color);
-  user-select: none;
+  @apply text-popover-foreground/90 select-none hover:text-popover-foreground/100;
+  @apply text-sm px-2 py-1.5 mx-1 hover:rounded transition-opacity duration-150;
 }
 
 .menu-separator {

src/main/frontend/components/content.cljs

@@ -18,6 +18,7 @@
             [frontend.mixins :as mixins]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [logseq.shui.ui :as shui]
             [frontend.util :as util]
             [frontend.modules.shortcut.core :as shortcut]
             [logseq.graph-parser.util :as gp-util]

src/main/frontend/components/content.css

@@ -17,8 +17,4 @@
 
   z-index: calc(var(--ls-z-index-level-1) + 1);
   width: 270px;
-
-  a:hover {
-    color: var(--ls-primary-text-color);
-  }
 }

src/main/frontend/components/editor.css

@@ -43,6 +43,8 @@
 
   &[data-modal-name="commands"],
   &[data-modal-name="select-code-block-mode"] {
+    @apply bg-popovelx border overflow-auto rounded-lg py-1;
+
     @screen sm {
       width: 380px !important;
       max-width: 90vw !important;

src/main/frontend/components/file_sync.css

@@ -96,11 +96,6 @@
         font-size: 13px;
         padding: 6px 20px;
 
-        > div.flex > div {
-          margin: 0 !important;
-          flex: 1;
-        }
-
         &.is-first-placeholder {
           padding: 0 !important;
           user-select: none;

src/main/frontend/components/theme.css

@@ -60,12 +60,6 @@ html[data-theme='light'] #app-container {
     }
   }
 
-  .cp__header {
-    a {
-      color: var(--ls-primary-text-color);
-    }
-  }
-
   a.right-sidebar-button {
     color: var(--ls-primary-text-color);
   }

src/main/frontend/ui.cljs

@@ -184,7 +184,7 @@
   (if only-child?
     [:div.menu-link
      (dissoc options :only-child?) child]
-    [:a.flex.justify-between.px-4.py-2.text-sm.transition.ease-in-out.duration-150.cursor.menu-link
+    [:a.flex.justify-between.menu-link
      (cond-> options
              (true? no-padding?)
              (assoc :class (str class " no-padding"))

src/main/frontend/ui.css

@@ -6,7 +6,7 @@
     -webkit-overflow-scrolling: touch;
 
     .menu-link {
-      word-break: break-all;
+      @apply break-all rounded;
 
       .has-help {
         display: flex;
@@ -14,20 +14,17 @@
         justify-content: space-between;
 
         small {
-          visibility: visible;
-          cursor: help;
+          @apply cursor-help visible flex;
 
           svg {
-            opacity: .3;
-          }
-
-          &:hover svg {
-            opacity: .9;
+            @apply opacity-30 hover:opacity-90;
           }
         }
       }
 
       &:hover, &.chosen {
+        background-color: or(--lx-gray-05, --ls-menu-hover-color, #f4f5f7);
+
         .has-help small {
           visibility: visible;
         }
@@ -48,9 +45,7 @@
 }
 
 .ui__ac-group-name {
-  @apply p-2 text-xs;
-  color: or(--ls-dropdown-title-color, --lx-gray-11-alpha, --ls-block-ref-link-text-color);
-  background-color: or(--ls-dropdown-title-background, --lx-gray-03);
+  @apply p-2 text-xs text-popover-foreground/20 font-medium;
 }
 
 .search-all #ui__ac-inner {
@@ -113,9 +108,8 @@
   }
 
   &-panel {
-    @apply relative rounded-md shadow-xl border-none;
+    @apply relative rounded-md shadow-lg border border-gray-06 overflow-hidden;
 
-    overflow: hidden;
     background: or(--ls-modal-panel-color, --lx-gray-04, --ls-secondary-background-color);
 
     .panel-content {
@@ -283,10 +277,11 @@ html.is-mobile {
 }
 
 .dropdown-wrapper {
-  background-color: or(--ls-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
-  border: 1px solid or(--ls-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);
-  min-width: 12rem;
-  border-radius: 6px;
+  @apply border min-w-[12rem] rounded-lg bg-popovelx overflow-hidden;
+
+  .menu-links-wrapper {
+    @apply border-0;
+  }
 }
 
 .dropdown-caret {

tailwind.config.js

@@ -279,6 +279,9 @@ module.exports = {
         DEFAULT: 'hsl(var(--popover))',
         foreground: 'hsl(var(--popover-foreground))',
       },
+      popovelx: {
+        DEFAULT: 'var(--lx-gray-03, hsl(var(--popover)))',
+      },
       card: {
         DEFAULT: 'hsl(var(--card))',
         foreground: 'hsl(var(--card-foreground))',