110 lines
4.5 KiB
Vue
110 lines
4.5 KiB
Vue
<script setup>
|
||
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
||
|
||
const headings = [
|
||
{ tag: 'h1', label: 'h1. Heading', size: 'text-5xl', weight: 'font-light' },
|
||
{ tag: 'h2', label: 'h2. Heading', size: 'text-4xl', weight: 'font-light' },
|
||
{ tag: 'h3', label: 'h3. Heading', size: 'text-3xl', weight: 'font-normal' },
|
||
{ tag: 'h4', label: 'h4. Heading', size: 'text-2xl', weight: 'font-normal' },
|
||
{ tag: 'h5', label: 'h5. Heading', size: 'text-xl', weight: 'font-medium' },
|
||
{ tag: 'h6', label: 'h6. Heading', size: 'text-base',weight: 'font-medium' },
|
||
]
|
||
|
||
const weights = [
|
||
{ label: 'Light 300', class: 'font-light', value: 300 },
|
||
{ label: 'Regular 400',class: 'font-normal', value: 400 },
|
||
{ label: 'Medium 500', class: 'font-medium', value: 500 },
|
||
{ label: 'Bold 700', class: 'font-bold', value: 700 },
|
||
{ label: 'Black 900', class: 'font-black', value: 900 },
|
||
]
|
||
|
||
const colors = [
|
||
{ label: 'Primary', class: 'text-primary' },
|
||
{ label: 'Secondary', class: 'text-secondary' },
|
||
{ label: 'Success', class: 'text-success' },
|
||
{ label: 'Warning', class: 'text-warning' },
|
||
{ label: 'Danger', class: 'text-danger' },
|
||
{ label: 'Info', class: 'text-info' },
|
||
{ label: 'Dark', class: 'text-dark' },
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<DashboardLayout>
|
||
<div class="grid gap-6 lg:grid-cols-2">
|
||
|
||
<!-- Headings -->
|
||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||
<h6 class="mb-1 text-sm font-bold text-dark">Headings</h6>
|
||
<p class="mb-6 text-xs text-secondary">Roboto Variable — font-light through font-medium</p>
|
||
<div class="space-y-3">
|
||
<component
|
||
:is="h.tag"
|
||
v-for="h in headings"
|
||
:key="h.tag"
|
||
:class="[h.size, h.weight, 'text-dark leading-tight']"
|
||
>
|
||
{{ h.label }}
|
||
</component>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Font weights -->
|
||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||
<h6 class="mb-1 text-sm font-bold text-dark">Font Weights</h6>
|
||
<p class="mb-6 text-xs text-secondary">Roboto Variable covers 100–900 in a single file</p>
|
||
<div class="space-y-4">
|
||
<div v-for="w in weights" :key="w.value">
|
||
<p class="mb-0.5 text-xs text-secondary">{{ w.label }}</p>
|
||
<p class="text-xl text-dark" :class="w.class">
|
||
The quick brown fox jumps over the lazy dog
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body & UI text -->
|
||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||
<h6 class="mb-1 text-sm font-bold text-dark">Body & UI Text</h6>
|
||
<p class="mb-6 text-xs text-secondary">Scale used across components</p>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<p class="mb-1 text-xs text-secondary">text-base (1rem) — body</p>
|
||
<p class="text-base text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||
</div>
|
||
<div>
|
||
<p class="mb-1 text-xs text-secondary">text-sm (0.875rem) — UI labels</p>
|
||
<p class="text-sm text-dark">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||
</div>
|
||
<div>
|
||
<p class="mb-1 text-xs text-secondary">text-xs (0.75rem) — captions, meta</p>
|
||
<p class="text-xs text-secondary">Design systems give teams a shared language for building consistent, scalable products.</p>
|
||
</div>
|
||
<div>
|
||
<p class="mb-1 text-xs text-secondary">Inline elements</p>
|
||
<p class="text-sm text-dark">
|
||
Regular text with <strong>bold emphasis</strong>, <em>italic style</em>,
|
||
and <code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">inline code</code> fragments.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Text colors -->
|
||
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
||
<h6 class="mb-1 text-sm font-bold text-dark">Semantic Text Colors</h6>
|
||
<p class="mb-6 text-xs text-secondary">All map to @theme --color-* tokens</p>
|
||
<div class="space-y-3">
|
||
<div v-for="c in colors" :key="c.label" class="flex items-center gap-4">
|
||
<span class="w-20 shrink-0 text-xs text-secondary">{{ c.label }}</span>
|
||
<p class="text-sm font-medium" :class="c.class">
|
||
The quick brown fox jumps over the lazy dog
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</DashboardLayout>
|
||
</template>
|