From 350d6c219c6625910bcecc796c61ef7221df01a5 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 29 Apr 2026 20:22:30 +0100
Subject: [PATCH] fix(series): replace phantom guild Tailwind on
 EventSeriesBadge

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.
---
 app/components/EventSeriesBadge.vue | 39 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/components/EventSeriesBadge.vue b/app/components/EventSeriesBadge.vue
index a8b23a0..6b9252a 100644
--- a/app/components/EventSeriesBadge.vue
+++ b/app/components/EventSeriesBadge.vue
@@ -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>