button.tsx

import { Paragraph } from '@/components/paragraph'
import { Button as HeadlessButton } from '@headlessui/react'
import { clsx } from 'clsx'
import { Link } from '@/components/link'
import { Icon } from '@/components/icon'

const variants = {
  primary: {
    light: clsx(
      'inline-flex items-center justify-center',
      'rounded-md border border-transparent bg-accent shadow-md',
      'text-accent-contrast',
      'disabled:bg-accent disabled:opacity-40 hover:bg-accent-dark',
      'transition-colors duration-200'
    ),
    dark: clsx(
      'inline-flex items-center justify-center',
      'rounded-md border border-transparent bg-body shadow-md',
      'text-contrast-dark',
      'disabled:bg-body disabled:opacity-40 hover:bg-body-light',