second pass at styling

logseq · Jun 30, 2023 · c6cad41 · c6cad41
1 parent 3e86da1
commit c6cad41
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 53 deletions.
diff --git a/resources/css/common.css b/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 {

diff --git a/src/main/frontend/colors.cljs b/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)))
diff --git a/src/main/frontend/components/block.css b/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);
     }
   }
 

diff --git a/src/main/frontend/components/container.css b/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,14 +79,18 @@
   overflow: auto;
 }
 
+.dark .left-sidebar-inner { 
+  background-color: or(--lx-gray-01, --ls-primary-background);
+}
+
 .left-sidebar-inner {
   position: relative;
   height: 100%;
   padding-top: 12px;
   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 {

diff --git a/src/main/frontend/components/header.css b/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);
     }
   }
 

diff --git a/src/main/frontend/components/journal.css b/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;

diff --git a/src/main/frontend/components/right_sidebar.css b/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] {

diff --git a/src/main/frontend/components/settings.cljs b/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")}

diff --git a/src/main/frontend/components/whiteboard.css b/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 {

diff --git a/src/main/frontend/state.cljs b/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))