enhance(ui): clean up css vars

src/main/frontend/common.css

@@ -405,11 +405,7 @@ button.menu:focus {
 }
 
 .menu-separator {
-  @apply my-1;
-
-  opacity: 0.5;
-  border-top-width: 1px;
-  border-color: var(--ls-border-color, #ccc);
+  @apply my-1 opacity-50 border-t;
 }
 
 a.login {
@@ -641,11 +637,11 @@ a.tooltip-priority {
 }
 
 .page-reference:hover {
-  background: or(--ls-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
+  background: var(--lx-accent-04-alpha, var(--ls-secondary-background-color, hsl(var(--primary)/.4)));
 }
 
 .references-blocks .page-reference:hover {
-  background: or(--ls-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
+  background: var(--lx-accent-04-alpha, var(--ls-tertiary-background-color, hsl(var(--primary)/.4)));
 }
 
 #head .fade-link {

src/main/frontend/components/block.css

@@ -479,10 +479,10 @@
 }
 
 .color-level {
-  background-color: or(--ls-right-sidebar-content-background, --lx-gray-02, --color-level-1, --rx-gray-02);
+  background-color: var(--lx-gray-02, var(--color-level-1, var(--rx-gray-02)));
 
   .dark & {
-    background-color: or(--ls-right-sidebar-content-background, --lx-gray-01, --color-level-1, --rx-gray-01);
+    background-color: var(--lx-gray-01, var(--color-level-1, var(--rx-gray-01)));
   }
 
   & .color-level {

src/main/frontend/components/command_palette.css

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

src/main/frontend/components/container.css

@@ -163,8 +163,8 @@
     }
 
     &:hover, &.active {
-      background-color: or(--ls-left-sidebar-active-background, --lx-gray-04, --color-level-3);
-      color: or(--ls-left-sidebar-active-text-color, --lx-gray-12);
+      background-color: var(--lx-gray-04, var(--color-level-3, var(--rx-gray-04)));
+      color: var(--lx-gray-12, var(--rx-gray-12));
 
       .ui__icon {
         opacity: .9;
@@ -209,7 +209,7 @@
       }
 
       &:hover {
-        background-color: or(--ls-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color);
+        background-color: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04)));
 
         * {
           opacity: 1 !important;

src/main/frontend/components/theme.css

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

src/main/frontend/ui.css

@@ -23,7 +23,7 @@
       }
 
       &:hover, &.chosen {
-        background-color: or(--lx-gray-05, --ls-menu-hover-color, hsl(var(--secondary)));
+        background-color: var(--lx-gray-05, var(--ls-menu-hover-color, hsl(var(--secondary))));
 
         .has-help small {
           visibility: visible;
@@ -32,7 +32,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--lx-gray-12, --ls-primary-text-color, hsl(var(--secondary)));
+        color: var(--lx-gray-12, var(--ls-primary-text-color, hsl(var(--secondary))));
       }
     }
   }
@@ -304,10 +304,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(--ls-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent);
+  background-color: var(--lx-gray-03, var(--ls-primary-background-color, transparent));
   background-repeat: no-repeat;
   border-width: 1px;
-  border-color: or(--ls-form-select-border-color, --lx-gray-07, --ls-border-color);
+  border-color: var(--lx-gray-07, var(--ls-border-color));
 
   &.is-small {
     @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@@ -348,9 +348,9 @@ html.is-mobile {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  border-color: or(--ls-type-icon-border-color, --lx-gray-03, --ls-primary-background-color);
+  border-color: var(--lx-gray-03, var(--ls-primary-background-color));
   overflow: hidden;
-  color: or(--ls-type-icon-text-color, --lx-gray-12, --ls-primary-text-color);
+  color: var(--lx-gray-12, var(--ls-primary-text-color));
 
   .ti,
   .tie {
@@ -359,7 +359,7 @@ html.is-mobile {
 
   &:before {
     @apply block absolute inset-0 ;
-    background: or(--ls-type-icon-before-color, --lx-gray-03, --ls-primary-background-color);
+    background: var(--lx-gray-03, var(--ls-primary-background-color));
     content: " ";
   }
 }