refactor: 更新 Button 组件为医疗健康风格
This commit is contained in:
@@ -5,22 +5,22 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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-[var(--color-tech-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg 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-[#005EB8] focus-visible:ring-offset-2 focus-visible:ring-offset-white",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-[var(--color-brand-primary)] text-white hover:bg-[var(--color-brand-primary-hover)] hover:shadow-[0_0_20px_rgba(196,30,58,0.4)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
"bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-[0_4px_12px_rgba(196,30,58,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
secondary:
|
||||
"bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] text-white hover:shadow-[0_0_20px_rgba(0,217,255,0.3)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
"bg-[#005EB8] text-white hover:bg-[#003B73] hover:shadow-[0_4px_12px_rgba(0,94,184,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
destructive:
|
||||
"bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/90 focus-visible:ring-[var(--color-error)]",
|
||||
"bg-[#DC2626] text-white hover:bg-[#B91C1C] focus-visible:ring-[#DC2626]",
|
||||
outline:
|
||||
"border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[rgba(0,217,255,0.1)] hover:shadow-[0_0_20px_rgba(0,217,255,0.2)]",
|
||||
"border-2 border-[#005EB8] bg-transparent text-[#005EB8] hover:bg-[#E8F4FD] hover:shadow-[0_2px_8px_rgba(0,94,184,0.15)]",
|
||||
ghost:
|
||||
"text-[var(--color-text-secondary)] hover:bg-[rgba(255,255,255,0.05)] hover:text-[var(--color-text-primary)]",
|
||||
"text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#1A1A2E]",
|
||||
link:
|
||||
"text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
|
||||
"text-[#005EB8] underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
|
||||
Reference in New Issue
Block a user