got a basic dashboard going

2026-06-01 16:30:02 -06:00
parent e5e45043a8
commit 1d00b8e171
14 changed files with 753 additions and 58 deletions
@@ -0,0 +1,109 @@
+<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>