mirror of https://github.com/logseq/logseq
chore: replace shui__ with ui__
Theme creators don't need to know about shui.pull/10132/head
Tienson Qin
parent
b1eacf9259
commit
2a62767f34
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 "⇧"]
|
||||
|
|
|
|||
|
|
@ -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]]
|
||||
|
|
|
|||
|
|
@ -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); }}
|
||||
.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 .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); }}
|
||||
.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); }}
|
||||
|
||||
.shui__list-item-highlighted-span {
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue