components/ui/button-variants.ts

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+/**
+ * 按钮样式变体。
+ *
+ * 对应 DESIGN.md 的组件定义：
+ * - primary   → button-primary（黑底胶囊，主 CTA）
+ * - secondary → button-secondary（描边胶囊）
+ * - accent    → button-accent-green（品牌薄荷绿，谨慎使用）
+ * - ghost     → button-ghost（无背景矩形）
+ * - link      → button-link（内联文字链接）
+ *
+ * 规范要求：所有按钮一律 `{rounded.full}` 胶囊形，不软化圆角。
+ */
+export const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-xs font-medium whitespace-nowrap rounded-full transition-colors duration-150 ease-out disabled:pointer-events-none disabled:bg-hairline disabled:text-muted",
+	{
+		variants: {
+			variant: {
+				primary: "bg-primary text-on-primary active:bg-charcoal",
+				secondary:
+					"bg-transparent text-ink border border-hairline active:bg-surface",
+				accent: "bg-brand-green text-primary active:bg-brand-green-deep",
+				onDark: "bg-on-dark text-primary active:bg-on-dark-muted",
+				ghost: "rounded-md bg-transparent text-ink active:bg-surface",
+				link: "rounded-none bg-transparent text-ink underline-offset-4 active:underline p-0 h-auto",
+			},
+			size: {
+				sm: "h-9 px-md text-body-sm",
+				// DESIGN.md: padding 10px 20px，字号 14px / 行高 1.3
+				md: "h-10 px-lg text-button-md",
+				// 移动端触控目标 ≥ 44px
+				lg: "h-11 px-xl text-body-md",
+			},
+		},
+		defaultVariants: {
+			variant: "primary",
+			size: "md",
+		},
+	},
+);
+
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+export interface ButtonStyleOptions extends ButtonVariantProps {
+	className?: string;
+}
+
+/** 生成按钮 className，供 <button> 与 <Link> 复用同一套样式 */
+export function buttonClassName({
+	className,
+	variant,
+	size,
+}: ButtonStyleOptions = {}): string {
+	return cn(buttonVariants({ variant, size }), className);
+}