From a69c9d9b49604997c04c96d1f7b6e5ff700b2618 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 29 Apr 2026 19:46:59 +0100
Subject: [PATCH] fix(uploads): replace phantom Tailwind palette with design
 tokens

Sibling sweep to dc2becf: NaturalDateInput.vue and ImageUpload.vue used
candlelight-/ember-/guild-* utility classes that aren't defined in the
project's Tailwind palette and rendered as no-ops. Swapped to inline
styles using --candle, --ember, --text-dim/faint/bright, --border,
--input-bg, --surface. Drag-state and parsed-date notices follow the
color-mix(... 15%) + 1px solid pattern from dc2becf.
---
 app/components/ImageUpload.vue      | 68 +++++++++++++++++++----------
 app/components/NaturalDateInput.vue | 14 +++---
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/app/components/ImageUpload.vue b/app/components/ImageUpload.vue
index 0b18cba..40cc0c0 100644
--- a/app/components/ImageUpload.vue
+++ b/app/components/ImageUpload.vue
@@ -5,14 +5,16 @@
       <img
         :src="transformedImageUrl"
         :alt="modelValue.alt || 'Event image'"
-        class="w-full h-48 object-cover rounded-lg border border-guild-700"
+        class="w-full h-48 object-cover"
+        style="border: 1px solid var(--border)"
         @error="console.log('Image failed to load:', transformedImageUrl)"
         @load="console.log('Image loaded successfully:', transformedImageUrl)"
-      />
+      >
       <button
-        @click="removeImage"
         type="button"
-        class="absolute top-2 right-2 p-1 bg-ember-500 text-white rounded-full hover:bg-ember-600 transition-colors"
+        class="absolute top-2 right-2 p-1 text-white rounded-full transition-colors"
+        style="background: var(--ember)"
+        @click="removeImage"
       >
         <Icon name="heroicons:x-mark" class="w-4 h-4" />
       </button>
@@ -21,67 +23,89 @@
     <!-- Upload Area -->
     <div
       v-if="!modelValue?.url"
-      class="border-2 border-dashed border-guild-700 rounded-lg p-6 text-center hover:border-guild-600 transition-colors"
+      class="border-2 border-dashed p-6 text-center transition-colors"
+      :style="
+        isDragging
+          ? 'border-color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent)'
+          : 'border-color: var(--border)'
+      "
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
       @drop.prevent="handleDrop"
-      :class="{ 'border-candlelight-400 bg-candlelight-900/20': isDragging }"
     >
       <input
         ref="fileInput"
         type="file"
         accept="image/*"
-        @change="handleFileSelect"
         class="hidden"
-      />
+        @change="handleFileSelect"
+      >
 
       <div class="space-y-3">
-        <Icon name="heroicons:photo" class="w-12 h-12 text-guild-400 mx-auto" />
+        <Icon
+          name="heroicons:photo"
+          class="w-12 h-12 mx-auto"
+          style="color: var(--text-dim)"
+        />
         <div>
-          <p class="text-guild-400">
+          <p style="color: var(--text-dim)">
             <button
               type="button"
+              class="font-medium"
+              style="color: var(--candle)"
               @click="$refs.fileInput.click()"
-              class="text-candlelight-400 hover:text-candlelight-300 font-medium"
             >
               Click to upload
             </button>
             or drag and drop
           </p>
-          <p class="text-sm text-guild-500">PNG, JPG, GIF up to 10MB</p>
+          <p class="text-sm" style="color: var(--text-faint)">
+            PNG, JPG, GIF up to 10MB
+          </p>
         </div>
       </div>
     </div>
 
     <!-- Alt Text Input -->
     <div v-if="modelValue?.url">
-      <label class="block text-sm font-medium text-guild-100 mb-1">
+      <label
+        class="block text-sm font-medium mb-1"
+        style="color: var(--text-bright)"
+      >
         Alt Text (for accessibility)
       </label>
       <input
         :value="modelValue.alt || ''"
-        @input="updateAltText($event.target.value)"
         placeholder="Describe this image..."
-        class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
-      />
+        class="w-full px-3 py-2"
+        style="
+          background: var(--input-bg);
+          border: 1px solid var(--border);
+          color: var(--text);
+        "
+        @input="updateAltText($event.target.value)"
+      >
     </div>
 
     <!-- Upload Progress -->
     <div v-if="isUploading" class="space-y-2">
       <div class="flex items-center justify-between text-sm">
-        <span class="text-guild-400">Uploading...</span>
-        <span class="text-guild-400">{{ uploadProgress }}%</span>
+        <span style="color: var(--text-dim)">Uploading...</span>
+        <span style="color: var(--text-dim)">{{ uploadProgress }}%</span>
       </div>
-      <div class="w-full bg-guild-800 rounded-full h-2">
+      <div
+        class="w-full rounded-full h-2"
+        style="background: var(--surface)"
+      >
         <div
-          class="bg-candlelight-600 h-2 rounded-full transition-all duration-300"
-          :style="`width: ${uploadProgress}%`"
+          class="h-2 rounded-full transition-all duration-300"
+          :style="`width: ${uploadProgress}%; background: var(--candle)`"
         />
       </div>
     </div>
 
     <!-- Error Message -->
-    <div v-if="errorMessage" class="text-sm text-ember-400">
+    <div v-if="errorMessage" class="text-sm" style="color: var(--ember)">
       {{ errorMessage }}
     </div>
   </div>
diff --git a/app/components/NaturalDateInput.vue b/app/components/NaturalDateInput.vue
index c2d1130..4e97e05 100644
--- a/app/components/NaturalDateInput.vue
+++ b/app/components/NaturalDateInput.vue
@@ -18,12 +18,14 @@
           <Icon
             v-if="isValidParse && naturalInput.trim()"
             name="heroicons:check-circle"
-            class="w-5 h-5 text-candlelight-500"
+            class="w-5 h-5"
+            style="color: var(--candle)"
           />
           <Icon
             v-else-if="hasError && naturalInput.trim()"
             name="heroicons:exclamation-circle"
-            class="w-5 h-5 text-ember-500"
+            class="w-5 h-5"
+            style="color: var(--ember)"
           />
         </template>
       </UInput>
@@ -31,7 +33,8 @@
 
     <div
       v-if="parsedDate && isValidParse"
-      class="text-sm text-candlelight-400 bg-candlelight-900/20 px-3 py-2 rounded-lg border border-candlelight-800"
+      class="text-sm px-3 py-2"
+      style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:calendar" class="w-4 h-4" />
@@ -41,7 +44,8 @@
 
     <div
       v-if="hasError && naturalInput.trim()"
-      class="text-sm text-ember-400 bg-ember-900/20 px-3 py-2 rounded-lg border border-ember-800"
+      class="text-sm px-3 py-2"
+      style="color: var(--ember); background: color-mix(in srgb, var(--ember) 15%, transparent); border: 1px solid var(--ember)"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:exclamation-triangle" class="w-4 h-4" />
@@ -51,7 +55,7 @@
 
     <!-- Fallback datetime-local input -->
     <details class="text-sm">
-      <summary class="cursor-pointer text-guild-400 hover:text-guild-100">
+      <summary class="cursor-pointer" style="color: var(--text-dim)">
         Use traditional date picker
       </summary>
       <div class="mt-2">