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

144
app/pages/events/index.vue
View file

@ -8,7 +8,7 @@
/>
<!-- Events Section with Tabs -->
<section class="bg-ghost-900 dark:bg-ghost-950">
<section class="bg-guild-900 dark:bg-guild-950">
<UContainer>
<UTabs
v-model="activeTab"
@ -51,7 +51,7 @@
<div
class="flex flex-col items-center md:items-start gap-2"
>
<label class="text-sm font-medium text-ghost-200">
<label class="text-sm font-medium text-guild-200">
Show past events?
</label>
<USwitch v-model="includePastEvents" />
@ -79,10 +79,10 @@
<template #panel="{ close }">
<div
class="bg-ghost-800 dark:bg-ghost-900 p-6 rounded-md shadow-lg w-80 space-y-4"
class="bg-guild-800 dark:bg-guild-900 p-6 rounded-md shadow-lg w-80 space-y-4"
>
<div class="space-y-2">
<label class="text-sm font-medium text-ghost-200">
<label class="text-sm font-medium text-guild-200">
Filter by category
</label>
<USelectMenu
@ -107,7 +107,7 @@
<!-- Search Status Message -->
<div v-if="isSearching" class="mt-6 text-center">
<p class="text-ghost-300 text-sm">
<p class="text-guild-300 text-sm">
{{
filteredEvents.length > 0
? `Found ${filteredEvents.length} event${
@ -129,10 +129,10 @@
class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
>
<div class="flex-shrink-0 text-center">
<div class="text-2xl font-bold text-ghost-100">
<div class="text-2xl font-bold text-guild-100">
{{ event.start.getDate() }}
</div>
<div class="text-xs text-ghost-400 uppercase">
<div class="text-xs text-guild-400 uppercase">
{{
event.start.toLocaleDateString("en-US", {
month: "short",
@ -144,7 +144,7 @@
<div class="flex-1 min-w-0">
<div class="flex items-start gap-2 mb-1">
<h3
class="text-lg font-semibold text-ghost-100 group-hover:text-primary transition-colors"
class="text-lg font-semibold text-guild-100 group-hover:text-primary transition-colors"
>
{{ event.title }}
</h3>
@ -155,7 +155,7 @@
/>
</div>
<p class="text-sm text-ghost-300 mb-2 line-clamp-2">
<p class="text-sm text-guild-300 mb-2 line-clamp-2">
{{ event.content }}
</p>
@ -171,7 +171,7 @@
<Icon
name="heroicons:arrow-right"
class="w-5 h-5 text-ghost-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
class="w-5 h-5 text-guild-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
/>
</NuxtLink>
</div>
@ -183,13 +183,13 @@
<ClientOnly>
<div
v-if="pending"
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-ghost-200">Loading calendar...</p>
<p class="text-guild-200">Loading calendar...</p>
</div>
</div>
<div v-else style="min-height: 600px">
@ -198,7 +198,7 @@
:events="calendarEvents"
:time="false"
active-view="month"
class="ghost-calendar"
class="guild-calendar"
:disable-views="['years', 'year']"
:hide-view-selector="false"
events-on-month-view="short"
@ -209,13 +209,13 @@
</div>
<template #fallback>
<div
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-ghost-200">Loading calendar...</p>
<p class="text-guild-200">Loading calendar...</p>
</div>
</div>
</template>
@ -229,7 +229,7 @@
<!-- Event Series -->
<div v-if="activeSeries.length > 0" class="text-center my-12">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
Current Event Series
</h2>
</div>
@ -242,17 +242,17 @@
v-for="series in activeSeries.slice(0, 6)"
:key="series.id"
:to="`/series/${series.id}`"
class="series-list-item block bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl p-6 border border-ghost-600 dark:border-ghost-600 hover:border-ghost-500 hover:bg-ghost-800/70 dark:hover:bg-ghost-700/50 transition-all duration-300"
class="series-list-item block bg-guild-800/50 dark:bg-guild-700/30 rounded-xl p-6 border border-guild-600 dark:border-guild-600 hover:border-guild-500 hover:bg-guild-800/70 dark:hover:bg-guild-700/50 transition-all duration-300"
>
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-2">
<span
class="series-list-item__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
class="series-list-item__label text-sm font-semibold text-guild-300 dark:text-guild-300"
>
Event Series
</span>
<span
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-ghost-700/50 dark:bg-ghost-600/50 text-sm font-medium text-ghost-200 dark:text-ghost-200"
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
>
{{ series.eventCount }} events
</span>
@ -272,13 +272,13 @@
</div>
<h3
class="series-list-item__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
class="series-list-item__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
{{ series.title }}
</h3>
<p
class="series-list-item__description text-sm text-ghost-300 dark:text-ghost-300 mb-4 line-clamp-2"
class="series-list-item__description text-sm text-guild-300 dark:text-guild-300 mb-4 line-clamp-2"
>
{{ series.description }}
</p>
@ -291,31 +291,31 @@
>
<div class="flex items-center gap-2">
<div
class="series-list-item__event-number w-6 h-6 bg-ghost-700/50 dark:bg-ghost-600/50 text-ghost-200 dark:text-ghost-200 rounded-full flex items-center justify-center text-xs font-medium border border-ghost-600 dark:border-ghost-500"
class="series-list-item__event-number w-6 h-6 bg-guild-700/50 dark:bg-guild-600/50 text-guild-200 dark:text-guild-200 rounded-full flex items-center justify-center text-xs font-medium border border-guild-600 dark:border-guild-500"
>
{{ event.series?.position || index + 1 }}
</div>
<span
class="series-list-item__event-title text-ghost-200 dark:text-ghost-200 truncate"
class="series-list-item__event-title text-guild-200 dark:text-guild-200 truncate"
>{{ event.title }}</span
>
</div>
<span
class="series-list-item__event-date text-ghost-300 dark:text-ghost-300"
class="series-list-item__event-date text-guild-300 dark:text-guild-300"
>
{{ formatEventDate(event.startDate) }}
</span>
</div>
<div
v-if="series.events.length > 3"
class="series-list-item__more-events text-xs text-ghost-300 dark:text-ghost-300 text-center pt-1"
class="series-list-item__more-events text-xs text-guild-300 dark:text-guild-300 text-center pt-1"
>
+{{ series.events.length - 3 }} more events
</div>
</div>
<div
class="series-list-item__date-range text-sm text-ghost-300 dark:text-ghost-300"
class="series-list-item__date-range text-sm text-guild-300 dark:text-guild-300"
>
{{ formatDateRange(series.startDate, series.endDate) }}
</div>
@ -323,27 +323,27 @@
</div>
<!-- Attend Our Events -->
<section class="py-20 bg-ghost-800 dark:bg-ghost-900">
<section class="py-20 bg-guild-800 dark:bg-guild-900">
<UContainer>
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
Attend Our Events
</h2>
</div>
<div class="max-w-4xl mx-auto">
<div
class="bg-ghost-900 rounded-2xl p-8 border border-ghost-700 mb-12"
class="bg-guild-900 rounded-2xl p-8 border border-guild-700 mb-12"
>
<div class="prose prose-lg dark:prose-invert max-w-none">
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
<p class="text-lg leading-relaxed text-guild-200 mb-6">
Our events bring together game developers, founders, and practitioners
who are building more equitable workplaces. From hands-on workshops
about governance and finance to casual co-working sessions and game nights,
there's something for every stage of your journey.
</p>
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
<p class="text-lg leading-relaxed text-guild-200 mb-6">
All events are designed to be accessible, with most offered free to members
and sliding-scale pricing for non-members. Can't make it live?
Many sessions are recorded and shared in our resource library.
@ -353,31 +353,31 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Monthly Meetups
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Casual knowledge sharing sessions
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Workshops
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Hands-on learning about cooperative and worker-centric business
models
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Social Events
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Game nights, socials, and more
</p>
</div>
@ -638,47 +638,47 @@ const getSeriesTypeBadgeClass = (type) => {
}
/* Calendar styling based on tranzac design principles */
.ghost-calendar :deep(.vuecal__event) {
.guild-calendar :deep(.vuecal__event) {
border-radius: 0.5rem;
border: 2px solid #292524;
transform: translateZ(0);
transition: transform 300ms;
}
.ghost-calendar :deep(.vuecal__event:hover) {
.guild-calendar :deep(.vuecal__event:hover) {
transform: scale(1.05);
}
.ghost-calendar :deep(.vuecal__event-title) {
.guild-calendar :deep(.vuecal__event-title) {
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ghost-calendar :deep(.vuecal__event-time) {
.guild-calendar :deep(.vuecal__event-time) {
display: none;
}
.ghost-calendar :deep(.vuecal__event.event-community) {
.guild-calendar :deep(.vuecal__event.event-community) {
background-color: #2563eb;
color: #f5f5f4;
border-color: #1d4ed8;
}
.ghost-calendar :deep(.vuecal__event.event-workshop) {
.guild-calendar :deep(.vuecal__event.event-workshop) {
background-color: #059669;
color: #f5f5f4;
border-color: #047857;
}
.ghost-calendar :deep(.vuecal__event.event-social) {
.guild-calendar :deep(.vuecal__event.event-social) {
background-color: #7c3aed;
color: #f5f5f4;
border-color: #6d28d9;
}
.ghost-calendar :deep(.vuecal__event.event-showcase) {
.guild-calendar :deep(.vuecal__event.event-showcase) {
background-color: #d97706;
color: #f5f5f4;
border-color: #b45309;
@ -829,7 +829,7 @@ const getSeriesTypeBadgeClass = (type) => {
}
/* Ghost calendar theme */
.ghost-calendar {
.guild-calendar {
--vuecal-primary-color: #fff;
--vuecal-text-color: #e7e5e4;
--vuecal-border-color: #57534e;
@ -838,120 +838,120 @@ const getSeriesTypeBadgeClass = (type) => {
background-color: #292524;
}
.ghost-calendar :deep(.vuecal__bg) {
.guild-calendar :deep(.vuecal__bg) {
background-color: #292524;
}
.ghost-calendar :deep(.vuecal__header) {
.guild-calendar :deep(.vuecal__header) {
background-color: #1c1917;
border-bottom: 1px solid #57534e;
}
.ghost-calendar :deep(.vuecal__title-bar) {
.guild-calendar :deep(.vuecal__title-bar) {
background-color: #1c1917;
}
.ghost-calendar :deep(.vuecal__title) {
.guild-calendar :deep(.vuecal__title) {
color: #e7e5e4;
font-weight: 600;
}
.ghost-calendar :deep(.vuecal__weekdays-headings) {
.guild-calendar :deep(.vuecal__weekdays-headings) {
background-color: #1c1917;
border-bottom: 1px solid #57534e;
}
.ghost-calendar :deep(.vuecal__heading) {
.guild-calendar :deep(.vuecal__heading) {
color: #a8a29e;
font-weight: 500;
}
.ghost-calendar :deep(.vuecal__cell) {
.guild-calendar :deep(.vuecal__cell) {
background-color: #292524;
border-color: #57534e;
color: #e7e5e4;
}
.ghost-calendar :deep(.vuecal__cell:hover) {
.guild-calendar :deep(.vuecal__cell:hover) {
background-color: #44403c;
border-color: #78716c;
}
.ghost-calendar :deep(.vuecal__cell-content) {
.guild-calendar :deep(.vuecal__cell-content) {
color: #e7e5e4;
}
.ghost-calendar :deep(.vuecal__cell--today) {
.guild-calendar :deep(.vuecal__cell--today) {
background-color: rgba(59, 130, 246, 0.1);
border: 2px solid #3b82f6;
}
.ghost-calendar :deep(.vuecal__cell--out-of-scope) {
.guild-calendar :deep(.vuecal__cell--out-of-scope) {
background-color: #1c1917;
color: #78716c;
}
.ghost-calendar :deep(.vuecal__arrow) {
.guild-calendar :deep(.vuecal__arrow) {
color: #a8a29e;
}
.ghost-calendar :deep(.vuecal__arrow:hover) {
.guild-calendar :deep(.vuecal__arrow:hover) {
background-color: #44403c;
}
.ghost-calendar :deep(.vuecal__today-btn) {
.guild-calendar :deep(.vuecal__today-btn) {
background-color: #44403c;
color: #fff;
border: 1px solid #78716c;
font-weight: 600;
}
.ghost-calendar :deep(.vuecal__today-btn:hover) {
.guild-calendar :deep(.vuecal__today-btn:hover) {
background-color: #57534e;
border-color: #a8a29e;
}
.ghost-calendar :deep(.vuecal__view-btn),
.ghost-calendar :deep(button[class*="view"]) {
.guild-calendar :deep(.vuecal__view-btn),
.guild-calendar :deep(button[class*="view"]) {
background-color: #44403c !important;
color: #ffffff !important;
border: 1px solid #78716c !important;
font-weight: 600 !important;
}
.ghost-calendar :deep(.vuecal__view-btn:hover),
.ghost-calendar :deep(button[class*="view"]:hover) {
.guild-calendar :deep(.vuecal__view-btn:hover),
.guild-calendar :deep(button[class*="view"]:hover) {
background-color: #57534e !important;
border-color: #a8a29e !important;
color: #ffffff !important;
}
.ghost-calendar :deep(.vuecal__view-btn--active),
.ghost-calendar :deep(button[class*="view"][class*="active"]) {
.guild-calendar :deep(.vuecal__view-btn--active),
.guild-calendar :deep(button[class*="view"][class*="active"]) {
background-color: #0c0a09 !important;
color: #ffffff !important;
border-color: #a8a29e !important;
}
.ghost-calendar :deep(.vuecal__view-btn--active:hover),
.ghost-calendar :deep(button[class*="view"][class*="active"]:hover) {
.guild-calendar :deep(.vuecal__view-btn--active:hover),
.guild-calendar :deep(button[class*="view"][class*="active"]:hover) {
background-color: #1c1917 !important;
border-color: #d6d3d1 !important;
color: #ffffff !important;
}
.ghost-calendar :deep(.vuecal__title-bar button) {
.guild-calendar :deep(.vuecal__title-bar button) {
color: #ffffff !important;
font-weight: 600 !important;
}
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn) {
.guild-calendar :deep(.vuecal__title-bar .default-view-btn) {
background-color: #44403c !important;
color: #ffffff !important;
border: 1px solid #78716c !important;
}
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
.guild-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
background-color: #0c0a09 !important;
border-color: #a8a29e !important;
}