@cat-factory/app 0.302.1 → 0.303.0

package/app/components/settings/RiskPolicyPanel.vue

@@ -170,24 +170,19 @@ function unhide(presetId: string) {
 
 <template>
   <div class="space-y-4" data-testid="risk-policy-panel">
-    <i18n-t
-      keypath="settings.riskPolicy.intro"
-      tag="p"
-      class="text-xs text-slate-400"
-      scope="global"
-    >
+    <i18n-t keypath="settings.riskPolicy.intro" tag="p" class="text-xs text-muted" scope="global">
       <template #merger>
-        <span class="text-slate-300">{{ t('settings.riskPolicy.mergerAgent') }}</span>
+        <span class="text-toned">{{ t('settings.riskPolicy.mergerAgent') }}</span>
       </template>
     </i18n-t>
 
     <!-- Inherited FIRST: they are the org's posture, and a board reading its own list wants to see
          what it is working from before what it has changed. -->
     <section v-if="inherited.length > 0" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('settings.riskPolicy.inherited.heading') }}
       </p>
-      <p class="text-[11px] text-slate-500">{{ t('settings.riskPolicy.inherited.hint') }}</p>
+      <p class="text-[11px] text-dimmed">{{ t('settings.riskPolicy.inherited.hint') }}</p>
       <RiskPolicyInheritedRow
         v-for="policy in inherited"
         :key="policy.id"
@@ -201,7 +196,7 @@ function unhide(presetId: string) {
     <section class="space-y-4">
       <p
         v-if="inherited.length > 0"
-        class="text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+        class="text-[11px] font-semibold uppercase tracking-wide text-muted"
       >
         {{ t('settings.riskPolicy.own.heading') }}
       </p>
@@ -222,21 +217,21 @@ function unhide(presetId: string) {
          whether it still shadows an account policy: one whose policy the account has since withdrawn
          withholds nothing, and reading it as a live opt-out would misstate what the board is doing. -->
     <section v-if="store.suppressions.length > 0 || suppressionsFailed" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('settings.riskPolicy.hidden.heading') }}
       </p>
-      <p v-if="suppressionsFailed" class="text-[11px] text-amber-400">
+      <p v-if="suppressionsFailed" class="text-[11px] text-app-warning-400">
         {{ t('settings.riskPolicy.hidden.loadFailed') }}
       </p>
       <div
         v-for="entry in store.suppressions"
         :key="entry.id"
-        class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-3 py-2"
+        class="flex items-center gap-2 rounded-md border border-default bg-default/40 px-3 py-2"
         data-testid="risk-policy-hidden-row"
         :data-policy-id="entry.id"
       >
-        <span class="flex-1 truncate text-[12px] text-slate-300">{{ entry.name }}</span>
-        <span v-if="!entry.inherited" class="text-[11px] text-slate-500">
+        <span class="flex-1 truncate text-[12px] text-toned">{{ entry.name }}</span>
+        <span v-if="!entry.inherited" class="text-[11px] text-dimmed">
           {{ t('settings.riskPolicy.hidden.withdrawn') }}
         </span>
         <UButton

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -54,12 +54,12 @@ function remove(id: string) {
 
 <template>
   <div class="space-y-4">
-    <p class="text-xs text-slate-400">
+    <p class="text-xs text-muted">
       {{ t('settings.serviceFragmentDefaults.intro') }}
     </p>
 
     <div class="flex items-center justify-between">
-      <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.serviceFragmentDefaults.defaultFragments') }}
       </span>
       <UDropdownMenu v-if="menu.length" :items="menu" :ui="{ content: 'max-h-72 overflow-y-auto' }">
@@ -90,24 +90,24 @@ function remove(id: string) {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ t('settings.serviceFragmentDefaults.empty') }}
     </p>
 
-    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-slate-800 pt-3 text-[11px]">
-      <span class="text-slate-500">
+    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-default pt-3 text-[11px]">
+      <span class="text-dimmed">
         {{ t('settings.serviceFragmentDefaults.footer.question') }}
       </span>
       <button
         type="button"
-        class="font-medium text-primary-400 hover:underline"
+        class="font-medium text-primary hover:underline"
         @click="ui.openFragmentLibrary()"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageBoard') }}
       </button>
       <button
         type="button"
-        class="font-medium text-primary-400 hover:underline"
+        class="font-medium text-primary hover:underline"
         @click="ui.openAccountSettings('fragments')"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageAccount') }}

package/app/components/settings/SharedStacksPanel.vue

@@ -270,14 +270,14 @@ async function remove(stack: SharedStack) {
 
 <template>
   <div class="space-y-4" data-testid="shared-stacks-panel">
-    <p class="text-sm text-slate-400">{{ t('settings.sharedStacks.intro') }}</p>
+    <p class="text-sm text-muted">{{ t('settings.sharedStacks.intro') }}</p>
 
-    <section v-if="stacks.length" class="space-y-2 rounded-lg border border-slate-700 p-3">
+    <section v-if="stacks.length" class="space-y-2 rounded-lg border border-muted p-3">
       <h3 class="text-sm font-semibold">{{ t('settings.sharedStacks.list.heading') }}</h3>
       <div
         v-for="stack in stacks"
         :key="stack.id"
-        class="space-y-2 rounded-md border border-slate-800 px-3 py-2"
+        class="space-y-2 rounded-md border border-default px-3 py-2"
         :data-testid="`shared-stack-${stack.id}`"
       >
         <div class="flex items-center justify-between gap-2">
@@ -288,7 +288,7 @@ async function remove(stack: SharedStack) {
                 {{ statusLabel(stack.status) }}
               </UBadge>
             </div>
-            <p class="truncate text-[11px] text-slate-500">{{ stack.cloneUrl }}</p>
+            <p class="truncate text-[11px] text-dimmed">{{ stack.cloneUrl }}</p>
             <div v-if="stack.managedNetworks.length" class="flex flex-wrap gap-1">
               <UBadge
                 v-for="net in stack.managedNetworks"
@@ -347,14 +347,11 @@ async function remove(stack: SharedStack) {
             />
           </div>
         </div>
-        <p v-if="stack.lastError" class="text-[11px] text-rose-400">{{ stack.lastError }}</p>
+        <p v-if="stack.lastError" class="text-[11px] text-app-error-400">{{ stack.lastError }}</p>
       </div>
     </section>
 
-    <section
-      class="space-y-3 rounded-lg border border-slate-700 p-3"
-      data-testid="shared-stack-form"
-    >
+    <section class="space-y-3 rounded-lg border border-muted p-3" data-testid="shared-stack-form">
       <h3 class="text-sm font-semibold">
         {{
           t(editingId ? 'settings.sharedStacks.edit.heading' : 'settings.sharedStacks.add.heading')
@@ -410,12 +407,12 @@ async function remove(stack: SharedStack) {
         >
           {{ t('settings.sharedStacks.detect.button') }}
         </UButton>
-        <span class="text-[11px] text-slate-500">{{ t('settings.sharedStacks.detect.hint') }}</span>
+        <span class="text-[11px] text-dimmed">{{ t('settings.sharedStacks.detect.hint') }}</span>
       </div>
 
       <p
         v-if="detectedEnvFiles.length"
-        class="text-[11px] text-slate-500"
+        class="text-[11px] text-dimmed"
         data-testid="shared-stack-env-files"
       >
         {{ t('settings.sharedStacks.detect.envFiles') }}
@@ -431,7 +428,7 @@ async function remove(stack: SharedStack) {
           <li
             v-for="(label, index) in layerLabels"
             :key="index"
-            class="font-mono text-[11px] text-slate-500"
+            class="font-mono text-[11px] text-dimmed"
           >
             {{ label }}
           </li>

package/app/components/settings/TaskSourceCard.vue

@@ -89,13 +89,13 @@ const STATUS_UI: Record<
 </script>
 
 <template>
-  <div class="rounded-lg border border-slate-800 bg-slate-800/40 px-3 py-2.5">
+  <div class="rounded-lg border border-default bg-elevated/40 px-3 py-2.5">
     <div class="flex items-center justify-between gap-2">
       <div class="flex min-w-0 items-center gap-2.5">
-        <UIcon :name="state.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+        <UIcon :name="state.icon" class="h-5 w-5 shrink-0 text-toned" />
         <div class="min-w-0">
-          <div class="text-sm font-medium text-slate-200">{{ state.label }}</div>
-          <div class="text-[11px] text-slate-500">{{ subtitle }}</div>
+          <div class="text-sm font-medium text-default">{{ state.label }}</div>
+          <div class="text-[11px] text-dimmed">{{ subtitle }}</div>
         </div>
       </div>
       <div class="flex shrink-0 items-center gap-2">

package/app/components/settings/TaskTypeSuppressionsPanel.vue

@@ -61,28 +61,28 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
 
 <template>
   <div class="space-y-4">
-    <p class="text-xs text-slate-400">
+    <p class="text-xs text-muted">
       {{ t('settings.taskTypeSuppressions.intro') }}
     </p>
 
-    <p v-if="loading" class="text-[11px] text-slate-500">
+    <p v-if="loading" class="text-[11px] text-dimmed">
       {{ t('settings.taskTypeSuppressions.loading') }}
     </p>
-    <p v-else-if="!rows.length" class="text-[11px] text-slate-500">
+    <p v-else-if="!rows.length" class="text-[11px] text-dimmed">
       {{ t('settings.taskTypeSuppressions.empty') }}
     </p>
     <ul v-else class="space-y-2" data-testid="task-type-suppressions">
       <li
         v-for="row in rows"
         :key="row.taskType.taskType"
-        class="flex items-start justify-between gap-3 rounded border border-slate-800 px-3 py-2"
+        class="flex items-start justify-between gap-3 rounded border border-default px-3 py-2"
         data-testid="task-type-suppression"
         :data-task-type="row.taskType.taskType"
       >
         <div class="min-w-0">
           <div class="flex items-center gap-1.5">
             <UIcon :name="row.taskType.presentation.icon" class="h-3.5 w-3.5 shrink-0" />
-            <span class="truncate text-xs font-medium text-slate-200">
+            <span class="truncate text-xs font-medium text-default">
               {{ row.taskType.presentation.label }}
             </span>
             <UBadge
@@ -94,7 +94,7 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
               {{ row.taskType.presentation.category }}
             </UBadge>
           </div>
-          <p class="mt-0.5 text-[11px] text-slate-500">
+          <p class="mt-0.5 text-[11px] text-dimmed">
             {{ row.taskType.presentation.description }}
           </p>
         </div>

package/app/components/settings/ToolServerChecklist.vue

@@ -111,59 +111,63 @@ async function runProbe(id: string) {
 <template>
   <section v-if="servers.length" class="space-y-3" data-testid="tool-servers-section">
     <div>
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.toolServers.heading') }}
       </h3>
-      <p class="text-xs text-slate-400">{{ t('settings.toolServers.intro') }}</p>
+      <p class="text-xs text-muted">{{ t('settings.toolServers.intro') }}</p>
     </div>
 
     <article
       v-for="server in servers"
       :key="server.id"
-      class="space-y-2 rounded-lg border border-slate-700 p-3"
+      class="space-y-2 rounded-lg border border-muted p-3"
       :data-testid="`tool-server-${server.id}`"
     >
       <div class="flex flex-wrap items-center gap-2">
-        <span class="text-sm font-medium text-slate-200">{{ server.label }}</span>
+        <span class="text-sm font-medium text-default">{{ server.label }}</span>
         <UBadge color="neutral" variant="soft" size="sm">
           {{ TRANSPORT_LABELS[server.transport] }}
         </UBadge>
-        <code class="font-mono text-[11px] text-slate-500">{{ server.id }}</code>
+        <code class="font-mono text-[11px] text-dimmed">{{ server.id }}</code>
       </div>
 
-      <p class="truncate font-mono text-[11px] text-slate-500" :title="server.target">
+      <p class="truncate font-mono text-[11px] text-dimmed" :title="server.target">
         {{ server.target }}
       </p>
-      <p v-if="server.guidance" class="text-xs text-slate-400">{{ server.guidance }}</p>
+      <p v-if="server.guidance" class="text-xs text-muted">{{ server.guidance }}</p>
 
       <!-- Which agents get it. An EMPTY list is a registration attached to nothing: it never reaches
            a dispatch, so the credentials it asks for are keys an operator fills in for no run. Said
            out loud, because no other surface in the platform can see that state. -->
-      <p v-if="server.declaredBy.length" class="text-[11px] text-slate-400">
+      <p v-if="server.declaredBy.length" class="text-[11px] text-muted">
         {{ t('settings.toolServers.declaredBy', { kinds: server.declaredBy.join(', ') }) }}
       </p>
-      <p v-else class="text-[11px] text-amber-400" :data-testid="`tool-server-orphan-${server.id}`">
+      <p
+        v-else
+        class="text-[11px] text-app-warning-400"
+        :data-testid="`tool-server-orphan-${server.id}`"
+      >
         {{ t('settings.toolServers.declaredByNone') }}
       </p>
 
       <!-- Which harnesses could serve it. EMPTY means the declaration can never run anywhere (an
            `http` server narrowed to Codex, whose MCP client is stdio-only): it is never dropped FOR
            A REASON on any run, so no prompt and no log line ever mentions it. -->
-      <p v-if="server.servableHarnesses.length" class="text-[11px] text-slate-400">
+      <p v-if="server.servableHarnesses.length" class="text-[11px] text-muted">
         {{
           t('settings.toolServers.servableHarnesses', {
             harnesses: server.servableHarnesses.join(', '),
           })
         }}
       </p>
-      <p v-else class="text-[11px] text-amber-400">
+      <p v-else class="text-[11px] text-app-warning-400">
         {{ t('settings.toolServers.servableHarnessesNone') }}
       </p>
 
-      <p v-if="server.allowedTools?.length" class="text-[11px] text-slate-400">
+      <p v-if="server.allowedTools?.length" class="text-[11px] text-muted">
         {{ t('settings.toolServers.allowedTools', { tools: server.allowedTools.join(', ') }) }}
       </p>
-      <p v-if="server.credentials.length" class="text-[11px] text-slate-400">
+      <p v-if="server.credentials.length" class="text-[11px] text-muted">
         {{
           t('settings.toolServers.credentials', {
             keys: server.credentials.map((c) => c.key).join(', '),
@@ -177,7 +181,7 @@ async function runProbe(id: string) {
            producing tokens is exactly the state that reads as working and is not. -->
       <div
         v-if="server.oauth"
-        class="space-y-1 rounded-md border border-slate-800 bg-slate-900/40 p-2"
+        class="space-y-1 rounded-md border border-default bg-default/40 p-2"
         :data-testid="`tool-server-oauth-${server.id}`"
       >
         <div class="flex flex-wrap items-center gap-2">
@@ -195,25 +199,25 @@ async function runProbe(id: string) {
                   : t('settings.toolServers.oauth.machineGrant')
             }}
           </UBadge>
-          <span v-if="server.oauth.connectedBy" class="text-[11px] text-slate-400">
+          <span v-if="server.oauth.connectedBy" class="text-[11px] text-muted">
             {{ t('settings.toolServers.oauth.connectedBy', { user: server.oauth.connectedBy }) }}
           </span>
         </div>
 
-        <p v-if="server.oauth.scopes?.length" class="text-[11px] text-slate-400">
+        <p v-if="server.oauth.scopes?.length" class="text-[11px] text-muted">
           {{ t('settings.toolServers.oauth.scopes', { scopes: server.oauth.scopes.join(', ') }) }}
         </p>
         <!-- A grant with no refresh token works until its access token expires and then needs
              granting again by hand. Said BEFORE it happens, which is the only time it is useful. -->
         <p
           v-if="server.oauth.connected && server.oauth.refreshable === false"
-          class="text-[11px] text-amber-400"
+          class="text-[11px] text-app-warning-400"
         >
           {{ t('settings.toolServers.oauth.notRefreshable') }}
         </p>
         <p
           v-if="server.oauth.lastError"
-          class="text-[11px] text-red-400"
+          class="text-[11px] text-app-error-400"
           :data-testid="`tool-server-oauth-error-${server.id}`"
         >
           {{ t('settings.toolServers.oauth.lastError', { detail: server.oauth.lastError }) }}
@@ -268,7 +272,7 @@ async function runProbe(id: string) {
              verify it from a run, or change the declaration. -->
         <p
           v-else-if="server.notProbeableReason"
-          class="text-[11px] text-slate-500"
+          class="text-[11px] text-dimmed"
           :data-testid="`tool-server-unprobeable-${server.id}`"
         >
           {{ NOT_PROBEABLE_LABELS[server.notProbeableReason] }}
@@ -277,7 +281,7 @@ async function runProbe(id: string) {
 
       <div
         v-if="resultFor(server.id)"
-        class="space-y-1 rounded-md border border-slate-800 bg-slate-900/40 p-2"
+        class="space-y-1 rounded-md border border-default bg-default/40 p-2"
         :data-testid="`tool-server-result-${server.id}`"
       >
         <div class="flex flex-wrap items-center gap-2">
@@ -289,12 +293,12 @@ async function runProbe(id: string) {
           >
             {{ STATUS_LABELS[resultFor(server.id)!.status] }}
           </UBadge>
-          <span v-if="resultFor(server.id)!.httpStatus" class="text-[11px] text-slate-400">
+          <span v-if="resultFor(server.id)!.httpStatus" class="text-[11px] text-muted">
             {{ t('settings.toolServers.httpStatus', { status: resultFor(server.id)!.httpStatus }) }}
           </span>
         </div>
 
-        <p v-if="resultFor(server.id)!.status === 'ok'" class="text-[11px] text-slate-300">
+        <p v-if="resultFor(server.id)!.status === 'ok'" class="text-[11px] text-toned">
           {{
             t('settings.toolServers.okDetail', {
               name: resultFor(server.id)!.serverName || server.id,
@@ -306,7 +310,7 @@ async function runProbe(id: string) {
         </p>
         <!-- A count off a truncated read is a FLOOR, not a total, and the difference decides whether
              the allowedTools verdict below means anything. -->
-        <p v-if="resultFor(server.id)!.toolsComplete === false" class="text-[11px] text-slate-500">
+        <p v-if="resultFor(server.id)!.toolsComplete === false" class="text-[11px] text-dimmed">
           {{ t('settings.toolServers.toolsIncomplete') }}
         </p>
 
@@ -315,7 +319,7 @@ async function runProbe(id: string) {
              advertising the tool. Withheld entirely when the tool list was a prefix. -->
         <p
           v-if="resultFor(server.id)!.allowedTools?.unmatched?.length"
-          class="text-[11px] text-amber-400"
+          class="text-[11px] text-app-warning-400"
           :data-testid="`tool-server-unmatched-${server.id}`"
         >
           {{
@@ -326,14 +330,14 @@ async function runProbe(id: string) {
         </p>
         <p
           v-else-if="resultFor(server.id)!.allowedTools?.checked === false"
-          class="text-[11px] text-slate-500"
+          class="text-[11px] text-dimmed"
         >
           {{ t('settings.toolServers.allowedToolsUnchecked') }}
         </p>
 
         <p
           v-if="resultFor(server.id)!.unresolvedCredentials?.length"
-          class="text-[11px] text-amber-400"
+          class="text-[11px] text-app-warning-400"
         >
           {{
             t('settings.toolServers.unresolvedCredentials', {
@@ -341,7 +345,10 @@ async function runProbe(id: string) {
             })
           }}
         </p>
-        <p v-if="resultFor(server.id)!.refusedCredentials?.length" class="text-[11px] text-red-400">
+        <p
+          v-if="resultFor(server.id)!.refusedCredentials?.length"
+          class="text-[11px] text-app-error-400"
+        >
           {{
             t('settings.toolServers.refusedCredentials', {
               keys: resultFor(server.id)!.refusedCredentials!.join(', '),
@@ -350,7 +357,7 @@ async function runProbe(id: string) {
         </p>
         <p
           v-if="resultFor(server.id)!.unusableCredentials?.length"
-          class="text-[11px] text-red-400"
+          class="text-[11px] text-app-error-400"
         >
           {{
             t('settings.toolServers.unusableCredentials', {
@@ -377,7 +384,7 @@ async function runProbe(id: string) {
           </UButton>
           <pre
             v-if="expanded[server.id]"
-            class="overflow-x-auto rounded bg-slate-950 p-2 font-mono text-[10px] text-slate-400"
+            class="overflow-x-auto rounded bg-app-950 p-2 font-mono text-[10px] text-muted"
             >{{ resultFor(server.id)!.error }}</pre>
         </template>
       </div>

package/app/components/settings/UsageSettings.vue

@@ -38,26 +38,26 @@ const hasAny = computed(() => usage.rows.length > 0)
 
 <template>
   <div class="space-y-6">
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{ t('settings.usage.body') }}
     </p>
 
-    <p v-if="usage.report" class="text-[11px] text-slate-500">
+    <p v-if="usage.report" class="text-[11px] text-dimmed">
       {{ t('settings.usage.period', { date: d(new Date(usage.report.periodStart), 'short') }) }}
     </p>
 
-    <p v-if="usage.loading" class="text-[11px] text-slate-500">{{ t('common.loading') }}</p>
-    <p v-else-if="usage.error" class="text-[11px] text-rose-400">{{ usage.error }}</p>
-    <p v-else-if="!hasAny" class="text-[11px] text-slate-500">{{ t('settings.usage.empty') }}</p>
+    <p v-if="usage.loading" class="text-[11px] text-dimmed">{{ t('common.loading') }}</p>
+    <p v-else-if="usage.error" class="text-[11px] text-app-error-400">{{ usage.error }}</p>
+    <p v-else-if="!hasAny" class="text-[11px] text-dimmed">{{ t('settings.usage.empty') }}</p>
 
     <template v-else>
       <!-- Subscriptions (flat-rate quota harnesses) -->
       <section v-if="usage.subscription.length" class="space-y-3">
         <div class="flex items-baseline justify-between">
-          <h3 class="text-sm font-semibold text-slate-200">
+          <h3 class="text-sm font-semibold text-default">
             {{ t('settings.usage.subscription') }}
           </h3>
-          <span class="text-[11px] text-slate-400">
+          <span class="text-[11px] text-muted">
             {{
               t('settings.usage.tokens', {
                 input: formatTokens(usage.subscriptionTotal.inputTokens),
@@ -66,7 +66,7 @@ const hasAny = computed(() => usage.rows.length > 0)
             }}
           </span>
         </div>
-        <p class="text-[10px] text-slate-500">{{ t('settings.usage.illustrative') }}</p>
+        <p class="text-[10px] text-dimmed">{{ t('settings.usage.illustrative') }}</p>
         <div
           v-for="row in usage.subscription"
           :key="`sub-${row.vendor}-${row.provider}-${row.model}`"
@@ -74,13 +74,13 @@ const hasAny = computed(() => usage.rows.length > 0)
           :data-testid="'usage-row-subscription'"
         >
           <div class="flex items-center justify-between gap-2 text-[11px]">
-            <span class="min-w-0 truncate font-medium text-slate-300">{{ row.model }}</span>
-            <span class="shrink-0 rounded bg-slate-700/60 px-1.5 py-0.5 text-[10px] text-slate-300">
+            <span class="min-w-0 truncate font-medium text-toned">{{ row.model }}</span>
+            <span class="shrink-0 rounded bg-accented/60 px-1.5 py-0.5 text-[10px] text-toned">
               {{ row.vendor ?? row.provider }}
             </span>
           </div>
           <UProgress :model-value="pctOf(row, usage.subscription)" size="xs" color="primary" />
-          <div class="flex justify-between text-[10px] text-slate-500">
+          <div class="flex justify-between text-[10px] text-dimmed">
             <span>
               {{
                 t('settings.usage.tokens', {
@@ -98,10 +98,10 @@ const hasAny = computed(() => usage.rows.length > 0)
       <!-- Metered API / proxy calls (real spend) -->
       <section v-if="usage.metered.length" class="space-y-3">
         <div class="flex items-baseline justify-between">
-          <h3 class="text-sm font-semibold text-slate-200">
+          <h3 class="text-sm font-semibold text-default">
             {{ t('settings.usage.metered') }}
           </h3>
-          <span class="text-[11px] text-slate-400">
+          <span class="text-[11px] text-muted">
             {{
               t('settings.usage.tokens', {
                 input: formatTokens(usage.meteredTotal.inputTokens),
@@ -118,12 +118,12 @@ const hasAny = computed(() => usage.rows.length > 0)
           :data-testid="'usage-row-metered'"
         >
           <div class="flex items-center justify-between gap-2 text-[11px]">
-            <span class="min-w-0 truncate font-medium text-slate-300">
+            <span class="min-w-0 truncate font-medium text-toned">
               {{ row.provider }}:{{ row.model }}
             </span>
           </div>
           <UProgress :model-value="pctOf(row, usage.metered)" size="xs" color="neutral" />
-          <div class="flex justify-between text-[10px] text-slate-500">
+          <div class="flex justify-between text-[10px] text-dimmed">
             <span>
               {{
                 t('settings.usage.tokens', {

package/app/components/settings/UserSecretsSection.vue

@@ -153,24 +153,24 @@ async function remove() {
     </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.userSecrets.intro" tag="span" scope="global">
             <template #you>
               <strong>{{ t('settings.userSecrets.introYou') }}</strong>
             </template>
             <template #scope>
-              <span class="text-slate-300">{{ t('settings.userSecrets.introScope') }}</span>
+              <span class="text-toned">{{ t('settings.userSecrets.introScope') }}</span>
             </template>
           </i18n-t>
         </p>
 
         <div
           v-if="status"
-          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">{{ status.label }}</span>
-            <div class="text-[11px] text-emerald-400">
+            <span class="font-medium text-default">{{ status.label }}</span>
+            <div class="text-[11px] text-app-success-400">
               {{ t('settings.userSecrets.connectedStored') }}
             </div>
           </div>
@@ -184,11 +184,8 @@ async function remove() {
           />
         </div>
 
-        <div
-          v-if="descriptor"
-          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 v-if="descriptor" class="rounded-lg border border-dashed border-muted p-3 space-y-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{
               status ? t('settings.userSecrets.replaceToken') : t('settings.userSecrets.addToken')
             }}
@@ -228,10 +225,10 @@ async function remove() {
             >
               {{ t('settings.userSecrets.testConnection') }}
             </UButton>
-            <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
+            <span v-if="testResult && testResult.ok" class="text-xs text-app-success-400">
               {{ testResult.message ?? t('settings.userSecrets.tokenValid') }}
             </span>
-            <span v-else-if="testResult" class="text-xs text-rose-400">
+            <span v-else-if="testResult" class="text-xs text-app-error-400">
               {{ testResult.message ?? t('settings.userSecrets.tokenRejected') }}
             </span>
           </div>

package/app/components/settings/WorkspaceMetadataSettings.vue

@@ -90,15 +90,15 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
 <template>
   <div class="space-y-6" data-testid="workspace-metadata-settings">
     <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.metadata.heading') }}
       </h3>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('settings.workspaceSettings.metadata.body') }}
       </p>
     </section>
 
-    <p v-if="fields.length === 0" class="text-[11px] text-slate-500">
+    <p v-if="fields.length === 0" class="text-[11px] text-dimmed">
       {{ t('settings.workspaceSettings.metadata.empty') }}
     </p>
 
@@ -106,7 +106,7 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
       <div class="space-y-4">
         <label v-for="field in fields" :key="field.key" class="block">
           <!-- Field labels are deployment DATA, rendered verbatim (see the module docs). -->
-          <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">
             {{ field.label }}
           </span>
           <USelect
@@ -124,7 +124,7 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
             size="sm"
             :data-testid="`workspace-metadata-${field.key}`"
           />
-          <span v-if="field.description" class="mt-1 block text-[11px] text-slate-500">
+          <span v-if="field.description" class="mt-1 block text-[11px] text-dimmed">
             {{ field.description }}
           </span>
         </label>