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

22
app/components/EventSeriesTicketCard.vue
View file

@ -1,6 +1,6 @@
<template>
<div
class="series-ticket-card border border-ghost-600 dark:border-ghost-600 rounded-xl overflow-hidden"
class="series-ticket-card border border-guild-600 dark:border-guild-600 rounded-xl overflow-hidden"
>
<!-- Header -->
<div
@ -39,27 +39,27 @@
</div>
<!-- Body -->
<div class="p-6 bg-ghost-800/50 dark:bg-ghost-700/30">
<div class="p-6 bg-guild-800/50 dark:bg-guild-700/30">
<!-- What's Included -->
<div class="mb-6">
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
What's Included
</h4>
<div class="space-y-2">
<div class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300">
<div class="flex items-center gap-2 text-guild-300 dark:text-guild-300">
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Access to all {{ totalEvents }} events in the series</span>
</div>
<div
v-if="ticket.isFree && !isMember"
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
>
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Automatic registration for all sessions</span>
</div>
<div
v-if="memberSavings > 0"
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
>
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Save {{ formatPrice(memberSavings, ticket.currency) }} as a member</span>
@ -69,14 +69,14 @@
<!-- Events List Preview -->
<div v-if="events && events.length > 0" class="mb-6">
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
Series Schedule
</h4>
<div class="space-y-2">
<div
v-for="(event, index) in events.slice(0, 3)"
:key="event.id"
class="flex items-start gap-3 p-3 bg-ghost-700/50 dark:bg-ghost-600/30 rounded-lg"
class="flex items-start gap-3 p-3 bg-guild-700/50 dark:bg-guild-600/30 rounded-lg"
>
<div
class="w-8 h-8 rounded-full bg-purple-600/20 border border-purple-500/30 flex items-center justify-center flex-shrink-0"
@ -84,17 +84,17 @@
<span class="text-sm font-bold text-purple-300">{{ index + 1 }}</span>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-ghost-100 dark:text-ghost-100 text-sm">
<div class="font-medium text-guild-100 dark:text-guild-100 text-sm">
{{ event.title }}
</div>
<div class="text-xs text-ghost-400 dark:text-ghost-400 mt-1">
<div class="text-xs text-guild-400 dark:text-guild-400 mt-1">
{{ formatEventDate(event.startDate) }}
</div>
</div>
</div>
<div
v-if="events.length > 3"
class="text-center text-sm text-ghost-400 dark:text-ghost-400 pt-2"
class="text-center text-sm text-guild-400 dark:text-guild-400 pt-2"
>
+ {{ events.length - 3 }} more event{{ events.length - 3 !== 1 ? 's' : '' }}
</div>