@cat-factory/app 0.302.2 → 0.303.1

package/app/assets/css/tokens.css

@@ -0,0 +1,298 @@
+/* The app's own colour tokens, layered on Nuxt UI's (issue #2239).
+ *
+ * Nuxt UI gives every alias ONE mode-adaptive token (`--ui-primary`, `--ui-warning`: shade 500 in
+ * light, 400 in dark) plus the fixed numbered ramp (`--ui-color-warning-300`), and gives the
+ * neutral ramp the role tokens (`--ui-bg`, `--ui-text-muted`, ...). The SPA's status and accent
+ * surfaces are painted in SPECIFIC ramp shades (a `300` text on a `950/40` fill inside an `800`
+ * border), and a fixed shade cannot serve both modes: what reads on a dark surface vanishes on a
+ * light one. These tokens give each numbered shade a light twin by MIRRORING the ramp (`50↔950`,
+ * `100↔900`, `200↔800`, `300↔700`, `400↔600`, `500` is its own midpoint): the dark value is the
+ * exact shade the raw class used, so dark mode is unchanged, and the light value is the shade the
+ * same intent lands on against a light surface.
+ *
+ * Every value is a reference into Nuxt UI's `--ui-color-<alias>-<n>` ramps, never a literal, so a
+ * theme that maps `warning` to another palette recolours every warning surface, and a theme
+ * document can override any single token here through its `tokens` block (the theme stylesheet's
+ * selectors outrank these; see `utils/theme/css.ts`).
+ *
+ * `@theme inline` binds each to a Tailwind colour so the `bg-app-warning-950/40` /
+ * `text-app-error-300` utilities exist (with opacity modifiers). Five NEUTRAL shades ride the same
+ * scheme under the shorter `app-<n>` name because the role tokens cover the rest of that ramp.
+ * PRIMARY has no numbered tokens: brand accents use Nuxt UI's bare alias (`text-primary`,
+ * `bg-primary/10`), the idiom the editor's primary slider and `blackAsPrimary` address directly.
+ *
+ * CATEGORY hues (`--app-hue-<h>`) are identity colours for agent kinds, task types and pipeline
+ * step kinds: one per Tailwind hue, mode-adaptive on Nuxt UI's own convention (`400` in dark,
+ * `600` in light), consumed as `text-app-hue-pink` or as `var(--app-hue-pink)` in an inline style.
+ * They reference Tailwind's ramps, not an alias, because a category is not a status; a theme
+ * document recolours one through its `tokens` block (`'--app-hue-pink': 'var(--color-rose-400)'`).
+ *
+ * `scripts/check-frontend-palette.mjs` bans the raw and the fixed-alias forms these replace, and
+ * `palette-token-parity.spec.ts` pins the dark values. */
+
+/* ---- Neutral: the five shades with no role token ------------------------------------------- */
+:root,
+.dark {
+  --app-950: var(--ui-color-neutral-950);
+  --app-100: var(--ui-color-neutral-100);
+  --app-600: var(--ui-color-neutral-600);
+  --app-500: var(--ui-color-neutral-500);
+  --app-400: var(--ui-color-neutral-400);
+  /* The board canvas: one step BELOW `bg-default` (900), so panels and cards lift off it. The
+   * only surface in the app below the page background, hence its own token. */
+  --app-bg-canvas: var(--ui-color-neutral-950);
+}
+.light {
+  /* The one deliberate break in the mirror: 950 lands on 100, not 50. Some 350 panels are painted
+   * `bg-default/60` / `bg-elevated/40` over this surface; in dark that is two distinct dark greys, in
+   * light white-at-60% over neutral-50 composites to within 1% of it and every panel edge vanishes.
+   * One step deeper keeps the translucent-panel idiom legible without re-tuning 350 alphas. */
+  --app-950: var(--ui-color-neutral-100);
+  --app-100: var(--ui-color-neutral-900);
+  --app-600: var(--ui-color-neutral-400);
+  --app-500: var(--ui-color-neutral-500);
+  --app-400: var(--ui-color-neutral-600);
+  --app-bg-canvas: var(--ui-color-neutral-200);
+}
+
+/* ---- The five status ramps, every shade mirrored -------------------------------------------- */
+:root,
+.dark {
+  --app-secondary-50: var(--ui-color-secondary-50);
+  --app-secondary-100: var(--ui-color-secondary-100);
+  --app-secondary-200: var(--ui-color-secondary-200);
+  --app-secondary-300: var(--ui-color-secondary-300);
+  --app-secondary-400: var(--ui-color-secondary-400);
+  --app-secondary-500: var(--ui-color-secondary-500);
+  --app-secondary-600: var(--ui-color-secondary-600);
+  --app-secondary-700: var(--ui-color-secondary-700);
+  --app-secondary-800: var(--ui-color-secondary-800);
+  --app-secondary-900: var(--ui-color-secondary-900);
+  --app-secondary-950: var(--ui-color-secondary-950);
+  --app-success-50: var(--ui-color-success-50);
+  --app-success-100: var(--ui-color-success-100);
+  --app-success-200: var(--ui-color-success-200);
+  --app-success-300: var(--ui-color-success-300);
+  --app-success-400: var(--ui-color-success-400);
+  --app-success-500: var(--ui-color-success-500);
+  --app-success-600: var(--ui-color-success-600);
+  --app-success-700: var(--ui-color-success-700);
+  --app-success-800: var(--ui-color-success-800);
+  --app-success-900: var(--ui-color-success-900);
+  --app-success-950: var(--ui-color-success-950);
+  --app-info-50: var(--ui-color-info-50);
+  --app-info-100: var(--ui-color-info-100);
+  --app-info-200: var(--ui-color-info-200);
+  --app-info-300: var(--ui-color-info-300);
+  --app-info-400: var(--ui-color-info-400);
+  --app-info-500: var(--ui-color-info-500);
+  --app-info-600: var(--ui-color-info-600);
+  --app-info-700: var(--ui-color-info-700);
+  --app-info-800: var(--ui-color-info-800);
+  --app-info-900: var(--ui-color-info-900);
+  --app-info-950: var(--ui-color-info-950);
+  --app-warning-50: var(--ui-color-warning-50);
+  --app-warning-100: var(--ui-color-warning-100);
+  --app-warning-200: var(--ui-color-warning-200);
+  --app-warning-300: var(--ui-color-warning-300);
+  --app-warning-400: var(--ui-color-warning-400);
+  --app-warning-500: var(--ui-color-warning-500);
+  --app-warning-600: var(--ui-color-warning-600);
+  --app-warning-700: var(--ui-color-warning-700);
+  --app-warning-800: var(--ui-color-warning-800);
+  --app-warning-900: var(--ui-color-warning-900);
+  --app-warning-950: var(--ui-color-warning-950);
+  --app-error-50: var(--ui-color-error-50);
+  --app-error-100: var(--ui-color-error-100);
+  --app-error-200: var(--ui-color-error-200);
+  --app-error-300: var(--ui-color-error-300);
+  --app-error-400: var(--ui-color-error-400);
+  --app-error-500: var(--ui-color-error-500);
+  --app-error-600: var(--ui-color-error-600);
+  --app-error-700: var(--ui-color-error-700);
+  --app-error-800: var(--ui-color-error-800);
+  --app-error-900: var(--ui-color-error-900);
+  --app-error-950: var(--ui-color-error-950);
+}
+.light {
+  --app-secondary-50: var(--ui-color-secondary-950);
+  --app-secondary-100: var(--ui-color-secondary-900);
+  --app-secondary-200: var(--ui-color-secondary-800);
+  --app-secondary-300: var(--ui-color-secondary-700);
+  --app-secondary-400: var(--ui-color-secondary-600);
+  --app-secondary-500: var(--ui-color-secondary-500);
+  --app-secondary-600: var(--ui-color-secondary-400);
+  --app-secondary-700: var(--ui-color-secondary-300);
+  --app-secondary-800: var(--ui-color-secondary-200);
+  --app-secondary-900: var(--ui-color-secondary-100);
+  --app-secondary-950: var(--ui-color-secondary-50);
+  --app-success-50: var(--ui-color-success-950);
+  --app-success-100: var(--ui-color-success-900);
+  --app-success-200: var(--ui-color-success-800);
+  --app-success-300: var(--ui-color-success-700);
+  --app-success-400: var(--ui-color-success-600);
+  --app-success-500: var(--ui-color-success-500);
+  --app-success-600: var(--ui-color-success-400);
+  --app-success-700: var(--ui-color-success-300);
+  --app-success-800: var(--ui-color-success-200);
+  --app-success-900: var(--ui-color-success-100);
+  --app-success-950: var(--ui-color-success-50);
+  --app-info-50: var(--ui-color-info-950);
+  --app-info-100: var(--ui-color-info-900);
+  --app-info-200: var(--ui-color-info-800);
+  --app-info-300: var(--ui-color-info-700);
+  --app-info-400: var(--ui-color-info-600);
+  --app-info-500: var(--ui-color-info-500);
+  --app-info-600: var(--ui-color-info-400);
+  --app-info-700: var(--ui-color-info-300);
+  --app-info-800: var(--ui-color-info-200);
+  --app-info-900: var(--ui-color-info-100);
+  --app-info-950: var(--ui-color-info-50);
+  --app-warning-50: var(--ui-color-warning-950);
+  --app-warning-100: var(--ui-color-warning-900);
+  --app-warning-200: var(--ui-color-warning-800);
+  --app-warning-300: var(--ui-color-warning-700);
+  --app-warning-400: var(--ui-color-warning-600);
+  --app-warning-500: var(--ui-color-warning-500);
+  --app-warning-600: var(--ui-color-warning-400);
+  --app-warning-700: var(--ui-color-warning-300);
+  --app-warning-800: var(--ui-color-warning-200);
+  --app-warning-900: var(--ui-color-warning-100);
+  --app-warning-950: var(--ui-color-warning-50);
+  --app-error-50: var(--ui-color-error-950);
+  --app-error-100: var(--ui-color-error-900);
+  --app-error-200: var(--ui-color-error-800);
+  --app-error-300: var(--ui-color-error-700);
+  --app-error-400: var(--ui-color-error-600);
+  --app-error-500: var(--ui-color-error-500);
+  --app-error-600: var(--ui-color-error-400);
+  --app-error-700: var(--ui-color-error-300);
+  --app-error-800: var(--ui-color-error-200);
+  --app-error-900: var(--ui-color-error-100);
+  --app-error-950: var(--ui-color-error-50);
+}
+
+/* ---- Category hues: one mode-adaptive value per Tailwind hue ---------------------------------- */
+:root,
+.dark {
+  --app-hue-slate: var(--color-slate-400);
+  --app-hue-red: var(--color-red-400);
+  --app-hue-orange: var(--color-orange-400);
+  --app-hue-amber: var(--color-amber-400);
+  --app-hue-yellow: var(--color-yellow-400);
+  --app-hue-lime: var(--color-lime-400);
+  --app-hue-green: var(--color-green-400);
+  --app-hue-emerald: var(--color-emerald-400);
+  --app-hue-teal: var(--color-teal-400);
+  --app-hue-cyan: var(--color-cyan-400);
+  --app-hue-sky: var(--color-sky-400);
+  --app-hue-blue: var(--color-blue-400);
+  --app-hue-indigo: var(--color-indigo-400);
+  --app-hue-violet: var(--color-violet-400);
+  --app-hue-purple: var(--color-purple-400);
+  --app-hue-fuchsia: var(--color-fuchsia-400);
+  --app-hue-pink: var(--color-pink-400);
+  --app-hue-rose: var(--color-rose-400);
+}
+.light {
+  --app-hue-slate: var(--color-slate-600);
+  --app-hue-red: var(--color-red-600);
+  --app-hue-orange: var(--color-orange-600);
+  --app-hue-amber: var(--color-amber-600);
+  --app-hue-yellow: var(--color-yellow-600);
+  --app-hue-lime: var(--color-lime-600);
+  --app-hue-green: var(--color-green-600);
+  --app-hue-emerald: var(--color-emerald-600);
+  --app-hue-teal: var(--color-teal-600);
+  --app-hue-cyan: var(--color-cyan-600);
+  --app-hue-sky: var(--color-sky-600);
+  --app-hue-blue: var(--color-blue-600);
+  --app-hue-indigo: var(--color-indigo-600);
+  --app-hue-violet: var(--color-violet-600);
+  --app-hue-purple: var(--color-purple-600);
+  --app-hue-fuchsia: var(--color-fuchsia-600);
+  --app-hue-pink: var(--color-pink-600);
+  --app-hue-rose: var(--color-rose-600);
+}
+
+@theme inline {
+  --color-app-hue-slate: var(--app-hue-slate);
+  --color-app-hue-red: var(--app-hue-red);
+  --color-app-hue-orange: var(--app-hue-orange);
+  --color-app-hue-amber: var(--app-hue-amber);
+  --color-app-hue-yellow: var(--app-hue-yellow);
+  --color-app-hue-lime: var(--app-hue-lime);
+  --color-app-hue-green: var(--app-hue-green);
+  --color-app-hue-emerald: var(--app-hue-emerald);
+  --color-app-hue-teal: var(--app-hue-teal);
+  --color-app-hue-cyan: var(--app-hue-cyan);
+  --color-app-hue-sky: var(--app-hue-sky);
+  --color-app-hue-blue: var(--app-hue-blue);
+  --color-app-hue-indigo: var(--app-hue-indigo);
+  --color-app-hue-violet: var(--app-hue-violet);
+  --color-app-hue-purple: var(--app-hue-purple);
+  --color-app-hue-fuchsia: var(--app-hue-fuchsia);
+  --color-app-hue-pink: var(--app-hue-pink);
+  --color-app-hue-rose: var(--app-hue-rose);
+  --color-app-950: var(--app-950);
+  --color-app-100: var(--app-100);
+  --color-app-600: var(--app-600);
+  --color-app-500: var(--app-500);
+  --color-app-400: var(--app-400);
+  --color-app-canvas: var(--app-bg-canvas);
+  --color-app-secondary-50: var(--app-secondary-50);
+  --color-app-secondary-100: var(--app-secondary-100);
+  --color-app-secondary-200: var(--app-secondary-200);
+  --color-app-secondary-300: var(--app-secondary-300);
+  --color-app-secondary-400: var(--app-secondary-400);
+  --color-app-secondary-500: var(--app-secondary-500);
+  --color-app-secondary-600: var(--app-secondary-600);
+  --color-app-secondary-700: var(--app-secondary-700);
+  --color-app-secondary-800: var(--app-secondary-800);
+  --color-app-secondary-900: var(--app-secondary-900);
+  --color-app-secondary-950: var(--app-secondary-950);
+  --color-app-success-50: var(--app-success-50);
+  --color-app-success-100: var(--app-success-100);
+  --color-app-success-200: var(--app-success-200);
+  --color-app-success-300: var(--app-success-300);
+  --color-app-success-400: var(--app-success-400);
+  --color-app-success-500: var(--app-success-500);
+  --color-app-success-600: var(--app-success-600);
+  --color-app-success-700: var(--app-success-700);
+  --color-app-success-800: var(--app-success-800);
+  --color-app-success-900: var(--app-success-900);
+  --color-app-success-950: var(--app-success-950);
+  --color-app-info-50: var(--app-info-50);
+  --color-app-info-100: var(--app-info-100);
+  --color-app-info-200: var(--app-info-200);
+  --color-app-info-300: var(--app-info-300);
+  --color-app-info-400: var(--app-info-400);
+  --color-app-info-500: var(--app-info-500);
+  --color-app-info-600: var(--app-info-600);
+  --color-app-info-700: var(--app-info-700);
+  --color-app-info-800: var(--app-info-800);
+  --color-app-info-900: var(--app-info-900);
+  --color-app-info-950: var(--app-info-950);
+  --color-app-warning-50: var(--app-warning-50);
+  --color-app-warning-100: var(--app-warning-100);
+  --color-app-warning-200: var(--app-warning-200);
+  --color-app-warning-300: var(--app-warning-300);
+  --color-app-warning-400: var(--app-warning-400);
+  --color-app-warning-500: var(--app-warning-500);
+  --color-app-warning-600: var(--app-warning-600);
+  --color-app-warning-700: var(--app-warning-700);
+  --color-app-warning-800: var(--app-warning-800);
+  --color-app-warning-900: var(--app-warning-900);
+  --color-app-warning-950: var(--app-warning-950);
+  --color-app-error-50: var(--app-error-50);
+  --color-app-error-100: var(--app-error-100);
+  --color-app-error-200: var(--app-error-200);
+  --color-app-error-300: var(--app-error-300);
+  --color-app-error-400: var(--app-error-400);
+  --color-app-error-500: var(--app-error-500);
+  --color-app-error-600: var(--app-error-600);
+  --color-app-error-700: var(--app-error-700);
+  --color-app-error-800: var(--app-error-800);
+  --color-app-error-900: var(--app-error-900);
+  --color-app-error-950: var(--app-error-950);
+}

package/app/components/assistant/AssistantModal.vue

@@ -154,16 +154,16 @@ function reveal(blockId: string): void {
   <UModal v-model:open="open" :title="t('assistant.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div class="space-y-4">
-        <p class="text-sm text-slate-400">{{ t('assistant.intro') }}</p>
+        <p class="text-sm text-muted">{{ t('assistant.intro') }}</p>
 
         <!-- The read FAILED: this deployment may well have a model, and nobody can tell from here.
              So it offers the read again instead of explaining a configuration that may be fine. -->
         <div
           v-if="surface === 'unreadable'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-unreadable"
         >
-          <UIcon name="i-lucide-unplug" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+          <UIcon name="i-lucide-unplug" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
           <div class="space-y-2">
             <p>{{ t('assistant.unreadable') }}</p>
             <UButton
@@ -181,10 +181,10 @@ function reveal(blockId: string): void {
         <!-- No model wired: say so, rather than offering a box whose every submit would 503. -->
         <div
           v-else-if="surface === 'unwired'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-unwired"
         >
-          <UIcon name="i-lucide-plug" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
+          <UIcon name="i-lucide-plug" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
           <span>{{ t('assistant.unavailable') }}</span>
         </div>
 
@@ -192,10 +192,10 @@ function reveal(blockId: string): void {
              and every submit against it would be refused with `assistant_no_actions`. -->
         <div
           v-else-if="surface === 'no_actions'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-no-actions"
         >
-          <UIcon name="i-lucide-list-x" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
+          <UIcon name="i-lucide-list-x" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
           <span>{{ t('assistant.noActions') }}</span>
         </div>
 
@@ -240,7 +240,7 @@ function reveal(blockId: string): void {
               role="status"
               :aria-live="submitReason ? 'polite' : 'off'"
               class="flex items-center gap-1 text-xs"
-              :class="submitReason ? 'text-amber-400' : 'text-slate-500'"
+              :class="submitReason ? 'text-app-warning-400' : 'text-dimmed'"
               data-testid="assistant-submit-status"
             >
               <UIcon
@@ -254,7 +254,7 @@ function reveal(blockId: string): void {
 
           <!-- What it can do, always visible: the catalog is the affordance. -->
           <div v-if="examples.length" class="space-y-2">
-            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">
+            <p class="text-xs font-medium uppercase tracking-wide text-dimmed">
               {{ t('assistant.examplesTitle') }}
             </p>
             <div class="flex flex-col gap-1">
@@ -262,11 +262,11 @@ function reveal(blockId: string): void {
                 v-for="entry in examples"
                 :key="entry.actionId"
                 type="button"
-                class="rounded-md px-2 py-1 text-left text-sm text-slate-300 hover:bg-slate-800"
+                class="rounded-md px-2 py-1 text-left text-sm text-toned hover:bg-elevated"
                 @click="useExample(entry.example)"
               >
-                <span class="text-slate-400">{{ entry.label }}</span>
-                <span class="block text-xs text-slate-500">“{{ entry.example }}”</span>
+                <span class="text-muted">{{ entry.label }}</span>
+                <span class="block text-xs text-dimmed">“{{ entry.example }}”</span>
               </button>
             </div>
           </div>
@@ -274,12 +274,12 @@ function reveal(blockId: string): void {
           <!-- The outcome. Rendered from the turn's data; no model prose reaches this. -->
           <div
             v-if="outcome"
-            class="rounded-md border border-slate-700 p-3 text-sm"
+            class="rounded-md border border-muted p-3 text-sm"
             data-testid="assistant-outcome"
           >
             <template v-if="outcome.status === 'performed'">
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon name="i-lucide-check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon name="i-lucide-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-success-400" />
                 <div class="space-y-2">
                   <p v-if="outcome.result.actionId === 'declare-service-dependency'">
                     {{
@@ -329,8 +329,11 @@ function reveal(blockId: string): void {
             </template>
 
             <template v-else-if="outcome.status === 'needs_input'">
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon name="i-lucide-help-circle" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon
+                  name="i-lucide-help-circle"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400"
+                />
                 <div class="space-y-2">
                   <p>{{ t(`assistant.needsInput.${outcome.reason}`) }}</p>
                   <div v-if="outcome.candidates.length" class="flex flex-wrap gap-1">
@@ -351,11 +354,8 @@ function reveal(blockId: string): void {
             </template>
 
             <template v-else>
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon
-                  name="i-lucide-circle-slash"
-                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-500"
-                />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon name="i-lucide-circle-slash" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
                 <p>{{ t('assistant.declined') }}</p>
               </div>
             </template>

package/app/components/auth/AuthGate.vue

@@ -22,7 +22,7 @@ onMounted(() => void auth.bootstrap().finally(() => markBoot('auth-ready')))
 <template>
   <div
     v-if="!auth.ready"
-    class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-slate-950 text-slate-400"
+    class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-app-950 text-muted"
   >
     <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
     <span class="text-sm">{{ t('auth.gate.loading') }}</span>

package/app/components/auth/BackendMisconfiguredScreen.vue

@@ -18,13 +18,13 @@ function reload() {
 
 <template>
   <div
-    class="flex h-screen w-screen flex-col items-center justify-center bg-slate-950 p-6 text-slate-200"
+    class="flex h-screen w-screen flex-col items-center justify-center bg-app-950 p-6 text-default"
   >
     <div class="w-full max-w-2xl">
       <div class="mb-6 text-center">
-        <UIcon name="i-lucide-server-cog" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
+        <UIcon name="i-lucide-server-cog" class="mx-auto mb-3 h-10 w-10 text-app-warning-400" />
         <h1 class="text-lg font-semibold">{{ t('app.misconfigured.title') }}</h1>
-        <p class="mx-auto mt-2 max-w-lg text-sm text-slate-400">
+        <p class="mx-auto mt-2 max-w-lg text-sm text-muted">
           {{ t('app.misconfigured.intro') }}
         </p>
       </div>
@@ -33,12 +33,12 @@ function reload() {
         <li
           v-for="problem in problems"
           :key="problem.key"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+          class="rounded-lg border border-default bg-default/60 p-4"
         >
-          <code class="text-sm font-semibold text-amber-300">{{ problem.key }}</code>
-          <p class="mt-1 text-sm text-slate-300">{{ problem.summary }}</p>
-          <p class="mt-2 text-sm text-slate-400">
-            <span class="font-medium text-slate-300">{{ t('app.misconfigured.howToFix') }}</span>
+          <code class="text-sm font-semibold text-app-warning-300">{{ problem.key }}</code>
+          <p class="mt-1 text-sm text-toned">{{ problem.summary }}</p>
+          <p class="mt-2 text-sm text-muted">
+            <span class="font-medium text-toned">{{ t('app.misconfigured.howToFix') }}</span>
             {{ problem.remedy }}
           </p>
           <a
@@ -46,7 +46,7 @@ function reload() {
             :href="problem.docsUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="mt-2 inline-flex items-center gap-1 text-sm text-amber-300 hover:text-amber-200"
+            class="mt-2 inline-flex items-center gap-1 text-sm text-app-warning-300 hover:text-app-warning-200"
           >
             <UIcon name="i-lucide-book-open" class="h-4 w-4" />
             {{ t('app.misconfigured.viewDocs') }}
@@ -59,7 +59,7 @@ function reload() {
           {{ t('app.misconfigured.reload') }}
         </UButton>
       </div>
-      <p class="mt-4 text-center text-xs text-slate-500">{{ t('app.misconfigured.hint') }}</p>
+      <p class="mt-4 text-center text-xs text-dimmed">{{ t('app.misconfigured.hint') }}</p>
     </div>
   </div>
 </template>