clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-02-01 14:43:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inital radix reskin

Browse Source
This commit is contained in:
Ben Yorke
2023-06-01 16:38:15 +02:00
parent c6cad4135e
commit 6e31a55fe0
6 changed files with 112 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
postcss.config.js
View File

@@ -2,8 +2,6 @@ const or = (...args) => {
const variableNames = args.filter(x => x.startsWith('--')) const variableNames = args.filter(x => x.startsWith('--'))
const initialValue = args.filter(x => !x.startsWith('--'))[0] const initialValue = args.filter(x => !x.startsWith('--'))[0]
console.log(' ### or ### ', variableNames, initialValue)
return variableNames.reduceRight((memo, current) => { return variableNames.reduceRight((memo, current) => {
if (memo && current) { if (memo && current) {
return `var(${current.trim()}, ${memo})` return `var(${current.trim()}, ${memo})`

133
resources/css/codemirror.solarized.css
View File

@@ -8,22 +8,24 @@ Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png http://ethanschoonover.com/solarized/img/solarized-palette.png
*/ */
.solarized.base03 { color: #002b36; } .solarized.base03 { color: or(--lx-gray-01, #002b36); }
.solarized.base02 { color: #073642; } .dark .solarized.base03 { color: or(--lx-gray-02, #002b36); }
.solarized.base01 { color: #586e75; } .solarized.base02 { color: or(--lx-gray-02, #073642); }
.solarized.base00 { color: #657b83; } .dark .solarized.base02 { color: or(--lx-gray-01, #073642); }
.solarized.base0 { color: #839496; } .solarized.base01 { color: or(--lx-gray-03, #586e75); }
.solarized.base1 { color: #93a1a1; } .solarized.base00 { color: or(--lx-gray-04, #657b83); }
.solarized.base2 { color: #eee8d5; } .solarized.base0 { color: or(--lx-gray-09, #839496); }
.solarized.base3 { color: #fdf6e3; } .solarized.base1 { color: or(--lx-gray-10, #93a1a1); }
.solarized.solar-yellow { color: #b58900; } .solarized.base2 { color: or(--lx-gray-11, #eee8d5); }
.solarized.solar-orange { color: #cb4b16; } .solarized.base3 { color: or(--lx-gray-12, #fdf6e3); }
.solarized.solar-red { color: #dc322f; } .solarized.solar-yellow { color: or(--rx-yellow-11, #b58900); }
.solarized.solar-magenta { color: #d33682; } .solarized.solar-orange { color: or(--rx-orange-11, #cb4b16); }
.solarized.solar-violet { color: #6c71c4; } .solarized.solar-red { color: or(--rx-red-11, #dc322f); }
.solarized.solar-blue { color: #268bd2; } .solarized.solar-magenta { color: or(--rx-pink-11, #d33682); }
.solarized.solar-cyan { color: #2aa198; } .solarized.solar-violet { color: or(--rx-purple-11, #6c71c4); }
.solarized.solar-green { color: #859900; } .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 */ /* Color scheme for code-mirror */
@@ -33,13 +35,20 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
rendering-intent: auto; rendering-intent: auto;
} }
.cm-s-solarized.cm-s-dark { .cm-s-solarized.cm-s-dark {
color: #839496; /* color: or(--lx-gray-09, #839496); */
background-color: #002b36; color: or(--lx-gray-11, #839496);
background-color: or(--lx-gray-01, #002b36);
text-shadow: #002b36 0 1px; 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 { .cm-s-solarized.cm-s-light {
background-color: #fdf6e3; /* background-color: or(--lx-gray-12, #fdf6e3); */
color: #657b83; background-color: or(--lx-gray-11, #fdf6e3);
color: or(--lx-gray-01, #657b83);
text-shadow: #eee8d5 0 1px; text-shadow: #eee8d5 0 1px;
} }
@@ -47,41 +56,42 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
text-shadow: none; text-shadow: none;
} }
.cm-s-solarized .cm-header { color: #586e75; } .cm-s-solarized .cm-header { color: or(--lx-gray-03, #586e75); }
.cm-s-solarized .cm-quote { color: #93a1a1; } .cm-s-solarized .cm-quote { color: or(--lx-gray-10, #93a1a1); }
.cm-s-solarized .cm-keyword { color: #cb4b16; } .cm-s-solarized .cm-keyword { color: or(--rx-orange-11, #cb4b16); }
.cm-s-solarized .cm-atom { color: #d33682; } .cm-s-solarized .cm-atom { color: or(--rx-pink-11, #d33682); }
.cm-s-solarized .cm-number { color: #d33682; } .cm-s-solarized .cm-number { color: or(--rx-pink-11, #d33682); }
.cm-s-solarized .cm-def { color: #2aa198; } .cm-s-solarized .cm-def { color: or(--rx-sky-11, #2aa198); }
.cm-s-solarized .cm-variable { color: #839496; } /* .cm-s-solarized .cm-variable { color: or(--lx-gray-09, #839496); } */
.cm-s-solarized .cm-variable-2 { color: #b58900; } .cm-s-solarized .cm-variable { color: or(--lx-gray-10, #839496); }
.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; } .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-property { color: or(--rx-sky-11, #2aa198); }
.cm-s-solarized .cm-operator { color: #6c71c4; } .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 { color: or(--rx-grass-11, #859900); }
.cm-s-solarized .cm-string-2 { color: #b58900; } .cm-s-solarized .cm-string-2 { color: or(--rx-yellow-11, #b58900); }
.cm-s-solarized .cm-meta { color: #859900; } .cm-s-solarized .cm-meta { color: or(--rx-grass-11, #859900); }
.cm-s-solarized .cm-qualifier { color: #b58900; } .cm-s-solarized .cm-qualifier { color: or(--rx-yellow-11, #b58900); }
.cm-s-solarized .cm-builtin { color: #d33682; } .cm-s-solarized .cm-builtin { color: or(--rx-pink-11, #d33682); }
.cm-s-solarized .cm-bracket { color: #cb4b16; } .cm-s-solarized .cm-bracket { color: or(--rx-orange-11, #cb4b16); }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; } .cm-s-solarized .CodeMirror-matchingbracket { color: or(--rx-grass-11, #859900); }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; } .cm-s-solarized .CodeMirror-nonmatchingbracket { color: or(--rx-red-11, #dc322f); }
.cm-s-solarized .cm-tag { color: #93a1a1; } .cm-s-solarized .cm-tag { color: or(--lx-gray-10, #93a1a1); }
.cm-s-solarized .cm-attribute { color: #2aa198; } .cm-s-solarized .cm-attribute { color: or(--rx-sky-11, #2aa198); }
.cm-s-solarized .cm-hr { .cm-s-solarized .cm-hr {
color: transparent; color: transparent;
border-top: 1px solid #586e75; border-top: 1px solid or(--lx-gray-03, #586e75);
display: block; display: block;
} }
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; } .cm-s-solarized .cm-link { color: or(--lx-gray-10, #93a1a1); cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; } .cm-s-solarized .cm-special { color: or(--rx-purple-11, #6c71c4); }
.cm-s-solarized .cm-em { .cm-s-solarized .cm-em {
color: #999; color: #999;
text-decoration: underline; text-decoration: underline;
@@ -89,17 +99,18 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
} }
.cm-s-solarized .cm-error, .cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar { .cm-s-solarized .cm-invalidchar {
color: #586e75; /* color: or(--lx-gray-03, #586e75); */
border-bottom: 1px dotted #dc322f; 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 ::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-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 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: #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: #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 */ /* Editor styling */
@@ -113,33 +124,35 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
/* Dark */ /* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters { .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 { .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; text-shadow: #021014 0 -1px;
} }
/* Light */ /* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters { .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 { .cm-s-solarized.cm-s-light .CodeMirror-linenumber {
color: #839496; color: or(--lx-gray-09, #839496);
} }
/* Common */ /* Common */
.cm-s-solarized .CodeMirror-linenumber { .cm-s-solarized .CodeMirror-linenumber {
padding: 0 5px; 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-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 { .cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
color: #586e75; color: or(--lx-gray-03, #586e75);
} }
/* Cursor */ /* Cursor */
@@ -148,8 +161,8 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
/* Fat cursor */ /* Fat cursor */
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; } .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-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-fat-cursor .CodeMirror-cursor { background: or(--lx-gray-03, #586e75); }
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; } .cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: or(--lx-gray-03, #586e75); }
/* Active line */ /* Active line */
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {

3
src/main/frontend/colors.cljs
View File

@@ -1512,7 +1512,6 @@
(get-in radix [(keyword color-name) (keyword color-value)])))) (get-in radix [(keyword color-name) (keyword color-value)]))))
(defn set-radix [color] (defn set-radix [color]
(js/console.log "set-radix" (pr-str color))
(let [style-tag (or (js/document.querySelector "style#color-variables") (let [style-tag (or (js/document.querySelector "style#color-variables")
(js/document.createElement "style")) (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"] 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-secondary-text-color: var(--rx-" (name gray) "-11); "
"--ls-primary-text-color: var(--rx-" (name gray) "-12); " "--ls-primary-text-color: var(--rx-" (name gray) "-12); "
"--ls-border-color: var(--rx-" (name gray) "-05); " "--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-secondary-border-color: var(--rx-" (name color) "-05); "
"--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); " "--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); "
"--ls-wb-background-color-default: var(--rx-" (name color) "-04); " "--ls-wb-background-color-default: var(--rx-" (name color) "-04); "
@@ -1543,6 +1543,5 @@
(js/document.head.appendChild style-tag))) (js/document.head.appendChild style-tag)))
(defn unset-radix [] (defn unset-radix []
(js/console.log "unset-radix")
(when-let [style-tag (js/document.querySelector "style#color-variables")] (when-let [style-tag (js/document.querySelector "style#color-variables")]
(js/document.head.removeChild style-tag))) (js/document.head.removeChild style-tag)))

41
src/main/frontend/components/settings.cljs
View File

@@ -1,6 +1,7 @@
(ns frontend.components.settings (ns frontend.components.settings
(:require [clojure.string :as string] (:require [clojure.string :as string]
[electron.ipc :as ipc] [electron.ipc :as ipc]
[frontend.colors :as colors]
[frontend.components.assets :as assets] [frontend.components.assets :as assets]
[frontend.components.conversion :as conversion-component] [frontend.components.conversion :as conversion-component]
[frontend.components.file-sync :as fs] [frontend.components.file-sync :as fs]
@@ -308,42 +309,42 @@
(defn theme-row [t dark?] (defn theme-row [t dark?]
(let [color-accent (state/sub :color/accent) (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" :gap "0.75rem"
:overflow :scroll :overflow-x :scroll
:width "100%" :width "100%"
:padding-left "0.25rem"}} :padding-left "0.25rem"}}
[:div.theme-row--color {:on-click #(state/unset-color-accent!)} [:div.theme-row--color {:on-click #(state/unset-color-accent!)
[:div.theme-row--color-swatch {:style {"--background" "var(--rx-gray-03)" :class (when (nil? color-accent) "selected")}
"--background-hover" "var(--rx-gray-04)" [:div.theme-row--color-swatch {:style {"--background" "#0F2A35"
"--background-active" "var(--rx-gray-05)" "--background-hover" "#163542"
"--border" "var(--rx-gray-07)" "--background-active" "#274E5E"
"--border-hover" "var(--rx-gray-08)"} "--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)"}] :border-right "1px solid rgba(255,255,255,0.4)"}]
[:div.text-xs {:style {:margin "0 -0.5rem" [:div.text-xs {:style {:margin "0 -0.5rem"
:opacity 0.5 :opacity 0.5
:height "1rem" :height "1rem"
:padding "0 0.5rem"}} :padding "0 0.5rem"}}]]
"Aqua"]] [:div.theme-row--color-separator]
(for [color colors/color-list] (for [color colors/color-list
:let [gray (get colors/gray-pairing-map color)]]
[:div.theme-row--color {:on-click #(state/toggle-color-accent! color) [:div.theme-row--color {:on-click #(state/toggle-color-accent! color)
:class (when (= color-accent color) "selected")} :class (when (= color-accent color) "selected")}
[:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name color) "-03)") [:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name gray) "-02-alpha)")
"--background-hover" (str "var(--rx-" (name color) "-04)") "--background-hover" (str "var(--rx-" (name gray) "-03)")
"--background-active" (str "var(--rx-" (name color) "-05)") "--background-active" (str "var(--rx-" (name gray) "-06)")
"--border" (str "var(--rx-" (name color) "-07)") "--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)")}}] ; "--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)" display-theme [:button {:style {:background "var(--lx-accent-03)"
:border "1px solid var(--lx-accent-07)" :border "1px solid var(--lx-accent-07)"
:color "var(--lx-accent-11)"}} :color "var(--lx-accent-11)"}}
(if color-accent (name color-accent) "default")]] (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" :-for "toggle_radix_theme"
:stretch true :stretch true
:action pick-theme})])) :action pick-theme})]))

15
src/main/frontend/components/settings.css
View File

@@ -484,12 +484,24 @@ svg.cmd {
padding-top: 1rem; 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 { .cp__settings-main .theme-row--color-swatch {
@apply rounded-full; @apply rounded-full;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
background: var(--background); background: var(--background);
border: 3px solid var(--border); border: 4px solid var(--border);
/* border: 3px solid orange; */ /* 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,
.cp__settings-main .selected .theme-row--color-swatch:hover { .cp__settings-main .selected .theme-row--color-swatch:hover {
background: var(--background-active); background: var(--background-active);
border-color: var(--border-active);
} }

6
src/main/frontend/extensions/tldraw.cljs
View File

@@ -159,9 +159,9 @@
(when (when
(and populate-onboarding? (not loaded-app)) (and populate-onboarding? (not loaded-app))
[:div.absolute.inset-0.flex.items-center.justify-center [:div.absolute.inset-0.flex.items-center.justify-center
{:style {:z-index 200}} {:style {:z-index 200}}
(ui/loading "Loading onboarding whiteboard ...")]) (ui/loading "Loading onboarding whiteboard ...")])
(tldraw {:renderers tldraw-renderers (tldraw {:renderers tldraw-renderers
:handlers (get-tldraw-handlers page-name) :handlers (get-tldraw-handlers page-name)
:onMount on-mount :onMount on-mount