@cat-factory/app 0.302.2 → 0.303.0

package/app/components/layout/SpendWarningBanner.vue

@@ -36,41 +36,44 @@ async function resume() {
          re-enables pointer events on it. -->
     <div v-if="exceeded && spend" class="pointer-events-auto w-full max-w-3xl">
       <div
-        class="w-full max-w-3xl rounded-2xl border-2 border-red-500/70 bg-red-950/95 p-5 shadow-2xl backdrop-blur"
+        class="w-full max-w-3xl rounded-2xl border-2 border-app-error-500/70 bg-app-error-950/95 p-5 shadow-2xl backdrop-blur"
         role="alert"
       >
         <div class="flex items-start gap-4">
-          <UIcon name="i-lucide-octagon-alert" class="mt-0.5 h-10 w-10 shrink-0 text-red-400" />
+          <UIcon
+            name="i-lucide-octagon-alert"
+            class="mt-0.5 h-10 w-10 shrink-0 text-app-error-400"
+          />
           <div class="min-w-0 flex-1">
-            <h2 class="text-lg font-semibold text-red-100">
+            <h2 class="text-lg font-semibold text-app-error-100">
               {{ t('layout.spendWarningBanner.title') }}
             </h2>
-            <p class="mt-1 text-sm text-red-200/90">
+            <p class="mt-1 text-sm text-app-error-200/90">
               {{ t('layout.spendWarningBanner.body') }}
             </p>
 
             <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
-              <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+              <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.spent') }}
                 </dt>
-                <dd class="text-base font-semibold tabular-nums text-red-50">
+                <dd class="text-base font-semibold tabular-nums text-app-error-50">
                   {{ money(spend.costSpent, spend.currency) }}
                 </dd>
               </div>
-              <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+              <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.budget') }}
                 </dt>
-                <dd class="text-base font-semibold tabular-nums text-red-50">
+                <dd class="text-base font-semibold tabular-nums text-app-error-50">
                   {{ money(spend.costLimit, spend.currency) }}
                 </dd>
               </div>
-              <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+              <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.tokens') }}
                 </dt>
-                <dd class="text-base font-semibold tabular-nums text-red-50">{{ tokens }}</dd>
+                <dd class="text-base font-semibold tabular-nums text-app-error-50">{{ tokens }}</dd>
               </div>
             </dl>
 
@@ -86,7 +89,7 @@ async function resume() {
               >
                 {{ t('layout.spendWarningBanner.resume') }}
               </UButton>
-              <span class="text-xs text-red-300/70">
+              <span class="text-xs text-app-error-300/70">
                 {{ t('layout.spendWarningBanner.resumeHint') }}
               </span>
             </div>

package/app/components/layout/TranslationWarningBanner.vue

@@ -31,19 +31,19 @@ function dismiss() {
       v-if="show"
       data-testid="translation-warning"
       role="alert"
-      class="flex shrink-0 items-center gap-3 border-b border-amber-500/40 bg-amber-950/95 px-4 py-2 text-[13px] text-amber-100 shadow-lg backdrop-blur"
+      class="flex shrink-0 items-center gap-3 border-b border-app-warning-500/40 bg-app-warning-950/95 px-4 py-2 text-[13px] text-app-warning-100 shadow-lg backdrop-blur"
     >
-      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-amber-400" />
+      <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-app-warning-400" />
       <p class="min-w-0 flex-1">
         <span class="font-semibold">{{ t('language.warning.title') }}</span>
-        <span class="mx-1.5 text-amber-400/60">·</span>
+        <span class="mx-1.5 text-app-warning-400/60">·</span>
         <i18n-t keypath="language.warning.body" tag="span" scope="global">
           <template #repoLink>
             <a
               :href="REPO_URL"
               target="_blank"
               rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 font-medium text-sky-300 hover:underline"
+              class="inline-flex items-center gap-1 font-medium text-app-info-300 hover:underline"
             >
               {{ t('language.warning.repoLinkLabel') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />

package/app/components/layout/UiModeSwitcher.vue

@@ -50,17 +50,17 @@ const pinnedTitle = computed(
     v-if="uiMode.envPinned"
     data-testid="ui-mode-pinned"
     :title="pinnedTitle"
-    class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2 text-start"
+    class="flex w-full items-center gap-2 rounded-lg border border-default bg-default/40 p-2 text-start"
     :class="collapsed ? 'justify-center' : ''"
   >
-    <UIcon :name="icon" class="h-4 w-4 shrink-0 text-slate-500" />
+    <UIcon :name="icon" class="h-4 w-4 shrink-0 text-dimmed" />
     <div v-if="!collapsed" class="min-w-0 flex-1">
-      <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
+      <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
         {{ t('uiMode.switcher') }}
       </div>
-      <div class="truncate text-xs font-medium text-slate-300">{{ currentLabel }}</div>
+      <div class="truncate text-xs font-medium text-toned">{{ currentLabel }}</div>
     </div>
-    <UIcon v-if="!collapsed" name="i-lucide-lock" class="h-3.5 w-3.5 shrink-0 text-slate-600" />
+    <UIcon v-if="!collapsed" name="i-lucide-lock" class="h-3.5 w-3.5 shrink-0 text-app-600" />
   </div>
 
   <!-- Rail: one button, flips the tier. The label rides under the glyph so the rail still says
@@ -72,23 +72,23 @@ const pinnedTitle = computed(
     data-testid="ui-mode-toggle"
     :aria-label="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
     :title="t('uiMode.switchTo', { mode: t(MODE_LABELS[otherMode]) })"
-    class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-slate-700 bg-slate-900/60 px-1 py-1.5 transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+    class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-muted bg-default/60 px-1 py-1.5 transition hover:border-primary/60 hover:bg-elevated/60"
     @click="uiMode.toggleMode()"
   >
-    <UIcon :name="icon" class="h-4 w-4 shrink-0 text-indigo-400" />
-    <span class="w-full truncate text-center text-[9px] font-medium uppercase text-slate-300">
+    <UIcon :name="icon" class="h-4 w-4 shrink-0 text-primary" />
+    <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
       {{ currentLabel }}
     </span>
   </button>
 
   <div v-else data-testid="ui-mode-switcher" class="w-full">
-    <div class="mb-1 px-1 text-[10px] uppercase tracking-wide text-slate-500">
+    <div class="mb-1 px-1 text-[10px] uppercase tracking-wide text-dimmed">
       {{ t('uiMode.switcher') }}
     </div>
     <div
       role="group"
       :aria-label="t('uiMode.switcher')"
-      class="flex w-full gap-1 rounded-lg border border-slate-700 bg-slate-900/60 p-1"
+      class="flex w-full gap-1 rounded-lg border border-muted bg-default/60 p-1"
     >
       <button
         v-for="mode in UI_MODES"
@@ -99,8 +99,8 @@ const pinnedTitle = computed(
         class="flex-1 truncate rounded-md px-2 py-1 text-xs font-medium transition"
         :class="
           mode === uiMode.mode
-            ? 'bg-indigo-500/20 text-indigo-200 ring-1 ring-indigo-500/50'
-            : 'text-slate-400 hover:bg-slate-800/70 hover:text-slate-200'
+            ? 'bg-primary/20 text-primary ring-1 ring-primary/50'
+            : 'text-muted hover:bg-elevated/70 hover:text-default'
         "
         @click="uiMode.setMode(mode)"
       >
@@ -111,7 +111,7 @@ const pinnedTitle = computed(
 
   <!-- The one-line "what this tier gives you", so the choice is self-explanatory. Dropped in
        the collapsed rail, where the tooltip above carries the mode instead. -->
-  <p v-if="!collapsed" class="px-1 text-[10px] leading-snug text-slate-500">
+  <p v-if="!collapsed" class="px-1 text-[10px] leading-snug text-dimmed">
     {{ t(MODE_HINTS[uiMode.mode]) }}
   </p>
 </template>

package/app/components/layout/UiRoleSwitcher.vue

@@ -44,10 +44,10 @@ const items = computed(() =>
       data-testid="ui-role-toggle"
       :aria-label="`${t('uiRole.switcher')}: ${currentLabel}`"
       :title="`${t('uiRole.switcher')}: ${currentLabel}`"
-      class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-slate-700 bg-slate-900/60 px-1 py-1.5 transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+      class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-muted bg-default/60 px-1 py-1.5 transition hover:border-primary/60 hover:bg-elevated/60"
     >
-      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-indigo-400" />
-      <span class="w-full truncate text-center text-[9px] font-medium uppercase text-slate-300">
+      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
+      <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
         {{ currentLabel }}
       </span>
     </button>
@@ -58,16 +58,16 @@ const items = computed(() =>
       data-testid="ui-role-switcher"
       :aria-label="t('uiRole.switcher')"
       :title="t(current.hintKey)"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-700 bg-slate-900/60 p-2 text-start transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+      class="flex w-full items-center gap-2 rounded-lg border border-muted bg-default/60 p-2 text-start transition hover:border-primary/60 hover:bg-elevated/60"
     >
-      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-indigo-400" />
+      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
       <div class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
+        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('uiRole.switcher') }}
         </div>
-        <div class="truncate text-xs font-medium text-slate-200">{{ currentLabel }}</div>
+        <div class="truncate text-xs font-medium text-default">{{ currentLabel }}</div>
       </div>
-      <UIcon name="i-lucide-chevron-down" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+      <UIcon name="i-lucide-chevron-down" class="h-3.5 w-3.5 shrink-0 text-dimmed" />
     </button>
   </UDropdownMenu>
 </template>

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -139,13 +139,13 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
 <template>
   <div class="space-y-6 text-sm" data-testid="workspace-members-settings">
     <!-- access mode -->
-    <section class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
+    <section class="rounded-md border border-default bg-elevated/40 p-4">
       <div class="flex items-start justify-between gap-4">
         <div>
-          <h3 class="mb-1 font-semibold text-white">
+          <h3 class="mb-1 font-semibold text-highlighted">
             {{ t('layout.workspaceMembers.accessMode.title') }}
           </h3>
-          <p class="text-slate-400">
+          <p class="text-muted">
             {{
               restricted
                 ? t('layout.workspaceMembers.accessMode.restrictedHint')
@@ -161,7 +161,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
             data-testid="workspace-restrict-toggle"
             @update:model-value="setAccessMode"
           />
-          <span class="text-xs text-slate-300">
+          <span class="text-xs text-toned">
             {{ t('layout.workspaceMembers.accessMode.restrictToggle') }}
           </span>
         </label>
@@ -170,13 +170,15 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
 
     <!-- roster -->
     <section>
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.workspaceMembers.roster.title') }}</h3>
-      <p v-if="!rosterReady" class="text-slate-500">{{ t('common.loading') }}</p>
+      <h3 class="mb-2 font-semibold text-highlighted">
+        {{ t('layout.workspaceMembers.roster.title') }}
+      </h3>
+      <p v-if="!rosterReady" class="text-dimmed">{{ t('common.loading') }}</p>
       <ul v-else class="space-y-1" data-testid="workspace-members-roster">
         <li
           v-for="m in members.members"
           :key="m.userId"
-          class="flex items-center justify-between gap-2 rounded-md bg-slate-800/40 px-2 py-1"
+          class="flex items-center justify-between gap-2 rounded-md bg-elevated/40 px-2 py-1"
           data-testid="workspace-member-row"
           :data-user-id="m.userId"
         >
@@ -204,7 +206,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
             />
           </span>
         </li>
-        <li v-if="members.members.length === 0" class="text-slate-500">
+        <li v-if="members.members.length === 0" class="text-dimmed">
           {{ t('layout.workspaceMembers.roster.empty') }}
         </li>
       </ul>
@@ -212,8 +214,10 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
 
     <!-- add member -->
     <section>
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.workspaceMembers.add.title') }}</h3>
-      <p v-if="!accountId" class="text-slate-500">
+      <h3 class="mb-2 font-semibold text-highlighted">
+        {{ t('layout.workspaceMembers.add.title') }}
+      </h3>
+      <p v-if="!accountId" class="text-dimmed">
         {{ t('layout.workspaceMembers.add.noAccount') }}
       </p>
       <template v-else>
@@ -239,7 +243,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
             {{ t('layout.workspaceMembers.add.submit') }}
           </UButton>
         </form>
-        <p v-if="candidates.length === 0" class="mt-2 text-slate-500">
+        <p v-if="candidates.length === 0" class="mt-2 text-dimmed">
           {{ t('layout.workspaceMembers.add.allAdded') }}
         </p>
       </template>

package/app/components/media/ArtifactLightbox.vue

@@ -160,7 +160,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       v-if="open"
       ref="dialogRef"
       tabindex="-1"
-      class="fixed inset-0 z-[60] flex flex-col bg-slate-950/95 backdrop-blur-sm focus:outline-none"
+      class="fixed inset-0 z-[60] flex flex-col bg-app-950/95 backdrop-blur-sm focus:outline-none"
       role="dialog"
       aria-modal="true"
       data-testid="artifact-lightbox"
@@ -172,27 +172,27 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       @click.self="close"
     >
       <!-- Toolbar -->
-      <div class="flex items-center gap-3 border-b border-slate-800/60 px-4 py-2.5">
-        <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-200">
+      <div class="flex items-center gap-3 border-b border-default/60 px-4 py-2.5">
+        <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-default">
           {{ current?.label ?? t('media.lightbox.fallbackTitle') }}
         </span>
-        <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-slate-400">
+        <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-muted">
           {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
           <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
+            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
             :title="t('media.lightbox.zoomOut')"
             :disabled="scale <= MIN_SCALE"
             @click="zoomBy(1 / 1.25)"
           >
             <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
           </button>
-          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500">{{
+          <span class="w-10 text-center text-[11px] tabular-nums text-dimmed">{{
             n(scale, 'percent')
           }}</span>
           <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
+            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default disabled:opacity-40"
             :title="t('media.lightbox.zoomIn')"
             :disabled="scale >= MAX_SCALE"
             @click="zoomBy(1.25)"
@@ -200,14 +200,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             <UIcon name="i-lucide-zoom-in" class="h-4 w-4" />
           </button>
           <button
-            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            class="rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
             :title="t('media.lightbox.reset')"
             @click="resetView"
           >
             <UIcon name="i-lucide-maximize" class="h-4 w-4" />
           </button>
           <button
-            class="ms-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            class="ms-1 rounded-md p-1.5 text-muted hover:bg-elevated hover:text-default"
             :title="t('media.lightbox.close')"
             @click="close"
           >
@@ -224,7 +224,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       >
         <button
           v-if="total > 1"
-          class="absolute start-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          class="absolute start-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
           :title="t('media.lightbox.prev')"
           @click="go(-1)"
         >
@@ -248,7 +248,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           @pointerup="onPointerUp"
           @pointercancel="onPointerUp"
         />
-        <div v-else class="flex flex-col items-center gap-2 text-slate-500">
+        <div v-else class="flex flex-col items-center gap-2 text-dimmed">
           <UIcon
             :name="state === 'error' ? 'i-lucide-image-off' : 'i-lucide-loader'"
             class="h-8 w-8"
@@ -259,7 +259,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           </p>
           <button
             v-if="state === 'error' && current"
-            class="text-[12px] text-amber-300 hover:underline"
+            class="text-[12px] text-app-warning-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
             {{ t('common.retry') }}
@@ -268,7 +268,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
 
         <button
           v-if="total > 1"
-          class="absolute end-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          class="absolute end-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-default/80 p-2 text-toned hover:bg-elevated hover:text-highlighted"
           :title="t('media.lightbox.next')"
           @click="go(1)"
         >

package/app/components/media/ImageCompare.vue

@@ -82,6 +82,13 @@ function onSwipeUp() {
 
 // --- diff canvas ---
 const diffCanvas = ref<HTMLCanvasElement | null>(null)
+// A fixed black backing, opting out of the theme on purpose. The CSS background does not take part
+// in the canvas `difference` composite (that runs on the bitmap); it shows through wherever the
+// bitmap is transparent, before the first draw and in any transparent region of the diff. Black
+// there reads as "no difference", the same zero the difference composite produces, in either colour
+// mode, so no mode-following token fits. Bound as a const so the guard's `fixed-colour-ok:` marker
+// stays on the class string; the inline-template form gets reflowed off its own line by oxfmt.
+const DIFF_CANVAS_CLASS = 'w-full rounded border border-default bg-black' // fixed-colour-ok: diff canvas backdrop
 const CAP = 2000
 // Bumped on every renderDiff entry so a render whose async work (image decode) is overtaken
 // by a newer mode/image change bails out instead of drawing stale pixels onto the canvas.
@@ -148,19 +155,19 @@ function onRefInput(e: Event) {
 </script>
 
 <template>
-  <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+  <div class="rounded-lg border border-default bg-default/60 p-3">
     <div class="mb-2 flex items-center justify-between gap-2">
-      <h3 class="min-w-0 truncate text-[12px] font-semibold text-slate-200">{{ view }}</h3>
+      <h3 class="min-w-0 truncate text-[12px] font-semibold text-default">{{ view }}</h3>
       <!-- Mode switch -->
       <div
         v-if="MODES.length > 1"
-        class="flex items-center gap-0.5 rounded-md border border-slate-800 bg-slate-950/60 p-0.5"
+        class="flex items-center gap-0.5 rounded-md border border-default bg-app-950/60 p-0.5"
       >
         <button
           v-for="m in MODES"
           :key="m.id"
-          class="rounded px-1.5 py-1 text-slate-400 hover:text-slate-200"
-          :class="mode === m.id ? 'bg-slate-800 text-slate-100' : ''"
+          class="rounded px-1.5 py-1 text-muted hover:text-default"
+          :class="mode === m.id ? 'bg-elevated text-app-100' : ''"
           :title="m.label"
           @click="mode = m.id"
         >
@@ -172,12 +179,12 @@ function onRefInput(e: Event) {
     <!-- SIDE BY SIDE -->
     <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
+        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('media.compare.actual') }}
         </figcaption>
         <button
           v-if="actualUrl"
-          class="block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
+          class="block w-full overflow-hidden rounded border border-default hover:border-app-600"
           @click="actualId && emit('expand', actualId)"
         >
           <img
@@ -188,7 +195,7 @@ function onRefInput(e: Event) {
         </button>
         <div
           v-else
-          class="flex h-32 items-center justify-center rounded border border-dashed border-slate-700 text-[11px] text-slate-600"
+          class="flex h-32 items-center justify-center rounded border border-dashed border-muted text-[11px] text-app-600"
         >
           {{
             props.blobs.statusFor(actualId) === 'error'
@@ -201,15 +208,15 @@ function onRefInput(e: Event) {
       </figure>
 
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
+        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('media.compare.reference') }}
-          <span v-if="referenceOrigin === 'design'" class="text-amber-300/80">
+          <span v-if="referenceOrigin === 'design'" class="text-app-warning-300/80">
             {{ t('media.compare.fromLinkedDesign') }}
           </span>
         </figcaption>
         <button
           v-if="refUrl"
-          class="group relative block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
+          class="group relative block w-full overflow-hidden rounded border border-default hover:border-app-600"
           @click="referenceId && emit('expand', referenceId)"
         >
           <img
@@ -218,7 +225,7 @@ function onRefInput(e: Event) {
             class="w-full cursor-zoom-in"
           />
           <span
-            class="absolute bottom-1 end-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
+            class="absolute bottom-1 end-1 rounded bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned opacity-0 group-hover:opacity-100"
             @click.stop="refInput?.click()"
           >
             {{ t('media.compare.replace') }}
@@ -230,8 +237,8 @@ function onRefInput(e: Event) {
           class="flex h-32 cursor-pointer flex-col items-center justify-center gap-1 rounded border border-dashed text-[11px] transition"
           :class="
             dragOver
-              ? 'border-amber-500 bg-amber-500/5 text-amber-300'
-              : 'border-slate-700 text-slate-600 hover:border-slate-500 hover:text-slate-400'
+              ? 'border-app-warning-500 bg-app-warning-500/5 text-app-warning-300'
+              : 'border-muted text-app-600 hover:border-app-500 hover:text-muted'
           "
           @click="refInput?.click()"
           @dragover.prevent="dragOver = true"
@@ -246,7 +253,7 @@ function onRefInput(e: Event) {
 
     <!-- OVERLAY (onion-skin) -->
     <div v-else-if="mode === 'overlay'" class="space-y-2">
-      <div class="relative w-full overflow-hidden rounded border border-slate-800">
+      <div class="relative w-full overflow-hidden rounded border border-default">
         <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="w-full" />
         <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
         <img
@@ -256,14 +263,14 @@ function onRefInput(e: Event) {
           :style="{ opacity: overlayOpacity / 100 }"
         />
       </div>
-      <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+      <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-dimmed">
         <span>{{ t('media.compare.reference') }}</span>
         <input
           v-model.number="overlayOpacity"
           type="range"
           min="0"
           max="100"
-          class="flex-1 accent-amber-500"
+          class="flex-1 accent-app-warning-500"
         />
         <span>{{ t('media.compare.actual') }}</span>
       </div>
@@ -273,7 +280,7 @@ function onRefInput(e: Event) {
     <div
       v-else-if="mode === 'swipe'"
       ref="swipeBox"
-      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded border border-slate-800"
+      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded border border-default"
       @pointerdown="onSwipeDown"
       @pointermove="moveSwipe"
       @pointerup="onSwipeUp"
@@ -297,27 +304,27 @@ function onRefInput(e: Event) {
            `clientX - rect.left`), so the handle and the corner labels stay PHYSICAL too.
            Logical (`start-`/`end-`) here would flip the labels under RTL while the image
            regions stayed put, mislabeling actual vs reference. -->
-      <div class="absolute inset-y-0 w-0.5 bg-amber-400" :style="{ left: `${splitPct}%` }">
+      <div class="absolute inset-y-0 w-0.5 bg-app-warning-400" :style="{ left: `${splitPct}%` }">
         <span
-          class="absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-amber-400 text-slate-950 shadow"
+          class="absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-app-warning-400 text-app-950 shadow"
         >
           <UIcon name="i-lucide-move-horizontal" class="h-3.5 w-3.5" />
         </span>
       </div>
       <span
-        class="absolute left-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
+        class="absolute left-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
         >{{ t('media.compare.actual') }}</span
       >
       <span
-        class="absolute right-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
+        class="absolute right-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
         >{{ t('media.compare.reference') }}</span
       >
     </div>
 
     <!-- DIFF (canvas) -->
     <div v-else-if="mode === 'diff'" class="space-y-1">
-      <canvas ref="diffCanvas" class="w-full rounded border border-slate-800 bg-black" />
-      <p class="text-[10px] text-slate-500">{{ t('media.compare.diffHint') }}</p>
+      <canvas ref="diffCanvas" :class="DIFF_CANVAS_CLASS" />
+      <p class="text-[10px] text-dimmed">{{ t('media.compare.diffHint') }}</p>
     </div>
 
     <!-- Hidden file input shared by replace/drop zone -->

package/app/components/merge/MergeEffortChips.vue

@@ -88,7 +88,7 @@ function pick(effort: ReviewEffort) {
   <div data-testid="merge-effort-chips" class="mt-2">
     <div class="flex items-center gap-1.5">
       <span
-        class="text-[10px] uppercase tracking-wide text-slate-500"
+        class="text-[10px] uppercase tracking-wide text-dimmed"
         :title="t('merge.effort.promptHint')"
       >
         {{ t('merge.effort.prompt') }}
@@ -119,7 +119,7 @@ function pick(effort: ReviewEffort) {
         {{ chip.label }}
       </UButton>
     </div>
-    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-[10px] text-slate-500">
+    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-[10px] text-dimmed">
       {{ history }}
     </p>
   </div>

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -147,18 +147,18 @@ function resetToDefaults() {
     </template>
     <template #body>
       <div class="space-y-4">
-        <p class="text-xs text-slate-400">{{ t('notificationSettings.panel.intro') }}</p>
+        <p class="text-xs text-muted">{{ t('notificationSettings.panel.intro') }}</p>
 
         <div
           v-if="notifications.settingsStatus === 'unavailable'"
-          class="rounded-lg border border-slate-700 bg-slate-800/40 p-3 text-xs text-slate-400"
+          class="rounded-lg border border-muted bg-elevated/40 p-3 text-xs text-muted"
         >
           {{ t('notificationSettings.unavailable') }}
         </div>
 
         <div
           v-else-if="notifications.settingsStatus === 'failed'"
-          class="space-y-3 rounded-lg border border-amber-700/60 bg-amber-950/30 p-3 text-xs text-amber-200"
+          class="space-y-3 rounded-lg border border-app-warning-700/60 bg-app-warning-950/30 p-3 text-xs text-app-warning-200"
         >
           <p>{{ t('notificationSettings.loadFailed') }}</p>
           <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-rotate-cw" @click="load">
@@ -168,15 +168,13 @@ function resetToDefaults() {
 
         <div
           v-else-if="!editable"
-          class="rounded-lg border border-slate-700 bg-slate-800/40 p-3 text-xs text-slate-400"
+          class="rounded-lg border border-muted bg-elevated/40 p-3 text-xs text-muted"
         >
           {{ t('common.loading') }}
         </div>
 
         <template v-else>
-          <div
-            class="flex items-center gap-3 px-2 text-[10px] uppercase tracking-wide text-slate-500"
-          >
+          <div class="flex items-center gap-3 px-2 text-[10px] uppercase tracking-wide text-dimmed">
             <span class="flex-1">{{ t('notificationSettings.column.event') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.inApp') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.email') }}</span>
@@ -186,9 +184,9 @@ function resetToDefaults() {
             <div
               v-for="type in TYPES"
               :key="type"
-              class="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-2"
+              class="flex items-center gap-3 rounded-lg border border-muted bg-elevated/40 p-2"
             >
-              <span class="flex-1 text-sm text-slate-300">
+              <span class="flex-1 text-sm text-toned">
                 {{ t(`notificationSettings.type.${type}`) }}
               </span>
               <div class="flex w-16 justify-center">
@@ -200,9 +198,13 @@ function resetToDefaults() {
             </div>
           </div>
 
-          <p class="text-[11px] text-slate-500">{{ t('notificationSettings.panel.inAppNote') }}</p>
-          <p class="text-[11px] text-slate-500">{{ t('notificationSettings.panel.emailNote') }}</p>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
+            {{ t('notificationSettings.panel.inAppNote') }}
+          </p>
+          <p class="text-[11px] text-dimmed">
+            {{ t('notificationSettings.panel.emailNote') }}
+          </p>
+          <p class="text-[11px] text-dimmed">
             {{ t('notificationSettings.panel.otherChannelsNote') }}
             <UButton
               v-if="slack.available"