chore: replace shui__ with ui__

Theme creators don't need to know about shui.

deps/shui/shui-graph/pages/contents.md

@@ -195,7 +195,7 @@
     - We want to switch to radix variables
     - We want to make it easy to customize with themes
     - We want to support as much old themes as possible
-    - var(--shui-button-color,
+    - var(--ui-button-color,
       collapsed:: true
         - var(--logseq-button-primary-color,
           collapsed:: true

deps/shui/src/logseq/shui/button/v2.cljs

@@ -12,16 +12,16 @@
   (let [*hover-theme (::hover-theme state)
         color-string (or (some-> color name) (some-> context :state rum/react :ui/radix-color name) "custom")
         theme (or @*hover-theme theme)
-        theme-class (str "shui__button-theme-" (if (keyword? theme) (name theme) "color"))
-        depth-class (when-not (= :text theme) (str "shui__button-depth-" depth))
-        color-class (str "shui__button-color-" color-string)
-        muted-class (when muted "shui__button-muted")
-        size-class  (str "shui__button-size-" (name size))
-        tiled-class (when tiled "shui__button-tiled")
+        theme-class (str "ui__button-theme-" (if (keyword? theme) (name theme) "color"))
+        depth-class (when-not (= :text theme) (str "ui__button-depth-" depth))
+        color-class (str "ui__button-color-" color-string)
+        muted-class (when muted "ui__button-muted")
+        size-class  (str "ui__button-size-" (name size))
+        tiled-class (when tiled "ui__button-tiled")
         on-click (fn [e]
                    (when href (set! (.-href js/window.location) href))
                    (when on-click (on-click e)))]
-    [:button.ui__button.shui__button
+    [:button.ui__button
      (merge
       button-props
       (cond->
@@ -35,14 +35,14 @@
              (for [[index tile] (map-indexed vector (rest (string/split text #"")))]
                [:<>
                 (when (< 0 index)
-                  [:div.shui__button__tile-separator])
-                [:div.shui__button__tile tile]]))
+                  [:div.ui__button__tile-separator])
+                [:div.ui__button__tile tile]]))
 
      (when icon
        (icon/root icon icon-props))
      (when (not-empty shortcut)
        (for [key shortcut]
-         [:div.shui__button-shortcut-key
+         [:div.ui__button-shortcut-key
           (case key
             "cmd" [:div "⌘"]
             "shift" [:div "⇧"]

deps/shui/src/logseq/shui/list_item/v1.cljs

@@ -29,7 +29,7 @@
   (let [[before-text highlighted-text after-text] (split-text-on-highlight text query normal-text normal-query)]
     [:span
      (when-not (string/blank? before-text) [:span before-text])
-     (when-not (string/blank? highlighted-text) [:span {:class "shui__list-item-highlighted-span bg-accent-06 dark:bg-accent-08-alpha"} highlighted-text])
+     (when-not (string/blank? highlighted-text) [:span {:class "ui__list-item-highlighted-span bg-accent-06 dark:bg-accent-08-alpha"} highlighted-text])
      (when-not (string/blank? after-text) [:span after-text])]))
 
 (defn span-with-multiple-highlight-tokens [app-config text normal-query]
@@ -41,7 +41,7 @@
              (map (fn [[type value]]
                     (if (= type :text)
                       [:span value]
-                      [:span {:class "shui__list-item-highlighted-span"} value])))
+                      [:span {:class "ui__list-item-highlighted-span"} value])))
              (into [:span]))
         (->> result
              (mapcat (fn [[type value]]

resources/css/shui.css

@@ -1,4 +1,4 @@
-.shui__button {
+.ui__button {
   @apply font-medium relative flex items-center justify-center gap-1;
   border-radius: 0.25rem;
   /* box-shadow: inset 0 2px 0 0px rgba(255, 255, 255, 0.2), */
@@ -9,137 +9,137 @@
   /* background-clip: content-box, border-box; */
 }
 
-.shui__button-size-sm {
+.ui__button-size-sm {
   @apply text-xs py-1 px-2;
 }
 
-.shui__button-size-md {
+.ui__button-size-md {
   @apply text-sm py-1 px-3;
 }
 
-.shui__button-tiled {
+.ui__button-tiled {
   padding: 0 !important;
   gap: 0 !important;
 }
 
-.shui__button-tiled .shui__button__tile {
+.ui__button-tiled .ui__button__tile {
   @apply flex items-center justify-center text-center;
 }
 
-.shui__button-tiled.shui__button-size-md .shui__button__tile {
+.ui__button-tiled.ui__button-size-md .ui__button__tile {
   @apply h-6 w-6;
 }
 
-.shui__button-tiled.shui__button-size-sm .shui__button__tile {
+.ui__button-tiled.ui__button-size-sm .ui__button__tile {
     @apply h-4 w-4;
 }
 
-.shui__button__tile-separator {
+.ui__button__tile-separator {
   @apply w-px h-full bg-gray-08-alpha;
 }
 
-.shui__button-theme-text {
+.ui__button-theme-text {
   background: none;
   box-shadow: none;
 }
 
-.shui__button-theme-gray {
+.ui__button-theme-gray {
   background: or(--lx-gray-06, --ls-quaternary-background);
 }
 
-.shui__button-theme-gray:hover {
+.ui__button-theme-gray:hover {
   background: or(--lx-gray-05, --ls-quaternary-background);
 }
 
-.shui__button-theme-gray:active {
+.ui__button-theme-gray:active {
   background: or(--lx-gray-04, --ls-quaternary-background);
 }
 
-.dark .shui__button-theme,
-.dark .shui__button-theme-color {
+.dark .ui__button-theme,
+.dark .ui__button-theme-color {
   background: or(--lx-accent-09, --rx-blue-09);
 }
 
-.dark .shui__button-theme:hover,
-.dark .shui__button-theme-color:hover {
+.dark .ui__button-theme:hover,
+.dark .ui__button-theme-color:hover {
   background: or(--lx-accent-10, --rx-blue-10);
 }
 
-.dark .shui__button-theme:active,
-.dark .shui__button-theme-color:active {
+.dark .ui__button-theme:active,
+.dark .ui__button-theme-color:active {
   background: or(--lx-accent-08, --rx-blue-08);
 }
 
-.dark .shui__button-theme-gray {
+.dark .ui__button-theme-gray {
   background: or(--lx-gray-05, --ls-quaternary-background);
 }
 
-.dark .shui__button-theme-gray:hover {
+.dark .ui__button-theme-gray:hover {
   background: or(--lx-gray-06, --ls-quaternary-background);
 }
 
-.dark .shui__button-theme-gray:active {
+.dark .ui__button-theme-gray:active {
   background: or(--lx-gray-04, --ls-quaternary-background);
 }
 
-.shui__button-theme-gradient {
+.ui__button-theme-gradient {
   --depth-shadow-from: rgba(2, 23, 53, 0.70);
   --depth-shadow-to: rgba(2, 23, 53, 0.00);
 }
 
-.shui__button-theme-gradient:hover {
+.ui__button-theme-gradient:hover {
   --depth-shadow-from: rgba(2, 23, 53, 0.30);
   --depth-shadow-to: rgba(2, 23, 53, 0.00);
 }
 
-.shui__button-theme-gradient:active {
+.ui__button-theme-gradient:active {
   --depth-shadow-from: rgba(0, 0, 0, 0);
   --depth-shadow-to: rgba(0, 0, 0, 0);
 }
 
-.shui__button-theme-gradient.shui__button-,
-.shui__button-theme-gradient.shui__button-custom,
-.shui__button-theme-gradient.shui__button-indigo,
-.shui__button-theme-gradient.shui__button-blue,
-.shui__button-theme-gradient.shui__button-sky,
-.shui__button-theme-gradient.shui__button-cyan {
+.ui__button-theme-gradient.ui__button-,
+.ui__button-theme-gradient.ui__button-custom,
+.ui__button-theme-gradient.ui__button-indigo,
+.ui__button-theme-gradient.ui__button-blue,
+.ui__button-theme-gradient.ui__button-sky,
+.ui__button-theme-gradient.ui__button-cyan {
   background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
               linear-gradient(135deg, var(--rx-indigo-09) 0%, var(--rx-blue-09) 33.85%, var(--rx-sky-09) 64.06%, var(--rx-cyan-09) 100%);
 }
 
-.shui__button-theme-gradient.shui__button-tomato,
-.shui__button-theme-gradient.shui__button-red,
-.shui__button-theme-gradient.shui__button-crimson,
-.shui__button-theme-gradient.shui__button-pink,
-.shui__button-theme-gradient.shui__button-plum,
-.shui__button-theme-gradient.shui__button-purple,
-.shui__button-theme-gradient.shui__button-violet {
+.ui__button-theme-gradient.ui__button-tomato,
+.ui__button-theme-gradient.ui__button-red,
+.ui__button-theme-gradient.ui__button-crimson,
+.ui__button-theme-gradient.ui__button-pink,
+.ui__button-theme-gradient.ui__button-plum,
+.ui__button-theme-gradient.ui__button-purple,
+.ui__button-theme-gradient.ui__button-violet {
   background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
               linear-gradient(135deg, var(--rx-tomato-09) 0%, var(--rx-red-09) 16.66%, var(--rx-crimson-09) 33.33%, var(--rx-pink-09) 50%, var(--rx-plum-09) 66.66%, var(--rx-purple-09) 83.33%, var(--rx-violet-09) 100%);
 }
 
-.shui__button-theme-gradient.shui__button-green,
-.shui__button-theme-gradient.shui__button-mint,
-.shui__button-theme-gradient.shui__button-teal {
+.ui__button-theme-gradient.ui__button-green,
+.ui__button-theme-gradient.ui__button-mint,
+.ui__button-theme-gradient.ui__button-teal {
   background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
               linear-gradient(135deg, var(--rx-teal-09) 0%, var(--rx-mint-09) 50%, var(--rx-green-09) 100%);
 }
 
-.shui__button-theme-gradient.shui__button-grass,
-.shui__button-theme-gradient.shui__button-lime {
+.ui__button-theme-gradient.ui__button-grass,
+.ui__button-theme-gradient.ui__button-lime {
   background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
               linear-gradient(135deg, var(--rx-grass-09) 0%, var(--rx-lime-09) 100%);
 }
 
-.shui__button-theme-gradient.shui__button-yellow,
-.shui__button-theme-gradient.shui__button-amber,
-.shui__button-theme-gradient.shui__button-orange,
-.shui__button-theme-gradient.shui__button-brown {
+.ui__button-theme-gradient.ui__button-yellow,
+.ui__button-theme-gradient.ui__button-amber,
+.ui__button-theme-gradient.ui__button-orange,
+.ui__button-theme-gradient.ui__button-brown {
   background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
               linear-gradient(135deg, var(--rx-yellow-09) 0%, var(--rx-amber-09) 33.33%, var(--rx-orange-09) 66.66%, var(--rx-brown-09) 100%);
 }
 
-/* .shui__button-theme-gradient:hover { */
+/* .ui__button-theme-gradient:hover { */
   /* background: linear-gradient(37deg, rgba(2, 23, 53, 0.30) 0%, rgba(2, 23, 53, 0.00) 100%), linear-gradient(135deg, #8AE8FF 0%, #5373E7 33.85%, #369EFF 64.06%, #00B1CC 100%); */
 /* } */
 
@@ -147,22 +147,22 @@
 /* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); */
 /* } */
 
-.shui__button-depth-1 {
+.ui__button-depth-1 {
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
               inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);
 }
 
-.shui__button-depth-1:hover {
+.ui__button-depth-1:hover {
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
               inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
 }
 
-.shui__button-depth-2 {
+.ui__button-depth-2 {
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
               inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
 }
 
-/* .shui__button-depth-1:before { */
+/* .ui__button-depth-1:before { */
 /*   @apply absolute inset-0; */
 /*   border-radius: 0.25rem; */
 /*   content: ""; */
@@ -174,7 +174,7 @@
 /*   mask-composite: exclude; */
 /* } */
 
-/* .shui__button-depth-1:after { */
+/* .ui__button-depth-1:after { */
 /*   @apply absolute inset-0; */
 /*   border-radius: 0.25rem; */
 /*   content: ""; */
@@ -186,7 +186,7 @@
 /*   mask-composite: exclude; */
 /* } */
 
-/* .shui__button-depth-2:before { */
+/* .ui__button-depth-2:before { */
 /*   @apply absolute inset-0; */
 /*   border-radius: 0.25rem; */
 /*   content: ""; */
@@ -198,7 +198,7 @@
 /*   mask-composite: exclude; */
 /* } */
 
-/* .shui__button-depth-2:after { */
+/* .ui__button-depth-2:after { */
 /*   @apply absolute inset-0; */
 /*   border-radius: 0.25rem; */
 /*   content: ""; */
@@ -210,15 +210,15 @@
 /*   mask-composite: exclude; */
 /* } */
 
-.shui__button-shortcut-key:first-of-type {
+.ui__button-shortcut-key:first-of-type {
   @apply ml-2;
 }
 
-.shui__button-shortcut-key {
+.ui__button-shortcut-key {
   @apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;
 }
 
-.shui__cmdk-quick-capture-glow::before {
+.ui__cmdk-quick-capture-glow::before {
   @apply absolute inset-0;
   pointer-events: none;
   border-radius: 0.25rem;
@@ -231,86 +231,86 @@
   mask-composite: exclude;
 }
 
-.shui__button-muted {
+.ui__button-muted {
   transition: opacity 200 ease-in;
   opacity: 0.4;
 }
 
-.shui__button-muted:hover {
+.ui__button-muted:hover {
   opacity: 1;
 }
 
-.shui__button-theme-gray.shui__button-color-custom  { background-color: var(--ls-tertiary-background-color);
+.ui__button-theme-gray.ui__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(--ls-button-background-hsl) / 0.9);
+.ui__button-theme-color.ui__button-color-custom  { background-color: hsl(var(--ls-button-background-hsl) / 0.9);
                                                        color: white; }
 
-.shui__button-theme-color.shui__button-color-custom:hover {
+.ui__button-theme-color.ui__button-color-custom:hover {
     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); }}
-.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); }}
-.shui__button-theme-color.shui__button-color-gray    { color: white; background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-10); } &:active { background-color: var(--rx-gray-08); }}
-.shui__button-theme-color.shui__button-color-sand    { color: white; background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-10); } &:active { background-color: var(--rx-sand-08); }}
-.shui__button-theme-color.shui__button-color-crimson { color: white; background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-10); } &:active { background-color: var(--rx-crimson-08); }}
-.shui__button-theme-color.shui__button-color-yellow  { color: white; background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-10); } &:active { background-color: var(--rx-yellow-08); }}
-.shui__button-theme-color.shui__button-color-green   { color: white; background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-10); } &:active { background-color: var(--rx-green-08); }}
-.shui__button-theme-color.shui__button-color-indigo  { color: white; background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-10); } &:active { background-color: var(--rx-indigo-08); }}
-.shui__button-theme-color.shui__button-color-cyan    { color: white; background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-10); } &:active { background-color: var(--rx-cyan-08); }}
-.shui__button-theme-color.shui__button-color-violet  { color: white; background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-10); } &:active { background-color: var(--rx-violet-08); }}
-.shui__button-theme-color.shui__button-color-bronze  { color: white; background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-10); } &:active { background-color: var(--rx-bronze-08); }}
-.shui__button-theme-color.shui__button-color-slate   { color: white; background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-10); } &:active { background-color: var(--rx-slate-08); }}
-.shui__button-theme-color.shui__button-color-gold    { color: white; background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-10); } &:active { background-color: var(--rx-gold-08); }}
-.shui__button-theme-color.shui__button-color-sage    { color: white; background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-10); } &:active { background-color: var(--rx-sage-08); }}
-.shui__button-theme-color.shui__button-color-mauve   { color: white; background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-10); } &:active { background-color: var(--rx-mauve-08); }}
-.shui__button-theme-color.shui__button-color-mint    { color: white; background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-10); } &:active { background-color: var(--rx-mint-08); }}
-.shui__button-theme-color.shui__button-color-red     { color: white; background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-10); } &:active { background-color: var(--rx-red-08); }}
-.shui__button-theme-color.shui__button-color-blue    { color: white; background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-10); } &:active { background-color: var(--rx-blue-08); }}
-.shui__button-theme-color.shui__button-color-grass   { color: white; background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-10); } &:active { background-color: var(--rx-grass-08); }}
-.shui__button-theme-color.shui__button-color-plum    { color: white; background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-10); } &:active { background-color: var(--rx-plum-08); }}
-.shui__button-theme-color.shui__button-color-pink    { color: white; background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-10); } &:active { background-color: var(--rx-pink-08); }}
-.shui__button-theme-color.shui__button-color-teal    { color: white; background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-10); } &:active { background-color: var(--rx-teal-08); }}
-.shui__button-theme-color.shui__button-color-amber   { color: white; background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-10); } &:active { background-color: var(--rx-amber-08); }}
-.shui__button-theme-color.shui__button-color-purple  { color: white; background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-10); } &:active { background-color: var(--rx-purple-08); }}
-.shui__button-theme-color.shui__button-color-brown   { color: white; background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-10); } &:active { background-color: var(--rx-brown-08); }}
-.shui__button-theme-color.shui__button-color-sky     { color: white; background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-10); } &:active { background-color: var(--rx-sky-08); }}
-.shui__button-theme-color.shui__button-color-olive   { color: white; background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-10); } &:active { background-color: var(--rx-olive-08); }}
-.shui__button-theme-color.shui__button-color-tomato  { color: white; background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-10); } &:active { background-color: var(--rx-tomato-08); }}
-
-.dark .shui__button-theme-color.shui__button-color-lime    { background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-08); } &:active { background-color: var(--rx-lime-07); }}
-.dark .shui__button-theme-color.shui__button-color-orange  { background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-08); } &:active { background-color: var(--rx-orange-07); }}
-.dark .shui__button-theme-color.shui__button-color-gray    { background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-08); } &:active { background-color: var(--rx-gray-07); }}
-.dark .shui__button-theme-color.shui__button-color-sand    { background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-08); } &:active { background-color: var(--rx-sand-07); }}
-.dark .shui__button-theme-color.shui__button-color-crimson { background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-08); } &:active { background-color: var(--rx-crimson-07); }}
-.dark .shui__button-theme-color.shui__button-color-yellow  { background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-08); } &:active { background-color: var(--rx-yellow-07); }}
-.dark .shui__button-theme-color.shui__button-color-green   { background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-08); } &:active { background-color: var(--rx-green-07); }}
-.dark .shui__button-theme-color.shui__button-color-indigo  { background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-08); } &:active { background-color: var(--rx-indigo-07); }}
-.dark .shui__button-theme-color.shui__button-color-cyan    { background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-08); } &:active { background-color: var(--rx-cyan-07); }}
-.dark .shui__button-theme-color.shui__button-color-violet  { background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-08); } &:active { background-color: var(--rx-violet-07); }}
-.dark .shui__button-theme-color.shui__button-color-bronze  { background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-08); } &:active { background-color: var(--rx-bronze-07); }}
-.dark .shui__button-theme-color.shui__button-color-slate   { background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-08); } &:active { background-color: var(--rx-slate-07); }}
-.dark .shui__button-theme-color.shui__button-color-gold    { background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-08); } &:active { background-color: var(--rx-gold-07); }}
-.dark .shui__button-theme-color.shui__button-color-sage    { background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-08); } &:active { background-color: var(--rx-sage-07); }}
-.dark .shui__button-theme-color.shui__button-color-mauve   { background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-08); } &:active { background-color: var(--rx-mauve-07); }}
-.dark .shui__button-theme-color.shui__button-color-mint    { background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-08); } &:active { background-color: var(--rx-mint-07); }}
-.dark .shui__button-theme-color.shui__button-color-red     { background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-08); } &:active { background-color: var(--rx-red-07); }}
-.dark .shui__button-theme-color.shui__button-color-blue    { background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-08); } &:active { background-color: var(--rx-blue-07); }}
-.dark .shui__button-theme-color.shui__button-color-grass   { background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-08); } &:active { background-color: var(--rx-grass-07); }}
-.dark .shui__button-theme-color.shui__button-color-plum    { background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-08); } &:active { background-color: var(--rx-plum-07); }}
-.dark .shui__button-theme-color.shui__button-color-pink    { background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-08); } &:active { background-color: var(--rx-pink-07); }}
-.dark .shui__button-theme-color.shui__button-color-teal    { background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-08); } &:active { background-color: var(--rx-teal-07); }}
-.dark .shui__button-theme-color.shui__button-color-amber   { background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-08); } &:active { background-color: var(--rx-amber-07); }}
-.dark .shui__button-theme-color.shui__button-color-purple  { background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-08); } &:active { background-color: var(--rx-purple-07); }}
-.dark .shui__button-theme-color.shui__button-color-brown   { background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-08); } &:active { background-color: var(--rx-brown-07); }}
-.dark .shui__button-theme-color.shui__button-color-sky     { background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-08); } &:active { background-color: var(--rx-sky-07); }}
-.dark .shui__button-theme-color.shui__button-color-olive   { background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-08); } &:active { background-color: var(--rx-olive-07); }}
-.dark .shui__button-theme-color.shui__button-color-tomato  { background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-08); } &:active { background-color: var(--rx-tomato-07); }}
-
-.shui__list-item-highlighted-span {
+.ui__button-theme-color.ui__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); }}
+.ui__button-theme-color.ui__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); }}
+.ui__button-theme-color.ui__button-color-gray    { color: white; background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-10); } &:active { background-color: var(--rx-gray-08); }}
+.ui__button-theme-color.ui__button-color-sand    { color: white; background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-10); } &:active { background-color: var(--rx-sand-08); }}
+.ui__button-theme-color.ui__button-color-crimson { color: white; background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-10); } &:active { background-color: var(--rx-crimson-08); }}
+.ui__button-theme-color.ui__button-color-yellow  { color: white; background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-10); } &:active { background-color: var(--rx-yellow-08); }}
+.ui__button-theme-color.ui__button-color-green   { color: white; background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-10); } &:active { background-color: var(--rx-green-08); }}
+.ui__button-theme-color.ui__button-color-indigo  { color: white; background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-10); } &:active { background-color: var(--rx-indigo-08); }}
+.ui__button-theme-color.ui__button-color-cyan    { color: white; background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-10); } &:active { background-color: var(--rx-cyan-08); }}
+.ui__button-theme-color.ui__button-color-violet  { color: white; background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-10); } &:active { background-color: var(--rx-violet-08); }}
+.ui__button-theme-color.ui__button-color-bronze  { color: white; background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-10); } &:active { background-color: var(--rx-bronze-08); }}
+.ui__button-theme-color.ui__button-color-slate   { color: white; background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-10); } &:active { background-color: var(--rx-slate-08); }}
+.ui__button-theme-color.ui__button-color-gold    { color: white; background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-10); } &:active { background-color: var(--rx-gold-08); }}
+.ui__button-theme-color.ui__button-color-sage    { color: white; background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-10); } &:active { background-color: var(--rx-sage-08); }}
+.ui__button-theme-color.ui__button-color-mauve   { color: white; background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-10); } &:active { background-color: var(--rx-mauve-08); }}
+.ui__button-theme-color.ui__button-color-mint    { color: white; background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-10); } &:active { background-color: var(--rx-mint-08); }}
+.ui__button-theme-color.ui__button-color-red     { color: white; background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-10); } &:active { background-color: var(--rx-red-08); }}
+.ui__button-theme-color.ui__button-color-blue    { color: white; background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-10); } &:active { background-color: var(--rx-blue-08); }}
+.ui__button-theme-color.ui__button-color-grass   { color: white; background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-10); } &:active { background-color: var(--rx-grass-08); }}
+.ui__button-theme-color.ui__button-color-plum    { color: white; background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-10); } &:active { background-color: var(--rx-plum-08); }}
+.ui__button-theme-color.ui__button-color-pink    { color: white; background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-10); } &:active { background-color: var(--rx-pink-08); }}
+.ui__button-theme-color.ui__button-color-teal    { color: white; background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-10); } &:active { background-color: var(--rx-teal-08); }}
+.ui__button-theme-color.ui__button-color-amber   { color: white; background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-10); } &:active { background-color: var(--rx-amber-08); }}
+.ui__button-theme-color.ui__button-color-purple  { color: white; background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-10); } &:active { background-color: var(--rx-purple-08); }}
+.ui__button-theme-color.ui__button-color-brown   { color: white; background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-10); } &:active { background-color: var(--rx-brown-08); }}
+.ui__button-theme-color.ui__button-color-sky     { color: white; background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-10); } &:active { background-color: var(--rx-sky-08); }}
+.ui__button-theme-color.ui__button-color-olive   { color: white; background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-10); } &:active { background-color: var(--rx-olive-08); }}
+.ui__button-theme-color.ui__button-color-tomato  { color: white; background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-10); } &:active { background-color: var(--rx-tomato-08); }}
+
+.dark .ui__button-theme-color.ui__button-color-lime    { background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-08); } &:active { background-color: var(--rx-lime-07); }}
+.dark .ui__button-theme-color.ui__button-color-orange  { background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-08); } &:active { background-color: var(--rx-orange-07); }}
+.dark .ui__button-theme-color.ui__button-color-gray    { background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-08); } &:active { background-color: var(--rx-gray-07); }}
+.dark .ui__button-theme-color.ui__button-color-sand    { background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-08); } &:active { background-color: var(--rx-sand-07); }}
+.dark .ui__button-theme-color.ui__button-color-crimson { background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-08); } &:active { background-color: var(--rx-crimson-07); }}
+.dark .ui__button-theme-color.ui__button-color-yellow  { background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-08); } &:active { background-color: var(--rx-yellow-07); }}
+.dark .ui__button-theme-color.ui__button-color-green   { background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-08); } &:active { background-color: var(--rx-green-07); }}
+.dark .ui__button-theme-color.ui__button-color-indigo  { background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-08); } &:active { background-color: var(--rx-indigo-07); }}
+.dark .ui__button-theme-color.ui__button-color-cyan    { background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-08); } &:active { background-color: var(--rx-cyan-07); }}
+.dark .ui__button-theme-color.ui__button-color-violet  { background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-08); } &:active { background-color: var(--rx-violet-07); }}
+.dark .ui__button-theme-color.ui__button-color-bronze  { background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-08); } &:active { background-color: var(--rx-bronze-07); }}
+.dark .ui__button-theme-color.ui__button-color-slate   { background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-08); } &:active { background-color: var(--rx-slate-07); }}
+.dark .ui__button-theme-color.ui__button-color-gold    { background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-08); } &:active { background-color: var(--rx-gold-07); }}
+.dark .ui__button-theme-color.ui__button-color-sage    { background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-08); } &:active { background-color: var(--rx-sage-07); }}
+.dark .ui__button-theme-color.ui__button-color-mauve   { background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-08); } &:active { background-color: var(--rx-mauve-07); }}
+.dark .ui__button-theme-color.ui__button-color-mint    { background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-08); } &:active { background-color: var(--rx-mint-07); }}
+.dark .ui__button-theme-color.ui__button-color-red     { background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-08); } &:active { background-color: var(--rx-red-07); }}
+.dark .ui__button-theme-color.ui__button-color-blue    { background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-08); } &:active { background-color: var(--rx-blue-07); }}
+.dark .ui__button-theme-color.ui__button-color-grass   { background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-08); } &:active { background-color: var(--rx-grass-07); }}
+.dark .ui__button-theme-color.ui__button-color-plum    { background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-08); } &:active { background-color: var(--rx-plum-07); }}
+.dark .ui__button-theme-color.ui__button-color-pink    { background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-08); } &:active { background-color: var(--rx-pink-07); }}
+.dark .ui__button-theme-color.ui__button-color-teal    { background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-08); } &:active { background-color: var(--rx-teal-07); }}
+.dark .ui__button-theme-color.ui__button-color-amber   { background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-08); } &:active { background-color: var(--rx-amber-07); }}
+.dark .ui__button-theme-color.ui__button-color-purple  { background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-08); } &:active { background-color: var(--rx-purple-07); }}
+.dark .ui__button-theme-color.ui__button-color-brown   { background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-08); } &:active { background-color: var(--rx-brown-07); }}
+.dark .ui__button-theme-color.ui__button-color-sky     { background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-08); } &:active { background-color: var(--rx-sky-07); }}
+.dark .ui__button-theme-color.ui__button-color-olive   { background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-08); } &:active { background-color: var(--rx-olive-07); }}
+.dark .ui__button-theme-color.ui__button-color-tomato  { background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-08); } &:active { background-color: var(--rx-tomato-07); }}
+
+.ui__list-item-highlighted-span {
   background-color: or(--lx-accent-06, --color-level-4);
 }
 
-.dark .shui__list-item-highlighted-span {
+.dark .ui__list-item-highlighted-span {
   background-color: or(--lx-accent-08-alpha, --color-level-4);
 }