@cat-factory/app 0.302.2 → 0.303.0

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>

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

@@ -113,8 +113,8 @@ const canLeaveReview = computed(
     <!-- detection status -->
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
-        <p class="text-sm font-medium text-slate-200">{{ store.targetFrame?.title }}</p>
-        <p class="text-[11px] text-slate-500">{{ t('environmentWizard.review.detectHint') }}</p>
+        <p class="text-sm font-medium text-default">{{ store.targetFrame?.title }}</p>
+        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
       </div>
       <UButton
         size="xs"
@@ -130,12 +130,12 @@ const canLeaveReview = computed(
       </UButton>
     </div>
 
-    <p v-if="!store.hasRepo" class="text-[12px] text-amber-300/80">
+    <p v-if="!store.hasRepo" class="text-[12px] text-app-warning-300/80">
       {{ t('environmentWizard.review.noRepo') }}
     </p>
     <p
       v-else-if="store.detectError"
-      class="text-[12px] text-rose-300/80"
+      class="text-[12px] text-app-error-300/80"
       data-testid="env-setup-detect-error"
     >
       {{ t('environmentWizard.review.detectError') }}
@@ -145,15 +145,11 @@ const canLeaveReview = computed(
       <!-- deep analysis (opt-in; elevated to a prominent nudge when the repo ships its own CLI) -->
       <div
         class="rounded-md border p-3"
-        :class="
-          repoCliHint
-            ? 'border-primary-700/60 bg-primary-950/30'
-            : 'border-slate-800 bg-slate-900/40'
-        "
+        :class="repoCliHint ? 'border-primary/60 bg-primary/10' : 'border-default bg-default/40'"
       >
         <p
           v-if="repoCliHint"
-          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary-300"
+          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary"
           data-testid="env-setup-cli-nudge"
         >
           <UIcon name="i-lucide-lightbulb" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
@@ -161,10 +157,10 @@ const canLeaveReview = computed(
         </p>
         <div class="flex items-center justify-between gap-2">
           <div class="min-w-0">
-            <p class="text-[12px] font-medium text-slate-300">
+            <p class="text-[12px] font-medium text-toned">
               {{ t('environmentWizard.analysis.title') }}
             </p>
-            <p class="text-[11px] text-slate-500">{{ t('environmentWizard.analysis.hint') }}</p>
+            <p class="text-[11px] text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
           </div>
           <UButton
             size="xs"
@@ -181,12 +177,15 @@ const canLeaveReview = computed(
         </div>
         <p
           v-if="!store.canAnalyze"
-          class="mt-2 text-[11px] text-slate-500"
+          class="mt-2 text-[11px] text-dimmed"
           data-testid="env-setup-analysis-unavailable"
         >
           {{ t('environmentWizard.analysis.unavailable') }}
         </p>
-        <p v-else-if="store.analysisStatus === 'failed'" class="mt-2 text-[11px] text-rose-300/80">
+        <p
+          v-else-if="store.analysisStatus === 'failed'"
+          class="mt-2 text-[11px] text-app-error-300/80"
+        >
           {{ t('environmentWizard.analysis.failed') }}
         </p>
         <div
@@ -194,7 +193,7 @@ const canLeaveReview = computed(
           class="mt-2 space-y-2"
           data-testid="env-setup-analysis-ready"
         >
-          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-slate-400">
+          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-muted">
             {{ store.merged.summary }}
           </p>
           <UButton
@@ -212,7 +211,7 @@ const canLeaveReview = computed(
 
       <!-- per-field provenance -->
       <div v-if="store.merged?.fields.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.provenanceTitle') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -262,7 +261,7 @@ const canLeaveReview = computed(
 
       <!-- compose file layering -->
       <div v-if="composeFileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.composeFiles') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -283,7 +282,7 @@ const canLeaveReview = computed(
 
       <!-- compose profiles -->
       <div v-if="profileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.profiles') }}
         </p>
         <div class="flex flex-wrap gap-1.5">
@@ -304,16 +303,16 @@ const canLeaveReview = computed(
 
       <!-- seed dumps -->
       <div v-if="seedDumpCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('environmentWizard.review.seedDumps') }}
         </p>
         <div class="space-y-1">
           <div
             v-for="c in seedDumpCandidates"
             :key="c.path"
-            class="flex items-center justify-between gap-2 rounded border border-slate-800 bg-slate-900/40 px-2 py-1"
+            class="flex items-center justify-between gap-2 rounded border border-default bg-default/40 px-2 py-1"
           >
-            <span class="truncate text-[11px] text-slate-300">{{ c.path }}</span>
+            <span class="truncate text-[11px] text-toned">{{ c.path }}</span>
             <UButton
               size="xs"
               :color="seedAdded(c.path) ? 'success' : 'neutral'"
@@ -352,7 +351,11 @@ const canLeaveReview = computed(
             class="w-full font-mono text-[11px]"
             data-testid="env-setup-raw-text"
           />
-          <p v-if="rawError" class="text-[11px] text-rose-300/80" data-testid="env-setup-raw-error">
+          <p
+            v-if="rawError"
+            class="text-[11px] text-app-error-300/80"
+            data-testid="env-setup-raw-error"
+          >
             {{ rawError }}
           </p>
           <div class="flex justify-end">

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

@@ -31,7 +31,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       <UInput v-model="store.handlerLabel" class="w-full" data-testid="env-setup-handler-label" />
     </UFormField>
 
-    <div class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-[12px] text-slate-300">
+    <div class="rounded-md border border-default bg-default/40 p-3 text-[12px] text-toned">
       <p>
         {{
           t('environmentWizard.save.summary', {
@@ -44,7 +44,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
 
     <p
       v-if="store.saveError"
-      class="text-[12px] text-rose-300/80"
+      class="text-[12px] text-app-error-300/80"
       data-testid="env-setup-save-error"
     >
       {{ store.saveError }}
@@ -66,7 +66,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
     <!-- saved: confirmation + optional trial provision -->
     <template v-else>
       <div
-        class="flex items-center gap-2 rounded-md border border-emerald-800/50 bg-emerald-950/30 p-2 text-[12px] text-emerald-200"
+        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-[12px] text-app-success-200"
         data-testid="env-setup-saved"
       >
         <UIcon name="i-lucide-check-circle" class="h-4 w-4" />
@@ -74,7 +74,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       </div>
 
       <div class="flex items-center justify-between gap-2">
-        <p class="text-[11px] text-slate-500">{{ t('environmentWizard.trial.hint') }}</p>
+        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
         <UButton
           size="xs"
           variant="soft"
@@ -88,7 +88,9 @@ useEnvironmentWizardTarget(() => props.input.frameId)
           {{ t('environmentWizard.trial.run') }}
         </UButton>
       </div>
-      <p v-if="store.trialError" class="text-[11px] text-rose-300/80">{{ store.trialError }}</p>
+      <p v-if="store.trialError" class="text-[11px] text-app-error-300/80">
+        {{ store.trialError }}
+      </p>
       <ProvisioningLogsDrawer v-if="store.trialStarted" subsystem="environment" />
     </template>
 

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

@@ -14,7 +14,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex items-center justify-between border-t border-slate-800 pt-3">
+  <div class="flex items-center justify-between border-t border-default pt-3">
     <UButton
       color="neutral"
       variant="ghost"

package/app/components/focus/BlockFocusView.vue

@@ -95,14 +95,14 @@ function openApprovalFor(approvalId: string) {
        leave animation survives this component being unmounted by its v-if gate. -->
   <div
     v-if="block && statusMeta && typeMeta"
-    class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    class="absolute inset-0 z-30 flex flex-col bg-app-950/95 backdrop-blur"
     role="dialog"
     aria-modal="true"
     data-testid="block-focus-view"
     :data-focus-block="block.id"
   >
     <!-- header / breadcrumb -->
-    <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+    <header class="flex items-center gap-3 border-b border-default px-6 py-4">
       <UButton
         icon="i-lucide-arrow-left"
         :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
@@ -113,16 +113,16 @@ function openApprovalFor(approvalId: string) {
       >
         {{ t('focus.board') }}
       </UButton>
-      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600 rtl:-scale-x-100" />
+      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-app-600 rtl:-scale-x-100" />
       <div
         class="flex h-9 w-9 items-center justify-center rounded-lg"
-        :style="{ backgroundColor: typeMeta.accent + '22' }"
+        :style="{ backgroundColor: tint(typeMeta.accent) }"
       >
         <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
       </div>
       <div>
-        <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
-        <div class="text-xs text-slate-500">
+        <h1 class="text-lg font-semibold text-highlighted">{{ block.title }}</h1>
+        <div class="text-xs text-dimmed">
           {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
         </div>
       </div>
@@ -199,11 +199,11 @@ function openApprovalFor(approvalId: string) {
     <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
       <!-- main: pipeline flow -->
       <section
-        class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
+        class="flex flex-col overflow-auto rounded-2xl border border-default bg-default/60 p-6"
       >
         <div class="mb-4 flex items-center gap-2">
-          <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
+          <UIcon name="i-lucide-workflow" class="h-4 w-4 text-dimmed" />
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-muted">
             {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
           </h2>
         </div>
@@ -217,33 +217,31 @@ function openApprovalFor(approvalId: string) {
 
         <div
           v-else
-          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
+          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-muted text-sm text-dimmed"
         >
           {{ t('focus.emptyPipelineHint') }}
         </div>
       </section>
 
       <!-- side: details -->
-      <aside
-        class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
-      >
+      <aside class="space-y-4 overflow-auto rounded-2xl border border-default bg-default/60 p-5">
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.description') }}
           </div>
-          <p class="text-sm text-slate-300">{{ block.description }}</p>
+          <p class="text-sm text-toned">{{ block.description }}</p>
         </div>
         <div v-if="instance">
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.overallProgress') }}
           </div>
           <UProgress :model-value="Math.round(block.progress * 100)" />
-          <div class="mt-1 text-[11px] text-slate-400">
+          <div class="mt-1 text-[11px] text-muted">
             {{ n(block.progress, 'percent') }}
           </div>
         </div>
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('focus.dependencies') }}
           </div>
           <div v-if="deps.length" class="flex flex-wrap gap-1">
@@ -251,7 +249,7 @@ function openApprovalFor(approvalId: string) {
               {{ d.title }}
             </UBadge>
           </div>
-          <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
+          <div v-else class="text-[11px] text-dimmed">{{ t('focus.noDependencies') }}</div>
         </div>
       </aside>
     </div>