github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): unify UI colors onto theme tokens

Browse Source
This commit is contained in:
Freedom authored and GitHub committed 2026-07-28 11:24:10 +08:00
1 parent af479c7770
commit 1cdbf4fa3d
31 files changed
+558 -582
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue
+3 -34
View File
@@ -42,8 +42,8 @@ const props = withDefaults(
clearable: false,
clearSelectedOption: false,
loadingText: "Loading...",
triggerVariant: "ghost",
triggerIconClass: "h-3 w-3",
triggerVariant: "outline",
triggerIconClass: "size-4 text-muted-foreground",
displayName: (option: string) => option,
optionTooltip: () => undefined,
normalizeCustom: (value: string) => value,
@@ -78,7 +78,7 @@ const selectedLabel = computed(() => {
const triggerBaseClass = computed(() =>
props.triggerVariant === "outline"
? "dbx-searchable-select-trigger h-6 w-auto max-w-56 min-w-0 justify-between gap-1 px-2 text-xs font-normal shadow-none"
? "dbx-searchable-select-trigger dbx-control-chrome h-8 w-full min-w-0 justify-between gap-1.5 border border-input bg-transparent px-2.5 text-sm font-normal shadow-none hover:bg-muted/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
: "h-6 w-auto max-w-56 min-w-0 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0",
);
@@ -335,37 +335,6 @@ function handleKeydown(event: KeyboardEvent) {
</template>
<style>
.dbx-searchable-select-trigger {
border: 1px solid rgb(229, 229, 229) !important;
background-color: rgb(255, 255, 255) !important;
box-shadow: none !important;
}
.dbx-searchable-select-trigger:hover {
background-color: rgb(250, 250, 250) !important;
}
.dbx-searchable-select-trigger[aria-expanded="true"],
.dbx-searchable-select-trigger:focus-visible {
border-color: rgb(96, 165, 250) !important;
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
}
.dark .dbx-searchable-select-trigger {
border-color: rgba(255, 255, 255, 0.14) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .dbx-searchable-select-trigger:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
}
.dark .dbx-searchable-select-trigger[aria-expanded="true"],
.dark .dbx-searchable-select-trigger:focus-visible {
border-color: rgb(147, 197, 253) !important;
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
}
.dbx-searchable-select-list {
scrollbar-width: thin;
scrollbar-color: color-mix(in oklch, var(--foreground) 30%, transparent) transparent;
apps/desktop/src/components/ui/select/SelectTrigger.vue
+1 -34
View File
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'dbx-select-trigger border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
'dbx-select-trigger dbx-control-chrome border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
props.class,
)
"
@@ -31,36 +31,3 @@ const forwardedProps = useForwardProps(delegatedProps);
</SelectIcon>
</SelectTrigger>
</template>
<style>
.dbx-select-trigger:not(.border-0):not(.border-transparent) {
border: 1px solid rgb(229, 229, 229) !important;
background-color: rgb(255, 255, 255) !important;
box-shadow: none !important;
}
.dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
background-color: rgb(250, 250, 250) !important;
}
.dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
.dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
border-color: rgb(96, 165, 250) !important;
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
}
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent) {
border-color: rgba(255, 255, 255, 0.14) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
background-color: rgba(255, 255, 255, 0.12) !important;
}
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
border-color: rgb(147, 197, 253) !important;
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
}
</style>
apps/desktop/src/components/ui/switch/Switch.vue
+17 -11
View File
@@ -51,8 +51,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
position: relative;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(120, 120, 128, 0.22) !important;
background-color: rgb(229, 229, 229) !important;
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
background-color: var(--input) !important;
vertical-align: middle;
}
@@ -69,8 +69,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
.dbx-switch-thumb {
display: block !important;
border-radius: 9999px;
background-color: rgb(255, 255, 255) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
background-color: var(--background) !important;
box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 18%, transparent);
transform: translateX(0) !important;
}
@@ -87,8 +87,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
.dbx-switch[data-state="checked"],
.dbx-switch[data-checked],
.dbx-switch[aria-checked="true"] {
border-color: rgb(23, 23, 23) !important;
background-color: rgb(23, 23, 23) !important;
border-color: var(--primary) !important;
background-color: var(--primary) !important;
}
.dbx-switch[data-size="default"][data-state="checked"] .dbx-switch-thumb,
@@ -103,21 +103,27 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
transform: translateX(10px) !important;
}
.dbx-switch[data-state="checked"] .dbx-switch-thumb,
.dbx-switch[data-checked] .dbx-switch-thumb,
.dbx-switch[aria-checked="true"] .dbx-switch-thumb {
background-color: var(--primary-foreground) !important;
}
.dark .dbx-switch {
border-color: rgba(255, 255, 255, 0.16) !important;
background-color: rgba(255, 255, 255, 0.18) !important;
border-color: color-mix(in srgb, var(--border) 90%, transparent) !important;
background-color: color-mix(in srgb, var(--input) 80%, transparent) !important;
}
.dark .dbx-switch[data-state="checked"],
.dark .dbx-switch[data-checked],
.dark .dbx-switch[aria-checked="true"] {
border-color: rgb(245, 245, 245) !important;
background-color: rgb(245, 245, 245) !important;
border-color: var(--primary) !important;
background-color: var(--primary) !important;
}
.dark .dbx-switch[data-state="checked"] .dbx-switch-thumb,
.dark .dbx-switch[data-checked] .dbx-switch-thumb,
.dark .dbx-switch[aria-checked="true"] .dbx-switch-thumb {
background-color: rgb(23, 23, 23) !important;
background-color: var(--primary-foreground) !important;
}
</style>