jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

28
app/components/AppNavigation.vue
View file

@ -3,13 +3,13 @@
:class="[
isMobile
? 'w-full flex flex-col bg-transparent'
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-ghost-900 border-r border-ghost-700',
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-guild-900 border-r border-guild-700',
]"
>
<!-- Logo/Brand at top (desktop only) -->
<div v-if="!isMobile" class="p-8 border-b border-ghost-700 bg-primary-500">
<div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-primary-500">
<NuxtLink to="/" class="flex flex-col items-center gap-3 group">
<span class="text-xl font-bold text-white ethereal-text tracking-wider"
<span class="text-xl font-bold text-white warm-text tracking-wider"
>Ghost Guild Logo</span
>
</NuxtLink>
@ -31,8 +31,8 @@
<!-- Hover indicator -->
<span
class="text-ghost-200 hover:text-ghost-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:ethereal-text"
active-class="text-ghost-100 ethereal-text translate-x-2"
class="text-guild-200 hover:text-guild-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:warm-text"
active-class="text-guild-100 warm-text translate-x-2"
>
{{ item.label }}
</span>
@ -41,12 +41,12 @@
</ul>
<!-- Contact Email -->
<div class="mt-8 pt-6 border-t border-ghost-800/50">
<p class="text-ghost-500 text-xs">
<div class="mt-8 pt-6 border-t border-guild-800/50">
<p class="text-guild-500 text-xs">
Contact us:
<a
href="mailto:hello@ghostguild.org"
class="text-ghost-400 hover:text-ghost-300 transition-colors"
class="text-guild-400 hover:text-guild-300 transition-colors"
>hello@ghostguild.org</a
>
</p>
@ -61,30 +61,30 @@
<div
:class="
isMobile
? 'mt-8 pt-6 border-t border-ghost-800/50'
: 'mt-12 pt-8 border-t border-ghost-800/50'
? 'mt-8 pt-6 border-t border-guild-800/50'
: 'mt-12 pt-8 border-t border-guild-800/50'
"
>
<div v-if="isAuthenticated" class="space-y-4">
<NuxtLink
to="/member/dashboard"
class="block text-ghost-300 hover:text-ghost-100 hover:ethereal-text transition-all duration-300 py-2"
class="block text-guild-300 hover:text-guild-100 hover:warm-text transition-all duration-300 py-2"
@click="handleNavigate"
>
<span class="block text-sm text-whisper-400 mb-1">{{
<span class="block text-sm text-candlelight-400 mb-1">{{
memberData?.name || "Member"
}}</span>
Dashboard
</NuxtLink>
<button
@click="handleLogout"
class="text-ghost-500 hover:text-ghost-300 transition-all duration-300 text-sm"
class="text-guild-500 hover:text-guild-300 transition-all duration-300 text-sm"
>
Logout
</button>
</div>
<div v-else class="space-y-4">
<p class="text-ghost-400 text-sm mb-4">
<p class="text-guild-400 text-sm mb-4">
Enter your email to receive a login link
</p>