@cat-factory/app 0.302.2 → 0.303.0

package/app/components/board/nodes/TaskCard.vue

@@ -311,9 +311,9 @@ function selectTask() {
     :data-status="task.status"
     :data-task-type="task.taskType"
     data-testid="task-card"
-    class="nodrag w-full cursor-pointer rounded-lg border bg-slate-950/70 p-2 text-start transition"
+    class="nodrag w-full cursor-pointer rounded-lg border bg-app-950/70 p-2 text-start transition"
     :class="[
-      selected ? 'border-white' : 'border-slate-700 hover:border-slate-500',
+      selected ? 'border-inverted' : 'border-muted hover:border-app-500',
       task.status === 'pr_ready' ? 'board-pulse-green' : attention ? 'board-pulse' : '',
     ]"
     @click.stop="selectTask"
@@ -328,7 +328,7 @@ function selectTask() {
       <span
         v-if="typeBadge"
         class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded"
-        :style="{ color: typeBadge.color, backgroundColor: `${typeBadge.color}22` }"
+        :style="{ color: typeBadge.color, backgroundColor: tint(typeBadge.color) }"
         :title="typeBadge.label"
         :data-task-type-badge="task.taskType"
         data-testid="task-type-badge"
@@ -338,7 +338,7 @@ function selectTask() {
       <UIcon
         v-if="schedule"
         name="i-lucide-repeat"
-        class="h-3 w-3 shrink-0 text-indigo-400"
+        class="h-3 w-3 shrink-0 text-primary"
         :title="
           schedule.enabled
             ? t('board.task.recurringPipeline')
@@ -349,12 +349,12 @@ function selectTask() {
         class="ms-auto truncate text-[9px] uppercase tracking-wide"
         :class="
           runFailed
-            ? 'text-rose-400'
+            ? 'text-app-error-400'
             : reviewStage
-              ? 'text-indigo-300'
+              ? 'text-primary'
               : attention
-                ? 'text-amber-400'
-                : 'text-slate-500'
+                ? 'text-app-warning-400'
+                : 'text-dimmed'
         "
       >
         {{ statusText }}
@@ -362,7 +362,7 @@ function selectTask() {
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
       <button
         type="button"
-        class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
+        class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-dimmed hover:bg-elevated hover:text-app-warning-400 pointer-coarse:p-2.5"
         :title="t('board.task.dragToConnect')"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
@@ -379,7 +379,7 @@ function selectTask() {
          title is the one always-rendered part of the body that no control can occupy. -->
     <div
       data-testid="task-title"
-      class="mt-1 line-clamp-2 break-words text-[11px] font-semibold leading-snug text-slate-100"
+      class="mt-1 line-clamp-2 break-words text-[11px] font-semibold leading-snug text-app-100"
       :title="task.title"
     >
       {{ task.title }}
@@ -410,13 +410,13 @@ function selectTask() {
       <UIcon
         :name="runnable ? 'i-lucide-link' : 'i-lucide-lock'"
         class="h-3 w-3"
-        :class="runnable ? 'text-slate-500' : 'text-amber-400'"
+        :class="runnable ? 'text-dimmed' : 'text-app-warning-400'"
       />
       <span
         v-for="d in deps"
         :key="d.id"
-        class="inline-flex items-center gap-0.5 rounded bg-slate-800/80 px-1 py-0.5 text-[9px]"
-        :class="d.status === 'done' ? 'text-slate-400' : 'text-amber-300'"
+        class="inline-flex items-center gap-0.5 rounded bg-elevated/80 px-1 py-0.5 text-[9px]"
+        :class="d.status === 'done' ? 'text-muted' : 'text-app-warning-300'"
         :title="depLabel(d)"
       >
         <UIcon
@@ -431,7 +431,7 @@ function selectTask() {
     <div class="nodrag mt-2 flex flex-wrap items-center gap-1">
       <!-- a reviewer gate folding/re-reviewing in the background: a working indicator,
            NOT a gate — the human is back on the board and summoned only if input is needed -->
-      <span v-if="reviewStage" class="inline-flex items-center gap-1 text-[9px] text-indigo-300">
+      <span v-if="reviewStage" class="inline-flex items-center gap-1 text-[9px] text-primary">
         <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
         {{ reviewStageLabel }}
       </span>
@@ -481,7 +481,7 @@ function selectTask() {
         </UButton>
         <span
           v-if="runnable && defaultPipeline"
-          class="inline-flex items-center gap-0.5 text-[9px] text-slate-500"
+          class="inline-flex items-center gap-0.5 text-[9px] text-dimmed"
         >
           <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />{{ defaultPipeline.name }}
         </span>
@@ -539,7 +539,7 @@ function selectTask() {
       <!-- A merged task is the one people come back to READ, so its result stays openable
            rather than collapsing to a tick the moment it lands. -->
       <template v-else-if="task.status === 'done'">
-        <span class="inline-flex items-center gap-1 text-[9px] text-emerald-400">
+        <span class="inline-flex items-center gap-1 text-[9px] text-app-success-400">
           <UIcon name="i-lucide-check-check" class="h-3 w-3" /> {{ t('board.task.implemented') }}
         </span>
         <UButton
@@ -562,10 +562,10 @@ function selectTask() {
          cost a row of card height each and add nothing. -->
     <div
       v-if="showModuleChip"
-      class="mt-2 flex flex-wrap items-center gap-1 border-t border-slate-800 pt-2"
+      class="mt-2 flex flex-wrap items-center gap-1 border-t border-default pt-2"
     >
       <span
-        class="inline-flex items-center gap-1 rounded bg-violet-500/15 px-1.5 py-0.5 text-[9px] text-violet-200"
+        class="inline-flex items-center gap-1 rounded bg-app-secondary-500/15 px-1.5 py-0.5 text-[9px] text-app-secondary-200"
         :title="t('board.task.module', { name: task.moduleName })"
       >
         <UIcon :name="MODULE_META.icon" class="h-3 w-3" :style="{ color: MODULE_META.color }" />

package/app/components/board/nodes/TaskLane.vue

@@ -36,20 +36,20 @@ const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.leng
 
 <template>
   <div
-    class="flex min-w-0 flex-col rounded-lg bg-slate-900/40"
+    class="flex min-w-0 flex-col rounded-lg bg-default/40"
     :style="{ width: LANE_GEOMETRY.laneWidth + 'px' }"
     :data-lane="rendered.lane"
   >
     <!-- Lane header -->
     <div
       class="flex items-center gap-1.5 rounded-t-lg border-b px-2 py-1.5"
-      :style="{ borderColor: meta.color + '33' }"
+      :style="{ borderColor: tint(meta.color, 20) }"
     >
       <UIcon :name="meta.icon" class="h-3.5 w-3.5 shrink-0" :style="{ color: meta.color }" />
-      <span class="truncate text-[11px] font-semibold text-slate-200">{{ t(meta.labelKey) }}</span>
+      <span class="truncate text-[11px] font-semibold text-default">{{ t(meta.labelKey) }}</span>
       <span
         class="ms-auto shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
-        :style="{ backgroundColor: meta.color + '22', color: meta.color }"
+        :style="{ backgroundColor: tint(meta.color), color: meta.color }"
         :data-testid="`lane-count-${rendered.lane}`"
         >{{ rendered.total }}</span
       >
@@ -65,7 +65,7 @@ const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.leng
       <!-- An empty lane SAYS it is empty. Left blank, "nothing needs you" and "the lane failed
            to render" look identical, and the first is worth stating: it is the answer a reader
            scanning the needs-you column is hoping for. -->
-      <p v-if="isEmpty" class="px-1 pt-2 text-[10px] leading-snug text-slate-600">
+      <p v-if="isEmpty" class="px-1 pt-2 text-[10px] leading-snug text-app-600">
         {{ t(meta.emptyKey) }}
       </p>
       <LaneGroup

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -57,10 +57,10 @@ function openStep(i: number) {
 
 /** Per-state accent, matching the inspector/focus pipeline views. */
 const STATE_META: Record<AgentState, { color: string; icon: string }> = {
-  pending: { color: '#64748b', icon: 'i-lucide-circle-dashed' },
-  working: { color: '#6366f1', icon: 'i-lucide-loader' },
-  waiting_decision: { color: '#f59e0b', icon: 'i-lucide-circle-help' },
-  done: { color: '#22c55e', icon: 'i-lucide-circle-check' },
+  pending: { color: 'var(--ui-text-muted)', icon: 'i-lucide-circle-dashed' },
+  working: { color: 'var(--ui-primary)', icon: 'i-lucide-loader' },
+  waiting_decision: { color: 'var(--ui-warning)', icon: 'i-lucide-circle-help' },
+  done: { color: 'var(--ui-success)', icon: 'i-lucide-circle-check' },
 }
 
 // A reviewer gate (requirements-review / clarity-review) folding answers or re-reviewing in
@@ -100,15 +100,15 @@ const ITEM_ICON: Record<string, string> = {
 </script>
 
 <template>
-  <div v-if="showSteps" class="mt-2 space-y-1 border-t border-slate-800 pt-2">
-    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-slate-500">
+  <div v-if="showSteps" class="mt-2 space-y-1 border-t border-default pt-2">
+    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-dimmed">
       <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
       {{ t('board.task.buildSteps') }}
     </div>
-    <div v-for="(s, i) in steps" :key="i" class="rounded bg-slate-900/60 px-1.5 py-1">
+    <div v-for="(s, i) in steps" :key="i" class="rounded bg-default/60 px-1.5 py-1">
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
+        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -117,19 +117,19 @@ const ITEM_ICON: Record<string, string> = {
           class="h-3 w-3 shrink-0"
           :style="{ color: agentKindMeta(s.agentKind).color }"
         />
-        <span class="truncate text-[10px] text-slate-200">
+        <span class="truncate text-[10px] text-default">
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
           v-if="stepHasOutput(s)"
           name="i-lucide-file-text"
-          class="h-2.5 w-2.5 shrink-0 text-slate-500"
+          class="h-2.5 w-2.5 shrink-0 text-dimmed"
         />
         <!-- The plain N/M count, replaced by the phase line below while a `pr-reviewer` step is
              live — its slice progress reads better as Slicing… / Reviewing X/Y slices. -->
         <span
           v-if="s.subtasks && s.subtasks.total > 0 && !prPhaseActive(s)"
-          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
+          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-muted"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
@@ -162,7 +162,7 @@ const ITEM_ICON: Record<string, string> = {
           !reviews.isBackground(s.agentKind, props.taskId)
         "
         type="button"
-        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-amber-500 px-1.5 py-0.5 text-[9px] font-semibold text-amber-950 transition hover:bg-amber-400"
+        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-app-warning-500 px-1.5 py-0.5 text-[9px] font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
@@ -172,10 +172,10 @@ const ITEM_ICON: Record<string, string> = {
       <!-- per-step subtask progress bar -->
       <div
         v-if="s.subtasks && s.subtasks.total > 0"
-        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-slate-700/60"
+        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-accented/60"
       >
         <div
-          class="h-full rounded bg-indigo-400 transition-all"
+          class="h-full rounded bg-primary transition-all"
           :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
         />
       </div>
@@ -192,7 +192,7 @@ const ITEM_ICON: Record<string, string> = {
             companionByStep[i]!.state === 'running' ? 'animate-spin' : '',
           ]"
         />
-        <span class="truncate text-slate-400">
+        <span class="truncate text-muted">
           {{ agentKindMeta(companionByStep[i]!.kind).label }}
         </span>
         <span
@@ -211,10 +211,10 @@ const ITEM_ICON: Record<string, string> = {
           class="flex items-start gap-1 text-[9px]"
           :class="
             item.status === 'completed'
-              ? 'text-slate-500 line-through'
+              ? 'text-dimmed line-through'
               : item.status === 'in_progress'
-                ? 'text-slate-100'
-                : 'text-slate-400'
+                ? 'text-app-100'
+                : 'text-muted'
           "
         >
           <UIcon

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -182,11 +182,14 @@ watch(open, (isOpen) => {
              presenting an empty list, which would read as "there was nothing to decide". -->
         <div
           v-if="unavailable"
-          class="space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+          class="space-y-2 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 p-3"
         >
           <div class="flex items-start gap-2">
-            <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-            <p class="text-sm text-amber-200/90">
+            <UIcon
+              name="i-lucide-triangle-alert"
+              class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400"
+            />
+            <p class="text-sm text-app-warning-200/90">
               {{
                 t(
                   `bootstrap.adoption.unavailable.${plan?.unavailableReason ?? 'analysis_unusable'}`,
@@ -194,7 +197,7 @@ watch(open, (isOpen) => {
               }}
             </p>
           </div>
-          <p v-if="plan?.unavailableDetail" class="pl-6 text-xs text-slate-400">
+          <p v-if="plan?.unavailableDetail" class="pl-6 text-xs text-muted">
             {{ plan.unavailableDetail }}
           </p>
         </div>
@@ -204,7 +207,7 @@ watch(open, (isOpen) => {
              exhausted budget is called out rather than left for someone to infer from a short
              list: it is the difference between a thin read and a thin reading. -->
         <div v-if="surveyReads.length" class="space-y-2 text-xs">
-          <p class="text-slate-400">
+          <p class="text-muted">
             {{
               t('bootstrap.adoption.survey.summary', {
                 read: readSummary.read,
@@ -212,17 +215,17 @@ watch(open, (isOpen) => {
               })
             }}
           </p>
-          <p v-if="readSummary.missed > 0" class="text-slate-500">
+          <p v-if="readSummary.missed > 0" class="text-dimmed">
             {{ t('bootstrap.adoption.survey.missed', { count: readSummary.missed }) }}
           </p>
-          <p v-if="exhausted" class="text-amber-300/90">
+          <p v-if="exhausted" class="text-app-warning-300/90">
             {{ t(`bootstrap.adoption.survey.exhausted.${exhausted}`) }}
           </p>
-          <p v-if="recordsDropped > 0" class="text-amber-300/90">
+          <p v-if="recordsDropped > 0" class="text-app-warning-300/90">
             {{ t('bootstrap.adoption.survey.truncated', { count: recordsDropped }) }}
           </p>
           <details>
-            <summary class="cursor-pointer text-slate-500 hover:text-slate-300">
+            <summary class="cursor-pointer text-dimmed hover:text-toned">
               {{ t('bootstrap.adoption.survey.show') }}
             </summary>
             <ul class="mt-2 space-y-1">
@@ -237,12 +240,12 @@ watch(open, (isOpen) => {
               >
                 <span
                   class="shrink-0 font-mono text-[10px] uppercase"
-                  :class="entry.outcome === 'read' ? 'text-slate-500' : 'text-amber-400/80'"
+                  :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
                 >
                   {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
                 </span>
-                <span class="font-mono text-slate-400">{{ entry.path }}</span>
-                <span v-if="entry.note" class="text-slate-600">{{ entry.note }}</span>
+                <span class="font-mono text-muted">{{ entry.path }}</span>
+                <span v-if="entry.note" class="text-app-600">{{ entry.note }}</span>
               </li>
             </ul>
           </details>
@@ -260,7 +263,7 @@ watch(open, (isOpen) => {
 
         <template v-else>
           <div class="flex items-center justify-between gap-3">
-            <p class="text-sm text-slate-400">{{ t('bootstrap.adoption.intro') }}</p>
+            <p class="text-sm text-muted">{{ t('bootstrap.adoption.intro') }}</p>
             <UButton
               color="neutral"
               variant="subtle"
@@ -279,14 +282,14 @@ watch(open, (isOpen) => {
               class="space-y-3 rounded-md border p-3"
               :class="
                 touched.has(decision.id)
-                  ? 'border-slate-700 bg-slate-900/40'
-                  : 'border-amber-500/40 bg-amber-500/5'
+                  ? 'border-muted bg-default/40'
+                  : 'border-app-warning-500/40 bg-app-warning-500/5'
               "
             >
               <div class="flex items-start justify-between gap-3">
                 <div>
-                  <p class="text-sm font-medium text-slate-100">{{ decision.title }}</p>
-                  <p class="text-[11px] uppercase tracking-wide text-slate-500">
+                  <p class="text-sm font-medium text-app-100">{{ decision.title }}</p>
+                  <p class="text-[11px] uppercase tracking-wide text-dimmed">
                     {{ t(`bootstrap.adoption.area.${decision.area}`) }}
                   </p>
                 </div>
@@ -296,29 +299,29 @@ watch(open, (isOpen) => {
               </div>
 
               <div class="grid gap-2 text-xs sm:grid-cols-2">
-                <div class="rounded bg-slate-900/60 p-2">
-                  <p class="mb-1 font-semibold text-slate-300">
+                <div class="rounded bg-default/60 p-2">
+                  <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.monorepo') }}
                   </p>
-                  <p class="text-slate-400">
+                  <p class="text-muted">
                     {{ decision.monorepoPractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
-                <div class="rounded bg-slate-900/60 p-2">
-                  <p class="mb-1 font-semibold text-slate-300">
+                <div class="rounded bg-default/60 p-2">
+                  <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.template') }}
                   </p>
-                  <p class="text-slate-400">
+                  <p class="text-muted">
                     {{ decision.templatePractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
               </div>
 
-              <p class="text-xs text-slate-400">{{ decision.rationale }}</p>
+              <p class="text-xs text-muted">{{ decision.rationale }}</p>
 
               <!-- The evidence is what makes the suggestion checkable rather than an assertion,
                    so it is shown, not tucked away. -->
-              <p v-if="decision.evidence.length" class="text-[11px] text-slate-500">
+              <p v-if="decision.evidence.length" class="text-[11px] text-dimmed">
                 {{ t('bootstrap.adoption.evidence') }}
                 <span class="font-mono">{{ decision.evidence.join(', ') }}</span>
               </p>
@@ -365,7 +368,7 @@ watch(open, (isOpen) => {
 
     <template #footer>
       <div class="flex w-full items-center justify-between gap-3">
-        <p v-if="!unavailable && remaining > 0" class="text-xs text-amber-300/90">
+        <p v-if="!unavailable && remaining > 0" class="text-xs text-app-warning-300/90">
           {{ t('bootstrap.adoption.remaining', { count: remaining }) }}
         </p>
         <span v-else />

package/app/components/bootstrap/BootstrapModal.vue

@@ -619,7 +619,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
              the user creates it in one click on a host we can name; or the user creates it
              themselves somewhere we cannot name, where promising a click below would be a lie
              (the button is absent for exactly the same reason). -->
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{
             intoMonorepo
               ? t('bootstrap.monorepo.intro')
@@ -635,11 +635,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
              whichever methods the deployment serves, never just the GitHub App. -->
         <div
           v-if="needsConnection"
-          class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+          class="space-y-3 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 p-3"
         >
           <div class="flex items-start gap-2">
-            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-            <p class="text-sm text-amber-200/90">
+            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
+            <p class="text-sm text-app-warning-200/90">
               {{ t('vcs.bootstrap.connectPrompt') }}
             </p>
           </div>
@@ -648,7 +648,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- launch -->
         <section class="space-y-4">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('bootstrap.section.newRepo') }}
           </h3>
 
@@ -676,7 +676,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.monorepo.repo.description')"
               required
             >
-              <div v-if="!monorepoRepoItems.length" class="text-sm text-slate-400">
+              <div v-if="!monorepoRepoItems.length" class="text-sm text-muted">
                 {{ t('bootstrap.monorepo.repo.empty') }}
               </div>
               <USelect
@@ -716,9 +716,9 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                      decide nothing, so say that instead of listing a repo for nothing. -->
                 <div
                   v-if="browsingDirectory && monorepoRepoId !== 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"
                 >
-                  <p class="mb-2 text-xs text-slate-400">
+                  <p class="mb-2 text-xs text-muted">
                     {{
                       directoryLeaf
                         ? t('bootstrap.monorepo.directory.browseHint')
@@ -749,7 +749,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.reference.description')"
               required
             >
-              <div v-if="!bootstrap.hasArchitectures" class="text-sm text-slate-400">
+              <div v-if="!bootstrap.hasArchitectures" class="text-sm text-muted">
                 {{ t('bootstrap.reference.empty') }}
               </div>
               <USelect
@@ -893,7 +893,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <UFormField :label="t('bootstrap.visibility.label')">
             <div class="flex items-center gap-2">
               <USwitch v-model="isPrivate" />
-              <span class="text-sm text-slate-300">{{ t('bootstrap.visibility.private') }}</span>
+              <span class="text-sm text-toned">{{ t('bootstrap.visibility.private') }}</span>
             </div>
           </UFormField>
 
@@ -912,17 +912,17 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
         <!-- recent jobs -->
         <section v-if="agentRuns.bootstrapJobs.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('bootstrap.recent.title') }}
           </h3>
           <div
             v-for="job in agentRuns.bootstrapJobs.slice(0, 5)"
             :key="job.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-sm"
+            class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-3 py-2 text-sm"
           >
             <div class="min-w-0">
-              <div class="truncate text-slate-200">{{ job.repoName }}</div>
-              <div class="truncate text-[11px] text-slate-500">
+              <div class="truncate text-default">{{ job.repoName }}</div>
+              <div class="truncate text-[11px] text-dimmed">
                 {{
                   job.referenceArchitectureName
                     ? t('bootstrap.recent.fromArch', { name: job.referenceArchitectureName })
@@ -935,7 +935,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.repoUrl"
                 :to="job.repoUrl"
                 target="_blank"
-                class="text-[11px] text-indigo-400 hover:underline"
+                class="text-[11px] text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.open') }}
               </ULink>
@@ -947,7 +947,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                 v-if="job.prUrl"
                 :to="job.prUrl"
                 target="_blank"
-                class="text-[11px] text-indigo-400 hover:underline"
+                class="text-[11px] text-primary hover:underline"
               >
                 {{ t('bootstrap.recent.openPr') }}
               </ULink>
@@ -963,7 +963,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
         <!-- reference architecture management -->
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('bootstrap.arch.title') }}
             </h3>
             <UButton
@@ -980,13 +980,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <div
             v-for="a in bootstrap.architectures"
             :key="a.id"
-            class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2"
+            class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-3 py-2"
           >
             <div class="min-w-0">
-              <div class="truncate text-sm text-slate-200">{{ a.name }}</div>
-              <div class="truncate text-[11px] text-slate-500">
-                {{ a.repoOwner }}/{{ a.repoName }}
-              </div>
+              <div class="truncate text-sm text-default">{{ a.name }}</div>
+              <div class="truncate text-[11px] text-dimmed">{{ a.repoOwner }}/{{ a.repoName }}</div>
             </div>
             <div class="flex items-center gap-1">
               <UButton
@@ -1009,7 +1007,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           <!-- add / edit form -->
           <div
             v-if="showArchForm"
-            class="space-y-3 rounded-md border border-slate-700 bg-slate-900/80 p-3"
+            class="space-y-3 rounded-md border border-muted bg-default/80 p-3"
           >
             <!-- The options come from the connected projection, so a repo to pick means a
                  connection exists and `providerLabel` names it rather than guessing. -->

package/app/components/bootstrap/BootstrapRunSteps.vue

@@ -44,7 +44,7 @@ function stateLabel(state: BootstrapStepState): string {
         :class="BOOTSTRAP_STEP_STYLE[step.state].iconClass"
       />
       <span :class="BOOTSTRAP_STEP_STYLE[step.state].labelClass">{{ stepLabel(step.id) }}</span>
-      <span class="ms-auto shrink-0 text-slate-500">{{ stateLabel(step.state) }}</span>
+      <span class="ms-auto shrink-0 text-dimmed">{{ stateLabel(step.state) }}</span>
     </li>
   </ol>
 </template>