diff --git a/postcss.config.js b/postcss.config.js index 0778892a0e..bb031f4871 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,8 +2,6 @@ const or = (...args) => { const variableNames = args.filter(x => x.startsWith('--')) const initialValue = args.filter(x => !x.startsWith('--'))[0] - console.log(' ### or ### ', variableNames, initialValue) - return variableNames.reduceRight((memo, current) => { if (memo && current) { return `var(${current.trim()}, ${memo})` diff --git a/resources/css/codemirror.solarized.css b/resources/css/codemirror.solarized.css index 231b5f3a23..be41fe422a 100644 --- a/resources/css/codemirror.solarized.css +++ b/resources/css/codemirror.solarized.css @@ -8,22 +8,24 @@ Solarized color palette http://ethanschoonover.com/solarized/img/solarized-palette.png */ -.solarized.base03 { color: #002b36; } -.solarized.base02 { color: #073642; } -.solarized.base01 { color: #586e75; } -.solarized.base00 { color: #657b83; } -.solarized.base0 { color: #839496; } -.solarized.base1 { color: #93a1a1; } -.solarized.base2 { color: #eee8d5; } -.solarized.base3 { color: #fdf6e3; } -.solarized.solar-yellow { color: #b58900; } -.solarized.solar-orange { color: #cb4b16; } -.solarized.solar-red { color: #dc322f; } -.solarized.solar-magenta { color: #d33682; } -.solarized.solar-violet { color: #6c71c4; } -.solarized.solar-blue { color: #268bd2; } -.solarized.solar-cyan { color: #2aa198; } -.solarized.solar-green { color: #859900; } +.solarized.base03 { color: or(--lx-gray-01, #002b36); } +.dark .solarized.base03 { color: or(--lx-gray-02, #002b36); } +.solarized.base02 { color: or(--lx-gray-02, #073642); } +.dark .solarized.base02 { color: or(--lx-gray-01, #073642); } +.solarized.base01 { color: or(--lx-gray-03, #586e75); } +.solarized.base00 { color: or(--lx-gray-04, #657b83); } +.solarized.base0 { color: or(--lx-gray-09, #839496); } +.solarized.base1 { color: or(--lx-gray-10, #93a1a1); } +.solarized.base2 { color: or(--lx-gray-11, #eee8d5); } +.solarized.base3 { color: or(--lx-gray-12, #fdf6e3); } +.solarized.solar-yellow { color: or(--rx-yellow-11, #b58900); } +.solarized.solar-orange { color: or(--rx-orange-11, #cb4b16); } +.solarized.solar-red { color: or(--rx-red-11, #dc322f); } +.solarized.solar-magenta { color: or(--rx-pink-11, #d33682); } +.solarized.solar-violet { color: or(--rx-purple-11, #6c71c4); } +.solarized.solar-blue { color: or(--rx-blue-11, #268bd2); } +.solarized.solar-cyan { color: or(--rx-sky-11, #2aa198); } +.solarized.solar-green { color: or(--rx-grass-11, #859900); } /* Color scheme for code-mirror */ @@ -33,13 +35,20 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png rendering-intent: auto; } .cm-s-solarized.cm-s-dark { - color: #839496; - background-color: #002b36; + /* color: or(--lx-gray-09, #839496); */ + color: or(--lx-gray-11, #839496); + background-color: or(--lx-gray-01, #002b36); text-shadow: #002b36 0 1px; } + +.dark .cm-s-solarized.cm-s-dark { + background-color: or(--lx-gray-02, #002b36); +} + .cm-s-solarized.cm-s-light { - background-color: #fdf6e3; - color: #657b83; + /* background-color: or(--lx-gray-12, #fdf6e3); */ + background-color: or(--lx-gray-11, #fdf6e3); + color: or(--lx-gray-01, #657b83); text-shadow: #eee8d5 0 1px; } @@ -47,41 +56,42 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png text-shadow: none; } -.cm-s-solarized .cm-header { color: #586e75; } -.cm-s-solarized .cm-quote { color: #93a1a1; } +.cm-s-solarized .cm-header { color: or(--lx-gray-03, #586e75); } +.cm-s-solarized .cm-quote { color: or(--lx-gray-10, #93a1a1); } -.cm-s-solarized .cm-keyword { color: #cb4b16; } -.cm-s-solarized .cm-atom { color: #d33682; } -.cm-s-solarized .cm-number { color: #d33682; } -.cm-s-solarized .cm-def { color: #2aa198; } +.cm-s-solarized .cm-keyword { color: or(--rx-orange-11, #cb4b16); } +.cm-s-solarized .cm-atom { color: or(--rx-pink-11, #d33682); } +.cm-s-solarized .cm-number { color: or(--rx-pink-11, #d33682); } +.cm-s-solarized .cm-def { color: or(--rx-sky-11, #2aa198); } -.cm-s-solarized .cm-variable { color: #839496; } -.cm-s-solarized .cm-variable-2 { color: #b58900; } -.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; } +/* .cm-s-solarized .cm-variable { color: or(--lx-gray-09, #839496); } */ +.cm-s-solarized .cm-variable { color: or(--lx-gray-10, #839496); } +.cm-s-solarized .cm-variable-2 { color: or(--rx-yellow-11, #b58900); } +.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: or(--rx-purple-11, #6c71c4); } -.cm-s-solarized .cm-property { color: #2aa198; } -.cm-s-solarized .cm-operator { color: #6c71c4; } +.cm-s-solarized .cm-property { color: or(--rx-sky-11, #2aa198); } +.cm-s-solarized .cm-operator { color: or(--rx-purple-11, #6c71c4); } -.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; } +.cm-s-solarized .cm-comment { color: or(--lx-gray-03, #586e75); font-style:italic; } -.cm-s-solarized .cm-string { color: #859900; } -.cm-s-solarized .cm-string-2 { color: #b58900; } +.cm-s-solarized .cm-string { color: or(--rx-grass-11, #859900); } +.cm-s-solarized .cm-string-2 { color: or(--rx-yellow-11, #b58900); } -.cm-s-solarized .cm-meta { color: #859900; } -.cm-s-solarized .cm-qualifier { color: #b58900; } -.cm-s-solarized .cm-builtin { color: #d33682; } -.cm-s-solarized .cm-bracket { color: #cb4b16; } -.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; } -.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; } -.cm-s-solarized .cm-tag { color: #93a1a1; } -.cm-s-solarized .cm-attribute { color: #2aa198; } +.cm-s-solarized .cm-meta { color: or(--rx-grass-11, #859900); } +.cm-s-solarized .cm-qualifier { color: or(--rx-yellow-11, #b58900); } +.cm-s-solarized .cm-builtin { color: or(--rx-pink-11, #d33682); } +.cm-s-solarized .cm-bracket { color: or(--rx-orange-11, #cb4b16); } +.cm-s-solarized .CodeMirror-matchingbracket { color: or(--rx-grass-11, #859900); } +.cm-s-solarized .CodeMirror-nonmatchingbracket { color: or(--rx-red-11, #dc322f); } +.cm-s-solarized .cm-tag { color: or(--lx-gray-10, #93a1a1); } +.cm-s-solarized .cm-attribute { color: or(--rx-sky-11, #2aa198); } .cm-s-solarized .cm-hr { color: transparent; - border-top: 1px solid #586e75; + border-top: 1px solid or(--lx-gray-03, #586e75); display: block; } -.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; } -.cm-s-solarized .cm-special { color: #6c71c4; } +.cm-s-solarized .cm-link { color: or(--lx-gray-10, #93a1a1); cursor: pointer; } +.cm-s-solarized .cm-special { color: or(--rx-purple-11, #6c71c4); } .cm-s-solarized .cm-em { color: #999; text-decoration: underline; @@ -89,17 +99,18 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png } .cm-s-solarized .cm-error, .cm-s-solarized .cm-invalidchar { - color: #586e75; - border-bottom: 1px dotted #dc322f; + /* color: or(--lx-gray-03, #586e75); */ + color: or(--lx-gray-10, #586e75); + border-bottom: 1px dotted or(--rx-red-11, #dc322f); } -.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; } +.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: or(--lx-gray-02, #073642); } .cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); } .cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); } -.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; } -.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; } -.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; } +.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: or(--lx-gray-11, #eee8d5); } +.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: or(--lx-gray-11, #eee8d5); } +.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-11, #eee8d5); } /* Editor styling */ @@ -113,33 +124,35 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png /* Dark */ .cm-s-solarized.cm-s-dark .CodeMirror-gutters { - background-color: #073642; + background-color: or(--lx-gray-01, #073642); } .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { - color: #586e75; + color: or(--lx-gray-09, #586e75); + /* color: or(--lx-gray-03, #586e75); */ text-shadow: #021014 0 -1px; } /* Light */ .cm-s-solarized.cm-s-light .CodeMirror-gutters { - background-color: #eee8d5; + background-color: or(--lx-gray-02, #eee8d5); + /* background-color: or(--lx-gray-11, #eee8d5); */ } .cm-s-solarized.cm-s-light .CodeMirror-linenumber { - color: #839496; + color: or(--lx-gray-09, #839496); } /* Common */ .cm-s-solarized .CodeMirror-linenumber { padding: 0 5px; } -.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; } +.cm-s-solarized .CodeMirror-guttermarker-subtle { color: or(--lx-gray-03, #586e75); } .cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; } -.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; } +.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: or(--rx-orange-11, #cb4b16); } .cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text { - color: #586e75; + color: or(--lx-gray-03, #586e75); } /* Cursor */ @@ -148,8 +161,8 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png /* Fat cursor */ .cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; } .cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; } -.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; } -.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; } +.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: or(--lx-gray-03, #586e75); } +.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: or(--lx-gray-03, #586e75); } /* Active line */ .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs index 263dd249ec..95aa2730e5 100644 --- a/src/main/frontend/colors.cljs +++ b/src/main/frontend/colors.cljs @@ -1512,7 +1512,6 @@ (get-in radix [(keyword color-name) (keyword color-value)])))) (defn set-radix [color] - (js/console.log "set-radix" (pr-str color)) (let [style-tag (or (js/document.querySelector "style#color-variables") (js/document.createElement "style")) steps ["01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "01-alpha" "02-alpha" "03-alpha" "04-alpha" "05-alpha" "06-alpha" "07-alpha" "08-alpha" "09-alpha" "10-alpha" "11-alpha" "12-alpha"] @@ -1528,6 +1527,7 @@ "--ls-secondary-text-color: var(--rx-" (name gray) "-11); " "--ls-primary-text-color: var(--rx-" (name gray) "-12); " "--ls-border-color: var(--rx-" (name gray) "-05); " + "--ls-block-highlight-color: var(--rx-" (name gray) "-04); " "--ls-secondary-border-color: var(--rx-" (name color) "-05); " "--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); " "--ls-wb-background-color-default: var(--rx-" (name color) "-04); " @@ -1543,6 +1543,5 @@ (js/document.head.appendChild style-tag))) (defn unset-radix [] - (js/console.log "unset-radix") (when-let [style-tag (js/document.querySelector "style#color-variables")] (js/document.head.removeChild style-tag))) diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs index 153097c0ba..d02f42b246 100644 --- a/src/main/frontend/components/settings.cljs +++ b/src/main/frontend/components/settings.cljs @@ -1,6 +1,7 @@ (ns frontend.components.settings (:require [clojure.string :as string] [electron.ipc :as ipc] + [frontend.colors :as colors] [frontend.components.assets :as assets] [frontend.components.conversion :as conversion-component] [frontend.components.file-sync :as fs] @@ -308,42 +309,42 @@ (defn theme-row [t dark?] (let [color-accent (state/sub :color/accent) - pick-theme [:div.grid {:style {:grid-template-columns "repeat(15, 1fr)" + pick-theme [:div.grid {:style {:grid-template-columns "repeat(17, 1fr)" :gap "0.75rem" - :overflow :scroll + :overflow-x :scroll :width "100%" :padding-left "0.25rem"}} - [:div.theme-row--color {:on-click #(state/unset-color-accent!)} - [:div.theme-row--color-swatch {:style {"--background" "var(--rx-gray-03)" - "--background-hover" "var(--rx-gray-04)" - "--background-active" "var(--rx-gray-05)" - "--border" "var(--rx-gray-07)" - "--border-hover" "var(--rx-gray-08)"} + [:div.theme-row--color {:on-click #(state/unset-color-accent!) + :class (when (nil? color-accent) "selected")} + [:div.theme-row--color-swatch {:style {"--background" "#0F2A35" + "--background-hover" "#163542" + "--background-active" "#274E5E" + "--border" "#0369a1" + "--border-hover" "#38bdf8" ;; TODO what is the hover color? + "--border-active" "#0ea5e9"} ;; TODO what is the hover color? :border-right "1px solid rgba(255,255,255,0.4)"}] [:div.text-xs {:style {:margin "0 -0.5rem" :opacity 0.5 :height "1rem" - :padding "0 0.5rem"}} - "Aqua"]] - (for [color colors/color-list] + :padding "0 0.5rem"}}]] + [:div.theme-row--color-separator] + (for [color colors/color-list + :let [gray (get colors/gray-pairing-map color)]] [:div.theme-row--color {:on-click #(state/toggle-color-accent! color) :class (when (= color-accent color) "selected")} - [:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name color) "-03)") - "--background-hover" (str "var(--rx-" (name color) "-04)") - "--background-active" (str "var(--rx-" (name color) "-05)") + [:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name gray) "-02-alpha)") + "--background-hover" (str "var(--rx-" (name gray) "-03)") + "--background-active" (str "var(--rx-" (name gray) "-06)") "--border" (str "var(--rx-" (name color) "-07)") - "--border-hover" (str "var(--rx-" (name color) "-08)")}}] + "--border-hover" (str "var(--rx-" (name color) "-10)") + "--border-active" (str "var(--rx-" (name color) "-09) ")}}]])] ; "--border-hover" (str "var(--rx-" (name color) "-08)")}}] - [:div.text-xs {:style {:margin "0 -0.5rem" - :opacity 0.5 - :height "1rem"}} - (name color)]])] display-theme [:button {:style {:background "var(--lx-accent-03)" :border "1px solid var(--lx-accent-07)" :color "var(--lx-accent-11)"}} (if color-accent (name color-accent) "default")]] [:<> - (row-with-button-action {:left-label "Radix color theme" + (row-with-button-action {:left-label "Logseq color theme" :-for "toggle_radix_theme" :stretch true :action pick-theme})])) diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css index 8f4b1bdb94..56b783eb40 100644 --- a/src/main/frontend/components/settings.css +++ b/src/main/frontend/components/settings.css @@ -484,12 +484,24 @@ svg.cmd { padding-top: 1rem; } +.cp__settings-main .theme-row--color-separator { + @apply relative; + width: 1rem; +} + +.cp__settings-main .theme-row--color-separator::before { + @apply absolute inset-1/2 h-6 -translate-y-3 -translate-x-px; + content: ""; + width: 2px; + background-color: or(--logseq-og-color-theme-separator, --lx-gray-09, --ls-quaternary-background-color); +} + .cp__settings-main .theme-row--color-swatch { @apply rounded-full; width: 2rem; height: 2rem; background: var(--background); - border: 3px solid var(--border); + border: 4px solid var(--border); /* border: 3px solid orange; */ } @@ -501,4 +513,5 @@ svg.cmd { .cp__settings-main .selected .theme-row--color-swatch, .cp__settings-main .selected .theme-row--color-swatch:hover { background: var(--background-active); + border-color: var(--border-active); } diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs index 409fafcf6d..745b309615 100644 --- a/src/main/frontend/extensions/tldraw.cljs +++ b/src/main/frontend/extensions/tldraw.cljs @@ -159,9 +159,9 @@ (when (and populate-onboarding? (not loaded-app)) - [:div.absolute.inset-0.flex.items-center.justify-center - {:style {:z-index 200}} - (ui/loading "Loading onboarding whiteboard ...")]) + [:div.absolute.inset-0.flex.items-center.justify-center + {:style {:z-index 200}} + (ui/loading "Loading onboarding whiteboard ...")]) (tldraw {:renderers tldraw-renderers :handlers (get-tldraw-handlers page-name) :onMount on-mount