Inital radix reskin

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})` 

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 {

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)))

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})])) 

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);
 }

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