Write blazingly fast type-safe styles with ease

import { css, v } from '@/libs/boomer' with { type: 'macro' }

// Simple CSS function for one-off styles
const buttonClass = css({
  base: {
    padding: '0.5rem 1rem',
    backgroundColor: v('colors.primary'),
    color: 'white',
    borderRadius: '0.25rem'
  }
})

// CSS function with variants
const buttonWithVariants = css({
  base: {
    padding: '0.5rem 1rem',
    borderRadius: '0.25rem',
    cursor: 'pointer'
  },
  variants: {
    intent: {
      primary: {
        backgroundColor: v('colors.primary'),
        color: 'white'
      },
      secondary: {
        backgroundColor: 'transparent',
        border: `1px solid ${v('colors.primary')}`,
        color: v('colors.primary')
      }
    },
    size: {
      small: { fontSize: '0.875rem' },
      large: { fontSize: '1.125rem' }
    }
  }
})

// Usage:
// <button className={buttonClass()}>Click me</button>
// <button className={buttonWithVariants({ intent: 'primary', size: 'small' })}>Click me</button>