Merge pull request #10897 from logseq/enhance/refacotr-ui-x-menu

Enhance(ui): refactoring dropdown/context menu  with the new components

deps/shui/src/logseq/shui/core.cljs

@@ -12,11 +12,9 @@
 
 ;; shortcut
 (def shortcut shui.shortcut.v1/root)
-(def shortcut-v1 shui.shortcut.v1/root)
 
 ;; icon
 (def icon shui.icon.v2/root)
-(def icon-v2 shui.icon.v2/root)
 
 ;; list-item
 (def list-item shui.list-item.v1/root)

deps/shui/src/logseq/shui/list_item/v1.cljs

@@ -90,11 +90,11 @@
      [highlighted on-highlight-dep])
     [:div (merge
            {:style {:opacity (if highlighted 1 0.8)}
-            :class (cond-> "flex flex-col grayscale"
-                     highlighted (str " !grayscale-0 !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha")
-                     hoverable (str " transition-all duration-50 ease-in !opacity-75 hover:!opacity-100 hover:grayscale-0 hover:cursor-pointer hover:bg-gradient-to-r hover:from-gray-03-alpha hover:to-gray-01-alpha from-0% to-100%")
+            :class (cond-> "flex flex-col transition-opacity"
+                     highlighted (str " !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha")
+                     hoverable (str " transition-all duration-50 ease-in !opacity-75 hover:!opacity-100 hover:cursor-pointer hover:bg-gradient-to-r hover:from-gray-03-alpha hover:to-gray-01-alpha from-0% to-100%")
                      (and hoverable rounded) (str " !rounded-lg")
-                     (not compact) (str  " py-4 px-6 gap-1")
+                     (not compact) (str " py-4 px-6 gap-1")
                      compact (str " py-1.5 px-3 gap-0.5")
                      (not highlighted) (str " "))
             :ref ref
@@ -143,5 +143,5 @@
            [:span.text-gray-11 (to-string value)])])
       (when shortcut
         [:div {:class "flex gap-1"
-               :style {:opacity (if (or highlighted hover?) 1 0.5)}}
+               :style {:opacity (if (or highlighted hover?) 1 0.9)}}
          (shortcut/root shortcut)])]]))

deps/shui/src/logseq/shui/shortcut/v1.cljs

@@ -62,31 +62,36 @@
                            %)))))))
 
 (rum/defc part
-  [ks size]
-  (let [tiles (map print-shortcut-key ks)]
-    (ui/button {:variant     :default
-                :class       "bg-gray-03 text-gray-12 px-1.5 py-0 leading-4 h-5 hover:bg-gray-04 active:bg-gray-03 hover:text-gray-11"
-                :interactive false
-                :size        size}
+  [ks size {:keys [interactive?]}]
+  (let [tiles (map print-shortcut-key ks)
+        interactive? (true? interactive?)]
+    (ui/button {:variant (if interactive? :default :text)
+                :class   (str "bg-gray-03 text-gray-10 px-1.5 py-0 leading-4 h-5 rounded font-normal "
+                           (if interactive?
+                             "hover:bg-gray-04 active:bg-gray-03 hover:text-gray-12"
+                             "bg-transparent cursor-default active:bg-gray-03 hover:text-gray-11 opacity-80"))
+                :size    size}
       (for [[index tile] (map-indexed vector tiles)]
         [:<>
          (when (< 0 index)
-           [:div.ui__button__tile-separator])
-         [:div.ui__button__tile tile]]))))
+           [:span.ui__button__tile-separator])
+         [:span.ui__button__tile tile]]))))
 
 (rum/defc root
-  [shortcut & {:keys [size theme]
-                       :or   {size  :xs
-                              theme :gray}}]
+  [shortcut & {:keys [size theme interactive?]
+               :or   {size  :xs
+                      interactive? true
+                      theme :gray}}]
   (when (seq shortcut)
     (let [shortcuts (if (coll? shortcut)
                       [shortcut]
-                      (parse-shortcuts shortcut))]
+                      (parse-shortcuts shortcut))
+          opts {:interactive? interactive?}]
       (for [[index binding] (map-indexed vector shortcuts)]
         [:<>
          (when (< 0 index)
            [:div.text-gray-11.text-sm "|"])
          (if (coll? (first binding))   ; + included
            (for [ks binding]
-             (part ks size))
-           (part binding size))]))))
+             (part ks size opts))
+           (part binding size opts))]))))

packages/ui/@/components/ui/context-menu.tsx

@@ -27,7 +27,9 @@ const ContextMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       'ui__context-menu-sub-trigger',
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm ' +
+      'outline-none focus:bg-accent focus:text-accent-foreground ' +
+      'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -47,7 +49,10 @@ const ContextMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       'ui__context-menu-sub-content',
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in' +
+      ' data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95' +
+      ' data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2' +
+      ' data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -64,7 +69,12 @@ const ContextMenuContent = React.forwardRef<
       ref={ref}
       className={cn(
         'ui__context-menu-content',
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 ' +
+        'text-popover-foreground shadow-md animate-in fade-in-80 ' +
+        'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 ' +
+        'data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 ' +
+        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -82,7 +92,10 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 ' +
+      'text-popover-foreground/75 hover:text-popover-foreground/100 py-1.5 text-sm ' +
+      'outline-none focus:bg-accent focus:text-accent-foreground ' +
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -98,7 +111,10 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm ' +
+      'text-popover-foreground/75 hover:text-popover-foreground/100 ' +
+      'outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none ' +
+      'data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -122,7 +138,10 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 ' +
+      'text-popover-foreground/75 hover:text-popover-foreground/100 ' +
+      'pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground ' +
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -174,7 +193,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
+        'ml-auto text-xs text-muted-foreground',
         className
       )}
       {...props}

packages/ui/@/components/ui/dropdown-menu.tsx

@@ -178,7 +178,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      className={cn('ml-auto text-xs opacity-60', className)}
       {...props}
     />
   )

packages/ui/src/colors.css

@@ -12,6 +12,45 @@ html {
     --lx-accent-10: var(--rx-logseq-10);
     --lx-accent-11: var(--rx-logseq-11);
     --lx-accent-12: var(--rx-logseq-12);
+
+    &[data-theme=light] {
+      --primary: 200 97% 37%;
+      --primary-foreground: 255 92% 100%;
+      --accent: 200 97% 37%;
+      --accent-foreground: 255 92% 100%;
+      --ring: 200 97% 37%;
+
+      --lx-gray-01: var(--rx-gray-01);
+      --lx-gray-02: var(--rx-gray-02);
+      --lx-gray-03: var(--rx-gray-03);
+      --lx-gray-04: var(--rx-gray-04);
+      --lx-gray-05: var(--rx-gray-05);
+      --lx-gray-06: var(--rx-gray-06);
+      --lx-gray-07: var(--rx-gray-07);
+      --lx-gray-08: var(--rx-gray-08);
+      --lx-gray-09: var(--rx-gray-09);
+      --lx-gray-10: var(--rx-gray-10);
+      --lx-gray-11: var(--rx-gray-11);
+      --lx-gray-12: var(--rx-gray-12);
+    }
+
+    &[data-theme=dark] {
+      --background: 192 100% 11%;
+      --foreground: 0 0% 95%;
+      --accent: 192 80% 10%;
+      --accent-foreground: 255 92% 100%;
+      --primary: 200 97% 37%;
+      --primary-foreground: 255 92% 100%;
+      --ring: 200 97% 37%;
+      --secondary: 203 50% 20%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 192 100% 13%;
+      --border: 192 100% 14%;
+      --card: 192 100% 10%;
+      --card-foreground: 0 0% 95%;
+      --popover: 192 100% 11%;
+      --input: 203 35% 25%;
+    }
   }
 
   &[data-color=tomato] {
@@ -80,8 +119,8 @@ html {
       --ls-link-text-color: var(--rx-tomato-11);
       --ls-link-text-hover-color: var(--rx-tomato-12);
       --ls-block-ref-link-text-color: var(--rx-tomato-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-tomato-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -104,6 +143,7 @@ html {
     body, .dark-theme, .light-theme {
       --accent: 358 75.0% 59.0%;
       --primary: 358 75.0% 59.0%;
+      --primary-foreground: 190 43% 97%;
       --ring: 359 69.5% 74.3%;
       --accent-foreground: 190 43% 97%;
       --primary-accent-foreground: 190 43% 97%;
@@ -165,8 +205,8 @@ html {
       --ls-link-text-color: var(--rx-red-11);
       --ls-link-text-hover-color: var(--rx-red-12);
       --ls-block-ref-link-text-color: var(--rx-red-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-red-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -250,8 +290,8 @@ html {
       --ls-link-text-color: var(--rx-blue-11);
       --ls-link-text-hover-color: var(--rx-blue-12);
       --ls-block-ref-link-text-color: var(--rx-blue-09);
-      --ls-secondary-text-color: var(--rx-slate-12);
-      --ls-primary-text-color: var(--rx-slate-11);
+      --ls-secondary-text-color: var(--rx-slate-11);
+      --ls-primary-text-color: var(--rx-slate-12);
       --ls-border-color: var(--rx-slate-05);
       --ls-secondary-border-color: var(--rx-blue-05);
       --ls-page-checkbox-color: var(--rx-slate-07);
@@ -274,6 +314,7 @@ html {
     body, .dark-theme, .light-theme {
       --accent: 336 80.0% 57.8%;
       --primary: 336 80.0% 57.8%;
+      --primary-foreground: 190 43% 97%;
       --ring: 336 62.3% 72.9%;
       --accent-foreground: 190 43% 97%;
       --primary-accent-foreground: 190 43% 97%;
@@ -335,8 +376,8 @@ html {
       --ls-link-text-color: var(--rx-crimson-11);
       --ls-link-text-hover-color: var(--rx-crimson-12);
       --ls-block-ref-link-text-color: var(--rx-crimson-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-crimson-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -419,8 +460,8 @@ html {
       --ls-link-text-color: var(--rx-pink-11);
       --ls-link-text-hover-color: var(--rx-pink-12);
       --ls-block-ref-link-text-color: var(--rx-pink-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-pink-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -503,8 +544,8 @@ html {
       --ls-link-text-color: var(--rx-plum-11);
       --ls-link-text-hover-color: var(--rx-plum-12);
       --ls-block-ref-link-text-color: var(--rx-plum-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-plum-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -587,8 +628,8 @@ html {
       --ls-link-text-color: var(--rx-purple-11);
       --ls-link-text-hover-color: var(--rx-purple-12);
       --ls-block-ref-link-text-color: var(--rx-purple-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-purple-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -671,8 +712,8 @@ html {
       --ls-link-text-color: var(--rx-violet-11);
       --ls-link-text-hover-color: var(--rx-violet-12);
       --ls-block-ref-link-text-color: var(--rx-violet-09);
-      --ls-secondary-text-color: var(--rx-mauve-12);
-      --ls-primary-text-color: var(--rx-mauve-11);
+      --ls-secondary-text-color: var(--rx-mauve-11);
+      --ls-primary-text-color: var(--rx-mauve-12);
       --ls-border-color: var(--rx-mauve-05);
       --ls-secondary-border-color: var(--rx-violet-05);
       --ls-page-checkbox-color: var(--rx-mauve-07);
@@ -755,8 +796,8 @@ html {
       --ls-link-text-color: var(--rx-indigo-11);
       --ls-link-text-hover-color: var(--rx-indigo-12);
       --ls-block-ref-link-text-color: var(--rx-indigo-09);
-      --ls-secondary-text-color: var(--rx-slate-12);
-      --ls-primary-text-color: var(--rx-slate-11);
+      --ls-secondary-text-color: var(--rx-slate-11);
+      --ls-primary-text-color: var(--rx-slate-12);
       --ls-border-color: var(--rx-slate-05);
       --ls-secondary-border-color: var(--rx-indigo-05);
       --ls-page-checkbox-color: var(--rx-slate-07);
@@ -841,8 +882,8 @@ html {
       --ls-link-text-color: var(--rx-cyan-11);
       --ls-link-text-hover-color: var(--rx-cyan-12);
       --ls-block-ref-link-text-color: var(--rx-cyan-09);
-      --ls-secondary-text-color: var(--rx-slate-12);
-      --ls-primary-text-color: var(--rx-slate-11);
+      --ls-secondary-text-color: var(--rx-slate-11);
+      --ls-primary-text-color: var(--rx-slate-12);
       --ls-border-color: var(--rx-slate-05);
       --ls-secondary-border-color: var(--rx-cyan-05);
       --ls-page-checkbox-color: var(--rx-slate-07);
@@ -925,8 +966,8 @@ html {
       --ls-link-text-color: var(--rx-teal-11);
       --ls-link-text-hover-color: var(--rx-teal-12);
       --ls-block-ref-link-text-color: var(--rx-teal-09);
-      --ls-secondary-text-color: var(--rx-sage-12);
-      --ls-primary-text-color: var(--rx-sage-11);
+      --ls-secondary-text-color: var(--rx-sage-11);
+      --ls-primary-text-color: var(--rx-sage-12);
       --ls-border-color: var(--rx-sage-05);
       --ls-secondary-border-color: var(--rx-teal-05);
       --ls-page-checkbox-color: var(--rx-sage-07);
@@ -1010,8 +1051,8 @@ html {
       --ls-link-text-color: var(--rx-green-11);
       --ls-link-text-hover-color: var(--rx-green-12);
       --ls-block-ref-link-text-color: var(--rx-green-09);
-      --ls-secondary-text-color: var(--rx-sage-12);
-      --ls-primary-text-color: var(--rx-sage-11);
+      --ls-secondary-text-color: var(--rx-sage-11);
+      --ls-primary-text-color: var(--rx-sage-12);
       --ls-border-color: var(--rx-sage-05);
       --ls-secondary-border-color: var(--rx-green-05);
       --ls-page-checkbox-color: var(--rx-sage-07);
@@ -1094,8 +1135,8 @@ html {
       --ls-link-text-color: var(--rx-grass-11);
       --ls-link-text-hover-color: var(--rx-grass-12);
       --ls-block-ref-link-text-color: var(--rx-grass-09);
-      --ls-secondary-text-color: var(--rx-olive-12);
-      --ls-primary-text-color: var(--rx-olive-11);
+      --ls-secondary-text-color: var(--rx-olive-11);
+      --ls-primary-text-color: var(--rx-olive-12);
       --ls-border-color: var(--rx-olive-05);
       --ls-secondary-border-color: var(--rx-grass-05);
       --ls-page-checkbox-color: var(--rx-olive-07);
@@ -1178,8 +1219,8 @@ html {
       --ls-link-text-color: var(--rx-orange-11);
       --ls-link-text-hover-color: var(--rx-orange-12);
       --ls-block-ref-link-text-color: var(--rx-orange-09);
-      --ls-secondary-text-color: var(--rx-sand-12);
-      --ls-primary-text-color: var(--rx-sand-11);
+      --ls-secondary-text-color: var(--rx-sand-11);
+      --ls-primary-text-color: var(--rx-sand-12);
       --ls-border-color: var(--rx-sand-05);
       --ls-secondary-border-color: var(--rx-orange-05);
       --ls-page-checkbox-color: var(--rx-sand-07);
@@ -1263,8 +1304,8 @@ html {
       --ls-link-text-color: var(--rx-brown-11);
       --ls-link-text-hover-color: var(--rx-brown-12);
       --ls-block-ref-link-text-color: var(--rx-brown-09);
-      --ls-secondary-text-color: var(--rx-sand-12);
-      --ls-primary-text-color: var(--rx-sand-11);
+      --ls-secondary-text-color: var(--rx-sand-11);
+      --ls-primary-text-color: var(--rx-sand-12);
       --ls-border-color: var(--rx-sand-05);
       --ls-secondary-border-color: var(--rx-brown-05);
       --ls-page-checkbox-color: var(--rx-sand-07);

packages/ui/src/index.css

@@ -20,7 +20,7 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: 0 0% 52.3%;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
@@ -28,7 +28,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
+    --border: 300 1% 92%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
 
@@ -52,7 +52,7 @@
     --secondary-foreground: 210 40% 98%;
 
     --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted-foreground: 0 0% 49.4%;
 
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;

packages/ui/src/vars-classic.css

@@ -0,0 +1,171 @@
+:root {
+  --ls-tag-text-opacity: 0.8;
+  --ls-tag-text-hover-opacity: 1;
+  --ls-page-text-size: 1em;
+  --ls-page-title-size: 36px;
+  --ls-main-content-max-width: 810px;
+  --ls-main-content-max-width-wide: 1280px;
+  --ls-font-family: Inter;
+  --ls-scrollbar-width: 6px;
+  --ls-border-radius-low: 4px;
+  --ls-border-radius-medium: 8px;
+  --ls-headbar-height: 3rem;
+  --ls-headbar-inner-top-padding: 0px;
+  --ls-left-sidebar-width: 246px;
+  --ls-left-sidebar-sm-width: 74vw;
+  --ls-left-sidebar-nav-btn-size: 38px;
+  --ls-native-kb-height: 0px;
+
+  --ls-highlight-color-gray: var(--rx-gray-05);
+  --ls-highlight-color-red: var(--rx-red-05);
+  --ls-highlight-color-yellow: var(--rx-yellow-05);
+  --ls-highlight-color-green: var(--rx-green-05);
+  --ls-highlight-color-blue: var(--rx-blue-05);
+  --ls-highlight-color-purple: var(--rx-purple-05);
+  --ls-highlight-color-pink: var(--rx-pink-05);
+}
+
+.white-theme,
+.light-theme,
+html[data-theme='light'] {
+  --color-level-1: var(--rx-gray-02);
+  --color-level-2: var(--rx-gray-03);
+  --color-level-3: var(--rx-gray-04);
+  --color-level-4: var(--rx-gray-05);
+  --color-level-5: var(--rx-gray-06);
+  --color-level-6: var(--rx-gray-07);
+}
+
+html[data-theme=light][data-color=logseq] {
+  --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-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));
+}
+
+html[data-theme=dark][data-color=logseq] {
+  --ls-primary-background-color: #002b36;
+  --ls-secondary-background-color: #023643;
+  --ls-tertiary-background-color: #08404f;
+  --ls-quaternary-background-color: #094b5a;
+  --ls-table-tr-even-background-color: #03333f;
+  --ls-active-primary-color: #8ec2c2;
+  --ls-active-secondary-color: #d0e8e8;
+  --ls-block-properties-background-color: #06323e;
+  --ls-page-properties-background-color: #06323e;
+  --ls-block-ref-link-text-color: #1a6376;
+  --ls-border-color: #0e5263;
+  --ls-secondary-border-color: #126277;
+  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
+  --ls-guideline-color: #0b4a5a;
+  --ls-menu-hover-color: var(--ls-secondary-background-color);
+  --ls-primary-text-color: #a4b5b6;
+  --ls-secondary-text-color: #dfdfdf;
+  --ls-title-text-color: #93a1a1;
+  --ls-link-text-color: rgb(138, 187, 187);
+  --ls-link-text-hover-color: var(--ls-active-secondary-color);
+  --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-text-color);
+  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-slide-background-color: var(--ls-primary-background-color);
+  --ls-block-bullet-border-color: #0f4958;
+  --ls-block-bullet-color: #608e91;
+  --ls-block-highlight-color: #0a3d4b;
+  --ls-selection-background-color: #338fff;
+  --ls-selection-text-color: #fff;
+  --ls-page-checkbox-color: #6093a0;
+  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
+  --ls-page-blockquote-color: var(--ls-primary-text-color);
+  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
+  --ls-page-blockquote-border-color: var(--ls-border-color);
+  --ls-page-mark-color: #262626;
+  --ls-page-mark-bg-color: #fef3ac;
+  --ls-page-inline-code-color: var(--ls-primary-text-color);
+  --ls-page-inline-code-bg-color: #01222a;
+  --ls-scrollbar-foreground-color: #11505f;
+  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
+  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
+  --ls-cloze-text-color: #8fbc8f;
+  --ls-icon-color: var(--ls-link-text-color);
+  --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: #01303b;
+  --ls-pie-fg-color: #0b5869;
+
+  --ls-error-text-color: var(--color-red-400);
+  --ls-error-background-color: var(--color-red-900);
+  --ls-warning-text-color: var(--color-yellow-400);
+  --ls-warning-background-color: var(--color-yellow-900);
+  --ls-success-text-color: var(--color-green-100);
+  --ls-success-background-color: var(--color-green-900);
+  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
+  --ls-header-button-background: #dee4ea;
+  --ls-left-sidebar-text-color: var(--lx-gray-11);
+  --ls-button-background-hsl: 200 98% 35%;
+  --ls-button-background: hsl(var(--ls-button-background-hsl));
+  --color-level-1: var(--ls-secondary-background-color);
+  --color-level-2: var(--ls-tertiary-background-color);
+  --color-level-3: var(--ls-quaternary-background-color);
+  --color-level-4: #195d6c;
+  --color-level-5: #266c7d;
+  --color-level-6: #3a7e8e;
+}

packages/ui/tailwind.config.js

@@ -65,11 +65,11 @@ module.exports = {
           foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: 'var(--lx-gray-04, hsl(var(--accent)))',
           foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: 'var(--lx-gray-03, hsl(var(--popover)))',
           foreground: 'hsl(var(--popover-foreground))',
         },
         card: {

resources/css/codemirror.lsradix.css

@@ -35,21 +35,17 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
   rendering-intent: auto;
 }
 .cm-s-lsradix.cm-s-dark {
-  /* color: or(--lx-gray-09, #839496); */
-  color: or(--lx-gray-11, #839496);
-  background-color: or(--lx-gray-01, #002b36);
-  text-shadow: #002b36 0 1px;
+  background-color: var(--lx-gray-01, hsl(var(--secondary)/.7));
+  color: var(--lx-gray-10, hsl(var(--secondary-foreground)));
 }
 
 .dark .cm-s-lsradix.cm-s-dark {
-  background-color: or(--lx-gray-02, #002b36);
+  background-color: var(--lx-gray-02, hsl(var(--secondary)/.7));
 }
 
 .cm-s-lsradix.cm-s-light {
-  /* background-color: or(--lx-gray-12, #fdf6e3); */
-  background-color: or(--lx-gray-02, #fdf6e3);
-  color: or(--lx-gray-10, #657b83);
-  text-shadow: #eee8d5 0 1px;
+  background-color: var(--lx-gray-02, hsl(var(--secondary)/.7));
+  color: var(--lx-gray-10, hsl(var(--secondary-foreground)));
 }
 
 .cm-s-lsradix .CodeMirror-widget {
@@ -124,23 +120,20 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
 
 /* Dark */
 .cm-s-lsradix.cm-s-dark .CodeMirror-gutters {
-  background-color: or(--lx-gray-01, #073642);
+  background-color: var(--lx-gray-03, hsl(var(--secondary)));
 }
 
 .cm-s-lsradix.cm-s-dark .CodeMirror-linenumber {
-  color: or(--lx-gray-09, #586e75);
-  /* color: or(--lx-gray-03, #586e75); */
-  text-shadow: #021014 0 -1px;
+  color: var(--lx-gray-09, #586e75);
 }
 
 /* Light */
 .cm-s-lsradix.cm-s-light .CodeMirror-gutters {
-  background-color: or(--lx-gray-03, #eee8d5);
-  /* background-color: or(--lx-gray-11, #eee8d5); */
+  background-color: var(--lx-gray-03, hsl(var(--secondary)));
 }
 
 .cm-s-lsradix.cm-s-light .CodeMirror-linenumber {
-  color: or(--lx-gray-09, #839496);
+  color: var(--lx-gray-09, #839496);
 }
 
 /* Common */

resources/css/shui.css

@@ -2,15 +2,60 @@ html * {
   border-color: hsl(var(--border));
 }
 
+html[data-theme=light] {
+  --accent: var(--rx-gray-12-hsl);
+  --accent-foreground: var(--rx-gray-02-hsl);
+  --input: var(--rx-gray-03-hsl);
+  --secondary: 240 4.8% 95.9%;
+}
+
+html[data-theme=dark] {
+  --accent: var(--rx-gray-12-hsl);
+  --accent-foreground: var(--rx-gray-02-hsl);
+  --primary-foreground: 0 0% 22%;
+  --background: 0 0% 11%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 11%;
+  --card-foreground: 0 0% 95%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 98%;
+  --border: 0 0% 16%;
+  --muted: 0 0% 15%;
+  --popover: 0 0% 7%;
+  --popover-foreground: 0 0 95%;
+  --input: 0 0% 25%;
+}
+
 html {
   .ui__dropdown-menu-content,
   .ui__context-menu-content,
   .ui__select-content {
     --accent: var(--rx-gray-04-hsl);
     --accent-foreground: var(--rx-gray-12-hsl);
+
+    --muted: var(--rx-gray-05-hsl);
+  }
+
+  .ui__calendar {
+    --accent: var(--rx-gray-04-hsl);
+    --accent-foreground: var(--rx-gray-12-hsl);
   }
 
   &:not([data-color=logseq]) {
+    .ui__dropdown-menu-item,
+    div[data-radix-popper-content-wrapper] div[role=menuitem] {
+      &:focus, &:hover {
+        background-color: var(--lx-gray-04, hsl(var(--accent)));
+      }
+    }
+
+
+    div[data-radix-popper-content-wrapper] div[role=menu],
+    .menu-links-wrapper,
+    .menu-links-outer,
+    .absolute-modal[data-modal-name] {
+      background-color: var(--lx-popover-bg, var(--lx-gray-01, hsl(var(--popover))));
+    }
   }
 
   &[data-color=logseq] {
@@ -23,24 +68,48 @@ html {
     }
   }
 
-  .ui__calendar {
-    --accent: var(--rx-gray-04-hsl);
-    --accent-foreground: var(--rx-gray-12-hsl);
+  &[data-color=none] {
+    --ls-block-bullet-color: var(--rx-gray-08);
+    --ls-block-bullet-active-color: var(--rx-gray-12);
+
+    ::selection {
+      @apply bg-primary/20;
+    }
+
+    #ui__ac-inner {
+    }
+
+    .cp__cmdk {
+      --lx-gray-07: var(--rx-gray-07);
+    }
+
+    .ui__toggle {
+      &-background-off {
+        @apply bg-gray-08;
+
+        .switcher {
+          @apply bg-gray-10;
+        }
+      }
+
+      &-background-on {
+        .switcher {
+          @apply bg-gray-03;
+        }
+      }
+    }
+
+    .tl-container {
+      --ls-primary-background-color: hsl(var(--background));
+      --ls-secondary-background-color: var(--rx-gray-01);
+      --ls-tertiary-background-color: var(--rx-gray-03);
+      --ls-quaternary-background-color: var(--rx-gray-05);
+    }
   }
 }
 
 html[data-theme=light] {
-  --accent: var(--rx-gray-04-hsl);
-  --accent-foreground: var(--rx-gray-12-hsl);
-  --input: var(--rx-gray-03-hsl);
-
   &[data-color=logseq] {
-    --primary: 200 97% 37%;
-    --primary-foreground: 255 92% 100%;
-    --accent: 200 97% 37%;
-    --accent-foreground: 255 92% 100%;
-    --ring: 200 97% 37%;
-
     .references-blocks-item {
       --lx-bg-override: var(--rx-gray-03-alpha);
     }
@@ -52,35 +121,34 @@ html[data-theme=light] {
 }
 
 html[data-theme=dark] {
-  --primary-foreground: 255 92% 100%;
-  --background: 0 0% 11%;
-  --foreground: 0 0% 95%;
-  --card: 0 0% 11%;
-  --card-foreground: 0 0% 95%;
-  --secondary: 0 0% 20%;
-  --secondary-foreground: 0 0% 98%;
-  --border: 0 0% 16%;
-  --muted: 0 0% 15%;
-  --popover: 0 0% 7%;
-  --popover-foreground: 0 0 95%;
-  --input: 0 0% 25%;
+  background-color: #161616;
 
   &[data-color=logseq] {
-    --background: 192 100% 11%;
-    --foreground: 0 0% 95%;
-    --accent: 192 80% 10%;
-    --accent-foreground: 255 92% 100%;
-    --primary: 200 97% 37%;
-    --primary-foreground: 255 92% 100%;
-    --ring: 200 97% 37%;
-    --secondary: 203 50% 20%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 192 100% 13%;
-    --border: 192 100% 16%;
-    --card: 192 100% 10%;
-    --card-foreground: 0 0% 95%;
-    --popover: 192 100% 11%;
-    --input: 203 35% 25%;
+    @apply bg-[#002b36];
+
+    .ui__modal-panel {
+      @apply border-accent-01;
+    }
+
+    .tippy-tooltip {
+      @apply border-accent-02;
+    }
+
+    .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 {
@@ -92,6 +160,17 @@ html[data-theme=dark] {
     .ui__context-menu-content,
     .ui__select-content {
       --accent: 190 100% 15%;
+      --muted: 192 100% 13%;
+    }
+
+    .ui__button {
+      &.as-ghost {
+        @apply hover:bg-accent-01;
+      }
+    }
+
+    .menu-separator {
+      @apply opacity-20;
     }
 
     .ui__calendar {
@@ -101,6 +180,30 @@ html[data-theme=dark] {
     .rc-datepicker {
       --accent: 200 97% 37%;
     }
+
+    .cp__cmdk {
+      .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 {
+      &:hover {
+        @apply bg-accent-02;
+      }
+    }
+
+    .cp__header {
+      > .r > div:not(.ui__dropdown-trigger) a.button, button.button {
+        @apply opacity-60 hover:opacity-90;
+      }
+    }
   }
 }
 

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

@@ -1,26 +1,3 @@
-:root {
-  --ls-tag-text-opacity: 0.8;
-  --ls-tag-text-hover-opacity: 1;
-  --ls-page-text-size: 1em;
-  --ls-page-title-size: 36px;
-  --ls-main-content-max-width: 810px;
-  --ls-main-content-max-width-wide: 1280px;
-  --ls-font-family: Inter;
-  --ls-scrollbar-width: 6px;
-  --ls-border-radius-low: 4px;
-  --ls-border-radius-medium: 8px;
-  --ls-headbar-height: 3rem;
-  --ls-headbar-inner-top-padding: 0px;
-  --ls-left-sidebar-width: 246px;
-  --ls-left-sidebar-sm-width: 74vw;
-  --ls-left-sidebar-nav-btn-size: 38px;
-  --ls-native-kb-height: 0px;
-  --ls-error-color: var(--color-red-500);
-  --ls-warning-color: var(--color-orange-500);
-  --ls-success-color: var(--color-green-500);
-  --ls-highlight-color-default: var(--ls-secondary-background-color);
-}
-
 @media (prefers-color-scheme: dark) {
   html {
     background-color: #002b36;
@@ -37,164 +14,6 @@
   }
 }
 
-.dark-theme,
-html[data-theme='dark'] {
-  --ls-primary-background-color: #002b36;
-  --ls-secondary-background-color: #023643;
-  --ls-tertiary-background-color: #08404f;
-  --ls-quaternary-background-color: #094b5a;
-  --ls-table-tr-even-background-color: #03333f;
-  --ls-active-primary-color: #8ec2c2;
-  --ls-active-secondary-color: #d0e8e8;
-  --ls-block-properties-background-color: #06323e;
-  --ls-page-properties-background-color: #06323e;
-  --ls-block-ref-link-text-color: #1a6376;
-  --ls-border-color: #0e5263;
-  --ls-secondary-border-color: #126277;
-  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
-  --ls-guideline-color: #0b4a5a;
-  --ls-menu-hover-color: var(--ls-secondary-background-color);
-  --ls-primary-text-color: #a4b5b6;
-  --ls-secondary-text-color: #dfdfdf;
-  --ls-title-text-color: #93a1a1;
-  --ls-link-text-color: rgb(138, 187, 187);
-  --ls-link-text-hover-color: var(--ls-active-secondary-color);
-  --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-text-color);
-  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-slide-background-color: var(--ls-primary-background-color);
-  --ls-block-bullet-border-color: #0f4958;
-  --ls-block-bullet-color: #608e91;
-  --ls-block-highlight-color: #0a3d4b;
-  --ls-selection-background-color: #338fff;
-  --ls-selection-text-color: #fff;
-  --ls-page-checkbox-color: #6093a0;
-  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
-  --ls-page-blockquote-color: var(--ls-primary-text-color);
-  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
-  --ls-page-blockquote-border-color: var(--ls-border-color);
-  --ls-page-mark-color: #262626;
-  --ls-page-mark-bg-color: #fef3ac;
-  --ls-page-inline-code-color: var(--ls-primary-text-color);
-  --ls-page-inline-code-bg-color: #01222a;
-  --ls-scrollbar-foreground-color: #11505f;
-  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
-  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
-  --ls-cloze-text-color: #8fbc8f;
-  --ls-icon-color: var(--ls-link-text-color);
-  --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: #01303b;
-  --ls-pie-fg-color: #0b5869;
-  --ls-highlight-color-gray: var(--color-gray-900);
-  --ls-highlight-color-red: var(--color-red-900);
-  --ls-highlight-color-yellow: var(--color-yellow-900);
-  --ls-highlight-color-green: var(--color-green-900);
-  --ls-highlight-color-blue: var(--color-blue-900);
-  --ls-highlight-color-purple: var(--color-purple-900);
-  --ls-highlight-color-pink: var(--color-pink-900);
-  --ls-error-text-color: var(--color-red-400);
-  --ls-error-background-color: var(--color-red-900);
-  --ls-warning-text-color: var(--color-yellow-400);
-  --ls-warning-background-color: var(--color-yellow-900);
-  --ls-success-text-color: var(--color-green-100);
-  --ls-success-background-color: var(--color-green-900);
-  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
-  --ls-header-button-background: #dee4ea;
-  --ls-left-sidebar-text-color: var(--lx-gray-11);
-  --ls-button-background-hsl: 200 98% 35%;
-  --ls-button-background: hsl(var(--ls-button-background-hsl));
-  --color-level-1: var(--ls-secondary-background-color);
-  --color-level-2: var(--ls-tertiary-background-color);
-  --color-level-3: var(--ls-quaternary-background-color);
-  --color-level-4: #195d6c;
-  --color-level-5: #266c7d;
-  --color-level-6: #3a7e8e;
-}
-
-/* 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-600);
-  --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(--ls-secondary-background-color);
-  --color-level-2: var(--ls-tertiary-background-color);
-  --color-level-3: var(--ls-quaternary-background-color);
-  --color-level-4: #d0e6fa;
-  --color-level-5: #bbdaf6;
-  --color-level-6: #a7cef1;
-}
-
 html:not(.is-native-android) {
   font-family: var(--ls-font-family), sans-serif, system-ui, -apple-system,
   BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
@@ -207,9 +26,9 @@ html {
 }
 
 body {
-  color: or(--ls-default-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: var(--lx-gray-12, var(--ls-primary-text-color, hsl(var(--foreground))));
+  background-color: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background))));
   line-height: 1.5;
-  background-color: transparent;
   min-height: 100%;
   word-break: break-word; /* compatible for overflow-wrap: anywhere */
 }
@@ -264,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 {
@@ -296,21 +115,13 @@ body {
     text-indent: 0;
     padding: 8px 20px;
     border-left: 4px solid;
-    border-left-color: var(--ls-page-blockquote-border-color, #d3d3d3);
-    background-color: var(--ls-page-blockquote-bg-color, #f7f7f7);
+    border-left-color: var(--ls-page-blockquote-border-color, hsl(var(--primary)/.4));
+    background-color: var(--ls-page-blockquote-bg-color, hsl(var(--secondary)));
+    color: var(--ls-page-blockquote-color, hsl(var(--secondary-foreground)));
     margin: 1rem 0;
-    color: var(--ls-page-blockquote-color, #24292e);
     font-size: 1rem;
   }
 
-
-  input[type='text'],
-  input[type='password'] {
-    color: var(--ls-primary-text-color);
-    background: transparent;
-    font-size: inherit;
-  }
-
   summary {
     outline: none;
   }
@@ -454,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 {
@@ -526,10 +336,10 @@ 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, #222);
-  font-size: var(--ls-page-title-size, 36px);
-  font-weight: 500;
+  @apply mb-4 font-medium;
+
+  color: var(--lx-gray-12, var(--ls-title-text-color, hsl(var(--foreground))));
+  font-size: var(--ls-page-title-size, 32px);
 }
 
 .title .page-icon {
@@ -539,7 +349,7 @@ h1.title, h1.title input {
 .block-highlight,
 .content .selected {
   transition: background-color 0.2s cubic-bezier(0, 1, 0, 1);
-  background-color: var(--ls-block-highlight-color);
+  background-color: var(--ls-block-highlight-color, var(--rx-gray-04));
   padding: -1px;
 }
 
@@ -573,16 +383,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, --rx-gray-05);
 }
 
 .menu-links-wrapper,
 .menu-links-outer {
-  @apply py-2 rounded-md shadow-lg overflow-y-auto;
+  @apply py-2 rounded-md shadow-lg overflow-y-auto border bg-popover 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 {
@@ -592,17 +400,12 @@ 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/75 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 {
-  @apply my-1;
-
-  opacity: 0.5;
-  border-top-width: 1px;
-  border-color: var(--ls-border-color, #ccc);
+  @apply my-1 opacity-50 border-t;
 }
 
 a.login {
@@ -686,7 +489,7 @@ a.tag {
   cursor: pointer;
   padding: 0 2px;
   border-radius: 4px;
-  color: or(--ls-tag-text, --lx-accent-11, --ls-tag-text-color, #045591);
+  color: var(--lx-accent-11, var(--ls-tag-text-color, hsl(var(--primary))));
   opacity: var(--ls-tag-text-opacity, 0.7);
 }
 
@@ -696,11 +499,11 @@ a.tag:hover {
 }
 
 svg.note {
-  color: var(--ls-primary-text-color, #19407c);
+  color: var(--rx-yellow-08);
 }
 
 svg.tip {
-  color: var(--ls-active-primary-color);
+  color: var(--lx-accent-08, var(--rx-blue-08));
 }
 
 /* endregion */
@@ -719,7 +522,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 {
@@ -798,10 +601,8 @@ mark {
   font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
   monospace;
   letter-spacing: 0;
-  background-color: or(--ls-inline-code-background, --lx-gray-06, --ls-page-inline-code-bg-color, #eee);
-  color: or(--ls-inline-code-text, --lx-gray-11, --ls-page-inline-code-color);
-  background-color: var(--ls-page-inline-code-bg-color, #eee);
-  color: var(--ls-page-inline-code-color);
+  background-color: var(--lx-gray-06, var(--ls-page-inline-code-bg-color, var(--rx-gray-05)));
+  color: var(--lx-gray-11, var(--ls-page-inline-code-color, var(--rx-gray-11)));
   text-rendering: optimizeSpeed;
 }
 
@@ -836,11 +637,11 @@ a.tooltip-priority {
 }
 
 .page-reference:hover {
-  background: or(--ls-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
+  background: var(--lx-accent-04-alpha, var(--ls-secondary-background-color, hsl(var(--primary)/.4)));
 }
 
 .references-blocks .page-reference:hover {
-  background: or(--ls-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
+  background: var(--lx-accent-04-alpha, var(--ls-tertiary-background-color, hsl(var(--primary)/.4)));
 }
 
 #head .fade-link {

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;
@@ -296,12 +302,10 @@
 }
 
 .page-ref {
-  --lx-text-override: var(--ls-link-ref-text-color);
-  @apply text-accent-11;
+  color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary)/.8)));
 
   &:hover {
-    --lx-text-override: var(--ls-link-ref-text-hover-color);
-    @apply text-accent-12;
+    color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary))));
   }
 }
 
@@ -339,14 +343,10 @@
   }
 }
 
-.block-properties {
+.block-properties, .page-properties {
   margin: 4px 0;
   padding: 4px 8px;
-  background-color: var(--ls-block-properties-background-color, #f0f8ff);
-}
-
-.page-properties {
-  background-color: var(--ls-page-properties-background-color);
+  background-color: var(--lx-gray-03, var(--ls-block-properties-background-color, var(--rx-gray-03)));
 }
 
 .block-marker {
@@ -376,9 +376,9 @@
     border-radius: 2px;
   }
 
-  /* .bullet-container .selected { */
-  /*   border: 3px solid; */
-  /* } */
+  span.bullet-container:not(.as-order-list) .selected {
+    border: 3px solid;
+  }
 }
 
 .ls-block,
@@ -479,10 +479,10 @@
 }
 
 .color-level {
-  background-color: or(--ls-right-sidebar-content-background, --lx-gray-02, --color-level-1);
+  background-color: var(--lx-gray-02, var(--color-level-1, var(--rx-gray-02)));
 
   .dark & {
-    background-color: or(--ls-right-sidebar-content-background, --lx-gray-01, --color-level-1);
+    background-color: var(--lx-gray-01, var(--color-level-1, var(--rx-gray-01)));
   }
 
   & .color-level {
@@ -576,11 +576,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;
     }
   }
@@ -599,11 +599,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;
     }
   }
 }
@@ -758,3 +758,9 @@ html.is-mac {
     @apply bg-gray-03 rounded p-4;
   }
 }
+
+.cp__right-sidebar-inner {
+  .references-blocks-item {
+    @apply bg-gray-04;
+  }
+}

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"
-             :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/command_palette.css

@@ -16,7 +16,6 @@
     .menu-link {
       transition: none;
       border: none;
-      border-radius: unset !important;
       background: none;
 
       .type-icon {
@@ -40,13 +39,13 @@
 
       &.chosen,
       &.chosen p {
-        background-color: or(--ls-cp-chosen, --lx-gray-03, --ls-a-chosen-bg);
+        background-color: var(--lx-gray-03, var(--ls-a-chosen-bg, var(--rx-gray-03)));
         color: var(--ls-secondary-text-color);
       }
 
       .dark &.chosen,
       .dark &.chosen p {
-        background-color: or(--ls-cp-chosen, --lx-gray-02, --ls-a-chosen-bg);
+        background-color: var(--lx-gray-02, var(--ls-a-chosen-bg, var(--rx-gray-02)));
       }
 
       &:hover p {

src/main/frontend/components/container.cljs

@@ -93,6 +93,7 @@
                              (state/get-current-repo)
                              (:db/id page-entity)
                              :page))]
+    ;; TODO: move to standalone component
     (shui/context-menu
       (shui/context-menu-trigger
         [:a.flex.items-center
@@ -755,11 +756,7 @@
         links (state/sub :custom-context-menu/links)
         position (state/sub :custom-context-menu/position)]
     (when (and show? links position)
-      (ui/css-transition
-       {:class-names "fade"
-        :timeout {:enter 500
-                  :exit 300}}
-       (render-custom-context-menu links position)))))
+      (render-custom-context-menu links position))))
 
 (rum/defc new-block-mode < rum/reactive
   []

src/main/frontend/components/container.css

@@ -5,25 +5,12 @@
   }
 }
 
-#app-container {
-  background-color: or(--ls-top-bar-background, --lx-gray-01, --ls-primary-background-color, #fff);
-  position: relative;
-}
-
-.dark #app-container {
-  background-color: or(--ls-top-bar-background, --lx-gray-02, --ls-primary-background-color, #fff);
-}
-
 #root {
-  > div {
-    color: or(--ls-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
-    font-size: var(--ls-page-text-size);
-  }
+  font-size: var(--ls-page-text-size);
 }
 
 #app-container {
-  display: flex;
-  flex: 0 0 100%;
+  @apply flex basis-full;
 }
 
 #skip-to-main {
@@ -79,13 +66,7 @@
   overflow: auto;
 }
 
-.dark .left-sidebar-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
-}
-
 .left-sidebar-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
-
   position: relative;
   height: 100%;
   padding-top: 12px;
@@ -182,8 +163,8 @@
     }
 
     &:hover, &.active {
-      background-color: or(--ls-left-sidebar-active-background, --lx-gray-04, --color-level-3);
-      color: or(--ls-left-sidebar-active-text-color, --lx-gray-12);
+      background-color: var(--lx-gray-04, var(--color-level-3, var(--rx-gray-04)));
+      color: var(--lx-gray-12, var(--rx-gray-12));
 
       .ui__icon {
         opacity: .9;
@@ -216,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;
@@ -229,7 +209,7 @@
       }
 
       &:hover {
-        background-color: or(--ls-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color);
+        background-color: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04)));
 
         * {
           opacity: 1 !important;
@@ -287,9 +267,8 @@
           }
 
           &:hover {
-            background-color: or(--ls-recessed-nav-item-hover, --lx-gray-04, --ls-quaternary-background-color);
+            background-color: var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)));
             opacity: 1;
-            background-color: var(--ls-quaternary-background-color);
           }
         }
       }
@@ -367,16 +346,14 @@
     }
   }
 
-  @screen sm {
-    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+  .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: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
-    }
-
     > .wrap {
       margin-top: 52px;
     }
@@ -390,18 +367,15 @@
 }
 
 .cp__sidebar-left-layout {
-  position: fixed;
-  top: 0;
+  @apply fixed top-0 left-0 w-[10px];
 
-  left: 0;
   z-index: var(--ls-z-index-level-5);
-  width: 10px;
 
   a {
     @apply opacity-90 hover:opacity-100;
     transition: all 120ms ease-out;
 
-    color: or(--ls-left-sidebar-text-color, --ls-header-button-background);
+    color: var(--ls-left-sidebar-text-color, var(--ls-header-button-background));
   }
 
   > .left-sidebar-inner {
@@ -560,14 +534,6 @@
   /* box-shadow: inset 0 0 0 1px var(--ls-border-color); */
 }
 
-.cp__sidebar-main-layout {
-  background-color: or(--ls-main-content-background, --lx-gray-01, --ls-primary-background-color);
-}
-
-.dark .cp__sidebar-main-layout {
-  background-color: or(--ls-main-content-background, --lx-gray-02, --ls-primary-background-color);
-}
-
 .cp__sidebar-main-content {
   width: 100%;
   max-width: var(--ls-main-content-max-width);
@@ -594,16 +560,14 @@
       @apply rounded-full h-8 w-8 flex items-center justify-center
       font-bold select-none cursor-pointer;
 
-      background-color: or(--ls-left-sidebar-help-background, --lx-gray-01, --ls-secondary-background-color);
+      background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)));
     }
   }
 
   &-menu-popup {
-    @apply fixed bottom-14 right-8 z-10 border
-    rounded-lg min-w-[260px] shadow;
+    @apply fixed bottom-14 right-8 z-10 border rounded-lg min-w-[260px] shadow;
 
-    background-color: var(--ls-secondary-background-color);
-    border-color: var(--ls-border-color);
+    background-color: var(--ls-secondary-background-color, var(--rx-gray-03));
 
     > .list-wrap {
       @apply flex flex-col pt-3;
@@ -612,7 +576,7 @@
         color: var(--ls-primary-text-color);
 
         &:active, &:hover {
-          background-color: var(--ls-tertiary-background-color);
+          background-color: var(--ls-tertiary-background-color, var(--rx-gray-05));
         }
       }
     }
@@ -664,6 +628,7 @@
 
   &-inner {
     padding-top: 0;
+    background-color: var(--lx-gray-02, var(--ls-secondary-background-color));
   }
 
   &-settings {
@@ -734,9 +699,7 @@
   }
 
   .sidebar-item {
-    @apply relative;
-    flex: 1 1;
-    min-height: 100px;
+    @apply relative flex-1 min-h-[100px];
 
     .sidebar-item-header {
       .breadcrumb {
@@ -851,4 +814,10 @@ html[data-theme='dark'] {
       background-color: rgba(0, 0, 0, .15);
     }
   }
+
+  .cp__right-sidebar {
+    .sidebar-item {
+      background-color: var(--lx-gray-03, var(--ls-secondary-background-color));
+    }
+  }
 }

src/main/frontend/components/content.css

@@ -12,13 +12,8 @@
 }
 
 #custom-context-menu {
-  @apply transition ease-out duration-100 transform
-  opacity-100 scale-100 absolute;
+  @apply absolute animate-in zoom-in-95;
 
   z-index: calc(var(--ls-z-index-level-1) + 1);
   width: 270px;
-
-  a:hover {
-    color: var(--ls-primary-text-color);
-  }
 }

src/main/frontend/components/datepicker.css

@@ -49,10 +49,8 @@
   top: 100px;
   left: 20px;
   padding: 10px;
-  margin-top: 1px;
   line-height: 16px;
   border-radius: 4px;
-  background: #efefef;
 }
 
 .datepicker table {

src/main/frontend/components/editor.css

@@ -41,6 +41,10 @@
     transform: translateY(calc(-100% - 2rem));
   }
 
+  &[data-modal-name] {
+    @apply bg-popover border overflow-x-hidden overflow-y-auto rounded-lg py-1;
+  }
+
   &[data-modal-name="commands"],
   &[data-modal-name="select-code-block-mode"] {
     @screen sm {
@@ -48,6 +52,14 @@
       max-width: 90vw !important;
     }
   }
+
+  &[data-modal-name="date-picker"] {
+    @apply py-0;
+
+    .rc-datepicker {
+      @apply my-0;
+    }
+  }
 }
 
 .is-mobile {

src/main/frontend/components/file_sync.cljs

@@ -305,9 +305,10 @@
               (calc-time-left))]]])
 
        [:div.c
+        {:class (when waiting? "pt-2")}
         (second tip-b&p)
         (when (or history-files? (not no-active-files?))
-          [:span.inline-flex.ml-1.active:opacity-50
+          [:span.inline-flex.pl-2.active:opacity-50
            {:on-click #(set-list-active? (not list-active?))}
            (if list-active?
              (ui/icon "chevron-up" {:style {:font-size 24}})
@@ -518,47 +519,49 @@
 
 (rum/defc pick-local-graph-for-sync [graph]
   [:div.cp__file-sync-related-normal-modal
-   [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "cloud-download")]]
+   [:div.flex.justify-center.pb-4
+    [:span.icon-wrap (ui/icon "cloud-download" {:size 22})]]
 
-   [:h1.mb-5.text-2xl.text-center.font-bold (util/format "Sync graph \"%s\" to local"
-                                                         (:GraphName graph))]
+   [:h1.mb-5.text-2xl.text-center.font-bold
+    (util/format "Sync graph \"%s\" to local" (:GraphName graph))]
 
    (ui/button
-    "Open a local directory"
-    :class "block w-full py-4 mt-4"
-    :on-click #(do
-                 (state/close-modal!)
-                 (fs-sync/<sync-stop)
-                 (->
-                  (page-handler/ls-dir-files!
-                   (fn [{:keys [url]}]
-                     (file-sync-handler/init-remote-graph url graph)
-                     (js/setTimeout (fn [] (repo-handler/refresh-repos!)) 200))
-
-                   {:on-open-dir
-                    (fn [result]
-                      (prn ::on-open-dir result)
-                      (let [empty-dir? (not (seq (:files result)))
-                            root (:path result)]
-                        (cond
-                          (string/blank? root)
-                          (p/rejected (js/Error. nil))  ;; cancel pick a directory
-
-                          empty-dir?
-                          (p/resolved nil)
-
-                          :else ; dir is not empty
-                          (-> (if (util/electron?)
-                                (ipc/ipc :readGraphTxIdInfo root)
-                                (fs-util/read-graphs-txid-info root))
-                              (p/then (fn [^js info]
-                                        (when (or (nil? info)
-                                                  (nil? (second info))
-                                                  (not= (second info) (:GraphUUID graph)))
-                                          (if (js/confirm "This directory is not empty, are you sure to sync the remote graph to it? Make sure to back up the directory first.")
-                                            (p/resolved nil)
-                                            (p/rejected (js/Error. nil))))))))))}) ;; cancel pick a non-empty directory
-                  (p/catch (fn [])))))
+     "Open a local directory"
+     :class "block w-full mt-4"
+     :size :lg
+     :on-click #(do
+                  (state/close-modal!)
+                  (fs-sync/<sync-stop)
+                  (->
+                    (page-handler/ls-dir-files!
+                      (fn [{:keys [url]}]
+                        (file-sync-handler/init-remote-graph url graph)
+                        (js/setTimeout (fn [] (repo-handler/refresh-repos!)) 200))
+
+                      {:on-open-dir
+                       (fn [result]
+                         (prn ::on-open-dir result)
+                         (let [empty-dir? (not (seq (:files result)))
+                               root (:path result)]
+                           (cond
+                             (string/blank? root)
+                             (p/rejected (js/Error. nil))   ;; cancel pick a directory
+
+                             empty-dir?
+                             (p/resolved nil)
+
+                             :else                          ; dir is not empty
+                             (-> (if (util/electron?)
+                                   (ipc/ipc :readGraphTxIdInfo root)
+                                   (fs-util/read-graphs-txid-info root))
+                               (p/then (fn [^js info]
+                                         (when (or (nil? info)
+                                                 (nil? (second info))
+                                                 (not= (second info) (:GraphUUID graph)))
+                                           (if (js/confirm "This directory is not empty, are you sure to sync the remote graph to it? Make sure to back up the directory first.")
+                                             (p/resolved nil)
+                                             (p/rejected (js/Error. nil))))))))))}) ;; cancel pick a non-empty directory
+                    (p/catch (fn [])))))
 
    [:div.text-xs.opacity-50.px-1.flex-row.flex.items-center.p-2
     (ui/icon "alert-circle")

src/main/frontend/components/file_sync.css

@@ -1,7 +1,7 @@
 :root {
-  --ls-color-file-sync-error: var(--ls-error-color);
-  --ls-color-file-sync-pending: var(--color-yellow-500);
-  --ls-color-file-sync-idle: var(--ls-success-color);
+  --ls-color-file-sync-error: var(--color-red-600);
+  --ls-color-file-sync-pending: var(--color-yellow-600);
+  --ls-color-file-sync-idle: var(--color-green-600);
 }
 
 .cp__file-sync {
@@ -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/header.cljs

@@ -28,7 +28,7 @@
   < {:key-fn #(identity "home-button")}
   []
   (ui/with-shortcut :go/home "left"
-    [:button.button.icon.inline
+    [:button.button.icon.inline.mx-1
      {:title (t :home)
       :on-click #(do
                    (when (mobile-util/native-iphone?)
@@ -47,7 +47,7 @@
                   logged?
                   (not sync-enabled?))
       [:span.flex.space-x-2
-       [:a.button.text-sm.font-medium.block
+       [:a.button.text-sm.font-medium.block.text-gray-11
         {:on-click #(state/pub-event! [:user/login])}
         [:span (t :login)]
         (when loading?

src/main/frontend/components/header.css

@@ -178,22 +178,13 @@
 }
 
 .button {
-  @apply h-8 px-2.5 py-1 rounded-md opacity-60;
-  display: block;
-  user-select: none;
-
-  &:hover, &.active {
-    opacity: 1;
-    background: none;
+  @apply h-8 px-2.5 py-1 rounded-md opacity-90 block select-none hover:opacity-100 active:opacity-80;
 
+  &:hover {
     @screen md {
-      background: or(--ls-header-button-hover, --lx-gray-04, --ls-tertiary-background-color);
+      background: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04)));
     }
   }
-
-  &:active {
-    opacity: .7;
-  }
 }
 
 .button.icon {

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/onboarding/index.css

@@ -32,7 +32,6 @@ body[data-page=import] {
           &:first-child {
             display: block;
             text-align: center;
-            padding-bottom: 15px;
           }
         }
       }
@@ -53,7 +52,7 @@ body[data-page=import] {
           flex: 1;
 
           &.a {
-            background-color: var(--ls-tertiary-background-color);
+            background-color: var(--ls-tertiary-background-color, var(--rx-gray-03));
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -172,8 +171,7 @@ body[data-page=import] {
         }
 
         &.importer {
-          background-color: var(--ls-tertiary-background-color);
-          position: relative;
+          @apply relative bg-gray-03;
 
           > section {
             flex: unset;
@@ -298,16 +296,8 @@ body[data-page=import] {
     }
 
     label.action-input {
-      transition: none;
-      color: var(--ls-active-primary-color);
-      background-color: var(--ls-quaternary-background-color);
-      height: 68px;
-      width: 100%;
-      opacity: .8;
-      user-select: none;
-      border-radius: 12px;
-      overflow: hidden;
-      cursor: pointer;
+      @apply transition-none bg-gray-06 h-[68px] w-full opacity-80 select-none;
+      @apply rounded-xl overflow-hidden cursor-pointer;
 
       small {
         font-size: 11px;
@@ -413,7 +403,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 +421,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));
       }
     }
   }

src/main/frontend/components/onboarding/setups.cljs

@@ -30,10 +30,12 @@
 
       [:h1.text-xl
        (if picker?
-         [:span [:strong (ui/icon "heart")] (t :on-boarding/main-title)]
-         [:span [:strong (ui/icon "file-import")] (t :on-boarding/importing-main-title)])]
+         [:span.flex.items-center.gap-1
+          [:strong (ui/icon "heart" {:size 30})] (t :on-boarding/main-title)]
+         [:span.flex.items-center.gap-1
+          [:strong (ui/icon "file-import" {:size 30})] (t :on-boarding/importing-main-title)])]
 
-      [:h2
+      [:h2.opacity-60
        (if picker?
          (t :on-boarding/main-desc)
          (t :on-boarding/importing-main-desc))]
@@ -48,11 +50,11 @@
      [:div.px-4
       "You can save them in your local storage, and use Logseq Sync or any third-party sync service to keep your notes sync with other devices. "
       "If you prefer to use Dropbox to sync your notes, you can use "
-      [:a {:href "https://play.google.com/store/apps/details?id=com.ttxapps.dropsync"
+      [:a {:href   "https://play.google.com/store/apps/details?id=com.ttxapps.dropsync"
            :target "_blank"}
        "Dropsync"]
       ". Or you can use "
-      [:a {:href "https://play.google.com/store/apps/details?id=dk.tacit.android.foldersync.lite"
+      [:a {:href   "https://play.google.com/store/apps/details?id=dk.tacit.android.foldersync.lite"
            :target "_blank"}
        "FolderSync"]
       "."]
@@ -62,72 +64,72 @@
 
 (rum/defcs picker < rum/reactive
   [_state onboarding-and-home?]
-  (let [parsing?       (state/sub :repo/parsing-files?)
-        _              (state/sub :auth/id-token)
-        native-ios?    (mobile-util/native-ios?)
+  (let [parsing? (state/sub :repo/parsing-files?)
+        _ (state/sub :auth/id-token)
+        native-ios? (mobile-util/native-ios?)
         native-icloud? (not (string/blank? (state/sub [:mobile/container-urls :iCloudContainerUrl])))
-        logged?        (user-handler/logged-in?)]
+        logged? (user-handler/logged-in?)]
 
     (setups-container
-     :picker
-     [:article.flex.w-full
-      [:section.a.
-       (when (and (mobile-util/native-platform?) (not native-ios?))
-         (mobile-intro))
+      :picker
+      [:article.flex.w-full
+       [:section.a.
+        (when (and (mobile-util/native-platform?) (not native-ios?))
+          (mobile-intro))
 
-       (if native-ios?
-         ;; TODO: open for all native mobile platforms
-         (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?
-                                        :logged? logged?
-                                        :native-icloud? native-icloud?})
+        (if native-ios?
+          ;; TODO: open for all native mobile platforms
+          (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home?
+                                         :logged?              logged?
+                                         :native-icloud?       native-icloud?})
 
-         (if (or (nfs/supported?) (mobile-util/native-platform?))
-           [:div.choose.flex.flex-col.items-center
-            {:on-click #(page-handler/ls-dir-files!
-                         (fn []
-                           (shortcut/refresh!)))}
-            [:i]
-            [:div.control
-             [:label.action-input.flex.items-center.justify-center.flex-col
-              {:disabled parsing?}
+          (if (or (nfs/supported?) (mobile-util/native-platform?))
+            [:div.choose.flex.flex-col.items-center
+             {:on-click #(page-handler/ls-dir-files!
+                           (fn []
+                             (shortcut/refresh!)))}
+             [:i]
+             [:div.control
+              [:label.action-input.flex.items-center.justify-center.flex-col
+               {:disabled parsing?}
 
-              (if parsing?
-                (ui/loading "")
-                [[:strong (t :on-boarding/section-btn-title)]
-                 [:small (t :on-boarding/section-btn-desc)]])]]]
-           [:div.px-5
-            (ui/admonition :warning
-                           (widgets/native-fs-api-alert))]))]
-      [:section.b.flex.items-center.flex-col
-       [:p.flex
-        [:i.as-flex-center (ui/icon "zoom-question" {:style {:fontSize "22px"}})]
-        [:span.flex-1.flex.flex-col
-         [:strong (t :on-boarding/section-title)]
-         [:small.opacity-60 (t :on-boarding/section-desc)]]]
+               (if parsing?
+                 (ui/loading "")
+                 [[:strong (t :on-boarding/section-btn-title)]
+                  [:small (t :on-boarding/section-btn-desc)]])]]]
+            [:div.px-5
+             (ui/admonition :warning
+               (widgets/native-fs-api-alert))]))]
+       [:section.b.flex.items-center.flex-col
+        [:p.flex
+         [:i.as-flex-center (ui/icon "zoom-question" {:style {:fontSize "22px"}})]
+         [:span.flex-1.flex.flex-col
+          [:strong (t :on-boarding/section-title)]
+          [:small.opacity-60 (t :on-boarding/section-desc)]]]
 
-       [:p.text-sm.pt-5.tracking-wide
-        [:span (str (t :on-boarding/section-tip-1 DEVICE))]
-        [:br]
-        [:span (t :on-boarding/section-tip-2)]]
+        [:p.text-sm.pt-5.tracking-wide
+         [:span (str (t :on-boarding/section-tip-1 DEVICE))]
+         [:br]
+         [:span (t :on-boarding/section-tip-2)]]
 
-       [:ul
-        (for [[title label icon]
-              [[(t :on-boarding/section-assets) "/assets" "whiteboard"]
-               [(t :on-boarding/section-journals) "/journals" "calendar-plus"]
-               [(t :on-boarding/section-pages) "/pages" "page"]
-               []
-               [(t :on-boarding/section-app) "/logseq" "tool"]
-               [(t :on-boarding/section-config) "/logseq/config.edn"]]]
-          (if-not title
-            [:li.hr]
-            [:li
-             {:key title}
-             [:i.as-flex-center
-              {:class (when (string/ends-with? label ".edn") "is-file")}
-              (when icon (ui/icon icon))]
-             [:span
-              [:strong.uppercase title]
-              [:small.opacity-50 label]]]))]]])))
+        [:ul
+         (for [[title label icon]
+               [[(t :on-boarding/section-assets) "/assets" "whiteboard"]
+                [(t :on-boarding/section-journals) "/journals" "calendar-plus"]
+                [(t :on-boarding/section-pages) "/pages" "page"]
+                []
+                [(t :on-boarding/section-app) "/logseq" "tool"]
+                [(t :on-boarding/section-config) "/logseq/config.edn"]]]
+           (if-not title
+             [:li.hr]
+             [:li
+              {:key title}
+              [:i.as-flex-center
+               {:class (when (string/ends-with? label ".edn") "is-file")}
+               (when icon (ui/icon icon))]
+              [:span
+               [:strong.uppercase title]
+               [:small.opacity-50 label]]]))]]])))
 
 (defonce *opml-imported-pages (atom nil))
 
@@ -139,29 +141,29 @@
 
 (defn- roam-import-handler
   [e]
-  (let [file      (first (array-seq (.-files (.-target e))))
+  (let [file (first (array-seq (.-files (.-target e))))
         file-name (gobj/get file "name")]
     (if (string/ends-with? file-name ".json")
       (do
         (state/set-state! :graph/importing :roam-json)
         (let [reader (js/FileReader.)]
           (set! (.-onload reader)
-                (fn [e]
-                  (let [text (.. e -target -result)]
-                    (external-handler/import-from-roam-json!
-                     text
-                     #(do
-                        (state/set-state! :graph/importing nil)
-                        (finished-cb))))))
+            (fn [e]
+              (let [text (.. e -target -result)]
+                (external-handler/import-from-roam-json!
+                  text
+                  #(do
+                     (state/set-state! :graph/importing nil)
+                     (finished-cb))))))
           (.readAsText reader file)))
       (notification/show! "Please choose a JSON file."
-                          :error))))
+        :error))))
 
 (defn- lsq-import-handler
   [e]
-  (let [file      (first (array-seq (.-files (.-target e))))
+  (let [file (first (array-seq (.-files (.-target e))))
         file-name (some-> (gobj/get file "name")
-                          (string/lower-case))
+                    (string/lower-case))
         edn? (string/ends-with? file-name ".edn")
         json? (string/ends-with? file-name ".json")]
     (if (or edn? json?)
@@ -172,36 +174,36 @@
                          external-handler/import-from-edn!
                          external-handler/import-from-json!)]
           (set! (.-onload reader)
-                (fn [e]
-                  (let [text (.. e -target -result)]
-                    (import-f
-                     text
-                     #(do
-                        (state/set-state! :graph/importing nil)
-                        (finished-cb))))))
+            (fn [e]
+              (let [text (.. e -target -result)]
+                (import-f
+                  text
+                  #(do
+                     (state/set-state! :graph/importing nil)
+                     (finished-cb))))))
           (.readAsText reader file)))
       (notification/show! "Please choose an EDN or a JSON file."
-                          :error))))
+        :error))))
 
 (defn- opml-import-handler
   [e]
-  (let [file      (first (array-seq (.-files (.-target e))))
+  (let [file (first (array-seq (.-files (.-target e))))
         file-name (gobj/get file "name")]
     (if (string/ends-with? file-name ".opml")
       (do
         (state/set-state! :graph/importing :opml)
         (let [reader (js/FileReader.)]
           (set! (.-onload reader)
-                (fn [e]
-                  (let [text (.. e -target -result)]
-                    (external-handler/import-from-opml! text
-                                                        (fn [pages]
-                                                          (reset! *opml-imported-pages pages)
-                                                          (state/set-state! :graph/importing nil)
-                                                          (finished-cb))))))
+            (fn [e]
+              (let [text (.. e -target -result)]
+                (external-handler/import-from-opml! text
+                  (fn [pages]
+                    (reset! *opml-imported-pages pages)
+                    (state/set-state! :graph/importing nil)
+                    (finished-cb))))))
           (.readAsText reader file)))
       (notification/show! "Please choose a OPML file."
-                          :error))))
+        :error))))
 
 (rum/defc importer < rum/reactive
   [{:keys [query-params]}]
@@ -218,43 +220,43 @@
                     (str current-idx "/" total))]
       (ui/progress-bar-with-label width left-label process))
     (setups-container
-     :importer
-     [:article.flex.flex-col.items-center.importer.py-16.px-8
-      [:section.c.text-center
-       [:h1 (t :on-boarding/importing-title)]
-       [:h2 (t :on-boarding/importing-desc)]]
-      [:section.d.md:flex
-       [:label.action-input.flex.items-center.mx-2.my-2
-        [:span.as-flex-center [:i (svg/roam-research 28)]]
-        [:div.flex.flex-col
-         [[:strong "RoamResearch"]
-          [:small (t :on-boarding/importing-roam-desc)]]]
-        [:input.absolute.hidden
-         {:id        "import-roam"
-          :type      "file"
-          :on-change roam-import-handler}]]
+      :importer
+      [:article.flex.flex-col.items-center.importer.py-16.px-8
+       [:section.c.text-center
+        [:h1 (t :on-boarding/importing-title)]
+        [:h2 (t :on-boarding/importing-desc)]]
+       [:section.d.md:flex
+        [:label.action-input.flex.items-center.mx-2.my-2
+         [:span.as-flex-center [:i (svg/roam-research 28)]]
+         [:div.flex.flex-col
+          [[:strong "RoamResearch"]
+           [:small (t :on-boarding/importing-roam-desc)]]]
+         [:input.absolute.hidden
+          {:id        "import-roam"
+           :type      "file"
+           :on-change roam-import-handler}]]
 
-       [:label.action-input.flex.items-center.mx-2.my-2
-        [:span.as-flex-center [:i (svg/logo 28)]]
-        [:span.flex.flex-col
-         [[:strong "EDN / JSON"]
-          [:small (t :on-boarding/importing-lsq-desc)]]]
-        [:input.absolute.hidden
-         {:id        "import-lsq"
-          :type      "file"
-          :on-change lsq-import-handler}]]
+        [:label.action-input.flex.items-center.mx-2.my-2
+         [:span.as-flex-center [:i (svg/logo 28)]]
+         [:span.flex.flex-col
+          [[:strong "EDN / JSON"]
+           [:small (t :on-boarding/importing-lsq-desc)]]]
+         [:input.absolute.hidden
+          {:id        "import-lsq"
+           :type      "file"
+           :on-change lsq-import-handler}]]
 
-       [:label.action-input.flex.items-center.mx-2.my-2
-        [:span.as-flex-center (ui/icon "sitemap" {:style {:fontSize "26px"}})]
-        [:span.flex.flex-col
-         [[:strong "OPML"]
-          [:small (t :on-boarding/importing-opml-desc)]]]
+        [:label.action-input.flex.items-center.mx-2.my-2
+         [:span.as-flex-center (ui/icon "sitemap" {:style {:fontSize "26px"}})]
+         [:span.flex.flex-col
+          [[:strong "OPML"]
+           [:small (t :on-boarding/importing-opml-desc)]]]
 
-        [:input.absolute.hidden
-         {:id        "import-opml"
-          :type      "file"
-          :on-change opml-import-handler}]]]
+         [:input.absolute.hidden
+          {:id        "import-opml"
+           :type      "file"
+           :on-change opml-import-handler}]]]
 
-      (when (= "picker" (:from query-params))
-        [:section.e
-         [:a.button {:on-click #(route-handler/redirect-to-home!)} "Skip"]])])))
+       (when (= "picker" (:from query-params))
+         [:section.e
+          [:a.button {:on-click #(route-handler/redirect-to-home!)} "Skip"]])])))

src/main/frontend/components/page.cljs

@@ -1212,7 +1212,6 @@
                                               (doseq [{:block/keys [idx]} @*results]
                                                 (swap! *checks assoc idx (or indeterminate? (not all?))))))
                            :indeterminate (when (= -1 @*indeterminate) "indeterminate")})]
-           [:th.icon ""]
            (sortable-title (t :block/name) :block/name *sort-by-item *desc?)
            (when-not mobile?
              [(sortable-title (t :page/backlinks) :block/backlinks *sort-by-item *desc?)
@@ -1228,19 +1227,19 @@
                               (get @*checks idx)
                               {:on-change (fn []
                                             (swap! *checks update idx not))})]
-               [:td.icon.w-4.p-0.overflow-hidden
-                (when-let [icon (get-in page [:block/properties :icon])]
-                  icon)]
-               [:td.name [:a {:on-click (fn [e]
-                                          (.preventDefault e)
-                                          (let [repo (state/get-current-repo)]
-                                            (when (gobj/get e "shiftKey")
-                                              (state/sidebar-add-block!
-                                               repo
-                                               (:db/id page)
-                                               :page))))
-                              :href     (rfe/href :page {:name (:block/name page)})}
-                          (component-block/page-cp {} page)]]
+               [:td.name
+                [:a {:on-click (fn [e]
+                                 (.preventDefault e)
+                                 (let [repo (state/get-current-repo)]
+                                   (when (gobj/get e "shiftKey")
+                                     (state/sidebar-add-block!
+                                       repo
+                                       (:db/id page)
+                                       :page))))
+                     :href     (rfe/href :page {:name (:block/name page)})}
+                 (when-let [icon (get-in page [:block/properties :icon])]
+                   [:span.pr-1 icon])
+                 (component-block/page-cp {} page)]]
 
                (when-not mobile?
                  [[:td.backlinks [:span backlinks]]

src/main/frontend/components/page.css

@@ -1,7 +1,3 @@
-.page-references h2 {
-  color: var(--ls-title-text-color);
-}
-
 .cp__page {
   &-publish-actions {
     background-color: var(--ls-primary-background-color);
@@ -97,14 +93,14 @@
 
   .actions {
     position: sticky;
-    background-color: or(--ls-all-pages-table, --lx-gray-01, --ls-primary-background-color);
+    background-color: var(--lx-gray-01, var(--ls-primary-background-color, var(--rx-gray-01)));
     white-space: nowrap;
     top: -18px;
     padding-bottom: 10px;
     z-index: 1;
 
     .dark & {
-        background-color: or(--ls-all-pages-table, --lx-gray-02, --ls-primary-background-color);
+        background-color: var(--lx-gray-02, var(--ls-primary-background-color, var(--rx-gray-02)));
     }
 
     @screen md {
@@ -137,7 +133,6 @@
       @apply text-base space-x-2;
 
       a.button {
-        color: var(--ls-primary-text-color);
         margin-top: 1px;
         height: unset;
         padding: 4px;
@@ -146,7 +141,6 @@
 
         &.active {
           opacity: 1;
-          color: var(--ls-link-ref-text-color);
         }
       }
 
@@ -247,11 +241,9 @@
   }
 
   .edit-input {
-    width: 100%;
-    border: none;
+    @apply w-full border-0 p-0 pr-1 bg-transparent outline-0;
+
     box-shadow: none;
-    padding: 0;
-    padding-right: 4px;
 
     &-wrapper {
       @apply rounded;

src/main/frontend/components/plugins.cljs

@@ -606,7 +606,8 @@
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath (str root "/preferences.json")))}}
-                  {:title   [:span.flex.items-center.whitespace-nowrap.space-x-1 (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
+                  {:title   [:span.flex.items-center.whitespace-nowrap.gap-1
+                             (ui/icon "bug") (t :plugin/open-logseq-dir) [:code "~/.logseq"]]
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath root))}}])
@@ -1043,7 +1044,7 @@
           {:title   key
            :item    [:div.flex.items-center.item-wrap
                      (ui-item-renderer pid :toolbar (assoc opts :prefix "pl-" :key (str "pl-" key)))
-                     [:span.opacity-80 {:style {:padding-left "2px"}} key]
+                     [:span {:style {:padding-left "2px"}} key]
                      [:span.pin.flex.items-center.opacity-60
                       {:class (util/classnames [{:pinned pinned?}])}
                       (ui/icon (if pinned? "pinned" "pin"))]]
@@ -1065,7 +1066,7 @@
 
          (when badge-updates?
            {:title   [:div.flex.items-center.space-x-5.leading-none
-                      [:span (t :plugin/found-updates)] (ui/point "bg-red-600" 5 {:style {:margin-top 2}})]
+                      [:span (t :plugin/found-updates)] (ui/point "bg-red-700" 5 {:style {:margin-top 2}})]
             :options {:on-click #(open-waiting-updates-modal!)
                       :class    "extra-item"}
             :icon    (ui/icon "download")})]

src/main/frontend/components/plugins.css

@@ -42,7 +42,8 @@
           }
         }
 
-        &.active {}
+        &.active {
+        }
       }
     }
 
@@ -196,7 +197,7 @@
   &-item-card {
     @apply flex py-3 px-1 rounded-md;
 
-    background-color: var(--ls-tertiary-background-color);
+    background-color: var(--ls-tertiary-background-color, hsl(var(--muted)));
     height: 150px;
 
     li {
@@ -648,11 +649,10 @@
   &-installed {
     margin: -2rem;
     outline: none;
-    padding: 1rem;
+    padding: .5rem;
 
     .it {
       user-select: none;
-      background-color: var(--ls-secondary-background-color);
       border: 1px solid transparent;
       margin-bottom: 4px;
       cursor: pointer;
@@ -662,18 +662,12 @@
         font-weight: 600;
       }
 
-      &.is-active {
-        background-color: var(--ls-tertiary-background-color);
-        border: 1px solid var(--ls-quaternary-background-color);
-        opacity: 1;
+      &:hover, &.is-active {
+        @apply opacity-100 bg-gray-06;
       }
 
       &.is-selected {
-        opacity: 1;
-      }
-
-      &:hover {
-        opacity: 1;
+        @apply opacity-100;
       }
     }
   }
@@ -861,11 +855,10 @@
       }
 
       .menu-link {
-        padding: 3px 5px;
+        @apply px-[5px] py-1.5;
 
         &.extra-item {
-          padding: 4px 15px;
-          opacity: .8;
+          @apply opacity-80 px-4 py-1.5;
 
           .title-wrap {
             margin-left: 8px !important;
@@ -879,7 +872,7 @@
 
       .item-wrap {
         padding-right: 28px;
-        font-size: 13px;
+        font-size: 14px;
         position: relative;
 
         div[data-injected-ui] :is(.ti, .tie) {
@@ -900,6 +893,16 @@
           opacity: 90;
         }
       }
+
+      .menu-links-wrapper {
+        a {
+          @apply !text-popover-foreground/80;
+
+          &.button {
+            @apply h-auto hover:bg-transparent scale-95;
+          }
+        }
+      }
     }
   }
 }

src/main/frontend/components/query/builder.css

@@ -21,7 +21,13 @@
     }
 
     .cp__select .input-wrap input {
-        border: none;
+        @apply border-0 outline-0 text-popover-foreground/90;
+
+        box-shadow: none;
+    }
+
+    .item-results-wrap {
+        @apply py-1;
     }
 
     .cp__select-input {
@@ -52,4 +58,10 @@
     .query-clause-btn {
         border-color: var(--ls-border-color);
     }
+
+    .query-builder-picker {
+       .form-input {
+           @apply focus:border-0;
+       }
+    }
 }

src/main/frontend/components/right_sidebar.cljs

@@ -16,13 +16,13 @@
             [frontend.handler.ui :as ui-handler]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [logseq.shui.ui :as shui]
             [frontend.util :as util]
             [frontend.config :as config]
             [frontend.modules.editor.undo-redo :as undo-redo]
             [medley.core :as medley]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]
-            [frontend.handler.common :as common-handler]))
+            [rum.core :as rum]))
 
 (rum/defc toggle
   []
@@ -189,28 +189,33 @@
 (defonce *drag-from
   (atom nil))
 
-(rum/defc context-menu-content
-  [db-id idx type collapsed? block-count toggle-fn]
-  [:.menu-links-wrapper.text-left
-   {:on-click toggle-fn}
-   (ui/menu-link {:on-click #(state/sidebar-remove-block! idx)} (t :right-side-bar/pane-close))
-   (when (> block-count 1) (ui/menu-link {:on-click #(state/sidebar-remove-rest! db-id)} (t :right-side-bar/pane-close-others)))
-   (when (> block-count 1) (ui/menu-link {:on-click (fn []
-                                                      (state/clear-sidebar-blocks!)
-                                                      (state/hide-right-sidebar!))} (t :right-side-bar/pane-close-all)))
-   (when (or (not collapsed?) (> block-count 1)) [:hr.menu-separator])
-   (when-not collapsed? (ui/menu-link {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-collapse)))
-   (when (> block-count 1) (ui/menu-link {:on-click #(state/sidebar-block-collapse-rest! db-id)} (t :right-side-bar/pane-collapse-others)))
-   (when (> block-count 1) (ui/menu-link {:on-click #(state/sidebar-block-set-collapsed-all! true)} (t :right-side-bar/pane-collapse-all)))
-   (when (or collapsed? (> block-count 1)) [:hr.menu-separator])
-   (when collapsed? (ui/menu-link {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-expand)))
-   (when (> block-count 1) (ui/menu-link {:on-click #(state/sidebar-block-set-collapsed-all! false)}  (t :right-side-bar/pane-expand-all)))
-   (when (= type :page) [:hr.menu-separator])
-   (when (= type :page)
-     (let [name (:block/name (db/entity db-id))]
-       (ui/menu-link {:href (if (db-model/whiteboard-page? name)
+(rum/defc x-menu-content
+  [db-id idx type collapsed? block-count toggle-fn as-dropdown?]
+  (let [menu-content (if as-dropdown? shui/dropdown-menu-content shui/context-menu-content)
+        menu-item (if as-dropdown? shui/dropdown-menu-item shui/context-menu-content)
+        multi-items? (> block-count 1)]
+
+    (menu-content
+      {:on-click toggle-fn :class "w-48" :align "end"}
+
+      (menu-item {:on-click #(state/sidebar-remove-block! idx)} (t :right-side-bar/pane-close))
+      (when multi-items? (menu-item {:on-click #(state/sidebar-remove-rest! db-id)} (t :right-side-bar/pane-close-others)))
+      (when multi-items? (menu-item {:on-click (fn []
+                                                 (state/clear-sidebar-blocks!)
+                                                 (state/hide-right-sidebar!))} (t :right-side-bar/pane-close-all)))
+      (when (and (not collapsed?) multi-items?) [:hr.menu-separator])
+      (when-not collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-collapse)))
+      (when multi-items? (menu-item {:on-click #(state/sidebar-block-collapse-rest! db-id)} (t :right-side-bar/pane-collapse-others)))
+      (when multi-items? (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! true)} (t :right-side-bar/pane-collapse-all)))
+      (when (and collapsed? multi-items?) [:hr.menu-separator])
+      (when collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-expand)))
+      (when multi-items? (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! false)} (t :right-side-bar/pane-expand-all)))
+      (when (= type :page) [:hr.menu-separator])
+      (when (= type :page)
+        (let [name (:block/name (db/entity db-id))]
+          (menu-item {:href (if (db-model/whiteboard-page? name)
                               (rfe/href :whiteboard {:name name})
-                              (rfe/href :page {:name name}))} (t :right-side-bar/pane-open-as-page))))])
+                              (rfe/href :page {:name name}))} (t :right-side-bar/pane-open-as-page)))))))
 
 (rum/defc drop-indicator
   [idx drag-to]
@@ -246,56 +251,62 @@
       (let [collapsed? (state/sub [:ui/sidebar-collapsed-blocks db-id])]
         [:<>
          (when (zero? idx) (drop-indicator (dec idx) drag-to))
-         [:div.flex.sidebar-item.content.color-level.shadow-md.rounded-md
+         [:div.flex.sidebar-item.content.color-level.rounded-md.shadow-lg
           {:class [(str "item-type-" (name block-type))
                    (when collapsed? "collapsed")]}
           (let [[title component] item]
             [:div.flex.flex-col.w-full.relative
              [:.flex.flex-row.justify-between.pr-2.sidebar-item-header.color-level.rounded-t-md
-              {:class (when collapsed? "rounded-b-md")
-               :draggable true
+              {:class         (when collapsed? "rounded-b-md")
+               :draggable     true
                :on-drag-start (fn [event]
                                 (editor-handler/block->data-transfer! (:block/name (db/entity db-id)) event)
                                 (reset! *drag-from idx))
-               :on-drag-end (fn [_event]
-                              (when drag-to (state/sidebar-move-block! idx drag-to))
-                              (reset! *drag-to nil)
-                              (reset! *drag-from nil))
-               :on-mouse-up (fn [event]
-                              (when (= (.-which (.-nativeEvent event)) 2)
-                                (state/sidebar-remove-block! idx)))
-               :on-context-menu (fn [e]
-                                  (util/stop e)
-                                  (common-handler/show-custom-context-menu! e (context-menu-content db-id idx block-type collapsed? block-count #())))}
+               :on-drag-end   (fn [_event]
+                                (when drag-to (state/sidebar-move-block! idx drag-to))
+                                (reset! *drag-to nil)
+                                (reset! *drag-from nil))
+               :on-mouse-up   (fn [event]
+                                (when (= (.-which (.-nativeEvent event)) 2)
+                                  (state/sidebar-remove-block! idx)))}
+
               [:button.flex.flex-row.p-2.items-center.w-full.overflow-hidden
                {:aria-expanded (str (not collapsed?))
-                :id (str "sidebar-panel-header-" idx)
+                :id            (str "sidebar-panel-header-" idx)
                 :aria-controls (str "sidebar-panel-content-" idx)
-                :on-click (fn [event]
-                            (util/stop event)
-                            (state/sidebar-block-toggle-collapse! db-id))}
+                :on-click      (fn [event]
+                                 (util/stop event)
+                                 (state/sidebar-block-toggle-collapse! db-id))}
                [:span.opacity-50.hover:opacity-100.flex.items-center.pr-1
                 (ui/rotating-arrow collapsed?)]
-               [:div.ml-1.font-medium.overflow-hidden
+               [:div.ml-1.font-medium.overflow-hidden.whitespace-nowrap
                 title]]
               [:.item-actions.flex.items-center
-               (ui/dropdown (fn [{:keys [toggle-fn]}]
-                              [:button.button {:title (t :right-side-bar/pane-more)
-                                               :on-click (fn [e]
-                                                           (util/stop e)
-                                                           (toggle-fn))} (ui/icon "dots")])
-                            (fn [{:keys [close-fn]}]
-                              (context-menu-content db-id idx block-type collapsed? block-count close-fn)))
-               [:button.button.close {:title (t :right-side-bar/pane-close)
-                                      :on-click #(state/sidebar-remove-block! idx)} (ui/icon "x")]]]
-             [:div {:role "region"
-                    :id (str "sidebar-panel-content-" idx)
+               (shui/dropdown-menu
+                 (shui/dropdown-menu-trigger
+                   {:as-child true}
+                   (shui/button
+                     {:title   (t :right-side-bar/pane-more)
+                      :class   "px-3"
+                      :variant :text}
+                     (ui/icon "dots")))
+                 (x-menu-content db-id idx block-type collapsed? block-count #() true))
+
+               (shui/button
+                 {:title    (t :right-side-bar/pane-close)
+                  :variant  :text
+                  :class "px-3"
+                  :on-click #(state/sidebar-remove-block! idx)}
+                 (ui/icon "x"))]]
+
+             [:div {:role            "region"
+                    :id              (str "sidebar-panel-content-" idx)
                     :aria-labelledby (str "sidebar-panel-header-" idx)
-                    :class (util/classnames [{:hidden collapsed?
-                                              :initial (not collapsed?)
-                                              :p-4 (not (contains? #{:page :block :contents :search :shortcut-settings} block-type))
-                                              :pt-4 (not (contains? #{:search :shortcut-settings} block-type))
-                                              :p-1 (not (contains? #{:search :shortcut-settings} block-type))}])}
+                    :class           (util/classnames [{:hidden  collapsed?
+                                                        :initial (not collapsed?)
+                                                        :p-4     (not (contains? #{:page :block :contents :search :shortcut-settings} block-type))
+                                                        :pt-4    (not (contains? #{:search :shortcut-settings} block-type))
+                                                        :p-1     (not (contains? #{:search :shortcut-settings} block-type))}])}
               (inner-component component (not drag-from))]
              (when drag-from (drop-area idx))])]
          (drop-indicator idx drag-to)]))))
@@ -445,7 +456,7 @@
                                                                        (state/sidebar-add-block! repo "history" :history))}
             (t :right-side-bar/history)]])]]
 
-      [:.sidebar-item-list.flex-1.scrollbar-spacing
+      [:.sidebar-item-list.flex-1.scrollbar-spacing.px-2
        (if @*anim-finished?
          (for [[idx [repo db-id block-type]] (medley/indexed blocks)]
             (rum/with-key

src/main/frontend/components/right_sidebar.css

@@ -19,33 +19,26 @@ html[data-theme=light] {
   @apply ml-1 mt-[-8px] pb-[150px];
 
   height: calc(100vh - 48px);
-  background-color: or(--ls-right-ridebar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
 }
 
 html[data-theme=light] a.toggle:hover {
   color: var(--ls-primary-text-color);
 }
 
-.cp__header a, .cp__header button {
-    opacity: 1;
-    color: or(--ls-header-button-text-color, --lx-gray-11, --ls-header-button-background);
-}
+.cp__header {
+  > .r > div:not(.ui__dropdown-trigger) a, button {
+    color: var(--lx-gray-11, var(--ls-header-button-background, var(--rx-gray-11)));
 
-.cp__header a:hover, .cp__header button:hover, .cp__right-sidebar-topbar button:hover {
-    color: or(--ls-header-button-text-color-hover, --lx-gray-12, --ls-header-button-background);
+    &:hover {
+      color: var(--lx-gray-12, var(--ls-header-button-background, var(--rx-gray-12)));
+    }
+  }
 }
 
 .cp__right-sidebar-topbar {
-  @apply px-1 h-12;
-  background-color: var(--ls-primary-background-color);
+  @apply px-1 h-12 bg-transparent;
 
   button {
     @apply opacity-100;
   }
 }
-
-html[data-theme=dark] {
-    .cp__header a, .cp__header button {
-        opacity: 0.7;
-    }
-}

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]
@@ -333,40 +332,52 @@
                              :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"}}
-                    (for [color colors/color-list
-                          :let [active? (= color color-accent)]]
+        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)
+                                none? (= color :none)]]
                       [: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")])]]
+                       (ui/tippy
+                         {:html (case color
+                                  :none [:p {:style {:max-width "300px"}}
+                                         "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
+                                  :logseq "Logseq classical color"
+                                  (str (name color) " color") )
+                          :delay [1000, 100]}
+                         (shui-ui/button
+                           {:class      "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
+                            :auto-focus (and _in-modal? active?)
+                            :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)}
+                            :variant    :text
+                            :on-click   (fn [_e] (state/set-color-accent! color))}
+                           [:strong
+                            {:class (if none? "h-0.5 w-full bg-red-700"
+                                              "w-2 h-2 rounded-full transition ease-in duration-100")
+                             :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
+                                     :opacity          (if (or none? active?) 1 0)}}]))
+                       ])]]
 
     [:<>
-     (row-with-button-action {:left-label "Accent color"
-                              :description "Choosing an accent color will override any theme you have selected."
-                              :-for       "toggle_radix_theme"
-                              :stretch    true
-                              :action     pick-theme})]))
+     (row-with-button-action {:left-label  "Accent color"
+                              :description "Choosing an accent color may override any theme you have selected."
+                              :-for        "toggle_radix_theme"
+                              :desc        (when-not _in-modal?
+                                             [:span.pl-6 (ui/render-keyboard-shortcut
+                                                           (shortcut-helper/gen-shortcut-seq :ui/accent-colors-picker))])
+                              :stretch     (boolean _in-modal?)
+                              :action      pick-theme})]))
+
+(rum/defc modal-accent-colors-inner
+  []
+  [:div.cp__settings-accent-colors-modal-inner
+   (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
@@ -569,7 +580,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]
@@ -704,7 +715,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

@@ -14,7 +14,7 @@
     }
 
     aside {
-      @apply bg-gray-400/5 p-4;
+      @apply bg-gray-03-alpha p-4;
 
       > ul > li {
         > a {
@@ -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,19 @@ body[data-settings-tab=keymap] {
     }
   }
 }
+
+.ui__modal[label=accent-colors-picker] {
+  .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/components/shortcut.cljs

@@ -475,5 +475,6 @@
 
                         (not unset?)
                         [:code.flex.items-center.bg-transparent
-                         (shui/shortcut-v1 (string/join " | " (map #(dh/binding-for-display id %) binding))
-                           nil {:size :md})])]]))))])])]]))
+                         (shui/shortcut
+                           (string/join " | " (map #(dh/binding-for-display id %) binding))
+                           {:size :md :interactive? true})])]]))))])])]]))

src/main/frontend/components/svg.cljs

@@ -82,7 +82,7 @@
   []
   [:svg.h-8.w-8.important
    {:view-box "0 0 512 512"
-    :fill     "var(--ls-error-color)"}
+    :fill     "var(--color-red-600)"}
    [:path
     {:d
      "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"}]])
@@ -91,7 +91,7 @@
   []
   [:svg.h-8.w-8.caution
    {:view-box "0 0 384 512"
-    :fill     "var(--ls-warning-color)"}
+    :fill     "var(--color-orange-600)"}
    [:path
     {:d
      "M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z"}]])
@@ -103,7 +103,7 @@
    [:svg.h-8.w-8.warning
     (merge
       {:view-box "0 0 576 512"
-       :fill     "var(--ls-warning-color)"}
+       :fill     "var(--color-orange-600)"}
       opts)
     [:path
      {:d

src/main/frontend/components/table.css

@@ -14,7 +14,7 @@
     font-size: 14px;
     font-weight: 400;
     color: var(--ls-primary-text-color);
-    border-bottom: 2px solid var(--ls-border-color);
+    border-bottom: 2px solid var(--ls-border-color, var(--rx-gray-05));
     padding: 10px 8px;
   }
 
@@ -24,11 +24,11 @@
   }
 
   tr:nth-child(even) {
-    background: var(--ls-table-tr-even-background-color);
+    background: var(--ls-table-tr-even-background-color, var(--rx-gray-03));
   }
 
   tr:nth-child(odd) {
-    background: var(--ls-primary-background-color);
+    background: var(--ls-primary-background-color, var(--rx-gray-01));
   }
 
   caption {

src/main/frontend/components/theme.cljs

@@ -22,12 +22,14 @@
         [restored-sidebar? set-restored-sidebar?] (rum/use-state false)]
 
     (rum/use-effect!
-     #(let [doc js/document.documentElement
-            cls (.-classList doc)]
+     #(let [^js doc js/document.documentElement
+            ^js cls (.-classList doc)
+            ^js cls-body (.-classList js/document.body)]
         (.setAttribute doc "data-theme" theme)
         (if (= theme "dark") ;; for tailwind dark mode
-          (.add cls "dark")
-          (.remove cls "dark"))
+          ; The white-theme is for backward compatibility. See: https://github.com/logseq/logseq/pull/4652.
+          (do (.add cls "dark") (doto cls-body (.remove "white-theme" "light-theme") (.add "dark-theme")))
+          (do (.remove cls "dark") (doto cls-body (.remove "dark-theme") (.add "white-theme" "light-theme"))))
         (ui/apply-custom-theme-effect! theme)
         (plugin-handler/hook-plugin-app :theme-mode-changed {:mode theme}))
      [theme])
@@ -111,11 +113,8 @@
      #(storage/set :file-sync/onboarding-state onboarding-state)
      [onboarding-state])
 
-    [:div
-     {:class    (util/classnames
-                 [(str theme "-theme")
-                  {:white-theme (= "light" theme)}]) ; The white-theme is for backward compatibility. See: https://github.com/logseq/logseq/pull/4652.
-      :on-click on-click}
+    [:div.theme-container
+     {:on-click on-click}
      child
 
      (pdf/default-embed-playground)]))

src/main/frontend/components/theme.css

@@ -1,6 +1,6 @@
 :root {
   scrollbar-width: thin;
-  scrollbar-color: or(--lx-gray-05, --ls-scrollbar-foreground-color) or(--lx-gray-02, --ls-scrollbar-background-color);
+  scrollbar-color: var(--lx-gray-05, var(--ls-scrollbar-foreground-color)) var(--lx-gray-02, var(--ls-scrollbar-background-color));
 
   --ls-z-index-level-0: 0;
   --ls-z-index-level-1: 9;
@@ -10,19 +10,25 @@
   --ls-z-index-level-5: 99999;
 }
 
-html {
+@media (prefers-color-scheme: dark) {
+  .preboot-loading {
+    color: lightgray;
+  }
+}
+
+.visible-scrollbar, html:not(.is-mac) {
   ::-webkit-scrollbar-thumb {
-    background-color: or(--ls-scrollbar-thumb-color, --lx-gray-05, --ls-scrollbar-foreground-color);
+    background-color: var(--lx-gray-05, var(--ls-scrollbar-foreground-color, var(--rx-gray-05)));
   }
 
   ::-webkit-scrollbar {
-    background-color: or(--ls-scrollbar-color, --lx-gray-02, --ls-scrollbar-background-color);
-    width: var(--ls-scrollbar-width);
+    background-color: var(--lx-gray-02, var(--ls-scrollbar-background-color, var(--rx-gray-02)));
+    width: var(--ls-scrollbar-width, 6px);
     height: 8px;
   }
 
   ::-webkit-scrollbar-thumb:active {
-    background-color: or(--ls-scrollbar-thumb-color-active, --lx-gray-06, --ls-scrollbar-thumb-hover-color);
+    background-color: var(--lx-gray-06, var(--ls-scrollbar-thumb-hover-color, var(--rx-gray-06)));
   }
 
   ::-webkit-scrollbar-corner {
@@ -30,47 +36,34 @@ html {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .preboot-loading {
-    color: lightgray;
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none !important; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none;
   }
 }
 
 .form-checkbox, .form-radio {
-  color: var(--ls-page-checkbox-color, #6093a0);
-  background-color: var(--ls-page-checkbox-color, #6093a0);
-  border-color: var(--ls-page-checkbox-border-color, #6093a0);
+  color: var(--ls-page-checkbox-color, hsl(var(--primary)/.4));
+  background-color: var(--ls-page-checkbox-color, var(--rx-gray-06));
+  border-color: var(--ls-page-checkbox-border-color, hsl(var(--border)));
   border: none;
   position: relative;
-  top: -1px;
-  margin-right: 2px;
 }
 
 .form-checkbox:hover {
   transform: scale(1.1);
 }
 
-html[data-theme='dark'] {
-  background-color: var(--ls-primary-background-color);
-
-  input.form-input {
-    background: none;
-  }
-}
-
-html[data-theme='light'] {
+html[data-theme='light'] .theme-container {
   .form-checkbox {
     &:focus {
       border-color: var(--ls-page-checkbox-border-color);
     }
   }
 
-  .cp__header {
-    a {
-      color: var(--ls-primary-text-color);
-    }
-  }
-
   a.right-sidebar-button {
     color: var(--ls-primary-text-color);
   }
@@ -80,14 +73,7 @@ html[data-theme='light'] {
   }
 }
 
-.hide-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none !important; /* Firefox */
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
+html[data-theme='dark'] .theme-container {}
 
 html.locked-scroll {
   overflow: hidden !important;
@@ -164,3 +150,7 @@ main.ls-fold-button-on-right {
     }
   }
 }
+
+main.theme-inner {
+  --left-sidebar-bg-color: var(--lx-gray-02, hsl(var(--secondary, var(--rx-gray-03-hsl))));
+}

src/main/frontend/components/user/login.cljs

@@ -84,4 +84,4 @@
     {:close-btn?      true
      :label           "user-login"
      :close-backdrop? false
-     :center?         true}))
+     :center?         false}))

src/main/frontend/components/whiteboard.cljs

@@ -188,7 +188,7 @@
     (fn [e]
       (util/stop e)
       (whiteboard-handler/create-new-whiteboard-and-redirect!))}
-   (ui/icon "plus")
+   (ui/icon "plus" {:size 32})
    [:span.dashboard-create-card-caption.select-none
     (t :whiteboard/dashboard-card-new-whiteboard)]])
 

src/main/frontend/components/whiteboard.css

@@ -44,19 +44,30 @@ h1.title.whiteboard-dashboard-title {
 }
 
 .dashboard-preview-card {
-  @apply transition;
-  border: 1px solid var(--ls-border-color);
+  @apply transition border;
 }
 
 .dashboard-create-card {
-  @apply items-center justify-center relative;
-  background-color: or(--ls-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color);
+  @apply items-center justify-center relative border opacity-90 hover:shadow-lg;
+
+  background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)));
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
-  border: 1px solid transparent;
+
+  .ls-icon-plus, .dashboard-create-card-caption {
+    @apply opacity-60;
+  }
+
+  &:hover {
+    @apply opacity-100;
+
+    .ls-icon-plus, .dashboard-create-card-caption {
+      @apply opacity-90;
+    }
+  }
 }
 
 .dark .dashboard-create-card {
-  background-color: or(--ls-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color);
+  background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
 }
 
 .dashboard-create-card i {
@@ -72,23 +83,14 @@ h1.title.whiteboard-dashboard-title {
   font-size: 14px;
 }
 
-.dashboard-create-card:hover {
-  background-color: var(--ls-selection-background-color);
-  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1),
-  0 2px 4px -2px rgba(16, 24, 40, 0.06);
-  border: 1px solid var(--ls-page-blockquote-border-color);
-}
-
 .dashboard-card-title {
-  @apply px-4 py-3 flex flex-col;
-  gap: 4px;
-  border-bottom: 1px solid var(--ls-border-color);
-  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color);
-  font-size: 16px;
+  @apply px-4 py-3 flex flex-col gap-1 border-b;
+
+  background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)));
 }
 
 .dark .dashboard-card-title {
-  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color);
+  background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
 }
 
 .dashboard-card-title-name {
@@ -153,11 +155,11 @@ input.tl-text-input {
   z-index: 2000;
   gap: 4px;
   line-height: 1.4;
-  background: or(--ls-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
+  background: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background))));
 }
 
 .dark .whiteboard-page-title-root {
-  background: or(--ls-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
+  background: var(--lx-gray-02, var(--ls-primary-background-color, hsl(var(--background))));
 }
 
 .whiteboard-page-title {
@@ -186,6 +188,7 @@ input.tl-text-input {
     border: none;
     box-shadow: none;
     padding: 0;
+    background-color: transparent;
   }
 }
 

src/main/frontend/extensions/code.css

@@ -1,10 +1,5 @@
 .extensions__code {
-  @apply relative;
-  z-index: 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
+  @apply relative z-0 flex flex-row flex-nowrap justify-between;
 
   &-lang {
     @apply p-1 text-sm;
@@ -51,7 +46,7 @@
   line-height: 1.45em;
 
   &-scroll {
-    padding-top: 18px;
+    padding-top: 14px;
     padding-bottom: 62px;
   }
 

src/main/frontend/extensions/handbooks/handbooks.css

@@ -13,7 +13,7 @@
       @apply dark:text-white px-3 pt-3 pb-2 sticky top-0 left-0 z-[4]
       transition-shadow duration-200;
 
-      background-color: var(--ls-tertiary-background-color);
+      background-color: var(--ls-tertiary-background-color1);
 
       .title {
         text-align: left;
@@ -33,11 +33,11 @@
       > .input-wrap {
         @apply mx-4 mb-2 flex rounded-lg mt-1.5;
 
-        border: 3px solid var(--ls-primary-background-color);
-        background-color: var(--ls-primary-background-color);
+        border: 3px solid var(--ls-primary-background-color1);
+        background-color: var(--ls-primary-background-color1);
 
         &:focus-within {
-          border: 3px solid var(--ls-secondary-border-color);
+          border: 3px solid var(--ls-secondary-border-color, var(--rx-gray-06));
         }
 
         > input {
@@ -76,7 +76,7 @@
       @apply text-sm px-3 py-2.5 rounded-lg cursor-pointer
       mb-2 active:opacity-90 select-none items-center;
 
-      background-color: var(--ls-secondary-background-color);
+      background-color: var(--ls-secondary-background-color1);
       border: 1px solid var(--ls-border-color);
       transition: background-color .3s;
 
@@ -104,7 +104,7 @@
       }
 
       &:hover, &.active {
-        background-color: var(--ls-primary-background-color);
+        background-color: var(--ls-primary-background-color1);
         border-color: var(--ls-secondary-border-color);
 
         > .l {
@@ -133,15 +133,15 @@
     .category-card {
       @apply flex rounded px-2 py-3 active:opacity-90 cursor-pointer transition-colors items-end;
 
-      border-left: 4px solid var(--ls-secondary-background-color);
-      background-color: var(--ls-secondary-background-color);
+      border-left: 4px solid var(--ls-secondary-background-color1);
+      background-color: var(--ls-secondary-background-color1);
 
       &[data-total="0"] {
         @apply hidden;
       }
 
       &:hover, &:active {
-        background-color: var(--ls-primary-background-color);
+        background-color: var(--ls-primary-background-color1);
       }
 
       > .icon-wrap {
@@ -282,7 +282,7 @@
           @apply relative flex flex-col rounded py-2 px-3 leading-5 select-none z-[1];
 
           color: var(--ls-primary-text-color);
-          background-color: var(--ls-secondary-background-color);
+          background-color: var(--ls-secondary-background-color1);
 
           small {
             @apply text-[11px] opacity-50 pl-0.5;
@@ -305,7 +305,7 @@
           ul {
             @apply absolute top-[58px] left-0 w-full list-none m-0 rounded-b py-2;
 
-            background-color: var(--ls-secondary-background-color);
+            background-color: var(--ls-secondary-background-color1);
             transform: translateY(-5px);
             max-height: 300px;
             overflow: auto;
@@ -314,7 +314,7 @@
               @apply list-none px-3 py-1 transition-colors text-sm;
 
               &:hover {
-                background-color: var(--ls-tertiary-background-color);
+                background-color: var(--ls-tertiary-background-color1);
               }
             }
           }
@@ -336,11 +336,16 @@
   }
 
   &-popup {
-    @apply fixed rounded-lg overflow-hidden
+    --ls-primary-background-color1: var(--ls-primary-background-color, var(--lx-gray-01, var(--rx-gray-02)));
+    --ls-secondary-background-color1: var(--ls-secondary-background-color, var(--lx-gray-03, var(--rx-gray-03)));
+    --ls-tertiary-background-color1: var(--ls-tertiary-background-color, var(--lx-gray-05, var(--rx-gray-05)));
+    --ls-quaternary-background-color1: var(--ls-quaternary-background-color, var(--lx-gray-08, var(--rx-gray-08)));
+
+    @apply fixed rounded-lg overflow-hidden border
     z-[19] shadow-lg flex justify-center flex-col;
 
-    background-color: var(--ls-tertiary-background-color);
-    border: 1px solid var(--ls-tertiary-background-color);
+    background-color: var(--ls-tertiary-background-color1);
+    border: 1px solid var(--ls-tertiary-background-color1);
     touch-action: none;
     height: 686px;
     max-height: 86vh;
@@ -352,7 +357,7 @@
 
 html[data-theme="light"] {
   .cp__handbooks-popup {
-    background-color: var(--ls-primary-background-color);
+    background-color: var(--ls-primary-background-color1);
 
     .input-wrap {
       background-color: #f1f1f1;
@@ -364,7 +369,7 @@ html[data-theme="light"] {
 
     .topic-card, :not(.as-primary).link-card {
       &:hover, &.active {
-        background-color: var(--ls-tertiary-background-color);
+        background-color: var(--ls-tertiary-background-color1);
         border-color: var(--ls-secondary-border-color);
       }
     }
@@ -372,27 +377,27 @@ html[data-theme="light"] {
 
   .cp__handbooks-content {
     .hd {
-      background-color: var(--ls-primary-background-color);
+      background-color: var(--ls-primary-background-color1);
     }
 
     .ft {
-      background-color: var(--ls-primary-background-color);
+      background-color: var(--ls-primary-background-color1);
     }
 
     .search {
-      background-color: var(--ls-primary-background-color);
+      background-color: var(--ls-primary-background-color1);
     }
 
     .chapters-select {
       .select-trigger {
-        background-color: var(--ls-tertiary-background-color);
+        background-color: var(--ls-tertiary-background-color1);
       }
     }
 
     .categories-list {
       .category-card {
         &:hover, &:active {
-          background-color: var(--ls-tertiary-background-color);
+          background-color: var(--ls-tertiary-background-color1);
         }
       }
     }

src/main/frontend/extensions/pdf/core.cljs

@@ -808,8 +808,8 @@
 
     (let [^js viewer        (:viewer state)
           in-system-window? (some-> viewer (.-$inSystemWindow))]
-      [:div.extensions__pdf-viewer-cnt
-       [:div.extensions__pdf-viewer
+      [:div.extensions__pdf-viewer-cnt.visible-scrollbar
+       [:div.extensions__pdf-viewer.overflow-x-auto
         {:ref *el-ref :class (util/classnames [{:is-area-dashed area-dashed?}])}
         [:div.pdfViewer "viewer pdf"]
         [:div.pp-holder]

src/main/frontend/extensions/pdf/pdf.css

@@ -425,15 +425,16 @@ input::-webkit-inner-spin-button {
   }
 
   &-resizer {
-    position: absolute;
-    width: 3px;
-    height: 88vh;
-    background-color: rgba(0, 0, 0, 0);
-    overflow: hidden;
-    z-index: 4;
-    top: 10vh;
-    cursor: col-resize;
-    right: 0;
+    @apply absolute w-[3px] h-screen overflow-hidden;
+    @apply z-10 right-0 cursor-col-resize;
+
+    transition: background-color 300ms;
+    transition-delay: 300ms;
+
+    &.is-active, &:hover,
+    &:focus, &:active {
+      @apply bg-primary/90;
+    }
   }
 
   &-hls-text-region {
@@ -841,14 +842,7 @@ input::-webkit-inner-spin-button {
     }
 
     .hl-area {
-      @apply relative;
-
-      display: inline-block;
-      cursor: text;
-      border: 1px solid #eee;
-      border-radius: 4px;
-      overflow: hidden;
-      margin-top: 4px;
+      @apply relative inline-block cursor-text border rounded-md overflow-hidden mt-1;
 
       .actions {
         @apply absolute right-1 top-1 flex opacity-0 transition-opacity;
@@ -936,7 +930,7 @@ body[data-page] {
     }
 
     &-viewer-cnt {
-      display: flex;
+      @apply flex overflow-x-hidden;
     }
 
     &-highlights {

src/main/frontend/extensions/tldraw.cljs

@@ -21,7 +21,8 @@
             [promesa.core :as p]
             [rum.core :as rum]
             [frontend.ui :as ui]
-            [frontend.components.whiteboard :as whiteboard]))
+            [frontend.components.whiteboard :as whiteboard]
+            [cljs-bean.core :as bean]))
 
 (def tldraw (r/adapt-class (gobj/get TldrawLogseq "App")))
 
@@ -79,11 +80,14 @@
          (map (fn [k] (js->clj (gobj/get props k) {:keywordize-keys true})) ["id" "className" "options"])))
 
 (rum/defc keyboard-shortcut
-  [props]
-  (let [shortcut (ui/keyboard-shortcut-from-config (keyword (gobj/get props "action")))]
-    (cond
-      (string? shortcut) (ui/render-keyboard-shortcut shortcut)
-      :else (interpose " | " (map ui/render-keyboard-shortcut shortcut)))))
+  [^js props]
+  (when-let [props (bean/->clj props)]
+    (let [{:keys [action shortcut opts]} props
+          shortcut (if (string? action) (ui/keyboard-shortcut-from-config (keyword action)) shortcut)
+          opts (merge {:interactive? false} opts)]
+      (cond
+        (string? shortcut) (ui/render-keyboard-shortcut shortcut opts)
+        :else (interpose " | " (map #(ui/render-keyboard-shortcut % opts) shortcut))))))
 
 (def tldraw-renderers {:Page page-cp
                        :Block block-cp

src/main/frontend/handler/events.cljs

@@ -5,6 +5,8 @@
   (:refer-clojure :exclude [run!])
   (:require ["@capacitor/filesystem" :refer [Directory Filesystem]]
             ["@sentry/react" :as Sentry]
+            [electron.ipc :as ipc]
+            [frontend.idb :as idb]
             [cljs-bean.core :as bean]
             [clojure.core.async :as async]
             [clojure.core.async.interop :refer [p->c]]
@@ -13,6 +15,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 +338,17 @@
 (defmethod handle :modal/show-themes-modal [_]
   (plugin/open-select-theme!))
 
+(defmethod handle :modal/toggle-accent-colors-modal [_]
+  (let [label "accent-colors-picker"]
+    (if (or (= label (state/get-modal-id))
+          (= label (some-> (state/get-sub-modals) (first) :modal/id)))
+      (state/close-sub-modal! label)
+      (state/set-sub-modal!
+        #(settings/modal-accent-colors-inner)
+        {:center? true
+         :id      label
+         :label   label}))))
+
 (rum/defc modal-output
   [content]
   content)
@@ -658,6 +672,22 @@
      #(do (page-handler/create-today-journal!)
           (file-sync-restart!)))))
 
+;; FIXME: move
+(defn- clear-cache!
+  []
+  (notification/show! "Clearing..." :warning false)
+  (p/let [_ (when (util/electron?)
+              (ipc/ipc "clearCache"))
+          _ (idb/clear-local-storage-and-idb!)]
+    (js/setTimeout
+      (fn [] (if (util/electron?)
+               (ipc/ipc :reloadWindowPage)
+               (js/window.location.reload)))
+      2000)))
+
+(defmethod handle :graph/clear-cache! [[_]]
+  (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

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

@@ -530,11 +530,11 @@
    :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"
-                                             :fn      state/cycle-color!}
+   :ui/accent-colors-picker                 {:binding "c c"
+                                             :fn      #(state/pub-event! [:modal/toggle-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/accent-colors-picker
+            :ui/accent-color-reset])
+       (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/accent-color-reset
+      :ui/accent-colors-picker]
+
+     :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!

src/main/frontend/state.cljs

@@ -7,7 +7,6 @@
             [clojure.string :as string]
             [dommy.core :as dom]
             [electron.ipc :as ipc]
-            [frontend.colors :as colors]
             [frontend.mobile.util :as mobile-util]
             [frontend.spec.storage :as storage-spec]
             [frontend.storage :as storage]
@@ -1390,14 +1389,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)))))
 
@@ -1433,7 +1433,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
@@ -2229,19 +2230,10 @@ 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))
 
-(defn cycle-color! []
-  (let [current-color (get-color-accent)
-        next-color (->> (cons nil colors/color-list)
-                        (drop-while #(not= % current-color))
-                        (second))]
-    (if next-color
-      (set-color-accent! next-color)
-      (unset-color-accent!))))
-
 (defn handbook-open?
   []
   (:ui/handbooks-open? @state))

src/main/frontend/tippy-tooltip.css

@@ -5,7 +5,7 @@
 .tippy-popper[x-placement^=top] [x-arrow],
 .tippy-popper[x-placement^=top] [x-arrow].arrow-small,
 .tippy-popper[x-placement^=top] [x-arrow].arrow-big {
-  border-top-color: var(--ls-quaternary-background-color);
+  border-top-color: var(--ls-tertiary-background-color);
 }
 
 .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle],
@@ -25,7 +25,7 @@
 .tippy-popper[x-placement^=bottom] [x-arrow],
 .tippy-popper[x-placement^=bottom] [x-arrow].arrow-small,
 .tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
-  border-bottom-color: var(--ls-quaternary-background-color);
+  border-bottom-color: var(--ls-tertiary-background-color);
 }
 
 .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow],
@@ -37,7 +37,7 @@
 .tippy-popper[x-placement^=left] [x-arrow],
 .tippy-popper[x-placement^=left] [x-arrow].arrow-small,
 .tippy-popper[x-placement^=left] [x-arrow].arrow-big {
-  border-left-color: var(--ls-quaternary-background-color);
+  border-left-color: var(--ls-tertiary-background-color);
 }
 
 .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow],
@@ -49,21 +49,21 @@
 .tippy-popper[x-placement^=right] [x-arrow],
 .tippy-popper[x-placement^=right] [x-arrow].arrow-small,
 .tippy-popper[x-placement^=right] [x-arrow].arrow-big {
-  border-right-color: var(--ls-quaternary-background-color);
+  border-right-color: var(--ls-tertiary-background-color);
 }
 
 .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow],
 .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
 .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-right-color: var(--ls-secondary-background-color);
+  border-right-color: var(--ls-tertiary-background-color);
 }
 
 .tippy-tooltip {
-  color: var(--ls-primary-text-color);
-  font-size: inherit;
-  padding: 0;
+  @apply shadow border border-gray-07 dark:border-gray-05 px-2 py-1;
+
   will-change: auto;
-  background-color: var(--ls-quaternary-background-color);
+  color: var(--ls-primary-text-color, hsl(var(--foreground)));
+  background-color: var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)));
 }
 
 .tippy-tooltip [x-circle] {
@@ -75,7 +75,8 @@
 }
 
 .tippy-wrapper {
-  background-color: var(--ls-quaternary-background-color);
+  border-radius: 8px;
+  margin: 0 -6px;
 }
 
 .tippy-hover {

src/main/frontend/ui.cljs

@@ -177,14 +177,14 @@
                        (string/split #" "))
                    sequence)]
     [:span.keyboard-shortcut
-     (shui/shortcut-v1 sequence opts)]))
+     (shui/shortcut sequence opts)]))
 
 (rum/defc menu-link
   [{:keys [only-child? no-padding? class shortcut] :as options} child]
   (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"))
@@ -194,7 +194,7 @@
 
      [:span.flex-1 child]
      (when shortcut
-       [:span.ml-1 (render-keyboard-shortcut shortcut)])]))
+       [:span.ml-1 (render-keyboard-shortcut shortcut {:interactive? false})])]))
 
 (rum/defc dropdown-with-links
   [content-fn links
@@ -647,13 +647,16 @@
         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!))
         modal-panel-content (or modal-panel-content (fn [_close] [:div]))]
     [:div.ui__modal
-     {:style {:z-index (if show? 999 -1)}
-      :label label}
+     {:style {:z-index (if show? 999 -1)
+              :display (if show? "flex" "none")}
+      :label label
+      :class class}
      (css-transition
       {:in show? :timeout 0}
       (fn [state]
@@ -718,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]

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: var(--lx-gray-05, var(--ls-menu-hover-color, hsl(var(--secondary))));
+
         .has-help small {
           visibility: visible;
         }
@@ -35,7 +32,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--ls-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color);
+        color: var(--lx-gray-12, var(--ls-primary-text-color, hsl(var(--secondary))));
       }
     }
   }
@@ -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 {
@@ -71,8 +66,10 @@
   }
 
   .notification-area {
-    background-color: or(--logseq-of-notification-background, --lx-gray-04, --ls-tertiary-background-color, #fff);
-    color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color);
+    @apply border;
+
+    background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, --rx-gray-03);
+    color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color, --rx-gray-11);
   }
 }
 
@@ -103,7 +100,7 @@
   top-12 sm:top-[calc(3vh+50px)];
 
   &-overlay {
-    @apply fixed inset-0 transition-opacity;
+    @apply fixed inset-0;
   }
 
   &-overlay div {
@@ -113,10 +110,9 @@
   }
 
   &-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);
+    background: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--popover))));
 
     .panel-content {
       overflow-y: auto;
@@ -163,7 +159,8 @@
     }
   }
 
-  &[label="ls-modal-align-center"] {
+  &[label="ls-modal-align-center"],
+  &.as-center{
     top: 0;
 
     .ui__modal-panel {
@@ -283,10 +280,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-md bg-popover overflow-hidden;
+
+  .menu-links-wrapper {
+    @apply border-0;
+  }
 }
 
 .dropdown-caret {
@@ -306,10 +304,10 @@ html.is-mobile {
   @apply block w-full pl-3 pr-10 py-2 text-base leading-6 rounded
   border-gray-300 focus:outline-none sm:text-sm sm:leading-5;
 
-  background-color: or(--ls-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent);
+  background-color: var(--lx-gray-03, var(--ls-primary-background-color, transparent));
   background-repeat: no-repeat;
   border-width: 1px;
-  border-color: or(--ls-form-select-border-color, --lx-gray-07, --ls-border-color);
+  border-color: var(--lx-gray-07, var(--ls-border-color));
 
   &.is-small {
     @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@@ -317,11 +315,7 @@ html.is-mobile {
 }
 
 .form-input {
-  @apply block w-full pl-2
-  sm:text-sm sm:leading-5 rounded;
-
-  border-width: 1px;
-  border-color: or(--ls-form-input-border-color, --lx-gray-07, --ls-border-color);
+  @apply block w-full pl-2 sm:text-sm sm:leading-5 rounded bg-background border border-gray-07;
 
   &:focus {
     box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
@@ -354,9 +348,9 @@ html.is-mobile {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  border-color: or(--ls-type-icon-border-color, --lx-gray-03, --ls-primary-background-color);
+  border-color: var(--lx-gray-03, var(--ls-primary-background-color));
   overflow: hidden;
-  color: or(--ls-type-icon-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: var(--lx-gray-12, var(--ls-primary-text-color));
 
   .ti,
   .tie {
@@ -365,7 +359,7 @@ html.is-mobile {
 
   &:before {
     @apply block absolute inset-0 ;
-    background: or(--ls-type-icon-before-color, --lx-gray-03, --ls-primary-background-color);
+    background: var(--lx-gray-03, var(--ls-primary-background-color));
     content: " ";
   }
 }
@@ -379,7 +373,7 @@ html.is-mobile {
 }
 
 .ui__toggle-background-off {
-  background: or(--ls-toggle-off-background, --lx-gray-08, rgb(212, 212, 212));
+  background: var(--lx-gray-08, rgb(212, 212, 212));
 }
 
 input[type='range'] {

src/resources/dicts/en.edn

@@ -261,7 +261,7 @@
  :editor/expand-block-children "Expand all"
  :editor/collapse-block-children "Collapse all"
  :editor/delete-selection "Delete selected blocks"
- :editor/cycle-todo "Rotate the TODO state of the current item"
+ :editor/cycle-todo "Rotate the TODO state"
  :dev/show-page-data "(Dev) Show page data"
  :dev/show-block-data "(Dev) Show block data"
  :dev/show-block-ast "(Dev) Show block AST"
@@ -726,8 +726,8 @@
   :editor/backward-kill-word    "Delete a word backwards"
   :editor/replace-block-reference-at-point "Replace block reference with its content at point"
   :editor/paste-text-in-one-block-at-point "Paste text into one block at point"
-  :editor/insert-youtube-timestamp         "Insert youtube timestamp"
-  :editor/cycle-todo              "Rotate the TODO state of the current item"
+  :editor/insert-youtube-timestamp "Insert youtube timestamp"
+  :editor/cycle-todo              "Rotate the TODO state"
   :editor/up                      "Move cursor up / Select up"
   :editor/down                    "Move cursor down / Select down"
   :editor/left                    "Move cursor left / Open selected block at beginning"
@@ -823,8 +823,8 @@
   :ui/toggle-help                 "Toggle help"
   :ui/toggle-theme                "Toggle between dark/light theme"
   :ui/toggle-contents             "Toggle Contents in sidebar"
-  :ui/cycle-color-off             "Cycle color off"
-  :ui/cycle-color                 "Cycle color"
+  :ui/accent-color-reset          "Reset accent color"
+  :ui/accent-colors-picker        "Pick  accent color"
    ;;  :ui/open-new-window             "Open another window"
   :command/toggle-favorite        "Add to/remove from favorites"
   :editor/open-file-in-default-app "Open file in default app"

src/resources/dicts/es.edn

@@ -226,8 +226,6 @@
  :command.sidebar/close-top                         "Cierra el elemento superior en la barra lateral derecha"
  :command.sidebar/open-today-page                   "Abrir la página de hoy en barra lateral derecha"
  :command.ui/clear-all-notifications                "Borrar todas las notificaciones"
- :command.ui/cycle-color                            "Ciclo de color"
- :command.ui/cycle-color-off                        "Ciclo de color desactivado"
  :command.ui/goto-plugins                           "Ir al panel de extensiones"
  :command.ui/install-plugins-from-file              "Instalar extensiones de plugins.edn"
  :command.ui/select-theme-color                     "Seleccionar temas de colores disponibles"

src/resources/dicts/fr.edn

@@ -408,8 +408,6 @@
     :command.search/re-index  "Reconstruire l'index de recherche"
     :command.sidebar/clear  "Vider intégralement la barre latérale droite"
     :command.sidebar/open-today-page  "Ouvrir la page du jour dans la barre latérale droite"
-    :command.ui/cycle-color "Bascule de la couleur"
-    :command.ui/cycle-color-off "Bascule de la couleur désactivée"
     :command.ui/goto-plugins  "Aller vers le panneau des extensions"
     :command.ui/install-plugins-from-file  "Installer les extensions depuis plugins.edn"
     :command.ui/select-theme-color  "Sélectionner les couleurs disponibles du thème"

src/resources/dicts/it.edn

@@ -396,8 +396,6 @@
  :command.pdf/find "PDF: cerca testo nel documento"
  :command.sidebar/close-top "Chiudi l'elemento in alto nel pannello laterale destra"
  :command.ui/clear-all-notifications "Cancella tutte le notifiche"
- :command.ui/cycle-color "Cicla colore"
- :command.ui/cycle-color-off "Disattiva cicla colore"
  :command.ui/install-plugins-from-file "Installa plugin da plugins.edn"
  :command.whiteboard/bring-forward "Sposta in avanti"
  :command.whiteboard/bring-to-front "Sposta in fronte"

src/resources/dicts/ja.edn

@@ -798,8 +798,6 @@
  :command.ui/toggle-help "ヘルプの表示／非表示"
  :command.ui/toggle-theme "テーマの切り替え"
  :command.ui/toggle-contents "目次の開閉"
- :command.ui/cycle-color-off "循環させた色を元に戻す"
- :command.ui/cycle-color "色を循環させる"
 
  :command.command/toggle-favorite "お気に入りへ追加／削除"
  :command.editor/open-file-in-default-app "ファイルを既定のアプリで開く"

src/resources/dicts/nb-no.edn

@@ -792,8 +792,6 @@
 
  :command.command-palette/toggle "Søk kommandoer"
  :command.go/search-in-page "Søk blokker på side"
- :command.ui/cycle-color "Veksle farge"
- :command.ui/cycle-color-off "Veksle farge av"
  :command.whiteboard/clone-down "Klon ned"
  :command.whiteboard/clone-left "Klon venstre"
  :command.whiteboard/clone-right "Klon høyre"

src/resources/dicts/pt-br.edn

@@ -763,8 +763,6 @@
  :command.sidebar/close-top "Fechar o item superior na barra lateral direita"
  :command.sidebar/open-today-page "Abrir a página de hoje na barra lateral direita"
  :command.ui/clear-all-notifications "Limpar todas as notificações"
- :command.ui/cycle-color "Mudar cor"
- :command.ui/cycle-color-off "Desativar mudança de cor"
  :command.ui/goto-plugins "Ir para o painel de plugins"
  :command.ui/install-plugins-from-file "Instalar plugins do arquivo plugins.edn"
  :command.ui/select-theme-color "Selecionar cores de tema disponíveis"

src/resources/dicts/sk.edn

@@ -783,8 +783,6 @@
  :command.ui/toggle-help                           "Zobraziť/Skryť pomocníka"
  :command.ui/toggle-theme                          "Prepínať medzi tmavým/svetlým motívom"
  :command.ui/toggle-contents                       "Zobraziť/Skryť obsah na bočnom paneli"
- :command.ui/cycle-color-off                       "Vypnúť zmenu farieb"
- :command.ui/cycle-color                           "Zmeniť farbu"
  :command.command/toggle-favorite                  "Pridať/Odstrániť z obľúbených"
  :command.editor/open-file-in-default-app          "Otvoriť súbor v predvolenej aplikácii"
  :command.editor/open-file-in-directory            "Otvoriť súbor v nadradenom adresári"

src/resources/dicts/tr.edn

@@ -818,8 +818,6 @@
  :command.ui/toggle-help                 "Yardımı aç/kapat"
  :command.ui/toggle-theme                "Koyu ve açık tema arasında geçiş yap"
  :command.ui/toggle-contents             "Kenar çubuğundaki içeriği aç/kapat"
- :command.ui/cycle-color-off             "Renk değiştirmeyi kapat"
- :command.ui/cycle-color                 "Renk değiştir"
  :command.command/toggle-favorite        "Sık kullanılanlara ekle/çıkar"
  :command.editor/open-file-in-default-app "Dosyayı varsayılan uygulamada aç"
  :command.editor/open-file-in-directory   "Dosyayı üst dizinde aç"

tailwind.all.css

@@ -5,6 +5,7 @@
 
 @import "packages/ui/src/radix.css";
 @import "packages/ui/src/radix-hsl.css";
+@import "packages/ui/src/vars-classic.css";
 @import "packages/ui/src/colors.css";
 @import "packages/ui/src/index.css";
 @import "resources/css/shui.css";

tailwind.config.js

@@ -2,73 +2,22 @@ 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, --color-blue-900)',
-  'accent-06': 'or(' + override + ', --lx-accent-06, --color-blue-800)',
-  'accent-07': 'or(' + override + ', --lx-accent-07, --color-blue-700)',
-  'accent-08': 'or(' + override + ', --lx-accent-08, --color-blue-600)',
-  'accent-09': 'or(' + override + ', --lx-accent-09, --color-blue-500)',
-  'accent-10': 'or(' + override + ', --lx-accent-10, --color-blue-400)',
-  'accent-11': 'or(' + override + ', --lx-accent-11, --color-blue-200)',
-  'accent-12': 'or(' + override + ', --lx-accent-12, --color-blue-50)',
-  '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))',
   'foreground': 'hsl(var(--accent-foreground))',
-  '01': 'var(--lx-accent-01)',
-  '02': 'var(--lx-accent-02)',
-  '03': 'var(--lx-accent-03)',
-  '04': 'var(--lx-accent-04)',
-  '05': 'var(--lx-accent-05)',
-  '06': 'var(--lx-accent-06)',
-  '07': 'var(--lx-accent-07)',
-  '08': 'var(--lx-accent-08)',
-  '09': 'var(--lx-accent-09)',
-  '10': 'var(--lx-accent-10)',
-  '11': 'var(--lx-accent-11)',
-  '12': 'var(--lx-accent-12)',
+  '01': 'var(--lx-accent-01, --rx-gray-01)',
+  '02': 'var(--lx-accent-02, hsl(var(--accent)/.1))',
+  '03': 'var(--lx-accent-03, hsl(var(--accent)/.15))',
+  '04': 'var(--lx-accent-04, hsl(var(--accent)/.2))',
+  '05': 'var(--lx-accent-05, hsl(var(--accent)/.3))',
+  '06': 'var(--lx-accent-06, hsl(var(--accent)/.4))',
+  '07': 'var(--lx-accent-07, hsl(var(--accent)/.5))',
+  '08': 'var(--lx-accent-08, hsl(var(--accent)/.6))',
+  '09': 'var(--lx-accent-09, hsl(var(--accent)/.7))',
+  '10': 'var(--lx-accent-10, hsl(var(--accent)/.8))',
+  '11': 'var(--lx-accent-11, hsl(var(--accent)/.9))',
+  '12': 'var(--lx-accent-12, --rx-gray-12)',
   '01-alpha': 'var(--lx-accent-01-alpha)',
   '02-alpha': 'var(--lx-accent-02-alpha)',
   '03-alpha': 'var(--lx-accent-03-alpha)',
@@ -85,30 +34,30 @@ const accent = {
 
 const gray = {
   ...colors.gray,
-  '01': 'var(--lx-gray-01)',
-  '02': 'var(--lx-gray-02)',
-  '03': 'var(--lx-gray-03)',
-  '04': 'var(--lx-gray-04)',
-  '05': 'var(--lx-gray-05)',
-  '06': 'var(--lx-gray-06)',
-  '07': 'var(--lx-gray-07)',
-  '08': 'var(--lx-gray-08)',
-  '09': 'var(--lx-gray-09)',
-  '10': 'var(--lx-gray-10)',
-  '11': 'var(--lx-gray-11)',
-  '12': 'var(--lx-gray-12)',
-  '01-alpha': 'var(--lx-gray-01-alpha)',
-  '02-alpha': 'var(--lx-gray-02-alpha)',
-  '03-alpha': 'var(--lx-gray-03-alpha)',
-  '04-alpha': 'var(--lx-gray-04-alpha)',
-  '05-alpha': 'var(--lx-gray-05-alpha)',
-  '06-alpha': 'var(--lx-gray-06-alpha)',
-  '07-alpha': 'var(--lx-gray-07-alpha)',
-  '08-alpha': 'var(--lx-gray-08-alpha)',
-  '09-alpha': 'var(--lx-gray-09-alpha)',
-  '10-alpha': 'var(--lx-gray-10-alpha)',
-  '11-alpha': 'var(--lx-gray-11-alpha)',
-  '12-alpha': 'var(--lx-gray-12-alpha)',
+  '01': 'var(--lx-gray-01, var(--ls-primary-background-color, var(--rx-gray-01)))',
+  '02': 'var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)))',
+  '03': 'var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)))',
+  '04': 'var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)))',
+  '05': 'var(--lx-gray-05, var(--rx-gray-05))',
+  '06': 'var(--lx-gray-06, var(--rx-gray-06))',
+  '07': 'var(--lx-gray-07, var(--rx-gray-07))',
+  '08': 'var(--lx-gray-08, var(--rx-gray-08))',
+  '09': 'var(--lx-gray-09, var(--rx-gray-09))',
+  '10': 'var(--lx-gray-10, var(--rx-gray-10))',
+  '11': 'var(--lx-gray-11, var(--rx-gray-11))',
+  '12': 'var(--lx-gray-12, var(--rx-gray-12))',
+  '01-alpha': 'var(--lx-gray-01-alpha, var(--rx-gray-01-alpha))',
+  '02-alpha': 'var(--lx-gray-02-alpha, var(--rx-gray-02-alpha))',
+  '03-alpha': 'var(--lx-gray-03-alpha, var(--rx-gray-03-alpha))',
+  '04-alpha': 'var(--lx-gray-04-alpha, var(--rx-gray-04-alpha))',
+  '05-alpha': 'var(--lx-gray-05-alpha, var(--rx-gray-05-alpha))',
+  '06-alpha': 'var(--lx-gray-06-alpha, var(--rx-gray-06-alpha))',
+  '07-alpha': 'var(--lx-gray-07-alpha, var(--rx-gray-07-alpha))',
+  '08-alpha': 'var(--lx-gray-08-alpha, var(--rx-gray-08-alpha))',
+  '09-alpha': 'var(--lx-gray-09-alpha, var(--rx-gray-09-alpha))',
+  '10-alpha': 'var(--lx-gray-10-alpha, var(--rx-gray-10-alpha))',
+  '11-alpha': 'var(--lx-gray-11-alpha, var(--rx-gray-11-alpha))',
+  '12-alpha': 'var(--lx-gray-12-alpha, var(--rx-gray-12-alpha))',
 }
 
 function exposeColorsToCssVars ({ addBase, theme }) {
@@ -194,8 +143,7 @@ module.exports = {
     require('@tailwindcss/line-clamp'),
     require('tailwind-capitalize-first-letter'),
     require('tailwindcss-animate'),
-    exposeColorsToCssVars,
-    withOverride,
+    exposeColorsToCssVars
   ],
   theme: {
     extend: {
@@ -227,15 +175,15 @@ module.exports = {
         'lmd': '728px',
         'llg': '960px'
       },
-      backgroundColor: {
-        ...lx('--lx-bg-override'),
-      },
-      textColor: {
-        ...lx('--lx-text-override'),
-      },
-      borderColor: {
-        ...lx('--lx-border-override'),
-      },
+      // backgroundColor: {
+      //   ...lx('--lx-bg-override'),
+      // },
+      // textColor: {
+      //   ...lx('--lx-text-override'),
+      // },
+      // borderColor: {
+      //   ...lx('--lx-border-override'),
+      // },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
@@ -279,6 +227,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))',

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -1,16 +1,24 @@
 import { useApp } from '@tldraw/react'
 import { LogseqContext } from '../../lib/logseq-context'
-import { MOD_KEY, AlignType, DistributeType, isDev, EXPORT_PADDING } from '@tldraw/core'
+import {
+  MOD_KEY,
+  AlignType,
+  DistributeType,
+  isDev,
+  EXPORT_PADDING
+} from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { KeyboardShortcut } from '../KeyboardShortcut'
 import * as React from 'react'
 
-import * as ReactContextMenu from '@radix-ui/react-context-menu'
 import * as Separator from '@radix-ui/react-separator'
 import { toJS } from 'mobx'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 interface ContextMenuProps {
   children: React.ReactNode
   collisionRef: React.RefObject<HTMLDivElement>
@@ -35,8 +43,8 @@ export const ContextMenu = observer(function ContextMenu({
   }, [])
 
   return (
-    <ReactContextMenu.Root
-      onOpenChange={open => {
+    <LSUI.ContextMenu
+      onOpenChange={(open: boolean) => {
         if (open && !app.isIn('select.contextMenu')) {
           app.transition('select').selectedTool.transition('contextMenu')
         } else if (!open && app.isIn('select.contextMenu')) {
@@ -44,12 +52,12 @@ export const ContextMenu = observer(function ContextMenu({
         }
       }}
     >
-      <ReactContextMenu.Trigger
+      <LSUI.ContextMenuTrigger
         disabled={app.editingShape && Object.keys(app.editingShape).length !== 0}
       >
         {children}
-      </ReactContextMenu.Trigger>
-      <ReactContextMenu.Content
+      </LSUI.ContextMenuTrigger>
+      <LSUI.ContextMenuContent
         className="tl-menu tl-context-menu"
         ref={rContent}
         onEscapeKeyDown={() => app.transition('select')}
@@ -62,34 +70,35 @@ export const ContextMenu = observer(function ContextMenu({
             !app.readOnly &&
             app.selectedShapesArray?.some(s => !s.props.isLocked) && (
               <>
-                <ReactContextMenu.Item>
+                <LSUI.ContextMenuItem className={'tl-menu-button-row-wrap'}>
                   <div className="tl-menu-button-row pb-0">
                     <Button
                       tooltip={t('whiteboard/align-left')}
                       onClick={() => runAndTransition(() => app.align(AlignType.Left))}
                     >
-                      <TablerIcon name="layout-align-left" />
+                      <TablerIcon name="layout-align-left"/>
                     </Button>
                     <Button
                       tooltip={t('whiteboard/align-center-horizontally')}
                       onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
                     >
-                      <TablerIcon name="layout-align-center" />
+                      <TablerIcon name="layout-align-center"/>
                     </Button>
                     <Button
                       tooltip={t('whiteboard/align-right')}
                       onClick={() => runAndTransition(() => app.align(AlignType.Right))}
                     >
-                      <TablerIcon name="layout-align-right" />
+                      <TablerIcon name="layout-align-right"/>
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <Separator.Root className="tl-toolbar-separator"
+                                    orientation="vertical"/>
                     <Button
                       tooltip={t('whiteboard/distribute-horizontally')}
                       onClick={() =>
                         runAndTransition(() => app.distribute(DistributeType.Horizontal))
                       }
                     >
-                      <TablerIcon name="layout-distribute-vertical" />
+                      <TablerIcon name="layout-distribute-vertical"/>
                     </Button>
                   </div>
                   <div className="tl-menu-button-row pt-0">
@@ -97,135 +106,130 @@ export const ContextMenu = observer(function ContextMenu({
                       tooltip={t('whiteboard/align-top')}
                       onClick={() => runAndTransition(() => app.align(AlignType.Top))}
                     >
-                      <TablerIcon name="layout-align-top" />
+                      <TablerIcon name="layout-align-top"/>
                     </Button>
                     <Button
                       tooltip={t('whiteboard/align-center-vertically')}
                       onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
                     >
-                      <TablerIcon name="layout-align-middle" />
+                      <TablerIcon name="layout-align-middle"/>
                     </Button>
                     <Button
                       tooltip={t('whiteboard/align-bottom')}
                       onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
                     >
-                      <TablerIcon name="layout-align-bottom" />
+                      <TablerIcon name="layout-align-bottom"/>
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <Separator.Root className="tl-toolbar-separator"
+                                    orientation="vertical"/>
                     <Button
                       tooltip={t('whiteboard/distribute-vertically')}
                       onClick={() =>
                         runAndTransition(() => app.distribute(DistributeType.Vertical))
                       }
                     >
-                      <TablerIcon name="layout-distribute-horizontal" />
+                      <TablerIcon name="layout-distribute-horizontal"/>
                     </Button>
                   </div>
-                </ReactContextMenu.Item>
-                <ReactContextMenu.Separator className="menu-separator" />
-                <ReactContextMenu.Item
+                </LSUI.ContextMenuItem>
+                <LSUI.ContextMenuSeparator className="menu-separator"/>
+                <LSUI.ContextMenuItem
                   className="tl-menu-item"
                   onClick={() => runAndTransition(app.packIntoRectangle)}
                 >
-                  <TablerIcon className="tl-menu-icon" name="layout-grid" />
+                  <TablerIcon className="tl-menu-icon" name="layout-grid"/>
                   {t('whiteboard/pack-into-rectangle')}
-                </ReactContextMenu.Item>
-                <ReactContextMenu.Separator className="menu-separator" />
+                </LSUI.ContextMenuItem>
+                <LSUI.ContextMenuSeparator className="menu-separator"/>
               </>
             )}
           {app.selectedShapes?.size > 0 && (
             <>
-              <ReactContextMenu.Item
+              <LSUI.ContextMenuItem
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.api.zoomToSelection)}
               >
+                <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
                 {t('whiteboard/zoom-to-fit')}
-                <KeyboardShortcut action="whiteboard/zoom-to-fit" />
-              </ReactContextMenu.Item>
-              <ReactContextMenu.Separator className="menu-separator" />
+                <KeyboardShortcut action="whiteboard/zoom-to-fit"/>
+              </LSUI.ContextMenuItem>
+              <LSUI.ContextMenuSeparator className="menu-separator"/>
             </>
           )}
           {(app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) ||
-            app.selectedShapesArray.length > 1) &&
+              app.selectedShapesArray.length > 1) &&
             app.selectedShapesArray?.some(s => !s.props.isLocked) &&
             !app.readOnly && (
               <>
                 {app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) && (
-                  <ReactContextMenu.Item
+                  <LSUI.ContextMenuItem
                     className="tl-menu-item"
                     onClick={() => runAndTransition(app.api.unGroup)}
                   >
-                    <TablerIcon className="tl-menu-icon" name="ungroup" />
+                    <TablerIcon className="tl-menu-icon" name="ungroup"/>
                     {t('whiteboard/ungroup')}
-                    <KeyboardShortcut action="whiteboard/ungroup" />
-                  </ReactContextMenu.Item>
+                    <KeyboardShortcut action="whiteboard/ungroup"/>
+                  </LSUI.ContextMenuItem>
                 )}
                 {app.selectedShapesArray.length > 1 &&
                   app.selectedShapesArray?.some(s => !s.props.isLocked) && (
-                    <ReactContextMenu.Item
+                    <LSUI.ContextMenuItem
                       className="tl-menu-item"
                       onClick={() => runAndTransition(app.api.doGroup)}
                     >
-                      <TablerIcon className="tl-menu-icon" name="group" />
+                      <TablerIcon className="tl-menu-icon" name="group"/>
                       {t('whiteboard/group')}
-                      <KeyboardShortcut action="whiteboard/group" />
-                    </ReactContextMenu.Item>
+                      <KeyboardShortcut action="whiteboard/group"/>
+                    </LSUI.ContextMenuItem>
                   )}
-                <ReactContextMenu.Separator className="menu-separator" />
+                <LSUI.ContextMenuSeparator className="menu-separator"/>
               </>
             )}
           {app.selectedShapes?.size > 0 && app.selectedShapesArray?.some(s => !s.props.isLocked) && (
             <>
               {!app.readOnly && (
-                <ReactContextMenu.Item
+                <LSUI.ContextMenuItem
                   className="tl-menu-item"
                   onClick={() => runAndTransition(app.cut)}
                 >
-                  <TablerIcon className="tl-menu-icon" name="cut" />
+                  <TablerIcon className="tl-menu-icon" name="cut"/>
                   {t('whiteboard/cut')}
-                </ReactContextMenu.Item>
+                </LSUI.ContextMenuItem>
               )}
-              <ReactContextMenu.Item
+              <LSUI.ContextMenuItem
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.copy)}
               >
-                <TablerIcon className="tl-menu-icon" name="copy" />
+                <TablerIcon className="tl-menu-icon" name="copy"/>
                 {t('whiteboard/copy')}
-                <KeyboardShortcut action="editor/copy" />
-              </ReactContextMenu.Item>
+                <KeyboardShortcut action="editor/copy"/>
+              </LSUI.ContextMenuItem>
             </>
           )}
           {!app.readOnly && (
-            <ReactContextMenu.Item
+            <LSUI.ContextMenuItem
               className="tl-menu-item"
               onClick={() => runAndTransition(app.paste)}
             >
-              <TablerIcon className="tl-menu-icon" name="clipboard" />
+              <TablerIcon className="tl-menu-icon" name="clipboard"/>
               {t('whiteboard/paste')}
-              <div className="tl-menu-right-slot">
-                <span className="keyboard-shortcut">
-                  <code>{MOD_KEY}+v</code>
-                </span>
-              </div>
-            </ReactContextMenu.Item>
+              <KeyboardShortcut shortcut={`${MOD_KEY}+v`}/>
+            </LSUI.ContextMenuItem>
           )}
           {app.selectedShapes?.size === 1 && !app.readOnly && (
-            <ReactContextMenu.Item
+            <LSUI.ContextMenuItem
               className="tl-menu-item"
               onClick={() => runAndTransition(() => app.paste(undefined, true))}
             >
+              <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
               {t('whiteboard/paste-as-link')}
-              <div className="tl-menu-right-slot">
-                <span className="keyboard-shortcut">
-                  <code>{MOD_KEY}+⇧+v</code>
-                </span>
-              </div>
-            </ReactContextMenu.Item>
+              <KeyboardShortcut shortcut={`${MOD_KEY}+⇧+v`}/>
+            </LSUI.ContextMenuItem>
           )}
           {app.selectedShapes?.size > 0 && (
             <>
-              <ReactContextMenu.Separator className="menu-separator" />
-              <ReactContextMenu.Item
+              <LSUI.ContextMenuSeparator className="menu-separator"/>
+              <LSUI.ContextMenuItem
                 className="tl-menu-item"
                 onClick={() =>
                   runAndTransition(() =>
@@ -239,107 +243,113 @@ export const ContextMenu = observer(function ContextMenu({
                   )
                 }
               >
-                <TablerIcon className="tl-menu-icon" name="file-export" />
+                <TablerIcon className="tl-menu-icon" name="file-export"/>
                 {t('whiteboard/export')}
                 <div className="tl-menu-right-slot">
                   <span className="keyboard-shortcut"></span>
                 </div>
-              </ReactContextMenu.Item>
+              </LSUI.ContextMenuItem>
             </>
           )}
-          <ReactContextMenu.Separator className="menu-separator" />
-          <ReactContextMenu.Item
+          <LSUI.ContextMenuSeparator className="menu-separator"/>
+          <LSUI.ContextMenuItem
             className="tl-menu-item"
             onClick={() => runAndTransition(app.api.selectAll)}
           >
+            <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
             {t('whiteboard/select-all')}
-            <KeyboardShortcut action="editor/select-parent" />
-          </ReactContextMenu.Item>
+            <KeyboardShortcut action="editor/select-parent"/>
+          </LSUI.ContextMenuItem>
           {app.selectedShapes?.size > 1 && (
-            <ReactContextMenu.Item
+            <LSUI.ContextMenuItem
               className="tl-menu-item"
               onClick={() => runAndTransition(app.api.deselectAll)}
             >
+              <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
               {t('whiteboard/deselect-all')}
-            </ReactContextMenu.Item>
+            </LSUI.ContextMenuItem>
           )}
           {!app.readOnly &&
             app.selectedShapes?.size > 0 &&
             app.selectedShapesArray?.some(s => !s.props.isLocked) && (
-              <ReactContextMenu.Item
+              <LSUI.ContextMenuItem
                 className="tl-menu-item"
                 onClick={() => runAndTransition(() => app.setLocked(true))}
               >
-                <TablerIcon className="tl-menu-icon" name="lock" />
+                <TablerIcon className="tl-menu-icon" name="lock"/>
                 {t('whiteboard/lock')}
-                <KeyboardShortcut action="whiteboard/lock" />
-              </ReactContextMenu.Item>
+                <KeyboardShortcut action="whiteboard/lock"/>
+              </LSUI.ContextMenuItem>
             )}
           {!app.readOnly &&
             app.selectedShapes?.size > 0 &&
             app.selectedShapesArray?.some(s => s.props.isLocked) && (
-              <ReactContextMenu.Item
+              <LSUI.ContextMenuItem
                 className="tl-menu-item"
                 onClick={() => runAndTransition(() => app.setLocked(false))}
               >
-                <TablerIcon className="tl-menu-icon" name="lock-open" />
+                <TablerIcon className="tl-menu-icon" name="lock-open"/>
                 {t('whiteboard/unlock')}
-                <KeyboardShortcut action="whiteboard/unlock" />
-              </ReactContextMenu.Item>
+                <KeyboardShortcut action="whiteboard/unlock"/>
+              </LSUI.ContextMenuItem>
             )}
           {app.selectedShapes?.size > 0 &&
             !app.readOnly &&
             app.selectedShapesArray?.some(s => !s.props.isLocked) && (
               <>
-                <ReactContextMenu.Item
+                <LSUI.ContextMenuItem
                   className="tl-menu-item"
                   onClick={() => runAndTransition(app.api.deleteShapes)}
                 >
-                  <TablerIcon className="tl-menu-icon" name="backspace" />
+                  <TablerIcon className="tl-menu-icon" name="backspace"/>
                   {t('whiteboard/delete')}
-                  <KeyboardShortcut action="editor/delete" />
-                </ReactContextMenu.Item>
+                  <KeyboardShortcut action="editor/delete"/>
+                </LSUI.ContextMenuItem>
                 {app.selectedShapes?.size > 1 && !app.readOnly && (
                   <>
-                    <ReactContextMenu.Separator className="menu-separator" />
-                    <ReactContextMenu.Item
+                    <LSUI.ContextMenuSeparator className="menu-separator"/>
+                    <LSUI.ContextMenuItem
                       className="tl-menu-item"
                       onClick={() => runAndTransition(app.flipHorizontal)}
                     >
-                      <TablerIcon className="tl-menu-icon" name="flip-horizontal" />
+                      <TablerIcon className="tl-menu-icon"
+                                  name="flip-horizontal"/>
                       {t('whiteboard/flip-horizontally')}
-                    </ReactContextMenu.Item>
-                    <ReactContextMenu.Item
+                    </LSUI.ContextMenuItem>
+                    <LSUI.ContextMenuItem
                       className="tl-menu-item"
                       onClick={() => runAndTransition(app.flipVertical)}
                     >
-                      <TablerIcon className="tl-menu-icon" name="flip-vertical" />
+                      <TablerIcon className="tl-menu-icon"
+                                  name="flip-vertical"/>
                       {t('whiteboard/flip-vertically')}
-                    </ReactContextMenu.Item>
+                    </LSUI.ContextMenuItem>
                   </>
                 )}
                 {!app.readOnly && (
                   <>
-                    <ReactContextMenu.Separator className="menu-separator" />
-                    <ReactContextMenu.Item
+                    <LSUI.ContextMenuSeparator className="menu-separator"/>
+                    <LSUI.ContextMenuItem
                       className="tl-menu-item"
                       onClick={() => runAndTransition(app.bringToFront)}
                     >
+                      <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
                       {t('whiteboard/move-to-front')}
-                      <KeyboardShortcut action="whiteboard/bring-to-front" />
-                    </ReactContextMenu.Item>
-                    <ReactContextMenu.Item
+                      <KeyboardShortcut action="whiteboard/bring-to-front"/>
+                    </LSUI.ContextMenuItem>
+                    <LSUI.ContextMenuItem
                       className="tl-menu-item"
                       onClick={() => runAndTransition(app.sendToBack)}
                     >
+                      <TablerIcon className="tl-menu-icon" name="circle-dotted"/>
                       {t('whiteboard/move-to-back')}
-                      <KeyboardShortcut action="whiteboard/send-to-back" />
-                    </ReactContextMenu.Item>
+                      <KeyboardShortcut action="whiteboard/send-to-back"/>
+                    </LSUI.ContextMenuItem>
                   </>
                 )}
 
                 {developerMode && (
-                  <ReactContextMenu.Item
+                  <LSUI.ContextMenuItem
                     className="tl-menu-item"
                     onClick={() => {
                       if (app.selectedShapesArray.length === 1) {
@@ -350,12 +360,12 @@ export const ContextMenu = observer(function ContextMenu({
                     }}
                   >
                     {t('whiteboard/dev-print-shape-props')}
-                  </ReactContextMenu.Item>
+                  </LSUI.ContextMenuItem>
                 )}
               </>
             )}
         </div>
-      </ReactContextMenu.Content>
-    </ReactContextMenu.Root>
+      </LSUI.ContextMenuContent>
+    </LSUI.ContextMenu>
   )
 })

tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx

@@ -2,15 +2,15 @@ import { LogseqContext } from '../../lib/logseq-context'
 import * as React from 'react'
 
 export const KeyboardShortcut = ({
-  action,
+  action, shortcut, opts,
   ...props
-}: { action: string } & React.HTMLAttributes<HTMLElement>) => {
+}: Partial<{ action: string, shortcut: string, opts: any }> & React.HTMLAttributes<HTMLElement>) => {
   const { renderers } = React.useContext(LogseqContext)
   const Shortcut = renderers?.KeyboardShortcut
 
   return (
     <div className="tl-menu-right-slot" {...props}>
-      <Shortcut action={action} />
+      <Shortcut action={action} shortcut={shortcut} opts={opts} />
     </div>
   )
 }

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -38,7 +38,9 @@ export interface LogseqContextValue {
       }
     }>
     KeyboardShortcut: React.FC<{
-      action: string
+      action?: string,
+      shortcut?: string,
+      opts?: any
     }>
   }
   handlers: {

tldraw/apps/tldraw-logseq/src/styles.css

@@ -6,19 +6,19 @@
   --ls-wb-stroke-color-blue: var(--color-blue-500, blue);
   --ls-wb-stroke-color-purple: var(--color-purple-500, purple);
   --ls-wb-stroke-color-pink: var(--color-pink-500, pink);
-  --ls-wb-stroke-color-default: var(--ls-secondary-border-color);
-  --ls-wb-text-color-default: var(--ls-primary-text-color);
-  --ls-wb-background-color-default: var(--ls-tertiary-background-color);
+  --ls-wb-stroke-color-default: var(--ls-secondary-border-color, hsl(var(--border, var(--rx-gray-05-hsl))));
+  --ls-wb-text-color-default: var(--ls-primary-text-color, hsl(var(--primary)));
+  --ls-wb-background-color-default: var(--ls-tertiary-background-color, var(--rx-gray-03));
 }
 
 .logseq-tldraw {
-  --color-panel: var(--ls-tertiary-background-color);
+  --color-panel: var(--ls-tertiary-background-color, hsl(var(--secondary)));
   --color-panel-inverted: var(--ls-secondary-text-color);
   --color-text: var(--ls-primary-text-color);
   --color-text-inverted: var(--ls-tertiary-background-color);
-  --color-hover: var(--ls-secondary-background-color);
-  --color-selectedStroke: var(--ls-button-background);
-  --color-selectedFill: hsl(var(--ls-button-background-hsl) / 0.9);
+  --color-hover: var(--ls-secondary-background-color, hsl(var(--secondary)));
+  --color-selectedStroke: var(--ls-button-background, hsl(var(--accent) / 0.9));
+  --color-selectedFill: hsl(var(--ls-button-background-hsl, var(--accent)) / 0.1);
   --color-selectedContrast: #fff;
   --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -98,60 +98,50 @@ html[data-theme='light'] {
   background-color: transparent !important;
 }
 
-.tl-menu-item {
-  @apply flex items-center pl-10 pr-4 py-1 text-sm relative !important;
-
-  min-width: 220px;
-  all: unset;
-  line-height: 1;
-  height: 25px;
-  padding: 0 5px;
-  position: relative;
-  user-select: none;
-  color: var(--ls-primary-text-color);
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    background-color: var(--ls-primary-background-color) !important;
-  }
-
-  .tl-menu-icon {
-    @apply absolute left-4 text-base opacity-50;
-  }
-
-  &[data-disabled] {
-    @apply opacity-50 pointer-events-none;
-  }
-}
-
 #tl-zoom {
   @apply w-auto !important;
 }
 
+.tl-menu-item {
+  @apply leading-[20px];
+}
+
 #zoomPopup .tl-menu-item {
   @apply pl-4 !important;
 }
 
+.tl-menu-button-row-wrap {
+  @apply flex flex-col;
+}
+
 .tl-menu-button-row {
-  @apply flex justify-between px-4 py-1;
+  @apply flex justify-between py-1 gap-[26px] opacity-80 hover:opacity-100;
+
+  .ti {
+    @apply text-lg;
+  }
 }
 
 .tl-menu {
-  @apply relative py-2 flex bottom-0 flex border-0 rounded shadow-lg;
+  @apply relative flex flex-col opacity-100 select-none;
 
-  opacity: 100%;
-  user-select: none;
-  flex-direction: column;
   z-index: 180;
   min-width: 220px;
   pointer-events: 'all';
-  background: var(--ls-secondary-background-color);
+}
+
+.tl-menu-icon {
+  @apply text-[16px] leading-none opacity-70 mr-1;
+}
+
+.tl-menu-icon.ti-circle-dotted {
+  @apply invisible;
 }
 
 .tl-menu-right-slot {
   margin-left: auto;
   padding-left: 20px;
+  line-height: 1;
 
   .keyboard-shortcut > code {
     padding: 4px !important;
@@ -177,7 +167,7 @@ html[data-theme='light'] {
 
   pointer-events: all;
   position: relative;
-  background-color: or(--logseq-whiteboard-toolbar-background, --lx-gray-03, --ls-secondary-background-color);
+  background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
   border-radius: 8px;
   white-space: nowrap;
   gap: 8px;
@@ -271,22 +261,11 @@ html[data-theme='light'] {
 }
 
 .tl-button {
-  @apply relative flex items-center justify-center rounded border-0 gap-1;
-
-  height: 32px;
-  min-width: 32px;
-  font-family: var(--ls-font-family);
-  background: none;
-  cursor: pointer;
-  color: var(--ls-primary-text-color);
-
-  &:hover {
-    background-color: or(--ls-whiteboard-button-background-hover, --lx-gray-06, --ls-primary-background-color);
-  }
+  @apply relative flex items-center justify-center rounded border-0 gap-1 bg-none cursor-pointer;
+  @apply w-[32px] h-[32px] hover:bg-gray-06;
 
   &[data-selected='true'] {
-    background-color: or(--ls-whiteboard-button-background-selected, --lx-accent-09, --color-selectedFill);
-    color: or(--ls-whiteboard-button-text-selected, --lx-gray-12, --color-selectedContrast);
+    @apply bg-accent text-accent-foreground;
   }
 }
 
@@ -575,7 +554,7 @@ button.tl-select-input-trigger {
   @apply flex items-center rounded-lg text-base max-w-full;
 
   min-height: 40px;
-  background-color: var(--ls-secondary-background-color);
+  background-color: var(--ls-secondary-background-color, hsl(var(--background)));
   padding: 6px 16px;
   box-shadow: var(--shadow-small);
 }
@@ -623,6 +602,7 @@ button.tl-select-input-trigger {
 }
 
 .tl-quick-search .tl-text-input {
+  background-color: transparent;
   border: none;
 }
 
@@ -641,7 +621,7 @@ button.tl-select-input-trigger {
   @apply absolute left-0 w-full flex z-10;
 
   top: calc(100% + 12px);
-  background-color: var(--ls-primary-background-color);
+  background-color: var(--ls-primary-background-color, hsl(var(--background)));
   max-height: 300px;
   min-width: 460px;
   box-shadow: var(--shadow-large);
@@ -871,9 +851,9 @@ html[data-theme='dark'] {
 }
 
 .tl-toolbar-separator {
-  background-color: var(--ls-border-color);
+  background-color: var(--ls-border-color, var(--rx-gray-06));
   width: 1px;
-  opacity: 0.5;
+  opacity: 0.9;
 
   &[data-orientation='horizontal'] {
     height: 1px;

tldraw/packages/react/src/hooks/useStylesheet.ts

@@ -66,15 +66,15 @@ const css = (strings: TemplateStringsArray, ...args: unknown[]) =>
   )
 
 const defaultTheme: TLTheme = {
-  accent: 'rgb(255, 0, 0)',
+  accent: 'var(--lx-accent-09, hsl(var(--primary)))',
   brushFill: 'var(--ls-scrollbar-background-color, rgba(0, 0, 0, .05))',
   brushStroke: 'var(--ls-scrollbar-thumb-hover-color, rgba(0, 0, 0, .05))',
-  selectStroke: 'var(--color-selectedFill)',
-  selectFill: 'rgba(65, 132, 244, 0.05)',
-  binding: 'rgba(65, 132, 244, 0.5)',
-  background: 'var(--ls-primary-background-color)',
-  foreground: 'var(--ls-primary-text-color)',
-  grid: 'var(--ls-quaternary-background-color)',
+  selectStroke: 'var(--color-selectedStroke)',
+  selectFill: 'var(--color-selectedFill)',
+  binding: 'var(--color-binding, rgba(65, 132, 244, 0.5))',
+  background: 'var(--ls-primary-background-color, hsl(var(--background)))',
+  foreground: 'var(--ls-primary-text-color, hsl(var(--foreground)))',
+  grid: 'var(--ls-quaternary-background-color, hsl(var(--secondary)))',
 }
 
 const tlcss = css`
@@ -234,7 +234,7 @@ const tlcss = css`
 
   .tl-clone-handle:hover {
     fill: var(--tl-selectStroke);
-    cursor: pointer; 
+    cursor: pointer;
   }
 
   .tl-clone-handle:hover line {