@cat-factory/app 0.302.2 → 0.303.0

package/app/components/context/ContextAttachmentFields.vue

@@ -188,7 +188,7 @@ function removePending(item: PendingContext) {
     <!-- Context documents (ungated; Attach disabled until a source is connected). -->
     <div class="space-y-2">
       <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('contextAttachments.documents') }}
         </span>
         <UButton
@@ -246,11 +246,11 @@ function removePending(item: PendingContext) {
            that into an attachment would attach pages nobody meant to attach. -->
       <div
         v-if="offer && docsConnected"
-        class="flex items-center gap-2 rounded-md border border-indigo-900/60 bg-indigo-950/30 px-2 py-1.5"
+        class="flex items-center gap-2 rounded-md border border-primary/60 bg-primary/10 px-2 py-1.5"
         data-testid="pasted-link-offer"
       >
-        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
-        <span class="min-w-0 flex-1 truncate text-xs text-slate-300">
+        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-primary" />
+        <span class="min-w-0 flex-1 truncate text-xs text-toned">
           {{
             t('contextAttachments.pastedLink.offer', {
               source: documents.descriptorFor(offer.source)?.label ?? offer.source,
@@ -271,12 +271,12 @@ function removePending(item: PendingContext) {
         <div
           v-for="item in pendingDocs"
           :key="contextKey(item)"
-          class="rounded-md border border-slate-800 bg-slate-900/60"
+          class="rounded-md border border-default bg-default/60"
         >
-          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-slate-300">
+          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-toned">
             <UIcon
               :name="item.icon ?? 'i-lucide-file-text'"
-              class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+              class="h-3.5 w-3.5 shrink-0 text-primary"
             />
             <span class="truncate">{{ item.title }}</span>
             <UBadge
@@ -290,7 +290,7 @@ function removePending(item: PendingContext) {
             </UBadge>
             <button
               type="button"
-              class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+              class="ms-auto shrink-0 text-muted hover:text-default"
               @click="removePending(item)"
             >
               <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -298,14 +298,14 @@ function removePending(item: PendingContext) {
           </div>
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-amber-400"
+            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-slate-500">
+      <p v-else class="text-[11px] text-dimmed">
         {{ docsHint }}
       </p>
     </div>
@@ -313,7 +313,7 @@ function removePending(item: PendingContext) {
     <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
     <div class="space-y-2">
       <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('contextAttachments.issues') }}
         </span>
         <UButton
@@ -379,12 +379,12 @@ function removePending(item: PendingContext) {
         <div
           v-for="item in pendingIssues"
           :key="contextKey(item)"
-          class="rounded-md border border-slate-800 bg-slate-900/60"
+          class="rounded-md border border-default bg-default/60"
         >
-          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-slate-300">
+          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-toned">
             <UIcon
               :name="item.icon ?? 'i-lucide-square-check'"
-              class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+              class="h-3.5 w-3.5 shrink-0 text-primary"
             />
             <span class="truncate">{{ item.title }}</span>
             <UBadge
@@ -398,7 +398,7 @@ function removePending(item: PendingContext) {
             </UBadge>
             <button
               type="button"
-              class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+              class="ms-auto shrink-0 text-muted hover:text-default"
               @click="removePending(item)"
             >
               <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -409,14 +409,14 @@ function removePending(item: PendingContext) {
                again on submit, and a failure now blocks the create. -->
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-amber-400"
+            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-slate-500">
+      <p v-else class="text-[11px] text-dimmed">
         {{ issuesHint }}
       </p>
     </div>

package/app/components/docs/DocInterviewWindow.vue

@@ -107,7 +107,7 @@ const onProceed = () =>
   <ResultWindowShell
     :open="open"
     icon="i-lucide-messages-square"
-    icon-class="bg-indigo-500/15 text-indigo-300"
+    icon-class="bg-primary/15 text-primary"
     :title="block?.title ?? t('docInterview.title')"
     :subtitle="t('docInterview.subtitle')"
     width="3xl"
@@ -124,14 +124,14 @@ const onProceed = () =>
       <!-- No session yet -->
       <div
         v-if="!session"
-        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="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('docInterview.empty') }}</p>
       </div>
 
       <template v-else>
-        <p class="mb-4 text-[13px] leading-relaxed text-slate-300">
+        <p class="mb-4 text-[13px] leading-relaxed text-toned">
           {{ t('docInterview.intro') }}
         </p>
 
@@ -168,23 +168,23 @@ const onProceed = () =>
         <!-- Converged: show the synthesized authoring brief -->
         <div
           v-else-if="converged"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4"
+          class="rounded-lg border border-default bg-app-950/40 p-4"
           data-testid="doc-interview-converged"
         >
-          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-slate-500">
+          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-dimmed">
             {{ t('docInterview.brief') }}
           </p>
           <pre
             v-if="session.brief"
-            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-slate-300"
+            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-toned"
             >{{ session.brief }}</pre>
-          <p v-else class="text-[13px] text-slate-400">{{ t('docInterview.converged') }}</p>
+          <p v-else class="text-[13px] text-muted">{{ t('docInterview.converged') }}</p>
         </div>
 
         <!-- No pending questions but not yet converged -->
         <div
           v-else-if="questions.length === 0"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
+          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
         >
           {{ t('docInterview.converged') }}
         </div>
@@ -194,10 +194,10 @@ const onProceed = () =>
           <li
             v-for="q in questions"
             :key="q.key"
-            class="rounded-lg border border-slate-800 bg-slate-950/40 p-3"
+            class="rounded-lg border border-default bg-app-950/40 p-3"
             data-testid="doc-interview-question"
           >
-            <p class="mb-2 text-[13px] font-medium text-slate-200">{{ q.question }}</p>
+            <p class="mb-2 text-[13px] font-medium text-default">{{ q.question }}</p>
             <UTextarea
               v-model="drafts[q.key]"
               :rows="2"
@@ -212,7 +212,7 @@ const onProceed = () =>
                  for an answer to go. Saying so beats taking text the flush could only drop. -->
             <p
               v-if="!addressable(q)"
-              class="mt-1 text-[11px] text-amber-300"
+              class="mt-1 text-[11px] text-app-warning-300"
               data-testid="doc-interview-unanswerable"
             >
               {{ t('docInterview.unanswerable') }}
@@ -226,12 +226,12 @@ const onProceed = () =>
          re-submit a question set already in flight, and the resume is a no-op once it isn't. -->
     <footer
       v-if="session && phase === 'awaiting' && questions.length > 0"
-      class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+      class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         <span
           v-if="unanswered > 0"
-          class="text-amber-400/90"
+          class="text-app-warning-400/90"
           data-testid="doc-interview-unanswered"
         >
           {{ t('docInterview.unanswered', { count: unanswered }) }}

package/app/components/documents/ContextDocumentPicker.vue

@@ -415,14 +415,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
+  <div class="space-y-2 rounded-lg border border-default bg-default/40 p-2">
     <!-- Which source is being searched, always visible, plus the sources the user could add from
          here (each opens the connect modal over the caller's form). Rendered as plain text when
          there is nothing to decide, which for a member is the usual case. -->
     <div class="flex items-center gap-1.5">
       <span
         :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
       >
         {{ t('documents.picker.sourceLabel') }}
       </span>
@@ -444,7 +444,7 @@ onMounted(() => {
           <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
         </UButton>
       </UDropdownMenu>
-      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-slate-300">
+      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-toned">
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0" />
         <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
       </span>
@@ -490,7 +490,7 @@ onMounted(() => {
         @keydown.enter="refRow && pickRef(refRow)"
       />
 
-      <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
+      <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
         {{ t('documents.picker.searchFailed', { error: searchError }) }}
       </p>
 
@@ -498,14 +498,14 @@ onMounted(() => {
            the user can still edit, rather than as a toast after the task is created. -->
       <p
         v-if="refState.status === 'checking'"
-        class="px-1 text-[11px] text-slate-500"
+        class="px-1 text-[11px] text-dimmed"
         data-testid="doc-ref-checking"
       >
         {{ t('documents.picker.refChecking') }}
       </p>
       <div
         v-else-if="refRejection"
-        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-amber-400"
+        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-app-warning-400"
         data-testid="doc-ref-rejected"
       >
         <span>{{ refRejection }}</span>
@@ -523,7 +523,7 @@ onMounted(() => {
       </div>
       <p
         v-else-if="refState.status === 'unchecked'"
-        class="px-1 text-[11px] text-amber-400"
+        class="px-1 text-[11px] text-app-warning-400"
         data-testid="doc-ref-unchecked"
       >
         {{ t('documents.picker.refCheckFailed', { error: refState.message }) }}
@@ -532,7 +532,7 @@ onMounted(() => {
            at all reads as a picker that dropped it. -->
       <p
         v-else-if="refAlreadyAttached"
-        class="px-1 text-[11px] text-slate-500"
+        class="px-1 text-[11px] text-dimmed"
         data-testid="doc-ref-already-attached"
       >
         {{ t('documents.picker.refAlreadyAttached') }}
@@ -544,10 +544,10 @@ onMounted(() => {
           v-for="d in importedRows"
           :key="`imp:${d.externalId}`"
           type="button"
-          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickImported(d.externalId, d.title, d.excerpt)"
         >
-          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
           <span class="truncate">{{ d.title }}</span>
           <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
             t('documents.picker.importedBadge')
@@ -559,10 +559,10 @@ onMounted(() => {
           v-for="r in searchRows"
           :key="`hit:${r.externalId}`"
           type="button"
-          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickSearch(r)"
         >
-          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="truncate">{{ r.title }}</span>
         </button>
 
@@ -572,20 +572,20 @@ onMounted(() => {
         <button
           v-if="refRow"
           type="button"
-          class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           data-testid="doc-ref-attach"
           @click="pickRef(refRow)"
         >
-          <UIcon name="i-lucide-link" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <UIcon name="i-lucide-link" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="min-w-0">
             <span class="block truncate">
               <i18n-t keypath="documents.picker.attachByReference" scope="global">
                 <template #ref>
-                  <span class="text-slate-200">{{ refRow.label }}</span>
+                  <span class="text-default">{{ refRow.label }}</span>
                 </template>
               </i18n-t>
             </span>
-            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-slate-500">
+            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-dimmed">
               {{ t('documents.picker.refTrimmed') }}
             </span>
             <!-- A WIDENED reference, which the trim note above must never be left to imply: the
@@ -593,7 +593,7 @@ onMounted(() => {
                  around it. Amber and separate, because it is a loss rather than tidying. -->
             <span
               v-if="refRow.droppedScope"
-              class="block text-[11px] text-amber-400"
+              class="block text-[11px] text-app-warning-400"
               data-testid="doc-ref-widened"
             >
               {{ t('documents.picker.refWidened', { scope: refRow.droppedScope }) }}

package/app/components/documents/DocumentImportModal.vue

@@ -80,8 +80,8 @@ function preview(externalId: string) {
     </template>
     <template #body>
       <div v-if="!documents.anyConnected" class="space-y-3 text-center">
-        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">{{ t('documents.import.connectFirst') }}</p>
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-dimmed" />
+        <p class="text-sm text-muted">{{ t('documents.import.connectFirst') }}</p>
         <div class="flex justify-center gap-2">
           <UButton
             v-for="s in documents.sources"
@@ -125,13 +125,13 @@ function preview(externalId: string) {
         </div>
 
         <div v-if="sourceDocs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('documents.import.importedHeading') }}
           </h3>
           <div
             v-for="doc in sourceDocs"
             :key="`${doc.source}:${doc.externalId}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="rounded-lg border border-default bg-default/60 p-3"
           >
             <div class="flex items-start justify-between gap-2">
               <div class="min-w-0">
@@ -139,11 +139,11 @@ function preview(externalId: string) {
                   :href="doc.url"
                   target="_blank"
                   rel="noopener"
-                  class="truncate text-sm font-medium text-white hover:underline"
+                  class="truncate text-sm font-medium text-highlighted hover:underline"
                 >
                   {{ doc.title }}
                 </a>
-                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ doc.excerpt }}</p>
+                <p class="mt-0.5 line-clamp-2 text-xs text-dimmed">{{ doc.excerpt }}</p>
                 <DocumentSyncState :doc="doc" class="mt-1" />
               </div>
               <UButton
@@ -158,7 +158,7 @@ function preview(externalId: string) {
             </div>
           </div>
         </div>
-        <p v-else class="text-center text-xs text-slate-500">
+        <p v-else class="text-center text-xs text-dimmed">
           {{ t('documents.import.noneImported') }}
         </p>
       </div>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -118,7 +118,7 @@ async function disconnect() {
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{ t('documents.connect.intro', { source: descriptor.label }) }}
         </p>
 
@@ -132,10 +132,10 @@ async function disconnect() {
           >
             {{ t('documents.connect.oauth.action', { source: descriptor.label }) }}
           </UButton>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('documents.connect.oauth.scopes', { scopes: oauth.scopes.join(', ') }) }}
           </p>
-          <p class="text-[11px] text-slate-500">{{ t('documents.connect.oauth.fallback') }}</p>
+          <p class="text-[11px] text-dimmed">{{ t('documents.connect.oauth.fallback') }}</p>
         </div>
 
         <div class="space-y-3">

package/app/components/documents/DocumentSyncState.vue

@@ -148,9 +148,9 @@ const renders = computed(() => {
 })
 
 const TONE_CLASS: Record<Stated['tone'], string> = {
-  ok: 'text-emerald-400',
-  warn: 'text-amber-400',
-  muted: 'text-slate-500',
+  ok: 'text-app-success-400',
+  warn: 'text-app-warning-400',
+  muted: 'text-dimmed',
 }
 
 async function refresh() {
@@ -165,7 +165,7 @@ async function refresh() {
 </script>
 
 <template>
-  <div class="flex items-center gap-1.5 text-[11px] text-slate-500">
+  <div class="flex items-center gap-1.5 text-[11px] text-dimmed">
     <span class="truncate">
       {{ t('documents.freshness.updated', { when: d(new Date(props.doc.syncedAt), 'long') }) }}
     </span>
@@ -178,7 +178,7 @@ async function refresh() {
       <UIcon :name="stated.icon" class="h-3 w-3 shrink-0" />
       <span class="truncate">{{ stated.text }}</span>
     </span>
-    <span v-if="renders" class="flex min-w-0 items-center gap-1 text-slate-500" :title="renders">
+    <span v-if="renders" class="flex min-w-0 items-center gap-1 text-dimmed" :title="renders">
       <UIcon name="i-lucide-image-off" class="h-3 w-3 shrink-0" />
       <span class="truncate">{{ renders }}</span>
     </span>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -93,12 +93,12 @@ async function unlink(doc: SourceDocument) {
     </template>
     <template #body>
       <div class="space-y-4">
-        <p class="text-xs text-slate-400">{{ t('documents.templates.intro') }}</p>
+        <p class="text-xs text-muted">{{ t('documents.templates.intro') }}</p>
 
         <!-- No imported documents yet: a template/exemplar must be an imported document. -->
         <div v-if="!documents.documents.length" class="space-y-3 text-center">
-          <UIcon name="i-lucide-file-plus" class="mx-auto h-8 w-8 text-slate-500" />
-          <p class="text-sm text-slate-400">{{ t('documents.templates.importFirst') }}</p>
+          <UIcon name="i-lucide-file-plus" class="mx-auto h-8 w-8 text-dimmed" />
+          <p class="text-sm text-muted">{{ t('documents.templates.importFirst') }}</p>
           <UButton
             color="primary"
             variant="soft"
@@ -131,20 +131,20 @@ async function unlink(doc: SourceDocument) {
           </UFormField>
 
           <!-- Template (singular per kind) ------------------------------------ -->
-          <section class="rounded-lg border border-slate-800 bg-slate-900/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <section class="rounded-lg border border-default bg-default/50 p-3">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('documents.templates.templateHeading') }}
             </h3>
-            <p class="mt-0.5 text-xs text-slate-500">
+            <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.templateHint', { kind }) }}
             </p>
             <div
               v-if="template"
-              class="mt-2 flex items-center justify-between gap-2 rounded-md bg-slate-900/70 px-3 py-2"
+              class="mt-2 flex items-center justify-between gap-2 rounded-md bg-default/70 px-3 py-2"
             >
               <DocumentOriginLink
                 :url="template.url"
-                class="truncate text-sm font-medium text-white"
+                class="truncate text-sm font-medium text-highlighted"
                 hover-class="hover:underline"
               >
                 {{ template.title }}
@@ -160,28 +160,28 @@ async function unlink(doc: SourceDocument) {
                 {{ t('documents.templates.remove') }}
               </UButton>
             </div>
-            <p v-else class="mt-2 text-xs text-slate-500">
+            <p v-else class="mt-2 text-xs text-dimmed">
               {{ t('documents.templates.templateEmpty') }}
             </p>
           </section>
 
           <!-- Exemplars (multi per kind) -------------------------------------- -->
-          <section class="rounded-lg border border-slate-800 bg-slate-900/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <section class="rounded-lg border border-default bg-default/50 p-3">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('documents.templates.exemplarsHeading') }}
             </h3>
-            <p class="mt-0.5 text-xs text-slate-500">
+            <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.exemplarsHint') }}
             </p>
             <div v-if="exemplars.length" class="mt-2 space-y-1.5">
               <div
                 v-for="doc in exemplars"
                 :key="`${doc.source}:${doc.externalId}`"
-                class="flex items-center justify-between gap-2 rounded-md bg-slate-900/70 px-3 py-2"
+                class="flex items-center justify-between gap-2 rounded-md bg-default/70 px-3 py-2"
               >
                 <DocumentOriginLink
                   :url="doc.url"
-                  class="truncate text-sm font-medium text-white"
+                  class="truncate text-sm font-medium text-highlighted"
                   hover-class="hover:underline"
                 >
                   {{ doc.title }}
@@ -198,7 +198,7 @@ async function unlink(doc: SourceDocument) {
                 </UButton>
               </div>
             </div>
-            <p v-else class="mt-2 text-xs text-slate-500">
+            <p v-else class="mt-2 text-xs text-dimmed">
               {{ t('documents.templates.exemplarsEmpty') }}
             </p>
           </section>

package/app/components/documents/RepoContextDocPicker.vue

@@ -238,7 +238,7 @@ onMounted(() => {
           class="w-full"
           :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"
         />
-        <p v-if="filesError" class="px-1 text-[11px] text-amber-400">
+        <p v-if="filesError" class="px-1 text-[11px] text-app-warning-400">
           {{ t('documents.repoPicker.filesFailed', { error: filesError }) }}
         </p>
         <div class="max-h-56 space-y-0.5 overflow-y-auto">
@@ -246,13 +246,13 @@ onMounted(() => {
             v-for="f in fileMatches"
             :key="f.path"
             type="button"
-            class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+            class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
             @click="pickFile(f.path)"
           >
-            <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+            <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
             <span class="truncate">{{ f.path }}</span>
           </button>
-          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-[11px] text-slate-500">
+          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-[11px] text-dimmed">
             {{ t('documents.repoPicker.moreFiles', { count: FILE_RESULTS_CAP }) }}
           </p>
           <EmptyState
@@ -263,7 +263,7 @@ onMounted(() => {
           />
           <p
             v-else-if="!loadingFiles && !fileQuery.trim()"
-            class="px-2 py-1 text-[11px] text-slate-500"
+            class="px-2 py-1 text-[11px] text-dimmed"
           >
             {{ t('documents.repoPicker.searchFilesHint') }}
           </p>

package/app/components/documents/SpawnPreviewModal.vue

@@ -139,7 +139,7 @@ async function spawn() {
                 : t('documents.spawn.plannerHeadings')
             }}
           </UBadge>
-          <span class="text-xs text-slate-400">{{
+          <span class="text-xs text-muted">{{
             plan.targetFrameId ? t('documents.spawn.intoService') : t('documents.spawn.asTopLevel')
           }}</span>
         </div>
@@ -161,13 +161,13 @@ async function spawn() {
 
         <p
           v-if="needsTarget && !targetFrameId"
-          class="text-xs text-slate-400"
+          class="text-xs text-muted"
           data-testid="spawn-target-required"
         >
           {{ t('documents.spawn.target.required') }}
         </p>
 
-        <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-slate-400">
+        <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-muted">
           <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
           {{ t('documents.spawn.buildingPlan') }}
         </div>
@@ -176,11 +176,11 @@ async function spawn() {
           <div
             v-for="(frame, fi) in plan.frames"
             :key="fi"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="rounded-lg border border-default bg-default/60 p-3"
           >
             <div class="flex items-center gap-2">
-              <UIcon name="i-lucide-box" class="h-4 w-4 text-indigo-400" />
-              <span class="text-sm font-semibold text-white">{{ frame.title }}</span>
+              <UIcon name="i-lucide-box" class="h-4 w-4 text-primary" />
+              <span class="text-sm font-semibold text-highlighted">{{ frame.title }}</span>
               <UBadge variant="subtle" size="sm" color="neutral">{{ frame.type }}</UBadge>
             </div>
 
@@ -188,25 +188,25 @@ async function spawn() {
               <li
                 v-for="(task, ti) in frame.tasks"
                 :key="`t-${ti}`"
-                class="flex items-center gap-1.5 text-xs text-slate-300"
+                class="flex items-center gap-1.5 text-xs text-toned"
               >
-                <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-dimmed" />
                 {{ task.title }}
               </li>
             </ul>
 
             <div v-for="(mod, mi) in frame.modules" :key="`m-${mi}`" class="mt-2 ps-4">
-              <div class="flex items-center gap-1.5 text-xs font-medium text-slate-200">
-                <UIcon name="i-lucide-folder" class="h-3.5 w-3.5 text-amber-400" />
+              <div class="flex items-center gap-1.5 text-xs font-medium text-default">
+                <UIcon name="i-lucide-folder" class="h-3.5 w-3.5 text-app-warning-400" />
                 {{ mod.name }}
               </div>
               <ul class="mt-1 space-y-1 ps-5">
                 <li
                   v-for="(task, ti) in mod.tasks"
                   :key="`mt-${ti}`"
-                  class="flex items-center gap-1.5 text-xs text-slate-300"
+                  class="flex items-center gap-1.5 text-xs text-toned"
                 >
-                  <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                  <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-dimmed" />
                   {{ task.title }}
                 </li>
               </ul>