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

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,
      textInverted: styles.text,
    },
    size: {
      small: styles.small,
      medium: styles.medium,
      large: styles.large,
    },
    theme: {
      base: "",
      primaryDark: "",
      primaryStrong: "",
      primaryLight: "",
      secondaryLight: "",
      secondaryDark: "",
      tertiaryLight: "",
      tertiaryDark: "",
    },
    variant: {
      clean: styles.clean,
      default: styles.default,
      icon: styles.icon,
    },
    wrapping: {
      true: styles.wrapping,
    },
    clean: {
      true: styles.clean,
    },
    fullWidth: {
      true: styles.fullWidth,
    },
  },
  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",
    },
    {
      className: styles.baseTextInverted,
      intent: "textInverted",
      theme: "base",
    },
  ],
})