Fix colorization

resources/css/shui.css

@@ -241,7 +241,7 @@
 }
 
 .shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color); color: white; }
-.shui__button-theme-color.shui__button-color-custom  { background-color: var(--color-indigo-600); color: white; }
+.shui__button-theme-color.shui__button-color-custom  { background-color: var(--color-blue-600); color: white; }
 
 .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); }}
 .shui__button-theme-color.shui__button-color-orange  { color: white; background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-10); } &:active { background-color: var(--rx-orange-08); }}

src/main/frontend/components/cmdk.cljs

@@ -562,7 +562,7 @@
                      [])
     ; [:div {:style {:background "var(--lx-gray-02)"
     ;                :border-bottom "1px solid var(--lx-gray-07)"}}]
-    [:div {:class "with-[bg-cmdk-input-row] bg-gray-02 border border-1 border-gray-07"}
+    [:div {:class "bg-gray-02 border-b border-1 border-gray-07"}
      [:input#search
       {:class "text-xl bg-transparent border-none w-full outline-none px-3 py-3"
        :placeholder (input-placeholder false)

tailwind.config.js

@@ -3,54 +3,54 @@ const plugin = require('tailwindcss/plugin')
 const radix = require('@radix-ui/colors')
 
 const lx = override => ({
-  'accent-01': 'or(' + override + ', --lx-accent-01)',
-  'accent-02': 'or(' + override + ', --lx-accent-02)',
-  'accent-03': 'or(' + override + ', --lx-accent-03)',
-  'accent-04': 'or(' + override + ', --lx-accent-04)',
-  'accent-05': 'or(' + override + ', --lx-accent-05)',
-  'accent-06': 'or(' + override + ', --lx-accent-06)',
-  'accent-07': 'or(' + override + ', --lx-accent-07)',
-  'accent-08': 'or(' + override + ', --lx-accent-08)',
-  'accent-09': 'or(' + override + ', --lx-accent-09)',
-  'accent-10': 'or(' + override + ', --lx-accent-10)',
-  'accent-11': 'or(' + override + ', --lx-accent-11)',
-  'accent-12': 'or(' + override + ', --lx-accent-12)',
-  'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha)',
-  'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha)',
-  'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha)',
-  'accent-04-alpha': 'or(' + override + ', --lx-accent-04-alpha)',
-  'accent-05-alpha': 'or(' + override + ', --lx-accent-05-alpha)',
-  'accent-06-alpha': 'or(' + override + ', --lx-accent-06-alpha)',
-  'accent-07-alpha': 'or(' + override + ', --lx-accent-07-alpha)',
-  'accent-08-alpha': 'or(' + override + ', --lx-accent-08-alpha)',
-  'accent-09-alpha': 'or(' + override + ', --lx-accent-09-alpha)',
-  'accent-10-alpha': 'or(' + override + ', --lx-accent-10-alpha)',
-  'accent-11-alpha': 'or(' + override + ', --lx-accent-11-alpha)',
-  'accent-12-alpha': 'or(' + override + ', --lx-accent-12-alpha)',
-  'gray-01': 'or(' + override + ', --lx-gray-01)',
-  'gray-02': 'or(' + override + ', --lx-gray-02)',
-  'gray-03': 'or(' + override + ', --lx-gray-03)',
-  'gray-04': 'or(' + override + ', --lx-gray-04)',
-  'gray-05': 'or(' + override + ', --lx-gray-05)',
-  'gray-06': 'or(' + override + ', --lx-gray-06)',
-  'gray-07': 'or(' + override + ', --lx-gray-07)',
-  'gray-08': 'or(' + override + ', --lx-gray-08)',
-  'gray-09': 'or(' + override + ', --lx-gray-09)',
-  'gray-10': 'or(' + override + ', --lx-gray-10)',
-  'gray-11': 'or(' + override + ', --lx-gray-11)',
-  'gray-12': 'or(' + override + ', --lx-gray-12)',
-  'gray-01-alpha': 'or(' + override + ', --lx-gray-01-alpha)',
-  'gray-02-alpha': 'or(' + override + ', --lx-gray-02-alpha)',
-  'gray-03-alpha': 'or(' + override + ', --lx-gray-03-alpha)',
-  'gray-04-alpha': 'or(' + override + ', --lx-gray-04-alpha)',
-  'gray-05-alpha': 'or(' + override + ', --lx-gray-05-alpha)',
-  'gray-06-alpha': 'or(' + override + ', --lx-gray-06-alpha)',
-  'gray-07-alpha': 'or(' + override + ', --lx-gray-07-alpha)',
-  'gray-08-alpha': 'or(' + override + ', --lx-gray-08-alpha)',
-  'gray-09-alpha': 'or(' + override + ', --lx-gray-09-alpha)',
-  'gray-10-alpha': 'or(' + override + ', --lx-gray-10-alpha)',
-  'gray-11-alpha': 'or(' + override + ', --lx-gray-11-alpha)',
-  'gray-12-alpha': 'or(' + override + ', --lx-gray-12-alpha)',
+  'accent-01': 'or(' + override + ', --lx-accent-01, --ls-page-properties-background-color)',
+  'accent-02': 'or(' + override + ', --lx-accent-02, --ls-page-properties-background-color)',
+  'accent-03': 'or(' + override + ', --lx-accent-03, --ls-page-properties-background-color)',
+  'accent-04': 'or(' + override + ', --lx-accent-04, --ls-page-properties-background-color)',
+  'accent-05': 'or(' + override + ', --lx-accent-05, --color-blue-900)',
+  'accent-06': 'or(' + override + ', --lx-accent-06, --color-blue-800)',
+  'accent-07': 'or(' + override + ', --lx-accent-07, --color-blue-700)',
+  'accent-08': 'or(' + override + ', --lx-accent-08, --color-blue-600)',
+  'accent-09': 'or(' + override + ', --lx-accent-09, --color-blue-500)',
+  'accent-10': 'or(' + override + ', --lx-accent-10, --color-blue-400)',
+  'accent-11': 'or(' + override + ', --lx-accent-11, --color-blue-200)',
+  'accent-12': 'or(' + override + ', --lx-accent-12, --color-blue-50)',
+  'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)',
+  'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)',
+  'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)',
+  'accent-04-alpha': 'or(' + override + ', --lx-accent-04-alpha, --ls-page-properties-background-color)',
+  'accent-05-alpha': 'or(' + override + ', --lx-accent-05-alpha, --color-blue-900)',
+  'accent-06-alpha': 'or(' + override + ', --lx-accent-06-alpha, --color-blue-800)',
+  'accent-07-alpha': 'or(' + override + ', --lx-accent-07-alpha, --color-blue-700)',
+  'accent-08-alpha': 'or(' + override + ', --lx-accent-08-alpha, --color-blue-600)',
+  'accent-09-alpha': 'or(' + override + ', --lx-accent-09-alpha, --color-blue-500)',
+  'accent-10-alpha': 'or(' + override + ', --lx-accent-10-alpha, --color-blue-400)',
+  'accent-11-alpha': 'or(' + override + ', --lx-accent-11-alpha, --color-blue-200)',
+  'accent-12-alpha': 'or(' + override + ', --lx-accent-12-alpha, --color-blue-50)',
+  'gray-01': 'or(' + override + ', --lx-gray-01, --ls-primary-background-color)',
+  'gray-02': 'or(' + override + ', --lx-gray-02, --ls-secondary-background-color)',
+  'gray-03': 'or(' + override + ', --lx-gray-03, --ls-tertiary-background-color)',
+  'gray-04': 'or(' + override + ', --lx-gray-04, --ls-quaternary-background-color)',
+  'gray-05': 'or(' + override + ', --lx-gray-05, --color-level-4)',
+  'gray-06': 'or(' + override + ', --lx-gray-06, --ls-block-bullet-border-color)',
+  'gray-07': 'or(' + override + ', --lx-gray-07, --ls-border-color)',
+  'gray-08': 'or(' + override + ', --lx-gray-08, --ls-secondary-border-color)',
+  'gray-09': 'or(' + override + ', --lx-gray-09, --color-level-5)',
+  'gray-10': 'or(' + override + ', --lx-gray-10, --color-level-6)',
+  'gray-11': 'or(' + override + ', --lx-gray-11, --ls-primary-text-color)',
+  'gray-12': 'or(' + override + ', --lx-gray-12, --ls-secondary-text-color)',
+  'gray-01-alpha': 'or(' + override + ', --lx-gray-01-alpha, --ls-primary-background-color)',
+  'gray-02-alpha': 'or(' + override + ', --lx-gray-02-alpha, --ls-secondary-background-color)',
+  'gray-03-alpha': 'or(' + override + ', --lx-gray-03-alpha, --ls-tertiary-background-color)',
+  'gray-04-alpha': 'or(' + override + ', --lx-gray-04-alpha, --ls-quaternary-background-color)',
+  'gray-05-alpha': 'or(' + override + ', --lx-gray-05-alpha, --color-level-4)',
+  'gray-06-alpha': 'or(' + override + ', --lx-gray-06-alpha, --ls-block-bullet-color)',
+  'gray-07-alpha': 'or(' + override + ', --lx-gray-07-alpha, --ls-border-color)',
+  'gray-08-alpha': 'or(' + override + ', --lx-gray-08-alpha, --ls-secondary-border-color)',
+  'gray-09-alpha': 'or(' + override + ', --lx-gray-09-alpha, --color-level-5)',
+  'gray-10-alpha': 'or(' + override + ', --lx-gray-10-alpha, --color-level-6)',
+  'gray-11-alpha': 'or(' + override + ', --lx-gray-11-alpha, --ls-primary-text-color)',
+  'gray-12-alpha': 'or(' + override + ', --lx-gray-12-alpha, --ls-secondary-text-color)',
 })
 
 const accent = {