From a2299fa2ab08135db0ed694391aec3aaccc78a22 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Tue, 11 Nov 2025 17:24:47 +0800 Subject: [PATCH] style(combobox, select): update styles to use Tailwind CSS utility classes - 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. --- packages/ui/src/components/primitives/combobox.tsx | 6 +++++- packages/ui/src/components/primitives/select.tsx | 14 ++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/primitives/combobox.tsx b/packages/ui/src/components/primitives/combobox.tsx index 330a3d5e43..15afa8c0a8 100644 --- a/packages/ui/src/components/primitives/combobox.tsx +++ b/packages/ui/src/components/primitives/combobox.tsx @@ -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: { diff --git a/packages/ui/src/components/primitives/select.tsx b/packages/ui/src/components/primitives/select.tsx index 31b5d5ce48..ec2bac4cba 100644 --- a/packages/ui/src/components/primitives/select.tsx +++ b/packages/ui/src/components/primitives/select.tsx @@ -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',