Initial radix color styling

package.json

@@ -23,6 +23,7 @@
         "playwright": "=1.31.0",
         "postcss": "8.4.17",
         "postcss-cli": "10.0.0",
+        "postcss-functions": "^4.0.2",
         "postcss-import": "15.0.0",
         "postcss-import-ext-glob": "2.0.1",
         "postcss-nested": "6.0.0",

postcss.config.js

@@ -1,8 +1,27 @@
+const or = (...args) => {
+  const variableNames = args.filter(x => x.startsWith('--')) 
+  const initialValue = args.filter(x => !x.startsWith('--'))[0]
+
+  console.log(' ### or ### ', variableNames, initialValue)
+
+  return variableNames.reduceRight((memo, current) => {
+    if (memo && current) { 
+      return `var(${current.trim()}, ${memo})` 
+    } else if (current) {
+      return `var(${current.trim()})`
+    } else if (memo) {
+      return memo
+    }
+  }, initialValue)
+}
+
+
 module.exports = {
   plugins: {
     'autoprefixer': {},
     'postcss-import-ext-glob': {},
     'postcss-import': {},
+    'postcss-functions': { functions: { or } },
     'tailwindcss/nesting': 'postcss-nested',
     tailwindcss: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})

src/main/frontend/components/block.css

@@ -296,10 +296,10 @@
 }
 
 .page-ref {
-  color: var(--ls-link-ref-text-color);
+  color: or(--lx-accent-11, --ls-link-ref-text-color);
 
   &:hover {
-    color: var(--ls-link-ref-text-hover-color);
+    color: or(--lx-accent-12, --ls-link-ref-text-hover-color);
   }
 }
 

src/main/frontend/components/container.css

@@ -6,7 +6,7 @@
 }
 
 #app-container {
-  background-color: var(--ls-primary-background-color, #fff);
+  background-color: or(--lx-gray-02, --ls-primary-background-color, #fff);
   position: relative;
 }
 
@@ -82,7 +82,7 @@
   width: var(--ls-left-sidebar-sm-width);
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: var(--ls-primary-background-color);
+  background-color: or(--lx-gray-01, --ls-primary-background-color);
   transition: transform .3s;
   transform: translate3d(-100%, 0, 0);
   z-index: 3;
@@ -143,11 +143,11 @@
     }
 
     &:hover {
-      background-color: var(--ls-tertiary-background-color);
+      background-color: or(--lx-gray-04, --ls-tertiary-background-color);
     }
 
     &.active, &:active {
-      background-color: var(--ls-quaternary-background-color);
+      background-color: or(--lx-gray-05, --ls-quaternary-background-color);
     }
   }
 
@@ -298,21 +298,21 @@
 
     #create-button {
       @apply flex items-center justify-center p-2 text-sm font-medium rounded-md w-full border;
-      background-color: var(--ls-secondary-background-color) !important;
+      background-color: or(--lx-gray-03, --ls-secondary-background-color) !important;
       border-color: transparent;
 
       &:hover,
       &:focus {
         border-color: var(--ls-border-color);
-        background-color: var(--ls-primary-background-color) !important;
+        background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
       }
 
       @screen sm {
-        background-color: var(--ls-primary-background-color) !important;
+        background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
 
         &:hover,
         &:focus {
-          background-color: var(--ls-secondary-background-color) !important;
+          background-color: or(--lx-gray-04, --ls-secondary-background-color) !important;
         }
       }
     }
@@ -321,7 +321,7 @@
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
-    background-color: var(--ls-secondary-background-color);
+    background-color: or(--lx-gray-01, --ls-secondary-background-color);
 
     > .wrap {
       margin-top: 52px;
@@ -423,7 +423,7 @@
     transition: width .3s;
 
     &:before {
-      background-color: var(--ls-secondary-background-color);
+      background-color: or(--lx-gray-01, --ls-secondary-background-color);
       width: 0;
       overflow: hidden;
     }
@@ -493,7 +493,7 @@ html[data-theme='dark'] {
 }
 
 .cp__sidebar-main-layout {
-  background-color: var(--ls-primary-background-color);
+  background-color: or(--lx-gray-02, --ls-primary-background-color);
 }
 
 .cp__sidebar-main-content {
@@ -523,7 +523,7 @@ html[data-theme='dark'] {
       rounded-full h-8 w-8 flex items-center justify-center font-bold
       select-none cursor-help;
 
-      background-color: var(--ls-secondary-background-color);
+      background-color: or(--lx-gray-01, --ls-secondary-background-color);
     }
   }
 }
@@ -531,7 +531,7 @@ html[data-theme='dark'] {
 .cp__right-sidebar {
   z-index: var(--ls-z-index-level-1);
   transition: width 0.3s;
-  background-color: var(--ls-secondary-background-color, #d8e1e8);
+  background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
   position: relative;
   user-select: none;
 
@@ -592,7 +592,7 @@ html[data-theme='dark'] {
     top: 0;
     left: 0;
     right: 0;
-    background-color: var(--ls-secondary-background-color, #d8e1e8);
+    background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
     z-index: 999;
     user-select: none;
     -webkit-app-region: drag;

src/main/frontend/components/settings.cljs

@@ -306,6 +306,41 @@
                              :action     pick-theme
                              :desc       (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
 
+(defn theme-row [t dark?]
+  (let [color-accent (state/sub :color/accent)
+        pick-theme [:div.grid {:style {:grid-template-columns "repeat(15, 1fr)" 
+                                       :gap "0.75rem"
+                                       :overflow :scroll 
+                                       :width "100%"
+                                       :padding-left "0.25rem"}}
+                    (for [color colors/color-list]
+                      [:div.theme-row--color {:on-click #(state/toggle-color-accent! color) 
+                                              :class (when (= color-accent color) "selected")}
+                       [:div.theme-row--color-swatch {:style {"--background"        (str "var(--rx-" (name color) "-03)")
+                                                              "--background-hover"  (str "var(--rx-" (name color) "-04)")
+                                                              "--background-active" (str "var(--rx-" (name color) "-05)")
+                                                              "--border"            (str "var(--rx-" (name color) "-07)")
+                                                              "--border-hover"      (str "var(--rx-" (name color) "-08)")}}]
+                                                              ; "--border-hover"     (str "var(--rx-" (name color) "-08)")}}]
+                       [:div.text-xs {:style {:margin "0 -0.5rem" 
+                                              :opacity 0.5 
+                                              :height "1rem"}} 
+                        (name color)]])]
+        display-theme [:button {:style {:background "var(--lx-accent-03)" 
+                                        :border "1px solid var(--lx-accent-07)"
+                                        :color "var(--lx-accent-11)"}}
+                        (if color-accent (name color-accent) "default")]]
+    [:<>
+     (row-with-button-action {:left-label "Radix color theme"
+                              :-for       "toggle_radix_theme"
+                              :stretch    true
+                              :action     pick-theme})])) 
+     ; (row-with-button-action {:left-label "Preview color theme"
+     ;                          :-for       "display_radix_theme"
+     ;                          :stretch    true
+     ;                          :action     display-theme})])) 
+                             
+
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
    [:label.block.text-sm.font-medium.leading-5.opacity-70

src/main/frontend/components/settings.css

@@ -1,5 +1,16 @@
 .cp__settings {
   &-main {
+    > header {
+      padding: 10px;
+      padding-top: 0;
+      border-bottom: 1px solid or(--lx-gray-06, --ls-quaternary-background-color);
+
+      h1 {
+        font-size: 22px;
+        margin: 0;
+      }
+    }
+
     aside {
       @apply bg-gray-400/5 p-4;
     }
@@ -57,7 +68,7 @@
 
     .settings-menu-link {
       @apply px-2 py-1.5 select-none; 
-      color: var(--ls-primary-text-color);
+      color: or(--lx-gray-12, --ls-primary-text-color);
     }
   }
 
@@ -87,7 +98,7 @@
           }
 
           &.active {
-            background-color: var(--ls-quaternary-background-color);
+            background-color: or(--lx-gray-06, --ls-quaternary-background-color);
 
             i {
               opacity: 1;
@@ -204,7 +215,7 @@
           cursor: inherit;
 
           > i {
-            border-color: var(--ls-link-text-color);
+            border-color: or(--lx-accent-11, --ls-link-text-color);
             border-width: 2px;
           }
         }
@@ -254,7 +265,7 @@
 
     .update-state {
       padding: 6px 10px;
-      background-color: var(--ls-quaternary-background-color);
+      background-color: or(--lx-gray-06, --ls-quaternary-background-color);
       border-radius: 4px;
       margin-top: 10px;
       width: fit-content;
@@ -323,7 +334,7 @@
       @apply m-0 list-none -mx-2;
 
       > li {
-        border-top: 1px solid var(--ls-secondary-border-color);
+        border-top: 1px solid or(--lx-accent-08, --ls-secondary-border-color);
 
         &:hover {
           .ext-label.is-plus {
@@ -340,8 +351,8 @@
     .ext-label {
       @apply rounded px-1.5 opacity-70 cursor-pointer flex items-center select-none active:opacity-50;
 
-      background-color: var(--ls-secondary-border-color);
-      color: var(--ls-secondary-text-color);
+      background-color: or(--lx-accent-08, --ls-secondary-border-color);
+      color: or(--lx-gray-11, --ls-secondary-text-color);
 
       &.is-del {
         i.ti {
@@ -365,8 +376,8 @@
       }
 
       &.is-plus {
-        background-color: var(--ls-primary-background-color);
-        border: 1px solid var(--ls-border-color);
+        background-color: or(--lx-gray-03, --ls-primary-background-color);
+        border: 1px solid or(--lx-gray-07, --ls-border-color);
       }
     }
 
@@ -393,7 +404,7 @@
         z-index: 1;
         width: 100px;
         max-height: 180px;
-        border:1px solid var(--ls-border-color);
+        border:1px solid or(--lx-gray-07, --ls-border-color);
         border-radius: 4px;
         overflow: auto;
         overflow: overlay;
@@ -432,13 +443,13 @@
   &-alias-ext-input {
     width: 80px !important;
     padding: 1px 4px;
-    border: 2px solid var(--ls-secondary-border-color);
+    border: 2px solid or(--lx-gray-08, --ls-secondary-border-color);
     font-size: 11px;
     border-radius: 4px;
     height: 22px;
 
     &:focus {
-      border-color: var(--ls-border-color);
+      border-color: var(--lx-gray-07, --ls-border-color);
     }
   }
 }

src/main/frontend/components/theme.css

@@ -1,6 +1,6 @@
 :root {
   scrollbar-width: thin;
-  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
+  scrollbar-color: or(--lx-gray-05, --ls-scrollbar-foreground-color) or(--lx-gray-02, --ls-scrollbar-background-color);
 
   --ls-z-index-level-0: 0;
   --ls-z-index-level-1: 9;
@@ -12,15 +12,15 @@
 
 html {
   ::-webkit-scrollbar-thumb {
-    background-color: var(--ls-scrollbar-foreground-color);
+    background-color: or(--lx-gray-05, --ls-scrollbar-foreground-color);
   }
 
   ::-webkit-scrollbar {
-    background-color: var(--ls-scrollbar-background-color);
+    background-color: or(--lx-gray-02, --ls-scrollbar-background-color);
   }
 
   ::-webkit-scrollbar-thumb:active {
-    background-color: var(--ls-scrollbar-thumb-hover-color);
+    background-color: or(--lx-gray-06, --ls-scrollbar-thumb-hover-color);
   }
 
   ::-webkit-scrollbar {

src/main/frontend/ui.css

@@ -35,7 +35,7 @@
 
       &:not(.chosen):hover {
         background-color: unset !important;
-        color: var(--ls-primary-text-color);
+        color: or(--lx-gray-12, --ls-primary-text-color);
       }
     }
   }
@@ -49,7 +49,7 @@
 
 .ui__ac-group-name {
   @apply p-2 text-xs;
-  color: var(--ls-block-ref-link-text-color);
+  color: or(--lx-accent-11, --ls-block-ref-link-text-color);
 }
 
 .search-all #ui__ac-inner {
@@ -70,8 +70,8 @@
   }
 
   .notification-area {
-    background-color: var(--ls-tertiary-background-color, #fff);
-    color: var(--ls-primary-text-color);
+    background-color: or(--lx-gray-05, --ls-tertiary-background-color, #fff);
+    color: or(--lx-gray-12, --ls-primary-text-color);
   }
 }
 
@@ -106,15 +106,17 @@
   }
 
   &-overlay div {
-    background-image: linear-gradient(to bottom, var(--ls-primary-background-color), var(--ls-quaternary-background-color));
+    --from: or(--lx-gray-03, --ls-primary-background-color); 
+    --to: or(--lx-gray-06, --ls-quaternary-background-color);
+    background-image: linear-gradient(to bottom, var(--from), var(--to));
   }
 
   &-panel {
     @apply relative rounded-md shadow-xl border;
-    border-color: var(--ls-border-color);
+    border-color: or(--lx-gray-07, --ls-border-color);
 
     overflow: hidden;
-    background: var(--ls-secondary-background-color);
+    background: or(--lx-gray-04, --ls-secondary-background-color);
 
     .panel-content {
       overflow-y: auto;
@@ -275,16 +277,23 @@ html.is-mobile {
 
 .ui__button {
   @apply inline-flex items-center px-3 py-2 border border-transparent
-  text-sm leading-4 font-medium rounded-md text-white
+  text-sm leading-4 font-medium rounded-md
   focus:outline-none transition ease-in-out duration-150;
 
+  /* 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);
+
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   &:hover:not([disabled]) {
-    opacity: 0.8;
+    /* opacity: or(--lx-accent-01, 0.8); */
+    opacity: 1;
+    background-color: or(--lx-accent-07);
   }
 
   &.is-link {
@@ -294,22 +303,22 @@ html.is-mobile {
   &[intent='logseq'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;
 
-    color: var(--ls-primary-text-color);
-    background: var(--ls-secondary-background-color);
+    color: or(--lx-accent-11, --ls-primary-text-color);
+    background: or(--lx-accent-12, --ls-secondary-background-color);
 
     &:hover {
-      color: var(--ls-link-text-color);
+      color: or(--lx-accent-11, --ls-link-text-color);
     }
   }
 
   &[intent='link'], &[intent='border-link'] {
     @apply focus:border-gray-500 dark:hover:text-gray-200;
 
-    color: var(--ls-primary-text-color);
+    color: or(--lx-gray-12, --ls-primary-text-color);
     background: transparent;
 
     &:hover {
-      color: var(--ls-link-text-color);
+      color: or(--lx-accent-11, --ls-link-text-color);
     }
   }
 
@@ -323,8 +332,8 @@ html.is-mobile {
 }
 
 .dropdown-wrapper {
-  background-color: var(--ls-primary-background-color, #fff);
-  border: 1px solid var(--ls-tertiary-background-color);
+  background-color: or(--lx-gray-03, --ls-primary-background-color, #fff);
+  border: 1px solid or(--lx-gray-05, --ls-tertiary-background-color);
   min-width: 12rem;
   border-radius: 6px;
 }
@@ -346,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: var(--ls-primary-background-color, transparent);
+  background-color: or(--lx-gray-03, --ls-primary-background-color, transparent);
   background-repeat: no-repeat;
   border-width: 1px;
-  border-color: var(--ls-border-color);
+  border-color: or(--lx-gray-07, --ls-border-color);
 
   &.is-small {
     @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@@ -361,7 +370,7 @@ html.is-mobile {
   sm:text-sm sm:leading-5 rounded;
 
   border-width: 1px;
-  border-color: var(--ls-border-color);
+  border-color: or(--lx-gray-07, --ls-border-color);
 
   &:focus {
     box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
@@ -381,7 +390,7 @@ html.is-mobile {
 }
 
 .bg-quaternary {
-  background-color: var(--ls-quaternary-background-color);
+  background-color: or(--lx-gray-06, --ls-quaternary-background-color);
 }
 
 .ui__icon {
@@ -394,9 +403,9 @@ html.is-mobile {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  border-color: var(--ls-primary-background-color);
+  border-color: or(--lx-gray-03, --ls-primary-background-color);
   overflow: hidden;
-  color: var(--ls-primary-text-color);
+  color: or(--lx-gray-12, --ls-primary-text-color);
 
   .ti,
   .tie {
@@ -405,7 +414,7 @@ html.is-mobile {
 
   &:before {
     @apply block absolute inset-0 ;
-    background: var(--ls-primary-background-color);
+    background: or(--lx-gray-03, --ls-primary-background-color);
     content: " ";
   }
 }

yarn.lock

@@ -5506,6 +5506,13 @@ postcss-discard-overridden@^5.1.0:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
   integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
 
+postcss-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-4.0.2.tgz#23a7d100f507890042fbd0305f963554e6d1ce6a"
+  integrity sha512-htDZN6t97uW4GBXquTsz/DVaNVAHtHx5tLCALquVM2u58UwHki+RwHbANKiiI0ImA8T7Iml2MnvLUM7aGtlpqA==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"