From d53a9dcb8b85f78cb9038ef93b0ccf5d08f07297 Mon Sep 17 00:00:00 2001 From: charlie Date: Fri, 19 Jan 2024 16:44:20 +0800 Subject: [PATCH] enhance(ui): polish logseq accent colors --- packages/ui/src/vars-classic.css | 4 ---- src/main/frontend/common.css | 4 ++-- src/main/frontend/components/file_sync.css | 4 ++-- src/main/frontend/components/settings.cljs | 4 ++-- src/main/frontend/components/svg.cljs | 6 +++--- src/main/frontend/components/theme.css | 4 ---- tailwind.config.js | 16 ++++++++-------- 7 files changed, 17 insertions(+), 25 deletions(-) diff --git a/packages/ui/src/vars-classic.css b/packages/ui/src/vars-classic.css index 7da638aa0f9..438a89f0e6c 100644 --- a/packages/ui/src/vars-classic.css +++ b/packages/ui/src/vars-classic.css @@ -15,10 +15,6 @@ --ls-left-sidebar-sm-width: 74vw; --ls-left-sidebar-nav-btn-size: 38px; --ls-native-kb-height: 0px; - --ls-error-color: var(--color-red-600); - --ls-warning-color: var(--color-orange-600); - --ls-success-color: var(--color-green-600); - --ls-highlight-color-default: var(--ls-secondary-background-color); } .dark-theme, diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css index d709e1d4394..85605136d9c 100644 --- a/src/main/frontend/common.css +++ b/src/main/frontend/common.css @@ -26,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 */ } diff --git a/src/main/frontend/components/file_sync.css b/src/main/frontend/components/file_sync.css index 944da174150..618bf797b26 100644 --- a/src/main/frontend/components/file_sync.css +++ b/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-error: var(--color-red-600); --ls-color-file-sync-pending: var(--color-yellow-600); - --ls-color-file-sync-idle: var(--ls-success-color); + --ls-color-file-sync-idle: var(--color-green-600); } .cp__file-sync { diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs index e8b0bc5754e..3d04d0909b2 100644 --- a/src/main/frontend/components/settings.cljs +++ b/src/main/frontend/components/settings.cljs @@ -321,7 +321,7 @@ :gap "0.75rem" :width "100%" :max-width "16rem"}} - (for [color colors/color-list + (for [color (concat [:none :logseq] colors/color-list) :let [active? (= color color-accent)]] [:div.flex.items-center {:style {:height 28}} [:div {:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100" @@ -345,7 +345,7 @@ [:<> (row-with-button-action {:left-label "Accent color" - :description "Choosing an accent color will override any theme you have selected." + :description "Choosing an accent color may override any theme you have selected." :-for "toggle_radix_theme" :stretch true :action pick-theme})])) diff --git a/src/main/frontend/components/svg.cljs b/src/main/frontend/components/svg.cljs index 735a6f9fcc0..de5d78808a2 100644 --- a/src/main/frontend/components/svg.cljs +++ b/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 diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index 09bac324eeb..f4071c405f7 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -59,10 +59,6 @@ transform: scale(1.1); } -body { - background-color: or(--lx-gray-01, --ls-primary-background-color, #fff); -} - html[data-theme='light'] .theme-container { .form-checkbox { &:focus { diff --git a/tailwind.config.js b/tailwind.config.js index 58ba91dab64..dd4c80962cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,14 +7,14 @@ const lx = override => ({ '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-05': 'or(' + override + ', --lx-accent-05, --rx-blue-03)', + 'accent-06': 'or(' + override + ', --lx-accent-06, --rx-blue-04)', + 'accent-07': 'or(' + override + ', --lx-accent-07, --rx-blue-05)', + 'accent-08': 'or(' + override + ', --lx-accent-08, --rx-blue-06)', + 'accent-09': 'or(' + override + ', --lx-accent-09, --rx-blue-07)', + 'accent-10': 'or(' + override + ', --lx-accent-10, --rx-blue-08)', + 'accent-11': 'or(' + override + ', --lx-accent-11, --rx-blue-09)', + 'accent-12': 'or(' + override + ', --lx-accent-12, --rx-blue-10)', 'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)', 'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)', 'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)',