@cat-factory/app 0.302.1 → 0.303.0

package/app/components/settings/McpAuthorizeScreen.vue

@@ -141,33 +141,31 @@ function backToApp() {
 
 <template>
   <div
-    class="flex min-h-screen w-screen items-center justify-center bg-slate-950 p-4 text-slate-100"
+    class="flex min-h-screen w-screen items-center justify-center bg-app-950 p-4 text-app-100"
     data-testid="mcp-authorize"
   >
-    <div
-      class="w-full max-w-md rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
-    >
+    <div class="w-full max-w-md rounded-xl border border-default bg-default/80 p-8 backdrop-blur">
       <template v-if="screen === 'loading'">
-        <UIcon name="i-lucide-loader" class="mx-auto h-10 w-10 animate-spin text-indigo-400" />
+        <UIcon name="i-lucide-loader" class="mx-auto h-10 w-10 animate-spin text-primary" />
       </template>
 
       <template v-else-if="screen === 'failed'">
-        <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-red-400" />
+        <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-app-error-400" />
         <h1
-          class="mb-1 text-center text-lg font-semibold text-white"
+          class="mb-1 text-center text-lg font-semibold text-highlighted"
           data-testid="mcp-authorize-failed"
         >
           {{ t('mcpAuthorize.error.title') }}
         </h1>
-        <p class="mb-6 text-center text-sm break-words text-slate-400">{{ detail }}</p>
+        <p class="mb-6 text-center text-sm break-words text-muted">{{ detail }}</p>
         <UButton block color="neutral" variant="subtle" @click="backToApp">
           {{ t('mcpAuthorize.back') }}
         </UButton>
       </template>
 
       <template v-else>
-        <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-center text-lg font-semibold text-white">
+        <UIcon name="i-lucide-plug-zap" class="mx-auto mb-3 h-10 w-10 text-primary" />
+        <h1 class="mb-1 text-center text-lg font-semibold text-highlighted">
           {{ t('mcpAuthorize.title', { client: clientName }) }}
         </h1>
         <!-- The origin is the one fact here an attacker cannot choose: it was matched against what
@@ -176,11 +174,11 @@ function backToApp() {
              The copy reads "It says it is {client}, and …" in every locale, so BOTH holes have to
              be filled: an unpassed `client` renders a sentence naming nobody, on the one screen
              whose whole subject is who is asking. -->
-        <p class="mb-6 text-center text-sm text-slate-400">
+        <p class="mb-6 text-center text-sm text-muted">
           {{ t('mcpAuthorize.subtitle', { client: clientName, origin: redirectOrigin }) }}
         </p>
 
-        <div v-if="!workspaces.length" class="mb-6 text-center text-sm text-amber-300">
+        <div v-if="!workspaces.length" class="mb-6 text-center text-sm text-app-warning-300">
           {{ t('mcpAuthorize.noWorkspaces') }}
         </div>
 
@@ -213,7 +211,7 @@ function backToApp() {
                host rather than acted on: raising the grant stays a thing a person does. -->
           <p
             v-if="requestedScope"
-            class="mb-6 text-xs text-amber-300"
+            class="mb-6 text-xs text-app-warning-300"
             data-testid="mcp-authorize-requested-scope"
           >
             {{
@@ -227,7 +225,7 @@ function backToApp() {
 
         <p
           v-if="decisionError"
-          class="mb-4 text-center text-sm break-words text-red-400"
+          class="mb-4 text-center text-sm break-words text-app-error-400"
           data-testid="mcp-authorize-decision-error"
         >
           {{ decisionError }}
@@ -255,7 +253,7 @@ function backToApp() {
           </UButton>
         </div>
 
-        <p class="mt-4 text-center text-xs text-slate-500">{{ t('mcpAuthorize.revokeHint') }}</p>
+        <p class="mt-4 text-center text-xs text-dimmed">{{ t('mcpAuthorize.revokeHint') }}</p>
       </template>
     </div>
   </div>

package/app/components/settings/McpOAuthCallbackScreen.vue

@@ -62,25 +62,28 @@ function backToApp() {
 
 <template>
   <div
-    class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100"
+    class="flex h-screen w-screen items-center justify-center bg-app-950 text-app-100"
     data-testid="mcp-oauth-callback"
   >
     <div
-      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 text-center backdrop-blur"
+      class="w-full max-w-sm rounded-xl border border-default bg-default/80 p-8 text-center backdrop-blur"
     >
       <template v-if="state === 'working'">
-        <UIcon name="i-lucide-loader" class="mx-auto mb-3 h-10 w-10 animate-spin text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">
+        <UIcon name="i-lucide-loader" class="mx-auto mb-3 h-10 w-10 animate-spin text-primary" />
+        <h1 class="mb-1 text-lg font-semibold text-highlighted">
           {{ t('settings.toolServers.oauth.callback.working') }}
         </h1>
       </template>
 
       <template v-else-if="state === 'done'">
-        <UIcon name="i-lucide-check-circle" class="mx-auto mb-3 h-10 w-10 text-emerald-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white" data-testid="mcp-oauth-callback-done">
+        <UIcon name="i-lucide-check-circle" class="mx-auto mb-3 h-10 w-10 text-app-success-400" />
+        <h1
+          class="mb-1 text-lg font-semibold text-highlighted"
+          data-testid="mcp-oauth-callback-done"
+        >
           {{ t('settings.toolServers.oauth.callback.done', { server: serverId }) }}
         </h1>
-        <p class="mb-6 text-sm text-slate-400">
+        <p class="mb-6 text-sm text-muted">
           {{ t('settings.toolServers.oauth.callback.doneHint') }}
         </p>
         <UButton block color="primary" @click="backToApp">
@@ -89,11 +92,14 @@ function backToApp() {
       </template>
 
       <template v-else>
-        <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-red-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white" data-testid="mcp-oauth-callback-failed">
+        <UIcon name="i-lucide-alert-triangle" class="mx-auto mb-3 h-10 w-10 text-app-error-400" />
+        <h1
+          class="mb-1 text-lg font-semibold text-highlighted"
+          data-testid="mcp-oauth-callback-failed"
+        >
           {{ t('settings.toolServers.oauth.callback.failedTitle') }}
         </h1>
-        <p class="mb-6 text-sm break-words text-slate-400">{{ detail }}</p>
+        <p class="mb-6 text-sm break-words text-muted">{{ detail }}</p>
         <UButton block color="neutral" variant="subtle" @click="backToApp">
           {{ t('settings.toolServers.oauth.callback.back') }}
         </UButton>

package/app/components/settings/MergeClassRulesEditor.vue

@@ -83,13 +83,13 @@ function setRule(changeClass: (typeof RULEABLE_CHANGE_CLASSES)[number], rule: Me
 <template>
   <div data-testid="merge-class-rules" class="space-y-2">
     <div>
-      <span class="block text-[10px] uppercase tracking-wide text-slate-500">
+      <span class="block text-[10px] uppercase tracking-wide text-dimmed">
         {{ t('settings.riskPolicy.classRules.heading') }}
       </span>
-      <p class="mt-0.5 text-[11px] leading-snug text-slate-500">
+      <p class="mt-0.5 text-[11px] leading-snug text-dimmed">
         {{ t('settings.riskPolicy.classRules.help') }}
       </p>
-      <p v-if="!autoMergeEnabled" class="mt-1 text-[11px] leading-snug text-amber-400/90">
+      <p v-if="!autoMergeEnabled" class="mt-1 text-[11px] leading-snug text-app-warning-400/90">
         {{ t('settings.riskPolicy.classRules.autoMergeOffWarning') }}
       </p>
     </div>
@@ -97,10 +97,10 @@ function setRule(changeClass: (typeof RULEABLE_CHANGE_CLASSES)[number], rule: Me
     <div
       v-for="row in rows"
       :key="row.changeClass"
-      class="flex flex-wrap items-center gap-2 rounded-md border border-slate-700/50 bg-slate-900/30 px-2 py-1.5"
+      class="flex flex-wrap items-center gap-2 rounded-md border border-muted/50 bg-default/30 px-2 py-1.5"
       :data-testid="`merge-class-row-${row.changeClass}`"
     >
-      <span class="min-w-[7rem] text-xs text-slate-300">{{ row.label }}</span>
+      <span class="min-w-[7rem] text-xs text-toned">{{ row.label }}</span>
       <USelect
         :model-value="row.rule"
         :items="RULE_OPTIONS"
@@ -111,10 +111,7 @@ function setRule(changeClass: (typeof RULEABLE_CHANGE_CLASSES)[number], rule: Me
         :data-testid="`merge-class-rule-${row.changeClass}`"
         @update:model-value="setRule(row.changeClass, $event as MergeClassRule)"
       />
-      <span
-        class="text-[11px] text-slate-500"
-        :data-testid="`merge-class-record-${row.changeClass}`"
-      >
+      <span class="text-[11px] text-dimmed" :data-testid="`merge-class-record-${row.changeClass}`">
         <template v-if="row.merged === 0">
           {{ t('settings.riskPolicy.classRules.noData') }}
         </template>

package/app/components/settings/MergeRolePolicyEditor.vue

@@ -162,10 +162,10 @@ function setSubmissionClass(
 <template>
   <div data-testid="merge-role-policy" class="space-y-2">
     <div>
-      <span class="block text-[10px] uppercase tracking-wide text-slate-500">
+      <span class="block text-[10px] uppercase tracking-wide text-dimmed">
         {{ t('settings.riskPolicy.roleRules.heading') }}
       </span>
-      <p class="mt-0.5 text-[11px] leading-snug text-slate-500">
+      <p class="mt-0.5 text-[11px] leading-snug text-dimmed">
         {{ t('settings.riskPolicy.roleRules.help') }}
       </p>
       <!-- Auto-merge off already sends every pull request to a human, so the per-class narrowing
@@ -173,7 +173,7 @@ function setSubmissionClass(
            MANUAL merge as well, which is the one thing the master switch leaves open. -->
       <p
         v-if="!autoMergeEnabled"
-        class="mt-1 text-[11px] leading-snug text-amber-400/90"
+        class="mt-1 text-[11px] leading-snug text-app-warning-400/90"
         data-testid="merge-role-auto-merge-off"
       >
         {{ t('settings.riskPolicy.roleRules.autoMergeOffWarning') }}
@@ -183,11 +183,11 @@ function setSubmissionClass(
     <div
       v-for="group in roles"
       :key="group.role"
-      class="rounded-md border border-slate-700/50 bg-slate-900/30 px-2 py-1.5"
+      class="rounded-md border border-muted/50 bg-default/30 px-2 py-1.5"
       :data-testid="`merge-role-group-${group.role}`"
     >
       <div class="flex flex-wrap items-center gap-2">
-        <span class="min-w-[5rem] text-xs text-slate-300">{{ group.label }}</span>
+        <span class="min-w-[5rem] text-xs text-toned">{{ group.label }}</span>
         <USwitch
           :model-value="group.sandboxed"
           size="sm"
@@ -218,7 +218,7 @@ function setSubmissionClass(
              only, and a role can land nothing at all while showing "No class limits". -->
         <span
           v-if="group.submissionScoped"
-          class="text-[11px] text-amber-400/90"
+          class="text-[11px] text-app-warning-400/90"
           :data-testid="`merge-role-submission-badge-${group.role}`"
         >
           {{ t('settings.riskPolicy.roleRules.submissionBadge') }}
@@ -230,13 +230,13 @@ function setSubmissionClass(
            row says which of the three is actually governing. -->
       <p
         v-if="group.sandboxed"
-        class="mt-1 text-[11px] leading-snug text-amber-400/90"
+        class="mt-1 text-[11px] leading-snug text-app-warning-400/90"
         :data-testid="`merge-role-sandbox-note-${group.role}`"
       >
         {{ t('settings.riskPolicy.roleRules.sandboxNote') }}
       </p>
 
-      <div v-if="group.open" class="mt-2 space-y-2 border-t border-slate-800 pt-2">
+      <div v-if="group.open" class="mt-2 space-y-2 border-t border-default pt-2">
         <!-- What this role may LAND at all. Above the class rules because it outranks them: a
              class can be auto-mergeable under the rules and still outside this list, and then
              nothing merges, through the review card's own button included. -->
@@ -249,7 +249,7 @@ function setSubmissionClass(
             :data-testid="`merge-role-submission-${group.role}`"
             @update:model-value="setSubmissionScoped(group.role, $event)"
           />
-          <p class="text-[11px] leading-snug text-slate-500">
+          <p class="text-[11px] leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.submissionHelp') }}
           </p>
           <div v-if="group.submissionScoped" class="flex flex-wrap gap-x-4 gap-y-1">
@@ -268,18 +268,18 @@ function setSubmissionClass(
                does rather than reading as a switch somebody forgot to fill in. -->
           <p
             v-if="group.submissionScoped && !group.submissionRows.some((r) => r.allowed)"
-            class="text-[11px] leading-snug text-amber-400/90"
+            class="text-[11px] leading-snug text-app-warning-400/90"
             :data-testid="`merge-role-submission-none-${group.role}`"
           >
             {{ t('settings.riskPolicy.roleRules.submissionNone') }}
           </p>
         </div>
 
-        <div class="space-y-1.5 border-t border-slate-800/70 pt-2">
-          <p class="text-[11px] leading-snug text-slate-500">
+        <div class="space-y-1.5 border-t border-default/70 pt-2">
+          <p class="text-[11px] leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.classHeading') }}
           </p>
-          <p v-if="!anyBaseRule" class="text-[11px] leading-snug text-slate-500">
+          <p v-if="!anyBaseRule" class="text-[11px] leading-snug text-dimmed">
             {{ t('settings.riskPolicy.roleRules.baseHint') }}
           </p>
           <div
@@ -288,7 +288,7 @@ function setSubmissionClass(
             class="flex flex-wrap items-center gap-2"
             :data-testid="`merge-role-row-${group.role}-${row.changeClass}`"
           >
-            <span class="min-w-[7rem] text-xs text-slate-400">{{ row.label }}</span>
+            <span class="min-w-[7rem] text-xs text-muted">{{ row.label }}</span>
             <USelect
               :model-value="row.selected"
               :items="row.items"
@@ -302,12 +302,12 @@ function setSubmissionClass(
               "
             />
             <!-- Nothing left to narrow: the base rule already routes this class to a human. -->
-            <span v-if="row.items.length === 1" class="text-[11px] text-slate-500">
+            <span v-if="row.items.length === 1" class="text-[11px] text-dimmed">
               {{ t('settings.riskPolicy.roleRules.alreadyStrictest') }}
             </span>
             <span
               v-else-if="row.redundant"
-              class="text-[11px] text-amber-400/90"
+              class="text-[11px] text-app-warning-400/90"
               :data-testid="`merge-role-redundant-${group.role}-${row.changeClass}`"
             >
               {{ t('settings.riskPolicy.roleRules.redundant') }}

package/app/components/settings/ModelConfigurationPanel.vue

@@ -298,21 +298,19 @@ async function save() {
     <Transition name="reader-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-50 flex max-h-[100dvh] flex-col bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex max-h-[100dvh] flex-col bg-app-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >
-        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-          <div
-            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500/15"
-          >
-            <UIcon name="i-lucide-cpu" class="h-5 w-5 text-indigo-300" />
+        <header class="flex items-center gap-3 border-b border-default px-6 py-4">
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15">
+            <UIcon name="i-lucide-cpu" class="h-5 w-5 text-primary" />
           </div>
           <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">
+            <h1 class="truncate text-base font-semibold text-highlighted">
               {{ t('settings.modelConfiguration.title') }}
             </h1>
-            <p class="truncate text-xs text-slate-500">
+            <p class="truncate text-xs text-dimmed">
               {{ t('settings.modelConfiguration.subtitle') }}
             </p>
           </div>
@@ -352,14 +350,14 @@ async function save() {
             <!-- ===== list view ===== -->
             <template v-if="!editor">
               <div class="flex items-center justify-between">
-                <p class="text-sm leading-relaxed text-slate-400">
+                <p class="text-sm leading-relaxed text-muted">
                   <i18n-t
                     keypath="settings.modelConfiguration.list.intro"
                     scope="global"
                     tag="span"
                   >
                     <template #baseModel>
-                      <span class="text-slate-300">{{
+                      <span class="text-toned">{{
                         t('settings.modelConfiguration.list.introBaseModel')
                       }}</span>
                     </template>
@@ -376,7 +374,7 @@ async function save() {
                 </UButton>
               </div>
 
-              <p v-if="models.models.length === 0" class="py-4 text-center text-sm text-slate-500">
+              <p v-if="models.models.length === 0" class="py-4 text-center text-sm text-dimmed">
                 {{ t('settings.modelConfiguration.list.loadingCatalog') }}
               </p>
 
@@ -384,10 +382,10 @@ async function save() {
                 <div
                   v-for="p in sortedPresets"
                   :key="p.id"
-                  class="rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+                  class="rounded-xl border border-default bg-default/50 p-4"
                 >
                   <div class="flex items-center gap-2">
-                    <span class="truncate text-sm font-semibold text-slate-100">{{ p.name }}</span>
+                    <span class="truncate text-sm font-semibold text-app-100">{{ p.name }}</span>
                     <UBadge v-if="p.isDefault" color="primary" variant="subtle" size="xs">
                       {{ t('settings.modelConfiguration.list.default') }}
                     </UBadge>
@@ -426,9 +424,9 @@ async function save() {
                       />
                     </div>
                   </div>
-                  <div class="mt-1.5 text-[11px] text-slate-400">
+                  <div class="mt-1.5 text-[11px] text-muted">
                     {{ t('settings.modelConfiguration.list.basePrefix') }}
-                    <span class="text-slate-300">{{ modelLabel(p.baseModelId) }}</span>
+                    <span class="text-toned">{{ modelLabel(p.baseModelId) }}</span>
                     <span v-if="Object.keys(p.overrides).length">
                       ·
                       {{
@@ -442,15 +440,12 @@ async function save() {
                     <!-- A custom route order changes which provider the same model runs on, so the
                          list says so rather than leaving it visible only inside the editor (which
                          basic mode hides). -->
-                    <span v-if="p.providerPreference?.length" class="text-slate-300">
+                    <span v-if="p.providerPreference?.length" class="text-toned">
                       · {{ t('settings.modelConfiguration.list.customRouteOrder') }}
                     </span>
                   </div>
                 </div>
-                <p
-                  v-if="sortedPresets.length === 0"
-                  class="py-6 text-center text-sm text-slate-500"
-                >
+                <p v-if="sortedPresets.length === 0" class="py-6 text-center text-sm text-dimmed">
                   {{ t('settings.modelConfiguration.list.empty') }}
                 </p>
               </div>
@@ -463,10 +458,10 @@ async function save() {
 
             <!-- ===== editor view ===== -->
             <template v-else>
-              <div class="space-y-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+              <div class="space-y-4 rounded-xl border border-default bg-default/50 p-4">
                 <div>
                   <label
-                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted"
                   >
                     {{ t('settings.modelConfiguration.editor.nameLabel') }}
                   </label>
@@ -480,7 +475,7 @@ async function save() {
 
                 <div>
                   <label
-                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted"
                   >
                     {{ t('settings.modelConfiguration.editor.baseModelLabel') }}
                   </label>
@@ -500,7 +495,7 @@ async function save() {
                   </UDropdownMenu>
                 </div>
 
-                <label class="flex items-center gap-2 text-sm text-slate-300">
+                <label class="flex items-center gap-2 text-sm text-toned">
                   <UCheckbox v-model="editor.isDefault" />
                   {{ t('settings.modelConfiguration.editor.makeDefault') }}
                 </label>
@@ -519,7 +514,7 @@ async function save() {
 
               <div>
                 <div class="mb-1 flex items-start justify-between gap-3">
-                  <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+                  <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
                     {{ t('settings.modelConfiguration.editor.perAgentOverrides') }}
                   </span>
                   <AgentTierSelect class="w-56 shrink-0" :hidden-count="hiddenByTier" />
@@ -531,9 +526,7 @@ async function save() {
                   :placeholder="t('settings.modelConfiguration.editor.filterPlaceholder')"
                   class="mb-3 w-full"
                 />
-                <div
-                  class="divide-y divide-slate-800 rounded-xl border border-slate-800 bg-slate-900/50"
-                >
+                <div class="divide-y divide-default rounded-xl border border-default bg-default/50">
                   <div
                     v-for="a in filteredKinds"
                     :key="a.kind"
@@ -546,7 +539,7 @@ async function save() {
                       :title="a.description"
                     />
                     <div class="min-w-0 flex-1" :title="a.description">
-                      <p class="truncate text-sm text-slate-200">{{ a.label }}</p>
+                      <p class="truncate text-sm text-default">{{ a.label }}</p>
                     </div>
                     <UDropdownMenu
                       :items="overrideMenu(a.kind)"
@@ -565,7 +558,7 @@ async function save() {
                   </div>
                   <p
                     v-if="filteredKinds.length === 0"
-                    class="px-4 py-6 text-center text-sm text-slate-500"
+                    class="px-4 py-6 text-center text-sm text-dimmed"
                   >
                     {{ t('settings.modelConfiguration.editor.noAgentsMatch', { filter }) }}
                   </p>

package/app/components/settings/ModelPresetHealthModal.vue

@@ -59,8 +59,8 @@ const reseedableCount = computed(
 <template>
   <UModal v-model:open="open" :title="t('modelPreset.health.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
-      <div v-if="!hasIssues" class="py-6 text-center text-sm text-slate-400">
-        <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-emerald-400" />
+      <div v-if="!hasIssues" class="py-6 text-center text-sm text-muted">
+        <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-app-success-400" />
         {{ t('modelPreset.health.allValid') }}
       </div>
 
@@ -68,20 +68,20 @@ const reseedableCount = computed(
         <!-- New built-in presets the workspace can add. -->
         <section v-if="newPresets.length" class="space-y-2">
           <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-emerald-400" />
-            <h3 class="text-sm font-semibold text-slate-200">
+            <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-app-success-400" />
+            <h3 class="text-sm font-semibold text-default">
               {{ t('modelPreset.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('modelPreset.health.newDescription') }}</p>
+          <p class="text-[11px] text-dimmed">{{ t('modelPreset.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
               :key="i.id"
-              class="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/40 p-3"
+              class="flex items-center justify-between gap-3 rounded-lg border border-default bg-default/40 p-3"
             >
               <div class="min-w-0">
-                <span class="truncate text-sm font-medium text-slate-100 capitalize">{{
+                <span class="truncate text-sm font-medium text-app-100 capitalize">{{
                   i.name
                 }}</span>
               </div>
@@ -103,21 +103,23 @@ const reseedableCount = computed(
         <!-- Outdated built-ins: a newer catalog version is available. -->
         <section v-if="outdated.length" class="space-y-2">
           <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-arrow-up-circle" class="h-4 w-4 text-amber-400" />
-            <h3 class="text-sm font-semibold text-slate-200">
+            <UIcon name="i-lucide-arrow-up-circle" class="h-4 w-4 text-app-warning-400" />
+            <h3 class="text-sm font-semibold text-default">
               {{ t('modelPreset.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('modelPreset.health.updatesDescription') }}</p>
+          <p class="text-[11px] text-dimmed">
+            {{ t('modelPreset.health.updatesDescription') }}
+          </p>
           <ul class="space-y-2">
             <li
               v-for="i in outdated"
               :key="i.id"
-              class="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/40 p-3"
+              class="flex items-center justify-between gap-3 rounded-lg border border-default bg-default/40 p-3"
             >
               <div class="min-w-0">
-                <span class="truncate text-sm font-medium text-slate-100">{{ i.name }}</span>
-                <p class="text-[11px] text-amber-400/80">
+                <span class="truncate text-sm font-medium text-app-100">{{ i.name }}</span>
+                <p class="text-[11px] text-app-warning-400/80">
                   {{
                     t('modelPreset.health.versionAvailable', {
                       from: i.fromVersion ?? 0,

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -160,7 +160,7 @@ const connectedLabel = computed(() => {
         <i18n-t
           keypath="settings.observabilityConnection.intro"
           tag="p"
-          class="text-sm text-slate-400"
+          class="text-sm text-muted"
           scope="global"
         >
           <template #gate>
@@ -168,7 +168,7 @@ const connectedLabel = computed(() => {
           </template>
         </i18n-t>
 
-        <section class="space-y-3 rounded-lg border border-slate-700 p-3">
+        <section class="space-y-3 rounded-lg border border-muted p-3">
           <div class="flex items-center justify-between">
             <h3 class="text-sm font-semibold">
               {{ t('settings.observabilityConnection.connection.heading') }}
@@ -222,7 +222,7 @@ const connectedLabel = computed(() => {
              already opened from the same monitors/SLOs. -->
         <section
           v-if="store.incidentAvailable !== false"
-          class="space-y-3 rounded-lg border border-slate-700 p-3"
+          class="space-y-3 rounded-lg border border-muted p-3"
         >
           <div class="flex items-center justify-between">
             <h3 class="text-sm font-semibold">
@@ -236,7 +236,7 @@ const connectedLabel = computed(() => {
               }}
             </UBadge>
           </div>
-          <p class="text-[11px] text-slate-400">
+          <p class="text-[11px] text-muted">
             {{ t('settings.observabilityConnection.incident.description') }}
           </p>