@cat-factory/app 0.302.2 → 0.303.0

package/app/components/layout/AccountPlatformAlertSettings.vue

@@ -261,13 +261,13 @@ const hasOverrides = computed(
   <section
     v-if="store.available !== false"
     data-testid="account-platform-alerts"
-    class="space-y-3 border-t border-slate-800 pt-6"
+    class="space-y-3 border-t border-default pt-6"
   >
     <div>
-      <h4 class="text-sm font-semibold text-slate-200">
+      <h4 class="text-sm font-semibold text-default">
         {{ t('settings.platformAlerts.title') }}
       </h4>
-      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.description') }}</p>
+      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.description') }}</p>
     </div>
 
     <!--
@@ -282,11 +282,11 @@ const hasOverrides = computed(
         :label="t('settings.platformAlerts.muteLabel')"
         data-testid="platform-alerts-mute"
       />
-      <p class="ps-6 text-[11px] text-slate-400">{{ t('settings.platformAlerts.muteHint') }}</p>
+      <p class="ps-6 text-[11px] text-muted">{{ t('settings.platformAlerts.muteHint') }}</p>
     </div>
 
     <div class="space-y-1">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{ t('settings.platformAlerts.windowLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -298,17 +298,17 @@ const hasOverrides = computed(
           data-testid="platform-alerts-window"
         />
       </div>
-      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.windowHint') }}</p>
+      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.windowHint') }}</p>
     </div>
 
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{ t('settings.platformAlerts.thresholdsLabel') }}
       </label>
-      <p class="text-[11px] text-slate-400">{{ t('settings.platformAlerts.inheritHint') }}</p>
+      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.inheritHint') }}</p>
       <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <div v-for="th in THRESHOLDS" :key="th.field" class="space-y-1">
-          <label class="block text-[11px] text-slate-300" :for="`platform-alert-${th.field}`">
+          <label class="block text-[11px] text-toned" :for="`platform-alert-${th.field}`">
             {{ thresholdLabels[th.field] }}
           </label>
           <UInput
@@ -320,7 +320,7 @@ const hasOverrides = computed(
             :placeholder="t('settings.platformAlerts.inheritPlaceholder')"
             :data-testid="`platform-alert-${th.field}`"
           />
-          <p class="text-[11px] leading-snug text-slate-500">{{ thresholdHints[th.field] }}</p>
+          <p class="text-[11px] leading-snug text-dimmed">{{ thresholdHints[th.field] }}</p>
         </div>
       </div>
     </div>
@@ -334,7 +334,7 @@ const hasOverrides = computed(
     -->
     <p
       v-if="!loaded"
-      class="rounded-lg border border-amber-800/60 bg-amber-950/30 px-3 py-2 text-xs text-amber-200"
+      class="rounded-lg border border-app-warning-800/60 bg-app-warning-950/30 px-3 py-2 text-xs text-app-warning-200"
       data-testid="account-platform-alerts-unloaded"
     >
       {{ t('settings.platformAlerts.notLoaded') }}

package/app/components/layout/AccountRiskPolicySettings.vue

@@ -99,9 +99,9 @@ async function create(input: CreateRiskPolicyInput) {
 
 <template>
   <div class="space-y-4 text-sm" data-testid="account-risk-policy-panel">
-    <p class="text-[11px] text-slate-400">{{ t('layout.accountRiskPolicies.intro') }}</p>
+    <p class="text-[11px] text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
 
-    <p v-if="!store.loading && policies.length === 0" class="text-[11px] text-slate-500">
+    <p v-if="!store.loading && policies.length === 0" class="text-[11px] text-dimmed">
       {{ t('layout.accountRiskPolicies.empty') }}
     </p>
 

package/app/components/layout/AccountRunCredentialSettings.vue

@@ -59,22 +59,22 @@ async function save() {
 
 <template>
   <div v-if="store.available !== false" class="space-y-2" data-testid="account-run-credential">
-    <h3 class="text-sm font-semibold text-slate-200">
+    <h3 class="text-sm font-semibold text-default">
       {{ t('settings.runCredentialPolicy.heading') }}
     </h3>
-    <p class="text-[11px] text-slate-400">{{ t('settings.runCredentialPolicy.body') }}</p>
+    <p class="text-[11px] text-muted">{{ t('settings.runCredentialPolicy.body') }}</p>
 
     <label class="flex items-center gap-2">
       <USwitch v-model="forbid" size="sm" data-testid="account-forbid-initiator-pat" />
-      <span class="text-sm text-slate-200">{{ t('settings.runCredentialPolicy.toggle') }}</span>
+      <span class="text-sm text-default">{{ t('settings.runCredentialPolicy.toggle') }}</span>
     </label>
 
     <!-- What the choice actually costs, stated at the point of choosing rather than discovered
          later: attribution is a real feature, and turning this on is what trades it away. -->
-    <p v-if="forbid" class="text-[11px] text-amber-300">
+    <p v-if="forbid" class="text-[11px] text-app-warning-300">
       {{ t('settings.runCredentialPolicy.onHint') }}
     </p>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ t('settings.runCredentialPolicy.offHint') }}
     </p>
 

package/app/components/layout/AccountSkillSettings.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-slate-400">
+      <p class="mb-3 text-[11px] text-muted">
         {{ t('layout.accountSkills.intro') }}
       </p>
       <SkillLibraryManager :account-id="props.accountId" />

package/app/components/layout/AccountTeamSettings.vue

@@ -200,9 +200,11 @@ async function disconnectEmail() {
 <template>
   <div class="space-y-6 text-sm">
     <!-- personal-account CTA: members/roles/invitations need an organization -->
-    <section v-if="!isOrg" class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
-      <h3 class="mb-1 font-semibold text-white">{{ t('layout.accountTeam.org.ctaTitle') }}</h3>
-      <p class="mb-3 text-slate-400">
+    <section v-if="!isOrg" class="rounded-md border border-default bg-elevated/40 p-4">
+      <h3 class="mb-1 font-semibold text-highlighted">
+        {{ t('layout.accountTeam.org.ctaTitle') }}
+      </h3>
+      <p class="mb-3 text-muted">
         {{ t('layout.accountTeam.org.ctaBody') }}
       </p>
       <form class="flex gap-2" @submit.prevent="createOrganization">
@@ -219,12 +221,14 @@ async function disconnectEmail() {
 
     <!-- members -->
     <section v-if="isOrg">
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.members.title') }}</h3>
+      <h3 class="mb-2 font-semibold text-highlighted">
+        {{ t('layout.accountTeam.members.title') }}
+      </h3>
       <ul class="space-y-1">
         <li
           v-for="m in accounts.members"
           :key="m.userId"
-          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1"
+          class="flex items-center justify-between rounded-md bg-elevated/40 px-2 py-1"
         >
           <span class="truncate">{{ m.name || m.email || m.userId }}</span>
           <USelect
@@ -236,7 +240,7 @@ async function disconnectEmail() {
             class="w-44"
             @update:model-value="(r: AccountRole[]) => updateMemberRoles(m.userId, r)"
           />
-          <span v-else class="text-xs uppercase tracking-wide text-slate-400">
+          <span v-else class="text-xs uppercase tracking-wide text-muted">
             {{ m.roles.join(', ') }}
           </span>
           <!-- Offboarding: end every session this member holds, leaving their membership and
@@ -254,7 +258,7 @@ async function disconnectEmail() {
             @click="revokeSessions(m.userId, m.name || m.email || m.userId)"
           />
         </li>
-        <li v-if="accounts.members.length === 0" class="text-slate-500">
+        <li v-if="accounts.members.length === 0" class="text-dimmed">
           {{ t('layout.accountTeam.members.empty') }}
         </li>
       </ul>
@@ -262,7 +266,9 @@ async function disconnectEmail() {
 
     <!-- invitations -->
     <section v-if="isOrg">
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.invite.title') }}</h3>
+      <h3 class="mb-2 font-semibold text-highlighted">
+        {{ t('layout.accountTeam.invite.title') }}
+      </h3>
       <form class="flex gap-2" @submit.prevent="sendInvite">
         <UInput
           v-model="inviteEmail"
@@ -280,11 +286,11 @@ async function disconnectEmail() {
         <li
           v-for="inv in accounts.invitations"
           :key="inv.id"
-          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1"
+          class="flex items-center justify-between rounded-md bg-elevated/40 px-2 py-1"
         >
           <span class="truncate">{{ inv.email }}</span>
           <span class="flex items-center gap-2 text-xs">
-            <span class="uppercase tracking-wide text-slate-400">
+            <span class="uppercase tracking-wide text-muted">
               {{ invitationStatusLabel(inv.status) }}
             </span>
             <UButton
@@ -303,14 +309,14 @@ async function disconnectEmail() {
 
     <!-- email sender -->
     <section>
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.email.title') }}</h3>
-      <p v-if="!accounts.emailConfigured" class="text-slate-500">
+      <h3 class="mb-2 font-semibold text-highlighted">{{ t('layout.accountTeam.email.title') }}</h3>
+      <p v-if="!accounts.emailConfigured" class="text-dimmed">
         {{ t('layout.accountTeam.email.notEnabled') }}
       </p>
       <template v-else>
         <div
           v-if="accounts.emailConnection"
-          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1.5"
+          class="flex items-center justify-between rounded-md bg-elevated/40 px-2 py-1.5"
         >
           <i18n-t keypath="layout.accountTeam.email.connectedAs" tag="span" scope="global">
             <template #provider>
@@ -344,9 +350,11 @@ async function disconnectEmail() {
 
     <!-- account-wide provider API keys (admin-only): direct vendors + proxy gateways -->
     <section v-if="isAdmin" class="space-y-6">
-      <h3 class="mb-2 font-semibold text-white">{{ t('layout.accountTeam.apiKeys.title') }}</h3>
+      <h3 class="mb-2 font-semibold text-highlighted">
+        {{ t('layout.accountTeam.apiKeys.title') }}
+      </h3>
       <ProvidersApiKeysSection :account-id="accountId" category="direct" />
-      <div class="border-t border-slate-800 pt-6">
+      <div class="border-t border-default pt-6">
         <ProvidersApiKeysSection :account-id="accountId" category="proxy" />
       </div>
     </section>

package/app/components/layout/AiProvidersBanner.vue

@@ -24,14 +24,14 @@ const show = computed(() => showSetup.value || showPreset.value)
       <!-- (1) No usable AI source -->
       <div
         v-if="showSetup"
-        class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        class="w-full max-w-3xl rounded-2xl border-2 border-app-warning-500/70 bg-app-warning-950/95 p-5 shadow-2xl backdrop-blur"
         role="alert"
       >
         <div class="flex items-start gap-4">
-          <UIcon name="i-lucide-cpu" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <UIcon name="i-lucide-cpu" class="mt-0.5 h-9 w-9 shrink-0 text-app-warning-400" />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-lg font-semibold text-amber-100">
+              <h2 class="text-lg font-semibold text-app-warning-100">
                 {{ t('layout.aiProvidersBanner.setup.title') }}
               </h2>
               <UButton
@@ -43,7 +43,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 @click="ui.dismissAiSetup()"
               />
             </div>
-            <p class="mt-1 text-sm text-amber-200/90">
+            <p class="mt-1 text-sm text-app-warning-200/90">
               {{ t('layout.aiProvidersBanner.setup.body') }}
             </p>
             <div class="mt-4">
@@ -63,14 +63,17 @@ const show = computed(() => showSetup.value || showPreset.value)
       <!-- (2) Default preset references unavailable models -->
       <div
         v-else
-        class="w-full max-w-3xl rounded-2xl border border-amber-500/50 bg-amber-950/90 p-4 shadow-xl backdrop-blur"
+        class="w-full max-w-3xl rounded-2xl border border-app-warning-500/50 bg-app-warning-950/90 p-4 shadow-xl backdrop-blur"
         role="alert"
       >
         <div class="flex items-start gap-3">
-          <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-7 w-7 shrink-0 text-amber-400" />
+          <UIcon
+            name="i-lucide-triangle-alert"
+            class="mt-0.5 h-7 w-7 shrink-0 text-app-warning-400"
+          />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-sm font-semibold text-amber-100">
+              <h2 class="text-sm font-semibold text-app-warning-100">
                 {{ t('layout.aiProvidersBanner.preset.title') }}
               </h2>
               <UButton
@@ -82,7 +85,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 @click="ui.dismissAiPresetMismatch()"
               />
             </div>
-            <p class="mt-1 text-[13px] text-amber-200/90">
+            <p class="mt-1 text-[13px] text-app-warning-200/90">
               {{ t('layout.aiProvidersBanner.preset.body') }}
             </p>
             <div class="mt-3">

package/app/components/layout/AppearanceSwitcher.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { computed, ref } from 'vue'
+import ThemeImportModal from '~/components/theme/ThemeImportModal.vue'
+import { useThemeStore } from '~/stores/theme'
+
+// Appearance picker, shown at the sidebar bottom beside the language switcher: colour MODE
+// (system / light / dark) and THEME (the built-ins plus anything the user imported from the Nuxt
+// UI theme editor) in one dropdown, because they are two halves of one question ("what does the
+// app look like") and each on its own would cost a footer row for a control used once.
+//
+// Mode is `@nuxtjs/color-mode`'s preference (its own persisted storage); theme is the theme store.
+// Neither is a deployment setting or an RBAC matter, so the row shows for every tier and role.
+//
+// `collapsed` renders the icon-only rail variant; the dropdown itself is unchanged.
+withDefaults(defineProps<{ collapsed?: boolean }>(), { collapsed: false })
+
+const { t } = useI18n()
+const colorMode = useColorMode()
+const theme = useThemeStore()
+const importOpen = ref(false)
+
+type ModePreference = 'system' | 'light' | 'dark'
+const MODES: readonly ModePreference[] = ['system', 'light', 'dark']
+// Static literal keys, one per mode, so the typed-message-keys check sees them.
+const MODE_LABELS: Record<ModePreference, string> = {
+  system: 'appearance.mode.system',
+  light: 'appearance.mode.light',
+  dark: 'appearance.mode.dark',
+}
+const MODE_ICONS: Record<ModePreference, string> = {
+  system: 'i-lucide-monitor',
+  light: 'i-lucide-sun',
+  dark: 'i-lucide-moon',
+}
+
+function isMode(value: string): value is ModePreference {
+  return (MODES as readonly string[]).includes(value)
+}
+const preference = computed<ModePreference>(() =>
+  isMode(colorMode.preference) ? colorMode.preference : 'system',
+)
+
+const summary = computed(() => `${theme.active.name} · ${t(MODE_LABELS[preference.value])}`)
+
+const items = computed<DropdownMenuItem[][]>(() => [
+  MODES.map((mode) => ({
+    label: t(MODE_LABELS[mode]),
+    icon: MODE_ICONS[mode],
+    type: 'checkbox' as const,
+    checked: preference.value === mode,
+    onSelect: () => {
+      colorMode.preference = mode
+    },
+  })),
+  [
+    { label: t('appearance.theme.section'), type: 'label' as const },
+    ...theme.themes.map((candidate) => ({
+      label: candidate.name,
+      type: 'checkbox' as const,
+      checked: theme.current === candidate.id,
+      onSelect: () => theme.select(candidate.id),
+    })),
+  ],
+  [
+    {
+      label: t('appearance.theme.import'),
+      icon: 'i-lucide-palette',
+      onSelect: () => {
+        importOpen.value = true
+      },
+    },
+    ...(theme.isCustom
+      ? [
+          {
+            label: t('appearance.theme.remove'),
+            icon: 'i-lucide-trash-2',
+            color: 'error' as const,
+            onSelect: () => theme.removeCustom(theme.current),
+          },
+        ]
+      : []),
+  ],
+])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
+    <button
+      type="button"
+      data-testid="appearance-switcher"
+      :aria-label="t('appearance.switcher')"
+      :title="collapsed ? `${t('appearance.switcher')}: ${summary}` : undefined"
+      class="flex w-full items-center gap-2 rounded-lg border border-default bg-default/60 p-2 text-start transition hover:bg-elevated/60"
+      :class="collapsed ? 'justify-center' : ''"
+    >
+      <UIcon :name="MODE_ICONS[preference]" class="h-4 w-4 shrink-0 text-muted" />
+      <div v-if="!collapsed" class="min-w-0 flex-1">
+        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+          {{ t('appearance.switcher') }}
+        </div>
+        <div class="truncate text-xs font-medium text-highlighted">{{ summary }}</div>
+      </div>
+      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
+    </button>
+  </UDropdownMenu>
+  <ThemeImportModal v-model:open="importOpen" />
+</template>

package/app/components/layout/BoardSwitcher.vue

@@ -258,20 +258,17 @@ async function submitPrompt() {
     >
       <button
         type="button"
-        class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-start transition hover:bg-slate-800/60"
+        class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-start transition hover:bg-elevated/60"
         :disabled="busy"
       >
         <UIcon
           :name="accounts.activeAccount?.type === 'org' ? 'i-lucide-users' : 'i-lucide-user'"
-          class="h-3.5 w-3.5 shrink-0 text-slate-400"
+          class="h-3.5 w-3.5 shrink-0 text-muted"
         />
-        <span class="truncate text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        <span class="truncate text-[11px] font-medium uppercase tracking-wide text-muted">
           {{ accounts.activeAccount?.name ?? t('layout.boardSwitcher.accountFallback') }}
         </span>
-        <UIcon
-          name="i-lucide-chevrons-up-down"
-          class="ms-auto h-3.5 w-3.5 shrink-0 text-slate-600"
-        />
+        <UIcon name="i-lucide-chevrons-up-down" class="ms-auto h-3.5 w-3.5 shrink-0 text-app-600" />
       </button>
     </UDropdownMenu>
 
@@ -284,20 +281,20 @@ async function submitPrompt() {
             ? (workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback'))
             : undefined
         "
-        class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-start transition hover:bg-slate-800/60"
+        class="flex w-full items-center gap-2 rounded-lg border border-default bg-default/60 px-2.5 py-1.5 text-start transition hover:bg-elevated/60"
         :class="collapsed ? 'justify-center' : ''"
         :disabled="busy"
         data-testid="board-switcher"
         :data-board-id="workspace.workspaceId ?? ''"
       >
-        <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
-        <span v-if="!collapsed" class="truncate text-sm font-medium text-white">
+        <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-primary" />
+        <span v-if="!collapsed" class="truncate text-sm font-medium text-highlighted">
           {{ workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback') }}
         </span>
         <UIcon
           v-if="!collapsed"
           name="i-lucide-chevron-down"
-          class="ms-auto h-4 w-4 shrink-0 text-slate-500"
+          class="ms-auto h-4 w-4 shrink-0 text-dimmed"
         />
       </button>
     </UDropdownMenu>

package/app/components/layout/BoardToolbar.vue

@@ -132,7 +132,7 @@ const decisionItems = computed(() =>
        the board's top overlay region; this renders only the pill and re-enables pointer events
        on it. Self-anchoring here is what let a banner cover the toolbar outright. -->
   <div
-    class="pointer-events-auto flex max-w-full items-center gap-1 overflow-x-auto rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
+    class="pointer-events-auto flex max-w-full items-center gap-1 overflow-x-auto rounded-full border border-muted bg-default/90 px-2 py-1.5 shadow-xl backdrop-blur"
   >
     <!-- zoom controls -->
     <IconButton
@@ -153,14 +153,14 @@ const decisionItems = computed(() =>
          drops on narrow viewports) so the zoom level is never a mystery. -->
     <button
       type="button"
-      class="w-16 rounded text-center text-xs tabular-nums text-slate-300 hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-slate-400/60 sm:w-20"
+      class="w-16 rounded text-center text-xs tabular-nums text-toned hover:bg-elevated focus-visible:ring-2 focus-visible:ring-app-400/60 sm:w-20"
       :title="t('board.toolbar.resetZoom')"
       :aria-label="t('board.toolbar.resetZoom')"
       data-testid="board-zoom-reset"
       @click="resetZoom()"
     >
       {{ zoomPct }}%
-      <span class="hidden text-[9px] uppercase tracking-wide text-slate-500 sm:block">{{
+      <span class="hidden text-[9px] uppercase tracking-wide text-dimmed sm:block">{{
         lodLabel
       }}</span>
     </button>

package/app/components/layout/CommandBar.vue

@@ -256,8 +256,8 @@ function indexOf(cmd: Command) {
   <UModal v-model:open="open" :ui="{ content: 'max-w-xl' }">
     <template #content>
       <div class="flex flex-col" data-testid="command-bar" @keydown="onKeydown">
-        <div class="flex items-center gap-2 border-b border-slate-800 px-3">
-          <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0 text-slate-500" />
+        <div class="flex items-center gap-2 border-b border-default px-3">
+          <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0 text-dimmed" />
           <UInput
             ref="inputRef"
             v-model="query"
@@ -271,14 +271,12 @@ function indexOf(cmd: Command) {
         </div>
 
         <div class="max-h-80 overflow-y-auto p-1.5">
-          <p v-if="filtered.length === 0" class="px-3 py-6 text-center text-sm text-slate-500">
+          <p v-if="filtered.length === 0" class="px-3 py-6 text-center text-sm text-dimmed">
             {{ t('layout.commandBar.noMatches') }}
           </p>
 
           <div v-for="group in groups" :key="group.name" class="mb-1">
-            <p
-              class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
-            >
+            <p class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ group.name }}
             </p>
             <button
@@ -289,13 +287,13 @@ function indexOf(cmd: Command) {
               class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-start text-sm transition"
               :class="
                 indexOf(cmd) === activeIndex
-                  ? 'bg-slate-800 text-slate-100'
-                  : 'text-slate-300 hover:bg-slate-800/60'
+                  ? 'bg-elevated text-app-100'
+                  : 'text-toned hover:bg-elevated/60'
               "
               @mousemove="activeIndex = indexOf(cmd)"
               @click="run(cmd)"
             >
-              <UIcon :name="cmd.icon" class="h-4 w-4 shrink-0 text-slate-400" />
+              <UIcon :name="cmd.icon" class="h-4 w-4 shrink-0 text-muted" />
               <span class="truncate">{{ cmd.label }}</span>
             </button>
           </div>

package/app/components/layout/ConnectionStatusBanner.vue

@@ -65,7 +65,7 @@ onBeforeUnmount(clearTimer)
     <div v-if="reconnecting || offline" class="pointer-events-none flex w-full justify-center">
       <div
         v-if="reconnecting"
-        class="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/60 bg-amber-950/90 px-3 py-1.5 text-xs text-amber-100 shadow-lg backdrop-blur"
+        class="pointer-events-auto flex items-center gap-2 rounded-full border border-app-warning-500/60 bg-app-warning-950/90 px-3 py-1.5 text-xs text-app-warning-100 shadow-lg backdrop-blur"
         role="status"
         aria-live="polite"
         data-testid="stream-reconnecting"
@@ -75,7 +75,7 @@ onBeforeUnmount(clearTimer)
       </div>
       <div
         v-else
-        class="pointer-events-auto flex items-center gap-2 rounded-full border border-rose-500/60 bg-rose-950/90 px-3 py-1.5 text-xs text-rose-100 shadow-lg backdrop-blur"
+        class="pointer-events-auto flex items-center gap-2 rounded-full border border-app-error-500/60 bg-app-error-950/90 px-3 py-1.5 text-xs text-app-error-100 shadow-lg backdrop-blur"
         role="status"
         aria-live="polite"
         data-testid="stream-offline"

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -52,16 +52,16 @@ function openConfig(event: MouseEvent) {
   <Transition name="fade">
     <div
       v-if="show"
-      class="pointer-events-auto w-full max-w-3xl rounded-2xl border border-sky-500/50 bg-sky-950/90 p-4 shadow-xl backdrop-blur"
+      class="pointer-events-auto w-full max-w-3xl rounded-2xl border border-app-info-500/50 bg-app-info-950/90 p-4 shadow-xl backdrop-blur"
       role="status"
       aria-live="polite"
       data-testid="default-test-env-banner"
     >
       <div class="flex items-start gap-3">
-        <UIcon name="i-lucide-flask-conical" class="mt-0.5 h-7 w-7 shrink-0 text-sky-400" />
+        <UIcon name="i-lucide-flask-conical" class="mt-0.5 h-7 w-7 shrink-0 text-app-info-400" />
         <div class="min-w-0 flex-1">
           <div class="flex items-start justify-between gap-3">
-            <h2 class="text-sm font-semibold text-sky-100">
+            <h2 class="text-sm font-semibold text-app-info-100">
               {{ t('layout.defaultTestEnvBanner.title') }}
             </h2>
             <UButton
@@ -74,7 +74,7 @@ function openConfig(event: MouseEvent) {
               @click="ui.dismissDefaultProvision()"
             />
           </div>
-          <p class="mt-1 text-[13px] text-sky-200/90">
+          <p class="mt-1 text-[13px] text-app-info-200/90">
             {{ t('layout.defaultTestEnvBanner.body') }}
           </p>
           <div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2">
@@ -92,7 +92,7 @@ function openConfig(event: MouseEvent) {
             <!-- The URL itself, shown so it can be read and copied, not just clicked. -->
             <a
               :href="configUrl"
-              class="min-w-0 truncate font-mono text-[11px] text-sky-300/80 underline decoration-dotted underline-offset-2 hover:text-sky-200"
+              class="min-w-0 truncate font-mono text-[11px] text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
               data-testid="default-test-env-url"
               @click="openConfig"
             >

package/app/components/layout/GitHubPatBanner.vue

@@ -20,14 +20,14 @@ const show = computed(() => !!setupUrl.value && !dismissed.value)
          re-enables pointer events on it. -->
     <div v-if="show" class="pointer-events-auto w-full max-w-3xl">
       <div
-        class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        class="w-full max-w-3xl rounded-2xl border-2 border-app-warning-500/70 bg-app-warning-950/95 p-5 shadow-2xl backdrop-blur"
         role="alert"
       >
         <div class="flex items-start gap-4">
-          <UIcon name="i-lucide-key-round" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <UIcon name="i-lucide-key-round" class="mt-0.5 h-9 w-9 shrink-0 text-app-warning-400" />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-lg font-semibold text-amber-100">
+              <h2 class="text-lg font-semibold text-app-warning-100">
                 {{ t('layout.githubPatBanner.title') }}
               </h2>
               <UButton
@@ -43,7 +43,7 @@ const show = computed(() => !!setupUrl.value && !dismissed.value)
                 "
               />
             </div>
-            <p class="mt-1 text-sm text-amber-200/90">
+            <p class="mt-1 text-sm text-app-warning-200/90">
               {{ t('layout.githubPatBanner.body') }}
             </p>
 
@@ -59,7 +59,7 @@ const show = computed(() => !!setupUrl.value && !dismissed.value)
               >
                 {{ t('layout.githubPatBanner.createToken') }}
               </UButton>
-              <p class="mt-2 text-xs text-amber-300/70">
+              <p class="mt-2 text-xs text-app-warning-300/70">
                 <i18n-t keypath="layout.githubPatBanner.thenSet" tag="span" scope="global">
                   <template #envVar>
                     <code class="font-mono">GITHUB_PAT</code>