@cat-factory/app 0.302.1 → 0.303.0

package/app/components/providers/ApiKeysSection.vue

@@ -264,7 +264,7 @@ async function remove(k: ApiKey) {
 <template>
   <div class="space-y-4">
     <div>
-      <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
         {{
           category === 'proxy'
             ? t('providers.apiKeys.proxyHeading')
@@ -272,18 +272,18 @@ async function remove(k: ApiKey) {
         }}
       </h4>
       <template v-if="category === 'proxy'">
-        <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
+        <p v-if="isAccount" class="mt-1 text-sm text-muted">
           {{ t('providers.apiKeys.proxyAccountIntro') }}
         </p>
-        <p v-else class="mt-1 text-sm text-slate-400">
+        <p v-else class="mt-1 text-sm text-muted">
           {{ t('providers.apiKeys.proxyIntro') }}
         </p>
       </template>
       <template v-else>
-        <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
+        <p v-if="isAccount" class="mt-1 text-sm text-muted">
           {{ t('providers.apiKeys.directAccountIntro') }}
         </p>
-        <p v-else class="mt-1 text-sm text-slate-400">
+        <p v-else class="mt-1 text-sm text-muted">
           {{ t('providers.apiKeys.directIntro') }}
         </p>
       </template>
@@ -324,7 +324,7 @@ async function remove(k: ApiKey) {
 
     <!-- where to get the key -->
     <ol
-      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
+      class="list-decimal space-y-1.5 rounded-lg border border-muted bg-default/60 p-4 ps-8 text-sm text-toned"
     >
       <li v-for="(step, i) in selected.steps" :key="i">{{ step }}</li>
       <li>
@@ -332,7 +332,7 @@ async function remove(k: ApiKey) {
           :href="selected.url"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-primary-400 underline"
+          class="text-primary underline"
         >
           {{ t('providers.apiKeys.openKeys', { provider: selected.label }) }}
         </a>
@@ -343,7 +343,7 @@ async function remove(k: ApiKey) {
          the caching flavour, so long agentic runs stop re-billing the whole prompt. -->
     <p
       v-if="cachesPrompts(selected.value)"
-      class="flex items-center gap-1.5 text-[12px] text-emerald-400/90"
+      class="flex items-center gap-1.5 text-[12px] text-app-success-400/90"
     >
       <UIcon name="i-lucide-zap" class="h-3.5 w-3.5 shrink-0" />
       {{ t('providers.apiKeys.cachingNote', { provider: selected.label }) }}
@@ -380,22 +380,22 @@ async function remove(k: ApiKey) {
 
     <!-- connected keys for the selected scope -->
     <div v-if="connected.length" class="space-y-2">
-      <h5 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+      <h5 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
         {{ t('providers.apiKeys.connected', { count: connected.length }) }}
       </h5>
       <div
         v-for="k in connected"
         :key="k.id"
-        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"
         :class="{ 'opacity-55': !k.enabled }"
       >
         <div>
-          <span class="font-medium text-slate-200">{{ k.label }}</span>
-          <span class="ms-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
+          <span class="font-medium text-default">{{ k.label }}</span>
+          <span class="ms-2 text-xs text-dimmed">{{ providerLabel(k.provider) }}</span>
           <UBadge v-if="!k.enabled" color="neutral" variant="subtle" size="sm" class="ms-2">
             {{ t('providers.apiKeys.disabledBadge') }}
           </UBadge>
-          <div class="text-[11px] tabular-nums text-slate-500">
+          <div class="text-[11px] tabular-nums text-dimmed">
             {{
               t(
                 'providers.apiKeys.usage',

package/app/components/providers/PersonalCredentialModal.vue

@@ -93,7 +93,7 @@ function goConnect() {
     <template #body>
       <div class="space-y-4">
         <template v-if="needsConnect">
-          <p class="text-sm text-slate-400">
+          <p class="text-sm text-muted">
             {{ t('providers.personalCredential.connectBody', { vendor: vendorLabel }) }}
           </p>
           <div class="flex justify-end gap-2">
@@ -115,7 +115,7 @@ function goConnect() {
         </template>
 
         <template v-else>
-          <p class="text-sm text-slate-400">
+          <p class="text-sm text-muted">
             {{ t('providers.personalCredential.passwordBody', { vendor: vendorLabel }) }}
           </p>
           <UFormField :label="t('providers.personalCredential.passwordField')">

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -208,10 +208,10 @@ async function disconnect(v: SubscriptionVendor) {
 <template>
   <div class="space-y-3">
     <div>
-      <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+      <h4 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
         {{ t('personalSubscriptions.heading') }}
       </h4>
-      <p class="mt-1 text-sm text-slate-400">{{ t('personalSubscriptions.intro') }}</p>
+      <p class="mt-1 text-sm text-muted">{{ t('personalSubscriptions.intro') }}</p>
     </div>
 
     <ProvidersSignInRequiredNotice
@@ -223,12 +223,12 @@ async function disconnect(v: SubscriptionVendor) {
     <div
       v-for="sub in personal.subscriptions"
       :key="sub.vendor"
-      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">{{ sub.label }}</span>
-        <span class="ms-2 text-xs text-slate-500">{{ vendorLabel(sub.vendor) }}</span>
-        <div class="text-[11px] text-slate-500">
+        <span class="font-medium text-default">{{ sub.label }}</span>
+        <span class="ms-2 text-xs text-dimmed">{{ vendorLabel(sub.vendor) }}</span>
+        <div class="text-[11px] text-dimmed">
           <template v-if="sub.expiresAt">
             {{ t('personalSubscriptions.expires', { date: d(new Date(sub.expiresAt), 'short') }) }}
           </template>
@@ -244,7 +244,7 @@ async function disconnect(v: SubscriptionVendor) {
       />
     </div>
 
-    <p v-for="(line, i) in renewals" :key="i" class="text-sm text-amber-400/90">{{ line }}</p>
+    <p v-for="(line, i) in renewals" :key="i" class="text-sm text-app-warning-400/90">{{ line }}</p>
 
     <!-- vendor picker -->
     <UFormField :label="t('personalSubscriptions.vendorField')">
@@ -258,7 +258,7 @@ async function disconnect(v: SubscriptionVendor) {
 
     <!-- connect / replace form -->
     <ol
-      class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
+      class="list-decimal space-y-1.5 rounded-lg border border-muted bg-default/60 p-4 ps-8 text-sm text-toned"
     >
       <li v-for="(step, i) in selectedMeta.steps" :key="i">{{ step }}</li>
     </ol>
@@ -292,11 +292,11 @@ async function disconnect(v: SubscriptionVendor) {
         </UFormField>
       </div>
       <div class="flex items-center justify-end gap-3">
-        <p v-if="savedNotice" class="flex items-center gap-1.5 text-sm text-emerald-400">
+        <p v-if="savedNotice" class="flex items-center gap-1.5 text-sm text-app-success-400">
           <UIcon name="i-lucide-check" class="size-4" />
           {{ savedNotice }}
         </p>
-        <p v-else-if="disabledReason" class="text-sm text-rose-400">{{ disabledReason }}</p>
+        <p v-else-if="disabledReason" class="text-sm text-app-error-400">{{ disabledReason }}</p>
         <UButton
           :loading="busy"
           :disabled="disabledReason !== null"

package/app/components/providers/SignInRequiredNotice.vue

@@ -10,7 +10,7 @@ defineProps<{ message: string }>()
 
 <template>
   <div
-    class="flex items-start gap-2.5 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200"
+    class="flex items-start gap-2.5 rounded-lg border border-app-warning-500/40 bg-app-warning-500/10 p-3 text-sm text-app-warning-200"
     role="alert"
   >
     <UIcon name="i-lucide-lock" class="mt-0.5 h-4 w-4 shrink-0" />

package/app/components/providers/VendorCredentialsModal.vue

@@ -199,10 +199,10 @@ function vendorLabel(v: SubscriptionVendor): string {
                  `personal` tab — point them there before they read a pool form that can't
                  take their credential. -->
             <div
-              class="flex items-center gap-3 rounded-lg border border-indigo-500/30 bg-indigo-950/30 px-3 py-2.5"
+              class="flex items-center gap-3 rounded-lg border border-primary/30 bg-primary/10 px-3 py-2.5"
             >
-              <UIcon name="i-lucide-user" class="h-5 w-5 shrink-0 text-indigo-300" />
-              <p class="min-w-0 flex-1 text-[13px] text-slate-300">
+              <UIcon name="i-lucide-user" class="h-5 w-5 shrink-0 text-primary" />
+              <p class="min-w-0 flex-1 text-[13px] text-toned">
                 {{ t('providers.vendorCredentials.personalCallout.text') }}
               </p>
               <UButton
@@ -216,7 +216,7 @@ function vendorLabel(v: SubscriptionVendor): string {
               </UButton>
             </div>
 
-            <p class="text-sm text-slate-400">
+            <p class="text-sm text-muted">
               {{ t('providers.vendorCredentials.poolIntro') }}
             </p>
 
@@ -233,7 +233,7 @@ function vendorLabel(v: SubscriptionVendor): string {
 
             <!-- guided steps -->
             <ol
-              class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 ps-8 text-sm text-slate-300"
+              class="list-decimal space-y-1.5 rounded-lg border border-muted bg-default/60 p-4 ps-8 text-sm text-toned"
             >
               <li v-for="(step, i) in steps" :key="i">{{ step }}</li>
             </ol>
@@ -267,7 +267,7 @@ function vendorLabel(v: SubscriptionVendor): string {
 
             <!-- connected pool -->
             <div v-if="creds.credentials.length" class="space-y-2">
-              <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+              <h4 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
                 {{
                   t('providers.vendorCredentials.connected', { count: creds.credentials.length })
                 }}
@@ -275,16 +275,16 @@ function vendorLabel(v: SubscriptionVendor): string {
               <div
                 v-for="c in creds.credentials"
                 :key="c.id"
-                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"
                 :class="{ 'opacity-55': !c.enabled }"
               >
                 <div>
-                  <span class="font-medium text-slate-200">{{ c.label }}</span>
-                  <span class="ms-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
+                  <span class="font-medium text-default">{{ c.label }}</span>
+                  <span class="ms-2 text-xs text-dimmed">{{ vendorLabel(c.vendor) }}</span>
                   <UBadge v-if="!c.enabled" color="neutral" variant="subtle" size="sm" class="ms-2">
                     {{ t('providers.vendorCredentials.disabledBadge') }}
                   </UBadge>
-                  <div class="text-[11px] tabular-nums text-slate-500">
+                  <div class="text-[11px] tabular-nums text-dimmed">
                     {{
                       t(
                         'providers.vendorCredentials.usage',

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -113,9 +113,9 @@ function when(epochMs: number): string {
 </script>
 
 <template>
-  <div class="rounded-lg border border-slate-700 bg-slate-900/50">
-    <div class="flex items-center justify-between border-b border-slate-800 px-3 py-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+  <div class="rounded-lg border border-muted bg-default/50">
+    <div class="flex items-center justify-between border-b border-default px-3 py-2">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('provisioning.title') }}
       </p>
       <UButton
@@ -129,41 +129,41 @@ function when(epochMs: number): string {
       </UButton>
     </div>
 
-    <p v-if="state.error" class="px-3 py-2 text-[12px] text-rose-300">{{ state.error }}</p>
+    <p v-if="state.error" class="px-3 py-2 text-[12px] text-app-error-300">{{ state.error }}</p>
     <p
       v-else-if="!state.loading && state.entries.length === 0"
-      class="px-3 py-3 text-[12px] text-slate-500"
+      class="px-3 py-3 text-[12px] text-dimmed"
     >
       {{ t('provisioning.empty') }}
     </p>
 
-    <ul v-else class="max-h-80 divide-y divide-slate-800 overflow-auto">
+    <ul v-else class="max-h-80 divide-y divide-default overflow-auto">
       <li v-for="entry in state.entries" :key="entry.id" class="px-3 py-2">
         <div class="flex items-center gap-2 text-[12px]">
           <UIcon
             :name="entry.outcome === 'success' ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
             class="h-3.5 w-3.5 shrink-0"
-            :class="entry.outcome === 'success' ? 'text-emerald-400' : 'text-rose-400'"
+            :class="entry.outcome === 'success' ? 'text-app-success-400' : 'text-app-error-400'"
           />
-          <span class="font-medium text-slate-200">{{ OPERATION_LABEL[entry.operation] }}</span>
+          <span class="font-medium text-default">{{ OPERATION_LABEL[entry.operation] }}</span>
           <span
             class="rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide"
             :class="
               entry.outcome === 'success'
-                ? 'bg-emerald-950/60 text-emerald-300'
-                : 'bg-rose-950/60 text-rose-300'
+                ? 'bg-app-success-950/60 text-app-success-300'
+                : 'bg-app-error-950/60 text-app-error-300'
             "
             >{{ OUTCOME_LABEL[entry.outcome] }}</span
           >
-          <span class="ms-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
+          <span class="ms-auto text-[11px] text-dimmed">{{ when(entry.createdAt) }}</span>
         </div>
-        <div v-if="entry.targetId" class="mt-0.5 text-[11px] text-slate-500">
+        <div v-if="entry.targetId" class="mt-0.5 text-[11px] text-dimmed">
           {{ entry.providerId ? `${entry.providerId} · ` : '' }}{{ entry.targetId }}
         </div>
         <!-- The verbatim provider/runtime error on a failed attempt. -->
         <pre
           v-if="entry.error"
-          class="mt-1 max-h-28 overflow-auto whitespace-pre-wrap rounded border border-rose-900/50 bg-rose-950/30 p-1.5 text-[11px] text-rose-200/90"
+          class="mt-1 max-h-28 overflow-auto whitespace-pre-wrap rounded border border-app-error-900/50 bg-app-error-950/30 p-1.5 text-[11px] text-app-error-200/90"
           >{{ entry.error }}</pre>
       </li>
     </ul>

package/app/components/ralph/RalphLoopResultView.vue

@@ -82,31 +82,31 @@ const STATUS_META = computed<
     label: t('ralph.status.passed'),
     badge: 'success',
     icon: 'i-lucide-circle-check',
-    text: 'text-emerald-300',
+    text: 'text-app-success-300',
   },
   stalled: {
     label: t('ralph.status.stalled'),
     badge: 'error',
     icon: 'i-lucide-circle-slash',
-    text: 'text-rose-300',
+    text: 'text-app-error-300',
   },
   'gave-up': {
     label: t('ralph.status.gaveUp'),
     badge: 'error',
     icon: 'i-lucide-circle-x',
-    text: 'text-rose-300',
+    text: 'text-app-error-300',
   },
   running: {
     label: t('ralph.status.running'),
     badge: 'warning',
     icon: 'i-lucide-loader',
-    text: 'text-amber-300',
+    text: 'text-app-warning-300',
   },
   failing: {
     label: t('ralph.status.failing'),
     badge: 'error',
     icon: 'i-lucide-circle-x',
-    text: 'text-rose-300',
+    text: 'text-app-error-300',
   },
 }))
 </script>
@@ -115,7 +115,7 @@ const STATUS_META = computed<
   <ResultWindowShell
     :open="open"
     :icon="meta.icon"
-    icon-class="bg-violet-500/15 text-violet-300"
+    icon-class="bg-app-secondary-500/15 text-app-secondary-300"
     :title="headerTitle"
     :subtitle="t('ralph.subtitle')"
     :step-ref="{ instanceId, stepIndex }"
@@ -137,7 +137,7 @@ const STATUS_META = computed<
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
         <div
           v-if="!ralph"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
         >
           <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('ralph.noActivity') }}</p>
@@ -145,27 +145,25 @@ const STATUS_META = computed<
 
         <template v-else>
           <!-- The completion criterion. -->
-          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('ralph.validationCommand') }}
           </h3>
-          <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
+          <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
             <CopyButton :text="ralph.validationCommand" class="absolute end-1 top-1" />
-            <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-slate-200">{{
+            <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-default">{{
               ralph.validationCommand
             }}</code>
           </div>
 
           <!-- The most recent validation output. -->
           <template v-if="ralph.lastValidationTail">
-            <h3
-              class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
-            >
+            <h3 class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('ralph.lastOutput', { exit: ralph.lastExitCode ?? '?' }) }}
             </h3>
-            <div class="relative rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2">
+            <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
               <CopyButton :text="ralph.lastValidationTail" class="absolute end-1 top-1" />
               <pre
-                class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-slate-400"
+                class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-muted"
                 >{{ ralph.lastValidationTail }}</pre>
             </div>
           </template>
@@ -175,7 +173,7 @@ const STATUS_META = computed<
             :href="prUrl"
             target="_blank"
             rel="noopener"
-            class="mt-3 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+            class="mt-3 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
           >
             {{ t('ralph.viewPr') }}
             <UIcon name="i-lucide-external-link" class="h-3 w-3" />
@@ -185,7 +183,7 @@ const STATUS_META = computed<
                the sidebar (e.g. "3 of 20") reads as an unexplained abandonment. -->
           <p
             v-if="status === 'stalled'"
-            class="mt-3 rounded-md border border-rose-900/60 bg-rose-950/30 px-3 py-2 text-[12px] leading-relaxed text-rose-200"
+            class="mt-3 rounded-md border border-app-error-900/60 bg-app-error-950/30 px-3 py-2 text-[12px] leading-relaxed text-app-error-200"
             data-testid="ralph-stalled-note"
           >
             {{ t('ralph.stalledNote') }}
@@ -193,14 +191,14 @@ const STATUS_META = computed<
 
           <!-- Iteration history: what each pass produced and whether its validation passed. -->
           <section v-if="attempts.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('ralph.iterationsHeading') }}
             </h3>
             <!-- The log is capped (it rides the run's detail blob); say so rather than letting a
                  long loop's partial history read as if those iterations never ran. -->
             <p
               v-if="droppedAttempts"
-              class="mb-2 text-[11px] text-slate-500"
+              class="mb-2 text-[11px] text-dimmed"
               data-testid="ralph-iterations-truncated"
             >
               {{ t('ralph.iterationsTruncated', { count: droppedAttempts }, droppedAttempts) }}
@@ -209,32 +207,32 @@ const STATUS_META = computed<
               <li
                 v-for="a in attempts"
                 :key="a.attempt"
-                class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+                class="rounded-md border border-default bg-app-950/40 px-3 py-2"
                 data-testid="ralph-iteration"
               >
                 <div class="flex items-center gap-2">
                   <UIcon
                     :name="a.validationPassed ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
                     class="h-3.5 w-3.5"
-                    :class="a.validationPassed ? 'text-emerald-400' : 'text-rose-400'"
+                    :class="a.validationPassed ? 'text-app-success-400' : 'text-app-error-400'"
                   />
-                  <span class="text-[12px] font-medium text-slate-200">
+                  <span class="text-[12px] font-medium text-default">
                     {{ t('ralph.iteration', { number: a.attempt }) }}
                   </span>
-                  <span class="text-[11px] text-slate-500">
+                  <span class="text-[11px] text-dimmed">
                     {{
                       a.validationPassed
                         ? t('ralph.iterationPassed')
                         : t('ralph.iterationFailed', { exit: a.exitCode ?? '?' })
                     }}
                   </span>
-                  <span class="ms-auto text-[10px] text-slate-600">{{
+                  <span class="ms-auto text-[10px] text-app-600">{{
                     d(new Date(a.at), 'long')
                   }}</span>
                 </div>
                 <p
                   v-if="a.summary"
-                  class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
+                  class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted"
                 >
                   {{ a.summary }}
                 </p>
@@ -245,10 +243,10 @@ const STATUS_META = computed<
       </div>
 
       <aside
-        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="ralph">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('ralph.sidebar.state') }}
           </h4>
           <div class="flex items-center gap-2 text-[13px]">
@@ -261,10 +259,10 @@ const STATUS_META = computed<
           </div>
         </div>
         <div v-if="ralph">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('ralph.sidebar.iterations') }}
           </h4>
-          <p class="text-[12px] text-slate-300" data-testid="ralph-iteration-count">
+          <p class="text-[12px] text-toned" data-testid="ralph-iteration-count">
             {{ t('ralph.sidebar.count', { attempts: ralph.attempts, max: ralph.maxIterations }) }}
           </p>
         </div>
@@ -277,7 +275,7 @@ const STATUS_META = computed<
           :run-failed="instance?.status === 'failed'"
           :failure-at="instance?.failure?.occurredAt"
         />
-        <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
+        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
           {{ t('ralph.sidebar.footer') }}
         </p>
       </aside>

package/app/components/recurring/RecurrenceEditor.vue

@@ -76,7 +76,7 @@ const timezoneOptions = computed(() =>
           class="w-24"
           @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
         />
-        <span class="text-xs text-slate-400">{{ t('recurring.hours') }}</span>
+        <span class="text-xs text-muted">{{ t('recurring.hours') }}</span>
       </div>
     </UFormField>
 
@@ -110,7 +110,7 @@ const timezoneOptions = computed(() =>
         class="w-28"
         @update:model-value="patch({ windowStartHour: Number($event) })"
       />
-      <span class="text-xs text-slate-400">{{ t('recurring.to') }}</span>
+      <span class="text-xs text-muted">{{ t('recurring.to') }}</span>
       <USelect
         :model-value="modelValue.windowEndHour ?? 24 % 24"
         :items="hours"