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

feat: enhance button component with dark tech theme variants

Browse Source
This commit is contained in:
张翔
2026-02-21 20:05:08 +08:00
parent 7f9aad4965
commit f99685bf0c
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/button.tsx
+11 -10
View File
@@ -5,28 +5,29 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/50", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-lg hover:shadow-[#C41E3A]/25 hover:-translate-y-0.5", default: "bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] text-white hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/50 hover:scale-105 active:scale-95",
destructive: destructive:
"bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/50", "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/50",
outline: outline:
"border-2 border-[#C41E3A] bg-transparent text-[#C41E3A] hover:bg-[#FEF2F4] hover:text-[#A01830]", "border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
secondary: secondary:
"bg-[#FAF8F8] text-[#1A1A1A] hover:bg-[#F5F0F0]", "bg-[var(--color-bg-tertiary)] text-white border border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
ghost: ghost:
"hover:bg-[#F5F0F0] hover:text-[#1A1A1A]", "text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
link: "text-[#C41E3A] underline-offset-4 hover:underline hover:text-[#A01830]", link: "text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
}, },
size: { size: {
default: "h-10 px-6 py-2", default: "h-10 px-6 py-2",
xs: "h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3", xs: "h-7 gap-1 rounded-lg px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 rounded-md gap-1.5 px-4", sm: "h-8 rounded-lg gap-1.5 px-4",
lg: "h-12 rounded-md px-8 text-base", lg: "h-12 rounded-lg px-8 text-base",
xl: "h-14 rounded-lg px-10 text-lg",
icon: "size-10", icon: "size-10",
"icon-xs": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-xs": "size-7 rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8", "icon-sm": "size-8",
"icon-lg": "size-12", "icon-lg": "size-12",
}, },