@cat-factory/app 0.302.2 → 0.303.1

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -151,7 +151,7 @@ const { requestClose } = useUnsavedGuard({
   <ResultWindowShell
     :open="open"
     :icon="FORK_DECISION_META.icon"
-    icon-class="bg-violet-500/15 text-violet-300"
+    icon-class="bg-app-secondary-500/15 text-app-secondary-300"
     :title="headerTitle"
     :subtitle="t('forkDecision.subtitle')"
     width="3xl"
@@ -162,11 +162,11 @@ const { requestClose } = useUnsavedGuard({
       <!-- Proposing: the read-only proposer is still working. -->
       <div
         v-if="status === 'proposing'"
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
         <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
         <p class="text-sm">{{ t('forkDecision.proposing.title') }}</p>
-        <p class="max-w-sm text-[11px] text-slate-500">
+        <p class="max-w-sm text-[11px] text-dimmed">
           {{ t('forkDecision.proposing.hint') }}
         </p>
       </div>
@@ -174,9 +174,9 @@ const { requestClose } = useUnsavedGuard({
       <!-- A single path (no materially different alternatives): a read-only record. -->
       <div
         v-else-if="status === 'single_path'"
-        class="rounded-xl border border-slate-800 bg-slate-900/60 px-4 py-3 text-slate-300"
+        class="rounded-xl border border-default bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-slate-100">
+        <p class="text-[13px] font-medium text-app-100">
           {{ t('forkDecision.singlePath.title') }}
         </p>
         <p v-if="state?.singlePathReason" class="mt-1 text-[12px]">
@@ -187,9 +187,9 @@ const { requestClose } = useUnsavedGuard({
       <!-- Chosen: a read-only record of what was decided. -->
       <div
         v-else-if="status === 'chosen'"
-        class="rounded-xl border border-violet-500/40 bg-slate-900/60 px-4 py-3 text-slate-300"
+        class="rounded-xl border border-app-secondary-500/40 bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-violet-200">
+        <p class="text-[13px] font-medium text-app-secondary-200">
           {{ t('forkDecision.chosen.title') }}
         </p>
         <p v-if="state?.chosen?.custom" class="mt-1 whitespace-pre-wrap text-[12px]">
@@ -198,7 +198,7 @@ const { requestClose } = useUnsavedGuard({
         <p v-else-if="state?.chosen?.forkId" class="mt-1 text-[12px]">
           {{ forks.find((f) => f.id === state?.chosen?.forkId)?.title }}
         </p>
-        <p v-if="state?.chosen?.note" class="mt-1 text-[11px] text-slate-400">
+        <p v-if="state?.chosen?.note" class="mt-1 text-[11px] text-muted">
           {{ t('forkDecision.chosen.note', { note: state.chosen.note }) }}
         </p>
       </div>
@@ -207,16 +207,16 @@ const { requestClose } = useUnsavedGuard({
       <div v-else-if="interactive" class="space-y-3">
         <p
           v-if="forkDecision.error"
-          class="rounded-md bg-rose-500/10 px-3 py-2 text-[12px] text-rose-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
         >
           {{ forkDecision.error }}
         </p>
 
         <p
           v-if="state?.seamSummary"
-          class="rounded-md bg-slate-800/50 px-3 py-2 text-[12px] text-slate-300"
+          class="rounded-md bg-elevated/50 px-3 py-2 text-[12px] text-toned"
         >
-          <span class="text-slate-500">{{ t('forkDecision.seam') }}</span>
+          <span class="text-dimmed">{{ t('forkDecision.seam') }}</span>
           {{ state.seamSummary }}
         </p>
 
@@ -228,44 +228,44 @@ const { requestClose } = useUnsavedGuard({
           class="cursor-pointer rounded-xl border px-4 py-3 transition"
           :class="
             selected === fork.id
-              ? 'border-violet-500/70 bg-violet-500/5'
-              : 'border-slate-800 bg-slate-900/60 hover:border-slate-700'
+              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
+              : 'border-default bg-default/60 hover:border-muted'
           "
           @click="selected = fork.id"
         >
           <div class="flex items-start gap-2">
             <input
               type="radio"
-              class="mt-1 accent-violet-500"
+              class="mt-1 accent-app-secondary-500"
               :checked="selected === fork.id"
               @change="selected = fork.id"
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 text-[13px] font-medium text-slate-100">
+                <h3 class="min-w-0 flex-1 text-[13px] font-medium text-app-100">
                   {{ fork.title }}
                 </h3>
                 <UBadge v-if="fork.recommended" color="primary" variant="subtle" size="sm">
                   {{ t('forkDecision.recommended') }}
                 </UBadge>
               </div>
-              <p v-if="fork.summary" class="mt-0.5 text-[12px] text-slate-400">
+              <p v-if="fork.summary" class="mt-0.5 text-[12px] text-muted">
                 {{ fork.summary }}
               </p>
-              <p class="mt-1.5 whitespace-pre-wrap text-[12px] text-slate-300">
+              <p class="mt-1.5 whitespace-pre-wrap text-[12px] text-toned">
                 {{ fork.approach }}
               </p>
               <ul v-if="fork.tradeoffs.length" class="mt-1.5 space-y-0.5">
                 <li
                   v-for="(tr, i) in fork.tradeoffs"
                   :key="i"
-                  class="flex gap-1.5 text-[11px] text-slate-400"
+                  class="flex gap-1.5 text-[11px] text-muted"
                 >
-                  <span class="text-slate-600">•</span>{{ tr }}
+                  <span class="text-app-600">•</span>{{ tr }}
                 </li>
               </ul>
-              <p v-if="fork.riskNotes" class="mt-1.5 text-[11px] text-amber-300/90">
-                <span class="text-amber-500/70">{{ t('forkDecision.riskNotes') }}</span>
+              <p v-if="fork.riskNotes" class="mt-1.5 text-[11px] text-app-warning-300/90">
+                <span class="text-app-warning-500/70">{{ t('forkDecision.riskNotes') }}</span>
                 {{ fork.riskNotes }}
               </p>
             </div>
@@ -277,13 +277,13 @@ const { requestClose } = useUnsavedGuard({
           class="rounded-xl border px-4 py-3 transition"
           :class="
             selected === 'custom'
-              ? 'border-violet-500/70 bg-violet-500/5'
-              : 'border-slate-800 bg-slate-900/60'
+              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
+              : 'border-default bg-default/60'
           "
         >
           <label class="flex cursor-pointer items-center gap-2" @click="selected = 'custom'">
-            <input type="radio" class="accent-violet-500" :checked="selected === 'custom'" />
-            <span class="text-[13px] font-medium text-slate-100">{{
+            <input type="radio" class="accent-app-secondary-500" :checked="selected === 'custom'" />
+            <span class="text-[13px] font-medium text-app-100">{{
               t('forkDecision.custom.title')
             }}</span>
           </label>
@@ -292,27 +292,25 @@ const { requestClose } = useUnsavedGuard({
             data-testid="fork-custom-input"
             rows="3"
             :placeholder="t('forkDecision.custom.placeholder')"
-            class="mt-2 w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-violet-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/60"
+            class="mt-2 w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
             @focus="selected = 'custom'"
           />
         </article>
 
         <!-- Optional steering note -->
         <div>
-          <label class="mb-1 block text-[11px] text-slate-400">{{
-            t('forkDecision.noteLabel')
-          }}</label>
+          <label class="mb-1 block text-[11px] text-muted">{{ t('forkDecision.noteLabel') }}</label>
           <input
             v-model="note"
             type="text"
             :placeholder="t('forkDecision.notePlaceholder')"
-            class="w-full rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-violet-500 focus:outline-none"
+            class="w-full rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none"
           />
         </div>
 
         <!-- Grounded chat: ask about the forks before deciding. -->
-        <section class="rounded-xl border border-slate-800 bg-slate-900/40 px-4 py-3">
-          <p class="text-[11px] font-medium text-slate-400">
+        <section class="rounded-xl border border-default bg-default/40 px-4 py-3">
+          <p class="text-[11px] font-medium text-muted">
             {{ t('forkDecision.chat.title') }}
           </p>
           <div v-if="chat.length || answering" class="mt-2 max-h-64 space-y-2 overflow-y-auto pr-1">
@@ -327,8 +325,8 @@ const { requestClose } = useUnsavedGuard({
                 class="max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-1.5 text-[12px]"
                 :class="
                   msg.role === 'human'
-                    ? 'bg-violet-500/15 text-violet-100'
-                    : 'bg-slate-800/70 text-slate-200'
+                    ? 'bg-app-secondary-500/15 text-app-secondary-100'
+                    : 'bg-elevated/70 text-default'
                 "
               >
                 {{ msg.text }}
@@ -336,14 +334,14 @@ const { requestClose } = useUnsavedGuard({
             </div>
             <div v-if="answering" class="flex justify-start">
               <p
-                class="flex items-center gap-1.5 rounded-lg bg-slate-800/70 px-3 py-1.5 text-[12px] text-slate-400"
+                class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-[12px] text-muted"
               >
                 <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
                 {{ t('forkDecision.chat.thinking') }}
               </p>
             </div>
           </div>
-          <p v-else class="mt-1 text-[11px] text-slate-500">
+          <p v-else class="mt-1 text-[11px] text-dimmed">
             {{ t('forkDecision.chat.hint') }}
           </p>
           <div class="mt-2 flex items-end gap-2">
@@ -357,7 +355,7 @@ const { requestClose } = useUnsavedGuard({
                   ? t('forkDecision.chat.budgetSpent')
                   : t('forkDecision.chat.placeholder')
               "
-              class="min-h-0 flex-1 resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-violet-500 focus:outline-none disabled:opacity-50"
+              class="min-h-0 flex-1 resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none disabled:opacity-50"
               @keydown.enter.exact.prevent="onSend"
             />
             <UButton
@@ -380,7 +378,7 @@ const { requestClose } = useUnsavedGuard({
       <!-- Skipped / no state: nothing to decide. -->
       <div
         v-else
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
         <UIcon :name="FORK_DECISION_META.icon" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('forkDecision.empty.title') }}</p>
@@ -389,7 +387,7 @@ const { requestClose } = useUnsavedGuard({
 
     <footer
       v-if="interactive"
-      class="flex items-center justify-end gap-2 border-t border-slate-800 px-5 py-3"
+      class="flex items-center justify-end gap-2 border-t border-default px-5 py-3"
     >
       <UButton color="neutral" variant="ghost" size="sm" @click="requestClose">
         {{ t('common.cancel') }}

package/app/components/foundational/FoundationalContractSummary.vue

@@ -25,24 +25,24 @@ const { t, n } = useI18n()
 
 <template>
   <div v-if="contracts.length" class="mt-1 flex flex-col gap-1">
-    <div v-for="c in contracts" :key="c.contractId" class="text-[11px] text-slate-500">
-      <span class="text-slate-400">{{ c.title }}</span>
+    <div v-for="c in contracts" :key="c.contractId" class="text-[11px] text-dimmed">
+      <span class="text-muted">{{ c.title }}</span>
       <span class="ms-1">({{ formatLabel[c.format] }}, {{ n(c.size) }})</span>
-      <span v-if="c.operations.length" class="ms-1 font-mono text-slate-500">
+      <span v-if="c.operations.length" class="ms-1 font-mono text-dimmed">
         {{ c.operations.join(' · ') }}
       </span>
-      <span v-else-if="!operationsAreIndexable(c.format)" class="ms-1 text-slate-600">
+      <span v-else-if="!operationsAreIndexable(c.format)" class="ms-1 text-app-600">
         {{ t('foundational.contracts.notIndexed') }}
       </span>
-      <span v-else-if="!c.omittedOperations" class="ms-1 text-slate-600">
+      <span v-else-if="!c.omittedOperations" class="ms-1 text-app-600">
         {{ t('foundational.contracts.noOperations') }}
       </span>
-      <span v-if="c.omittedOperations > 0" class="ms-1 text-amber-500/80">
+      <span v-if="c.omittedOperations > 0" class="ms-1 text-app-warning-500/80">
         {{ t('foundational.contracts.omitted', { count: c.omittedOperations }) }}
       </span>
     </div>
   </div>
-  <p v-else class="mt-1 text-[11px] text-amber-500/80">
+  <p v-else class="mt-1 text-[11px] text-app-warning-500/80">
     {{ t('foundational.contracts.none') }}
   </p>
 </template>

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -80,21 +80,21 @@ async function suppress(serviceId: string) {
 
 <template>
   <div class="flex flex-col gap-3" data-testid="foundational-catalog">
-    <p class="text-xs text-slate-500">{{ t('foundational.catalog.intro') }}</p>
+    <p class="text-xs text-dimmed">{{ t('foundational.catalog.intro') }}</p>
 
     <div
       v-for="s in catalog.resolved"
       :key="s.id"
-      class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
+      class="rounded-md border border-default bg-default/60 p-3"
     >
       <div class="flex items-start gap-2">
-        <UIcon name="i-lucide-boxes" class="mt-0.5 h-4 w-4 shrink-0 text-sky-400" />
+        <UIcon name="i-lucide-boxes" class="mt-0.5 h-4 w-4 shrink-0 text-app-info-400" />
         <div class="min-w-0 flex-1">
-          <p class="truncate text-sm font-medium text-slate-100">
+          <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-slate-500">{{ s.id }}</code>
+            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
           </p>
-          <p class="text-xs text-slate-400">{{ s.summary }}</p>
+          <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
             <UBadge v-for="c in s.capabilities" :key="c" size="xs" variant="subtle" color="neutral">
               {{ c }}
@@ -122,13 +122,13 @@ async function suppress(serviceId: string) {
             <div
               v-for="doc in catalog.contractBodies[s.id] ?? []"
               :key="doc.contractId"
-              class="rounded-md border border-slate-800 bg-slate-950/60 p-2"
+              class="rounded-md border border-default bg-app-950/60 p-2"
             >
-              <p class="mb-1 text-[11px] text-slate-400">
+              <p class="mb-1 text-[11px] text-muted">
                 {{ doc.title }}
-                <span v-if="doc.path" class="ms-1 font-mono text-slate-600">{{ doc.path }}</span>
+                <span v-if="doc.path" class="ms-1 font-mono text-app-600">{{ doc.path }}</span>
               </p>
-              <pre class="max-h-64 overflow-auto text-[11px] text-slate-300">{{ doc.body }}</pre>
+              <pre class="max-h-64 overflow-auto text-[11px] text-toned">{{ doc.body }}</pre>
             </div>
           </div>
         </div>
@@ -153,7 +153,7 @@ async function suppress(serviceId: string) {
       </div>
     </div>
 
-    <p v-if="!catalog.resolved.length" class="text-sm text-slate-500">
+    <p v-if="!catalog.resolved.length" class="text-sm text-dimmed">
       {{ t('foundational.catalog.empty') }}
     </p>
   </div>

package/app/components/foundational/FoundationalServiceManager.vue

@@ -88,7 +88,7 @@ const activeTab = computed({
          forms that would fail with a raw 503. -->
     <div
       v-if="catalog.available === false"
-      class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-400"
+      class="rounded-md border border-default bg-default/40 p-3 text-sm text-muted"
     >
       {{ t('foundational.unavailable') }}
     </div>

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -182,23 +182,23 @@ async function remove(service: FoundationalService) {
     <div
       v-for="s in catalog.services"
       :key="s.id"
-      class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
+      class="rounded-md border border-default bg-default/60 p-3"
     >
       <div class="flex items-start gap-2">
-        <UIcon name="i-lucide-boxes" class="mt-0.5 h-4 w-4 shrink-0 text-sky-400" />
+        <UIcon name="i-lucide-boxes" class="mt-0.5 h-4 w-4 shrink-0 text-app-info-400" />
         <div class="min-w-0 flex-1">
-          <p class="truncate text-sm font-medium text-slate-100">
+          <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-slate-500">{{ s.id }}</code>
+            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
           </p>
-          <p class="text-xs text-slate-400">{{ s.summary }}</p>
+          <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
             <UBadge v-for="c in s.capabilities" :key="c" size="xs" variant="subtle" color="neutral">
               {{ c }}
             </UBadge>
           </div>
           <FoundationalContractSummary :contracts="s.contracts" :format-label="formatLabel" />
-          <p v-if="s.sourceId" class="mt-1 text-[11px] text-slate-500">
+          <p v-if="s.sourceId" class="mt-1 text-[11px] text-dimmed">
             {{ t('foundational.registry.fromSource', { path: s.sourcePath ?? '' }) }}
           </p>
         </div>
@@ -222,7 +222,7 @@ async function remove(service: FoundationalService) {
         </div>
       </div>
     </div>
-    <p v-if="!catalog.services.length" class="text-sm text-slate-500">
+    <p v-if="!catalog.services.length" class="text-sm text-dimmed">
       {{ t('foundational.registry.empty') }}
     </p>
 
@@ -238,7 +238,7 @@ async function remove(service: FoundationalService) {
       {{ t('foundational.registry.add') }}
     </UButton>
 
-    <div v-else class="rounded-md border border-slate-800 p-3">
+    <div v-else class="rounded-md border border-default p-3">
       <p class="mb-2 text-sm font-medium">
         {{
           isCreating ? t('foundational.registry.addTitle') : t('foundational.registry.editTitle')
@@ -251,8 +251,8 @@ async function remove(service: FoundationalService) {
           v-model="draft.id"
           :placeholder="t('foundational.registry.idPlaceholder')"
         />
-        <p v-else class="text-xs text-slate-500">
-          <code class="text-slate-300">{{ draft.id }}</code>
+        <p v-else class="text-xs text-dimmed">
+          <code class="text-toned">{{ draft.id }}</code>
           — {{ t('foundational.registry.idFixed') }}
         </p>
         <UInput v-model="draft.name" :placeholder="t('foundational.registry.namePlaceholder')" />
@@ -270,11 +270,11 @@ async function remove(service: FoundationalService) {
           :placeholder="t('foundational.registry.capabilitiesPlaceholder')"
         />
 
-        <div class="rounded-md border border-slate-800 p-2">
-          <p class="text-xs font-medium text-slate-300">
+        <div class="rounded-md border border-default p-2">
+          <p class="text-xs font-medium text-toned">
             {{ t('foundational.registry.contractsTitle') }}
           </p>
-          <p class="mb-2 text-[11px] text-slate-500">
+          <p class="mb-2 text-[11px] text-dimmed">
             {{
               draft.contractsTouched
                 ? t('foundational.registry.contractsReplace')

package/app/components/foundational/FoundationalServiceSources.vue

@@ -245,14 +245,14 @@ async function unlink(id: string) {
     <div
       v-for="s in catalog.sources"
       :key="s.id"
-      class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
+      class="flex items-center gap-2 rounded-md border border-default bg-default/60 p-3"
     >
-      <UIcon name="i-lucide-git-branch" class="h-4 w-4 shrink-0 text-slate-400" />
+      <UIcon name="i-lucide-git-branch" class="h-4 w-4 shrink-0 text-muted" />
       <div class="min-w-0">
-        <span class="font-mono text-sm text-slate-100">
-          {{ s.repoOwner }}/{{ s.repoName }}<span class="text-slate-500">/{{ s.dirPath }}</span>
+        <span class="font-mono text-sm text-app-100">
+          {{ s.repoOwner }}/{{ s.repoName }}<span class="text-dimmed">/{{ s.dirPath }}</span>
         </span>
-        <p class="text-xs text-slate-500">
+        <p class="text-xs text-dimmed">
           <template v-if="s.mode === 'files'">
             {{
               t('foundational.sources.metaFiles', {
@@ -274,7 +274,7 @@ async function unlink(id: string) {
           </template>
           <template v-else>{{ t('foundational.sources.metaDirectory') }}</template>
         </p>
-        <p class="text-xs text-slate-500">
+        <p class="text-xs text-dimmed">
           {{
             s.lastSyncedAt
               ? t('foundational.sources.metaSynced', {
@@ -322,29 +322,29 @@ async function unlink(id: string) {
         />
       </div>
     </div>
-    <p v-if="!catalog.sources.length" class="text-sm text-slate-500">
+    <p v-if="!catalog.sources.length" class="text-sm text-dimmed">
       {{ t('foundational.sources.empty') }}
     </p>
 
     <!-- Linking needs the GitHub integration; say so rather than offering a form that 503s. -->
     <div
       v-if="!catalog.sourcesAvailable"
-      class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-500"
+      class="rounded-md border border-default bg-default/40 p-3 text-sm text-dimmed"
     >
       {{ t('foundational.sources.githubRequired') }}
     </div>
-    <div v-else class="rounded-md border border-slate-800 p-3">
+    <div v-else class="rounded-md border border-default p-3">
       <p class="mb-2 text-sm font-medium">{{ t('foundational.sources.linkTitle') }}</p>
       <div class="flex flex-col gap-2">
         <URadioGroup v-model="mode" :items="modeItems" orientation="horizontal" size="sm" />
-        <p class="text-xs text-slate-500">{{ modeHints[mode] }}</p>
+        <p class="text-xs text-dimmed">{{ modeHints[mode] }}</p>
 
         <!-- Connected: search a repo, then browse to the folder / pick the contract files -->
         <template v-if="githubReady">
           <GitHubRepoSearchSelect v-model="repoId" @update:repo="repo = $event" />
           <div
             v-if="repoId !== undefined"
-            class="rounded-md border border-slate-800 bg-slate-900/40 p-2"
+            class="rounded-md border border-default bg-default/40 p-2"
           >
             <RepoTreeBrowser
               v-if="mode === 'files'"
@@ -355,13 +355,13 @@ async function unlink(id: string) {
               @toggle="toggleFile"
             />
             <RepoTreeBrowser v-else v-model="dirPath" :repo-github-id="repoId" mode="dir" />
-            <p class="mt-2 truncate text-xs text-slate-400">
+            <p class="mt-2 truncate text-xs text-muted">
               <template v-if="mode === 'files'">
                 {{ t('foundational.sources.selectedFiles', { count: filePaths.length }) }}
               </template>
               <template v-else-if="dirPath">
                 {{ t('foundational.sources.selectedDir') }}
-                <code class="text-slate-200">{{ dirPath }}</code>
+                <code class="text-default">{{ dirPath }}</code>
               </template>
               <template v-else>{{ t('foundational.sources.wholeRepo') }}</template>
             </p>

package/app/components/foundational/FoundationalSuppressions.vue

@@ -63,20 +63,20 @@ async function restore(serviceId: string) {
     data-testid="foundational-suppressions"
   >
     <p class="text-sm font-medium">{{ title[props.kind] }}</p>
-    <p class="text-xs text-slate-500">{{ intro[props.kind] }}</p>
+    <p class="text-xs text-dimmed">{{ intro[props.kind] }}</p>
     <div
       v-for="s in catalog.suppressions"
       :key="s.id"
-      class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 p-3"
+      class="flex items-center gap-2 rounded-md border border-default bg-default/40 p-3"
     >
-      <UIcon name="i-lucide-eye-off" class="h-4 w-4 shrink-0 text-slate-500" />
+      <UIcon name="i-lucide-eye-off" class="h-4 w-4 shrink-0 text-dimmed" />
       <div class="min-w-0 flex-1">
-        <p class="truncate text-sm text-slate-300">
+        <p class="truncate text-sm text-toned">
           {{ s.name || s.id }}
-          <code v-if="s.name" class="ms-1 text-[11px] text-slate-500">{{ s.id }}</code>
+          <code v-if="s.name" class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
         </p>
-        <p v-if="s.summary" class="text-xs text-slate-500">{{ s.summary }}</p>
-        <p v-if="!s.inherited" class="text-[11px] text-slate-500">
+        <p v-if="s.summary" class="text-xs text-dimmed">{{ s.summary }}</p>
+        <p v-if="!s.inherited" class="text-[11px] text-dimmed">
           {{ t('foundational.suppressions.shadowsNothing') }}
         </p>
       </div>

package/app/components/foundational/ServiceCatalogConnection.vue

@@ -219,30 +219,30 @@ async function disconnect() {
     <!-- Unwired is stated, never offered as a form that would fail with a raw 503. -->
     <div
       v-if="catalog.serviceCatalogAvailable === false"
-      class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-400"
+      class="rounded-md border border-default bg-default/40 p-3 text-sm text-muted"
     >
       {{ t('serviceCatalog.unavailable') }}
     </div>
 
     <template v-else>
-      <p class="text-sm text-slate-400">{{ t('serviceCatalog.intro') }}</p>
+      <p class="text-sm text-muted">{{ t('serviceCatalog.intro') }}</p>
 
       <!-- The CONNECTED state, with what the last import concluded. `lastSyncMessage` is the
            load-bearing line: it is what says a catalog is a PREFIX of the portal's estate. -->
       <div
         v-if="connection"
-        class="flex flex-col gap-2 rounded-md border border-slate-800 bg-slate-900/40 p-3"
+        class="flex flex-col gap-2 rounded-md border border-default bg-default/40 p-3"
         data-testid="service-catalog-connected"
       >
         <div class="flex flex-wrap items-center gap-2">
           <UBadge :color="syncStatusColor" variant="subtle">{{ statusLabel }}</UBadge>
-          <span class="font-mono text-xs text-slate-300">{{ connection.baseUrl }}</span>
-          <span class="text-xs text-slate-500">{{ authModeLabel(connection.authMode) }}</span>
-          <span v-if="connection.lastSyncedAt" class="text-xs text-slate-500">
+          <span class="font-mono text-xs text-toned">{{ connection.baseUrl }}</span>
+          <span class="text-xs text-dimmed">{{ authModeLabel(connection.authMode) }}</span>
+          <span v-if="connection.lastSyncedAt" class="text-xs text-dimmed">
             {{ d(new Date(connection.lastSyncedAt), 'short') }}
           </span>
         </div>
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{
             t('serviceCatalog.summary', {
               filter: connection.entityFilter.join(', '),
@@ -250,7 +250,7 @@ async function disconnect() {
             })
           }}
         </p>
-        <p v-if="connection.lastSyncMessage" class="text-xs text-amber-400">
+        <p v-if="connection.lastSyncMessage" class="text-xs text-app-warning-400">
           {{ connection.lastSyncMessage }}
         </p>
         <div class="flex gap-2">
@@ -272,8 +272,8 @@ async function disconnect() {
 
       <!-- The connect / re-connect form. Shown alongside a live connection too, because rotating
            a token is the routine reason to come here. -->
-      <div class="flex flex-col gap-3 rounded-md border border-slate-800 p-3">
-        <h4 class="text-sm font-medium text-slate-200">
+      <div class="flex flex-col gap-3 rounded-md border border-default p-3">
+        <h4 class="text-sm font-medium text-default">
           {{ connection ? t('serviceCatalog.form.replace') : t('serviceCatalog.form.connect') }}
         </h4>