@cat-factory/app 0.302.2 → 0.303.1

package/app/components/layout/GitHubPatPermissionsBanner.vue

@@ -102,15 +102,15 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
   <Transition name="fade">
     <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-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"
         data-testid="github-pat-permissions-banner"
       >
         <div class="flex items-start gap-4">
-          <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-9 w-9 shrink-0 text-red-400" />
+          <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-9 w-9 shrink-0 text-app-error-400" />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-lg font-semibold text-red-100">
+              <h2 class="text-lg font-semibold text-app-error-100">
                 {{
                   claim === 'rejected'
                     ? t('layout.githubPatPermissionsBanner.rejectedTitle')
@@ -131,7 +131,7 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
               />
             </div>
 
-            <p class="mt-1 text-sm text-red-200/90">
+            <p class="mt-1 text-sm text-app-error-200/90">
               {{
                 claim === 'rejected'
                   ? t('layout.githubPatPermissionsBanner.rejectedBody')
@@ -141,11 +141,11 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
 
             <!-- The established gaps, named one by one. A bare "permissions are missing" leaves
                  the reader to guess which box to tick on a form with dozens. -->
-            <p v-if="missing.length" class="mt-3 text-sm text-red-100">
+            <p v-if="missing.length" class="mt-3 text-sm text-app-error-100">
               <span class="font-medium">{{ t('layout.githubPatPermissionsBanner.missing') }}</span>
               {{ missing.map(capabilityLabel).join(', ') }}
             </p>
-            <p v-if="advisory.length" class="mt-1 text-xs text-red-200/80">
+            <p v-if="advisory.length" class="mt-1 text-xs text-app-error-200/80">
               {{
                 t('layout.githubPatPermissionsBanner.alsoMissing', {
                   capabilities: advisory.map(capabilityLabel).join(', '),
@@ -155,7 +155,10 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
 
             <!-- For a fine-grained token, WHICH repositories it was not granted is the whole
                  remedy: the permission list is right and the repository selection is not. -->
-            <p v-if="report && report.deniedRepos.length" class="mt-1 text-xs text-red-200/80">
+            <p
+              v-if="report && report.deniedRepos.length"
+              class="mt-1 text-xs text-app-error-200/80"
+            >
               {{
                 t('layout.githubPatPermissionsBanner.deniedRepos', {
                   repos: report.deniedRepos.join(', '),
@@ -163,7 +166,7 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
               }}
             </p>
 
-            <p class="mt-2 text-xs text-red-200/80">{{ t(sourceKey) }}</p>
+            <p class="mt-2 text-xs text-app-error-200/80">{{ t(sourceKey) }}</p>
 
             <div class="mt-4">
               <UButton
@@ -185,7 +188,7 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
                    no prefill at all, so its permissions are spelled out. Saying so is the point:
                    a link that silently arrived with nothing selected reads as "already done for
                    you", which is how the missing permission got there in the first place. -->
-              <p class="mt-2 text-xs text-red-300/70">
+              <p class="mt-2 text-xs text-app-error-300/70">
                 {{
                   kind === 'fine_grained'
                     ? t('layout.githubPatPermissionsBanner.fineGrainedHint', {
@@ -196,7 +199,10 @@ const fineGrainedPermissions = GITHUB_PAT_FINE_GRAINED_PERMISSIONS.join(', ')
               </p>
               <!-- A fine-grained verdict is a SAMPLE of the linked repositories. Declaring the
                    remainder keeps a clean-looking list from reading as a guarantee. -->
-              <p v-if="report && report.unprobedRepoCount > 0" class="mt-1 text-xs text-red-300/60">
+              <p
+                v-if="report && report.unprobedRepoCount > 0"
+                class="mt-1 text-xs text-app-error-300/60"
+              >
                 {{
                   t('layout.githubPatPermissionsBanner.sampled', {
                     checked: report.probedRepos.length,

package/app/components/layout/InfraSetupBanner.vue

@@ -208,8 +208,8 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
         class="pointer-events-auto w-full max-w-3xl rounded-2xl border-2 p-5 shadow-2xl backdrop-blur"
         :class="
           card.kind === 'outage'
-            ? 'border-red-500/70 bg-red-950/95'
-            : 'border-amber-500/70 bg-amber-950/95'
+            ? 'border-app-error-500/70 bg-app-error-950/95'
+            : 'border-app-warning-500/70 bg-app-warning-950/95'
         "
         :data-testid="`infra-setup-banner-${card.area}`"
         :data-infra-status="card.kind === 'outage' ? 'unreachable' : 'not_defined'"
@@ -218,13 +218,13 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
           <UIcon
             :name="card.kind === 'outage' ? 'i-lucide-plug-zap' : AREA_META[card.area].icon"
             class="mt-0.5 h-9 w-9 shrink-0"
-            :class="card.kind === 'outage' ? 'text-red-400' : 'text-amber-400'"
+            :class="card.kind === 'outage' ? 'text-app-error-400' : '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"
-                :class="card.kind === 'outage' ? 'text-red-100' : 'text-amber-100'"
+                :class="card.kind === 'outage' ? 'text-app-error-100' : 'text-app-warning-100'"
               >
                 {{ t(titleKey(card)) }}
               </h2>
@@ -241,7 +241,7 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
             </div>
             <p
               class="mt-1 text-sm"
-              :class="card.kind === 'outage' ? 'text-red-200/90' : 'text-amber-200/90'"
+              :class="card.kind === 'outage' ? 'text-app-error-200/90' : 'text-app-warning-200/90'"
             >
               {{
                 card.kind === 'outage'
@@ -256,7 +256,7 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
                  never the only thing that explains the card. -->
             <p
               v-if="card.detail"
-              class="mt-2 truncate font-mono text-xs text-red-300/80"
+              class="mt-2 truncate font-mono text-xs text-app-error-300/80"
               :title="card.detail"
               :data-testid="`infra-setup-detail-${card.area}`"
             >

package/app/components/layout/IntegrationsHub.vue

@@ -377,7 +377,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
       <!-- Named for the same reason `model-providers-hub` is: the tutorial tour that explains
            what a connection adds to a run points at this list. -->
       <div class="space-y-5" data-testid="integrations-hub">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{ t('layout.integrationsHub.intro') }}
         </p>
 
@@ -385,13 +385,13 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
              run isn't blocked on hunting for them. Hidden once anything is connected. -->
         <div
           v-if="!anyConnected && recommendedActions.length"
-          class="rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+          class="rounded-lg border border-primary/40 bg-primary/10 p-3"
         >
-          <div class="mb-2 flex items-center gap-2 text-sm font-medium text-primary-200">
+          <div class="mb-2 flex items-center gap-2 text-sm font-medium text-primary">
             <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0" />
             <span>{{ t('layout.integrationsHub.getStarted.title') }}</span>
           </div>
-          <p class="mb-3 text-xs text-slate-300">
+          <p class="mb-3 text-xs text-toned">
             {{ t('layout.integrationsHub.getStarted.body') }}
           </p>
           <div class="flex flex-wrap gap-2">
@@ -417,12 +417,12 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
           class="w-full"
         />
 
-        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
+        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-dimmed">
           {{ t('layout.integrationsHub.noMatches', { query }) }}
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ group.title }}
           </h3>
           <div class="space-y-1.5">
@@ -430,20 +430,20 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
+              class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               @click="item.onClick()"
             >
-              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-toned" />
               <div class="min-w-0 flex-1">
                 <div class="flex items-center gap-2">
-                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <span class="truncate text-sm font-medium text-app-100">{{ item.label }}</span>
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.integrationsHub.status.connected') }}
                   </UBadge>
                   <UBadge v-else-if="item.attention" color="warning" variant="subtle" size="sm">
                     {{ item.attentionLabel || t('layout.integrationsHub.status.needsAttention') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-slate-500">{{
+                  <span v-else class="text-[11px] text-dimmed">{{
                     t('layout.integrationsHub.status.notConnected')
                   }}</span>
                   <UBadge
@@ -455,11 +455,11 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                     {{ t('layout.integrationsHub.status.recommended') }}
                   </UBadge>
                 </div>
-                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+                <p class="truncate text-xs text-muted">{{ item.description }}</p>
               </div>
               <UIcon
                 name="i-lucide-chevron-right"
-                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+                class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
             </button>
           </div>
@@ -468,17 +468,17 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
           <button
             v-if="group.footerLink"
             type="button"
-            class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-start text-xs text-slate-400 transition hover:bg-slate-900/60 hover:text-slate-200"
+            class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-start text-xs text-muted transition hover:bg-default/60 hover:text-default"
             @click="group.footerLink.onClick()"
           >
             <UIcon :name="group.footerLink.icon" class="h-3.5 w-3.5 shrink-0" />
             <span class="flex-1 truncate">{{ group.footerLink.label }}</span>
-            <span v-if="group.footerLink.status" class="shrink-0 text-slate-500">{{
+            <span v-if="group.footerLink.status" class="shrink-0 text-dimmed">{{
               group.footerLink.status
             }}</span>
             <UIcon
               name="i-lucide-chevron-right"
-              class="h-3.5 w-3.5 shrink-0 text-slate-600 rtl:-scale-x-100"
+              class="h-3.5 w-3.5 shrink-0 text-app-600 rtl:-scale-x-100"
             />
           </button>
         </section>

package/app/components/layout/LanguageSwitcher.vue

@@ -45,17 +45,17 @@ const items = computed<DropdownMenuItem[][]>(() => [
       data-testid="language-switcher"
       :aria-label="t('language.switcher')"
       :title="collapsed ? `${t('language.switcher')}: ${current}` : undefined"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
+      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="i-lucide-languages" class="h-4 w-4 shrink-0 text-slate-400" />
+      <UIcon name="i-lucide-languages" 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-slate-500">
+        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('language.switcher') }}
         </div>
-        <div class="truncate text-xs font-medium text-white">{{ current }}</div>
+        <div class="truncate text-xs font-medium text-highlighted">{{ current }}</div>
       </div>
-      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-slate-500" />
+      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
     </button>
   </UDropdownMenu>
 </template>

package/app/components/layout/ModelProvidersHub.vue

@@ -171,21 +171,18 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
   >
     <template #body>
       <div class="space-y-5" data-testid="model-providers-hub">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{ t('layout.modelProvidersHub.intro') }}
         </p>
 
         <!-- Nothing connected at all is a hard stop, not a nudge: no provider means no agent
              step can run. Say so plainly rather than showing an empty list of options. -->
-        <div
-          v-if="!anyConnected"
-          class="rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
-        >
-          <div class="mb-1.5 flex items-center gap-2 text-sm font-medium text-primary-200">
+        <div v-if="!anyConnected" class="rounded-lg border border-primary/40 bg-primary/10 p-3">
+          <div class="mb-1.5 flex items-center gap-2 text-sm font-medium text-primary">
             <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0" />
             <span>{{ t('layout.modelProvidersHub.getStarted.title') }}</span>
           </div>
-          <p class="text-xs text-slate-300">
+          <p class="text-xs text-toned">
             {{ t('layout.modelProvidersHub.getStarted.body') }}
           </p>
         </div>
@@ -198,12 +195,12 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
           class="w-full"
         />
 
-        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
+        <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-dimmed">
           {{ t('layout.modelProvidersHub.noMatches', { query }) }}
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ group.title }}
           </h3>
           <div class="space-y-1.5">
@@ -211,18 +208,18 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
+              class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               :data-testid="`model-provider-${item.key}`"
               @click="item.onClick()"
             >
-              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-toned" />
               <div class="min-w-0 flex-1">
                 <div class="flex items-center gap-2">
-                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <span class="truncate text-sm font-medium text-app-100">{{ item.label }}</span>
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.modelProvidersHub.status.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-slate-500">{{
+                  <span v-else class="text-[11px] text-dimmed">{{
                     t('layout.modelProvidersHub.status.notConnected')
                   }}</span>
                   <UBadge
@@ -234,15 +231,15 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
                     {{ t('layout.modelProvidersHub.status.recommended') }}
                   </UBadge>
                 </div>
-                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+                <p class="truncate text-xs text-muted">{{ item.description }}</p>
               </div>
               <UIcon
                 name="i-lucide-chevron-right"
-                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+                class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
             </button>
           </div>
-          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-slate-500">{{ group.note }}</p>
+          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-dimmed">{{ group.note }}</p>
         </section>
       </div>
     </template>

package/app/components/layout/NotificationsInbox.vue

@@ -406,7 +406,7 @@ function revealDecision(n: Notification) {
 
     <template #content>
       <div class="max-h-[28rem] w-[min(24rem,92vw)] overflow-y-auto p-2">
-        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('layout.notifications.heading') }}
         </div>
         <div
@@ -417,8 +417,8 @@ function revealDecision(n: Notification) {
           class="rounded-lg border p-2.5 mt-1.5"
           :class="
             isUrgent(n)
-              ? 'border-error-500/60 bg-error-500/10'
-              : 'border-slate-700/60 bg-slate-800/40'
+              ? 'border-app-error-500/60 bg-app-error-500/10'
+              : 'border-muted/60 bg-elevated/40'
           "
         >
           <div class="flex items-start gap-2">
@@ -429,7 +429,7 @@ function revealDecision(n: Notification) {
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-1.5">
                 <button
-                  class="block min-w-0 flex-1 truncate text-start text-sm font-medium text-slate-200 hover:underline"
+                  class="block min-w-0 flex-1 truncate text-start text-sm font-medium text-default hover:underline"
                   :title="n.title"
                   @click="reveal(n)"
                 >
@@ -437,18 +437,18 @@ function revealDecision(n: Notification) {
                 </button>
                 <span
                   v-if="isUrgent(n)"
-                  class="shrink-0 rounded bg-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-error-400"
+                  class="shrink-0 rounded bg-app-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-app-error-400"
                 >
                   {{ t('layout.notifications.overdue') }}
                 </span>
               </div>
-              <p class="mt-0.5 text-[11px] leading-snug text-slate-400">{{ n.body }}</p>
+              <p class="mt-0.5 text-[11px] leading-snug text-muted">{{ n.body }}</p>
               <a
                 v-if="n.payload?.prUrl"
                 :href="n.payload.prUrl"
                 target="_blank"
                 rel="noopener"
-                class="mt-1 inline-flex items-center gap-1 text-[11px] text-sky-400 hover:underline"
+                class="mt-1 inline-flex items-center gap-1 text-[11px] text-app-info-400 hover:underline"
               >
                 <UIcon name="i-lucide-external-link" class="h-3 w-3" />
                 {{ t('layout.notifications.openPr') }}
@@ -470,8 +470,8 @@ function revealDecision(n: Notification) {
                   class="flex items-center gap-1 text-start text-[11px]"
                   :class="
                     canOpenFailingRun(run)
-                      ? 'text-sky-400 hover:underline'
-                      : 'cursor-default text-slate-500'
+                      ? 'text-app-info-400 hover:underline'
+                      : 'cursor-default text-dimmed'
                   "
                   :title="
                     canOpenFailingRun(run) ? undefined : t('layout.notifications.failingRunGone')
@@ -486,7 +486,7 @@ function revealDecision(n: Notification) {
                     })
                   }}</span>
                 </component>
-                <span v-if="failingRunsOmitted(n) > 0" class="text-[11px] text-slate-500">
+                <span v-if="failingRunsOmitted(n) > 0" class="text-[11px] text-dimmed">
                   {{ t('layout.notifications.failingRunsMore', { count: failingRunsOmitted(n) }) }}
                 </span>
               </div>

package/app/components/layout/PersonalSetupModal.vue

@@ -112,12 +112,12 @@ const groups = computed<PersonalGroup[]>(() => {
   >
     <template #body>
       <div class="space-y-5">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{ t('layout.personalSetup.intro') }}
         </p>
 
         <section v-for="group in groups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ group.title }}
           </h3>
           <div class="space-y-1.5">
@@ -125,25 +125,25 @@ const groups = computed<PersonalGroup[]>(() => {
               v-for="item in group.items"
               :key="item.key"
               type="button"
-              class="flex w-full items-center gap-3 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 text-start transition hover:border-slate-700 hover:bg-slate-900"
+              class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               @click="item.onClick()"
             >
-              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-toned" />
               <div class="min-w-0 flex-1">
                 <div class="flex items-center gap-2">
-                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <span class="truncate text-sm font-medium text-app-100">{{ item.label }}</span>
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.personalSetup.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-slate-500">
+                  <span v-else class="text-[11px] text-dimmed">
                     {{ t('layout.personalSetup.notConnected') }}
                   </span>
                 </div>
-                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+                <p class="truncate text-xs text-muted">{{ item.description }}</p>
               </div>
               <UIcon
                 name="i-lucide-chevron-right"
-                class="h-4 w-4 shrink-0 text-slate-500 rtl:-scale-x-100"
+                class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
             </button>
           </div>

package/app/components/layout/ProviderConfigBanner.vue

@@ -42,14 +42,14 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
          renders only its card and 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-plug" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <UIcon name="i-lucide-plug" 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">
                 {{
                   pending.length > 1
                     ? t('layout.providerConfigBanner.titleMany')
@@ -69,7 +69,7 @@ const show = computed(() => pending.value.length > 0 && !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.providerConfigBanner.body') }}
             </p>
             <div class="mt-4 flex flex-wrap gap-2">

package/app/components/layout/RolePrompt.vue

@@ -29,7 +29,7 @@ function pick(role: UiRole) {
   <UModal v-model:open="open" :title="t('uiRole.prompt.title')" :ui="{ content: 'max-w-lg' }">
     <template #body>
       <div class="space-y-4" data-testid="role-prompt">
-        <p class="text-sm text-slate-300">{{ t('uiRole.prompt.intro') }}</p>
+        <p class="text-sm text-toned">{{ t('uiRole.prompt.intro') }}</p>
         <div class="space-y-2">
           <button
             v-for="role in UI_ROLES"
@@ -40,23 +40,23 @@ function pick(role: UiRole) {
             class="flex w-full items-center gap-3 rounded-lg border p-3 text-start transition"
             :class="
               role === uiRole.role && uiRole.chosen
-                ? 'border-indigo-500/60 bg-indigo-500/10'
-                : 'border-slate-800 bg-slate-900/60 hover:border-slate-600 hover:bg-slate-800/60'
+                ? 'border-primary/60 bg-primary/10'
+                : 'border-default bg-default/60 hover:border-app-600 hover:bg-elevated/60'
             "
             @click="pick(role)"
           >
-            <UIcon :name="ROLE_PRESENTATION[role].icon" class="h-5 w-5 shrink-0 text-primary-400" />
+            <UIcon :name="ROLE_PRESENTATION[role].icon" class="h-5 w-5 shrink-0 text-primary" />
             <div class="min-w-0 flex-1">
-              <div class="text-sm font-medium text-slate-100">
+              <div class="text-sm font-medium text-app-100">
                 {{ t(ROLE_PRESENTATION[role].labelKey) }}
               </div>
-              <p class="text-xs text-slate-400">{{ t(ROLE_PRESENTATION[role].hintKey) }}</p>
+              <p class="text-xs text-muted">{{ t(ROLE_PRESENTATION[role].hintKey) }}</p>
             </div>
           </button>
         </div>
         <!-- The choice is not a commitment, and saying so is what makes the narrowed role
              pickable: it is one dropdown at the top of the sidebar to leave again. -->
-        <p class="text-[11px] leading-snug text-slate-500">{{ t('uiRole.prompt.change') }}</p>
+        <p class="text-[11px] leading-snug text-dimmed">{{ t('uiRole.prompt.change') }}</p>
       </div>
     </template>
     <template #footer>

package/app/components/layout/SideBar.vue

@@ -13,6 +13,7 @@
 // independently from the role / tier switchers at the top and the rail toggle.
 import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
+import AppearanceSwitcher from '~/components/layout/AppearanceSwitcher.vue'
 import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
 import UiModeSwitcher from '~/components/layout/UiModeSwitcher.vue'
 import UiRoleSwitcher from '~/components/layout/UiRoleSwitcher.vue'
@@ -154,7 +155,7 @@ watch(
   >
     <div
       v-if="ui.mobileNavOpen"
-      class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
+      class="fixed inset-0 z-30 bg-app-950/60 backdrop-blur-sm lg:hidden"
       data-testid="sidebar-backdrop"
       role="button"
       tabindex="-1"
@@ -171,7 +172,7 @@ watch(
     :aria-modal="drawerOpen ? 'true' : undefined"
     :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
-    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-slate-800 bg-slate-900/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
+    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-default bg-default/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-default/80"
     :class="[
       ui.mobileNavOpen
         ? 'translate-x-0'
@@ -226,7 +227,7 @@ watch(
          and reach every action below. -->
       <button
         type="button"
-        class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 py-2 text-start text-sm text-slate-400 transition hover:border-slate-500 hover:bg-slate-800"
+        class="flex items-center gap-2 rounded-lg border border-muted bg-elevated/60 py-2 text-start text-sm text-muted transition hover:border-app-500 hover:bg-elevated"
         :class="railed ? 'justify-center px-0' : 'px-2.5'"
         :aria-label="t('nav.commandBar')"
         :title="railed ? t('nav.commandBar') : undefined"
@@ -249,7 +250,7 @@ watch(
         <section>
           <h2
             v-if="!railed"
-            class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+            class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
           >
             {{ t(section.labelKey) }}
           </h2>
@@ -278,6 +279,7 @@ watch(
     </div>
 
     <div class="mt-auto space-y-2">
+      <AppearanceSwitcher :collapsed="railed" />
       <LanguageSwitcher :collapsed="railed" />
       <UserMenu :collapsed="railed" />
     </div>