chore: replace --logseq-og with --ls

resources/css/shui.css

@@ -242,11 +242,11 @@
 
 .shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color);
                                                       color: var(--ls-secondary-text-color, white); }
-.shui__button-theme-color.shui__button-color-custom  { background-color: hsl(var(--logseq-og-button-background-hsl) / 0.9);
+.shui__button-theme-color.shui__button-color-custom  { background-color: hsl(var(--ls-button-background-hsl) / 0.9);
                                                        color: white; }
 
 .shui__button-color-custom:hover, .dark .shui__button-color-custom:hover {
-    background: var(--logseq-og-button-background);
+    background: var(--ls-button-background);
 }
 
 .shui__button-theme-color.shui__button-color-lime    { color: white; background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-10); } &:active { background-color: var(--rx-lime-08); }}

src/main/frontend/common.css

@@ -103,9 +103,9 @@ html[data-theme='dark'] {
   --ls-success-background-color: var(--color-green-900);
   --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
   --ls-header-button-background: #dee4ea;
-  --logseq-og-left-sidebar-text-color: var(--lx-gray-11);
-  --logseq-og-button-background-hsl: 200 98% 35%;
-  --logseq-og-button-background: hsl(var(--logseq-og-button-background-hsl));
+  --ls-left-sidebar-text-color: var(--lx-gray-11);
+  --ls-button-background-hsl: 200 98% 35%;
+  --ls-button-background: hsl(var(--ls-button-background-hsl));
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -184,9 +184,9 @@ html[data-theme='light'] {
   --ls-success-background-color: var(--color-green-100);
   --ls-focus-ring-color: rgba(66, 133, 244, 0.5);
   --ls-header-button-background: rgba(15, 20, 25, 1);
-  --logseq-og-left-sidebar-text-color: var(--lx-gray-12);
-  --logseq-og-button-background-hsl: 200 98% 35%;
-  --logseq-og-button-background: hsl(var(--logseq-og-button-background-hsl));
+  --ls-left-sidebar-text-color: var(--lx-gray-12);
+  --ls-button-background-hsl: 200 98% 35%;
+  --ls-button-background: hsl(var(--ls-button-background-hsl));
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -207,7 +207,7 @@ html {
 }
 
 body {
-  color: or(--logseq-og-default-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: or(--ls-default-text-color, --lx-gray-12, --ls-primary-text-color);
   line-height: 1.5;
   background-color: transparent;
   min-height: 100%;
@@ -271,12 +271,12 @@ pre {
 
 a {
   cursor: pointer;
-  color: or(--logseq-og-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
+  color: or(--ls-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
   text-decoration: none;
 }
 
 a:hover {
-  color: or(--logseq-og-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
+  color: or(--ls-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
 }
 
 code {
@@ -529,7 +529,7 @@ i.ti {
 /* region FIXME: override elements (?) */
 h1.title {
   margin-bottom: 1.5rem;
-  color: or(--logseq-og-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
+  color: or(--ls-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
   font-size: var(--ls-page-title-size, 36px);
   font-weight: 500;
 }
@@ -575,7 +575,7 @@ button.menu {
 .menu-link:hover,
 button.pull:hover,
 button.menu:focus {
-  background-color: or(--logseq-og-settings-list-item-hover-background-color, --lx-gray-05, --ls-menu-hover-color, #f4f5f7);
+  background-color: or(--ls-settings-list-item-hover-background-color, --lx-gray-05, --ls-menu-hover-color, #f4f5f7);
 }
 
 .menu-links-wrapper,
@@ -583,7 +583,7 @@ button.menu:focus {
   @apply py-2 rounded-md shadow-lg overflow-y-auto;
 
   max-height: calc(100vh - 100px) !important;
-  background-color: or(--logseq-og-settings-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
+  background-color: or(--ls-settings-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
   min-width: 12rem;
 }
 
@@ -594,8 +594,8 @@ button.menu:focus {
 }
 
 .menu-link {
-  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);
+  background-color: or(--ls-settings-dropdown-link-item-background, --lx-gray-03, --ls-primary-background-color, #fff);
+  color: or(--ls-settings-dropdown-link-text-color, --lx-gray-11, --ls-primary-text-color);
   user-select: none;
 }
 
@@ -688,15 +688,15 @@ a.tag {
   cursor: pointer;
   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);
+  background: or(--ls-tag-background, --lx-accent-05, transparent);
+  color: or(--ls-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);
-  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);
+  background: or(--ls-tag-background-hover, --lx-accent-06, transparent);
+  color: or(--ls-tag-text-hvoer, --lx-accent-12, --ls-tag-text-hover-color, #045591);
 }
 
 svg.note {
@@ -802,8 +802,8 @@ mark {
   font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
     monospace;
   letter-spacing: 0;
-  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);
+  background-color: or(--ls-inline-code-background, --lx-gray-06, --ls-page-inline-code-bg-color, #eee);
+  color: or(--ls-inline-code-text, --lx-gray-11, --ls-page-inline-code-color);
   background-color: var(--ls-page-inline-code-bg-color, #eee);
   color: var(--ls-page-inline-code-color);
   text-rendering: optimizeSpeed;
@@ -840,11 +840,11 @@ a.tooltip-priority {
 }
 
 .page-reference:hover {
-  background: or(--logseq-og-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
+  background: or(--ls-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
 }
 
 .references-blocks .page-reference:hover {
-  background: or(--logseq-og-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
+  background: or(--ls-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
 }
 
 #head .fade-link {

src/main/frontend/components/block.css

@@ -183,12 +183,12 @@
 }
 
 .block-children-left-border:hover {
-  background-color: or(--logseq-og-block-left-color, --lx-gray-11, --ls-primary-text-color);
+  background-color: or(--ls-block-left-color, --lx-gray-11, --ls-primary-text-color);
 }
 
 .block-children {
   border-left: 1px solid;
-  border-left-color: or(--logseq-og-guideline-color, --lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
+  border-left-color: or(--ls-guideline-color, --lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
 
   padding-top: 2px;
   padding-bottom: 3px;
@@ -296,10 +296,10 @@
 }
 
 .page-ref {
-  color: or(--logseq-og-page-ref-text-color, --lx-accent-11, --ls-link-ref-text-color);
+  color: or(--ls-page-ref-text-color, --lx-accent-11, --ls-link-ref-text-color);
 
   &:hover {
-    color: or(--logseq-og-page-ref-text-color-hover, --lx-accent-12, --ls-link-ref-text-hover-color);
+    color: or(--ls-page-ref-text-color-hover, --lx-accent-12, --ls-link-ref-text-hover-color);
   }
 }
 
@@ -478,9 +478,9 @@
 }
 
 .color-level {
-  background-color: var(--logseq-og-right-sidebar-content-background, --lx-gray-02, --color-level-1);
+  background-color: var(--ls-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);
+    background-color: var(--ls-right-sidebar-content-background, --lx-gray-01, --color-level-1);
   }
 
   & .color-level {
@@ -569,7 +569,7 @@
 
     font-size: 14px;
 
-    background-color: or(--logseq-og-block-bullet-color, --lx-gray-07, --ls-block-bullet-color, #394b59);
+    background-color: or(--ls-block-bullet-color, --lx-gray-07, --ls-block-bullet-color, #394b59);
     transition: transform 0.2s;
 
     > * {
@@ -579,7 +579,7 @@
 
   &:not(.typed-list) {
     &.bullet-closed {
-      background-color: or(--logseq-og-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+      background-color: or(--ls-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
     }
   }
 
@@ -598,11 +598,11 @@
 
   &:hover > .bullet-container .bullet {
     transform: scale(1.2);
-    background-color: or(--logseq-og-buller-border-color-typed-list, --lx-gray-08, inherit) !important;
+    background-color: or(--ls-buller-border-color-typed-list, --lx-gray-08, inherit) !important;
   }
 
   &:hover > .bullet-container:not(.typed-list) {
-    background-color: or(--logseq-og-bullet-border-color, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
+    background-color: or(--ls-bullet-border-color, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
   }
 }
 

src/main/frontend/components/command_palette.css

@@ -40,13 +40,13 @@
 
       &.chosen,
       &.chosen p {
-        background-color: or(--logseq-og-cp-chosen, --lx-gray-03, --ls-a-chosen-bg);
+        background-color: or(--ls-cp-chosen, --lx-gray-03, --ls-a-chosen-bg);
         color: var(--ls-secondary-text-color);
       }
 
       .dark &.chosen,
       .dark &.chosen p {
-        background-color: or(--logseq-og-cp-chosen, --lx-gray-02, --ls-a-chosen-bg);
+        background-color: or(--ls-cp-chosen, --lx-gray-02, --ls-a-chosen-bg);
       }
 
       &:hover p {

src/main/frontend/components/container.css

@@ -6,17 +6,17 @@
 }
 
 #app-container {
-  background-color: or(--logseq-og-top-bar-background, --lx-gray-01, --ls-primary-background-color, #fff);
+  background-color: or(--ls-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);
+  background-color: or(--ls-top-bar-background, --lx-gray-02, --ls-primary-background-color, #fff);
 }
 
 #root {
   > div {
-    color: or(--logseq-og-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
+    color: or(--ls-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
     font-size: var(--ls-page-text-size);
   }
 }
@@ -80,7 +80,7 @@
 }
 
 .dark .left-sidebar-inner {
-  background-color: or(--logseq-og-left-sidebar-background-color, --lx-gray-01, --ls-primary-background);
+  background-color: or(--ls-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(--logseq-og-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
+  background-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
   background-color: var(--ls-primary-background-color);
-  border-right: 1px solid or(--logseq-og-left-sidebar-border-color, --lx-gray-03, --ls-tertiary-background-color);
+  border-right: 1px solid or(--ls-left-sidebar-border-color, --lx-gray-03, --ls-tertiary-background-color);
   transition: transform .3s;
   transform: translate3d(-100%, 0, 0);
   z-index: 3;
@@ -165,13 +165,13 @@
     }
 
     &:hover {
-      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);
+      background-color: or(--ls-left-sidebar-hover-background, --lx-gray-04, --ls-tertiary-background-color);
+      color: or(--ls-left-sidebar-text-color-hover, --lx-gray-12);
     }
 
     &.active, &:active {
-      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);
+      background-color: or(--ls-left-sidebar-active-background, --lx-gray-05, --ls-quaternary-background-color);
+      color: or(--ls-left-sidebar-active-text-color, --lx-gray-12);
       .ui__icon {
         opacity: .9;
       }
@@ -220,7 +220,7 @@
       }
 
       &:hover {
-        background-color: or(--logseq-og-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color);
+        background-color: or(--ls-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color);
 
         * {
           opacity: 1 !important;
@@ -275,7 +275,7 @@
           }
 
           &:hover {
-            background-color: or(--logseq-og-recessed-nav-item-hover, --lx-gray-04, --ls-quaternary-background-color);
+            background-color: or(--ls-recessed-nav-item-hover, --lx-gray-04, --ls-quaternary-background-color);
             opacity: 1;
             background-color: var(--ls-quaternary-background-color);
           }
@@ -300,10 +300,10 @@
     user-select: none;
 
     @screen sm {
-      background-image: linear-gradient(transparent, or(--logseq-og-left-sidebar-bottom-gradient, --lx-gray-02, --ls-secondary-background-color));
+      background-image: linear-gradient(transparent, or(--ls-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));
+        background-image: linear-gradient(transparent, or(--ls-left-sidebar-bottom-gradient, --lx-gray-01, --ls-secondary-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(--logseq-og-create-button-color, --lx-gray-03, --ls-secondary-background-color) !important;
+      background-color: or(--ls-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(--logseq-og-create-button-color-focus, --lx-gray-03, --ls-primary-background-color) !important;
+        background-color: or(--ls-create-button-color-focus, --lx-gray-03, --ls-primary-background-color) !important;
       }
 
       @screen sm {
-        background-color: or(--logseq-og-create-button-color-sm, --lx-gray-03, --ls-primary-background-color) !important;
+        background-color: or(--ls-create-button-color-sm, --lx-gray-03, --ls-primary-background-color) !important;
 
         &:hover,
         &:focus {
-          background-color: or(--logseq-og-create-button-color-sm-focus, --lx-gray-04, --ls-secondary-background-color) !important;
+          background-color: or(--ls-create-button-color-sm-focus, --lx-gray-04, --ls-secondary-background-color) !important;
         }
       }
     }
@@ -350,10 +350,10 @@
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
-    background-color: or(--logseq-og-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+    background-color: or(--ls-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);
+      background-color: or(--ls-left-sidebar-background, --lx-gray-01, --ls-secondary-background-color);
     }
 
     > .wrap {
@@ -380,7 +380,7 @@
     @apply opacity-90 hover:opacity-100;
     transition: all 120ms ease-out;
 
-    color: or(--logseq-og-left-sidebar-text-color, --ls-header-button-background);
+    color: or(--ls-left-sidebar-text-color, --ls-header-button-background);
   }
 
   > .left-sidebar-inner {
@@ -457,7 +457,7 @@
     transition: width .3s;
 
     &:before {
-      background-color: or(--logseq-og-left-sidebar-container-sm, --lx-gray-02, --ls-secondary-background-color);
+      background-color: or(--ls-left-sidebar-container-sm, --lx-gray-02, --ls-secondary-background-color);
       width: 0;
       overflow: hidden;
     }
@@ -519,11 +519,11 @@
 }
 
 .cp__sidebar-main-layout {
-  background-color: or(--logseq-og-main-content-background, --lx-gray-01, --ls-primary-background-color);
+  background-color: or(--ls-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);
+  background-color: or(--ls-main-content-background, --lx-gray-02, --ls-primary-background-color);
 }
 
 .cp__sidebar-main-content {
@@ -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(--logseq-og-left-sidebar-help-background, --lx-gray-01, --ls-secondary-background-color);
+      background-color: or(--ls-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(--logseq-og-right-ridebar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
+  background-color: or(--ls-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(--logseq-og-right-sidebar-resizer-color, --lx-gray-08-alpha, --ls-active-primary-color);
+      background-color: or(--ls-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(--logseq-og-right-sidebar-topbar-color, --lx-gray-01, --ls-secondary-background-color, #d8e1e8);
+    background-color: or(--ls-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/header.css

@@ -187,7 +187,7 @@
     background: none;
 
     @screen md {
-      background: or(--logseq-og-header-button-hover, --lx-gray-04, --ls-tertiary-background-color);
+      background: or(--ls-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: or(--logseq-og-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
+    border-top-color: or(--ls-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
     margin: 24px 0;
     padding: 24px 0;
     min-height: 250px;

src/main/frontend/components/page.css

@@ -76,7 +76,7 @@
       > span {
         @apply text-sm;
 
-        color: or(--logseq-og-all-pages-table-text, --lx-gray-11, rgb(115, 115, 115));
+        color: or(--ls-all-pages-table-text, --lx-gray-11, rgb(115, 115, 115));
 
         padding: 6px 8px;
       }
@@ -101,14 +101,14 @@
 
   .actions {
     position: sticky;
-    background-color: or(--logseq-og-all-pages-table, --lx-gray-01, --ls-primary-background-color);
+    background-color: or(--ls-all-pages-table, --lx-gray-01, --ls-primary-background-color);
     white-space: nowrap;
     top: -18px;
     padding-bottom: 10px;
     z-index: 1;
 
     .dark & {
-        background-color: or(--logseq-og-all-pages-table, --lx-gray-02, --ls-primary-background-color);
+        background-color: or(--ls-all-pages-table, --lx-gray-02, --ls-primary-background-color);
     }
 
     @screen md {

src/main/frontend/components/right_sidebar.css

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

src/main/frontend/components/settings.css

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

src/main/frontend/components/theme.css

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

src/main/frontend/components/whiteboard.css

@@ -50,13 +50,13 @@ h1.title.whiteboard-dashboard-title {
 
 .dashboard-create-card {
   @apply items-center justify-center relative;
-  background-color: or(--logseq-og-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color);
+  background-color: or(--ls-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
   border: 1px solid transparent;
 }
 
 .dark .dashboard-create-card {
-  background-color: or(--logseq-og-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color);
+  background-color: or(--ls-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color);
 }
 
 .dashboard-create-card i {
@@ -83,12 +83,12 @@ h1.title.whiteboard-dashboard-title {
   @apply px-4 py-3 flex flex-col;
   gap: 4px;
   border-bottom: 1px solid var(--ls-border-color);
-  background-color: or(--logseq-og-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color);
+  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color);
   font-size: 16px;
 }
 
 .dark .dashboard-card-title {
-  background-color: or(--logseq-og-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color);
+  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color);
 }
 
 .dashboard-card-title-name {
@@ -153,11 +153,11 @@ input.tl-text-input {
   z-index: 2000;
   gap: 4px;
   line-height: 1.4;
-  background: or(--logseq-og-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
+  background: or(--ls-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);
+  background: or(--ls-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
 }
 
 .whiteboard-page-title {

src/main/frontend/ui.css

@@ -35,7 +35,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--logseq-og-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color);
+        color: or(--ls-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color);
       }
     }
   }
@@ -49,8 +49,8 @@
 
 .ui__ac-group-name {
   @apply p-2 text-xs;
-  color: or(--logseq-og-dropdown-title-color, --lx-gray-11-alpha, --ls-block-ref-link-text-color);
-  background-color: or(--logseq-og-dropdown-title-background, --lx-gray-03);
+  color: or(--ls-dropdown-title-color, --lx-gray-11-alpha, --ls-block-ref-link-text-color);
+  background-color: or(--ls-dropdown-title-background, --lx-gray-03);
 }
 
 .search-all #ui__ac-inner {
@@ -72,7 +72,7 @@
 
   .notification-area {
     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);
+    color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color);
   }
 }
 
@@ -107,8 +107,8 @@
   }
 
   &-overlay div {
-    --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);
+    --from: or(--ls-modal-overlay-gradient-start, --lx-gray-03, --ls-primary-background-color);
+    --to: or(--ls-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(--logseq-og-modal-panel-color, --lx-gray-04, --ls-secondary-background-color);
+    background: or(--ls-modal-panel-color, --lx-gray-04, --ls-secondary-background-color);
 
     .panel-content {
       overflow-y: auto;
@@ -276,8 +276,8 @@ html.is-mobile {
 }
 
 .dropdown-wrapper {
-  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);
+  background-color: or(--ls-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
+  border: 1px solid or(--ls-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);
   min-width: 12rem;
   border-radius: 6px;
 }
@@ -299,10 +299,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(--logseq-og-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent);
+  background-color: or(--ls-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent);
   background-repeat: no-repeat;
   border-width: 1px;
-  border-color: or(--logseq-og-form-select-border-color, --lx-gray-07, --ls-border-color);
+  border-color: or(--ls-form-select-border-color, --lx-gray-07, --ls-border-color);
 
   &.is-small {
     @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@@ -314,7 +314,7 @@ html.is-mobile {
   sm:text-sm sm:leading-5 rounded;
 
   border-width: 1px;
-  border-color: or(--logseq-og-form-input-border-color, --lx-gray-07, --ls-border-color);
+  border-color: or(--ls-form-input-border-color, --lx-gray-07, --ls-border-color);
 
   &:focus {
     box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
@@ -334,7 +334,7 @@ html.is-mobile {
 }
 
 .bg-quaternary {
-  background-color: or(--logseq-og-bg-quaternary, --lx-gray-06, --ls-quaternary-background-color);
+  background-color: or(--ls-bg-quaternary, --lx-gray-06, --ls-quaternary-background-color);
 }
 
 .ui__icon {
@@ -347,9 +347,9 @@ html.is-mobile {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  border-color: or(--logseq-og-type-icon-border-color, --lx-gray-03, --ls-primary-background-color);
+  border-color: or(--ls-type-icon-border-color, --lx-gray-03, --ls-primary-background-color);
   overflow: hidden;
-  color: or(--logseq-og-type-icon-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: or(--ls-type-icon-text-color, --lx-gray-12, --ls-primary-text-color);
 
   .ti,
   .tie {
@@ -358,7 +358,7 @@ html.is-mobile {
 
   &:before {
     @apply block absolute inset-0 ;
-    background: or(--logseq-og-type-icon-before-color, --lx-gray-03, --ls-primary-background-color);
+    background: or(--ls-type-icon-before-color, --lx-gray-03, --ls-primary-background-color);
     content: " ";
   }
 }
@@ -368,9 +368,9 @@ html.is-mobile {
 }
 
 .ui__toggle-background-on {
-  background: or(--logseq-og-toggle-on-background, --lx-accent-09, --logseq-og-button-background);
+  background: or(--ls-toggle-on-background, --lx-accent-09, --ls-button-background);
 }
 
 .ui__toggle-background-off {
-  background: or(--logseq-og-toggle-off-background, --lx-gray-08, rgb(212, 212, 212));
+  background: or(--ls-toggle-off-background, --lx-gray-08, rgb(212, 212, 212));
 }

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

@@ -281,12 +281,12 @@ html[data-theme='light'] {
   color: var(--ls-primary-text-color);
 
   &:hover {
-    background-color: or(--logseq-og-whiteboard-button-background-hover, --lx-gray-06, --ls-primary-background-color);
+    background-color: or(--ls-whiteboard-button-background-hover, --lx-gray-06, --ls-primary-background-color);
   }
 
   &[data-selected='true'] {
-    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);
+    background-color: or(--ls-whiteboard-button-background-selected, --lx-accent-09, --color-selectedFill);
+    color: or(--ls-whiteboard-button-text-selected, --lx-gray-12, --color-selectedContrast);
   }
 }
 
@@ -354,7 +354,7 @@ button.tl-select-input-trigger {
   }
 
   &[data-state='checked'] {
-    background-color: or(--logseq-og-whiteboard-select-background-selected, --lx-accent-09, --color-indigo-500);
+    background-color: or(--ls-whiteboard-select-background-selected, --lx-accent-09, --color-indigo-500);
     color: #fff;
   }
 }
@@ -820,8 +820,8 @@ 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)),
-                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);
+                or(--ls-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
+    border: 1px solid or(--ls-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
     color: var(--ls-secondary-text-color);
   }
 }
@@ -1129,7 +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);
+  background: or(--ls-whiteboard-quick-links-background, --lx-accent-09, --color-indigo-600);
   color: #fff;
 }
 
@@ -1147,7 +1147,7 @@ button.tl-shape-links-panel-item-remove-button {
     @apply opacity-50;
   }
   .tl-quick-links-row:nth-child(1):hover {
-    background: or(--logseq-og-whiteboard-quick-links-background-hover, --lx-accent-08, --color-indigo-500);
+    background: or(--ls-whiteboard-quick-links-background-hover, --lx-accent-08, --color-indigo-500);
   }
 }
 
@@ -1160,8 +1160,8 @@ button.tl-shape-links-panel-item-remove-button {
   padding: 10px 15px;
   font-size: 15px;
   line-height: 1;
-  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);
+  color: or(--ls-whiteboard-tooltip-text, --lx-gray-12, --ls-secondary-text-color);
+  background-color: or(--ls-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;