@cat-factory/app 0.302.2 → 0.303.1

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>

package/app/components/documents/StartFromDesignModal.vue

@@ -153,12 +153,12 @@ function stage() {
   <UModal v-model:open="open" :title="t('documents.startFromDesign.title')">
     <template #body>
       <div class="space-y-4">
-        <p class="text-sm text-slate-400">{{ t('documents.startFromDesign.intro') }}</p>
+        <p class="text-sm text-muted">{{ t('documents.startFromDesign.intro') }}</p>
 
         <!-- No connected design source: the flow cannot run, and saying which step is missing
              beats an input that refuses every paste. The connect route is withheld from a member
              for the same reason the picker's add tier is: connecting stores a credential. -->
-        <p v-if="sources.length === 0" class="text-sm text-amber-300">
+        <p v-if="sources.length === 0" class="text-sm text-app-warning-300">
           {{ t('documents.startFromDesign.noSource') }}
         </p>
 
@@ -176,7 +176,7 @@ function stage() {
 
           <div
             v-if="state.status === 'checking'"
-            class="flex items-center gap-2 text-sm text-slate-400"
+            class="flex items-center gap-2 text-sm text-muted"
           >
             <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
             {{ t('documents.startFromDesign.checking') }}
@@ -184,32 +184,32 @@ function stage() {
 
           <div
             v-else-if="row"
-            class="space-y-1 rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            class="space-y-1 rounded-lg border border-default bg-default/60 p-3"
             data-testid="start-from-design-resolved"
           >
-            <div class="flex items-center gap-2 text-sm text-white">
-              <UIcon name="i-lucide-frame" class="h-4 w-4 text-indigo-400" />
+            <div class="flex items-center gap-2 text-sm text-highlighted">
+              <UIcon name="i-lucide-frame" class="h-4 w-4 text-primary" />
               <span class="truncate">{{ row.label }}</span>
             </div>
-            <p v-if="row.trimmed" class="text-[11px] text-slate-400">
+            <p v-if="row.trimmed" class="text-[11px] text-muted">
               {{ t('documents.startFromDesign.trimmed') }}
             </p>
             <!-- Its own line, in amber: a trim resolves the same page, a drop widens ONE frame to
                  the whole design file, and the second is what a designer needs to see. -->
-            <p v-if="row.droppedScope" class="text-[11px] text-amber-300">
+            <p v-if="row.droppedScope" class="text-[11px] text-app-warning-300">
               {{ t('documents.startFromDesign.widened', { scope: row.droppedScope }) }}
             </p>
-            <p v-if="row.unchecked && target" class="text-[11px] text-slate-400">
+            <p v-if="row.unchecked && target" class="text-[11px] text-muted">
               {{ t('documents.startFromDesign.unchecked') }}
             </p>
-            <p v-else-if="row.unchecked" class="text-[11px] text-amber-300">
+            <p v-else-if="row.unchecked" class="text-[11px] text-app-warning-300">
               {{ t('documents.startFromDesign.uncheckedAmbiguous') }}
             </p>
           </div>
 
           <p
             v-else-if="state.status === 'rejected'"
-            class="text-sm text-amber-300"
+            class="text-sm text-app-warning-300"
             data-testid="start-from-design-rejected"
           >
             {{ t('documents.startFromDesign.rejected') }}

package/app/components/documents/TaskContextDocs.vue

@@ -149,23 +149,23 @@ async function attach(item: PendingContext) {
       <div
         v-for="doc in linked"
         :key="`${doc.source}:${doc.externalId}`"
-        class="rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5"
+        class="rounded-md border border-default bg-default/60 px-2 py-1.5"
       >
         <DocumentOriginLink
           :url="doc.url"
-          class="flex items-center gap-1.5 text-xs text-slate-300"
-          hover-class="hover:text-white"
+          class="flex items-center gap-1.5 text-xs text-toned"
+          hover-class="hover:text-highlighted"
         >
           <UIcon
             :name="documents.descriptorForOrigin(doc.source)?.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">{{ doc.title }}</span>
         </DocumentOriginLink>
         <DocumentSyncState :doc="doc" class="mt-1" />
       </div>
     </div>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ emptyHint }}
     </p>
   </InspectorSection>

package/app/components/environments/EnvSetupStepper.vue

@@ -37,7 +37,7 @@ function stepLabel(key: string | undefined): string {
 
 <template>
   <div class="space-y-2" data-testid="env-setup-stepper">
-    <p v-if="total" class="text-[11px] font-medium text-slate-400" data-testid="env-setup-progress">
+    <p v-if="total" class="text-[11px] font-medium text-muted" data-testid="env-setup-progress">
       {{ t('environmentWizard.progress', { index: index + 1, total }) }}
     </p>
     <ol class="flex items-center gap-2 text-[11px]">
@@ -50,19 +50,19 @@ function stepLabel(key: string | undefined): string {
         <span
           class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold"
           :class="{
-            'bg-primary-500 text-white': i === index,
-            'bg-emerald-600/70 text-white': i < index,
-            'bg-slate-700 text-slate-300': i > index,
+            'bg-primary text-inverted': i === index,
+            'bg-app-success-600/70 text-highlighted': i < index,
+            'bg-accented text-toned': i > index,
           }"
           >{{ i + 1 }}</span
         >
-        <span :class="i === index ? 'text-slate-100' : 'text-slate-500'">
+        <span :class="i === index ? 'text-app-100' : 'text-dimmed'">
           {{ stepLabel(step.progressLabel) }}
         </span>
         <UIcon
           v-if="i < steps.length - 1"
           name="i-lucide-chevron-right"
-          class="h-3 w-3 text-slate-600"
+          class="h-3 w-3 text-app-600"
         />
       </li>
     </ol>

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -60,32 +60,32 @@ const ENV_STATUS_META = computed<
 >(() => ({
   provisioning: {
     label: t('environments.status.provisioning'),
-    color: 'text-amber-300',
+    color: 'text-app-warning-300',
     icon: 'i-lucide-loader-circle',
   },
   ready: {
     label: t('environments.status.ready'),
-    color: 'text-emerald-300',
+    color: 'text-app-success-300',
     icon: 'i-lucide-circle-dot',
   },
   failed: {
     label: t('environments.status.failed'),
-    color: 'text-rose-300',
+    color: 'text-app-error-300',
     icon: 'i-lucide-circle-alert',
   },
   expired: {
     label: t('environments.status.expired'),
-    color: 'text-slate-400',
+    color: 'text-muted',
     icon: 'i-lucide-circle-off',
   },
   tearing_down: {
     label: t('environments.status.tearing_down'),
-    color: 'text-slate-400',
+    color: 'text-muted',
     icon: 'i-lucide-loader-circle',
   },
   torn_down: {
     label: t('environments.status.torn_down'),
-    color: 'text-slate-400',
+    color: 'text-muted',
     icon: 'i-lucide-circle-off',
   },
 }))
@@ -105,8 +105,8 @@ const envInTransition = computed(
 </script>
 
 <template>
-  <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
-    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+  <section class="rounded-lg border border-default bg-default/60 p-3">
+    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
       {{ t('environments.title') }}
     </h3>
     <div v-if="environment" class="space-y-2">
@@ -128,30 +128,30 @@ const envInTransition = computed(
         :href="environment.url"
         target="_blank"
         rel="noopener"
-        class="inline-flex items-center gap-1.5 break-all text-[13px] text-sky-300 hover:underline"
+        class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
       >
         <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
         {{ environment.url }}
       </a>
-      <p v-if="environment.expiresAt" class="text-[11px] text-slate-500">
+      <p v-if="environment.expiresAt" class="text-[11px] text-dimmed">
         {{ t('environments.expires', { date: d(new Date(environment.expiresAt), 'long') }) }}
       </p>
       <!-- The resolved provision type + engine recorded at provision time, so a run states
            exactly what was provisioned and how (the what/where ÷ how split). -->
       <dl v-if="provisionTypeLabel || engineLabel" class="flex flex-wrap gap-x-4 gap-y-0.5">
         <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-[11px]">
-          <dt class="text-slate-500">{{ t('environments.provisionTypeLabel') }}</dt>
-          <dd class="text-slate-300">{{ provisionTypeLabel }}</dd>
+          <dt class="text-dimmed">{{ t('environments.provisionTypeLabel') }}</dt>
+          <dd class="text-toned">{{ provisionTypeLabel }}</dd>
         </div>
         <div v-if="engineLabel" class="flex items-center gap-1 text-[11px]">
-          <dt class="text-slate-500">{{ t('environments.engineLabel') }}</dt>
-          <dd class="text-slate-300">{{ engineLabel }}</dd>
+          <dt class="text-dimmed">{{ t('environments.engineLabel') }}</dt>
+          <dd class="text-toned">{{ engineLabel }}</dd>
         </div>
       </dl>
       <!-- The verbatim provider error when the environment failed/expired. -->
       <pre
         v-if="failureShown"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-rose-900/60 bg-rose-950/40 p-1.5 text-[11px] text-rose-200/90"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-app-error-900/60 bg-app-error-950/40 p-1.5 text-[11px] text-app-error-200/90"
         >{{ environment.lastError }}</pre>
       <!-- What the provider says it is still waiting on. Muted rather than alarming: an
            environment mid-rollout is healthy, and styling this like the error above would report
@@ -159,12 +159,12 @@ const envInTransition = computed(
            prose. -->
       <p
         v-if="statusNote"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-[11px] text-slate-400"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-[11px] text-muted"
       >
         {{ t('environments.statusNote', { note: statusNote }) }}
       </p>
     </div>
-    <p v-else class="text-[12px] text-slate-500">
+    <p v-else class="text-[12px] text-dimmed">
       {{ degradedReason ?? t('environments.empty') }}
     </p>
   </section>

package/app/components/environments/steps/EnvPickStep.vue

@@ -17,11 +17,11 @@ const { t } = useI18n()
 
 <template>
   <section class="space-y-3" data-testid="env-setup-step-pick">
-    <p class="text-sm text-slate-400">{{ t('environmentWizard.pick.intro') }}</p>
+    <p class="text-sm text-muted">{{ t('environmentWizard.pick.intro') }}</p>
     <!-- The one-service scope caveat, stated on the step that asks for the service: nothing
          here changes any other service, and running it twice just re-edits this one's recipe. -->
-    <p class="text-xs leading-relaxed text-slate-500">{{ t('environmentWizard.pick.scope') }}</p>
-    <p v-if="!store.serviceFrames.length" class="text-sm text-slate-500">
+    <p class="text-xs leading-relaxed text-dimmed">{{ t('environmentWizard.pick.scope') }}</p>
+    <p v-if="!store.serviceFrames.length" class="text-sm text-dimmed">
       {{ t('environmentWizard.pick.empty') }}
     </p>
     <div v-else class="space-y-1.5">

package/app/components/environments/steps/EnvPreflightStep.vue

@@ -35,7 +35,7 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
 <template>
   <section class="space-y-3" data-testid="env-setup-step-preflight">
     <div class="flex items-center justify-between gap-2">
-      <p class="text-sm text-slate-400">{{ t('environmentWizard.preflight.intro') }}</p>
+      <p class="text-sm text-muted">{{ t('environmentWizard.preflight.intro') }}</p>
       <UButton
         size="xs"
         variant="soft"
@@ -51,21 +51,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
 
     <p
       v-if="!store.recipe.prerequisites?.length"
-      class="text-[12px] text-slate-500"
+      class="text-[12px] text-dimmed"
       data-testid="env-setup-preflight-none"
     >
       {{ t('environmentWizard.preflight.none') }}
     </p>
     <p
       v-else-if="preflightsUnavailable"
-      class="text-[12px] text-amber-300/80"
+      class="text-[12px] text-app-warning-300/80"
       data-testid="env-setup-preflight-unavailable"
     >
       {{ t('environmentWizard.preflight.unavailable') }}
     </p>
     <p
       v-if="store.preflightError"
-      class="text-[12px] text-rose-300/80"
+      class="text-[12px] text-app-error-300/80"
       data-testid="env-setup-preflight-error"
     >
       {{ store.preflightError }}
@@ -79,21 +79,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
       <li
         v-for="r in store.preflightResults"
         :key="r.title"
-        class="rounded border border-slate-800 bg-slate-900/40 p-2"
+        class="rounded border border-default bg-default/40 p-2"
       >
         <div class="flex items-center gap-2">
           <UBadge :color="PREFLIGHT_COLOR[r.status]" variant="subtle" size="sm">
             {{ r.status }}
           </UBadge>
-          <span class="text-[12px] text-slate-200">{{ r.title }}</span>
-          <span v-if="!r.required" class="ms-auto text-[10px] text-slate-500">
+          <span class="text-[12px] text-default">{{ r.title }}</span>
+          <span v-if="!r.required" class="ms-auto text-[10px] text-dimmed">
             {{ t('environmentWizard.preflight.optional') }}
           </span>
         </div>
-        <p v-if="r.detail" class="mt-1 text-[11px] text-slate-400">{{ r.detail }}</p>
+        <p v-if="r.detail" class="mt-1 text-[11px] text-muted">{{ r.detail }}</p>
         <pre
           v-if="r.status !== 'pass' && r.remediation"
-          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-amber-900/40 bg-amber-950/20 p-1.5 text-[11px] text-amber-200/90"
+          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-app-warning-900/40 bg-app-warning-950/20 p-1.5 text-[11px] text-app-warning-200/90"
           >{{ r.remediation }}</pre>
       </li>
     </ul>