second pass at styling

resources/css/common.css

@@ -203,7 +203,7 @@ html {
 }
 
 body {
-  color: var(--ls-primary-text-color);
+  color: or(--logseq-og-default-text-color, --lx-gray-12, --ls-primary-text-color);
   line-height: 1.5;
   background-color: transparent;
   min-height: 100%;
@@ -267,12 +267,12 @@ pre {
 
 a {
   cursor: pointer;
-  color: var(--ls-link-text-color, #045591);
+  color: or(--logseq-og-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
   text-decoration: none;
 }
 
 a:hover {
-  color: var(--ls-link-text-hover-color, #000);
+  color: or(--logseq-og-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
 }
 
 code {
@@ -522,7 +522,7 @@ i.ti {
 /* region FIXME: override elements (?) */
 h1.title {
   margin-bottom: 1.5rem;
-  color: var(--ls-title-text-color, #222);
+  color: or(--logseq-og-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
   font-size: var(--ls-page-title-size, 36px);
   font-weight: 500;
 }
@@ -568,14 +568,14 @@ button.menu {
 .menu-link:hover,
 button.pull:hover,
 button.menu:focus {
-  background-color: var(--ls-menu-hover-color, #f4f5f7);
+  background-color: or(--logseq-og-settings-list-item-hover-background-color, --lx-gray-05, --ls-menu-hover-color, #f4f5f7);
 }
 
 .menu-links-wrapper, .menu-links-outer {
   @apply py-2 rounded-md shadow-lg overflow-y-auto;
 
   max-height: calc(100vh - 100px) !important;
-  background-color: var(--ls-primary-background-color, #fff);
+  background-color: or(--logseq-og-settings-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
   min-width: 12rem;
 }
 
@@ -586,8 +586,8 @@ button.menu:focus {
 }
 
 .menu-link {
-  background-color: var(--ls-primary-background-color, #fff);
-  color: var(--ls-primary-text-color);
+  background-color: or(--logseq-og-settings-dropdown-link-item-background, --lx-gray-03, --ls-primary-background-color, #fff);
+  color: or(--logseq-og-settings-dropdown-link-text-color, --lx-gray-11, --ls-primary-text-color);
   user-select: none;
 }
 
@@ -677,13 +677,17 @@ a.tag {
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
-  color: var(--ls-tag-text-color, #045591);
+  padding: 0 2px; 
+  border-radius: 4px;
+  background: or(--logseq-og-tag-background, --lx-accent-05, transparent);
+  color: or(--logseq-og-tag-text, --lx-accent-11, --ls-tag-text-color, #045591);
   opacity: var(--ls-tag-text-opacity, 0.8);
 }
 
 a.tag:hover {
   opacity: var(--ls-tag-text-hover-opacity, 1);
-  color: var(--ls-tag-text-hover-color, #045591);
+  background: or(--logseq-og-tag-background-hover, --lx-accent-06, transparent);
+  color: or(--logseq-og-tag-text-hvoer, --lx-accent-12, --ls-tag-text-hover-color, #045591);
 }
 
 svg.note {
@@ -789,8 +793,8 @@ mark {
   font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
     monospace;
   letter-spacing: 0;
-  background-color: var(--ls-page-inline-code-bg-color, #eee);
-  color: var(--ls-page-inline-code-color);
+  background-color: or(--logseq-og-inline-code-background, --lx-gray-06, --ls-page-inline-code-bg-color, #eee);
+  color: or(--logseq-og-inline-code-text, --lx-gray-11, --ls-page-inline-code-color);
   word-spacing: -0.15em;
   text-rendering: optimizeSpeed;
 }
@@ -826,11 +830,11 @@ a.tooltip-priority {
 }
 
 .page-reference:hover {
-  background: var(--ls-secondary-background-color);
+  background: or(--logseq-og-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
 }
 
 .references-blocks .page-reference:hover {
-  background: var(--ls-tertiary-background-color);
+  background: or(--logseq-og-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
 }
 
 #head .fade-link {

src/main/frontend/colors.cljs

@@ -1517,14 +1517,32 @@
                       (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"]
         gray (get gray-pairing-map color)
-        accent (map #(str "--lx-accent-" % ": var(--rx-" (name color) "-" % "); ") steps)
-        gray   (map #(str "--lx-gray-" % ": var(--rx-" (name gray) "-" % "); ") steps)]
+        accents (map #(str "--lx-accent-" % ": var(--rx-" (name color) "-" % "); ") steps)
+        grays   (map #(str "--lx-gray-" % ": var(--rx-" (name gray) "-" % "); ") steps)
+        translations (str "--ls-primary-background-color: var(--rx-" (name gray) "-01); "
+                          "--ls-secondary-background-color: var(--rx-" (name gray) "-02); " 
+                          "--ls-tertiary-background-color: var(--rx-" (name gray) "-03); " 
+                          "--ls-quaternary-background-color: var(--rx-" (name gray) "-04); " 
+                          "--ls-link-text-color: var(--rx-" (name color) "-11); "
+                          "--ls-link-text-hover-color: var(--rx-" (name color) "-12); "
+                          "--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-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); "
+                          "--ls-wb-text-color-default: var(--rx-" (name gray) "-12); ")
+                          ; "--tl-selectStroke: var(--rx-" (name color) "-08); ")
+        tl-translations (str "[class^=\"tl-\"] { --tl-selectStroke: var(--rx-" (name color) "-09); }")]
     (set! (.-id style-tag) "color-variables")
     ; (set! (.-innerHTML style-tag) (str/join "\n" (flatten [":root {" accent gray "}"])))
-    (->> [":root {" accent gray "}"]
+    (->> [":root { " accents grays translations " } body, .dark-theme, .light-theme {" accents grays translations "} " tl-translations]
          (flatten)
          (str/join "\n")
          (set! (.-innerHTML 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")]
+    (js/document.head.removeChild style-tag)))

src/main/frontend/components/block.css

@@ -188,7 +188,7 @@
 
 .block-children {
   border-left: 1px solid;
-  border-left-color: var(--ls-guideline-color, #ddd);
+  border-left-color: or(--logseq-og-guideline-color, --lx-gray-07-alpha, --ls-guideline-color, #ddd);
 
   padding-top: 2px;
   padding-bottom: 3px;
@@ -478,7 +478,10 @@
 }
 
 .color-level {
-  background-color: var(--color-level-1);
+  background-color: var(--logseq-og-right-sidebar-content-background, --lx-gray-02, --color-level-1);
+  .dark & {
+    background-color: var(--logseq-og-right-sidebar-content-background, --lx-gray-01, --color-level-1);
+  }
 
   & .color-level {
     background-color: var(--color-level-2);
@@ -542,7 +545,7 @@
 
     font-size: 14px;
 
-    background-color: var(--ls-block-bullet-color, #394b59);
+    background-color: or(--lx-gray-07, --ls-block-bullet-color, #394b59);
     transition: transform 0.2s;
 
     > * {
@@ -552,7 +555,7 @@
 
   &:not(.typed-list) {
     &.bullet-closed {
-      background-color: var(--ls-block-bullet-border-color, #ced9e0);
+      background-color: or(--logseq-og-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
     }
   }
 

src/main/frontend/components/container.css

@@ -6,13 +6,17 @@
 }
 
 #app-container {
-  background-color: or(--lx-gray-02, --ls-primary-background-color, #fff);
+  background-color: or(--logseq-og-top-bar-background, --lx-gray-01, --ls-primary-background-color, #fff);
   position: relative;
 }
 
+.dark #app-container {
+  background-color: or(--logseq-og-top-bar-background, --lx-gray-02, --ls-primary-background-color, #fff);
+}
+
 #root {
   > div {
-    color: var(--ls-primary-text-color, #24292e);
+    color: or(--logseq-og-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
     font-size: var(--ls-page-text-size);
   }
 }
@@ -75,6 +79,10 @@
   overflow: auto;
 }
 
+.dark .left-sidebar-inner { 
+  background-color: or(--lx-gray-01, --ls-primary-background);
+}
+
 .left-sidebar-inner {
   position: relative;
   height: 100%;
@@ -82,7 +90,7 @@
   width: var(--ls-left-sidebar-sm-width);
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: or(--lx-gray-01, --ls-primary-background-color);
+  background-color: or(--lx-gray-02, --ls-primary-background-color);
   transition: transform .3s;
   transform: translate3d(-100%, 0, 0);
   z-index: 3;
@@ -143,11 +151,13 @@
     }
 
     &:hover {
-      background-color: or(--lx-gray-04, --ls-tertiary-background-color);
+      background-color: or(--logseq-og-left-sidebar-hover-background, --lx-gray-04, --ls-tertiary-background-color);
+      color: or(--logseq-og-left-sidebar-text-color-hover, --lx-gray-12, --ls-header-button-background);
     }
 
     &.active, &:active {
-      background-color: or(--lx-gray-05, --ls-quaternary-background-color);
+      background-color: or(--logseq-og-left-sidebar-active-background, --lx-gray-05, --ls-quaternary-background-color);
+      color: or(--logseq-og-left-sidebar-active-text-color, --lx-gray-12, --ls-quaternary-background-color);
     }
   }
 
@@ -190,7 +200,7 @@
       }
 
       &:hover {
-        background-color: var(--ls-tertiary-background-color);
+        background-color: or(--lx-gray-04, --ls-tertiary-background-color);
 
         * {
           opacity: 1 !important;
@@ -246,7 +256,7 @@
           }
 
           &:hover {
-            background-color: var(--ls-quaternary-background-color);
+            background-color: or(--lx-gray-04, --ls-quaternary-background-color);
           }
         }
       }
@@ -275,7 +285,11 @@
     user-select: none;
 
     @screen sm {
-      background-image: linear-gradient(transparent, var(--ls-secondary-background-color));
+      background-image: linear-gradient(transparent, or(--logseq-og-left-sidebar-bottom-gradient, --lx-gray-02, --ls-secondary-background-color));
+
+      .dark & {
+        background-image: linear-gradient(transparent, or(--logseq-og-left-sidebar-bottom-gradient, --lx-gray-01, --ls-secondary-background-color));
+      }
     }
 
     &-link {
@@ -321,7 +335,11 @@
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
-    background-color: or(--lx-gray-01, --ls-secondary-background-color);
+    background-color: or(--lx-gray-02, --ls-secondary-background-color);
+
+    .dark & {
+      background-color: or(--logseq-og-left-sidebar-background, --lx-gray-01, --ls-secondary-background-color);
+    }
 
     > .wrap {
       margin-top: 52px;
@@ -345,8 +363,9 @@
 
   a {
     @apply opacity-90 hover:opacity-100;
+    transition: all 120ms ease-out;
 
-    color: var(--ls-header-button-background);
+    color: or(--logseq-og-left-sidebar-text-color, --lx-gray-11, --ls-header-button-background);
   }
 
   > .left-sidebar-inner {
@@ -423,7 +442,7 @@
     transition: width .3s;
 
     &:before {
-      background-color: or(--lx-gray-01, --ls-secondary-background-color);
+      background-color: or(--lx-gray-02, --ls-secondary-background-color);
       width: 0;
       overflow: hidden;
     }
@@ -493,7 +512,11 @@ html[data-theme='dark'] {
 }
 
 .cp__sidebar-main-layout {
-  background-color: or(--lx-gray-02, --ls-primary-background-color);
+  background-color: or(--logseq-og-main-content-background, --lx-gray-01, --ls-primary-background-color);
+}
+
+.dark .cp__sidebar-main-layout {
+  background-color: or(--logseq-og-main-content-background, --lx-gray-02, --ls-primary-background-color);
 }
 
 .cp__sidebar-main-content {

src/main/frontend/components/header.css

@@ -195,7 +195,7 @@
     background: none;
 
     @screen md {
-      background: var(--ls-tertiary-background-color);
+      background: or(--logseq-og-header-button-hover, --lx-gray-04, --ls-tertiary-background-color);
     }
   }
 

src/main/frontend/components/journal.css

@@ -7,7 +7,7 @@
 
   .journal-item {
     border-top: 1px solid;
-    border-top-color: var(--ls-border-color, #738694);
+    border-top-color: or(--logseq-og-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
     margin: 24px 0;
     padding: 24px 0;
     min-height: 250px;

src/main/frontend/components/right_sidebar.css

@@ -23,7 +23,11 @@ html[data-theme=light] a.toggle:hover {
 
 .cp__header a, .cp__header button, .cp__right-sidebar-topbar button {
     opacity: 1;
-    color: var(--ls-header-button-background);
+    color: or(--logseq-og-header-button-text-color, --lx-gray-11, --ls-header-button-background);
+}
+
+.cp__header a:hover, .cp__header button:hover, .cp__right-sidebar-topbar button:hover {
+    color: or(--logseq-og-header-button-text-color-hover, --lx-gray-12, --ls-header-button-background);
 }
 
 html[data-theme=dark] {

src/main/frontend/components/settings.cljs

@@ -313,6 +313,18 @@
                                        :overflow :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)"}
+                                                           :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]
                       [:div.theme-row--color {:on-click #(state/toggle-color-accent! color) 
                                               :class (when (= color-accent color) "selected")}

src/main/frontend/components/whiteboard.css

@@ -140,12 +140,16 @@ input.tl-text-input {
   position: absolute;
   left: 2.5rem;
   top: 0;
-  background: var(--ls-primary-background-color);
   padding: 4px;
   border-radius: 0 0 12px 12px;
   z-index: 2000;
   gap: 4px;
   line-height: 1.4;
+  background: or(--logseq-og-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
+}
+
+.dark .whiteboard-page-title-root {
+  background: or(--logseq-og-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
 }
 
 .whiteboard-page-title {

src/main/frontend/state.cljs

@@ -2136,5 +2136,10 @@ Similar to re-frame subscriptions"
     (do (swap! state assoc :color/accent color)
         (colors/set-radix color))))
 
+(defn unset-color-accent! []
+  (swap! state assoc :color/accent nil)
+  (colors/unset-radix))
+ 
+
 (defn get-color-accent []
   (get @state :color/accent))

src/main/frontend/ui.css

@@ -70,8 +70,8 @@
   }
 
   .notification-area {
-    background-color: or(--lx-gray-05, --ls-tertiary-background-color, #fff);
-    color: or(--lx-gray-12, --ls-primary-text-color);
+    background-color: or(--logseq-of-notification-background, --lx-gray-04, --ls-tertiary-background-color, #fff);
+    color: or(--logseq-og-notification-text-color, --lx-gray-11, --ls-primary-text-color);
   }
 }
 
@@ -303,8 +303,8 @@ html.is-mobile {
   &[intent='logseq'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;
 
-    color: or(--lx-accent-11, --ls-primary-text-color);
-    background: or(--lx-accent-12, --ls-secondary-background-color);
+    color: or(--logseq-of-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
+    background: or(--logseq-og-notification-clear-button-background, --lx-gray-04, --ls-secondary-background-color);
 
     &:hover {
       color: or(--lx-accent-11, --ls-link-text-color);
@@ -332,8 +332,8 @@ html.is-mobile {
 }
 
 .dropdown-wrapper {
-  background-color: or(--lx-gray-03, --ls-primary-background-color, #fff);
-  border: 1px solid or(--lx-gray-05, --ls-tertiary-background-color);
+  background-color: or(--logseq-og-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
+  border: 1px solid or(--logseq-og-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);
   min-width: 12rem;
   border-radius: 6px;
 }

tldraw/apps/tldraw-logseq/src/styles.css

@@ -281,12 +281,12 @@ html[data-theme='light'] {
   color: var(--ls-primary-text-color);
 
   &:hover {
-    background-color: var(--ls-primary-background-color);
+    background-color: or(--logseq-og-whiteboard-button-background-hover, --lx-gray-06, --ls-primary-background-color);
   }
 
   &[data-selected='true'] {
-    background-color: var(--color-selectedFill);
-    color: var(--color-selectedContrast);
+    background-color: or(--logseq-og-whiteboard-button-background-selected, --lx-accent-09, --color-selectedFill);
+    color: or(--logseq-og-whiteboard-button-text-selected, --lx-gray-12, --color-selectedContrast);
   }
 }
 
@@ -354,7 +354,7 @@ button.tl-select-input-trigger {
   }
 
   &[data-state='checked'] {
-    background-color: var(--color-indigo-500);
+    background-color: or(--logseq-og-whiteboard-select-background-selected, --lx-accent-09, --color-indigo-500);
     color: #fff;
   }
 }
@@ -819,8 +819,9 @@ html[data-theme='light'] {
 
 html[data-theme='dark'] {
   .tl-type-tag[data-active='true'] {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), #338fff;
-    border: 1px solid #338fff;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
+                or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
+    border: 1px solid or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
     color: var(--ls-secondary-text-color);
   }
 }
@@ -1128,6 +1129,7 @@ button.tl-shape-links-panel-item-remove-button {
 
 .tl-quick-links-row:nth-child(1) {
   @apply rounded bg-indigo-600;
+  background: or(--logseq-og-whiteboard-quick-links-background, --lx-accent-09, --color-indigo-600);
   color: #fff;
 }
 
@@ -1145,7 +1147,7 @@ button.tl-shape-links-panel-item-remove-button {
     @apply opacity-50;
   }
   .tl-quick-links-row:nth-child(1):hover {
-    @apply bg-indigo-500;
+    background: or(--logseq-og-whiteboard-quick-links-background-hover, --lx-accent-08, --color-indigo-500);
   }
 }
 
@@ -1158,8 +1160,8 @@ button.tl-shape-links-panel-item-remove-button {
   padding: 10px 15px;
   font-size: 15px;
   line-height: 1;
-  color: var(--ls-secondary-text-color);
-  background-color: var(--ls-secondary-background-color);
+  color: or(--logseq-og-whiteboard-tooltip-text, --lx-gray-12, --ls-secondary-text-color);
+  background-color: or(--logseq-og-whiteboard-tooltip-background, --lx-gray-05, --ls-secondary-background-color);
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   user-select: none;
   animation-duration: 700ms;