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/PageHeader.vue
View file

@ -26,8 +26,8 @@
v-if="showInteractiveArea"
:class="[
'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
props.theme === 'ethereal'
? 'bg-ghost-800/60 border border-ghost-700 ethereal-glow halftone-texture'
props.theme === 'guild'
? 'bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture'
: 'bg-[--ui-bg-elevated] shadow-xl border border-blue-200',
]"
>
@ -35,8 +35,8 @@
<button
:class="[
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
props.theme === 'guild'
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('prev')"
@ -61,8 +61,8 @@
<p
:class="[
'text-base md:text-lg',
props.theme === 'ethereal'
? 'text-ghost-200'
props.theme === 'guild'
? 'text-guild-200'
: 'text-[--ui-text-muted]',
]"
>
@ -77,8 +77,8 @@
<button
:class="[
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
props.theme === 'guild'
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('next')"
@ -137,7 +137,7 @@ const props = defineProps({
type: String,
default: "blue",
validator: (value) =>
["blue", "purple", "emerald", "gray", "ethereal"].includes(value),
["blue", "purple", "emerald", "gray", "guild"].includes(value),
},
size: {
type: String,
@ -182,8 +182,8 @@ const backgroundClass = computed(() => {
purple: "bg-gradient-to-br from-purple-50 to-violet-100",
emerald: "bg-gradient-to-br from-emerald-50 to-teal-100",
gray: "bg-neutral-100",
ethereal:
"bg-gradient-to-br from-ghost-900 via-ghost-800 to-whisper-900 halftone-texture",
guild:
"bg-gradient-to-br from-guild-900 via-guild-800 to-candlelight-900 halftone-texture",
};
return themes[props.theme] || themes.blue;
});