diff --git a/resources/css/shui.css b/resources/css/shui.css index d63cae72fb..1a60dfbc1b 100644 --- a/resources/css/shui.css +++ b/resources/css/shui.css @@ -74,6 +74,10 @@ html { } #ui__ac-inner {} + + .cp__cmdk { + --lx-gray-07: var(--rx-gray-07); + } } } diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs index a85dfc5933..06fa9450c4 100644 --- a/src/main/frontend/colors.cljs +++ b/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 diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css index 3edc143922..9c90a86015 100644 --- a/src/main/frontend/common.css +++ b/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 { diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index bf586ff69e..16db1af921 100644 --- a/src/main/frontend/components/block.css +++ b/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))); -.block-children-left-border:hover { - background-color: or(--ls-block-left-color, --lx-gray-11, --ls-primary-text-color); + &:hover { + background-color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10))); + opacity: .7; + } + + &: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; } } } diff --git a/src/main/frontend/components/journal.css b/src/main/frontend/components/journal.css index 96094f46fa..30085e9875 100644 --- a/src/main/frontend/components/journal.css +++ b/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; diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs index 803ef5d460..de3918f276 100644 --- a/src/main/frontend/components/settings.cljs +++ b/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)) diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css index 8372abbf40..f3b6e9e835 100644 --- a/src/main/frontend/components/settings.css +++ b/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; + } + } } \ No newline at end of file diff --git a/src/main/frontend/modules/shortcut/config.cljs b/src/main/frontend/modules/shortcut/config.cljs index ec787f83a4..5b6877b173 100644 --- a/src/main/frontend/modules/shortcut/config.cljs +++ b/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 diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index 09cf07e3d4..0fd8f3423c 100644 --- a/src/main/frontend/state.cljs +++ b/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))