---
title: UI Components Test
---

<script setup lang="ts">
const variants = ['default', 'secondary', 'outline', 'ghost', 'destructive', 'link'] as const
</script>

<template>
  <div class="min-h-screen bg-background p-8">
    <h1 class="font-display text-4xl mb-8" style="color: var(--color-ink);">
      shadcn-vue Theming Test
    </h1>

    <!-- Button Variants -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold mb-4">Buttons</h2>
      <div class="flex flex-wrap gap-4">
        <UiButton v-for="variant in variants" :key="variant" :variant="variant">
          {{ variant }}
        </UiButton>
      </div>
      <div class="flex flex-wrap gap-4 mt-4">
        <UiButton size="sm">Small</UiButton>
        <UiButton size="default">Default</UiButton>
        <UiButton size="lg">Large</UiButton>
        <UiButton size="icon">🔍</UiButton>
      </div>
    </section>

    <!-- Card -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold mb-4">Cards</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <UiCard>
          <UiCardHeader>
            <UiCardTitle>Feature Card</UiCardTitle>
            <UiCardDescription>Surface card background</UiCardDescription>
          </UiCardHeader>
          <UiCardContent>
            <p class="text-sm">This card uses the design system's surface-card color.</p>
          </UiCardContent>
          <UiCardFooter>
            <UiButton size="sm">Learn More</UiButton>
          </UiCardFooter>
        </UiCard>

        <UiCard class="bg-surface-dark text-on-dark">
          <UiCardHeader>
            <UiCardTitle>Dark Card</UiCardTitle>
            <UiCardDescription>Surface dark background</UiCardDescription>
          </UiCardHeader>
          <UiCardContent>
            <p class="text-sm">This uses surface-dark background with on-dark text.</p>
          </UiCardContent>
          <UiCardFooter>
            <UiButton size="sm" variant="secondary">Learn More</UiButton>
          </UiCardFooter>
        </UiCard>

        <UiCard>
          <UiCardHeader>
            <UiCardTitle>Primary Card</UiCardTitle>
            <UiCardDescription>With primary accent</UiCardDescription>
          </UiCardHeader>
          <UiCardContent>
            <p class="text-sm">Primary button inside a card.</p>
          </UiCardContent>
          <UiCardFooter>
            <UiButton size="sm" variant="default">Get Started</UiButton>
          </UiCardFooter>
        </UiCard>
      </div>
    </section>

    <!-- Colors Grid -->
    <section>
      <h2 class="text-xl font-semibold mb-4">Design System Colors</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 rounded-lg" style="background-color: var(--color-canvas);">
          <span class="text-sm font-medium">Canvas</span>
          <p class="text-xs text-muted-foreground">#faf9f5</p>
        </div>
        <div class="p-4 rounded-lg" style="background-color: var(--color-surface-card);">
          <span class="text-sm font-medium">Surface Card</span>
          <p class="text-xs text-muted-foreground">#efe9de</p>
        </div>
        <div class="p-4 rounded-lg" style="background-color: var(--color-primary);">
          <span class="text-sm font-medium" style="color: var(--color-on-primary);">Primary</span>
          <p class="text-xs" style="color: var(--color-on-primary);">#cc785c</p>
        </div>
        <div class="p-4 rounded-lg" style="background-color: var(--color-surface-dark);">
          <span class="text-sm font-medium" style="color: var(--color-on-dark);">Surface Dark</span>
          <p class="text-xs" style="color: var(--color-on-dark-soft);">#181715</p>
        </div>
      </div>
    </section>
  </div>
</template>