jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(series): replace phantom guild Tailwind on EventSeriesBadge

Browse source 
Swap bg-guild-*/border-guild-*/text-guild-* utility classes for design tokens
in a scoped style block. Drops rounded-* per the no-rounded-corners rule and
uses dashed borders for the structural block per the zine spec.
This commit is contained in:
Jennie Robinson Faber 2026-04-29 20:22:30 +01:00
parent 05c47c4499
commit 350d6c219c
1 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/components/EventSeriesBadge.vue
View file

@ -1,18 +1,14 @@
<template>
<div
class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
>
<div class="series-badge p-4">
<div class="flex items-start justify-between gap-6">
<div class="flex-1 min-w-0">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span
class="series-badge__label text-sm font-semibold text-guild-300 dark:text-guild-300"
>
<span class="series-badge__label text-sm font-semibold">
Part of a Series
</span>
<span
v-if="totalEvents"
class="series-badge__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"
class="series-badge__count inline-flex items-center px-2 py-0.5 text-sm font-medium"
>
<template v-if="position">
Event {{ position }} of {{ totalEvents }}
@ -20,15 +16,10 @@
<template v-else> {{ totalEvents }} events in series </template>
</span>
</div>
<h3
class="series-badge__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
<h3 class="series-badge__title text-lg font-semibold mb-2">
{{ title }}
</h3>
<p
v-if="description"
class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
>
<p v-if="description" class="series-badge__description text-sm">
{{ description }}
</p>
</div>
@ -68,3 +59,23 @@ const props = defineProps({
},
});
</script>
<style scoped>
.series-badge {
background: var(--surface);
border: 1px dashed var(--border);
}
.series-badge__label {
color: var(--text-dim);
}
.series-badge__count {
background: color-mix(in srgb, var(--candle) 12%, transparent);
color: var(--text);
}
.series-badge__title {
color: var(--text-bright);
}
.series-badge__description {
color: var(--text-dim);
}
</style>