You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.7 KiB
99 lines
3.7 KiB
---
|
|
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>
|