@cat-factory/app 0.302.2 → 0.303.0

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -418,15 +418,15 @@ function toastRemoved() {
        === true). While it's still being probed (null) show a loading line instead of flashing
        the full form, and render nothing when the integration is off (false). -->
   <div v-if="infra.available === true" class="space-y-5">
-    <p class="text-xs text-slate-400">{{ t('settings.infrastructure.handler.intro') }}</p>
+    <p class="text-xs text-muted">{{ t('settings.infrastructure.handler.intro') }}</p>
 
     <!-- kubernetes -->
     <section
       ref="kubeSection"
-      class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
+      class="space-y-2 rounded-lg border border-muted bg-default/40 p-3"
       data-testid="infra-kubernetes-section"
     >
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('inspector.testConfig.provisionTypes.kubernetes') }}
       </h3>
       <!-- Established-connection card: a prominent checkbox signals a connection is stored, and
@@ -434,7 +434,7 @@ function toastRemoved() {
            re-opening the form. Absent ⇒ the "not connected yet" hint. -->
       <div
         v-if="kubeHandler"
-        class="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 p-2.5"
+        class="space-y-2 rounded-md border border-app-success-500/30 bg-app-success-500/5 p-2.5"
       >
         <div class="flex items-start justify-between gap-2">
           <UCheckbox
@@ -442,7 +442,7 @@ function toastRemoved() {
             disabled
             size="lg"
             :label="t('settings.infrastructure.handler.connectionEstablished')"
-            :ui="{ label: 'text-[13px] font-semibold text-emerald-300' }"
+            :ui="{ label: 'text-[13px] font-semibold text-app-success-300' }"
           />
           <UButton
             icon="i-lucide-trash-2"
@@ -454,9 +454,9 @@ function toastRemoved() {
             @click="removeKube"
           />
         </div>
-        <p class="pl-7 text-[11px] text-slate-300">
+        <p class="pl-7 text-[11px] text-toned">
           {{ t('settings.infrastructure.handler.activeEngine') }}
-          <span class="text-slate-200">{{ kubeHandlerEngineLabel }}</span>
+          <span class="text-default">{{ kubeHandlerEngineLabel }}</span>
         </p>
         <div class="space-y-1.5 pl-7">
           <UButton
@@ -472,13 +472,13 @@ function toastRemoved() {
           <ConnectionTestVerdict :result="kubeSavedTestResult" />
         </div>
       </div>
-      <p v-else class="flex items-center gap-1.5 text-[12px] text-slate-500">
+      <p v-else class="flex items-center gap-1.5 text-[12px] text-dimmed">
         <UIcon name="i-lucide-circle-dashed" class="h-3.5 w-3.5" />
         {{ t('settings.infrastructure.handler.notConnected') }}
       </p>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-slate-400">{{
+        <span class="text-[11px] text-muted">{{
           t('settings.infrastructure.handler.engineLabel')
         }}</span>
         <div class="flex flex-wrap gap-1">
@@ -512,10 +512,10 @@ function toastRemoved() {
       />
 
       <!-- Local mode: a personal override for THIS machine, layered over the workspace handler. -->
-      <div v-if="userOverridesOn" class="border-t border-slate-800 pt-2">
+      <div v-if="userOverridesOn" class="border-t border-default pt-2">
         <button
           type="button"
-          class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+          class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-dimmed hover:text-toned"
           @click="showKubeOverride = !showKubeOverride"
         >
           <UIcon
@@ -528,7 +528,7 @@ function toastRemoved() {
           </UBadge>
         </button>
         <div v-if="showKubeOverride" class="mt-2 space-y-2">
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('settings.infrastructure.handler.personalOverrideHint') }}
           </p>
           <p v-if="kubeUserHandler" class="flex justify-end">
@@ -558,11 +558,13 @@ function toastRemoved() {
     </section>
 
     <!-- docker-compose: handled by the runtime's local Docker capability, no connection. -->
-    <section class="space-y-1 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
-      <h3 class="text-sm font-semibold text-slate-200">
+    <section class="space-y-1 rounded-lg border border-muted bg-default/40 p-3">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('inspector.testConfig.provisionTypes.docker-compose') }}
       </h3>
-      <p class="text-[12px] text-slate-400">{{ t('settings.infrastructure.dockerComposeInfo') }}</p>
+      <p class="text-[12px] text-muted">
+        {{ t('settings.infrastructure.dockerComposeInfo') }}
+      </p>
     </section>
 
     <!-- cloudflare: a self-contained section (see the component's own note on why it is not
@@ -570,15 +572,15 @@ function toastRemoved() {
     <CloudflareHandlerSection />
 
     <!-- custom: the catalog editor + a remote-custom HTTP handler per custom type. -->
-    <section class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
-      <h3 class="text-sm font-semibold text-slate-200">
+    <section class="space-y-3 rounded-lg border border-muted bg-default/40 p-3">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('inspector.testConfig.provisionTypes.custom') }}
       </h3>
 
       <CustomManifestTypeEditor />
 
-      <div v-if="infra.customTypes.length" class="space-y-2 border-t border-slate-800 pt-3">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <div v-if="infra.customTypes.length" class="space-y-2 border-t border-default pt-3">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('settings.infrastructure.handler.customHandlerTitle') }}
         </p>
         <UFormField :label="t('settings.infrastructure.handler.customTypeLabel')">
@@ -595,9 +597,9 @@ function toastRemoved() {
         </UFormField>
         <p
           v-if="customHandler"
-          class="flex items-center justify-between gap-2 text-[12px] text-slate-300"
+          class="flex items-center justify-between gap-2 text-[12px] text-toned"
         >
-          <span class="text-emerald-400">{{
+          <span class="text-app-success-400">{{
             t('settings.infrastructure.handler.customConnected')
           }}</span>
           <UButton
@@ -625,7 +627,7 @@ function toastRemoved() {
       </div>
     </section>
   </div>
-  <p v-else-if="infra.available === null" class="text-xs text-slate-500">
+  <p v-else-if="infra.available === null" class="text-xs text-dimmed">
     {{ t('settings.infrastructure.handler.loading') }}
   </p>
 </template>

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -267,11 +267,11 @@ const labelKey = computed(() =>
 </script>
 
 <template>
-  <section v-if="cap" class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
-    <h3 class="text-sm font-semibold text-slate-200">{{ t(labelKey) }}</h3>
+  <section v-if="cap" class="space-y-2 rounded-lg border border-muted bg-default/40 p-3">
+    <h3 class="text-sm font-semibold text-default">{{ t(labelKey) }}</h3>
 
     <!-- Off-local: the active backend is deployment/registration-driven; state it plainly. -->
-    <p v-if="!writable" class="text-sm text-slate-300" :data-testid="`${axis}-backend-active`">
+    <p v-if="!writable" class="text-sm text-toned" :data-testid="`${axis}-backend-active`">
       {{ t('settings.infrastructure.active', { backend: activeLabel }) }}
     </p>
 
@@ -287,13 +287,13 @@ const labelKey = computed(() =>
           @change="select(item.id)"
         />
         <span class="min-w-0">
-          <span class="text-sm text-slate-200">{{ item.label }}</span>
-          <span v-if="item.desc" class="block text-[11px] text-slate-400">{{ item.desc }}</span>
+          <span class="text-sm text-default">{{ item.label }}</span>
+          <span v-if="item.desc" class="block text-[11px] text-muted">{{ item.desc }}</span>
         </span>
       </label>
     </div>
 
-    <p v-if="showRegisterHint" class="text-[11px] text-amber-300/80">
+    <p v-if="showRegisterHint" class="text-[11px] text-app-warning-300/80">
       {{ t('settings.infrastructure.registerHint') }}
     </p>
 

package/app/components/settings/InfrastructureWindow.vue

@@ -174,8 +174,8 @@ watch([tabs, () => store.loaded], () => {
               <InfrastructureBackendPicker axis="execution" />
               <!-- Local mode: the warm-pool + checkout reuse ARE the host agent-container
                    runtime, so they live here rather than in a separate menu. -->
-              <section v-if="isLocal" class="border-t border-slate-800 pt-4">
-                <h3 class="mb-3 text-sm font-semibold text-slate-200">
+              <section v-if="isLocal" class="border-t border-default pt-4">
+                <h3 class="mb-3 text-sm font-semibold text-default">
                   {{ t('settings.localMode.title') }}
                 </h3>
                 <LocalContainerPoolSettings />
@@ -191,13 +191,13 @@ watch([tabs, () => store.loaded], () => {
               <!-- The Tester's environment is driven by each SERVICE's declared provision type
                    (the "what/where"); the workspace configures HOW each type is handled here —
                    the engine + connection per provision type, plus the custom-type catalog. -->
-              <div class="border-t border-slate-800 pt-4">
+              <div class="border-t border-default pt-4">
                 <InfraHandlersConfigurator />
               </div>
               <!-- The guided per-SERVICE Compose flow (formerly the standalone "Environment
                    setup" sidebar entry). Last, because it fills in one service's recipe on
                    top of the workspace-wide choices above. -->
-              <div class="border-t border-slate-800 pt-4">
+              <div class="border-t border-default pt-4">
                 <ComposeEnvironmentSetupSection />
               </div>
             </div>
@@ -213,7 +213,7 @@ watch([tabs, () => store.loaded], () => {
           </template>
         </UTabs>
 
-        <p v-else class="px-1 py-6 text-center text-sm text-slate-500">
+        <p v-else class="px-1 py-6 text-center text-sm text-dimmed">
           {{ t('settings.providerConnection.noneAvailable') }}
         </p>
       </div>

package/app/components/settings/IssueTrackerPanel.vue

@@ -201,13 +201,13 @@ async function checkSetup(source: TaskSourceKind) {
     <!-- 1. Filing tracker ----------------------------------------------------->
     <section class="space-y-3">
       <div>
-        <h3 class="text-sm font-semibold text-slate-200">
+        <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.filing.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-slate-400">
+        <p class="mt-1 text-[11px] text-muted">
           <i18n-t keypath="settings.issueTracker.filing.description" tag="span" scope="global">
             <template #none>
-              <span class="text-slate-300">{{ t('settings.issueTracker.filing.none') }}</span>
+              <span class="text-toned">{{ t('settings.issueTracker.filing.none') }}</span>
             </template>
           </i18n-t>
         </p>
@@ -269,7 +269,10 @@ async function checkSetup(source: TaskSourceKind) {
       </div>
 
       <!-- Inline readiness hints for the picked tracker. -->
-      <p v-if="trackerKind === 'github' && !githubAvailable" class="text-[11px] text-amber-400">
+      <p
+        v-if="trackerKind === 'github' && !githubAvailable"
+        class="text-[11px] text-app-warning-400"
+      >
         <i18n-t keypath="settings.issueTracker.filing.githubHint" tag="span" scope="global">
           <template #link>
             <button class="underline" @click="ui.openGitHub()">
@@ -278,7 +281,10 @@ async function checkSetup(source: TaskSourceKind) {
           </template>
         </i18n-t>
       </p>
-      <p v-else-if="trackerKind === 'jira' && !jiraConnected" class="text-[11px] text-amber-400">
+      <p
+        v-else-if="trackerKind === 'jira' && !jiraConnected"
+        class="text-[11px] text-app-warning-400"
+      >
         <i18n-t keypath="settings.issueTracker.filing.jiraHint" tag="span" scope="global">
           <template #link>
             <button class="underline" @click="ui.openTaskConnect('jira')">
@@ -289,7 +295,7 @@ async function checkSetup(source: TaskSourceKind) {
       </p>
       <p
         v-else-if="trackerKind === 'linear' && !linearConnected"
-        class="text-[11px] text-amber-400"
+        class="text-[11px] text-app-warning-400"
       >
         <i18n-t keypath="settings.issueTracker.filing.linearHint" tag="span" scope="global">
           <template #link>
@@ -307,7 +313,7 @@ async function checkSetup(source: TaskSourceKind) {
       >
         <UInput v-model="jiraProjectKey" placeholder="ENG" size="sm" class="w-full" />
         <template #help>
-          <span class="text-[11px] text-slate-500">
+          <span class="text-[11px] text-dimmed">
             {{ t('settings.issueTracker.filing.jiraProjectKeyHelp') }}
           </span>
         </template>
@@ -334,7 +340,7 @@ async function checkSetup(source: TaskSourceKind) {
         />
         <UInput v-else v-model="linearTeamId" placeholder="team_…" size="sm" class="w-full" />
         <template #help>
-          <span class="text-[11px] text-slate-500">
+          <span class="text-[11px] text-dimmed">
             {{ t('settings.issueTracker.filing.linearTeamIdHelp') }}
           </span>
         </template>
@@ -344,10 +350,10 @@ async function checkSetup(source: TaskSourceKind) {
     <!-- 2. Linking sources ---------------------------------------------------->
     <section class="space-y-3">
       <div>
-        <h3 class="text-sm font-semibold text-slate-200">
+        <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.linking.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-slate-400">
+        <p class="mt-1 text-[11px] text-muted">
           {{ t('settings.issueTracker.linking.description') }}
         </p>
       </div>
@@ -364,7 +370,7 @@ async function checkSetup(source: TaskSourceKind) {
         @remedy="openRemedy(source)"
       />
 
-      <p v-if="tasks.sources.length === 0" class="text-[11px] text-slate-500">
+      <p v-if="tasks.sources.length === 0" class="text-[11px] text-dimmed">
         {{ t('settings.issueTracker.linking.none') }}
       </p>
     </section>
@@ -372,49 +378,49 @@ async function checkSetup(source: TaskSourceKind) {
     <!-- 3. Writeback ---------------------------------------------------------->
     <section class="space-y-3">
       <div>
-        <h3 class="text-sm font-semibold text-slate-200">
+        <h3 class="text-sm font-semibold text-default">
           {{ t('settings.issueTracker.writeback.heading') }}
         </h3>
-        <p class="mt-1 text-[11px] text-slate-400">
+        <p class="mt-1 text-[11px] text-muted">
           <i18n-t keypath="settings.issueTracker.writeback.description" tag="span" scope="global">
             <template #done>
-              <span class="text-slate-300">{{ t('settings.issueTracker.writeback.done') }}</span>
+              <span class="text-toned">{{ t('settings.issueTracker.writeback.done') }}</span>
             </template>
           </i18n-t>
         </p>
       </div>
 
-      <label class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+      <label class="flex items-start gap-3 rounded-lg border border-muted bg-elevated/40 p-3">
         <USwitch v-model="commentOnPrOpen" />
         <span class="text-sm">
-          <span class="block text-slate-200">
+          <span class="block text-default">
             {{ t('settings.issueTracker.writeback.commentOnOpen.label') }}
           </span>
-          <span class="block text-xs text-slate-500">
+          <span class="block text-xs text-dimmed">
             {{ t('settings.issueTracker.writeback.commentOnOpen.help') }}
           </span>
         </span>
       </label>
 
-      <label class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+      <label class="flex items-start gap-3 rounded-lg border border-muted bg-elevated/40 p-3">
         <USwitch v-model="resolveOnMerge" />
         <span class="text-sm">
-          <span class="block text-slate-200">
+          <span class="block text-default">
             {{ t('settings.issueTracker.writeback.resolveOnMerge.label') }}
           </span>
-          <span class="block text-xs text-slate-500">
+          <span class="block text-xs text-dimmed">
             {{ t('settings.issueTracker.writeback.resolveOnMerge.help') }}
           </span>
         </span>
       </label>
 
-      <label class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+      <label class="flex items-start gap-3 rounded-lg border border-muted bg-elevated/40 p-3">
         <USwitch v-model="questionsOnPark" />
         <span class="text-sm">
-          <span class="block text-slate-200">
+          <span class="block text-default">
             {{ t('settings.issueTracker.writeback.questionsOnPark.label') }}
           </span>
-          <span class="block text-xs text-slate-500">
+          <span class="block text-xs text-dimmed">
             {{ t('settings.issueTracker.writeback.questionsOnPark.help') }}
           </span>
         </span>

package/app/components/settings/KubernetesEngineForm.vue

@@ -368,8 +368,8 @@ async function copyAutoSetupCommand() {
 </script>
 
 <template>
-  <div class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+  <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
+    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
       {{
         connected
           ? t('settings.providerConnection.form.updateConfiguration')
@@ -379,7 +379,7 @@ async function copyAutoSetupCommand() {
 
     <p
       v-if="engine === 'local-k3s'"
-      class="rounded-md border border-sky-500/30 bg-sky-500/10 p-2 text-[11px] text-sky-200"
+      class="rounded-md border border-app-info-500/30 bg-app-info-500/10 p-2 text-[11px] text-app-info-200"
     >
       {{ t('settings.infrastructure.kubernetesEngine.localK3sHint') }}
     </p>
@@ -389,18 +389,18 @@ async function copyAutoSetupCommand() {
          (the token is pasted, never in the link). -->
     <div
       v-if="engine === 'local-k3s'"
-      class="rounded-md border border-slate-700 bg-slate-900/40 p-2 space-y-1.5"
+      class="rounded-md border border-muted bg-default/40 p-2 space-y-1.5"
     >
-      <p class="flex items-center gap-1.5 text-[11px] font-semibold text-slate-300">
-        <UIcon name="i-lucide-wand-2" class="h-3.5 w-3.5 text-slate-400" />
+      <p class="flex items-center gap-1.5 text-[11px] font-semibold text-toned">
+        <UIcon name="i-lucide-wand-2" class="h-3.5 w-3.5 text-muted" />
         {{ t('settings.infrastructure.kubernetesEngine.autoSetup.title') }}
       </p>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('settings.infrastructure.kubernetesEngine.autoSetup.description') }}
       </p>
       <div class="flex items-center gap-1.5">
         <code
-          class="flex-1 rounded bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200 select-all"
+          class="flex-1 rounded bg-app-950 px-2 py-1 font-mono text-[11px] text-default select-all"
         >
           {{ AUTO_SETUP_COMMAND }}
         </code>
@@ -438,7 +438,7 @@ async function copyAutoSetupCommand() {
       "
     >
       <template v-if="tokenStored" #hint>
-        <span class="inline-flex items-center gap-1 text-[11px] text-emerald-400">
+        <span class="inline-flex items-center gap-1 text-[11px] text-app-success-400">
           <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
           {{ t('settings.infrastructure.kubernetesEngine.tokenSaved') }}
         </span>
@@ -458,7 +458,7 @@ async function copyAutoSetupCommand() {
       <p
         v-if="tokenProblem"
         class="mt-1 text-[11px]"
-        :class="tokenBlocking ? 'text-rose-400' : 'text-amber-400'"
+        :class="tokenBlocking ? 'text-app-error-400' : 'text-app-warning-400'"
         data-testid="service-account-token-problem"
       >
         {{ tokenProblem }}
@@ -600,7 +600,7 @@ async function copyAutoSetupCommand() {
     </div>
 
     <div class="flex items-center justify-end gap-3">
-      <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-rose-400">
+      <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-app-error-400">
         {{ connectBlockedReason }}
       </p>
       <UButton

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -263,8 +263,8 @@ function optional(label: string): string {
 </script>
 
 <template>
-  <div class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+  <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
+    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
       {{
         connection?.kind === 'kubernetes'
           ? t('settings.providerConnection.form.updateConfiguration')
@@ -296,7 +296,7 @@ function optional(label: string): string {
       <p
         v-if="tokenProblem"
         class="mt-1 text-[11px]"
-        :class="tokenBlocking ? 'text-rose-400' : 'text-amber-400'"
+        :class="tokenBlocking ? 'text-app-error-400' : 'text-app-warning-400'"
         data-testid="service-account-token-problem"
       >
         {{ tokenProblem }}
@@ -454,7 +454,7 @@ function optional(label: string): string {
     <ConnectionWarnings :warnings="testResult?.warnings" />
 
     <div class="flex items-center justify-end gap-3">
-      <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-rose-400">
+      <p v-if="connectBlockedReason" class="flex-1 text-left text-xs text-app-error-400">
         {{ connectBlockedReason }}
       </p>
       <UButton

package/app/components/settings/LocalContainerPoolSettings.vue

@@ -75,12 +75,7 @@ async function save() {
 
 <template>
   <div class="space-y-6" data-testid="local-container-pool-settings">
-    <i18n-t
-      keypath="settings.localMode.intro"
-      tag="p"
-      class="text-xs text-slate-400"
-      scope="global"
-    >
+    <i18n-t keypath="settings.localMode.intro" tag="p" class="text-xs text-muted" scope="global">
       <template #poolVars>
         <code>LOCAL_POOL_*</code>
       </template>
@@ -92,13 +87,13 @@ async function save() {
     <!-- Warm container pool -->
     <section class="space-y-3">
       <div>
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('settings.localMode.pool.heading') }}
         </h4>
         <i18n-t
           keypath="settings.localMode.pool.description"
           tag="p"
-          class="text-[11px] text-slate-400"
+          class="text-[11px] text-muted"
           scope="global"
         >
           <template #appleContainer>
@@ -141,12 +136,12 @@ async function save() {
     </section>
 
     <!-- Checkout reuse -->
-    <section class="space-y-3 border-t border-slate-800 pt-6">
+    <section 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.localMode.checkout.heading') }}
         </h4>
-        <p class="text-[11px] text-slate-400">
+        <p class="text-[11px] text-muted">
           {{ t('settings.localMode.checkout.description') }}
         </p>
       </div>

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -279,13 +279,13 @@ async function remove(p: LocalRunner) {
     </template>
     <template #body>
       <div class="space-y-4">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           <i18n-t keypath="settings.localModelEndpoints.intro" tag="span" scope="global">
             <template #ownMachine>
               <strong>{{ t('settings.localModelEndpoints.introOwnMachine') }}</strong>
             </template>
             <template #justForYou>
-              <span class="text-slate-300">{{
+              <span class="text-toned">{{
                 t('settings.localModelEndpoints.introJustForYou')
               }}</span>
             </template>
@@ -296,12 +296,12 @@ async function remove(p: LocalRunner) {
         <div
           v-for="e in store.endpoints"
           :key="e.provider"
-          class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+          class="flex items-center justify-between rounded-md border border-muted bg-default/50 px-3 py-2 text-sm"
         >
           <div>
-            <span class="font-medium text-slate-200">{{ e.label }}</span>
-            <span class="ms-2 text-xs text-slate-500">{{ LOCAL_RUNNER_LABELS[e.provider] }}</span>
-            <div class="text-[11px] text-slate-500">
+            <span class="font-medium text-default">{{ e.label }}</span>
+            <span class="ms-2 text-xs text-dimmed">{{ LOCAL_RUNNER_LABELS[e.provider] }}</span>
+            <div class="text-[11px] text-dimmed">
               {{ e.baseUrl }} ·
               {{
                 t(
@@ -316,14 +316,16 @@ async function remove(p: LocalRunner) {
             </div>
             <!-- A row whose URL the deployment no longer permits: its models are withheld
                  from the picker, so this is the only place that can say why. -->
-            <div v-if="e.urlBlockedReason" class="mt-1 text-[11px] text-amber-400">
+            <div v-if="e.urlBlockedReason" class="mt-1 text-[11px] text-app-warning-400">
               {{ t('settings.localModelEndpoints.blocked') }}
-              <span class="block text-amber-300/70">{{ urlReasonText(e.urlBlockedReason) }}</span>
+              <span class="block text-app-warning-300/70">{{
+                urlReasonText(e.urlBlockedReason)
+              }}</span>
             </div>
             <!-- Part of the stored model list could not be read and was discarded. Without this
                  the shortened list reads exactly like a runner nothing was ever enabled on, and
                  only one of those is fixed by re-ticking. -->
-            <div v-if="e.unreadableModels" class="mt-1 text-[11px] text-amber-400">
+            <div v-if="e.unreadableModels" class="mt-1 text-[11px] text-app-warning-400">
               {{ t('settings.localModelEndpoints.modelsDiscarded') }}
             </div>
           </div>
@@ -349,8 +351,8 @@ async function remove(p: LocalRunner) {
         </div>
 
         <!-- add / edit form -->
-        <div class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div class="rounded-lg border border-dashed border-muted p-3 space-y-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{
               existing
                 ? t('settings.localModelEndpoints.editRunner')
@@ -411,13 +413,13 @@ async function remove(p: LocalRunner) {
             >
               {{ t('settings.localModelEndpoints.testConnection') }}
             </UButton>
-            <span v-if="testError" class="text-xs text-rose-400">
+            <span v-if="testError" class="text-xs text-app-error-400">
               {{ testError }}
-              <span v-if="testErrorDetail" class="block text-[11px] text-rose-300/70">{{
+              <span v-if="testErrorDetail" class="block text-[11px] text-app-error-300/70">{{
                 testErrorDetail
               }}</span>
             </span>
-            <span v-else-if="tested && discovered.length" class="text-xs text-emerald-400">
+            <span v-else-if="tested && discovered.length" class="text-xs text-app-success-400">
               {{
                 t(
                   'settings.localModelEndpoints.reachable',
@@ -426,22 +428,22 @@ async function remove(p: LocalRunner) {
                 )
               }}
             </span>
-            <span v-else-if="tested" class="text-xs text-slate-500">{{
+            <span v-else-if="tested" class="text-xs text-dimmed">{{
               t('settings.localModelEndpoints.noModels')
             }}</span>
           </div>
 
           <!-- discovered models multi-select, each with its declared image support -->
           <div v-if="discovered.length" class="space-y-1.5">
-            <span class="block text-[10px] uppercase tracking-wide text-slate-500">
+            <span class="block text-[10px] uppercase tracking-wide text-dimmed">
               {{ t('settings.localModelEndpoints.enableModels') }}
             </span>
-            <p class="text-[11px] text-slate-500">
+            <p class="text-[11px] text-dimmed">
               {{ t('settings.localModelEndpoints.imageInputHint') }}
             </p>
             <div class="space-y-1.5">
               <div v-for="m in discovered" :key="m" class="flex items-center gap-2">
-                <label class="flex min-w-0 flex-1 items-center gap-2 text-sm text-slate-300">
+                <label class="flex min-w-0 flex-1 items-center gap-2 text-sm text-toned">
                   <UCheckbox
                     :model-value="selected.includes(m)"
                     @update:model-value="