139 lines
2.9 KiB
TypeScript
139 lines
2.9 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
|
|
import styles from "./button.module.css"
|
|
|
|
export const buttonVariants = cva(styles.btn, {
|
|
variants: {
|
|
intent: {
|
|
inverted: styles.inverted,
|
|
primary: styles.primary,
|
|
secondary: styles.secondary,
|
|
tertiary: styles.tertiary,
|
|
text: styles.text,
|
|
},
|
|
size: {
|
|
small: styles.small,
|
|
medium: styles.medium,
|
|
large: styles.large,
|
|
},
|
|
theme: {
|
|
base: "",
|
|
primaryDark: "",
|
|
primaryStrong: "",
|
|
primaryLight: "",
|
|
secondaryLight: "",
|
|
secondaryDark: "",
|
|
tertiaryLight: "",
|
|
tertiaryDark: "",
|
|
},
|
|
variant: {
|
|
default: styles.default,
|
|
icon: styles.icon,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
intent: "primary",
|
|
size: "medium",
|
|
theme: "primaryLight",
|
|
variant: "default",
|
|
},
|
|
|
|
compoundVariants: [
|
|
{
|
|
className: styles.basePrimary,
|
|
intent: "primary",
|
|
theme: "base",
|
|
},
|
|
{
|
|
className: styles.baseSecondary,
|
|
intent: "secondary",
|
|
theme: "base",
|
|
},
|
|
{
|
|
className: styles.baseTertiary,
|
|
intent: "tertiary",
|
|
theme: "base",
|
|
},
|
|
{
|
|
className: styles.baseInverted,
|
|
intent: "inverted",
|
|
theme: "base",
|
|
},
|
|
{
|
|
className: styles.primaryDarkPrimary,
|
|
intent: "primary",
|
|
theme: "primaryDark",
|
|
},
|
|
{
|
|
className: styles.primaryDarkSecondary,
|
|
intent: "secondary",
|
|
theme: "primaryDark",
|
|
},
|
|
{
|
|
className: styles.primaryLightPrimary,
|
|
intent: "primary",
|
|
theme: "primaryLight",
|
|
},
|
|
{
|
|
className: styles.primaryLightSecondary,
|
|
intent: "secondary",
|
|
theme: "primaryLight",
|
|
},
|
|
{
|
|
className: styles.primaryStrongPrimary,
|
|
intent: "primary",
|
|
theme: "primaryStrong",
|
|
},
|
|
{
|
|
className: styles.primaryStrongSecondary,
|
|
intent: "secondary",
|
|
theme: "primaryStrong",
|
|
},
|
|
{
|
|
className: styles.secondaryDarkPrimary,
|
|
intent: "primary",
|
|
theme: "secondaryDark",
|
|
},
|
|
{
|
|
className: styles.secondaryDarkSecondary,
|
|
intent: "secondary",
|
|
theme: "secondaryDark",
|
|
},
|
|
{
|
|
className: styles.secondaryLightPrimary,
|
|
intent: "primary",
|
|
theme: "secondaryLight",
|
|
},
|
|
{
|
|
className: styles.secondaryLightSecondary,
|
|
intent: "secondary",
|
|
theme: "secondaryLight",
|
|
},
|
|
{
|
|
className: styles.tertiaryDarkPrimary,
|
|
intent: "primary",
|
|
theme: "tertiaryDark",
|
|
},
|
|
{
|
|
className: styles.tertiaryDarkSecondary,
|
|
intent: "secondary",
|
|
theme: "tertiaryDark",
|
|
},
|
|
{
|
|
className: styles.tertiaryLightPrimary,
|
|
intent: "primary",
|
|
theme: "tertiaryLight",
|
|
},
|
|
{
|
|
className: styles.tertiaryLightSecondary,
|
|
intent: "secondary",
|
|
theme: "tertiaryLight",
|
|
},
|
|
{
|
|
className: styles.baseText,
|
|
intent: "text",
|
|
theme: "base",
|
|
},
|
|
],
|
|
})
|