Migrate design system from ethereal/cool to warm/craft/guild theme

Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
Jennie Robinson Faber 2026-02-24 20:01:11 +00:00
parent d588c49946
commit a62e167876
39 changed files with 1300 additions and 2087 deletions

View file

@ -11,8 +11,8 @@
<UContainer class="px-4">
<!-- Stats -->
<div v-if="isAuthenticated && !pending" class="mb-8 flex items-center justify-between">
<div class="text-ghost-300">
<span class="text-2xl font-bold text-ghost-100">{{ total }}</span>
<div class="text-guild-300">
<span class="text-2xl font-bold text-guild-100">{{ total }}</span>
{{ total === 1 ? "update" : "updates" }} posted
</div>
<UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
@ -25,9 +25,9 @@
>
<div class="text-center">
<div
class="w-8 h-8 border-4 border-ghost-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
class="w-8 h-8 border-4 border-guild-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-ghost-400">Loading your updates...</p>
<p class="text-guild-400">Loading your updates...</p>
</div>
</div>
@ -37,11 +37,11 @@
class="flex justify-center items-center py-20"
>
<div class="text-center max-w-md">
<div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
<div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
</div>
<h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
<p class="text-ghost-400 mb-6">Please sign in to view your updates.</p>
<h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
<p class="text-guild-400 mb-6">Please sign in to view your updates.</p>
<UButton @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })">
Sign In
</UButton>
@ -79,7 +79,7 @@
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
class="text-ghost-600"
class="text-guild-600"
>
<path
stroke-linecap="round"
@ -89,10 +89,10 @@
/>
</svg>
</div>
<h3 class="text-lg font-medium text-ghost-300 mb-2">
<h3 class="text-lg font-medium text-guild-300 mb-2">
No updates yet
</h3>
<p class="text-ghost-400 mb-6">
<p class="text-guild-400 mb-6">
Share your first update with the community
</p>
<UButton to="/updates/new" icon="i-lucide-plus">