63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import { cva } from 'class-variance-authority'
|
|
|
|
import {
|
|
config as typographyConfig,
|
|
withTypography,
|
|
} from '../Typography/variants'
|
|
|
|
import { deepmerge } from 'deepmerge-ts'
|
|
import styles from './button.module.css'
|
|
|
|
export const config = {
|
|
variants: {
|
|
variant: {
|
|
Primary: styles['variant-primary'],
|
|
Secondary: styles['variant-secondary'],
|
|
Tertiary: styles['variant-tertiary'],
|
|
Inverted: styles['variant-inverted'],
|
|
Text: styles['variant-text'],
|
|
},
|
|
color: {
|
|
Primary: styles['color-primary'],
|
|
Inverted: styles['color-inverted'],
|
|
},
|
|
size: {
|
|
Small: styles['size-small'],
|
|
Medium: styles['size-medium'],
|
|
Large: styles['size-large'],
|
|
},
|
|
wrapping: {
|
|
true: undefined,
|
|
false: styles['no-wrapping'],
|
|
},
|
|
fullWidth: {
|
|
true: styles['full-width'],
|
|
false: undefined,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'Primary',
|
|
color: 'Primary',
|
|
size: 'Large',
|
|
wrapping: true,
|
|
fullWidth: false,
|
|
},
|
|
} as const
|
|
|
|
const buttonConfig = {
|
|
variants: {
|
|
...config.variants,
|
|
typography: typographyConfig.variants.variant,
|
|
},
|
|
defaultVariants: {
|
|
...config.defaultVariants,
|
|
typography: 'Body/Paragraph/mdBold',
|
|
},
|
|
} as const
|
|
|
|
export const variants = cva(styles.button, withTypography(buttonConfig))
|
|
|
|
export function withButton<T>(config: T) {
|
|
return deepmerge(buttonConfig, config)
|
|
}
|