Badge component with cva and tailwind

src/components/Badge/Badge.tsx

@@ -1,30 +1,50 @@
-import { clsx } from 'clsx'
-import { ReactElement } from 'react'
+import { cva, VariantProps } from 'class-variance-authority'
+import { CSSProperties, ReactElement } from 'react'
 
-import { Box, BoxProps } from '~/components/Box'
+import { textVariants } from '~/tokens/typography'
 
-import * as styles from './styles.css'
+const badgeVariants = cva(
+  [
+    'inline-flex',
+    'flex-shrink-0',
+    'place-items-center',
+    'rounded-full',
+    'text-white',
+    'whitespace-nowrap',
+  ],
+  {
+    variants: {
+      variant: {
+        info: ['bg-info'],
+        warning: ['bg-warning'],
+        success: ['bg-positive'],
+        error: ['bg-negative'],
+      },
 
-type BadgeProps = BoxProps &
-  styles.BadgeVariants & {
-    value: ReactElement | string | number
+      size: {
+        sm: [textVariants({ variant: 'small' }), 'h-4', 'min-w-4', 'px-2'],
+        md: [textVariants({ variant: 'normal' }), 'h-5', 'min-w-5', 'px-3'],
+        lg: [textVariants({ variant: 'medium' }), 'h-6', 'min-w-6', 'px-4'],
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
   }
+)
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  className?: string
+  style?: CSSProperties
+  value: ReactElement | string | number
+}
 
 export const Badge = (props: BadgeProps) => {
   const { className, value, variant = 'info', size = 'md', ...rest } = props
 
   return (
-    <Box
-      className={clsx(className, styles.badgeVariants({ variant, size }))}
-      display="inline-flex"
-      flexShrink="0"
-      placeItems="center"
-      borderRadius="circle"
-      color="white"
-      whiteSpace="nowrap"
-      {...rest}
-    >
+    <div className={badgeVariants({ variant, size, className })} {...rest}>
       {value}
-    </Box>
+    </div>
   )
 }

src/tokens/typography.ts

@@ -1,3 +1,5 @@
+import { cva } from 'class-variance-authority'
+
 export const fonts = {
   inherit: 'inherit',
   body: `Inter, system-ui, Roboto, "Helvetica Neue", Arial`,
@@ -115,3 +117,94 @@ export const text: Record<TextVariant, TextVariantAtomProps> = {
     fontWeight: 'normal',
   },
 }
+
+// Tailwind class variants
+export const textVariants = cva(undefined, {
+  variants: {
+    variant: {
+      inherit: ['text-inherit'],
+      xlarge: [
+        'text-3xl',
+        'font-bold',
+        'font-sans',
+        'leading-9',
+        'tracking-none',
+      ],
+      large: [
+        'text-xl',
+        'font-semibold',
+        'font-sans',
+        'leading-7',
+        'tracking-normal',
+      ],
+      medium: [
+        'text-base',
+        'font-bold',
+        'font-sans',
+        'leading-6',
+        'tracking-normal',
+      ],
+      normal: [
+        'text-sm',
+        'font-normal',
+        'font-sans',
+        'leading-5',
+        'tracking-wide',
+      ],
+      small: [
+        'text-xs',
+        'font-medium',
+        'font-sans',
+        'leading-4',
+        'tracking-wide',
+      ],
+      xsmall: [
+        'text-xs',
+        'font-bold',
+        'font-sans',
+        'leading-4',
+        'tracking-wide',
+      ],
+      code: [
+        'text-sm',
+        'font-normal',
+        'font-mono',
+        'leading-5',
+        'tracking-normal',
+      ],
+    },
+
+    ellipsis: {
+      true: ['overflow-hidden', 'whitespace-nowrap', 'overflow-ellipsis'],
+    },
+
+    italic: {
+      true: ['italic'],
+    },
+
+    underline: {
+      true: ['underline'],
+    },
+
+    uppercase: {
+      true: ['uppercase'],
+    },
+
+    capitalize: {
+      true: ['capitalize'],
+    },
+
+    hidden: {
+      true: [
+        'border-0',
+        'clip',
+        'h-1',
+        'm-[-1px]',
+        'overflow-hidden',
+        'p-0',
+        'absolute',
+        'w-[1px]',
+      ],
+    },
+  },
+})

tailwind.config.ts

@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        body: ['Inter', 'system-ui', 'Roboto', '"Helvetica Neue"', 'Arial'],
+        sans: ['Inter', 'system-ui', 'Roboto', '"Helvetica Neue"', 'Arial'],
         mono: [
           '"iAWriter Mono"',
           'Menlo',
@@ -16,13 +16,20 @@ export default {
           'monospace',
         ],
       },
-      fontSize: {
-        xs: '0.625rem', // 10px
-        sm: '0.75rem', // 12px
-        base: '0.875rem', // 14px
-        lg: '1rem', // 16px
-        xl: '1.25rem', // 20px
-        '2xl': '1.875rem', // 30px
+      // fontSize: {
+      //   xs: '0.625rem', // 10px
+      //   sm: '0.75rem', // 12px
+      //   base: '0.875rem', // 14px
+      //   lg: '1rem', // 16px
+      //   xl: '1.25rem', // 20px
+      //   '2xl': '1.875rem', // 30px
+      // },
+
+      colors: {
+        info: '#3b82f6',
+        warning: '#f59e0b',
+        positive: '#10b981',
+        negative: '#ef4444',
       },
     },
   },