Overriding styles

import { uv } from 'unocss-variants';

const button = uv({
  base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700',
      error: 'bg-red-500 hover:bg-red-700'
    }
  }
});

button({
  color: 'secondary',
  class: 'bg-pink-500 hover:bg-pink-500' // overrides the color variant
});

/**
 * Result:
 * font-semibold text-white py-1 px-3 rounded-full active:opacity-80 bg-pink-500 hover:bg-pink-500
 */

<script setup>
import { uv } from 'unocss-variants';

const card = uv({
  slots: {
    base: 'md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-gray-900',
    avatar:
      'w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto drop-shadow-lg',
    wrapper: 'flex-1 pt-6 md:p-8 text-center md:text-left space-y-4',
    description: 'text-md font-medium',
    infoWrapper: 'font-medium',
    name: 'text-sm text-sky-500 dark:text-sky-400',
    role: 'text-sm text-slate-700 dark:text-slate-500'
  }
});

const { base, avatar, wrapper, description, infoWrapper, name, role } = card();
</script>

<template>
  <figure :class="base({ class: 'bg-purple-100 dark:bg-purple-800' })">
    <img
      :class="avatar()"
      src="/intro-avatar.png"
      alt=""
      width="384"
      height="512"
    >
    <div :class="wrapper()">
      <blockquote>
        <p :class="description()">
          “UnoCSS variants allows you to reduce repeated code in your project
          and make it more readable. They fixed the headache of building a
          design system with UnoCSS.”
        </p>
      </blockquote>
      <figcaption :class="infoWrapper()">
        <div
          :class="name({ class: 'text-purple-500 dark:text-purple-200' })"
        >
          Zoey Lang
        </div>
        <div :class="role({ class: 'dark:text-purple-100' })">
          Full-stack developer, HeroUI
        </div>
      </figcaption>
    </div>
  </figure>
</template>