mirror of
https://github.com/HoshinoSuzumi/rayine-ui.git
synced 2025-04-10 20:18:50 +08:00
48 lines
2.6 KiB
TypeScript
48 lines
2.6 KiB
TypeScript
export default {
|
|
base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 transition",
|
|
rounded: "rounded-lg",
|
|
font: "font-medium",
|
|
block: "w-full flex justify-center items-center",
|
|
inline: "inline-flex items-center",
|
|
size: {
|
|
"2xs": "text-xs",
|
|
xs: "text-xs",
|
|
sm: "text-sm",
|
|
md: "text-sm",
|
|
lg: "text-sm",
|
|
xl: "text-base",
|
|
},
|
|
padding: {
|
|
"2xs": "px-2 py-1",
|
|
xs: "px-2.5 py-1.5",
|
|
sm: "px-2.5 py-1.5",
|
|
md: "px-3 py-2",
|
|
lg: "px-3.5 py-2.5",
|
|
xl: "px-3.5 py-2.5",
|
|
},
|
|
square: {
|
|
"2xs": "p-1",
|
|
xs: "p-1.5",
|
|
sm: "p-1.5",
|
|
md: "p-2",
|
|
lg: "p-2.5",
|
|
xl: "p-2.5",
|
|
},
|
|
color: {},
|
|
variant: {
|
|
solid:
|
|
"shadow-sm hover:shadow-md disabled:hover:shadow-sm active:shadow-none bg-{color}-500 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 hover:bg-{color}-600 text-white active:bg-{color}-700 dark:active:bg-{color}-500 focus:ring focus:ring-{color}-300 focus:ring-opacity-50 dark:focus:ring-opacity-20",
|
|
outline:
|
|
"ring-1 ring-inset ring-current ring-{color}-500 text-{color}-500 dark:hover:text-{color}-400 dark:hover:text-{color}-500 hover:bg-{color}-100 dark:hover:bg-{color}-900 disabled:bg-transparent disabled:hover:bg-transparent aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
|
|
soft: "text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 transition-none",
|
|
ghost:
|
|
"text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
|
|
link: "text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
|
|
},
|
|
default: {
|
|
size: "sm",
|
|
color: "primary",
|
|
variant: "solid",
|
|
},
|
|
};
|