enhance(ui): polish the non-accent colors

resources/css/shui.css

@@ -74,6 +74,10 @@ html {
     }
 
     #ui__ac-inner {}
+
+    .cp__cmdk {
+      --lx-gray-07: var(--rx-gray-07);
+    }
   }
 }
 

src/main/frontend/colors.cljs

@@ -3,7 +3,7 @@
   (:require [clojure.string :as string]
             [frontend.util :as util]))
 
-(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange :brown])
+(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange])
 ;(def color-list [:tomato :red :blue])
 
 (defn variable

src/main/frontend/common.css

@@ -265,8 +265,7 @@ li p:last-child,
 }
 
 .admonition-icon {
-  border-right: 1px solid;
-  border-right-color: var(--ls-border-color, #ccc);
+  @apply border-r;
 }
 
 i.ti {
@@ -527,7 +526,7 @@ svg.tip {
 
 hr {
   margin: 2rem 0;
-  border-color: var(--ls-border-color, #ccc);
+  border-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
 }
 
 .resize {

src/main/frontend/components/block.css

@@ -180,15 +180,21 @@
   position: absolute;
   border-radius: 2px;
   opacity: 0.6;
-}
+  border-left-color: var(--lx-gray-09, var(--ls-border-color, var(--rx-gray-09)));
+
+  &:hover {
+    background-color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10)));
+    opacity: .7;
+  }
 
-.block-children-left-border:hover {
-  background-color: or(--ls-block-left-color, --lx-gray-11, --ls-primary-text-color);
+  &:active {
+    opacity: 1;
+  }
 }
 
 .block-children {
   border-left: 1px solid;
-  border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
+  border-left-color: var(--lx-gray-04-alpha, var(--ls-guideline-color, var(--rx-gray-04-alpha))) !important;
 
   padding-top: 2px;
   padding-bottom: 3px;
@@ -374,7 +380,7 @@
     border-radius: 2px;
   }
 
-  .bullet-container .selected {
+  span.bullet-container:not(.as-order-list) .selected {
     border: 3px solid;
   }
 }
@@ -574,11 +580,11 @@
 
   &:not(.typed-list) {
     &.bullet-closed {
-      background-color: or(--ls-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+      background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
     }
 
     .bullet {
-      background-color: or(--lx-gray-08, --ls-block-bullet-color, #394b59);
+      background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08)));
       transition: transform 0.2s;
     }
   }
@@ -597,11 +603,11 @@
   color: var(--ls-primary-text-color);
 
   &:hover > .bullet-container:not(.typed-list) {
-    background-color: or(--lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+    background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
 
     .bullet {
       transform: scale(1.2);
-      background-color: or(--lx-gray-08, --ls-block-bullet-color, inherit) !important;
+      background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08))) !important;
     }
   }
 }

src/main/frontend/components/journal.css

@@ -7,7 +7,7 @@
 
   .journal-item {
     border-top: 1px solid;
-    border-top-color: or(--ls-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
+    border-top-color: var(--lx-gray-07, var(--ls-border-color, var(--rx-gray-06)));
     margin: 24px 0;
     padding: 24px 0;
     min-height: 250px;

src/main/frontend/components/settings.cljs

@@ -332,33 +332,26 @@
                              :action     pick-theme
                              :desc       (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
 
-(defn accent-color-row []
+(defn accent-color-row [_in-modal?]
   (let [color-accent (state/sub :ui/radix-color)
-        pick-theme [:div.grid {:style {:grid-template-columns "repeat(5, 1fr)"
-                                       :gap "0.75rem"
-                                       :width "100%"
-                                       :max-width "16rem"}}
+        pick-theme [:div.cp__accent-colors-list-wrap
+                    {:class (if _in-modal? "as-modal-picker" "")}
                     (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"
-                              :title color
-                              :style {:background-color (colors/variable color :09)
-                                      :outline-color (colors/variable color (if active? :07 :06))
-                                      :outline-width (if active? "4px" "1px")
-                                      :outline-style :solid
-                                      :opacity (if active? 1 0.5)}
-                              :on-click (fn [_e] (state/set-color-accent! color))}
-                        [:div {:class "w-2 h-2 rounded-full transition ease-in duration-100"
-                               :style {:background-color (str "var(--rx-" (name color) "-07)")
-                                       :opacity (if active? 1 0)}}]]])
-                    (when color-accent
-                      [:div.col-span-5
-                       (shui-ui/button
-                         {:variant  :secondary
-                          :size :xs
-                          :on-click (fn [_e] (state/unset-color-accent!))}
-                         "Back to default color")])]]
+                       [:div
+                        {:class     "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
+                         :title     color
+                         :tab-index -1
+                         :style     {:background-color (colors/variable color :09)
+                                     :outline-color    (colors/variable color (if active? :07 :06))
+                                     :outline-width    (if active? "4px" "1px")
+                                     :outline-style    :solid
+                                     :opacity          (if active? 1 0.5)}
+                         :on-click  (fn [_e] (state/set-color-accent! color))}
+                        [:span {:class "w-2 h-2 rounded-full transition ease-in duration-100"
+                                :style {:background-color (str "var(--rx-" (name color) "-07)")
+                                        :opacity          (if active? 1 0)}}]]])]]
 
     [:<>
      (row-with-button-action {:left-label "Accent color"
@@ -370,7 +363,7 @@
 (rum/defc modal-accent-colors-inner
   []
   [:div.cp__settings-accent-colors-modal-inner
-   (accent-color-row)])
+   (accent-color-row true)])
 
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
@@ -708,7 +701,7 @@
      (language-row t preferred-language)
      (theme-modes-row t switch-theme system-theme? dark?)
      (when (and (util/electron?) (not util/mac?)) (native-titlebar-row t))
-     (when show-radix-themes? (accent-color-row))
+     (when show-radix-themes? (accent-color-row false))
      (when (config/global-config-enabled?) (edit-global-config-edn))
      (when current-repo (edit-config-edn))
      (when current-repo (edit-custom-css))

src/main/frontend/components/settings.css

@@ -505,4 +505,14 @@ body[data-settings-tab=keymap] {
   .panel-content {
     @apply sm:min-w-[520px];
   }
+}
+
+.cp__accent-colors {
+  &-list-wrap {
+    @apply grid grid-cols-8 gap-2 max-w-[250px];
+
+    &.as-modal-picker {
+      @apply grid-cols-8 gap-3 pt-1 pb-2 ml-8 max-w-none;
+    }
+  }
 }

src/main/frontend/modules/shortcut/config.cljs

@@ -530,10 +530,10 @@
    :editor/toggle-open-blocks               {:binding "t o"
                                              :fn      editor-handler/toggle-open!}
 
-   :ui/cycle-color-off                      {:binding "c o"
+   :ui/accent-color-reset                   {:binding "c o"
                                              :fn      state/unset-color-accent!}
 
-   :ui/cycle-color                          {:binding "c c"
+   :ui/accent-colors-picker                 {:binding "c c"
                                              :fn      #(state/pub-event! [:modal/show-accent-colors-modal])}
 
    :git/commit                              {:binding  "mod+g c"
@@ -736,8 +736,8 @@
             :dev/show-block-ast
             :dev/show-page-data
             :dev/show-page-ast
-            :ui/cycle-color
-            :ui/cycle-color-off])
+            :ui/accent-colors-picker
+            :ui/accent-color-reset])
        (with-meta {:before m/enable-when-not-editing-mode!}))
 
      :shortcut.handler/misc
@@ -851,8 +851,8 @@
       :ui/toggle-right-sidebar
       :ui/toggle-settings
       :ui/toggle-contents
-      :ui/cycle-color-off
-      :ui/cycle-color]
+      :ui/accent-color-reset
+      :ui/accent-colors-picker]
 
      :shortcut.category/whiteboard
      [:editor/new-whiteboard

src/main/frontend/state.cljs

@@ -2227,7 +2227,7 @@ Similar to re-frame subscriptions"
   (util/set-android-theme))
 
 (defn unset-color-accent! []
-  (swap! state assoc :ui/radix-color nil)
+  (swap! state assoc :ui/radix-color :logseq)
   (storage/remove :ui/radix-color)
   (util/set-android-theme))