From cbd45e236b44985d59cc672f587d31db9adaf128 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sat, 21 Feb 2026 20:09:02 +0800 Subject: [PATCH] feat: enhance badge component with dark tech theme variants --- src/components/ui/badge.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index ba40cc1..eee9da9 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -5,19 +5,20 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + "inline-flex items-center justify-center rounded-full border px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[var(--color-tech-blue)] focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 transition-all duration-300 overflow-hidden", { variants: { variant: { - default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + default: "bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] text-white border-transparent shadow-lg shadow-[var(--color-tech-blue)]/30", secondary: - "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + "bg-[var(--color-bg-tertiary)] text-gray-300 border-gray-700 hover:border-[var(--color-tech-blue)] hover:text-[var(--color-tech-blue)]", destructive: - "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + "bg-red-600 text-white border-transparent hover:bg-red-700", outline: - "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", - ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground", - link: "text-primary underline-offset-4 [a&]:hover:underline", + "border-[var(--color-tech-blue)] text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20", + ghost: "text-gray-400 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]", + success: "bg-green-600 text-white border-transparent hover:bg-green-700", + warning: "bg-yellow-600 text-white border-transparent hover:bg-yellow-700", }, }, defaultVariants: {