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

32
app/components/LoginModal.vue
View file

@ -5,12 +5,12 @@
:description="description"
:dismissible="dismissible"
:ui="{
content: 'bg-ghost-900 border border-ghost-700',
header: 'bg-ghost-900 border-b border-ghost-700',
body: 'bg-ghost-900',
footer: 'bg-ghost-900 border-t border-ghost-700',
title: 'text-ghost-100',
description: 'text-ghost-400',
content: 'bg-guild-900 border border-guild-700',
header: 'bg-guild-900 border-b border-guild-700',
body: 'bg-guild-900',
footer: 'bg-guild-900 border-t border-guild-700',
title: 'text-guild-100',
description: 'text-guild-400',
}"
>
<template #body>
@ -20,9 +20,9 @@
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:check-circle" class="w-10 h-10 text-green-400" />
</div>
<h3 class="text-lg font-semibold text-ghost-100 mb-2">Check your email</h3>
<p class="text-ghost-300">
We've sent a magic link to <strong class="text-ghost-100">{{ loginForm.email }}</strong>.
<h3 class="text-lg font-semibold text-guild-100 mb-2">Check your email</h3>
<p class="text-guild-300">
We've sent a magic link to <strong class="text-guild-100">{{ loginForm.email }}</strong>.
Click the link to sign in.
</p>
</div>
@ -37,16 +37,16 @@
class="w-full"
placeholder="your.email@example.com"
:ui="{
root: 'bg-ghost-800 border-ghost-600 text-ghost-100 placeholder-ghost-500',
root: 'bg-guild-800 border-guild-600 text-guild-100 placeholder-guild-500',
}"
/>
</UFormField>
<!-- Info Box -->
<div class="bg-ghost-800 border border-ghost-600 p-4 rounded-lg mb-6">
<div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
<div class="flex items-start gap-3">
<Icon name="heroicons:envelope" class="w-5 h-5 text-whisper-400 flex-shrink-0 mt-0.5" />
<p class="text-sm text-ghost-300">
<Icon name="heroicons:envelope" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
<p class="text-sm text-guild-300">
We'll send you a secure magic link. No password needed!
</p>
</div>
@ -73,12 +73,12 @@
</UForm>
<!-- Join Link -->
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-ghost-700">
<p class="text-ghost-400 text-sm pt-4">
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-guild-700">
<p class="text-guild-400 text-sm pt-4">
Don't have an account?
<NuxtLink
to="/join"
class="text-whisper-400 hover:text-whisper-300 font-medium"
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
@click="close"
>
Join Ghost Guild