web/components/TempDesignSystem/Text/Caption/variants.ts

import { cva } from "class-variance-authority"

import styles from "./caption.module.css"

const config = {
  variants: {
    type: {
      regular: styles.regular,
      bold: styles.bold,
      label: styles.labels,
      underline: styles.underline,
    },
    color: {
      baseTextAccent: styles.baseTextAccent,
      black: styles.black,
      burgundy: styles.burgundy,
      pale: styles.pale,
      textMediumContrast: styles.textMediumContrast,
      red: styles.red,
      white: styles.white,
      green: styles.green,
      blue: styles.blue,
      uiTextHighContrast: styles.uiTextHighContrast,
      uiTextActive: styles.uiTextActive,
      uiTextMediumContrast: styles.uiTextMediumContrast,
      uiTextPlaceholder: styles.uiTextPlaceholder,
      disabled: styles.disabled,
      baseTextHighContrast: styles.baseTextHighContrast,
      baseTextMediumContrast: styles.baseTextMediumContrast,
    },
    textTransform: {
      uppercase: styles.uppercase,
    },
    textAlign: {
      center: styles.center,
      left: styles.left,
    },
    uppercase: {
      true: styles.uppercase,
    },
  },
  defaultVariants: {
    color: "black",
    type: "regular",
  },
} as const

export const captionVariants = cva(styles.caption, config)

const fontOnlyConfig = {
  variants: {
    type: {
      regular: styles.regular,
      bold: styles.bold,
      label: styles.labels,
      underline: styles.underline,
    },
    textTransform: {
      uppercase: styles.uppercase,
    },
    uppercase: {
      true: styles.uppercase,
    },
  },
  defaultVariants: {
    type: "regular",
  },
} as const

export const fontOnlycaptionVariants = cva(
  styles.captionFontOnly,
  fontOnlyConfig
)