@cat-factory/app 0.302.2 → 0.303.1

package/app/components/sandbox/SandboxPanel.vue

@@ -222,9 +222,9 @@ const detailRows = computed(() =>
 const selectedRun = ref<SandboxRun | null>(null)
 
 function scoreColor(score: number): string {
-  if (score >= 4) return 'text-emerald-400'
-  if (score >= 3) return 'text-amber-400'
-  return 'text-rose-400'
+  if (score >= 4) return 'text-app-success-400'
+  if (score >= 3) return 'text-app-warning-400'
+  return 'text-app-error-400'
 }
 
 // ---- prompt editor ---------------------------------------------------------
@@ -270,15 +270,15 @@ async function archive(prompt: SandboxPromptVersion) {
   >
     <template #body>
       <div v-if="store.loading" class="flex items-center justify-center py-12">
-        <UIcon name="i-lucide-loader-circle" class="h-6 w-6 animate-spin text-slate-400" />
+        <UIcon name="i-lucide-loader-circle" class="h-6 w-6 animate-spin text-muted" />
       </div>
 
       <div
         v-else-if="!store.available"
-        class="rounded-lg border border-slate-700 bg-slate-900/50 p-6 text-sm text-slate-300"
+        class="rounded-lg border border-muted bg-default/50 p-6 text-sm text-toned"
       >
-        <p class="font-medium text-slate-200">{{ t('sandbox.unavailable.title') }}</p>
-        <i18n-t keypath="sandbox.unavailable.body" tag="p" class="mt-1 text-slate-400">
+        <p class="font-medium text-default">{{ t('sandbox.unavailable.title') }}</p>
+        <i18n-t keypath="sandbox.unavailable.body" tag="p" class="mt-1 text-muted">
           <template #db><code>SANDBOX_DB</code></template>
           <template #schema><code>sandbox</code></template>
         </i18n-t>
@@ -286,10 +286,10 @@ async function archive(prompt: SandboxPromptVersion) {
 
       <div
         v-else-if="store.error"
-        class="rounded-lg border border-rose-800 bg-rose-950/40 p-6 text-sm text-rose-200"
+        class="rounded-lg border border-app-error-800 bg-app-error-950/40 p-6 text-sm text-app-error-200"
       >
-        <p class="font-medium text-rose-100">{{ t('sandbox.error.title') }}</p>
-        <p class="mt-1 text-rose-300">{{ store.error }}</p>
+        <p class="font-medium text-app-error-100">{{ t('sandbox.error.title') }}</p>
+        <p class="mt-1 text-app-error-300">{{ store.error }}</p>
         <UButton class="mt-3" size="xs" color="neutral" variant="subtle" @click="store.load()">
           {{ t('common.retry') }}
         </UButton>
@@ -316,8 +316,8 @@ async function archive(prompt: SandboxPromptVersion) {
         <!-- ============================= EXPERIMENTS ============================= -->
         <div v-if="tab === 'experiments'" class="grid gap-4 lg:grid-cols-2">
           <!-- builder -->
-          <div class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="space-y-3 rounded-lg border border-muted bg-default/40 p-3">
+            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('sandbox.builder.title') }}
             </p>
 
@@ -331,9 +331,9 @@ async function archive(prompt: SandboxPromptVersion) {
               <p
                 v-for="excluded in unrunnableAgentKinds"
                 :key="excluded.agentKind"
-                class="mt-1 text-[11px] leading-snug text-slate-500"
+                class="mt-1 text-[11px] leading-snug text-dimmed"
               >
-                <span class="font-medium text-slate-400">{{ excluded.label }}:</span>
+                <span class="font-medium text-muted">{{ excluded.label }}:</span>
                 {{
                   excluded.unsupportedReason
                     ? UNSUPPORTED_REASON_LABEL[excluded.unsupportedReason]
@@ -343,14 +343,14 @@ async function archive(prompt: SandboxPromptVersion) {
             </UFormField>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                 {{ t('sandbox.builder.promptVersions') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="p in kindPrompts"
                   :key="p.id"
-                  class="flex items-center gap-2 text-sm text-slate-300"
+                  class="flex items-center gap-2 text-sm text-toned"
                 >
                   <UCheckbox
                     :model-value="selectedPromptIds.includes(p.id)"
@@ -375,14 +375,14 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                 {{ t('sandbox.builder.models') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="m in store.selectableModels"
                   :key="m.id"
-                  class="flex items-center gap-2 text-sm text-slate-300"
+                  class="flex items-center gap-2 text-sm text-toned"
                 >
                   <UCheckbox
                     :model-value="selectedModelIds.includes(m.id)"
@@ -392,21 +392,21 @@ async function archive(prompt: SandboxPromptVersion) {
                   />
                   <span class="truncate">{{ m.label }}</span>
                 </label>
-                <p v-if="!store.selectableModels.length" class="text-xs text-slate-500">
+                <p v-if="!store.selectableModels.length" class="text-xs text-dimmed">
                   {{ t('sandbox.builder.noModels') }}
                 </p>
               </div>
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                 {{ t('sandbox.builder.fixtures') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="f in kindFixtures"
                   :key="f.id"
-                  class="flex items-center gap-2 text-sm text-slate-300"
+                  class="flex items-center gap-2 text-sm text-toned"
                 >
                   <UCheckbox
                     :model-value="selectedFixtureIds.includes(f.id)"
@@ -416,7 +416,7 @@ async function archive(prompt: SandboxPromptVersion) {
                   />
                   <span class="truncate">{{ f.name }}</span>
                 </label>
-                <p v-if="!kindFixtures.length" class="text-xs text-slate-500">
+                <p v-if="!kindFixtures.length" class="text-xs text-dimmed">
                   {{ t('sandbox.builder.noFixtures') }}
                 </p>
               </div>
@@ -437,9 +437,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </UFormField>
 
             <div class="flex items-center justify-between">
-              <span class="text-xs text-slate-500">
+              <span class="text-xs text-dimmed">
                 {{ t('sandbox.builder.cellCount', { count: cellCount }, cellCount) }}
-                <span v-if="cellCount > store.maxCells" class="text-rose-400">
+                <span v-if="cellCount > store.maxCells" class="text-app-error-400">
                   {{ t('sandbox.builder.maxCells', { max: store.maxCells }) }}
                 </span>
               </span>
@@ -458,9 +458,9 @@ async function archive(prompt: SandboxPromptVersion) {
 
           <!-- history + results -->
           <div class="space-y-3">
-            <div v-if="store.detail" class="rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+            <div v-if="store.detail" class="rounded-lg border border-muted bg-default/40 p-3">
               <div class="mb-2 flex items-center justify-between">
-                <p class="text-sm font-medium text-slate-200">
+                <p class="text-sm font-medium text-default">
                   {{ store.detail.experiment.name }}
                 </p>
                 <UBadge variant="soft" size="xs">{{
@@ -469,7 +469,7 @@ async function archive(prompt: SandboxPromptVersion) {
               </div>
               <div class="overflow-auto">
                 <table class="w-full text-start text-xs">
-                  <thead class="text-slate-500">
+                  <thead class="text-dimmed">
                     <tr>
                       <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
                       <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
@@ -482,14 +482,14 @@ async function archive(prompt: SandboxPromptVersion) {
                     <tr
                       v-for="{ run, grade, fixtureName } in detailRows"
                       :key="run.id"
-                      class="cursor-pointer border-t border-slate-800 hover:bg-slate-800/40"
+                      class="cursor-pointer border-t border-default hover:bg-elevated/40"
                       @click="selectedRun = run"
                     >
-                      <td class="py-1 pe-2 text-slate-300">{{ run.promptLabel }}</td>
-                      <td class="py-1 pe-2 font-mono text-[11px] text-slate-400">
+                      <td class="py-1 pe-2 text-toned">{{ run.promptLabel }}</td>
+                      <td class="py-1 pe-2 font-mono text-[11px] text-muted">
                         {{ run.model }}
                       </td>
-                      <td class="py-1 pe-2 text-slate-400">{{ fixtureName }}</td>
+                      <td class="py-1 pe-2 text-muted">{{ fixtureName }}</td>
                       <td class="py-1 pe-2">
                         <span
                           v-if="grade"
@@ -498,19 +498,21 @@ async function archive(prompt: SandboxPromptVersion) {
                         >
                           {{ grade.weightedTotal.toFixed(2) }}
                         </span>
-                        <span v-else-if="run.status === 'failed'" class="text-rose-400">{{
+                        <span v-else-if="run.status === 'failed'" class="text-app-error-400">{{
                           t('sandbox.results.failed')
                         }}</span>
-                        <span v-else class="text-slate-600">—</span>
+                        <span v-else class="text-app-600">—</span>
                       </td>
                       <td class="py-1">
                         <span
                           v-if="grade?.objective"
-                          :class="grade.objective.pass ? 'text-emerald-400' : 'text-amber-400'"
+                          :class="
+                            grade.objective.pass ? 'text-app-success-400' : 'text-app-warning-400'
+                          "
                         >
                           {{ grade.objective.caught }}/{{ grade.objective.total }}
                         </span>
-                        <span v-else class="text-slate-600">—</span>
+                        <span v-else class="text-app-600">—</span>
                       </td>
                     </tr>
                   </tbody>
@@ -518,45 +520,45 @@ async function archive(prompt: SandboxPromptVersion) {
               </div>
 
               <!-- selected cell output -->
-              <div v-if="selectedRun" class="mt-3 border-t border-slate-800 pt-2">
-                <p class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+              <div v-if="selectedRun" class="mt-3 border-t border-default pt-2">
+                <p class="mb-1 text-[11px] uppercase tracking-wide text-dimmed">
                   {{ selectedRun.promptLabel }} · {{ selectedRun.model }}
                 </p>
-                <p v-if="selectedRun.error" class="text-xs text-rose-400">
+                <p v-if="selectedRun.error" class="text-xs text-app-error-400">
                   {{ selectedRun.error }}
                 </p>
                 <pre
                   v-if="selectedRun.outputText"
-                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded bg-slate-950/60 p-2 text-[11px] text-slate-300"
+                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
                   >{{ selectedRun.outputText }}</pre>
                 <div v-if="gradeByRun.get(selectedRun.id)" class="mt-2 space-y-0.5">
                   <p
                     v-for="d in gradeByRun.get(selectedRun.id)!.scores"
                     :key="d.key"
-                    class="text-[11px] text-slate-400"
+                    class="text-[11px] text-muted"
                   >
                     <span :class="scoreColor(d.score)" class="font-semibold">{{ d.score }}</span>
-                    <span class="ms-1 text-slate-300">{{ d.key }}</span>
-                    <span v-if="d.rationale" class="ms-1 text-slate-500">— {{ d.rationale }}</span>
+                    <span class="ms-1 text-toned">{{ d.key }}</span>
+                    <span v-if="d.rationale" class="ms-1 text-dimmed">— {{ d.rationale }}</span>
                   </p>
                 </div>
               </div>
             </div>
 
-            <p class="text-[11px] uppercase tracking-wide text-slate-500">
+            <p class="text-[11px] uppercase tracking-wide text-dimmed">
               {{ t('sandbox.results.past') }}
             </p>
             <div class="max-h-56 space-y-1 overflow-auto">
               <button
                 v-for="x in store.experiments"
                 :key="x.id"
-                class="flex w-full items-center justify-between rounded-md border border-slate-800 bg-slate-900/40 px-2 py-1.5 text-start text-sm hover:bg-slate-800/50"
+                class="flex w-full items-center justify-between rounded-md border border-default bg-default/40 px-2 py-1.5 text-start text-sm hover:bg-elevated/50"
                 @click="store.openExperiment(x.id)"
               >
-                <span class="truncate text-slate-300">{{ x.name }}</span>
+                <span class="truncate text-toned">{{ x.name }}</span>
                 <UBadge variant="soft" size="xs">{{ EXPERIMENT_STATUS_LABEL[x.status] }}</UBadge>
               </button>
-              <p v-if="!store.experiments.length" class="text-xs text-slate-500">
+              <p v-if="!store.experiments.length" class="text-xs text-dimmed">
                 {{ t('sandbox.results.empty') }}
               </p>
             </div>
@@ -569,11 +571,11 @@ async function archive(prompt: SandboxPromptVersion) {
             <div
               v-for="p in store.prompts"
               :key="p.id"
-              class="flex items-center justify-between rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-1.5 text-sm"
+              class="flex items-center justify-between rounded-md border border-default bg-default/40 px-2.5 py-1.5 text-sm"
             >
               <div class="min-w-0">
                 <div class="flex items-center gap-2">
-                  <span class="truncate text-slate-200">{{ p.name }}</span>
+                  <span class="truncate text-default">{{ p.name }}</span>
                   <UBadge :color="PROMPT_ORIGIN_COLOR[p.origin]" variant="soft" size="xs">
                     {{
                       p.origin === 'baseline'
@@ -589,7 +591,7 @@ async function archive(prompt: SandboxPromptVersion) {
                     }}
                   </UBadge>
                 </div>
-                <span class="text-[11px] text-slate-500">{{ p.agentKind }}</span>
+                <span class="text-[11px] text-dimmed">{{ p.agentKind }}</span>
               </div>
               <div class="flex items-center gap-1">
                 <UButton
@@ -629,11 +631,8 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
           </div>
 
-          <div
-            v-if="editing"
-            class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
-          >
-            <p class="text-[11px] uppercase tracking-wide text-slate-500">
+          <div v-if="editing" class="space-y-2 rounded-lg border border-muted bg-default/40 p-3">
+            <p class="text-[11px] uppercase tracking-wide text-dimmed">
               {{
                 editing.origin === 'baseline'
                   ? t('sandbox.prompts.forkOf', { name: editing.name })
@@ -666,7 +665,7 @@ async function archive(prompt: SandboxPromptVersion) {
               </UButton>
             </div>
           </div>
-          <p v-else class="self-start text-xs text-slate-500">
+          <p v-else class="self-start text-xs text-dimmed">
             {{ t('sandbox.prompts.hint') }}
           </p>
         </div>
@@ -676,10 +675,10 @@ async function archive(prompt: SandboxPromptVersion) {
           <div
             v-for="f in store.fixtures"
             :key="f.id"
-            class="rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-2 text-sm"
+            class="rounded-md border border-default bg-default/40 px-2.5 py-2 text-sm"
           >
             <div class="flex items-center justify-between">
-              <span class="text-slate-200">{{ f.name }}</span>
+              <span class="text-default">{{ f.name }}</span>
               <div class="flex items-center gap-1.5">
                 <UBadge variant="soft" size="xs">{{ FIXTURE_KIND_LABEL[f.kind] }}</UBadge>
                 <UBadge
@@ -691,7 +690,7 @@ async function archive(prompt: SandboxPromptVersion) {
                 </UBadge>
               </div>
             </div>
-            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-[11px] text-slate-500">
+            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-[11px] text-dimmed">
               {{
                 t(
                   'sandbox.fixtures.expectations',
@@ -701,7 +700,7 @@ async function archive(prompt: SandboxPromptVersion) {
               }}
             </p>
           </div>
-          <p v-if="!store.fixtures.length" class="text-xs text-slate-500">
+          <p v-if="!store.fixtures.length" class="text-xs text-dimmed">
             {{ t('sandbox.fixtures.empty') }}
           </p>
         </div>

package/app/components/settings/AccountSettingsPanel.vue

@@ -60,7 +60,7 @@ const tabs = computed(() => [
 <template>
   <UModal v-model:open="open" :title="t('settings.account.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <p v-if="!accounts.activeAccountId" class="text-sm text-slate-400">
+      <p v-if="!accounts.activeAccountId" class="text-sm text-muted">
         {{ t('settings.account.noAccount') }}
       </p>
       <UTabs

package/app/components/settings/ApiTokensPanel.vue

@@ -189,7 +189,7 @@ async function revokeToken(key: PublicApiKey) {
     </template>
     <template #body>
       <div class="space-y-4" data-testid="api-tokens-panel">
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{ t('settings.apiTokens.intro') }}
         </p>
 
@@ -197,18 +197,18 @@ async function revokeToken(key: PublicApiKey) {
              key is never recoverable, so it must be copied now. -->
         <section
           v-if="newSecret"
-          class="space-y-2 rounded-lg border border-primary-500/40 bg-primary-500/10 p-3"
+          class="space-y-2 rounded-lg border border-primary/40 bg-primary/10 p-3"
           data-testid="api-token-secret"
         >
-          <div class="flex items-center gap-2 text-sm font-medium text-primary-200">
+          <div class="flex items-center gap-2 text-sm font-medium text-primary">
             <UIcon name="i-lucide-key-round" class="h-4 w-4 shrink-0" />
             <span>{{ t('settings.apiTokens.secret.heading') }}</span>
           </div>
-          <p class="text-xs text-slate-300">{{ t('settings.apiTokens.secret.warning') }}</p>
+          <p class="text-xs text-toned">{{ t('settings.apiTokens.secret.warning') }}</p>
           <div
-            class="flex items-center gap-2 rounded-md border border-slate-700 bg-slate-950/60 px-3 py-2"
+            class="flex items-center gap-2 rounded-md border border-muted bg-app-950/60 px-3 py-2"
           >
-            <code class="min-w-0 flex-1 truncate font-mono text-xs text-slate-100">{{
+            <code class="min-w-0 flex-1 truncate font-mono text-xs text-app-100">{{
               newSecret
             }}</code>
             <CopyButton :text="newSecret" :label="t('settings.apiTokens.secret.copy')" size="sm" />
@@ -226,14 +226,14 @@ async function revokeToken(key: PublicApiKey) {
           </div>
         </section>
 
-        <section v-if="store.keys.length" class="space-y-2 rounded-lg border border-slate-700 p-3">
+        <section v-if="store.keys.length" class="space-y-2 rounded-lg border border-muted p-3">
           <h3 class="text-sm font-semibold">
             {{ t('settings.apiTokens.list.heading') }}
           </h3>
           <div
             v-for="key in store.keys"
             :key="key.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+            class="flex items-center justify-between gap-2 rounded-md border border-default px-3 py-2"
           >
             <div class="min-w-0 space-y-0.5">
               <div class="flex items-center gap-2">
@@ -259,7 +259,7 @@ async function revokeToken(key: PublicApiKey) {
                   {{ boundLabel(key) }}
                 </UBadge>
               </div>
-              <div class="text-[11px] text-slate-500">
+              <div class="text-[11px] text-dimmed">
                 {{
                   t('settings.apiTokens.list.created', {
                     date: d(new Date(key.createdAt), 'short'),
@@ -291,7 +291,7 @@ async function revokeToken(key: PublicApiKey) {
           </div>
         </section>
 
-        <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">
           <h3 class="text-sm font-semibold">
             {{ t('settings.apiTokens.add.heading') }}
           </h3>

package/app/components/settings/BudgetSettings.vue

@@ -122,18 +122,18 @@ function saveUser() {
 
 <template>
   <div class="space-y-8">
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{ t('settings.workspaceSettings.budget.body') }}
     </p>
 
     <!-- Workspace tier -->
     <section class="space-y-2">
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.workspace') }}
       </h3>
       <div class="grid grid-cols-2 gap-3">
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
             {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
           </span>
           <UInput
@@ -145,7 +145,7 @@ function saveUser() {
           />
         </label>
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
             {{ t('settings.workspaceSettings.budget.currency') }}
           </span>
           <UInput
@@ -157,7 +157,7 @@ function saveUser() {
           />
         </label>
       </div>
-      <div v-if="workspace.spend" class="text-[11px] text-slate-400">
+      <div v-if="workspace.spend" class="text-[11px] text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.spend.costSpent, workspace.spend.currency),
@@ -180,14 +180,14 @@ function saveUser() {
 
     <!-- Account tier -->
     <section v-if="account" class="space-y-2">
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.account') }}
       </h3>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('settings.workspaceSettings.budget.accountBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
         </span>
         <UInput
@@ -203,14 +203,12 @@ function saveUser() {
       <p
         v-if="accountCap != null"
         class="text-[11px]"
-        :class="accountOverCap ? 'text-rose-400' : 'text-amber-400'"
+        :class="accountOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(accountCap) }) }}
-        <span class="text-slate-500"
-          >({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span
-        >
+        <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.accountSpend" class="text-[11px] text-slate-400">
+      <div v-if="workspace.accountSpend" class="text-[11px] text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.accountSpend.costSpent),
@@ -218,7 +216,7 @@ function saveUser() {
           })
         }}
       </div>
-      <p v-if="!canEditAccount" class="text-[11px] text-slate-500">
+      <p v-if="!canEditAccount" class="text-[11px] text-dimmed">
         {{ t('settings.workspaceSettings.budget.adminOnly') }}
       </p>
       <div v-if="canEditAccount" class="flex justify-end">
@@ -237,14 +235,14 @@ function saveUser() {
 
     <!-- User tier -->
     <section class="space-y-2">
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.user') }}
       </h3>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('settings.workspaceSettings.budget.userBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
         </span>
         <UInput
@@ -259,14 +257,12 @@ function saveUser() {
       <p
         v-if="userCap != null"
         class="text-[11px]"
-        :class="userOverCap ? 'text-rose-400' : 'text-amber-400'"
+        :class="userOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(userCap) }) }}
-        <span class="text-slate-500"
-          >({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span
-        >
+        <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.userSpend" class="text-[11px] text-slate-400">
+      <div v-if="workspace.userSpend" class="text-[11px] text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.userSpend.costSpent),

package/app/components/settings/CapabilityCredentialsPanel.vue

@@ -119,7 +119,7 @@ async function removeKey(key: string) {
          only thing on either surface that can say whether the value they typed works. -->
     <ToolServerChecklist />
 
-    <p class="text-sm text-slate-400">
+    <p class="text-sm text-muted">
       {{ t('settings.capabilityCredentials.intro') }}
     </p>
 
@@ -140,7 +140,7 @@ async function removeKey(key: string) {
     <section
       v-for="entry in view?.declared ?? []"
       :key="entry.key"
-      class="space-y-3 rounded-lg border border-slate-700 p-3"
+      class="space-y-3 rounded-lg border border-muted p-3"
       :data-testid="`capability-credential-${entry.key}`"
     >
       <div class="flex flex-wrap items-center gap-2">
@@ -165,15 +165,15 @@ async function removeKey(key: string) {
       <!-- Who wants the value, so an operator can tell what they are about to change. One key is
            routinely wanted by more than one capability (two integrations behind one vendor
            account), which is exactly when a rotation has consequences beyond the row it edits. -->
-      <ul class="space-y-1 text-xs text-slate-400">
+      <ul class="space-y-1 text-xs text-muted">
         <li v-for="declarer in entry.declaredBy" :key="`${declarer.subject}:${declarer.id}`">
-          <span class="text-slate-300">{{ declarer.label }}</span>
-          <span class="text-slate-500"> · {{ SUBJECT_LABELS[declarer.subject] }}</span>
-          <span v-if="declarer.usage" class="block text-slate-500">{{ declarer.usage }}</span>
+          <span class="text-toned">{{ declarer.label }}</span>
+          <span class="text-dimmed"> · {{ SUBJECT_LABELS[declarer.subject] }}</span>
+          <span v-if="declarer.usage" class="block text-dimmed">{{ declarer.usage }}</span>
         </li>
       </ul>
 
-      <p v-if="entry.stored && entry.updatedAt" class="text-[11px] text-slate-500">
+      <p v-if="entry.stored && entry.updatedAt" class="text-[11px] text-dimmed">
         {{
           t('settings.capabilityCredentials.storedAt', {
             date: d(new Date(entry.updatedAt), 'short'),
@@ -191,13 +191,13 @@ async function removeKey(key: string) {
            usual one, but a facade that wired the store and dropped the flag lands here too, and
            blaming a custom resolver would make that wiring bug read as a deliberate configuration
            and send the operator to the one place that cannot explain it. -->
-      <p v-else-if="view?.environmentFallback === true" class="text-[11px] text-slate-500">
+      <p v-else-if="view?.environmentFallback === true" class="text-[11px] text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredWithFallback') }}
       </p>
-      <p v-else-if="view?.environmentFallback === false" class="text-[11px] text-amber-400">
+      <p v-else-if="view?.environmentFallback === false" class="text-[11px] text-app-warning-400">
         {{ t('settings.capabilityCredentials.notStored') }}
       </p>
-      <p v-else class="text-[11px] text-slate-500">
+      <p v-else class="text-[11px] text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredUnknownFallback') }}
       </p>
 
@@ -241,7 +241,7 @@ async function removeKey(key: string) {
 
     <p
       v-if="view && !view.declared.length && !view.declarationsIncomplete"
-      class="text-sm text-slate-500"
+      class="text-sm text-dimmed"
     >
       {{ t('settings.capabilityCredentials.noneDeclared') }}
     </p>
@@ -252,23 +252,23 @@ async function removeKey(key: string) {
          regressed". Withheld entirely while the declaration read is incomplete. -->
     <section
       v-if="view?.orphaned.length"
-      class="space-y-2 rounded-lg border border-amber-900/60 p-3"
+      class="space-y-2 rounded-lg border border-app-warning-900/60 p-3"
       data-testid="capability-credentials-orphaned"
     >
       <h3 class="text-sm font-semibold">
         {{ t('settings.capabilityCredentials.orphaned.heading') }}
       </h3>
-      <p class="text-xs text-slate-400">
+      <p class="text-xs text-muted">
         {{ t('settings.capabilityCredentials.orphaned.body') }}
       </p>
       <div
         v-for="orphan in view.orphaned"
         :key="orphan.key"
-        class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+        class="flex items-center justify-between gap-2 rounded-md border border-default px-3 py-2"
       >
         <div class="min-w-0">
           <code class="font-mono text-sm">{{ orphan.key }}</code>
-          <span class="block text-[11px] text-slate-500">
+          <span class="block text-[11px] text-dimmed">
             {{
               t('settings.capabilityCredentials.storedAt', {
                 date: d(new Date(orphan.updatedAt), 'short'),