web/packages/design-system/lib/components/Button/variants.ts

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'],
    },
  },
  defaultVariants: {
    variant: 'Primary',
    color: 'Primary',
    size: 'Large',
    wrapping: true,
  },
} 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)
}