enhance(ui): replace the hard color to radix and shadcn vars color

packages/ui/src/colors.css

@@ -1,24 +1,3 @@
-html[data-theme=light] {
-  --accent: var(--rx-gray-04-hsl);
-  --accent-foreground: var(--rx-gray-12-hsl);
-  --input: var(--rx-gray-03-hsl);
-}
-
-html[data-theme=dark] {
-  --primary-foreground: 255 92% 100%;
-  --background: 0 0% 11%;
-  --foreground: 0 0% 95%;
-  --card: 0 0% 11%;
-  --card-foreground: 0 0% 95%;
-  --secondary: 0 0% 20%;
-  --secondary-foreground: 0 0% 98%;
-  --border: 0 0% 16%;
-  --muted: 0 0% 15%;
-  --popover: 0 0% 7%;
-  --popover-foreground: 0 0 95%;
-  --input: 0 0% 25%;
-}
-
 html {
   &[data-color=logseq] {
     --lx-accent-01: var(--rx-logseq-01);

packages/ui/src/vars-classic.css

@@ -19,87 +19,92 @@
 
 .dark-theme,
 html[data-theme='dark'] {
-  --ls-primary-background-color: #002b36;
-  --ls-secondary-background-color: #023643;
-  --ls-tertiary-background-color: #08404f;
-  --ls-quaternary-background-color: #094b5a;
-  --ls-table-tr-even-background-color: #03333f;
-  --ls-active-primary-color: #8ec2c2;
-  --ls-active-secondary-color: #d0e8e8;
-  --ls-block-properties-background-color: #06323e;
-  --ls-page-properties-background-color: #06323e;
-  --ls-block-ref-link-text-color: #1a6376;
-  --ls-border-color: #0e5263;
-  --ls-secondary-border-color: #126277;
-  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
-  --ls-guideline-color: #0b4a5a;
-  --ls-menu-hover-color: var(--ls-secondary-background-color);
-  --ls-primary-text-color: #a4b5b6;
-  --ls-secondary-text-color: #dfdfdf;
-  --ls-title-text-color: #93a1a1;
-  --ls-link-text-color: rgb(138, 187, 187);
-  --ls-link-text-hover-color: var(--ls-active-secondary-color);
+}
+
+/* You should always use .light-theme for light mode, the .white-theme is just for backward compatibility.
+
+See: https://github.com/logseq/logseq/pull/4652. */
+.white-theme,
+.light-theme,
+html[data-theme='light'] {
+  /*
+  --ls-primary-background-color: #ffffff;
+  --ls-secondary-background-color: #f7f7f7;
+  --ls-tertiary-background-color: #eaeaea;
+  --ls-quaternary-background-color: #dcdcdc;
+  --ls-table-tr-even-background-color: var(--ls-secondary-background-color);
+  --ls-active-primary-color: rgb(0, 105, 182);
+  --ls-active-secondary-color: #00477c;
+  --ls-block-properties-background-color: var(--ls-secondary-background-color);
+  --ls-page-properties-background-color: var(--ls-secondary-background-color);
+  --ls-block-ref-link-text-color: #d8e1e8;
+  --ls-border-color: #ccc;
+  --ls-secondary-border-color: #e2e2e2;
+  --ls-tertiary-border-color: rgba(200, 200, 200, 0.3);
+  --ls-guideline-color: rgba(46, 27, 5, 0.08);
+  --ls-menu-hover-color: var(--ls-a-chosen-bg);
+  --ls-primary-text-color: #433f38;
+  --ls-secondary-text-color: #161e2e;
+  --ls-title-text-color: var(--ls-header-button-background);
+  --ls-link-text-color: #106ba3;
+  --ls-link-text-hover-color: #1a537c;
   --ls-link-ref-text-color: var(--ls-link-text-color);
   --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-tag-text-color: var(--ls-link-text-color);
-  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
-  --ls-slide-background-color: var(--ls-primary-background-color);
-  --ls-block-bullet-border-color: #0f4958;
-  --ls-block-bullet-color: #608e91;
-  --ls-block-highlight-color: #0a3d4b;
-  --ls-selection-background-color: #338fff;
-  --ls-selection-text-color: #fff;
-  --ls-page-checkbox-color: #6093a0;
-  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
+  --ls-tag-text-color: var(--ls-link-ref-text-color);
+  --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
+  --ls-slide-background-color: #fff;
+  --ls-block-bullet-border-color: #dedede;
+  --ls-block-bullet-color: rgba(67, 63, 56, 0.25);
+  --ls-block-highlight-color: #c0e6fd;
+  --ls-selection-background-color: #e4f2ff;
+  --ls-selection-text-color: var(--ls-secondary-text-color);
+  --ls-page-checkbox-color: #9dbbd8;
+  --ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
   --ls-page-blockquote-color: var(--ls-primary-text-color);
-  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
-  --ls-page-blockquote-border-color: var(--ls-border-color);
+  --ls-page-blockquote-bg-color: var(--lx-gray-03, #fbfaf8);
+  --ls-page-blockquote-border-color: var(--lx-gray-08, #799bbc);
   --ls-page-mark-color: #262626;
   --ls-page-mark-bg-color: #fef3ac;
+  --ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
   --ls-page-inline-code-color: var(--ls-primary-text-color);
-  --ls-page-inline-code-bg-color: #01222a;
-  --ls-scrollbar-foreground-color: #11505f;
-  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
-  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
-  --ls-cloze-text-color: #8fbc8f;
-  --ls-icon-color: var(--ls-link-text-color);
+  --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
+  --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
+  --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
+  --ls-cloze-text-color: #0000cd;
+  --ls-icon-color: #646464;
   --ls-search-icon-color: var(--ls-primary-text-color);
   --ls-search-icon-hover-color: var(--ls-secondary-text-color);
   --ls-a-chosen-bg: var(--ls-quaternary-background-color);
-  --ls-pie-bg-color: #01303b;
-  --ls-pie-fg-color: #0b5869;
-  --ls-highlight-color-gray: var(--color-gray-900);
-  --ls-highlight-color-red: var(--color-red-900);
-  --ls-highlight-color-yellow: var(--color-yellow-900);
-  --ls-highlight-color-green: var(--color-green-900);
-  --ls-highlight-color-blue: var(--color-blue-900);
-  --ls-highlight-color-purple: var(--color-purple-900);
-  --ls-highlight-color-pink: var(--color-pink-900);
-  --ls-error-text-color: var(--color-red-400);
-  --ls-error-background-color: var(--color-red-900);
-  --ls-warning-text-color: var(--color-yellow-400);
-  --ls-warning-background-color: var(--color-yellow-900);
-  --ls-success-text-color: var(--color-green-100);
-  --ls-success-background-color: var(--color-green-900);
-  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
-  --ls-header-button-background: #dee4ea;
-  --ls-left-sidebar-text-color: var(--lx-gray-11);
+  --ls-pie-bg-color: #e1e1e1;
+  --ls-pie-fg-color: #0a4a5d;
+  --ls-highlight-color-gray: var(--color-gray-100);
+  --ls-highlight-color-red: var(--color-red-100);
+  --ls-highlight-color-yellow: var(--color-yellow-100);
+  --ls-highlight-color-green: var(--color-green-100);
+  --ls-highlight-color-blue: var(--color-blue-100);
+  --ls-highlight-color-purple: var(--color-purple-100);
+  --ls-highlight-color-pink: var(--color-pink-100);
+  --ls-error-text-color: var(--color-red-700);
+  --ls-error-background-color: var(--color-red-100);
+  --ls-warning-text-color: var(--color-yellow-700);
+  --ls-warning-background-color: var(--color-yellow-100);
+  --ls-success-text-color: var(--color-green-800);
+  --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);
+  --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);
-  --color-level-4: #195d6c;
-  --color-level-5: #266c7d;
-  --color-level-6: #3a7e8e;
+   */
+  --color-level-1: var(--rx-gray-02);
+  --color-level-2: var(--rx-gray-03);
+  --color-level-3: var(--rx-gray-04);
+  --color-level-4: var(--rx-gray-05);
+  --color-level-5: var(--rx-gray-06);
+  --color-level-6: var(--rx-gray-07);
 }
 
-/* You should always use .light-theme for light mode, the .white-theme is just for backward compatibility.
-
-See: https://github.com/logseq/logseq/pull/4652. */
-.white-theme,
-.light-theme,
-html[data-theme='light'] {
+html[data-theme=light][data-color=logseq] {
   --ls-primary-background-color: #ffffff;
   --ls-secondary-background-color: #f7f7f7;
   --ls-tertiary-background-color: #eaeaea;
@@ -167,10 +172,80 @@ html[data-theme='light'] {
   --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));
+}
+
+html[data-theme=dark][data-color=logseq] {
+  --ls-primary-background-color: #002b36;
+  --ls-secondary-background-color: #023643;
+  --ls-tertiary-background-color: #08404f;
+  --ls-quaternary-background-color: #094b5a;
+  --ls-table-tr-even-background-color: #03333f;
+  --ls-active-primary-color: #8ec2c2;
+  --ls-active-secondary-color: #d0e8e8;
+  --ls-block-properties-background-color: #06323e;
+  --ls-page-properties-background-color: #06323e;
+  --ls-block-ref-link-text-color: #1a6376;
+  --ls-border-color: #0e5263;
+  --ls-secondary-border-color: #126277;
+  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
+  --ls-guideline-color: #0b4a5a;
+  --ls-menu-hover-color: var(--ls-secondary-background-color);
+  --ls-primary-text-color: #a4b5b6;
+  --ls-secondary-text-color: #dfdfdf;
+  --ls-title-text-color: #93a1a1;
+  --ls-link-text-color: rgb(138, 187, 187);
+  --ls-link-text-hover-color: var(--ls-active-secondary-color);
+  --ls-link-ref-text-color: var(--ls-link-text-color);
+  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-tag-text-color: var(--ls-link-text-color);
+  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-slide-background-color: var(--ls-primary-background-color);
+  --ls-block-bullet-border-color: #0f4958;
+  --ls-block-bullet-color: #608e91;
+  --ls-block-highlight-color: #0a3d4b;
+  --ls-selection-background-color: #338fff;
+  --ls-selection-text-color: #fff;
+  --ls-page-checkbox-color: #6093a0;
+  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
+  --ls-page-blockquote-color: var(--ls-primary-text-color);
+  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
+  --ls-page-blockquote-border-color: var(--ls-border-color);
+  --ls-page-mark-color: #262626;
+  --ls-page-mark-bg-color: #fef3ac;
+  --ls-page-inline-code-color: var(--ls-primary-text-color);
+  --ls-page-inline-code-bg-color: #01222a;
+  --ls-scrollbar-foreground-color: #11505f;
+  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
+  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
+  --ls-cloze-text-color: #8fbc8f;
+  --ls-icon-color: var(--ls-link-text-color);
+  --ls-search-icon-color: var(--ls-primary-text-color);
+  --ls-search-icon-hover-color: var(--ls-secondary-text-color);
+  --ls-a-chosen-bg: var(--ls-quaternary-background-color);
+  --ls-pie-bg-color: #01303b;
+  --ls-pie-fg-color: #0b5869;
+  --ls-highlight-color-gray: var(--color-gray-900);
+  --ls-highlight-color-red: var(--color-red-900);
+  --ls-highlight-color-yellow: var(--color-yellow-900);
+  --ls-highlight-color-green: var(--color-green-900);
+  --ls-highlight-color-blue: var(--color-blue-900);
+  --ls-highlight-color-purple: var(--color-purple-900);
+  --ls-highlight-color-pink: var(--color-pink-900);
+  --ls-error-text-color: var(--color-red-400);
+  --ls-error-background-color: var(--color-red-900);
+  --ls-warning-text-color: var(--color-yellow-400);
+  --ls-warning-background-color: var(--color-yellow-900);
+  --ls-success-text-color: var(--color-green-100);
+  --ls-success-background-color: var(--color-green-900);
+  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
+  --ls-header-button-background: #dee4ea;
+  --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);
-  --color-level-4: #d0e6fa;
-  --color-level-5: #bbdaf6;
-  --color-level-6: #a7cef1;
-}
+  --color-level-4: #195d6c;
+  --color-level-5: #266c7d;
+  --color-level-6: #3a7e8e;
+}

resources/css/shui.css

@@ -2,6 +2,27 @@ html * {
   border-color: hsl(var(--border));
 }
 
+html[data-theme=light] {
+  --accent: var(--rx-gray-04-hsl);
+  --accent-foreground: var(--rx-gray-12-hsl);
+  --input: var(--rx-gray-03-hsl);
+}
+
+html[data-theme=dark] {
+  --primary-foreground: 255 92% 100%;
+  --background: 0 0% 11%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 11%;
+  --card-foreground: 0 0% 95%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 98%;
+  --border: 0 0% 16%;
+  --muted: 0 0% 15%;
+  --popover: 0 0% 7%;
+  --popover-foreground: 0 0 95%;
+  --input: 0 0% 25%;
+}
+
 html {
   .ui__dropdown-menu-content,
   .ui__context-menu-content,
@@ -12,6 +33,11 @@ html {
     --muted: var(--rx-gray-05-hsl);
   }
 
+  .ui__calendar {
+    --accent: var(--rx-gray-04-hsl);
+    --accent-foreground: var(--rx-gray-12-hsl);
+  }
+
   &:not([data-color=logseq]) {
     .ui__dropdown-menu-item,
     div[data-radix-popper-content-wrapper] div[role=menuitem] {
@@ -38,11 +64,6 @@ html {
       --ls-block-left-color: var(--rx-logseq-11);
     }
   }
-
-  .ui__calendar {
-    --accent: var(--rx-gray-04-hsl);
-    --accent-foreground: var(--rx-gray-12-hsl);
-  }
 }
 
 html[data-theme=light] {

src/main/frontend/common.css

@@ -338,7 +338,7 @@ i.ti {
 /* region FIXME: override elements (?) */
 h1.title, h1.title input {
   margin-bottom: 1.5rem;
-  color: or(--ls-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
+  color: or(--ls-journal-title-color, --lx-gray-12, --ls-title-text-color, hsl(var(--foreground)/.8));
   font-size: var(--ls-page-title-size, 36px);
   font-weight: 500;
 }
@@ -350,7 +350,7 @@ h1.title, h1.title input {
 .block-highlight,
 .content .selected {
   transition: background-color 0.2s cubic-bezier(0, 1, 0, 1);
-  background-color: var(--ls-block-highlight-color);
+  background-color: var(--ls-block-highlight-color, var(--rx-gray-04));
   padding: -1px;
 }
 
@@ -384,7 +384,7 @@ button.menu {
 .menu-link:hover,
 button.pull:hover,
 button.menu:focus {
-  background-color: or(--lx-gray-05, --ls-menu-hover-color, #f4f5f7);
+  background-color: or(--lx-gray-05, --ls-menu-hover-color, --rx-gray-05);
 }
 
 .menu-links-wrapper,

src/main/frontend/components/block.css

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

src/main/frontend/components/container.css

@@ -6,10 +6,7 @@
 }
 
 #root {
-  > div {
-    color: or(--ls-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
-    font-size: var(--ls-page-text-size);
-  }
+  font-size: var(--ls-page-text-size);
 }
 
 #app-container {
@@ -352,13 +349,13 @@
   }
 
   @screen sm {
-    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
 
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
 
     .dark & {
-      --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+      --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
     }
 
     > .wrap {
@@ -828,7 +825,7 @@ html[data-theme='dark'] {
   }
 
   .left-sidebar-inner {
-    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color);
+    --left-sidebar-bg-color: or(--ls-left-sidebar-background, --lx-gray-02, --ls-secondary-background-color, --rx-gray-03);
   }
 
   .cp__right-sidebar {

src/main/frontend/components/plugins.css

@@ -42,7 +42,8 @@
           }
         }
 
-        &.active {}
+        &.active {
+        }
       }
     }
 
@@ -196,7 +197,7 @@
   &-item-card {
     @apply flex py-3 px-1 rounded-md;
 
-    background-color: var(--ls-tertiary-background-color);
+    background-color: var(--ls-tertiary-background-color, hsl(var(--muted)));
     height: 150px;
 
     li {
@@ -893,7 +894,7 @@
         }
       }
 
-      .menu-links-wrapper  {
+      .menu-links-wrapper {
         a {
           @apply !text-popover-foreground/80;
 

src/main/frontend/components/settings.css

@@ -14,7 +14,7 @@
     }
 
     aside {
-      @apply bg-gray-400/5 p-4;
+      @apply bg-gray-03-alpha p-4;
 
       > ul > li {
         > a {

src/main/frontend/components/theme.css

@@ -46,9 +46,9 @@
 }
 
 .form-checkbox, .form-radio {
-  color: var(--ls-page-checkbox-color, #6093a0);
-  background-color: var(--ls-page-checkbox-color, #6093a0);
-  border-color: var(--ls-page-checkbox-border-color, #6093a0);
+  color: var(--ls-page-checkbox-color, hsl(var(--primary)/.4));
+  background-color: var(--ls-page-checkbox-color, hsl(var(--input)));
+  border-color: var(--ls-page-checkbox-border-color, hsl(var(--border)));
   border: none;
   position: relative;
   top: -1px;
@@ -154,5 +154,5 @@ main.ls-fold-button-on-right {
 }
 
 main.theme-inner {
-  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color);
+  --left-sidebar-bg-color: or(--ls-left-sidebar-background-color, --lx-gray-02, --ls-primary-background-color, --rx-gray-03);
 }

src/main/frontend/ui.cljs

@@ -652,7 +652,8 @@
                    (state/close-settings!))
         modal-panel-content (or modal-panel-content (fn [_close] [:div]))]
     [:div.ui__modal
-     {:style {:z-index (if show? 999 -1)}
+     {:style {:z-index (if show? 999 -1)
+              :display (if show? "flex" "none")}
       :label label}
      (css-transition
       {:in show? :timeout 0}

src/main/frontend/ui.css

@@ -23,7 +23,7 @@
       }
 
       &:hover, &.chosen {
-        background-color: or(--lx-gray-05, --ls-menu-hover-color, #f4f5f7);
+        background-color: or(--lx-gray-05, --ls-menu-hover-color, hsl(var(--accent)));
 
         .has-help small {
           visibility: visible;
@@ -32,7 +32,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: or(--ls-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color);
+        color: or(--ls-autocomplete-color-hover, --lx-gray-12, --ls-primary-text-color, hsl(var(--accent)));
       }
     }
   }
@@ -68,8 +68,8 @@
   .notification-area {
     @apply border;
 
-    background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, #fff);
-    color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color);
+    background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, --rx-gray-03);
+    color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color, --rx-gray-11);
   }
 }
 
@@ -100,7 +100,7 @@
   top-12 sm:top-[calc(3vh+50px)];
 
   &-overlay {
-    @apply fixed inset-0 transition-opacity;
+    @apply fixed inset-0;
   }
 
   &-overlay div {
@@ -112,7 +112,7 @@
   &-panel {
     @apply relative rounded-md shadow-lg border border-gray-06 overflow-hidden;
 
-    background: or(--ls-modal-panel-color, --lx-gray-02, --ls-secondary-background-color);
+    background: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--popover))));
 
     .panel-content {
       overflow-y: auto;

tailwind.config.js

@@ -54,21 +54,21 @@ const lx = override => ({
 })
 
 const accent = {
-  'DEFAULT': 'hsl(var(--accent))',
-  'base': 'hsl(var(--accent))',
-  'foreground': 'hsl(var(--accent-foreground))',
-  '01': 'var(--lx-accent-01)',
-  '02': 'var(--lx-accent-02)',
-  '03': 'var(--lx-accent-03)',
-  '04': 'var(--lx-accent-04)',
-  '05': 'var(--lx-accent-05)',
-  '06': 'var(--lx-accent-06)',
-  '07': 'var(--lx-accent-07)',
-  '08': 'var(--lx-accent-08)',
-  '09': 'var(--lx-accent-09)',
-  '10': 'var(--lx-accent-10)',
-  '11': 'var(--lx-accent-11)',
-  '12': 'var(--lx-accent-12)',
+  'DEFAULT': 'hsl(var(--primary))',
+  'base': 'hsl(var(--primary))',
+  'foreground': 'hsl(var(--primary-foreground))',
+  '01': 'var(--lx-accent-01, --rx-gray-01)',
+  '02': 'var(--lx-accent-02, hsl(var(--primary)/.1))',
+  '03': 'var(--lx-accent-03, hsl(var(--primary)/.15))',
+  '04': 'var(--lx-accent-04, hsl(var(--primary)/.2))',
+  '05': 'var(--lx-accent-05, hsl(var(--primary)/.3))',
+  '06': 'var(--lx-accent-06, hsl(var(--primary)/.4))',
+  '07': 'var(--lx-accent-07, hsl(var(--primary)/.5))',
+  '08': 'var(--lx-accent-08, hsl(var(--primary)/.6))',
+  '09': 'var(--lx-accent-09, hsl(var(--primary)/.7))',
+  '10': 'var(--lx-accent-10, hsl(var(--primary)/.8))',
+  '11': 'var(--lx-accent-11, hsl(var(--primary)/.9))',
+  '12': 'var(--lx-accent-12, --rx-gray-12)',
   '01-alpha': 'var(--lx-accent-01-alpha)',
   '02-alpha': 'var(--lx-accent-02-alpha)',
   '03-alpha': 'var(--lx-accent-03-alpha)',
@@ -85,30 +85,30 @@ const accent = {
 
 const gray = {
   ...colors.gray,
-  '01': 'var(--lx-gray-01)',
-  '02': 'var(--lx-gray-02)',
-  '03': 'var(--lx-gray-03)',
-  '04': 'var(--lx-gray-04)',
-  '05': 'var(--lx-gray-05)',
-  '06': 'var(--lx-gray-06)',
-  '07': 'var(--lx-gray-07)',
-  '08': 'var(--lx-gray-08)',
-  '09': 'var(--lx-gray-09)',
-  '10': 'var(--lx-gray-10)',
-  '11': 'var(--lx-gray-11)',
-  '12': 'var(--lx-gray-12)',
-  '01-alpha': 'var(--lx-gray-01-alpha)',
-  '02-alpha': 'var(--lx-gray-02-alpha)',
-  '03-alpha': 'var(--lx-gray-03-alpha)',
-  '04-alpha': 'var(--lx-gray-04-alpha)',
-  '05-alpha': 'var(--lx-gray-05-alpha)',
-  '06-alpha': 'var(--lx-gray-06-alpha)',
-  '07-alpha': 'var(--lx-gray-07-alpha)',
-  '08-alpha': 'var(--lx-gray-08-alpha)',
-  '09-alpha': 'var(--lx-gray-09-alpha)',
-  '10-alpha': 'var(--lx-gray-10-alpha)',
-  '11-alpha': 'var(--lx-gray-11-alpha)',
-  '12-alpha': 'var(--lx-gray-12-alpha)',
+  '01': 'var(--lx-gray-01, var(--rx-gray-01))',
+  '02': 'var(--lx-gray-02, var(--rx-gray-02))',
+  '03': 'var(--lx-gray-03, var(--rx-gray-03))',
+  '04': 'var(--lx-gray-04, var(--rx-gray-04))',
+  '05': 'var(--lx-gray-05, var(--rx-gray-05))',
+  '06': 'var(--lx-gray-06, var(--rx-gray-06))',
+  '07': 'var(--lx-gray-07, var(--rx-gray-07))',
+  '08': 'var(--lx-gray-08, var(--rx-gray-08))',
+  '09': 'var(--lx-gray-09, var(--rx-gray-09))',
+  '10': 'var(--lx-gray-10, var(--rx-gray-10))',
+  '11': 'var(--lx-gray-11, var(--rx-gray-11))',
+  '12': 'var(--lx-gray-12, var(--rx-gray-12))',
+  '01-alpha': 'var(--lx-gray-01-alpha, var(--rx-gray-01-alpha))',
+  '02-alpha': 'var(--lx-gray-02-alpha, var(--rx-gray-02-alpha))',
+  '03-alpha': 'var(--lx-gray-03-alpha, var(--rx-gray-03-alpha))',
+  '04-alpha': 'var(--lx-gray-04-alpha, var(--rx-gray-04-alpha))',
+  '05-alpha': 'var(--lx-gray-05-alpha, var(--rx-gray-05-alpha))',
+  '06-alpha': 'var(--lx-gray-06-alpha, var(--rx-gray-06-alpha))',
+  '07-alpha': 'var(--lx-gray-07-alpha, var(--rx-gray-07-alpha))',
+  '08-alpha': 'var(--lx-gray-08-alpha, var(--rx-gray-08-alpha))',
+  '09-alpha': 'var(--lx-gray-09-alpha, var(--rx-gray-09-alpha))',
+  '10-alpha': 'var(--lx-gray-10-alpha, var(--rx-gray-10-alpha))',
+  '11-alpha': 'var(--lx-gray-11-alpha, var(--rx-gray-11-alpha))',
+  '12-alpha': 'var(--lx-gray-12-alpha, var(--rx-gray-12-alpha))',
 }
 
 function exposeColorsToCssVars ({ addBase, theme }) {
@@ -227,15 +227,15 @@ module.exports = {
         'lmd': '728px',
         'llg': '960px'
       },
-      backgroundColor: {
-        ...lx('--lx-bg-override'),
-      },
-      textColor: {
-        ...lx('--lx-text-override'),
-      },
-      borderColor: {
-        ...lx('--lx-border-override'),
-      },
+      // backgroundColor: {
+      //   ...lx('--lx-bg-override'),
+      // },
+      // textColor: {
+      //   ...lx('--lx-text-override'),
+      // },
+      // borderColor: {
+      //   ...lx('--lx-border-override'),
+      // },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',