34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* Centralized button style configurations using tailwind-variants
|
||
|
|
* Maintains consistent button styling across the app with automatic class merging
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { tv, type VariantProps } from "tailwind-variants";
|
||
|
|
|
||
|
|
export const buttonStyles = tv({
|
||
|
|
base: "group transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
|
||
|
|
variants: {
|
||
|
|
intent: {
|
||
|
|
// Theme button - 页面主题色按钮 (bg-foreground text-background)
|
||
|
|
theme: "rounded-xl h-11 w-full px-6 text-body-small font-bold bg-foreground text-background",
|
||
|
|
// Max button - 绿色 Max 按钮
|
||
|
|
max: "rounded-full px-3 h-[24px] min-w-0 text-[12px] font-bold bg-[#a7f3d0] text-[#065f46] dark:bg-green-900/30 dark:text-green-300",
|
||
|
|
},
|
||
|
|
fullWidth: {
|
||
|
|
true: "w-full",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
defaultVariants: {
|
||
|
|
intent: "theme",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// Type export for use in components
|
||
|
|
export type ButtonIntent = VariantProps<typeof buttonStyles>["intent"];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Disabled button state classes
|
||
|
|
* Apply these when button is disabled
|
||
|
|
*/
|
||
|
|
export const disabledButtonClasses = "cursor-not-allowed opacity-50";
|