unocss.config.ts

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  shortcuts: {
    'flex-center': 'flex justify-center items-center',
    'flex-col-center': 'flex-center flex-col',
    'page': 'w-full p-2 md:p-4 grid grid-cols-12 gap-2 md:gap-4 align-start',
    'bg-base': 'bg-zinc-50 dark:bg-zinc-900',
    'bg-surface': 'bg-zinc-100 dark:bg-zinc-800',
    'bg-element': 'bg-zinc-900/5 dark:bg-white/5',
    'bg-element-active': 'bg-zinc-900/10 dark:bg-white/10',
    'bg-action': 'bg-zinc-900/10 dark:bg-white/10',
    'bg-contrast': 'bg-zinc-900 dark:bg-zinc-100',
    'border-light': 'border-zinc-900/5 dark:border-zinc-200/5',
    'border-base': 'border-zinc-900/10 dark:border-zinc-200/10',
    'border-highlight': 'border-zinc-900/20 dark:border-zinc-200/20',
    'radius-base': 'rounded-xl',
    'text-base': 'text-zinc-900 dark:text-zinc-200',
    'text-dim': 'text-zinc-900/70 dark:text-zinc-200/60',
    'text-faint': 'text-zinc-900/40 dark:text-zinc-200/30',
    'text-gradient-yellow': 'bg-gradient-to-r from-yellow-600 to-yellow-400 text-transparent bg-clip-text',
    'text-gradient-yellow-rose': 'bg-gradient-to-r from-yellow-400 to-rose-400 text-transparent bg-clip-text',
    'text-gradient-purple': 'bg-gradient-to-r from-purple-600 to-purple-400 text-transparent bg-clip-text',
    'text-gradient-green': 'bg-gradient-to-r from-green-600 to-green-400 text-transparent bg-clip-text',
    'text-address': 'self-start font-mono',
    'text-value': 'self-start font-mono',
    'text-currency': 'self-start text-value text-faint',
    'panel': 'p-2 md:p-4 bg-base rounded-lg md:rounded-xl',
    'panel-title': 'm-0 text-xl text-faint leading-tight',
    'btn': 'flex justify-center items-center h-10 min-w-10 text-base border-0 radius-base box-border cursor-pointer decoration-none select-none',
    'btn-sm': 'btn h-8 min-w-8 text-sm rounded-lg',
    'btn-xs': 'btn h-6 min-w-6 text-xs rounded-md',
    'btn-transparent': 'btn bg-transparent hover:bg-element-active border-1 border-red-500',
    'btn-default': 'btn bg-element hover:bg-element-active',
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetTypography(),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})