Bladeren bron

enhance(ui): polish the non-accent colors

charlie 1 jaar geleden
bovenliggende
commit
8f0c4faec7

+ 0 - 76
packages/ui/src/vars-classic.css

@@ -17,85 +17,9 @@
   --ls-native-kb-height: 0px;
 }
 
-.dark-theme,
-html[data-theme='dark'] {
-}
-
-/* You should always use .light-theme for light mode, the .white-theme is just for backward compatibility.
-
-See: https://github.com/logseq/logseq/pull/4652. */
 .white-theme,
 .light-theme,
 html[data-theme='light'] {
-  /*
-  --ls-primary-background-color: #ffffff;
-  --ls-secondary-background-color: #f7f7f7;
-  --ls-tertiary-background-color: #eaeaea;
-  --ls-quaternary-background-color: #dcdcdc;
-  --ls-table-tr-even-background-color: var(--ls-secondary-background-color);
-  --ls-active-primary-color: rgb(0, 105, 182);
-  --ls-active-secondary-color: #00477c;
-  --ls-block-properties-background-color: var(--ls-secondary-background-color);
-  --ls-page-properties-background-color: var(--ls-secondary-background-color);
-  --ls-block-ref-link-text-color: #d8e1e8;
-  --ls-border-color: #ccc;
-  --ls-secondary-border-color: #e2e2e2;
-  --ls-tertiary-border-color: rgba(200, 200, 200, 0.3);
-  --ls-guideline-color: rgba(46, 27, 5, 0.08);
-  --ls-menu-hover-color: var(--ls-a-chosen-bg);
-  --ls-primary-text-color: #433f38;
-  --ls-secondary-text-color: #161e2e;
-  --ls-title-text-color: var(--ls-header-button-background);
-  --ls-link-text-color: #106ba3;
-  --ls-link-text-hover-color: #1a537c;
-  --ls-link-ref-text-color: var(--ls-link-text-color);
-  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-tag-text-color: var(--ls-link-ref-text-color);
-  --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
-  --ls-slide-background-color: #fff;
-  --ls-block-bullet-border-color: #dedede;
-  --ls-block-bullet-color: rgba(67, 63, 56, 0.25);
-  --ls-block-highlight-color: #c0e6fd;
-  --ls-selection-background-color: #e4f2ff;
-  --ls-selection-text-color: var(--ls-secondary-text-color);
-  --ls-page-checkbox-color: #9dbbd8;
-  --ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
-  --ls-page-blockquote-color: var(--ls-primary-text-color);
-  --ls-page-blockquote-bg-color: var(--lx-gray-03, #fbfaf8);
-  --ls-page-blockquote-border-color: var(--lx-gray-08, #799bbc);
-  --ls-page-mark-color: #262626;
-  --ls-page-mark-bg-color: #fef3ac;
-  --ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
-  --ls-page-inline-code-color: var(--ls-primary-text-color);
-  --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
-  --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
-  --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
-  --ls-cloze-text-color: #0000cd;
-  --ls-icon-color: #646464;
-  --ls-search-icon-color: var(--ls-primary-text-color);
-  --ls-search-icon-hover-color: var(--ls-secondary-text-color);
-  --ls-a-chosen-bg: var(--ls-quaternary-background-color);
-  --ls-pie-bg-color: #e1e1e1;
-  --ls-pie-fg-color: #0a4a5d;
-  --ls-highlight-color-gray: var(--color-gray-100);
-  --ls-highlight-color-red: var(--color-red-100);
-  --ls-highlight-color-yellow: var(--color-yellow-100);
-  --ls-highlight-color-green: var(--color-green-100);
-  --ls-highlight-color-blue: var(--color-blue-100);
-  --ls-highlight-color-purple: var(--color-purple-100);
-  --ls-highlight-color-pink: var(--color-pink-100);
-  --ls-error-text-color: var(--color-red-700);
-  --ls-error-background-color: var(--color-red-100);
-  --ls-warning-text-color: var(--color-yellow-700);
-  --ls-warning-background-color: var(--color-yellow-100);
-  --ls-success-text-color: var(--color-green-800);
-  --ls-success-background-color: var(--color-green-100);
-  --ls-focus-ring-color: rgba(66, 133, 244, 0.5);
-  --ls-header-button-background: rgba(15, 20, 25, 1);
-  --ls-left-sidebar-text-color: var(--lx-gray-12);
-  --ls-button-background-hsl: 200 98% 35%;
-  --ls-button-background: hsl(var(--ls-button-background-hsl));
-   */
   --color-level-1: var(--rx-gray-02);
   --color-level-2: var(--rx-gray-03);
   --color-level-3: var(--rx-gray-04);

+ 38 - 1
resources/css/shui.css

@@ -11,7 +11,7 @@ html[data-theme=light] {
 html[data-theme=dark] {
   --accent: var(--rx-gray-12-hsl);
   --accent-foreground: var(--rx-gray-02-hsl);
-  --primary-foreground: 255 92% 100%;
+  --primary-foreground: 0 0% 22%;
   --background: 0 0% 11%;
   --foreground: 0 0% 95%;
   --card: 0 0% 11%;
@@ -66,6 +66,12 @@ html {
       --ls-block-left-color: var(--rx-logseq-11);
     }
   }
+
+  &[data-color=none] {
+    #ui__ac-inner {
+
+    }
+  }
 }
 
 html[data-theme=light] {
@@ -92,6 +98,26 @@ html[data-theme=dark] {
   &[data-color=logseq] {
     @apply bg-[#002b36];
 
+    .ui__modal-panel {
+      @apply border-accent-01;
+    }
+
+    .references-blocks-item {
+      background-color: var(--lx-gray-03, var(--ls-secondary-background-color));
+    }
+
+    .cp__right-sidebar-inner {
+      .references-blocks-item {
+        background-color: var(--lx-gray-04, var(--ls-tertiary-background-color));
+      }
+    }
+
+    .cp__themes-installed {
+      .it.is-active, .it:hover {
+        @apply bg-accent-01;
+      }
+    }
+
     .ui__button {
       &.as-outline {
         --accent: 192 100% 12%;
@@ -116,6 +142,17 @@ html[data-theme=dark] {
     .rc-datepicker {
       --accent: 200 97% 37%;
     }
+
+    .cp__cmdk {
+      .bg-gray-02 {
+        background-color: var(--ls-secondary-background-color, var(--lx-gray-02));
+      }
+
+      .border-gray-06, .border-gray-07 {
+        border-color: var(--ls-border-color, var(--lx-gray-06));
+        opacity: .6;
+      }
+    }
   }
 }
 

+ 3 - 3
src/main/frontend/common.css

@@ -83,12 +83,12 @@ body {
 
   a {
     cursor: pointer;
-    color: or(--ls-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
+    color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary)/.8)));
     text-decoration: none;
   }
 
   a:hover {
-    color: or(--ls-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
+    color: var(--lx-accent-12, var(--ls-link-text-hover-color, hsl(var(--primary))));
   }
 
   code {
@@ -338,7 +338,7 @@ i.ti {
 /* region FIXME: override elements (?) */
 h1.title, h1.title input {
   margin-bottom: 1.5rem;
-  color: or(--ls-journal-title-color, --lx-gray-12, --ls-title-text-color, hsl(var(--foreground)/.8));
+  color: var(--lx-gray-12, var(--ls-title-text-color, hsl(var(--foreground))));
   font-size: var(--ls-page-title-size, 36px);
   font-weight: 500;
 }

+ 2 - 2
src/main/frontend/components/block.css

@@ -296,10 +296,10 @@
 }
 
 .page-ref {
-  @apply text-accent-11;
+  color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary)/.8)));
 
   &:hover {
-    @apply text-accent-12;
+    color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary))));
   }
 }
 

+ 1 - 0
src/main/frontend/components/container.cljs

@@ -871,6 +871,7 @@
         light? (= "light" (state/sub :ui/theme))
         sidebar-open?  (state/sub :ui/sidebar-open?)
         settings-open? (state/sub :ui/settings-open?)
+        settings-accent-open? (state/sub :ui/settings-accent-open?)
         left-sidebar-open?  (state/sub :ui/left-sidebar-open?)
         wide-mode? (state/sub :ui/wide-mode?)
         ls-block-hl-colored? (state/sub :pdf/block-highlight-colored?)

+ 1 - 8
src/main/frontend/components/container.css

@@ -197,7 +197,6 @@
       @apply pl-6 pr-4 py-1 flex justify-between items-center select-none sticky top-[-4px];
       @apply cursor-pointer z-[2] active:opacity-80;
 
-      background-color: var(--left-sidebar-bg-color);
 
       .ui__icon {
         @apply flex justify-center;
@@ -349,13 +348,11 @@
   }
 
   @screen sm {
-    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
-
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
 
     .dark & {
-      --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
+      --left-sidebar-bg-color: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--secondary, var(--rx-gray-03-hsl)))));
     }
 
     > .wrap {
@@ -824,10 +821,6 @@ html[data-theme='dark'] {
     }
   }
 
-  .left-sidebar-inner {
-    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
-  }
-
   .cp__right-sidebar {
     .sidebar-item {
       background-color: var(--lx-gray-03, var(--ls-secondary-background-color));

+ 2 - 2
src/main/frontend/components/onboarding/index.css

@@ -413,7 +413,7 @@ body[data-page=import] {
 
     .shepherd-footer {
       button {
-        background-color: var(--lx-bg-override, var(--lx-accent-09, var(--ls-button-background)));
+        background-color: var(--lx-accent-09, var(--ls-button-background));
         padding: 4px 8px;
         border-radius: 6px;
         overflow: hidden;
@@ -431,7 +431,7 @@ body[data-page=import] {
       }
 
       button:hover {
-          background-color: var(--lx-bg-override, var(--lx-accent-10, var(--ls-button-background)));
+          background-color: var(--lx-accent-10, var(--ls-button-background));
       }
     }
   }

+ 6 - 2
src/main/frontend/components/settings.cljs

@@ -13,7 +13,6 @@
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.dicts :as dicts]
-            [frontend.handler :as handler]
             [frontend.handler.config :as config-handler]
             [frontend.handler.file-sync :as file-sync-handler]
             [frontend.handler.global-config :as global-config-handler]
@@ -368,6 +367,11 @@
                               :stretch    true
                               :action     pick-theme})]))
 
+(rum/defc modal-accent-colors-inner
+  []
+  [:div.cp__settings-accent-colors-modal-inner
+   (accent-color-row)])
+
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
    [:label.block.text-sm.font-medium.leading-5.opacity-70
@@ -569,7 +573,7 @@
 (defn clear-cache-row [t]
   (row-with-button-action {:left-label   (t :settings-page/clear-cache)
                            :button-label (t :settings-page/clear)
-                           :on-click     handler/clear-cache!
+                           :on-click     #(state/pub-event! [:graph/clear-cache!])
                            :-for         "clear_cache"}))
 
 (defn version-row [t version]

+ 17 - 0
src/main/frontend/components/settings.css

@@ -316,6 +316,17 @@
       pointer-events: none;
     }
   }
+
+  &-accent-colors-modal-inner {
+    & > .it {
+      grid-template-columns: auto;
+      margin: -8px;
+    }
+
+    label[for=toggle_radix_theme] {
+      @apply text-xl font-semibold opacity-90;
+    }
+  }
 }
 
 .cp__assets {
@@ -489,3 +500,9 @@ body[data-settings-tab=keymap] {
     }
   }
 }
+
+.ui__modal[label=accent-colors-picker] {
+  .panel-content {
+    @apply sm:min-w-[520px];
+  }
+}

+ 1 - 1
src/main/frontend/components/theme.css

@@ -154,5 +154,5 @@ main.ls-fold-button-on-right {
 }
 
 main.theme-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color, --rx-gray-03);
+  --left-sidebar-bg-color: var(--lx-gray-02, hsl(var(--secondary, var(--rx-gray-03-hsl))));
 }

+ 10 - 0
src/main/frontend/handler/events.cljs

@@ -13,6 +13,7 @@
             [frontend.commands :as commands]
             [frontend.components.cmdk :as cmdk]
             [frontend.components.conversion :as conversion-component]
+            [frontend.components.settings :as settings]
             [frontend.components.diff :as diff]
             [frontend.components.encryption :as encryption]
             [frontend.components.file-sync :as file-sync]
@@ -335,6 +336,12 @@
 (defmethod handle :modal/show-themes-modal [_]
   (plugin/open-select-theme!))
 
+(defmethod handle :modal/show-accent-colors-modal [_]
+  (state/set-sub-modal!
+    #(settings/modal-accent-colors-inner)
+    {:center? true
+     :label "accent-colors-picker"}))
+
 (rum/defc modal-output
   [content]
   content)
@@ -657,6 +664,9 @@
      #(do (page-handler/create-today-journal!)
           (file-sync-restart!)))))
 
+(defmethod handle :graph/clear-cache! [[_]]
+  (notification/show! "TODO: clear cache!"))
+
 (defmethod handle :graph/ask-for-re-index [[_ *multiple-windows? ui]]
   ;; *multiple-windows? - if the graph is opened in multiple windows, boolean atom
   ;; ui - custom message to show on asking for re-index

+ 349 - 349
src/main/frontend/modules/shortcut/config.cljs

@@ -534,7 +534,7 @@
                                              :fn      state/unset-color-accent!}
 
    :ui/cycle-color                          {:binding "c c"
-                                             :fn      state/cycle-color!}
+                                             :fn      #(state/pub-event! [:modal/show-accent-colors-modal])}
 
    :git/commit                              {:binding  "mod+g c"
                                              :inactive (not (util/electron?))
@@ -560,8 +560,8 @@
       {::commands       (set (keys all-built-in-keyboard-shortcuts))
        ::dicts/commands dicts/abbreviated-commands}]
   (assert (= (::commands keyboard-commands) (::dicts/commands keyboard-commands))
-          (str "Keyboard commands must have an english label"
-               (data/diff (::commands keyboard-commands) (::commands keyboard-commands)))))
+    (str "Keyboard commands must have an english label"
+      (data/diff (::commands keyboard-commands) (::commands keyboard-commands)))))
 
 (defn- resolve-fn
   "Converts a keyword fn to the actual fn. The fn to be resolved needs to be
@@ -569,7 +569,7 @@
   [keyword-fn]
   (fn []
     (if-let [resolved-fn (some-> (find-ns-obj (namespace keyword-fn))
-                                 (aget (munge (name keyword-fn))))]
+                           (aget (munge (name keyword-fn))))]
       (resolved-fn)
       (throw (ex-info (str "Unable to resolve " keyword-fn " to a fn") {})))))
 
@@ -577,361 +577,361 @@
   (->> (if (sequential? ks)
          ks (let [{:keys [ns includes excludes]} ks]
               (->> (keys all-built-in-keyboard-shortcuts)
-                   (filter (fn [k]
-                             (and (or (and ns (keyword? k)
-                                           (contains? (->> (if (seqable? ns) (seq ns) [ns]) (map #(name %)) (set))
-                                                      (namespace k)))
-                                      (and includes (contains? (set includes) k)))
-                                  (if (not (seq excludes)) true (not (contains? (set excludes) k)))))))))
-       (select-keys all-built-in-keyboard-shortcuts)
-       (remove (comp :inactive val))
-       ;; Convert keyword fns to real fns
-       (map (fn [[k v]]
-              [k (if (keyword? (:fn v))
-                   (assoc v :fn (resolve-fn (:fn v)))
-                   v)]))
-       (into {})))
+                (filter (fn [k]
+                          (and (or (and ns (keyword? k)
+                                     (contains? (->> (if (seqable? ns) (seq ns) [ns]) (map #(name %)) (set))
+                                       (namespace k)))
+                                 (and includes (contains? (set includes) k)))
+                            (if (not (seq excludes)) true (not (contains? (set excludes) k)))))))))
+    (select-keys all-built-in-keyboard-shortcuts)
+    (remove (comp :inactive val))
+    ;; Convert keyword fns to real fns
+    (map (fn [[k v]]
+           [k (if (keyword? (:fn v))
+                (assoc v :fn (resolve-fn (:fn v)))
+                v)]))
+    (into {})))
 
 ;; This is the only var that should be publicly expose :fn functionality
 (defonce ^:large-vars/data-var *config
-         (atom
-           {:shortcut.handler/date-picker
-            (build-category-map {:ns :date-picker})
-
-            :shortcut.handler/pdf
-            (-> (build-category-map {:ns :pdf})
-                (with-meta {:before m/enable-when-not-editing-mode!}))
-
-            :shortcut.handler/whiteboard
-            (-> (build-category-map {:ns :whiteboard})
-                (with-meta {:before m/enable-when-not-editing-mode!}))
-
-            :shortcut.handler/auto-complete
-            (build-category-map {:ns :auto-complete})
-
-            :shortcut.handler/cards
-            (-> (build-category-map {:ns :cards})
-                (with-meta {:before m/enable-when-not-editing-mode!}))
-
-            :shortcut.handler/block-editing-only
-            (-> (build-category-map
-                  [:editor/escape-editing
-                   :editor/backspace
-                   :editor/delete
-                   :editor/zoom-in
-                   :editor/zoom-out
-                   :editor/new-block
-                   :editor/new-line
-                   :editor/follow-link
-                   :editor/open-link-in-sidebar
-                   :editor/bold
-                   :editor/italics
-                   :editor/highlight
-                   :editor/strike-through
-                   :editor/clear-block
-                   :editor/kill-line-before
-                   :editor/kill-line-after
-                   :editor/beginning-of-block
-                   :editor/end-of-block
-                   :editor/forward-word
-                   :editor/backward-word
-                   :editor/forward-kill-word
-                   :editor/backward-kill-word
-                   :editor/replace-block-reference-at-point
-                   :editor/copy-embed
-                   :editor/paste-text-in-one-block-at-point
-                   :editor/insert-youtube-timestamp])
-                (with-meta {:before m/enable-when-editing-mode!}))
-
-            :shortcut.handler/editor-global
-            (-> (build-category-map
-                  [:graph/export-as-html
-                   :graph/open
-                   :graph/remove
-                   :graph/add
-                   :graph/save
-                   :graph/re-index
-                   :editor/cycle-todo
-                   :editor/up
-                   :editor/down
-                   :editor/left
-                   :editor/right
-                   :editor/select-up
-                   :editor/select-down
-                   :editor/move-block-up
-                   :editor/move-block-down
-                   :editor/open-edit
-                   :editor/select-block-up
-                   :editor/select-block-down
-                   :editor/select-parent
-                   :editor/delete-selection
-                   :editor/expand-block-children
-                   :editor/collapse-block-children
-                   :editor/indent
-                   :editor/outdent
-                   :editor/copy
-                   :editor/copy-text
-                   :editor/cut
-                   :command/toggle-favorite])
-                (with-meta {:before m/enable-when-not-component-editing!}))
-
-            :shortcut.handler/global-prevent-default
-            (-> (build-category-map
-                  [:editor/insert-link
-                   :editor/select-all-blocks
-                   :editor/toggle-undo-redo-mode
-                   :editor/toggle-number-list
-                   :editor/undo
-                   :editor/redo
-                   :ui/toggle-brackets
-                   :go/search
-                   :go/search-in-page
-                   :command-palette/toggle
-                   :go/electron-find-in-page
-                   :go/electron-jump-to-the-next
-                   :go/electron-jump-to-the-previous
-                   :go/backward
-                   :go/forward
-                   :search/re-index
-                   :sidebar/open-today-page
-                   :sidebar/clear
-                   :command/run
-                   :window/close])
-                (with-meta {:before m/prevent-default-behavior}))
-
-            :shortcut.handler/global-non-editing-only
-            (-> (build-category-map
-                  [:go/home
-                   :go/journals
-                   :go/all-pages
-                   :go/flashcards
-                   :go/graph-view
-                   :go/all-graphs
-                   :go/whiteboards
-                   :go/keyboard-shortcuts
-                   :go/tomorrow
-                   :go/next-journal
-                   :go/prev-journal
-                   :ui/toggle-document-mode
-                   :ui/toggle-settings
-                   :ui/toggle-right-sidebar
-                   :ui/toggle-left-sidebar
-                   :ui/toggle-help
-                   :ui/toggle-theme
-                   :ui/toggle-contents
-                   :editor/open-file-in-default-app
-                   :editor/open-file-in-directory
-                   :editor/copy-current-file
-                   :editor/copy-page-url
-                   :editor/new-whiteboard
-                   :ui/toggle-wide-mode
-                   :ui/select-theme-color
-                   :ui/goto-plugins
-                   :ui/install-plugins-from-file
-                   :editor/toggle-open-blocks
-                   :ui/clear-all-notifications
-                   :git/commit
-                   :sidebar/close-top
-                   :dev/show-block-data
-                   :dev/show-block-ast
-                   :dev/show-page-data
-                   :dev/show-page-ast
-                   :ui/cycle-color
-                   :ui/cycle-color-off])
-                (with-meta {:before m/enable-when-not-editing-mode!}))
-
-            :shortcut.handler/misc
-            ;; always overrides the copy due to "mod+c mod+s"
-            {:misc/copy (:misc/copy all-built-in-keyboard-shortcuts)}}))
+  (atom
+    {:shortcut.handler/date-picker
+     (build-category-map {:ns :date-picker})
+
+     :shortcut.handler/pdf
+     (-> (build-category-map {:ns :pdf})
+       (with-meta {:before m/enable-when-not-editing-mode!}))
+
+     :shortcut.handler/whiteboard
+     (-> (build-category-map {:ns :whiteboard})
+       (with-meta {:before m/enable-when-not-editing-mode!}))
+
+     :shortcut.handler/auto-complete
+     (build-category-map {:ns :auto-complete})
+
+     :shortcut.handler/cards
+     (-> (build-category-map {:ns :cards})
+       (with-meta {:before m/enable-when-not-editing-mode!}))
+
+     :shortcut.handler/block-editing-only
+     (-> (build-category-map
+           [:editor/escape-editing
+            :editor/backspace
+            :editor/delete
+            :editor/zoom-in
+            :editor/zoom-out
+            :editor/new-block
+            :editor/new-line
+            :editor/follow-link
+            :editor/open-link-in-sidebar
+            :editor/bold
+            :editor/italics
+            :editor/highlight
+            :editor/strike-through
+            :editor/clear-block
+            :editor/kill-line-before
+            :editor/kill-line-after
+            :editor/beginning-of-block
+            :editor/end-of-block
+            :editor/forward-word
+            :editor/backward-word
+            :editor/forward-kill-word
+            :editor/backward-kill-word
+            :editor/replace-block-reference-at-point
+            :editor/copy-embed
+            :editor/paste-text-in-one-block-at-point
+            :editor/insert-youtube-timestamp])
+       (with-meta {:before m/enable-when-editing-mode!}))
+
+     :shortcut.handler/editor-global
+     (-> (build-category-map
+           [:graph/export-as-html
+            :graph/open
+            :graph/remove
+            :graph/add
+            :graph/save
+            :graph/re-index
+            :editor/cycle-todo
+            :editor/up
+            :editor/down
+            :editor/left
+            :editor/right
+            :editor/select-up
+            :editor/select-down
+            :editor/move-block-up
+            :editor/move-block-down
+            :editor/open-edit
+            :editor/select-block-up
+            :editor/select-block-down
+            :editor/select-parent
+            :editor/delete-selection
+            :editor/expand-block-children
+            :editor/collapse-block-children
+            :editor/indent
+            :editor/outdent
+            :editor/copy
+            :editor/copy-text
+            :editor/cut
+            :command/toggle-favorite])
+       (with-meta {:before m/enable-when-not-component-editing!}))
+
+     :shortcut.handler/global-prevent-default
+     (-> (build-category-map
+           [:editor/insert-link
+            :editor/select-all-blocks
+            :editor/toggle-undo-redo-mode
+            :editor/toggle-number-list
+            :editor/undo
+            :editor/redo
+            :ui/toggle-brackets
+            :go/search
+            :go/search-in-page
+            :command-palette/toggle
+            :go/electron-find-in-page
+            :go/electron-jump-to-the-next
+            :go/electron-jump-to-the-previous
+            :go/backward
+            :go/forward
+            :search/re-index
+            :sidebar/open-today-page
+            :sidebar/clear
+            :command/run
+            :window/close])
+       (with-meta {:before m/prevent-default-behavior}))
+
+     :shortcut.handler/global-non-editing-only
+     (-> (build-category-map
+           [:go/home
+            :go/journals
+            :go/all-pages
+            :go/flashcards
+            :go/graph-view
+            :go/all-graphs
+            :go/whiteboards
+            :go/keyboard-shortcuts
+            :go/tomorrow
+            :go/next-journal
+            :go/prev-journal
+            :ui/toggle-document-mode
+            :ui/toggle-settings
+            :ui/toggle-right-sidebar
+            :ui/toggle-left-sidebar
+            :ui/toggle-help
+            :ui/toggle-theme
+            :ui/toggle-contents
+            :editor/open-file-in-default-app
+            :editor/open-file-in-directory
+            :editor/copy-current-file
+            :editor/copy-page-url
+            :editor/new-whiteboard
+            :ui/toggle-wide-mode
+            :ui/select-theme-color
+            :ui/goto-plugins
+            :ui/install-plugins-from-file
+            :editor/toggle-open-blocks
+            :ui/clear-all-notifications
+            :git/commit
+            :sidebar/close-top
+            :dev/show-block-data
+            :dev/show-block-ast
+            :dev/show-page-data
+            :dev/show-page-ast
+            :ui/cycle-color
+            :ui/cycle-color-off])
+       (with-meta {:before m/enable-when-not-editing-mode!}))
+
+     :shortcut.handler/misc
+     ;; always overrides the copy due to "mod+c mod+s"
+     {:misc/copy (:misc/copy all-built-in-keyboard-shortcuts)}}))
 
 ;; To add a new entry to this map, first add it here and then
 ;; a description for it in frontend.dicts.en/dicts
 ;; Full list of categories for docs purpose
 (defonce ^:large-vars/data-var *category
   (atom
-   {:shortcut.category/basics
-    [:go/search
-     :editor/new-block
-     :editor/new-line
-     :editor/indent
-     :editor/outdent
-     :editor/select-all-blocks
-     :editor/select-parent
-     :go/search-in-page
-     :command-palette/toggle
-     :go/electron-find-in-page
-     :go/electron-jump-to-the-next
-     :go/electron-jump-to-the-previous
-     :editor/undo
-     :editor/redo
-     :editor/copy
-     :editor/copy-text
-     :editor/cut]
-
-    :shortcut.category/formatting
-    [:editor/bold
-     :editor/insert-link
-     :editor/italics
-     :editor/strike-through
-     :editor/highlight]
-
-    :shortcut.category/navigating
-    [:editor/up
-     :editor/down
-     :editor/left
-     :editor/right
-     :editor/collapse-block-children
-     :editor/expand-block-children
-     :editor/toggle-open-blocks
-     :go/backward
-     :go/forward
-     :go/home
-     :go/journals
-     :go/all-pages
-     :go/graph-view
-     :go/all-graphs
-     :go/whiteboards
-     :go/flashcards
-     :go/tomorrow
-     :go/next-journal
-     :go/prev-journal
-     :go/keyboard-shortcuts]
-
-    :shortcut.category/block-editing
-    [:editor/backspace
-     :editor/delete
-     :editor/indent
-     :editor/outdent
-     :editor/new-block
-     :editor/new-line
-     :editor/zoom-in
-     :editor/zoom-out
-     :editor/cycle-todo
-     :editor/follow-link
-     :editor/open-link-in-sidebar
-     :editor/move-block-up
-     :editor/move-block-down
-     :editor/escape-editing]
-
-    :shortcut.category/block-command-editing
-    [:editor/backspace
-     :editor/clear-block
-     :editor/kill-line-before
-     :editor/kill-line-after
-     :editor/beginning-of-block
-     :editor/end-of-block
-     :editor/forward-word
-     :editor/backward-word
-     :editor/forward-kill-word
-     :editor/backward-kill-word
-     :editor/replace-block-reference-at-point
-     :editor/copy-embed
-     :editor/paste-text-in-one-block-at-point
-     :editor/select-up
-     :editor/select-down]
-
-    :shortcut.category/block-selection
-    [:editor/open-edit
-     :editor/select-all-blocks
-     :editor/select-parent
-     :editor/select-block-up
-     :editor/select-block-down
-     :editor/delete-selection]
-
-    :shortcut.category/toggle
-    [:ui/toggle-help
-     :editor/toggle-open-blocks
-     :editor/toggle-undo-redo-mode
-     :editor/toggle-number-list
-     :ui/toggle-wide-mode
-     :ui/toggle-document-mode
-     :ui/toggle-brackets
-     :ui/toggle-theme
-     :ui/toggle-left-sidebar
-     :ui/toggle-right-sidebar
-     :ui/toggle-settings
-     :ui/toggle-contents
-     :ui/cycle-color-off
-     :ui/cycle-color]
-
-    :shortcut.category/whiteboard
-    [:editor/new-whiteboard
-     :whiteboard/select
-     :whiteboard/pan
-     :whiteboard/portal
-     :whiteboard/pencil
-     :whiteboard/highlighter
-     :whiteboard/eraser
-     :whiteboard/connector
-     :whiteboard/text
-     :whiteboard/rectangle
-     :whiteboard/ellipse
-     :whiteboard/reset-zoom
-     :whiteboard/zoom-to-fit
-     :whiteboard/zoom-to-selection
-     :whiteboard/zoom-out
-     :whiteboard/zoom-in
-     :whiteboard/send-backward
-     :whiteboard/send-to-back
-     :whiteboard/bring-forward
-     :whiteboard/bring-to-front
-     :whiteboard/lock
-     :whiteboard/unlock
-     :whiteboard/group
-     :whiteboard/ungroup
-     :whiteboard/toggle-grid
-     :whiteboard/clone-left
-     :whiteboard/clone-right
-     :whiteboard/clone-top
-     :whiteboard/clone-bottom]
-
-    :shortcut.category/others
-    [:pdf/previous-page
-     :pdf/next-page
-     :pdf/close
-     :pdf/find
-     :command/toggle-favorite
-     :command/run
-     :graph/export-as-html
-     :graph/open
-     :graph/remove
-     :graph/add
-     :graph/save
-     :graph/re-index
-     :sidebar/close-top
-     :sidebar/clear
-     :sidebar/open-today-page
-     :search/re-index
-     :editor/insert-youtube-timestamp
-     :editor/open-file-in-default-app
-     :editor/open-file-in-directory
-     :editor/copy-page-url
-     :window/close
-     :auto-complete/prev
-     :auto-complete/next
-     :auto-complete/complete
-     :auto-complete/shift-complete
-     :auto-complete/open-link
-     :date-picker/prev-day
-     :date-picker/next-day
-     :date-picker/prev-week
-     :date-picker/next-week
-     :date-picker/complete
-     :git/commit
-     :dev/show-block-data
-     :dev/show-block-ast
-     :dev/show-page-data
-     :dev/show-page-ast
-     :ui/clear-all-notifications]
-
-    :shortcut.category/plugins
-    []}))
+    {:shortcut.category/basics
+     [:go/search
+      :editor/new-block
+      :editor/new-line
+      :editor/indent
+      :editor/outdent
+      :editor/select-all-blocks
+      :editor/select-parent
+      :go/search-in-page
+      :command-palette/toggle
+      :go/electron-find-in-page
+      :go/electron-jump-to-the-next
+      :go/electron-jump-to-the-previous
+      :editor/undo
+      :editor/redo
+      :editor/copy
+      :editor/copy-text
+      :editor/cut]
+
+     :shortcut.category/formatting
+     [:editor/bold
+      :editor/insert-link
+      :editor/italics
+      :editor/strike-through
+      :editor/highlight]
+
+     :shortcut.category/navigating
+     [:editor/up
+      :editor/down
+      :editor/left
+      :editor/right
+      :editor/collapse-block-children
+      :editor/expand-block-children
+      :editor/toggle-open-blocks
+      :go/backward
+      :go/forward
+      :go/home
+      :go/journals
+      :go/all-pages
+      :go/graph-view
+      :go/all-graphs
+      :go/whiteboards
+      :go/flashcards
+      :go/tomorrow
+      :go/next-journal
+      :go/prev-journal
+      :go/keyboard-shortcuts]
+
+     :shortcut.category/block-editing
+     [:editor/backspace
+      :editor/delete
+      :editor/indent
+      :editor/outdent
+      :editor/new-block
+      :editor/new-line
+      :editor/zoom-in
+      :editor/zoom-out
+      :editor/cycle-todo
+      :editor/follow-link
+      :editor/open-link-in-sidebar
+      :editor/move-block-up
+      :editor/move-block-down
+      :editor/escape-editing]
+
+     :shortcut.category/block-command-editing
+     [:editor/backspace
+      :editor/clear-block
+      :editor/kill-line-before
+      :editor/kill-line-after
+      :editor/beginning-of-block
+      :editor/end-of-block
+      :editor/forward-word
+      :editor/backward-word
+      :editor/forward-kill-word
+      :editor/backward-kill-word
+      :editor/replace-block-reference-at-point
+      :editor/copy-embed
+      :editor/paste-text-in-one-block-at-point
+      :editor/select-up
+      :editor/select-down]
+
+     :shortcut.category/block-selection
+     [:editor/open-edit
+      :editor/select-all-blocks
+      :editor/select-parent
+      :editor/select-block-up
+      :editor/select-block-down
+      :editor/delete-selection]
+
+     :shortcut.category/toggle
+     [:ui/toggle-help
+      :editor/toggle-open-blocks
+      :editor/toggle-undo-redo-mode
+      :editor/toggle-number-list
+      :ui/toggle-wide-mode
+      :ui/toggle-document-mode
+      :ui/toggle-brackets
+      :ui/toggle-theme
+      :ui/toggle-left-sidebar
+      :ui/toggle-right-sidebar
+      :ui/toggle-settings
+      :ui/toggle-contents
+      :ui/cycle-color-off
+      :ui/cycle-color]
+
+     :shortcut.category/whiteboard
+     [:editor/new-whiteboard
+      :whiteboard/select
+      :whiteboard/pan
+      :whiteboard/portal
+      :whiteboard/pencil
+      :whiteboard/highlighter
+      :whiteboard/eraser
+      :whiteboard/connector
+      :whiteboard/text
+      :whiteboard/rectangle
+      :whiteboard/ellipse
+      :whiteboard/reset-zoom
+      :whiteboard/zoom-to-fit
+      :whiteboard/zoom-to-selection
+      :whiteboard/zoom-out
+      :whiteboard/zoom-in
+      :whiteboard/send-backward
+      :whiteboard/send-to-back
+      :whiteboard/bring-forward
+      :whiteboard/bring-to-front
+      :whiteboard/lock
+      :whiteboard/unlock
+      :whiteboard/group
+      :whiteboard/ungroup
+      :whiteboard/toggle-grid
+      :whiteboard/clone-left
+      :whiteboard/clone-right
+      :whiteboard/clone-top
+      :whiteboard/clone-bottom]
+
+     :shortcut.category/others
+     [:pdf/previous-page
+      :pdf/next-page
+      :pdf/close
+      :pdf/find
+      :command/toggle-favorite
+      :command/run
+      :graph/export-as-html
+      :graph/open
+      :graph/remove
+      :graph/add
+      :graph/save
+      :graph/re-index
+      :sidebar/close-top
+      :sidebar/clear
+      :sidebar/open-today-page
+      :search/re-index
+      :editor/insert-youtube-timestamp
+      :editor/open-file-in-default-app
+      :editor/open-file-in-directory
+      :editor/copy-page-url
+      :window/close
+      :auto-complete/prev
+      :auto-complete/next
+      :auto-complete/complete
+      :auto-complete/shift-complete
+      :auto-complete/open-link
+      :date-picker/prev-day
+      :date-picker/next-day
+      :date-picker/prev-week
+      :date-picker/next-week
+      :date-picker/complete
+      :git/commit
+      :dev/show-block-data
+      :dev/show-block-ast
+      :dev/show-page-data
+      :dev/show-page-ast
+      :ui/clear-all-notifications]
+
+     :shortcut.category/plugins
+     []}))
 
 (let [category-maps {::category       (set (keys @*category))
                      ::dicts/category dicts/categories}]
   (assert (= (::category category-maps) (::dicts/category category-maps))
-          (str "Keys for category maps must have an english label "
-               (data/diff (::category category-maps) (::dicts/category category-maps)))))
+    (str "Keys for category maps must have an english label "
+      (data/diff (::category category-maps) (::dicts/category category-maps)))))
 
 (defn get-category-shortcuts
   "Active list of categories for docs purpose"
@@ -948,9 +948,9 @@
      (swap! *shortcut-cmds assoc id (:cmd shortcut-map))
      (let [plugin? (str/starts-with? (str id) ":plugin.")
            category (or (:category shortcut-map)
-                        (if plugin?
-                          :shortcut.category/plugins
-                          :shortcut.category/others))]
+                      (if plugin?
+                        :shortcut.category/plugins
+                        :shortcut.category/others))]
        (swap! *category update category #(conj % id))))))
 
 (defn remove-shortcut!

+ 5 - 3
src/main/frontend/state.cljs

@@ -1386,14 +1386,15 @@ Similar to re-frame subscriptions"
            input (medley/filter-vals
                    #(not (nil? %1))
                    {:modal/id            id
-                    :modal/label         (or label (if center? "ls-modal-align-center" ""))
+                    :modal/label         (if label (name label) "")
+                    :modal/class         (if center? "as-center" "")
                     :modal/payload       payload
                     :modal/show?         (if (boolean? show?) show? true)
                     :modal/panel-content panel-content
                     :modal/close-btn?    close-btn?
                     :modal/close-backdrop? (if (boolean? close-backdrop?) close-backdrop? true)})]
        (swap! state update-in
-              [:modal/subsets (or idx (count modals))]
+         [:modal/subsets (or idx (count modals))]
               merge input)
        (:modal/subsets @state)))))
 
@@ -1429,7 +1430,8 @@ Similar to re-frame subscriptions"
          (<! (async/timeout 100)))
        (swap! state assoc
               :modal/id id
-              :modal/label (or label (if center? "ls-modal-align-center" ""))
+              :modal/label (if label (name label) "")
+              :modal/class (if center? "as-center" "")
               :modal/show? (boolean modal-panel-content)
               :modal/panel-content modal-panel-content
               :modal/payload payload

+ 6 - 2
src/main/frontend/ui.cljs

@@ -647,6 +647,7 @@
         close-backdrop? (state/sub :modal/close-backdrop?)
         show? (state/sub :modal/show?)
         label (state/sub :modal/label)
+        class (state/sub :modal/class)
         close-fn (fn []
                    (state/close-modal!)
                    (state/close-settings!))
@@ -654,7 +655,8 @@
     [:div.ui__modal
      {:style {:z-index (if show? 999 -1)
               :display (if show? "flex" "none")}
-      :label label}
+      :label label
+      :class class}
      (css-transition
       {:in show? :timeout 0}
       (fn [state]
@@ -719,12 +721,14 @@
             close-backdrop? (:modal/close-backdrop? modal)
             show? (:modal/show? modal)
             label (:modal/label modal)
+            class (:modal/class modal)
             close-fn (fn []
                        (state/close-sub-modal! id))
             modal-panel-content (or modal-panel-content (fn [_close] [:div]))]
         [:div.ui__modal.is-sub-modal
          {:style {:z-index (if show? (+ 999 idx) -1)}
-          :label label}
+          :label label
+          :class class}
          (css-transition
           {:in show? :timeout 0}
           (fn [state]

+ 4 - 3
src/main/frontend/ui.css

@@ -23,7 +23,7 @@
       }
 
       &:hover, &.chosen {
-        background-color: or(--lx-gray-05, --ls-menu-hover-color, hsl(var(--accent)));
+        background-color: or(--lx-gray-05, --ls-menu-hover-color, hsl(var(--secondary)));
 
         .has-help small {
           visibility: visible;
@@ -32,7 +32,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--ls-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color, hsl(var(--accent)));
+        color: or(--lx-gray-12, --ls-primary-text-color, hsl(var(--secondary)));
       }
     }
   }
@@ -159,7 +159,8 @@
     }
   }
 
-  &[label="ls-modal-align-center"] {
+  &[label="ls-modal-align-center"],
+  &.as-center{
     top: 0;
 
     .ui__modal-panel {

+ 1 - 53
tailwind.config.js

@@ -2,57 +2,6 @@ const colors = require('tailwindcss/colors')
 const plugin = require('tailwindcss/plugin')
 const radix = require('@radix-ui/colors')
 
-const lx = override => ({
-  'accent-01': 'or(' + override + ', --lx-accent-01, --ls-page-properties-background-color)',
-  'accent-02': 'or(' + override + ', --lx-accent-02, --ls-page-properties-background-color)',
-  'accent-03': 'or(' + override + ', --lx-accent-03, --ls-page-properties-background-color)',
-  'accent-04': 'or(' + override + ', --lx-accent-04, --ls-page-properties-background-color)',
-  'accent-05': 'or(' + override + ', --lx-accent-05, --rx-blue-03)',
-  'accent-06': 'or(' + override + ', --lx-accent-06, --rx-blue-04)',
-  'accent-07': 'or(' + override + ', --lx-accent-07, --rx-blue-05)',
-  'accent-08': 'or(' + override + ', --lx-accent-08, --rx-blue-06)',
-  'accent-09': 'or(' + override + ', --lx-accent-09, --rx-blue-07)',
-  'accent-10': 'or(' + override + ', --lx-accent-10, --rx-blue-08)',
-  'accent-11': 'or(' + override + ', --lx-accent-11, --rx-blue-09)',
-  'accent-12': 'or(' + override + ', --lx-accent-12, --rx-blue-10)',
-  'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)',
-  'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)',
-  'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)',
-  'accent-04-alpha': 'or(' + override + ', --lx-accent-04-alpha, --ls-page-properties-background-color)',
-  'accent-05-alpha': 'or(' + override + ', --lx-accent-05-alpha, --color-blue-900)',
-  'accent-06-alpha': 'or(' + override + ', --lx-accent-06-alpha, --color-blue-800)',
-  'accent-07-alpha': 'or(' + override + ', --lx-accent-07-alpha, --color-blue-700)',
-  'accent-08-alpha': 'or(' + override + ', --lx-accent-08-alpha, --color-blue-600)',
-  'accent-09-alpha': 'or(' + override + ', --lx-accent-09-alpha, --color-blue-500)',
-  'accent-10-alpha': 'or(' + override + ', --lx-accent-10-alpha, --color-blue-400)',
-  'accent-11-alpha': 'or(' + override + ', --lx-accent-11-alpha, --color-blue-200)',
-  'accent-12-alpha': 'or(' + override + ', --lx-accent-12-alpha, --color-blue-50)',
-  'gray-01': 'or(' + override + ', --lx-gray-01, --ls-primary-background-color)',
-  'gray-02': 'or(' + override + ', --lx-gray-02, --ls-secondary-background-color)',
-  'gray-03': 'or(' + override + ', --lx-gray-03, --ls-tertiary-background-color)',
-  'gray-04': 'or(' + override + ', --lx-gray-04, --ls-quaternary-background-color)',
-  'gray-05': 'or(' + override + ', --lx-gray-05, --color-level-4)',
-  'gray-06': 'or(' + override + ', --lx-gray-06, --ls-block-bullet-border-color)',
-  'gray-07': 'or(' + override + ', --lx-gray-07, --ls-border-color)',
-  'gray-08': 'or(' + override + ', --lx-gray-08, --ls-secondary-border-color)',
-  'gray-09': 'or(' + override + ', --lx-gray-09, --color-level-5)',
-  'gray-10': 'or(' + override + ', --lx-gray-10, --ls-title-text-color)',
-  'gray-11': 'or(' + override + ', --lx-gray-11, --ls-primary-text-color)',
-  'gray-12': 'or(' + override + ', --lx-gray-12, --ls-secondary-text-color)',
-  'gray-01-alpha': 'or(' + override + ', --lx-gray-01-alpha, --ls-primary-background-color)',
-  'gray-02-alpha': 'or(' + override + ', --lx-gray-02-alpha, --ls-secondary-background-color)',
-  'gray-03-alpha': 'or(' + override + ', --lx-gray-03-alpha, --ls-tertiary-background-color)',
-  'gray-04-alpha': 'or(' + override + ', --lx-gray-04-alpha, --ls-quaternary-background-color)',
-  'gray-05-alpha': 'or(' + override + ', --lx-gray-05-alpha, --color-level-4)',
-  'gray-06-alpha': 'or(' + override + ', --lx-gray-06-alpha, --ls-block-bullet-color)',
-  'gray-07-alpha': 'or(' + override + ', --lx-gray-07-alpha, --ls-border-color)',
-  'gray-08-alpha': 'or(' + override + ', --lx-gray-08-alpha, --ls-secondary-border-color)',
-  'gray-09-alpha': 'or(' + override + ', --lx-gray-09-alpha, --color-level-5)',
-  'gray-10-alpha': 'or(' + override + ', --lx-gray-10-alpha, --color-level-6)',
-  'gray-11-alpha': 'or(' + override + ', --lx-gray-11-alpha, --ls-primary-text-color)',
-  'gray-12-alpha': 'or(' + override + ', --lx-gray-12-alpha, --ls-secondary-text-color)',
-})
-
 const accent = {
   'DEFAULT': 'hsl(var(--accent))',
   'base': 'hsl(var(--accent))',
@@ -194,8 +143,7 @@ module.exports = {
     require('@tailwindcss/line-clamp'),
     require('tailwind-capitalize-first-letter'),
     require('tailwindcss-animate'),
-    exposeColorsToCssVars,
-    withOverride,
+    exposeColorsToCssVars
   ],
   theme: {
     extend: {