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

46
app/pages/members.vue
View file

@ -43,7 +43,7 @@
<!-- Skills Filter -->
<div v-if="availableSkills && availableSkills.length > 0">
<div class="flex flex-wrap gap-2">
<span class="text-sm text-ghost-400 mr-2 self-center"
<span class="text-sm text-guild-400 mr-2 self-center"
>Filter by skill:</span
>
<button
@ -57,7 +57,7 @@
:class="
selectedSkills.includes(skill)
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
: 'bg-gray-100 dark:bg-ghost-800/50 text-gray-700 dark:text-ghost-400 border-gray-300 dark:border-ghost-700 hover:border-gray-400 dark:hover:border-ghost-600'
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
"
@click="toggleSkill(skill)"
>
@ -81,7 +81,7 @@
<!-- Peer Support Topics Filter -->
<div v-if="availableTopics && availableTopics.length > 0">
<div class="flex flex-wrap gap-2">
<span class="text-sm text-ghost-400 mr-2 self-center"
<span class="text-sm text-guild-400 mr-2 self-center"
>Filter by peer support topic:</span
>
<button
@ -95,7 +95,7 @@
:class="
selectedTopics.includes(topic)
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
: 'bg-gray-100 dark:bg-ghost-800/50 text-gray-700 dark:text-ghost-400 border-gray-300 dark:border-ghost-700 hover:border-gray-400 dark:hover:border-ghost-600'
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
"
@click="toggleTopic(topic)"
>
@ -126,7 +126,7 @@
"
class="flex items-center gap-2 text-sm flex-wrap"
>
<span class="text-ghost-400">Active filters:</span>
<span class="text-guild-400">Active filters:</span>
<span
v-if="selectedCircle && selectedCircle !== 'all'"
class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
@ -173,13 +173,13 @@
<div
class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-ghost-400">Loading members...</p>
<p class="text-guild-400">Loading members...</p>
</div>
</div>
<!-- Members List -->
<div v-else-if="members.length > 0">
<div class="mb-4 text-ghost-400 text-sm">
<div class="mb-4 text-guild-400 text-sm">
{{ totalCount }} {{ totalCount === 1 ? "member" : "members" }} found
</div>
@ -187,7 +187,7 @@
<div
v-for="member in members"
:key="member._id"
class="relative backdrop-blur-sm bg-ghost-900/50 border border-ghost-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
>
<!-- Peer Support Sticker Badge -->
<PeerSupportBadge
@ -199,7 +199,7 @@
<div class="flex items-start gap-4 mb-4">
<!-- Avatar -->
<div
class="w-16 h-16 rounded-lg bg-ghost-800 border border-ghost-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
>
<img
v-if="member.avatar"
@ -207,16 +207,16 @@
:alt="member.name"
class="w-12 h-12 object-contain"
/>
<span v-else class="text-2xl text-ghost-600">👻</span>
<span v-else class="text-2xl text-guild-600">👻</span>
</div>
<!-- Name and Meta Info -->
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2 flex-wrap mb-2">
<h3 class="font-semibold text-lg text-ghost-100">
<h3 class="font-semibold text-lg text-guild-100">
{{ member.name }}
</h3>
<span v-if="member.pronouns" class="text-sm text-ghost-400">
<span v-if="member.pronouns" class="text-sm text-guild-400">
{{ member.pronouns }}
</span>
</div>
@ -227,13 +227,13 @@
>
{{ circleLabels[member.circle] }}
</span>
<span v-if="member.studio" class="text-sm text-ghost-400">
<span v-if="member.studio" class="text-sm text-guild-400">
{{ member.studio }}
</span>
<span v-if="member.location" class="text-sm text-ghost-500">
<span v-if="member.location" class="text-sm text-guild-500">
📍 {{ member.location }}
</span>
<span v-if="member.timeZone" class="text-sm text-ghost-500">
<span v-if="member.timeZone" class="text-sm text-guild-500">
🕐 {{ member.timeZone }}
</span>
</div>
@ -243,7 +243,7 @@
<!-- Bio -->
<div
v-if="member.bio"
class="mb-4 text-ghost-300 text-sm leading-relaxed prose prose-invert prose-sm max-w-none"
class="mb-4 text-guild-300 text-sm leading-relaxed prose prose-invert prose-sm max-w-none"
v-html="renderMarkdown(member.bio)"
></div>
@ -280,7 +280,7 @@
<!-- Personal Message -->
<div
v-if="member.peerSupport.personalMessage"
class="text-sm text-ghost-300 italic mb-2"
class="text-sm text-guild-300 italic mb-2"
>
"{{ member.peerSupport.personalMessage }}"
</div>
@ -288,7 +288,7 @@
<!-- Availability -->
<div
v-if="member.peerSupport.availability"
class="text-xs text-ghost-400 mb-2"
class="text-xs text-guild-400 mb-2"
>
Availability: {{ member.peerSupport.availability }}
</div>
@ -326,7 +326,7 @@
</h5>
<p
v-if="member.offering.description"
class="text-ghost-300 text-sm"
class="text-guild-300 text-sm"
>
{{ member.offering.description }}
</p>
@ -353,7 +353,7 @@
</h5>
<p
v-if="member.lookingFor.description"
class="text-ghost-300 text-sm"
class="text-guild-300 text-sm"
>
{{ member.lookingFor.description }}
</p>
@ -386,7 +386,7 @@
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
class="text-ghost-600"
class="text-guild-600"
>
<path
stroke-linecap="round"
@ -396,10 +396,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 members found
</h3>
<p class="text-ghost-400 mb-6">
<p class="text-guild-400 mb-6">
Try adjusting your search or filters
</p>
<UButton variant="outline" @click="clearAllFilters">