@cat-factory/app 0.302.2 → 0.303.0

package/app/components/testing/TestReportWindow.vue

@@ -145,13 +145,17 @@ const STATUS_META = computed<
 >(() => ({
   passed: {
     icon: 'i-lucide-circle-check',
-    text: 'text-emerald-400',
+    text: 'text-app-success-400',
     label: t('testing.status.passed'),
   },
-  failed: { icon: 'i-lucide-circle-x', text: 'text-rose-400', label: t('testing.status.failed') },
+  failed: {
+    icon: 'i-lucide-circle-x',
+    text: 'text-app-error-400',
+    label: t('testing.status.failed'),
+  },
   skipped: {
     icon: 'i-lucide-circle-minus',
-    text: 'text-slate-500',
+    text: 'text-dimmed',
     label: t('testing.status.skipped'),
   },
 }))
@@ -167,10 +171,18 @@ const SEVERITY_LABELS = computed<Record<TestConcern['severity'], string>>(() =>
 
 const SEVERITY_META: Record<TestConcern['severity'], { text: string; chip: string; rank: number }> =
   {
-    critical: { text: 'text-rose-300', chip: 'bg-rose-500/15 text-rose-300', rank: 0 },
-    high: { text: 'text-rose-300', chip: 'bg-rose-500/15 text-rose-300', rank: 1 },
-    medium: { text: 'text-amber-300', chip: 'bg-amber-500/15 text-amber-300', rank: 2 },
-    low: { text: 'text-slate-300', chip: 'bg-slate-500/15 text-slate-300', rank: 3 },
+    critical: {
+      text: 'text-app-error-300',
+      chip: 'bg-app-error-500/15 text-app-error-300',
+      rank: 0,
+    },
+    high: { text: 'text-app-error-300', chip: 'bg-app-error-500/15 text-app-error-300', rank: 1 },
+    medium: {
+      text: 'text-app-warning-300',
+      chip: 'bg-app-warning-500/15 text-app-warning-300',
+      rank: 2,
+    },
+    low: { text: 'text-toned', chip: 'bg-app-500/15 text-toned', rank: 3 },
   }
 
 /** Case-insensitive "these two labels refer to the same thing" heuristic. */
@@ -318,11 +330,11 @@ function toggle(key: string) {
 }
 
 const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: string }> = {
-  passed: { icon: 'i-lucide-circle-check', text: 'text-emerald-400' },
-  failed: { icon: 'i-lucide-circle-x', text: 'text-rose-400' },
-  skipped: { icon: 'i-lucide-circle-minus', text: 'text-slate-500' },
-  mixed: { icon: 'i-lucide-circle-dot', text: 'text-amber-400' },
-  empty: { icon: 'i-lucide-circle-dashed', text: 'text-slate-500' },
+  passed: { icon: 'i-lucide-circle-check', text: 'text-app-success-400' },
+  failed: { icon: 'i-lucide-circle-x', text: 'text-app-error-400' },
+  skipped: { icon: 'i-lucide-circle-minus', text: 'text-dimmed' },
+  mixed: { icon: 'i-lucide-circle-dot', text: 'text-app-warning-400' },
+  empty: { icon: 'i-lucide-circle-dashed', text: 'text-dimmed' },
 }
 </script>
 
@@ -330,7 +342,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
   <ResultWindowShell
     :open="open"
     icon="i-lucide-flask-conical"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="headerTitle"
     :subtitle="t('testing.subtitle')"
     :step-ref="{ instanceId, stepIndex }"
@@ -349,7 +361,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
       </UBadge>
       <span
         v-if="testState && testState.attempts > 0"
-        class="text-[11px] text-slate-400"
+        class="text-[11px] text-muted"
         :title="t('testing.fixerAttempts')"
       >
         {{ t('testing.fixCount', { attempts: testState.attempts, max: testState.maxAttempts }) }}
@@ -372,7 +384,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           data-testid="tester-infrastructure"
           class="space-y-3"
         >
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.infrastructure') }}
           </h3>
           <StepContainerStatus :step="step" :run-failed="runFailed" :run-active="runActive" />
@@ -392,20 +404,20 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
             class="rounded-lg border px-3 py-2"
             :class="
               infraSetup.started
-                ? 'border-slate-800 bg-slate-900/60'
-                : 'border-rose-500/40 bg-rose-500/10'
+                ? 'border-default bg-default/60'
+                : 'border-app-error-500/40 bg-app-error-500/10'
             "
           >
             <div class="flex items-center gap-2">
               <UIcon
                 :name="infraSetup.started ? 'i-lucide-container' : 'i-lucide-circle-x'"
                 class="h-3.5 w-3.5 shrink-0"
-                :class="infraSetup.started ? 'text-emerald-400' : 'text-rose-400'"
+                :class="infraSetup.started ? 'text-app-success-400' : 'text-app-error-400'"
               />
-              <span class="text-[13px] font-medium text-slate-200">
+              <span class="text-[13px] font-medium text-default">
                 {{ standupHeadline }}
               </span>
-              <span v-if="infraSetup.durationMs != null" class="ms-auto text-[11px] text-slate-500">
+              <span v-if="infraSetup.durationMs != null" class="ms-auto text-[11px] text-dimmed">
                 {{
                   t('testing.standup.took', {
                     seconds: n(infraSetup.durationMs / 1000, 'decimal'),
@@ -413,12 +425,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 }}
               </span>
             </div>
-            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-[11px] text-slate-500">
+            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-[11px] text-dimmed">
               {{ infraSetup.composePath }}
             </p>
             <p
               v-if="infraSetup.error"
-              class="mt-1 text-[12px] leading-snug text-rose-300"
+              class="mt-1 text-[12px] leading-snug text-app-error-300"
               data-testid="tester-infra-setup-error"
             >
               {{ infraSetup.error }}
@@ -443,7 +455,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <pre
                 v-if="showInfraSetupLogs"
                 data-testid="tester-infra-setup-logs"
-                class="mt-2 max-h-64 overflow-auto rounded bg-slate-950/70 p-2 font-mono text-[11px] leading-relaxed text-slate-300"
+                class="mt-2 max-h-64 overflow-auto rounded bg-app-950/70 p-2 font-mono text-[11px] leading-relaxed text-toned"
                 >{{ infraSetup.logs }}</pre>
             </template>
           </div>
@@ -455,9 +467,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <div
             v-if="infraReady"
             data-testid="tester-env-ready"
-            class="flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-[13px] text-emerald-200"
+            class="flex items-center gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2 text-[13px] text-app-success-200"
           >
-            <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0 text-emerald-400" />
+            <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0 text-app-success-400" />
             <span>{{ t('testing.readyBanner') }}</span>
           </div>
 
@@ -492,7 +504,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                  how it ended), so the otherwise-opaque fixer sub-jobs have a surface — the
                  analogue of the polling gate's attempt history. -->
         <section v-if="fixerAttempts.length" data-testid="tester-fixer-attempts" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.fixerAttempts') }}
           </h3>
           <ol class="space-y-2">
@@ -500,7 +512,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               v-for="a in fixerAttempts"
               :key="a.attempt"
               data-testid="tester-fixer-attempt"
-              class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+              class="rounded-lg border border-default bg-default/60 px-3 py-2"
             >
               <AttemptEntryHeader
                 :label="t('testing.fixerTimeline.attempt', { n: a.attempt })"
@@ -512,22 +524,24 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 "
                 :at="a.at"
                 :icon="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
-                :icon-class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
+                :icon-class="
+                  a.outcome === 'completed' ? 'text-app-warning-300' : 'text-app-error-400'
+                "
               />
               <MarkdownProse
                 v-if="a.summary"
                 :text="a.summary"
-                class="mt-1 max-w-3xl text-[12px] leading-snug text-slate-400"
+                class="mt-1 max-w-3xl text-[12px] leading-snug text-muted"
               />
               <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
-                <p class="text-[11px] text-slate-500">
+                <p class="text-[11px] text-dimmed">
                   {{ t('testing.fixerTimeline.addressed') }}
                 </p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(c, ci) in a.concerns"
                     :key="`fa${a.attempt}-c${ci}`"
-                    class="flex items-center gap-1.5 text-[12px] text-slate-300"
+                    class="flex items-center gap-1.5 text-[12px] text-toned"
                   >
                     <span
                       class="rounded px-1 text-[10px] uppercase"
@@ -552,12 +566,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           class="space-y-2"
         >
           <div class="flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('testing.quality.heading') }}
             </h3>
             <span
               v-if="quality.attempts"
-              class="text-[11px] text-slate-400"
+              class="text-[11px] text-muted"
               :title="t('testing.quality.reruns')"
             >
               {{
@@ -582,40 +596,43 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               v-for="(vd, vi) in qualityVerdicts"
               :key="`qc${vi}`"
               data-testid="tester-quality-verdict"
-              class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+              class="rounded-lg border border-default bg-default/60 px-3 py-2"
             >
               <div class="flex items-center gap-2">
                 <UIcon
                   :name="vd.adequate ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
                   class="h-3.5 w-3.5 shrink-0"
-                  :class="vd.adequate ? 'text-emerald-400' : 'text-amber-300'"
+                  :class="vd.adequate ? 'text-app-success-400' : 'text-app-warning-300'"
                 />
-                <span class="text-[13px] font-medium text-slate-200">
+                <span class="text-[13px] font-medium text-default">
                   {{
                     vd.adequate ? t('testing.quality.adequate') : t('testing.quality.inadequate')
                   }}
                 </span>
-                <span v-if="vd.model" class="ms-auto font-mono text-[10px] text-slate-500">{{
+                <span v-if="vd.model" class="ms-auto font-mono text-[10px] text-dimmed">{{
                   vd.model
                 }}</span>
-                <span class="text-[11px] text-slate-500" :class="{ 'ms-auto': !vd.model }">{{
+                <span class="text-[11px] text-dimmed" :class="{ 'ms-auto': !vd.model }">{{
                   d(new Date(vd.at), 'short')
                 }}</span>
               </div>
               <MarkdownProse
                 v-if="vd.feedback"
                 :text="vd.feedback"
-                class="mt-1 text-[12px] leading-snug text-slate-400"
+                class="mt-1 text-[12px] leading-snug text-muted"
               />
               <div v-if="vd.gaps.length" class="mt-1.5">
-                <p class="text-[11px] text-slate-500">{{ t('testing.quality.gaps') }}</p>
+                <p class="text-[11px] text-dimmed">{{ t('testing.quality.gaps') }}</p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(gap, gi) in vd.gaps"
                     :key="`qc${vi}-g${gi}`"
-                    class="flex items-start gap-1.5 text-[12px] text-slate-300"
+                    class="flex items-start gap-1.5 text-[12px] text-toned"
                   >
-                    <UIcon name="i-lucide-dot" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400" />
+                    <UIcon
+                      name="i-lucide-dot"
+                      class="mt-0.5 h-3.5 w-3.5 shrink-0 text-app-warning-400"
+                    />
                     <span>{{ gap }}</span>
                   </li>
                 </ul>
@@ -626,11 +643,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
         <div
           v-if="!report"
-          class="flex flex-col items-center justify-center gap-2 py-12 text-center text-slate-400"
+          class="flex flex-col items-center justify-center gap-2 py-12 text-center text-muted"
         >
           <UIcon name="i-lucide-flask-conical" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('testing.empty.title') }}</p>
-          <p class="max-w-sm text-[11px] text-slate-500">
+          <p class="max-w-sm text-[11px] text-dimmed">
             {{ t('testing.empty.hint') }}
           </p>
         </div>
@@ -642,25 +659,25 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <MarkdownProse
             v-if="report.summary"
             :text="report.summary"
-            class="mb-4 max-w-3xl text-[13px] leading-relaxed text-slate-300"
+            class="mb-4 max-w-3xl text-[13px] leading-relaxed text-toned"
           />
 
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.scenariosOutcomes') }}
           </h3>
           <ul class="space-y-2">
             <li
               v-for="g in groups"
               :key="g.key"
-              class="overflow-hidden rounded-lg border border-slate-800 bg-slate-900/60"
+              class="overflow-hidden rounded-lg border border-default bg-default/60"
             >
               <button
-                class="flex w-full items-center gap-2 px-3 py-2 text-start hover:bg-slate-800/40"
+                class="flex w-full items-center gap-2 px-3 py-2 text-start hover:bg-elevated/40"
                 @click="toggle(g.key)"
               >
                 <UIcon
                   :name="collapsed.has(g.key) ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
-                  class="h-3.5 w-3.5 shrink-0 text-slate-500"
+                  class="h-3.5 w-3.5 shrink-0 text-dimmed"
                 />
                 <UIcon
                   :name="GROUP_STATUS_META[g.status].icon"
@@ -669,14 +686,14 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 />
                 <span
                   class="min-w-0 flex-1 truncate text-[13px]"
-                  :class="g.other ? 'text-slate-400' : 'font-medium text-slate-200'"
+                  :class="g.other ? 'text-muted' : 'font-medium text-default'"
                 >
                   {{ g.title }}
                 </span>
                 <UIcon
                   v-if="g.screenshots.length"
                   name="i-lucide-camera"
-                  class="h-3.5 w-3.5 shrink-0 text-slate-500"
+                  class="h-3.5 w-3.5 shrink-0 text-dimmed"
                   :title="
                     t(
                       'testing.screenshotCount',
@@ -685,7 +702,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     )
                   "
                 />
-                <span class="shrink-0 text-[11px] text-slate-500">
+                <span class="shrink-0 text-[11px] text-dimmed">
                   {{ t('testing.checkCount', { count: g.outcomes.length }, g.outcomes.length) }}
                   <template v-if="g.concerns.length">
                     ·
@@ -707,15 +724,15 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     :class="STATUS_META[o.status].text"
                   />
                   <div class="min-w-0">
-                    <span class="text-[13px] text-slate-200">{{ o.name }}</span>
+                    <span class="text-[13px] text-default">{{ o.name }}</span>
                     <MarkdownProse
                       v-if="o.detail"
                       :text="o.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-slate-400"
+                      class="max-w-3xl text-[12px] leading-snug text-muted"
                     />
                   </div>
                 </div>
-                <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-slate-500">
+                <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-dimmed">
                   {{ t('testing.noDiscreteCheck') }}
                 </p>
 
@@ -723,7 +740,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 <div
                   v-for="(c, ci) in g.concerns"
                   :key="`c${ci}`"
-                  class="mt-1 flex items-start gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-2 py-1.5"
+                  class="mt-1 flex items-start gap-2 rounded-md border border-default bg-app-950/40 px-2 py-1.5"
                 >
                   <UIcon
                     name="i-lucide-alert-triangle"
@@ -732,7 +749,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   />
                   <div class="min-w-0">
                     <div class="flex items-center gap-1.5">
-                      <span class="text-[12px] font-medium text-slate-200">{{ c.title }}</span>
+                      <span class="text-[12px] font-medium text-default">{{ c.title }}</span>
                       <span
                         class="rounded px-1 text-[10px] uppercase"
                         :class="SEVERITY_META[c.severity].chip"
@@ -743,7 +760,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     <MarkdownProse
                       v-if="c.detail"
                       :text="c.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-slate-400"
+                      class="max-w-3xl text-[12px] leading-snug text-muted"
                     />
                   </div>
                 </div>
@@ -754,7 +771,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     v-for="(s, si) in g.screenshots"
                     :key="`shot${si}`"
                     data-testid="tester-screenshot"
-                    class="group relative h-20 w-28 shrink-0 overflow-hidden rounded border border-slate-800 bg-slate-950/60 hover:border-slate-600"
+                    class="group relative h-20 w-28 shrink-0 overflow-hidden rounded border border-default bg-app-950/60 hover:border-app-600"
                     :title="s.view"
                     @click="openShot(s.artifactId)"
                   >
@@ -766,7 +783,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     />
                     <span
                       v-else
-                      class="flex h-full w-full items-center justify-center text-[10px] text-slate-600"
+                      class="flex h-full w-full items-center justify-center text-[10px] text-app-600"
                     >
                       {{
                         blobs.statusFor(s.artifactId) === 'error'
@@ -775,7 +792,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       }}
                     </span>
                     <span
-                      class="absolute inset-x-0 bottom-0 truncate bg-slate-950/80 px-1 py-0.5 text-[9px] text-slate-300"
+                      class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-[9px] text-toned"
                       >{{ s.view }}</span
                     >
                   </button>
@@ -786,14 +803,14 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
           <!-- Standalone gallery: any captures not mapped to a scenario above -->
           <section v-if="ungroupedScreenshots.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('testing.screenshots') }}
             </h3>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
               <button
                 v-for="(s, si) in ungroupedScreenshots"
                 :key="`gal${si}`"
-                class="group relative aspect-video overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 hover:border-slate-600"
+                class="group relative aspect-video overflow-hidden rounded-lg border border-default bg-app-950/60 hover:border-app-600"
                 :title="s.view"
                 @click="openShot(s.artifactId)"
               >
@@ -805,7 +822,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 />
                 <span
                   v-else
-                  class="flex h-full w-full items-center justify-center text-[11px] text-slate-600"
+                  class="flex h-full w-full items-center justify-center text-[11px] text-app-600"
                 >
                   {{
                     blobs.statusFor(s.artifactId) === 'error'
@@ -814,7 +831,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   }}
                 </span>
                 <span
-                  class="absolute inset-x-0 bottom-0 truncate bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300"
+                  class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned"
                   >{{ s.view }}</span
                 >
               </button>
@@ -825,44 +842,44 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
       <!-- Sidebar: metadata -->
       <aside
-        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.verdict.heading') }}
           </h4>
           <div class="flex items-center gap-2 text-[13px]">
             <UIcon
               :name="report.greenlight ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
               class="h-4 w-4"
-              :class="report.greenlight ? 'text-emerald-400' : 'text-rose-400'"
+              :class="report.greenlight ? 'text-app-success-400' : 'text-app-error-400'"
             />
-            <span :class="report.greenlight ? 'text-emerald-300' : 'text-rose-300'">
+            <span :class="report.greenlight ? 'text-app-success-300' : 'text-app-error-300'">
               {{ report.greenlight ? t('testing.verdict.safe') : t('testing.verdict.withheld') }}
             </span>
           </div>
         </div>
 
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.outcomes.heading') }}
           </h4>
           <dl class="space-y-1 text-[12px]">
             <div class="flex items-center justify-between">
-              <dt class="text-slate-400">{{ t('testing.outcomes.passed') }}</dt>
-              <dd class="text-emerald-300">{{ counts.passed }}</dd>
+              <dt class="text-muted">{{ t('testing.outcomes.passed') }}</dt>
+              <dd class="text-app-success-300">{{ counts.passed }}</dd>
             </div>
             <div class="flex items-center justify-between">
-              <dt class="text-slate-400">{{ t('testing.outcomes.failed') }}</dt>
-              <dd class="text-rose-300">{{ counts.failed }}</dd>
+              <dt class="text-muted">{{ t('testing.outcomes.failed') }}</dt>
+              <dd class="text-app-error-300">{{ counts.failed }}</dd>
             </div>
             <div class="flex items-center justify-between">
-              <dt class="text-slate-400">{{ t('testing.outcomes.skipped') }}</dt>
-              <dd class="text-slate-300">{{ counts.skipped }}</dd>
+              <dt class="text-muted">{{ t('testing.outcomes.skipped') }}</dt>
+              <dd class="text-toned">{{ counts.skipped }}</dd>
             </div>
-            <div class="flex items-center justify-between border-t border-slate-800 pt-1">
-              <dt class="text-slate-400">{{ t('testing.outcomes.concerns') }}</dt>
-              <dd class="text-amber-300">
+            <div class="flex items-center justify-between border-t border-default pt-1">
+              <dt class="text-muted">{{ t('testing.outcomes.concerns') }}</dt>
+              <dd class="text-app-warning-300">
                 {{ counts.concerns
                 }}<template v-if="counts.blocking">
                   {{
@@ -875,10 +892,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <div v-if="report?.environment">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('testing.environment') }}
           </h4>
-          <p class="text-[12px] capitalize text-slate-300">{{ report.environment }}</p>
+          <p class="text-[12px] capitalize text-toned">{{ report.environment }}</p>
         </div>
 
         <!-- Shared run metadata + embedded observability (model, run id, timing,
@@ -893,7 +910,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           :failure-at="instance?.failure?.occurredAt"
         />
 
-        <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
+        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
           {{ t('testing.footer') }}
         </p>
       </aside>

package/app/components/theme/ThemeImportModal.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useThemeStore } from '~/stores/theme'
+import { decodeThemeLink, type ThemeLinkDecodeResult } from '~/utils/theme/link'
+
+// Import a theme built in the Nuxt UI theme editor (https://ui.nuxt.com/theme): the user pastes
+// the editor's share link (or the raw document JSON), names it, and the theme is stored in this
+// browser and applied. The document format is the editor's own (`utils/theme/doc.ts`), so there
+// is no translation step to get wrong: what the editor previewed is what the app renders.
+const open = defineModel<boolean>('open', { default: false })
+
+const { t } = useI18n()
+const theme = useThemeStore()
+
+const link = ref('')
+const name = ref('')
+const error = ref<Extract<ThemeLinkDecodeResult, { ok: false }>['reason'] | null>(null)
+const busy = ref(false)
+
+// The name the theme will actually be saved under. Shown as help text only when it differs from
+// what was typed, so a taken name is explained before the import rather than discovered after.
+const resolvedName = computed(() => {
+  const requested = name.value.trim()
+  return requested ? theme.uniqueName(requested) : ''
+})
+const nameTaken = computed(
+  () => resolvedName.value !== '' && resolvedName.value !== name.value.trim(),
+)
+
+// Static literal keys per decode outcome, so the typed-message-keys check sees them.
+const ERROR_KEYS: Record<NonNullable<typeof error.value>, string> = {
+  not_a_link: 'appearance.import.error.notALink',
+  malformed: 'appearance.import.error.malformed',
+  preset_shorthand: 'appearance.import.error.presetShorthand',
+  unsupported_version: 'appearance.import.error.unsupportedVersion',
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  link.value = ''
+  name.value = ''
+  error.value = null
+})
+
+async function submit() {
+  busy.value = true
+  try {
+    const result = await decodeThemeLink(link.value)
+    if (!result.ok) {
+      error.value = result.reason
+      return
+    }
+    error.value = null
+    theme.addCustom(name.value, result.doc)
+    open.value = false
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('appearance.import.title')"
+    :description="t('appearance.import.description')"
+  >
+    <template #body>
+      <form class="space-y-4" data-testid="theme-import-form" @submit.prevent="submit">
+        <UFormField
+          :label="t('appearance.import.linkLabel')"
+          :error="error ? t(ERROR_KEYS[error]) : undefined"
+        >
+          <UTextarea
+            v-model="link"
+            :rows="3"
+            autoresize
+            class="w-full font-mono text-xs"
+            :placeholder="t('appearance.import.linkPlaceholder')"
+            data-testid="theme-import-link"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('appearance.import.nameLabel')"
+          :help="
+            nameTaken
+              ? t('appearance.import.nameTaken', { typed: name.trim(), name: resolvedName })
+              : undefined
+          "
+        >
+          <UInput
+            v-model="name"
+            class="w-full"
+            :placeholder="t('appearance.import.namePlaceholder')"
+            data-testid="theme-import-name"
+          />
+        </UFormField>
+        <p class="text-xs text-muted">{{ t('appearance.import.fontNote') }}</p>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="open = false">
+            {{ t('appearance.import.cancel') }}
+          </UButton>
+          <UButton
+            type="submit"
+            :loading="busy"
+            :disabled="!link.trim()"
+            data-testid="theme-import-submit"
+          >
+            {{ t('appearance.import.submit') }}
+          </UButton>
+        </div>
+      </form>
+    </template>
+  </UModal>
+</template>