novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance badge component with dark tech theme variants

Browse Source
This commit is contained in:
张翔
2026-02-21 20:09:02 +08:00
parent ec66889e36
commit cbd45e236b
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/badge.tsx
+8 -7
View File
@@ -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: {