Merge branch 'master' into feat/db

.github/workflows/build-desktop-release.yml

@@ -312,9 +312,9 @@ jobs:
       - name: Build/Release Electron app
         run: yarn electron:make
         working-directory: ./static
-        env:
-          CODE_SIGN_CERTIFICATE_FILE: ../codesign.pfx
-          CODE_SIGN_CERTIFICATE_PASSWORD: ${{ secrets.CODE_SIGN_CERTIFICATE_PASSWORD }}
+        #env:
+        #  CODE_SIGN_CERTIFICATE_FILE: ../codesign.pfx
+        #  CODE_SIGN_CERTIFICATE_PASSWORD: ${{ secrets.CODE_SIGN_CERTIFICATE_PASSWORD }}
 
       - name: Save Artifact
         run: |

e2e-tests/accessibility.spec.ts

@@ -4,13 +4,19 @@ import { expect } from '@playwright/test'
 import AxeBuilder from '@axe-core/playwright'
 
 test('should not have any automatically detectable accessibility issues', async ({ page }) => {
-    await createRandomPage(page)
-    await page.waitForTimeout(2000)
-    const accessibilityScanResults = await new AxeBuilder({ page })
-        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
-        .disableRules(['meta-viewport'])
-        .setLegacyMode()
-        .analyze()
+  try {
+    await page.waitForSelector('.notification-clear', { timeout: 10 })
+    page.click('.notification-clear')
+  } catch (error) {
+  }
 
-    expect(accessibilityScanResults.violations).toEqual([]);
+  await createRandomPage(page)
+  await page.waitForTimeout(2000)
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+    .disableRules(['meta-viewport'])
+    .setLegacyMode()
+    .analyze()
+
+  expect(accessibilityScanResults.violations).toEqual([]);
 })

e2e-tests/logseq-url.spec.ts

@@ -3,6 +3,12 @@ import { test } from './fixtures'
 import { createRandomPage, lastBlock, IsMac, IsLinux } from './utils'
 
 test("Logseq URLs (same graph)", async ({ page, block }) => {
+  try {
+    await page.waitForSelector('.notification-clear', { timeout: 10 })
+    page.click('.notification-clear')
+  } catch (error) {
+  }
+
   let paste_key = IsMac ? 'Meta+v' : 'Control+v'
   // create a page with identify block
   let identify_text = "URL redirect target"

e2e-tests/page-rename.spec.ts

@@ -64,15 +64,16 @@ test('page rename test', async ({ page }) => {
   await page_rename_test(page, "abcd", "a.b.c.d")
   await page_rename_test(page, "abcd", "a/b/c/d")
 
+  // Disabled for now since it's unstable:
   // The page name in page search are not updated after changing the capitalization of the page name #9577
   // https://github.com/logseq/logseq/issues/9577
   // Expect the page name to be updated in the search results
-  await page_rename_test(page, "DcBA_", "dCBA_")
-  const results = await searchPage(page, "DcBA_")
-  // search result 0 is the new page & 1 is the new whiteboard
-  const resultRow = await results[0].innerText()
-  expect(resultRow).toContain("dCBA_");
-  expect(resultRow).not.toContain("DcBA_");
+  // await page_rename_test(page, "DcBA_", "dCBA_")
+  // const results = await searchPage(page, "DcBA_")
+  // // search result 0 is the new page & 1 is the new whiteboard
+  // const resultRow = await results[0].innerText()
+  // expect(resultRow).toContain("dCBA_");
+  // expect(resultRow).not.toContain("DcBA_");
   await closeSearchBox(page)
 })
 

e2e-tests/whiteboards.spec.ts

@@ -67,6 +67,7 @@ test('update whiteboard title', async ({ page }) => {
   await page.click('.whiteboard-page-title')
   await page.fill('.whiteboard-page-title input', title + '-2')
   await page.keyboard.press('Enter')
+  await page.click('.ui__modal-enter')
   await expect(page.locator('.whiteboard-page-title .title')).toContainText(
     title + '-2'
   )

src/main/frontend/colors.cljs

@@ -1,6 +1,7 @@
 (ns frontend.colors
   "Colors used"
-  (:require [clojure.string :as str]))
+  (:require [clojure.string :as str]
+            [frontend.util :as util]))
 
 (def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange :brown])
 
@@ -39,6 +40,8 @@
                           "--ls-focus-ring-color: var(--rx-" (name color) "-09); "
                           "--ls-table-tr-even-background-color: var(--rx-" (name gray) "-04); "
                           "--ls-page-properties-background-color: var(--rx-" (name gray) "-04); "
+                          "--ls-block-properties-background-color: var(--rx-" (name gray) "-03); "
+                          "--ls-page-inline-code-bg-color: var(--rx-" (name gray) "-03); "
                           "--ls-cloze-text-color: var(--rx-" (name color) "-08); "
                           "--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); "
                           "--ls-wb-background-color-default: var(--rx-" (name color) "-04); "
@@ -73,3 +76,14 @@
       6 (str "linear-gradient(-45deg, " (step -3) " -10%, " (step -2) " 10%, " (step -1) " 30%, " (step 0) " 50%, " (step 1) " 70%, " (step 2) " 90%, " (step 3) " 110%)")
       7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)")
       (str "linear-gradient(90deg, " (step 0) ", " (step 0) ")"))))
+
+(defn get-accent-color
+  []
+  (when-let [hsl-color (some-> js/document.documentElement
+                       (js/getComputedStyle)
+                       (.getPropertyValue "--lx-accent-09")
+                       (str/replace "hsl(" "")
+                       (str/replace ")" "")
+                       (str/split ","))]
+    (let [hsl-color (map js/parseFloat hsl-color)]
+      (apply util/hsl2hex hsl-color))))

src/main/frontend/common.css

@@ -47,7 +47,7 @@ html[data-theme='dark'] {
   --ls-active-primary-color: #8ec2c2;
   --ls-active-secondary-color: #d0e8e8;
   --ls-block-properties-background-color: #06323e;
-  --ls-page-properties-background-color: #02171d;
+  --ls-page-properties-background-color: #06323e;
   --ls-block-ref-link-text-color: #1a6376;
   --ls-border-color: #0e5263;
   --ls-secondary-border-color: #126277;
@@ -527,13 +527,16 @@ i.ti {
 /** endregion **/
 
 /* region FIXME: override elements (?) */
-h1.title {
-  margin-bottom: 1.5rem;
+h1.title, h1.title input {
   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;
 }
 
+h1.title {
+  margin-bottom: 1.5rem;
+}
+
 .title .page-icon {
   margin-right: 12px;
 }

src/main/frontend/components/block.cljs

@@ -2084,7 +2084,7 @@
                                                        :page-id (:db/id (:block/page block))})]
     (cond
       (seq ordered-properties)
-      [:div.block-properties
+      [:div.block-properties.rounded
        {:class (when pre-block? "page-properties")
         :title (if pre-block?
                  "Click to edit this page's properties"

src/main/frontend/components/block.css

@@ -185,7 +185,7 @@
 
 .block-children {
   border-left: 1px solid;
-  border-left-color: or(--ls-guideline-color, --lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
+  border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
 
   padding-top: 2px;
   padding-bottom: 3px;
@@ -569,7 +569,7 @@
 
     font-size: 14px;
 
-    background-color: or(--ls-block-bullet-color, --lx-gray-07, --ls-block-bullet-color, #394b59);
+    background-color: or(--lx-gray-08, --ls-block-bullet-color, #394b59);
     transition: transform 0.2s;
 
     > * {
@@ -598,11 +598,11 @@
 
   &:hover > .bullet-container .bullet {
     transform: scale(1.2);
-    background-color: or(--ls-buller-border-color-typed-list, --lx-gray-08, inherit) !important;
+    background-color: or(--lx-gray-08, --ls-block-bullet-color, inherit) !important;
   }
 
   &:hover > .bullet-container:not(.typed-list) {
-    background-color: or(--ls-bullet-border-color, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+    background-color: or(--lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
   }
 }
 

src/main/frontend/components/cmdk.cljs

@@ -515,6 +515,8 @@
      ;; update the input value in the UI
      (reset! !input input)
 
+     (reset! (::input-changed? state) true)
+
        ;; ensure that there is a throttled version of the load-results function
      (when-not @!load-results-throttled
        (reset! !load-results-throttled (gfun/throttle load-results 50)))
@@ -561,7 +563,8 @@
                (handle-action :default state e)
                (util/stop-propagation e))
       esc? (let [filter @(::filter state)]
-             (when (or filter (not (string/blank? input)))
+             (when (or (and filter @(::input-changed? state))
+                       (not (string/blank? input)))
                (util/stop e)
                (reset! (::filter state) nil)
                (when-not filter (handle-input-change state nil ""))))
@@ -760,6 +763,7 @@
   (rum/local nil ::load-results-throttled)
   (rum/local nil ::scroll-container-ref)
   (rum/local nil ::input-ref)
+  (rum/local false ::input-changed?)
   [state {:keys [sidebar?] :as opts}]
   (let [*input (::input state)
         _input (rum/react *input)

src/main/frontend/components/commit.cljs

@@ -8,7 +8,8 @@
             [goog.dom :as gdom]
             [goog.object :as gobj]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [logseq.shui.core :as shui]))
 
 (defn- commit-all!
   []
@@ -63,11 +64,10 @@
           [:h3#modal-headline.text-lg.leading-6.font-medium
            "No changes to commit!"]]]
         [:div.mt-5.sm:mt-4.flex
-         [:span.flex.w-full.rounded-md.shadow-sm
-          [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-           {:type "button"
-            :on-click #(state/close-modal!)}
-           "Close"]]]]
+         (shui/button
+          {:text "Close"
+           :on-click state/close-modal!}
+          (shui/make-context))]]
 
        [:<>
         [:div.sm:flex.sm:items-start
@@ -82,11 +82,10 @@
          {:auto-focus true
           :default-value ""}]
         [:div.mt-5.sm:mt-4.flex
-         [:span.flex.w-full.rounded-md.shadow-sm
-          [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-           {:type "button"
-            :on-click commit-all!}
-           "Commit"]]]])]))
+         (shui/button
+           {:text "Commit"
+           :on-click commit-all!}
+          (shui/make-context))]])]))
 
 (defn show-commit-modal! [e]
   (state/set-modal! add-commit-message)

src/main/frontend/components/git.cljs

@@ -34,17 +34,15 @@
       {:on-change (fn [e]
                     (reset! email (util/evalue e)))}]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click (fn []
+     [:div.mt-5.sm:mt-4.flex
+      (ui/button
+        "Submit"
+        {:on-click (fn []
                      (let [username @username
                            email @email]
                        (when (and (not (string/blank? username))
                                   (not (string/blank? email)))
-                         (shell/set-git-username-and-email username email))))}
-        "Submit"]]]]))
+                         (shell/set-git-username-and-email username email))))})]]))
 
 (rum/defc file-specific-version
   [path hash content]

src/main/frontend/components/header.css

@@ -293,18 +293,6 @@ html.is-native-ipad {
     &-topbar {
       padding-top: 37px;
     }
-
-    &-inner {
-      .resizer {
-        top: 30vh;
-        width: 12px;
-        height: 40vh;
-      }
-
-      .resizer:hover {
-        background-color: var(--ls-guideline-color, #ddd);
-      }
-    }
   }
 }
 

src/main/frontend/components/onboarding/index.css

@@ -7,8 +7,9 @@ body[data-page=import] {
 
 .cp__onboarding {
   &-setups {
-    background-color: var(--ls-primary-background-color);
     z-index: 1;
+    overflow: hidden;
+    border-radius: 20px;
 
     .as-flex-center {
       display: flex;
@@ -17,7 +18,6 @@ body[data-page=import] {
     }
 
     .inner-card {
-      background-color: var(--ls-secondary-background-color);
       padding-top: 55px;
 
       > h1 {
@@ -46,7 +46,6 @@ body[data-page=import] {
       }
 
       > article {
-        background-color: var(--ls-secondary-background-color);
         border-radius: 20px;
         flex: 1;
 
@@ -253,8 +252,6 @@ body[data-page=import] {
 
           > section {
             &.a {
-              border-radius: 20px 0 0 20px;
-
               > small {
                 padding: 0 95px;
               }
@@ -416,8 +413,7 @@ body[data-page=import] {
 
     .shepherd-footer {
       button {
-        @apply bg-indigo-600 hover:bg-indigo-700;
-
+        background-color: var(--lx-bg-override, var(--lx-accent-09, var(--ls-button-background)));
         padding: 4px 8px;
         border-radius: 6px;
         overflow: hidden;
@@ -433,6 +429,10 @@ body[data-page=import] {
           @apply bg-gray-400;
         }
       }
+
+      button:hover {
+          background-color: var(--lx-bg-override, var(--lx-accent-10, var(--ls-button-background)));
+      }
     }
   }
 
@@ -622,4 +622,4 @@ html.is-native-android {
     top: 0;
     left: 0;
   }
-}
+}

src/main/frontend/components/page.cljs

@@ -260,7 +260,7 @@
                                         :block/updated-at (util/time-ms)}])
                         (route-handler/redirect-to-whiteboard! new-name))
                       (page-handler/rename! old-name new-name)))
-        rollback-fn #(do
+        rollback-fn #(let [old-name (if untitled? "" old-name)]
                        (reset! *title-value old-name)
                        (gobj/set (rum/deref input-ref) "value" old-name)
                        (reset! *edit? true)
@@ -1135,30 +1135,28 @@
           (when-not orphaned-pages? [:td.created-at [:span (if created-at (date/int->local-time-2 created-at) "Unknown")]])
           (when-not orphaned-pages? [:td.updated-at [:span (if updated-at (date/int->local-time-2 updated-at) "Unknown")]])])]]
 
-     [:div.pt-6.flex.justify-end
-
-      [:span.pr-2
-       (ui/button
-         (t :cancel)
-         :intent "logseq"
-         :on-click close-fn)]
+     [:div.pt-6.flex.justify-end.gap-4
+      (ui/button
+       (t :cancel)
+       :theme :gray
+       :on-click close-fn)
 
       (ui/button
-        (t :yes)
-        :on-click (fn []
-                    (close-fn)
-                    (let [failed-pages (atom [])]
-                      (doseq [page-name (map :block/name pages)]
-                        (page-handler/delete! page-name #()
-                                              {:error-handler
-                                               (fn [msg]
-                                                 (js/console.error msg)
-                                                 (swap! failed-pages conj page-name))}))
-                      (if (seq @failed-pages)
-                        (notification/show! (t :all-pages/failed-to-delete-pages (string/join ", " (map pr-str @failed-pages)))
-                                            :warning false)
-                        (notification/show! (t :tips/all-done) :success)))
-                    (js/setTimeout #(refresh-fn) 200)))]]))
+       (t :yes)
+       :on-click (fn []
+                   (close-fn)
+                   (let [failed-pages (atom [])]
+                     (doseq [page-name (map :block/name pages)]
+                       (page-handler/delete! page-name #()
+                                             {:error-handler
+                                              (fn [msg]
+                                                (js/console.error msg)
+                                                (swap! failed-pages conj page-name))}))
+                     (if (seq @failed-pages)
+                       (notification/show! (t :all-pages/failed-to-delete-pages (string/join ", " (map pr-str @failed-pages)))
+                                           :warning false)
+                       (notification/show! (t :tips/all-done) :success)))
+                   (js/setTimeout #(refresh-fn) 200)))]]))
 
 (rum/defc pagination
   "Pagination component, like `<< <Prev 1/10 Next> >>`.

src/main/frontend/components/page.css

@@ -261,7 +261,19 @@
 
   .edit-input {
     width: 100%;
+    height: 32px;
     border: none;
+    box-shadow: none;
+    padding: 0;
+    padding-right: 4px;
+
+    &-wrapper {
+      @apply rounded;
+
+      &.editing {
+        background-color: var(--ls-secondary-background-color);
+      }
+    }
   }
 }
 
@@ -274,6 +286,18 @@ a.page-title {
   margin-bottom: 0;
 }
 
+.page-title-sizer-wrapper {
+  @apply w-full overflow-x-auto overflow-y-hidden;
+
+  :empty::before {
+    content: '\200b';
+  }
+
+  > .title {
+    @apply w-full overflow-hidden overflow-ellipsis;
+  }
+}
+
 html.is-native-android,
 html.is-native-ipad,
 html.is-native-iphone,

src/main/frontend/components/page_menu.cljs

@@ -44,19 +44,17 @@
           (t :page/db-delete-confirmation)
           (t :page/delete-confirmation))]]]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :class "ui__modal-enter"
-         :on-click (fn []
-                     (delete-page! page-name))}
-        (t :yes)]]
-      [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click close-fn}
-        (t :cancel)]]]]))
+     [:div.mt-5.sm:mt-4.flex.gap-4
+      (ui/button
+       (t :cancel)
+       {:theme :gray
+        :on-click close-fn})
+      (ui/button
+       (t :yes)
+       {:class "ui__modal-enter"
+        :on-click (fn []
+                    (delete-page! page-name))
+        :button-props {:autoFocus "on"}})]]))
 
 (defn ^:large-vars/cleanup-todo page-menu
   [page-name]

src/main/frontend/components/plugins.css

@@ -4,7 +4,6 @@
 
 .cp__plugins {
   &-page {
-    background-color: var(--ls-primary-background-color);
     margin: -2rem;
     padding: 1.5rem 2rem;
     outline: none;
@@ -198,7 +197,7 @@
   &-item-card {
     @apply flex py-3 px-1 rounded-md;
 
-    background-color: var(--ls-secondary-background-color);
+    background-color: var(--ls-tertiary-background-color);
     height: 150px;
 
     li {

src/main/frontend/components/property.css

@@ -19,7 +19,7 @@
 
 .ls-block .ls-properties-area, .property-block-container {
     border-left: 1px solid;
-    border-left-color: var(--ls-guideline-color, #ddd);
+    border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
 }
 
 .ls-page-properties > .ls-properties-area > .property-block {

src/main/frontend/components/right_sidebar.cljs

@@ -337,7 +337,9 @@
         add-resizing-class #(.. js/document.documentElement -classList (add "is-resizing-buf"))
         remove-resizing-class (fn []
                                 (.. js/document.documentElement -classList (remove "is-resizing-buf"))
-                                (reset! ui-handler/*right-sidebar-resized-at (js/Date.now)))
+                                (reset! ui-handler/*right-sidebar-resized-at (js/Date.now))
+                                (when-let [element js/document.activeElement]
+                                  (.blur element)))
         set-width! (fn [ratio]
                      (when el-ref
                        (let [value (* ratio 100)
@@ -397,11 +399,11 @@
      [])
 
     (rum/use-effect!
-      (fn []
+     (fn []
         ;; sidebar animation duration
-        (js/setTimeout
-          #(reset! ui-handler/*right-sidebar-resized-at (js/Date.now)) 300))
-      [sidebar-open?])
+       (js/setTimeout
+        #(reset! ui-handler/*right-sidebar-resized-at (js/Date.now)) 300))
+     [sidebar-open?])
 
     [:.resizer {:ref el-ref
                 :role "separator"

src/main/frontend/components/settings.cljs

@@ -1136,7 +1136,7 @@
 
     [:div#settings.cp__settings-main
      (settings-effect @*active)
-     [:div.cp__settings-inner
+     [:div.cp__settings-inner {:class "min-h-[65dvh] max-h-[65dvh]"}
       [:aside.md:w-64 {:style {:min-width "10rem"}}
        [:header.cp__settings-header
         [:h1.cp__settings-modal-title (t :settings)]]

src/main/frontend/components/settings.css

@@ -481,7 +481,7 @@ svg.cmd {
 body[data-settings-tab=keymap] {
   .cp__settings-inner {
     > article {
-      @apply md:w-[70vw] xl:max-w-[850px] p-0;
+      @apply p-0;
 
       > header {
         @apply p-4 pb-2 h-auto;

src/main/frontend/components/shortcut.cljs

@@ -154,8 +154,7 @@
   [id binding-map]
   (when-let [id' (and id binding-map (some-> (str id) (string/replace "plugin." "")))]
     [:span {:title (str id' "#" (some-> (:handler-id binding-map) (name)))}
-     [:span.pl-1 (dh/get-shortcut-desc (assoc binding-map :id id))]
-     [:small.pl-1 [:code.text-xs (str id')]]]))
+     [:span.pl-1 (dh/get-shortcut-desc (assoc binding-map :id id))]]))
 
 (defn- open-customize-shortcut-dialog!
   [id]

src/main/frontend/db/model.cljs

@@ -696,7 +696,7 @@ independent of format as format specific heading characters are stripped"
 
 (defn get-block-page
   [repo block-uuid]
-  (assert (uuid? block-uuid) "get-block-page requires block-uuid to be of type uuid")
+  (assert (uuid? block-uuid) (str "get-block-page requires block-uuid to be of type uuid but got " block-uuid))
   (when-let [block (db-utils/entity repo [:block/uuid block-uuid])]
     (db-utils/entity repo (:db/id (:block/page block)))))
 

src/main/frontend/extensions/graph.cljs

@@ -3,6 +3,7 @@
             [frontend.db.model :as model]
             [frontend.extensions.graph.pixi :as pixi]
             [frontend.handler.route :as route-handler]
+            [frontend.colors :as colors]
             [goog.object :as gobj]
             [rum.core :as rum]))
 
@@ -13,10 +14,11 @@
    (fn [node attributes]
      (when-not (contains? focus-nodes node)
        (let [attributes (bean/->clj attributes)
+             accent-color (or (colors/get-accent-color) "#6366F1")
              attributes (assoc attributes
-                               :color "#6366F1"
+                               :color accent-color
                                :border {:width 2
-                                        :color "#6366F1"})]
+                                        :color accent-color})]
          (.resetNodeStyle graph node (bean/->js attributes)))))))
 
 (defn- highlight-edges!

src/main/frontend/extensions/graph/pixi.cljs

@@ -2,8 +2,9 @@
   (:require [cljs-bean.core :as bean]
             ["d3-force"
              :refer [forceCenter forceCollide forceLink forceManyBody forceSimulation forceX forceY]
-             :as    force]
+             :as force]
             [goog.object :as gobj]
+            [frontend.colors :as colors]
             ["graphology" :as graphology]
             ["pixi-graph-fork" :as Pixi-Graph]))
 
@@ -43,13 +44,13 @@
                    :color (if dark? "rgba(255, 255, 255, 0.8)" "rgba(0, 0, 0, 0.8)")
                    :padding  4}}
    :edge {:width 1
-          :color (if dark? "#094b5a" "#cccccc")}})
+          :color (if dark? (or (colors/get-accent-color) "#094b5a") "#cccccc")}})
 
 (defn default-hover-style
   [_dark?]
-  {:node {:color  "#6366F1"
-          :label  {:backgroundColor "rgba(238, 238, 238, 1)"
-                   :color           "#333333"}}
+  {:node {:color (or (colors/get-accent-color) "#6366F1")
+          :label {:backgroundColor "rgba(238, 238, 238, 1)"
+                  :color           "#333333"}}
    :edge {:color "#A5B4FC"}})
 
 (defn layout!

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

@@ -17,7 +17,8 @@
             [frontend.util :as util]
             [medley.core :as medley]
             [promesa.core :as p]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.ui :as ui]))
 
 (declare pdf-container system-embed-playground)
 
@@ -844,14 +845,12 @@
        :on-change (fn [e]
                     (reset! password (util/evalue e)))}]
 
-     [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-      [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-       [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-        {:type "button"
-         :on-click (fn []
+     [:div.mt-5.sm:mt-4.flex
+      (ui/button
+        "Submit"
+        {:on-click (fn []
                      (let [password @password]
-                       (confirm-fn password)))}
-        "Submit"]]]]))
+                       (confirm-fn password)))})]]))
 
 (rum/defc ^:large-vars/data-var pdf-loader
   [{:keys [url hls-file identity filename] :as pdf-current}]

src/main/frontend/extensions/tldraw.cljs

@@ -7,6 +7,7 @@
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
             [frontend.db.model :as model]
+            [frontend.db :as db]
             [frontend.extensions.pdf.assets :as pdf-assets]
             [frontend.handler.editor :as editor-handler]
             [frontend.handler.route :as route-handler]
@@ -101,7 +102,10 @@
    :queryBlockByUUID (fn [block-uuid]
                        (clj->js
                         (model/query-block-by-uuid (parse-uuid block-uuid))))
-   :getBlockPageName #(:block/name (model/get-block-page (state/get-current-repo) (parse-uuid %)))
+   :getBlockPageName #(let [block-id-str %]
+                        (if (util/uuid-string? block-id-str)
+                          (:block/name (model/get-block-page (state/get-current-repo) (parse-uuid block-id-str)))
+                          (:block/name (db/entity [:block/name (util/page-name-sanity-lc block-id-str)]))))
    :exportToImage (fn [page-name options] (state/set-modal! #(export/export-blocks page-name (merge (js->clj options :keywordize-keys true) {:whiteboard? true}))))
    :isWhiteboardPage model/whiteboard-page?
    :isMobile util/mobile?

src/main/frontend/ui.cljs

@@ -261,6 +261,7 @@
          wrapper-children)))
    opts))
 
+(declare button)
 (rum/defc notification-content
   [state content status uid]
   (when (and content status)
@@ -294,25 +295,26 @@
                                             :overflow-x "hidden"}}
          [:div.p-4
           [:div.flex.items-start
-           [:div.flex-shrink-0
+           [:div.flex-shrink-0.pt-2
             svg]
-           [:div.ml-3.w-0.flex-1
+           [:div.ml-3.w-0.flex-1.pt-2
             [:div.text-sm.leading-5.font-medium.whitespace-pre-line {:style {:margin 0}}
              content]]
-           [:div.ml-4.flex-shrink-0.flex
-            [:button.inline-flex.text-gray-400.focus:outline-none.focus:text-gray-500.transition.ease-in-out.duration-150.notification-close-button
-             {:aria-label "Close"
-              :on-click (fn []
-                          (notification/clear! uid))}
-
-             (icon "x" {:fill "currentColor"})]]]]]]])))
+           [:div.flex-shrink-0.flex {:style {:margin-top -9
+                                             :margin-right -18}}
+            (button
+              {:button-props {:aria-label "Close"}
+               :intent "link"
+               :on-click (fn []
+                           (notification/clear! uid))
+               :icon "x"})]]]]]])))
 
 (declare button)
 
 (rum/defc notification-clear-all
   []
   [:div.ui__notifications-content
-   [:div.pointer-events-auto
+   [:div.pointer-events-auto.notification-clear
     (button (t :notification/clear-all)
      :intent "logseq"
      :on-click (fn []
@@ -714,21 +716,18 @@
              (t sub-title)
              sub-title)]]]]
 
-       [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
-        [:span.flex.w-full.rounded-md.shadow-sm.sm:ml-3.sm:w-auto
-         [:button.inline-flex.justify-center.w-full.rounded-md.border.border-transparent.px-4.py-2.bg-indigo-600.text-base.leading-6.font-medium.text-white.shadow-sm.hover:bg-indigo-500.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-          {:type     "button"
-           :autoFocus "on"
-           :class "ui__modal-enter"
+       [:div.mt-5.sm:mt-4.flex.gap-4
+        (button
+          (t :cancel)
+          {:theme :gray
+           :on-click (comp on-cancel close-fn)})
+        (button
+          (t :yes)
+          {:class "ui__modal-enter"
            :on-click #(and (fn? on-confirm)
                            (on-confirm % {:close-fn close-fn
-                                          :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)}))}
-          (t :yes)]]
-        [:span.mt-3.flex.w-full.rounded-md.shadow-sm.sm:mt-0.sm:w-auto
-         [:button.inline-flex.justify-center.w-full.rounded-md.border.border-gray-300.px-4.py-2.bg-white.text-base.leading-6.font-medium.text-gray-700.shadow-sm.hover:text-gray-500.focus:outline-none.focus:border-blue-300.focus:shadow-outline-blue.transition.ease-in-out.duration-150.sm:text-sm.sm:leading-5
-          {:type     "button"
-           :on-click (comp on-cancel close-fn)}
-          (t :cancel)]]]])))
+                                          :sub-selected (and *sub-checkbox-selected @*sub-checkbox-selected)}))
+           :button-props {:autoFocus "on"}})]])))
 
 (rum/defc sub-modal < rum/reactive
   []
@@ -1026,11 +1025,11 @@
 (def icon shui/icon)
 
 (rum/defc button-inner
-  [text & {:keys [background href class intent on-click small? icon icon-props disabled? button-props]
+  [text & {:keys [theme background href class intent on-click small? icon icon-props disabled? button-props]
            :or   {small? false}
            :as   option}]
   (let [opts {:text text
-              :theme (when (contains? #{"link" "border-link"} intent) :text)
+              :theme (or (when (contains? #{"link" "border-link"} intent) :text) theme)
               :href href
               :on-click on-click
               :size (if small? :sm :md)
@@ -1088,9 +1087,9 @@
 (rum/defc progress-bar
   [width]
   {:pre (integer? width)}
-  [:div.w-full.bg-indigo-200.rounded-full.h-2.5.animate-pulse
-   [:div.bg-indigo-600.h-2.5.rounded-full {:style {:width (str width "%")}
-                                           :transition "width 1s"}]])
+  [:div.w-full.rounded-full.h-2.5.animate-pulse.bg-gray-06-alpha
+   [:div.bg-gray-09-alpha.h-2.5.rounded-full {:style {:width (str width "%")}
+                                              :transition "width 1s"}]])
 
 (rum/defc progress-bar-with-label
   [width label-left label-right]

src/main/frontend/util.cljc

@@ -66,6 +66,7 @@
 #?(:cljs (defonce el-visible-in-viewport? utils/elementIsVisibleInViewport))
 #?(:cljs (defonce convert-to-roman utils/convertToRoman))
 #?(:cljs (defonce convert-to-letters utils/convertToLetters))
+#?(:cljs (defonce hsl2hex utils/hsl2hex))
 
 (defn string-join-path
   #_:clj-kondo/ignore

src/main/frontend/utils.js

@@ -431,3 +431,23 @@ export const convertToRoman = (num) => {
   while (i--) roman = (key[+digits.pop() + i * 10] || '') + roman
   return Array(+digits.join('') + 1).join('M') + roman
 }
+
+export function hsl2hex(h, s, l, alpha) {
+  l /= 100
+  const a = s * Math.min(l, 1 - l) / 100
+  const f = n => {
+    const k = (n + h / 30) % 12
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * color).toString(16).padStart(2, '0')
+    // convert to Hex and prefix "0" if needed
+  }
+
+  //alpha conversion
+  if (alpha) {
+    alpha = Math.round(alpha * 255).toString(16).padStart(2, '0')
+  } else {
+    alpha = ''
+  }
+
+  return `#${f(0)}${f(8)}${f(4)}${alpha}`
+}