From 98d3610a08515956209fad868796fd78f268e57e Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 11 Apr 2026 15:40:36 +0100
Subject: [PATCH] fix(auth): rewrite wiki-login page against real design system

The page referenced phantom tokens (--color-guild-*, --color-candlelight-*,
--color-ember-400) that don't exist, leaving the card, input, and button
transparent with no borders. Rewrote the template and styles using the
real design system utilities (.dashed-box, .field, .btn-primary,
.section-label, .section-divider) and tokens (--candle, --ember, --bg,
--border, --text-*), plus semantic landmarks and aria-live status roles.
---
 app/pages/auth/wiki-login.vue | 268 +++++++++++++---------------------
 1 file changed, 105 insertions(+), 163 deletions(-)

diff --git a/app/pages/auth/wiki-login.vue b/app/pages/auth/wiki-login.vue
index 5f72eb3..a135fa2 100644
--- a/app/pages/auth/wiki-login.vue
+++ b/app/pages/auth/wiki-login.vue
@@ -23,7 +23,8 @@ async function sendMagicLink() {
     });
     sent.value = true;
   } catch (e: any) {
-    error.value = e?.data?.statusMessage || "Something went wrong. Please try again.";
+    error.value =
+      e?.data?.statusMessage || "Something went wrong. Please try again.";
   } finally {
     loading.value = false;
   }
@@ -31,37 +32,54 @@ async function sendMagicLink() {
 </script>
 
 <template>
-  <div class="wiki-login">
-    <div class="wiki-login-card">
-      <div class="wiki-login-header">
-        <span class="wiki-login-overline">Ghost Guild</span>
+  <main class="wiki-login">
+    <div class="dashed-box wiki-login-box">
+      <header class="wiki-login-header">
+        <p class="section-label">Ghost Guild</p>
         <h1 class="wiki-login-title">Wiki</h1>
-      </div>
+      </header>
 
-      <div class="wiki-login-divider" />
+      <hr class="section-divider" />
 
       <Transition name="wiki-fade" mode="out-in">
-        <form v-if="!sent" key="form" @submit.prevent="sendMagicLink" class="wiki-login-form">
-          <label for="email" class="wiki-login-label">Email address</label>
-          <input
-            id="email"
-            v-model="email"
-            type="email"
-            required
-            autocomplete="email"
-            placeholder="you@example.com"
-            class="wiki-login-input"
-            :disabled="loading"
-          />
+        <form
+          v-if="!sent"
+          key="form"
+          class="wiki-login-form"
+          @submit.prevent="sendMagicLink"
+        >
+          <div class="field">
+            <label for="email">Email address</label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              autocomplete="email"
+              placeholder="you@example.com"
+              :disabled="loading"
+            />
+          </div>
 
-          <p v-if="error" class="wiki-login-error">{{ error }}</p>
+          <p
+            v-if="error"
+            class="wiki-login-error"
+            role="alert"
+            aria-live="assertive"
+          >
+            {{ error }}
+          </p>
 
           <button
             type="submit"
+            class="btn btn-primary wiki-login-submit"
             :disabled="loading || !email"
-            class="wiki-login-button"
           >
-            <span v-if="loading" class="wiki-login-spinner" />
+            <span
+              v-if="loading"
+              class="wiki-login-spinner"
+              aria-hidden="true"
+            />
             {{ loading ? "Sending" : "Continue" }}
           </button>
 
@@ -70,187 +88,108 @@ async function sendMagicLink() {
           </p>
         </form>
 
-        <div v-else key="sent" class="wiki-login-sent">
-          <p class="wiki-login-sent-heading">Check your inbox</p>
+        <div
+          v-else
+          key="sent"
+          class="wiki-login-sent"
+          role="status"
+          aria-live="polite"
+        >
+          <h2 class="wiki-login-sent-heading">Check your inbox</h2>
           <p class="wiki-login-sent-detail">
             A sign-in link was sent to <strong>{{ email }}</strong>
           </p>
           <button
-            @click="sent = false; email = '';"
-            class="wiki-login-link"
+            class="wiki-login-reset"
+            @click="
+              sent = false;
+              email = '';
+            "
           >
             Try a different email
           </button>
         </div>
       </Transition>
     </div>
-  </div>
+  </main>
 </template>
 
 <style scoped>
 .wiki-login {
-  min-height: 100vh;
-  min-height: 100dvh;
   display: grid;
   place-items: center;
-  padding: 1.5rem;
-  background:
-    radial-gradient(ellipse at 30% 70%, rgba(184, 135, 58, 0.06) 0%, transparent 60%),
-    radial-gradient(ellipse at 70% 30%, rgba(178, 104, 64, 0.04) 0%, transparent 60%),
-    var(--color-guild-900);
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: var(--page-pad-y) var(--page-pad-x);
 }
 
-.dark .wiki-login {
-  background:
-    radial-gradient(ellipse at 30% 70%, rgba(224, 184, 110, 0.05) 0%, transparent 60%),
-    radial-gradient(ellipse at 70% 30%, rgba(218, 154, 114, 0.03) 0%, transparent 60%),
-    var(--color-guild-900);
-}
-
-.wiki-login-card {
+.wiki-login-box {
   width: 100%;
   max-width: 360px;
-  padding: 2.5rem 2rem 2rem;
-  background: var(--color-guild-800);
-  border: 1px solid var(--color-guild-700);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
-}
-
-.dark .wiki-login-card {
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.2),
-    0 8px 32px rgba(0, 0, 0, 0.3);
+  padding: 24px 28px;
 }
 
 .wiki-login-header {
   text-align: center;
 }
 
-.wiki-login-overline {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--color-guild-400);
-}
-
 .wiki-login-title {
-  font-family: var(--font-sans);
-  font-size: 2rem;
+  font-family: var(--font-display);
+  font-size: 32px;
   font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  color: var(--color-candlelight-400);
-  margin-top: 0.25rem;
-}
-
-.wiki-login-divider {
-  height: 1px;
-  background: linear-gradient(
-    to right,
-    transparent,
-    var(--color-guild-600),
-    transparent
-  );
-  margin: 1.5rem 0;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+  color: var(--candle);
+  margin: 0;
 }
 
 .wiki-login-form {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-}
-
-.wiki-login-label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-guild-300);
-}
-
-.wiki-login-input {
-  width: 100%;
-  padding: 0.625rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-guild-100);
-  background: var(--color-guild-900);
-  border: 1px solid var(--color-guild-600);
-  border-radius: 8px;
-  outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.wiki-login-input::placeholder {
-  color: var(--color-guild-500);
-}
-
-.wiki-login-input:focus {
-  border-color: var(--color-candlelight-500);
-  box-shadow: 0 0 0 3px rgba(184, 135, 58, 0.15);
-}
-
-.wiki-login-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  gap: 12px;
 }
 
 .wiki-login-error {
-  font-size: 0.8125rem;
-  color: var(--color-ember-400);
+  font-size: 13px;
+  color: var(--ember);
   margin: 0;
 }
 
-.wiki-login-button {
-  display: flex;
+.wiki-login-submit {
+  width: 100%;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.625rem 1rem;
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-guild-50);
-  background: var(--color-candlelight-500);
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s, transform 0.1s;
+  gap: 8px;
+  margin-top: 4px;
 }
 
-.wiki-login-button:hover:not(:disabled) {
-  background: var(--color-candlelight-400);
-}
-
-.wiki-login-button:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-.wiki-login-button:disabled {
+.wiki-login-submit:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
 .wiki-login-spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  border-top-color: white;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid color-mix(in srgb, var(--bg) 35%, transparent);
+  border-top-color: var(--bg);
   border-radius: 50%;
-  animation: wiki-spin 0.6s linear infinite;
+  animation: wiki-spin 0.7s linear infinite;
 }
 
 @keyframes wiki-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .wiki-login-hint {
-  font-size: 0.75rem;
-  color: var(--color-guild-500);
+  font-size: 11px;
+  color: var(--text-faint);
   text-align: center;
-  margin: 0;
+  margin: 4px 0 0;
 }
 
 .wiki-login-sent {
@@ -258,45 +197,48 @@ async function sendMagicLink() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
 }
 
 .wiki-login-sent-heading {
-  font-family: var(--font-sans);
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-guild-100);
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-bright);
   margin: 0;
 }
 
 .wiki-login-sent-detail {
-  font-size: 0.8125rem;
-  color: var(--color-guild-400);
+  font-size: 13px;
+  color: var(--text-dim);
   line-height: 1.5;
   margin: 0;
 }
 
 .wiki-login-sent-detail strong {
-  color: var(--color-guild-200);
+  color: var(--text-bright);
   font-weight: 600;
 }
 
-.wiki-login-link {
-  font-size: 0.8125rem;
-  color: var(--color-candlelight-500);
+.wiki-login-reset {
+  font-family: "Commit Mono", monospace;
+  font-size: 12px;
+  color: var(--candle);
   background: none;
   border: none;
-  cursor: pointer;
   padding: 0;
-  margin-top: 0.5rem;
+  margin-top: 4px;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
   transition: color 0.15s;
 }
 
-.wiki-login-link:hover {
-  color: var(--color-candlelight-400);
+.wiki-login-reset:hover {
+  color: var(--candle-dim);
 }
 
-/* Transition */
+/* State transition */
 .wiki-fade-enter-active,
 .wiki-fade-leave-active {
   transition: opacity 0.2s ease, transform 0.2s ease;