3626880663
- Define custom border utilities in @layer utilities for consistent theming - Add border-default (1px gray), border-active (2px primary), border-hover (40% primary), and border-dragging (60% primary) classes - Update all UI components (Input, Select, TextArea, Button, Dialog, Dropdown) to use unified border classes - Replace hardcoded border colors (gray-200/300/600/700) with theme-responsive border-border-default - Update provider cards, MCP components, settings, and forms with new border system - Remove dark mode border overrides to simplify CSS and improve maintainability - Ensure all borders automatically adapt to light/dark themes via CSS variables
66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import * as React from "react";
|
||
import { Slot } from "@radix-ui/react-slot";
|
||
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-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||
{
|
||
variants: {
|
||
variant: {
|
||
// 主按钮：蓝底白字（对应旧版 primary）
|
||
default:
|
||
"bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
|
||
// 危险按钮：红底白字（对应旧版 danger）
|
||
destructive:
|
||
"bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700",
|
||
// 轮廓按钮
|
||
outline:
|
||
"border border-border-default bg-background hover:bg-gray-100 hover:border-border-hover dark:hover:bg-gray-800",
|
||
// 次按钮：灰色（对应旧版 secondary）
|
||
secondary:
|
||
"text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
|
||
// 幽灵按钮（对应旧版 ghost）
|
||
ghost:
|
||
"text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800",
|
||
// MCP 专属按钮：祖母绿
|
||
mcp: "bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
|
||
// 链接按钮
|
||
link: "text-blue-500 underline-offset-4 hover:underline dark:text-blue-400",
|
||
},
|
||
size: {
|
||
default: "h-9 px-4 py-2",
|
||
sm: "h-8 rounded-md px-3 text-xs",
|
||
lg: "h-10 rounded-md px-8",
|
||
icon: "h-9 w-9 p-1.5",
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
variant: "default",
|
||
size: "default",
|
||
},
|
||
},
|
||
);
|
||
|
||
export interface ButtonProps
|
||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||
VariantProps<typeof buttonVariants> {
|
||
asChild?: boolean;
|
||
}
|
||
|
||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||
const Comp = asChild ? Slot : "button";
|
||
return (
|
||
<Comp
|
||
className={cn(buttonVariants({ variant, size, className }))}
|
||
ref={ref}
|
||
{...props}
|
||
/>
|
||
);
|
||
},
|
||
);
|
||
Button.displayName = "Button";
|
||
|
||
export { Button, buttonVariants };
|