Annotate all lx colors

src/main/frontend/components/block.css

@@ -183,7 +183,7 @@
 }
 
 .block-children-left-border:hover {
-  background-color: or(--lx-gray-11, --ls-primary-text-color);
+  background-color: or(--logseq-og-block-left-color, --lx-gray-11, --ls-primary-text-color);
 }
 
 .block-children {
@@ -296,10 +296,10 @@
 }
 
 .page-ref {
-  color: or(--lx-accent-11, --ls-link-ref-text-color);
+  color: or(--logseq-og-page-ref-text-color, --lx-accent-11, --ls-link-ref-text-color);
 
   &:hover {
-    color: or(--lx-accent-12, --ls-link-ref-text-hover-color);
+    color: or(--logseq-og-page-ref-text-color-hover, --lx-accent-12, --ls-link-ref-text-hover-color);
   }
 }
 
@@ -569,7 +569,7 @@
 
     font-size: 14px;
 
-    background-color: or(--lx-gray-07, --ls-block-bullet-color, #394b59) !important;
+    background-color: or(--logseq-og-block-bullet-color, --lx-gray-07, --ls-block-bullet-color, #394b59) !important;
     transition: transform 0.2s;
 
     > * {
@@ -598,11 +598,11 @@
 
   &:hover > .bullet-container .bullet {
     transform: scale(1.4);
-    background-color: or(--lx-gray-08, inherit) !important;
+    background-color: or(--logseq-og-buller-border-color-typed-list, --lx-gray-08, inherit) !important;
   }
 
   &:hover > .bullet-container:not(.typed-list) {
-    background-color: or(--lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+    background-color: or(--logseq-og-bullet-border-color, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
   }
 }
 

src/main/frontend/components/container.css

@@ -80,7 +80,7 @@
 }
 
 .dark .left-sidebar-inner {
-  background-color: or(--lx-gray-01, --ls-primary-background);
+  background-color: or(--logseq-og-left-sidebar-background-color, --lx-gray-01, --ls-primary-background);
 }
 
 .left-sidebar-inner {
@@ -90,9 +90,9 @@
   width: var(--ls-left-sidebar-sm-width);
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: or(--lx-gray-02, --ls-primary-background-color);
+  background-color: or(--logseq-og-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
   background-color: var(--ls-primary-background-color);
-  border-right: 1px solid or(--lx-gray-03, --ls-tertiary-background-color);
+  border-right: 1px solid or(--logseq-og-left-sidebar-border-color, --lx-gray-03, --ls-tertiary-background-color);
   transition: transform .3s;
   transform: translate3d(-100%, 0, 0);
   z-index: 3;
@@ -220,7 +220,7 @@
       }
 
       &:hover {
-        background-color: or(--lx-gray-04, --ls-tertiary-background-color);
+        background-color: or(--logseq-og-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color);
 
         * {
           opacity: 1 !important;
@@ -275,7 +275,7 @@
           }
 
           &:hover {
-            background-color: or(--lx-gray-04, --ls-quaternary-background-color);
+            background-color: or(--logseq-og-recessed-nav-item-hover, --lx-gray-04, --ls-quaternary-background-color);
             opacity: 1;
             background-color: var(--ls-quaternary-background-color);
           }
@@ -327,21 +327,21 @@
 
     #create-button {
       @apply flex items-center justify-center p-2 text-sm font-medium rounded-md w-full border;
-      background-color: or(--lx-gray-03, --ls-secondary-background-color) !important;
+      background-color: or(--logseq-og-create-button-color, --lx-gray-03, --ls-secondary-background-color) !important;
       border-color: transparent;
 
       &:hover,
       &:focus {
         border-color: var(--ls-border-color);
-        background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
+        background-color: or(--logseq-og-create-button-color-focus, --lx-gray-03, --ls-primary-background-color) !important;
       }
 
       @screen sm {
-        background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
+        background-color: or(--logseq-og-create-button-color-sm, --lx-gray-03, --ls-primary-background-color) !important;
 
         &:hover,
         &:focus {
-          background-color: or(--lx-gray-04, --ls-secondary-background-color) !important;
+          background-color: or(--logseq-og-create-button-color-sm-focus, --lx-gray-04, --ls-secondary-background-color) !important;
         }
       }
     }
@@ -350,7 +350,7 @@
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
-    background-color: or(--lx-gray-02, --ls-secondary-background-color);
+    background-color: or(--logseq-og-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
 
     .dark & {
       background-color: or(--logseq-og-left-sidebar-background, --lx-gray-01, --ls-secondary-background-color);
@@ -457,7 +457,7 @@
     transition: width .3s;
 
     &:before {
-      background-color: or(--lx-gray-02, --ls-secondary-background-color);
+      background-color: or(--logseq-og-left-sidebar-container-sm, --lx-gray-02, --ls-secondary-background-color);
       width: 0;
       overflow: hidden;
     }
@@ -552,7 +552,7 @@
       @apply rounded-full h-8 w-8 flex items-center justify-center
       font-bold select-none cursor-help;
 
-      background-color: or(--lx-gray-01, --ls-secondary-background-color);
+      background-color: or(--logseq-og-left-sidebar-help-background, --lx-gray-01, --ls-secondary-background-color);
     }
   }
 
@@ -584,7 +584,7 @@
 .cp__right-sidebar {
   z-index: var(--ls-z-index-level-1);
   transition: width 0.3s;
-  background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
+  background-color: or(--logseq-og-right-ridebar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
   position: relative;
   user-select: none;
 
@@ -602,7 +602,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: or(--lx-gray-08-alpha, --ls-active-primary-color);
+      background-color: or(--logseq-og-right-sidebar-resizer-color, --lx-gray-08-alpha, --ls-active-primary-color);
     }
   }
 
@@ -645,7 +645,7 @@
     top: 0;
     left: 0;
     right: 0;
-    background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
+    background-color: or(--logseq-og-right-sidebar-topbar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
     z-index: 999;
     user-select: none;
     -webkit-app-region: drag;

src/main/frontend/components/settings.css

@@ -5,7 +5,7 @@
     > header {
       padding: 10px;
       padding-top: 0;
-      border-bottom: 1px solid or(--lx-gray-06, --ls-quaternary-background-color);
+      border-bottom: 1px solid or(--logseq-og-settings-header-border-color, --lx-gray-06, --ls-quaternary-background-color);
 
       h1 {
         font-size: 22px;

src/main/frontend/components/theme.css

@@ -12,17 +12,17 @@
 
 html {
   ::-webkit-scrollbar-thumb {
-    background-color: or(--lx-gray-05, --ls-scrollbar-foreground-color);
+    background-color: or(--logseq-og-scrollbar-thumb-color, --lx-gray-05, --ls-scrollbar-foreground-color);
   }
 
   ::-webkit-scrollbar {
-    background-color: or(--lx-gray-02, --ls-scrollbar-background-color);
+    background-color: or(--logseq-og-scrollbar-color, --lx-gray-02, --ls-scrollbar-background-color);
     width: var(--ls-scrollbar-width);
     height: 8px;
   }
 
   ::-webkit-scrollbar-thumb:active {
-    background-color: or(--lx-gray-06, --ls-scrollbar-thumb-hover-color);
+    background-color: or(--logseq-og-scrollbar-thumb-color-active, --lx-gray-06, --ls-scrollbar-thumb-hover-color);
   }
   
   ::-webkit-scrollbar-corner {

src/main/frontend/handler/editor.cljs

@@ -196,16 +196,9 @@
        (state/set-edit-content! edit-id new-value)
        (cursor/move-cursor-to input (+ cur-pos forward-pos))))))
 
-(-> (random-uuid) str)
-
 (defn open-block-in-sidebar!
   [block-id]
   ; (assert (uuid? block-id) "frontend.handler.editor/open-block-in-sidebar! expects block-id to be of type uuid")
-  (js/console.log "db-entity/block" block-id)
-  (js/console.log "db-entity/entity" (db/entity [:block/uuid block-id]))
-  ; (js/console.log "db-entity/types" (str block-id) (uuid block-id))
-  ; (js/console.log "db-entity/string" (db/entity [:block/uuid (str block-id)]))
-  ; (js/console.log "db-entity/uuid" (db/entity [:block/uuid (uuid block-id)]))
   (when block-id
     (when-let [block (db/entity (if (number? block-id) block-id [:block/uuid block-id]))]
       (let [page? (nil? (:block/page block))]

src/main/frontend/ui.css

@@ -35,7 +35,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--lx-gray-12, --ls-primary-text-color);
+        color: or(--logseq-og-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color);
       }
     }
   }
@@ -107,8 +107,8 @@
   }
 
   &-overlay div {
-    --from: or(--lx-gray-03, --ls-primary-background-color);
-    --to: or(--lx-gray-06, --ls-quaternary-background-color);
+    --from: or(--logseq-og-modal-overlay-gradient-start, --lx-gray-03, --ls-primary-background-color);
+    --to: or(--logseq-og-modal-overlay-gradient-end, --lx-gray-06, --ls-quaternary-background-color);
     background-image: linear-gradient(to bottom, var(--from), var(--to));
   }
 
@@ -116,7 +116,7 @@
     @apply relative rounded-md shadow-xl border-none;
 
     overflow: hidden;
-    background: or(--lx-gray-04, --ls-secondary-background-color);
+    background: or(--logseq-og-modal-panel-color, --lx-gray-04, --ls-secondary-background-color);
 
     .panel-content {
       overflow-y: auto;
@@ -282,8 +282,8 @@ html.is-mobile {
 
   /* background-color: or(--lx-accent-04, --color-indigo-600); */
   /* color: or(--lx-accent-11, white); */
-  background-color: or(--lx-accent-07, --color-indigo-600);
-  color: or(--lx-accent-12, white);
+  background-color: or(--logseq-og-button-background-color, --lx-accent-07, --color-indigo-600);
+  color: or(--logseq-og-button-text-color, --lx-accent-12, white);
 
   &:disabled {
     opacity: 0.5;
@@ -293,7 +293,7 @@ html.is-mobile {
   &:hover:not([disabled]) {
     /* opacity: or(--lx-accent-01, 0.8); */
     opacity: 1;
-    background-color: or(--lx-accent-06, --color-indigo-700);
+    background-color: or(--logseq-og-button-background-color-hover, --lx-accent-06, --color-indigo-700);
   }
 
   &.is-link {
@@ -303,22 +303,22 @@ html.is-mobile {
   &[intent='logseq'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;
 
-    color: or(--logseq-of-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
+    color: or(--logseq-og-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);
+      color: or(--logseq-og-notification-clear-button-text-hover, --lx-accent-11, --ls-link-text-color);
     }
   }
 
   &[intent='link'], &[intent='border-link'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;
 
-    color: or(--lx-gray-12, --ls-primary-text-color);
+    color: or(--logseq-og-link-text-color, --lx-gray-12, --ls-primary-text-color);
     background: transparent;
 
     &:hover {
-      color: or(--lx-accent-11, --ls-link-text-color);
+      color: or(--logseq-og-link-text-color-hover, --lx-accent-11, --ls-link-text-color);
     }
   }
 
@@ -355,10 +355,10 @@ html.is-mobile {
   @apply block w-full pl-3 pr-10 py-2 text-base leading-6 rounded
   border-gray-300 focus:outline-none sm:text-sm sm:leading-5;
 
-  background-color: or(--lx-gray-03, --ls-primary-background-color, transparent);
+  background-color: or(--logseq-og-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent);
   background-repeat: no-repeat;
   border-width: 1px;
-  border-color: or(--lx-gray-07, --ls-border-color);
+  border-color: or(--logseq-og-form-select-border-color, --lx-gray-07, --ls-border-color);
 
   &.is-small {
     @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@@ -370,7 +370,7 @@ html.is-mobile {
   sm:text-sm sm:leading-5 rounded;
 
   border-width: 1px;
-  border-color: or(--lx-gray-07, --ls-border-color);
+  border-color: or(--logseq-og-form-input-border-color, --lx-gray-07, --ls-border-color);
 
   &:focus {
     box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
@@ -390,7 +390,7 @@ html.is-mobile {
 }
 
 .bg-quaternary {
-  background-color: or(--lx-gray-06, --ls-quaternary-background-color);
+  background-color: or(--logseq-og-bg-quaternary, --lx-gray-06, --ls-quaternary-background-color);
 }
 
 .ui__icon {
@@ -403,9 +403,9 @@ html.is-mobile {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  border-color: or(--lx-gray-03, --ls-primary-background-color);
+  border-color: or(--logseq-og-type-icon-border-color, --lx-gray-03, --ls-primary-background-color);
   overflow: hidden;
-  color: or(--lx-gray-12, --ls-primary-text-color);
+  color: or(--logseq-og-type-icon-text-color, --lx-gray-12, --ls-primary-text-color);
 
   .ti,
   .tie {
@@ -414,7 +414,7 @@ html.is-mobile {
 
   &:before {
     @apply block absolute inset-0 ;
-    background: or(--lx-gray-03, --ls-primary-background-color);
+    background: or(--logseq-og-type-icon-before-color, --lx-gray-03, --ls-primary-background-color);
     content: " ";
   }
 }