Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-09 14:59:27 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

style(combobox, select): update styles to use Tailwind CSS utility classes

Browse Source 
- Refactored the combobox and select components to utilize Tailwind CSS utility classes for consistent styling.
- Added 'text-foreground' class to enhance text visibility in both components.
- Streamlined the default styles for better maintainability and adherence to the new design system.
This commit is contained in:
MyPrototypeWhat 2025-11-11 17:24:47 +08:00
parent a830d05790
commit a2299fa2ab
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui/src/components/primitives/combobox.tsx
View File

@ -18,7 +18,11 @@ import * as React from 'react'
// ==================== Variants ====================
const comboboxTriggerVariants = cva(
'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal bg-zinc-50 dark:bg-zinc-900',
cn(
'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal',
'bg-zinc-50 dark:bg-zinc-900',
'text-foreground'
),
{
variants: {
state: {

14
packages/ui/src/components/primitives/select.tsx
View File

@ -5,15 +5,17 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
import * as React from 'react'
const selectTriggerVariants = cva(
'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal',
cn(
'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal',
'bg-zinc-50 dark:bg-zinc-900',
'text-foreground'
),
{
variants: {
state: {
default:
'bg-zinc-50 dark:bg-zinc-900 border-border aria-expanded:border-primary aria-expanded:ring-3 aria-expanded:ring-primary/20',
error:
'bg-zinc-50 dark:bg-zinc-900 border border-destructive! aria-expanded:ring-3 aria-expanded:ring-red-600/20',
disabled: 'opacity-50 cursor-not-allowed pointer-events-none bg-zinc-50 dark:bg-zinc-900'
default: 'border-border aria-expanded:border-primary aria-expanded:ring-3 aria-expanded:ring-primary/20',
error: 'border border-destructive! aria-expanded:ring-3 aria-expanded:ring-red-600/20',
disabled: 'opacity-50 cursor-not-allowed pointer-events-none'
},
size: {
sm: 'px-3 gap-2 h-8',