@cat-factory/app 0.302.2 → 0.303.1

package/app/components/board/AddTaskModal.vue

@@ -916,10 +916,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
   <UModal v-model:open="modalOpen" :title="t('board.addTask.title')">
     <template #body>
       <div class="space-y-4" data-testid="add-task-modal">
-        <p v-if="container" class="text-xs text-slate-400">
+        <p v-if="container" class="text-xs text-muted">
           <i18n-t keypath="board.addTask.newTaskIn" tag="span" scope="global">
             <template #container>
-              <span class="font-medium text-slate-200">{{ container.title }}</span>
+              <span class="font-medium text-default">{{ container.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -940,7 +940,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             >
               <p
                 v-if="row.caption"
-                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
                 data-testid="task-type-category"
               >
                 {{ row.caption }}
@@ -981,10 +981,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
         </UFormField>
 
         <!-- Recurring tasks are configured as a schedule on the service frame. -->
-        <div
-          v-if="isRecurring"
-          class="rounded-lg border border-slate-800 p-3 text-[11px] text-slate-400"
-        >
+        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-[11px] text-muted">
           <template v-if="recurringFrameId">
             {{ t('board.addTask.recurringWithFrame') }}
           </template>
@@ -1023,10 +1020,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 autoresize
                 readonly
                 class="w-full"
-                :ui="{ base: 'cursor-default text-slate-300' }"
+                :ui="{ base: 'cursor-default text-toned' }"
               />
             </UFormField>
-            <p v-if="resolvingIssueBodies" class="text-[11px] text-slate-500">
+            <p v-if="resolvingIssueBodies" class="text-[11px] text-dimmed">
               {{ t('board.addTask.loadingIssue') }}
             </p>
 
@@ -1054,10 +1051,10 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
 
           <UCheckbox v-if="uiMode.isAdvanced" v-model="technical" name="technical">
             <template #label>
-              <span class="text-sm text-slate-200">{{ t('board.addTask.technical') }}</span>
+              <span class="text-sm text-default">{{ t('board.addTask.technical') }}</span>
             </template>
             <template #description>
-              <span class="text-[11px] text-slate-500">
+              <span class="text-[11px] text-dimmed">
                 {{ t('board.addTask.technicalHint') }}
               </span>
             </template>
@@ -1109,22 +1106,22 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 <label
                   v-for="phase in BUG_FISHING_PHASES"
                   :key="phase.id"
-                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-slate-800/40"
+                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-elevated/40"
                 >
                   <input
                     v-model="fishingPhaseIds"
                     type="checkbox"
                     :value="phase.id"
-                    class="mt-0.5 accent-sky-500"
+                    class="mt-0.5 accent-app-info-500"
                     :data-testid="`add-task-fishing-angle-${phase.id}`"
                   />
                   <span class="min-w-0">
-                    <span class="block text-slate-200">{{ phase.title }}</span>
-                    <span class="block text-[11px] text-slate-500">{{ phase.goal }}</span>
+                    <span class="block text-default">{{ phase.title }}</span>
+                    <span class="block text-[11px] text-dimmed">{{ phase.goal }}</span>
                   </span>
                 </label>
               </div>
-              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-slate-500">
+              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-dimmed">
                 {{ t('board.addTask.bugFishingFields.angles.allSelected') }}
               </p>
             </UFormField>
@@ -1388,11 +1385,11 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
           </div>
 
           <div v-if="configDescriptors.length" class="space-y-3">
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('board.addTask.agentConfiguration') }}
             </span>
             <div v-for="d in configDescriptors" :key="d.id" class="space-y-1">
-              <div class="text-[11px] text-slate-400">{{ d.label }}</div>
+              <div class="text-[11px] text-muted">{{ d.label }}</div>
               <div v-if="d.type === 'select'" class="flex flex-wrap gap-1">
                 <UButton
                   v-for="opt in d.options"
@@ -1414,7 +1411,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :data-testid="`agent-config-${d.id}`"
                 @update:model-value="(v: string | number) => setConfig(d.id, String(v))"
               />
-              <p class="text-[11px] leading-snug text-slate-500">{{ d.description }}</p>
+              <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
             </div>
           </div>
 
@@ -1443,7 +1440,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             :issues-hint="t('board.addTask.noIssuesHint')"
           />
 
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.addTask.plannedHint') }}
           </p>
         </template>

package/app/components/board/AgentFailureCard.vue

@@ -133,7 +133,7 @@ async function retry() {
 
 <template>
   <div
-    class="nodrag rounded-lg border border-rose-900/60 bg-rose-950/40"
+    class="nodrag rounded-lg border border-app-error-900/60 bg-app-error-950/40"
     :class="compact ? 'px-3 py-2' : 'px-3 py-2.5'"
     data-testid="agent-failure-banner"
     :data-run-kind="run.kind"
@@ -141,15 +141,15 @@ async function retry() {
     <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
       <UIcon
         name="i-lucide-alert-triangle"
-        class="shrink-0 text-rose-400"
+        class="shrink-0 text-app-error-400"
         :class="compact ? 'h-3.5 w-3.5' : 'h-4 w-4'"
       />
-      <span class="text-rose-300">{{ title }}</span>
+      <span class="text-app-error-300">{{ title }}</span>
     </div>
 
     <p
       v-if="failure?.message"
-      class="mt-1 leading-snug text-rose-300/90"
+      class="mt-1 leading-snug text-app-error-300/90"
       :class="compact ? 'line-clamp-2 text-[10px]' : 'text-[11px]'"
       :title="failure.message"
     >
@@ -158,7 +158,7 @@ async function retry() {
 
     <p
       v-if="failure?.hint"
-      class="mt-1 leading-snug text-rose-400/70"
+      class="mt-1 leading-snug text-app-error-400/70"
       :class="compact ? 'text-[10px]' : 'text-[11px]'"
     >
       {{ failure.hint }}
@@ -168,7 +168,7 @@ async function retry() {
          name the concrete .env fix rather than only pointing at the (unhelpful-here) tab. -->
     <p
       v-if="showEnvironmentLocalHint && !compact"
-      class="mt-1 text-[11px] leading-snug text-rose-400/70"
+      class="mt-1 text-[11px] leading-snug text-app-error-400/70"
       data-testid="agent-failure-environment-local-hint"
     >
       {{
@@ -192,14 +192,14 @@ async function retry() {
       v-if="!compact && failure"
       :detail="failure.detail"
       :message="failure.message"
-      summary-class="text-[10px] text-rose-400/60 hover:text-rose-300"
-      pre-class="bg-rose-950/60 text-[10px] text-rose-200/80"
+      summary-class="text-[10px] text-app-error-400/60 hover:text-app-error-300"
+      pre-class="bg-app-error-950/60 text-[10px] text-app-error-200/80"
     />
 
     <div class="mt-2 flex flex-wrap items-center gap-2">
       <button
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/40 text-rose-200 hover:bg-rose-900/70 disabled:opacity-60"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/40 text-app-error-200 hover:bg-app-error-900/70 disabled:opacity-60"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         :disabled="retrying || !access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
@@ -216,7 +216,7 @@ async function retry() {
       <button
         v-if="run.kind === 'bootstrap'"
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/20 text-rose-300 hover:bg-rose-900/50"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         data-testid="agent-failure-inspect"
         @click.stop="inspectRun"
@@ -233,7 +233,7 @@ async function retry() {
       <button
         v-if="isEnvironmentFailure"
         type="button"
-        class="nodrag flex items-center gap-1 rounded-md bg-rose-900/20 text-rose-300 hover:bg-rose-900/50"
+        class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
         :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
         data-testid="agent-failure-configure-environment"
         @click.stop="openFailureSetup"

package/app/components/board/AgentFailureHistory.vue

@@ -15,11 +15,11 @@ const { t } = useI18n()
 <template>
   <details
     v-if="failures.length"
-    class="nodrag rounded-lg border border-slate-700/60 bg-slate-900/40 px-3 py-2"
+    class="nodrag rounded-lg border border-muted/60 bg-default/40 px-3 py-2"
     data-testid="agent-failure-history"
   >
     <summary
-      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-400 hover:text-slate-200"
+      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted hover:text-default"
     >
       <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
       {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}

package/app/components/board/BoardCanvas.vue

@@ -141,7 +141,8 @@ function onPaneClick() {
       @pane-click="onPaneClick"
       @contextmenu.prevent
     >
-      <Background pattern-color="#1e293b" :gap="22" :size="1.4" />
+      <!-- The dot grid rides the border token: `neutral-800` in dark (the shade it always was), `200` in light. -->
+      <Background pattern-color="var(--ui-border)" :gap="22" :size="1.4" />
       <!-- No minimap: it's a precise-pointer affordance (too small to hit on touch,
            eats scarce width on narrow windows) that earned its keep on neither
            desktop nor mobile. The toolbar's zoom-in/out + fit-view controls are the
@@ -163,10 +164,10 @@ function onPaneClick() {
       v-if="board.frames.length === 0"
       class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 text-center"
     >
-      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-slate-600" />
+      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-app-600" />
       <div>
-        <h2 class="text-base font-semibold text-slate-300">{{ t('board.canvas.emptyTitle') }}</h2>
-        <p class="mt-1 max-w-sm text-sm text-slate-500">
+        <h2 class="text-base font-semibold text-toned">{{ t('board.canvas.emptyTitle') }}</h2>
+        <p class="mt-1 max-w-sm text-sm text-dimmed">
           {{ t('board.canvas.emptyBody') }}
         </p>
       </div>
@@ -195,7 +196,7 @@ function onPaneClick() {
         </UButton>
       </div>
       <!-- A read-only viewer sees the empty state but no create affordances. -->
-      <p v-else class="max-w-sm text-xs text-slate-600">{{ t('access.noBoardWrite') }}</p>
+      <p v-else class="max-w-sm text-xs text-app-600">{{ t('access.noBoardWrite') }}</p>
     </div>
 
     <!-- task dependency arrows, overlaid in screen space -->

package/app/components/board/CreateInitiativeModal.vue

@@ -180,10 +180,10 @@ async function create() {
   <UModal v-model:open="open" :title="t('initiative.create.title')">
     <template #body>
       <div class="space-y-4" data-testid="create-initiative-modal">
-        <p v-if="frame" class="text-xs text-slate-400">
+        <p v-if="frame" class="text-xs text-muted">
           <i18n-t keypath="initiative.create.inFrame" tag="span" scope="global">
             <template #frame>
-              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+              <span class="font-medium text-default">{{ frame.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -191,9 +191,7 @@ async function create() {
         <!-- Preset picker: only when a deployment registered presets beyond the built-in generic
              one, so a single-preset install keeps today's plain form. -->
         <div v-if="presets.length > 1" class="space-y-1.5">
-          <span class="text-xs font-medium text-slate-300">{{
-            t('initiative.create.preset')
-          }}</span>
+          <span class="text-xs font-medium text-toned">{{ t('initiative.create.preset') }}</span>
           <div class="grid gap-2" data-testid="initiative-preset-picker">
             <button
               v-for="p in presets"
@@ -204,8 +202,8 @@ async function create() {
               class="flex items-start gap-3 rounded-md border px-3 py-2 text-left transition"
               :class="
                 p.id === selectedPresetId
-                  ? 'border-primary-500 bg-primary-950/30'
-                  : 'border-slate-700 hover:border-slate-600'
+                  ? 'border-primary bg-primary/10'
+                  : 'border-muted hover:border-app-600'
               "
               @click="selectPreset(p.id)"
             >
@@ -215,10 +213,10 @@ async function create() {
                 :style="{ color: p.presentation.color }"
               />
               <span class="min-w-0">
-                <span class="block text-sm font-medium text-slate-200">
+                <span class="block text-sm font-medium text-default">
                   {{ p.presentation.label }}
                 </span>
-                <span class="block text-[11px] text-slate-400">
+                <span class="block text-[11px] text-muted">
                   {{ p.presentation.description }}
                 </span>
               </span>
@@ -266,7 +264,7 @@ async function create() {
           :issues-hint="t('initiative.create.contextIssuesHint')"
         />
 
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('initiative.create.hint') }}
         </p>
       </div>

package/app/components/board/DependencyConnectOverlay.vue

@@ -16,7 +16,7 @@ const { connecting } = useDependencyConnect()
       :y1="connecting.y1"
       :x2="connecting.x2"
       :y2="connecting.y2"
-      stroke="#f59e0b"
+      stroke="var(--ui-warning)"
       :stroke-width="2"
       stroke-dasharray="5 4"
       stroke-opacity="0.9"

package/app/components/board/FailureHistoryList.vue

@@ -20,27 +20,27 @@ const ordered = computed(() => [...props.failures].reverse())
     <li
       v-for="failure in ordered"
       :key="failure.occurredAt"
-      class="rounded-md border border-slate-800/80 bg-slate-950/50 px-2.5 py-2"
+      class="rounded-md border border-default/80 bg-app-950/50 px-2.5 py-2"
       data-testid="agent-failure-history-entry"
     >
-      <div class="flex items-center gap-1.5 text-[10px] text-slate-500">
-        <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-rose-400/70" />
+      <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+        <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
         <time>{{ d(new Date(failure.occurredAt), 'long') }}</time>
       </div>
 
-      <p class="mt-1 text-[11px] leading-snug text-slate-300" :title="failure.message">
+      <p class="mt-1 text-[11px] leading-snug text-toned" :title="failure.message">
         {{ failure.message }}
       </p>
 
-      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-slate-500">
+      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
         {{ failure.hint }}
       </p>
 
       <FailureDetail
         :detail="failure.detail"
         :message="failure.message"
-        summary-class="text-[10px] text-slate-500 hover:text-slate-300"
-        pre-class="bg-slate-950/80 text-[10px] text-slate-400"
+        summary-class="text-[10px] text-dimmed hover:text-toned"
+        pre-class="bg-app-950/80 text-[10px] text-muted"
       />
     </li>
   </ol>

package/app/components/board/RecurringPipelineModal.vue

@@ -410,10 +410,10 @@ async function add() {
   <UModal v-model:open="modalOpen" :title="t('board.recurring.title')">
     <template #body>
       <div class="space-y-4">
-        <p v-if="frame" class="text-xs text-slate-400">
+        <p v-if="frame" class="text-xs text-muted">
           <i18n-t keypath="board.recurring.on" tag="span" scope="global">
             <template #frame>
-              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+              <span class="font-medium text-default">{{ frame.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -449,11 +449,11 @@ async function add() {
           />
         </UFormField>
 
-        <div class="flex items-start gap-2 rounded-lg border border-slate-800 p-3">
+        <div class="flex items-start gap-2 rounded-lg border border-default p-3">
           <USwitch v-model="onDemand" :disabled="onDemandLocked" size="sm" class="mt-0.5" />
           <div class="space-y-0.5">
-            <p class="text-xs font-medium text-slate-200">{{ t('board.recurring.onDemand') }}</p>
-            <p class="text-[11px] text-slate-500">
+            <p class="text-xs font-medium text-default">{{ t('board.recurring.onDemand') }}</p>
+            <p class="text-[11px] text-dimmed">
               {{
                 onDemandLocked
                   ? t('board.recurring.onDemandLockedHint')
@@ -465,11 +465,11 @@ async function add() {
 
         <RecurringRecurrenceEditor v-if="!onDemand" v-model="recurrence" />
 
-        <div v-if="filesTicket" class="space-y-3 rounded-lg border border-slate-800 p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div v-if="filesTicket" class="space-y-3 rounded-lg border border-default p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('board.recurring.issueTracker') }}
           </p>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.recurring.issueTrackerHint') }}
           </p>
           <div class="flex gap-1">
@@ -538,25 +538,25 @@ async function add() {
             @update:model-value="setTrackerTrigger"
           />
           <div>
-            <p class="text-xs font-medium text-slate-200">
+            <p class="text-xs font-medium text-default">
               {{ t('board.recurring.trackerTrigger') }}
             </p>
-            <p class="text-[11px] text-slate-500">
+            <p class="text-[11px] text-dimmed">
               {{ t('board.recurring.trackerTriggerHint') }}
             </p>
           </div>
         </div>
 
-        <div v-if="showIntake" class="space-y-3 rounded-lg border border-slate-800 p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div v-if="showIntake" class="space-y-3 rounded-lg border border-default p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('board.recurring.intake') }}
           </p>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('board.recurring.intakeHint') }}
           </p>
           <!-- Two different remedies: connect something, versus connect something ELSE. A source
                that is connected but cannot run a scheduled search is not an absent connection. -->
-          <p v-if="intakeSources.length === 0" class="text-[11px] text-amber-500">
+          <p v-if="intakeSources.length === 0" class="text-[11px] text-app-warning-500">
             {{
               tasks.anyOffered
                 ? t('board.recurring.intakeNoIntakeSources')
@@ -626,7 +626,7 @@ async function add() {
           </UFormField>
 
           <template v-if="intakeSource">
-            <p class="text-[11px] text-slate-500">
+            <p class="text-[11px] text-dimmed">
               {{
                 intakeDispatch === 'per-ticket'
                   ? t('board.recurring.intakeDispatchPerTicketHint')
@@ -659,7 +659,7 @@ async function add() {
                    still holding a value would read as a filter that is on. Stated here because a
                    schedule fires unattended — the only other evidence of the gap is a bugfix run
                    started on a docs chore. -->
-              <p v-else class="text-xs text-amber-400">
+              <p v-else class="text-xs text-app-warning-400">
                 {{
                   t('board.recurring.intakeIssueTypeUnsupported', {
                     tracker: intakeSourceLabel,
@@ -677,7 +677,7 @@ async function add() {
           </template>
         </div>
 
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('board.recurring.footerHint') }}
         </p>
       </div>

package/app/components/board/ReviewFrictionDialog.vue

@@ -81,24 +81,24 @@ function createAnyway() {
   >
     <template #body>
       <div v-if="ctx" class="space-y-5">
-        <p class="text-sm text-slate-300">{{ body }}</p>
+        <p class="text-sm text-toned">{{ body }}</p>
 
-        <div class="rounded-lg border border-slate-700 bg-slate-900/50 p-2">
-          <p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        <div class="rounded-lg border border-muted bg-default/50 p-2">
+          <p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('errors.reviewFriction.waitingHeading') }}
           </p>
           <ul class="space-y-1">
             <li v-for="item in ctx.debt" :key="item.blockId">
               <button
                 type="button"
-                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-slate-800/60 disabled:opacity-50"
+                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated/60 disabled:opacity-50"
                 :disabled="pending"
                 @click="goToBlock(item.blockId)"
               >
-                <span class="truncate text-slate-200">
+                <span class="truncate text-default">
                   {{ item.title || t('errors.reviewFriction.untitled') }}
                 </span>
-                <span class="shrink-0 text-[12px] text-slate-500">
+                <span class="shrink-0 text-[12px] text-dimmed">
                   {{ t('errors.reviewFriction.waiting', { minutes: item.waitingMinutes }) }}
                 </span>
               </button>

package/app/components/board/StepExecutionHistory.vue

@@ -46,8 +46,8 @@ const entries = computed<Entry[]>(() =>
       class="rounded-md border px-2.5 py-2"
       :class="
         entry.kind === 'success'
-          ? 'border-emerald-900/60 bg-emerald-950/20'
-          : 'border-slate-800/80 bg-slate-950/50'
+          ? 'border-app-success-900/60 bg-app-success-950/20'
+          : 'border-default/80 bg-app-950/50'
       "
       :data-testid="
         entry.kind === 'success' ? 'step-history-success-entry' : 'step-history-failure-entry'
@@ -55,39 +55,39 @@ const entries = computed<Entry[]>(() =>
     >
       <!-- a superseded SUCCESSFUL attempt: its output, collapsible + copyable -->
       <template v-if="entry.kind === 'success'">
-        <div class="flex items-center gap-1.5 text-[10px] text-slate-500">
-          <UIcon name="i-lucide-check-circle-2" class="h-3 w-3 shrink-0 text-emerald-400/70" />
+        <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+          <UIcon name="i-lucide-check-circle-2" class="h-3 w-3 shrink-0 text-app-success-400/70" />
           <time>{{ d(new Date(entry.occurredAt), 'long') }}</time>
-          <span class="text-emerald-400/80">{{ t('panels.stepDetail.attemptSucceeded') }}</span>
+          <span class="text-app-success-400/80">{{ t('panels.stepDetail.attemptSucceeded') }}</span>
         </div>
         <div class="relative mt-1">
           <CopyButton :text="entry.output.output" class="absolute end-1 top-1 z-10" />
           <pre
-            class="max-h-40 overflow-auto whitespace-pre-wrap rounded bg-slate-950/80 p-1.5 pe-9 text-[10px] leading-snug text-slate-300"
+            class="max-h-40 overflow-auto whitespace-pre-wrap rounded bg-app-950/80 p-1.5 pe-9 text-[10px] leading-snug text-toned"
             >{{ entry.output.output }}</pre>
         </div>
-        <p v-if="entry.output.truncated" class="mt-1 text-[10px] text-slate-500">
+        <p v-if="entry.output.truncated" class="mt-1 text-[10px] text-dimmed">
           {{ t('panels.stepDetail.outputTruncated') }}
         </p>
       </template>
 
       <!-- a FAILED attempt: mirrors FailureHistoryList's entry markup -->
       <template v-else>
-        <div class="flex items-center gap-1.5 text-[10px] text-slate-500">
-          <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-rose-400/70" />
+        <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+          <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
           <time>{{ d(new Date(entry.occurredAt), 'long') }}</time>
         </div>
-        <p class="mt-1 text-[11px] leading-snug text-slate-300" :title="entry.failure.message">
+        <p class="mt-1 text-[11px] leading-snug text-toned" :title="entry.failure.message">
           {{ entry.failure.message }}
         </p>
-        <p v-if="entry.failure.hint" class="mt-1 text-[10px] leading-snug text-slate-500">
+        <p v-if="entry.failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
           {{ entry.failure.hint }}
         </p>
         <FailureDetail
           :detail="entry.failure.detail"
           :message="entry.failure.message"
-          summary-class="text-[10px] text-slate-500 hover:text-slate-300"
-          pre-class="bg-slate-950/80 text-[10px] text-slate-400"
+          summary-class="text-[10px] text-dimmed hover:text-toned"
+          pre-class="bg-app-950/80 text-[10px] text-muted"
         />
       </template>
     </li>

package/app/components/board/TaskDependencyEdges.vue

@@ -193,7 +193,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
         markerHeight="6"
         orient="auto-start-reverse"
       >
-        <path d="M0,0 L10,5 L0,10 z" fill="#f59e0b" />
+        <path d="M0,0 L10,5 L0,10 z" fill="var(--ui-warning)" />
       </marker>
       <marker
         id="task-arrow-done"
@@ -204,7 +204,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
         markerHeight="6"
         orient="auto-start-reverse"
       >
-        <path d="M0,0 L10,5 L0,10 z" fill="#64748b" />
+        <path d="M0,0 L10,5 L0,10 z" fill="var(--ui-text-muted)" />
       </marker>
       <marker
         id="frontend-arrow"
@@ -215,7 +215,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
         markerHeight="6"
         orient="auto-start-reverse"
       >
-        <path d="M0,0 L10,5 L0,10 z" fill="#22d3ee" />
+        <path d="M0,0 L10,5 L0,10 z" fill="var(--app-hue-cyan)" />
       </marker>
       <marker
         id="service-connection-arrow"
@@ -226,7 +226,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
         markerHeight="6"
         orient="auto-start-reverse"
       >
-        <path d="M0,0 L10,5 L0,10 z" fill="#34d399" />
+        <path d="M0,0 L10,5 L0,10 z" fill="var(--app-hue-emerald)" />
       </marker>
     </defs>
 
@@ -238,7 +238,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
       :y1="s.y1"
       :x2="s.x2"
       :y2="s.y2"
-      stroke="#34d399"
+      stroke="var(--app-hue-emerald)"
       :stroke-width="1.5"
       stroke-dasharray="3 4"
       :stroke-opacity="0.55"
@@ -253,7 +253,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
       :y1="s.y1"
       :x2="s.x2"
       :y2="s.y2"
-      stroke="#22d3ee"
+      stroke="var(--app-hue-cyan)"
       :stroke-width="1.5"
       stroke-dasharray="1 4"
       :stroke-opacity="0.6"
@@ -268,7 +268,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
       :y1="s.y1"
       :x2="s.x2"
       :y2="s.y2"
-      stroke="#8b5cf6"
+      stroke="var(--app-hue-violet)"
       :stroke-width="1.5"
       stroke-dasharray="2 5"
       :stroke-opacity="0.5"
@@ -281,7 +281,7 @@ watch([taskDeps, epicLinks, frontendLinks, connectionLinks], poke)
       :y1="s.y1"
       :x2="s.x2"
       :y2="s.y2"
-      :stroke="s.done ? '#64748b' : '#f59e0b'"
+      :stroke="s.done ? 'var(--ui-text-muted)' : 'var(--ui-warning)'"
       :stroke-width="2"
       :stroke-dasharray="s.done ? '0' : '5 4'"
       :stroke-opacity="0.85"