@cat-factory/app 0.302.2 → 0.303.1

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

@@ -11,10 +11,10 @@ const props = defineProps<{
 const archetype = computed(() => agentKindMeta(props.step.agentKind))
 
 const stateRing: Record<AgentState, string> = {
-  pending: 'ring-slate-600/60 opacity-60',
-  working: 'ring-indigo-400',
-  waiting_decision: 'ring-amber-400 board-pulse',
-  done: 'ring-emerald-400',
+  pending: 'ring-app-600/60 opacity-60',
+  working: 'ring-primary',
+  waiting_decision: 'ring-app-warning-400 board-pulse',
+  done: 'ring-app-success-400',
 }
 
 const stateIcon: Record<AgentState, string | null> = {
@@ -32,27 +32,27 @@ const dim = computed(() => (props.size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'))
     <div
       class="relative flex items-center justify-center rounded-full ring-2 transition"
       :class="[dim, stateRing[step.state], active ? 'scale-110' : '']"
-      :style="{ backgroundColor: archetype.color + '22' }"
+      :style="{ backgroundColor: tint(archetype.color) }"
     >
       <UIcon :name="archetype.icon" class="text-base" :style="{ color: archetype.color }" />
       <span
         v-if="step.state === 'working'"
-        class="absolute -bottom-1 -end-1 rounded-full bg-slate-900 p-0.5"
+        class="absolute -bottom-1 -end-1 rounded-full bg-default p-0.5"
       >
-        <UIcon :name="stateIcon.working!" class="h-3 w-3 animate-spin text-indigo-300" />
+        <UIcon :name="stateIcon.working!" class="h-3 w-3 animate-spin text-primary" />
       </span>
       <span
         v-else-if="stateIcon[step.state]"
-        class="absolute -bottom-1 -end-1 rounded-full bg-slate-900 p-0.5"
+        class="absolute -bottom-1 -end-1 rounded-full bg-default p-0.5"
       >
         <UIcon
           :name="stateIcon[step.state]!"
           class="h-3 w-3"
-          :class="step.state === 'done' ? 'text-emerald-300' : 'text-amber-300'"
+          :class="step.state === 'done' ? 'text-app-success-300' : 'text-app-warning-300'"
         />
       </span>
     </div>
-    <span v-if="size !== 'sm'" class="text-[10px] leading-none text-slate-300">
+    <span v-if="size !== 'sm'" class="text-[10px] leading-none text-toned">
       {{ archetype.label }}
     </span>
   </div>

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

@@ -238,21 +238,21 @@ const ITEM_ICON: Record<string, string> = {
        shows only the internal id + a "Permission denied" placeholder (never the repo). -->
   <div
     v-if="block?.accessDenied"
-    class="w-56 overflow-hidden rounded-xl border border-slate-700 bg-slate-900/90 shadow-xl backdrop-blur"
+    class="w-56 overflow-hidden rounded-xl border border-muted bg-default/90 shadow-xl backdrop-blur"
     :data-block-id="block.id"
     data-testid="frame-access-denied"
   >
-    <div class="flex items-center gap-2 border-b border-slate-800 px-3 py-2">
-      <span class="i-lucide-lock h-4 w-4 shrink-0 text-slate-400" />
-      <span class="truncate text-sm font-semibold text-slate-200">{{
+    <div class="flex items-center gap-2 border-b border-default px-3 py-2">
+      <span class="i-lucide-lock h-4 w-4 shrink-0 text-muted" />
+      <span class="truncate text-sm font-semibold text-default">{{
         t('board.frame.accessDenied.title')
       }}</span>
     </div>
     <div class="px-3 py-3">
-      <p class="text-[11px] leading-snug text-slate-400">
+      <p class="text-[11px] leading-snug text-muted">
         {{ t('board.frame.accessDenied.hint') }}
       </p>
-      <code class="mt-2 block truncate font-mono text-[11px] text-slate-500">{{ block.id }}</code>
+      <code class="mt-2 block truncate font-mono text-[11px] text-dimmed">{{ block.id }}</code>
     </div>
   </div>
 
@@ -291,23 +291,23 @@ const ITEM_ICON: Record<string, string> = {
          and a collapsed summary) went with the header's collapse control, since between them they
          held the only render of the "Shared" badge, which now lives in the header below. -->
     <div
-      class="relative overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
-      :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
+      class="relative overflow-visible rounded-2xl border bg-default/95 shadow-2xl backdrop-blur"
+      :class="[selected ? 'border-inverted' : 'border-muted', pulseClass]"
     >
       <div class="h-1.5 w-full rounded-t-2xl" :style="{ backgroundColor: accent }" />
       <!-- bootstrap-in-progress banner -->
       <div
         v-if="bootstrapping"
-        class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2"
+        class="border-b border-app-warning-900/50 bg-app-warning-950/30 px-4 py-2"
         data-testid="bootstrap-progress"
       >
         <div class="flex items-center gap-1.5 text-xs">
           <UIcon
             name="i-lucide-loader-circle"
-            class="h-4 w-4 shrink-0 animate-spin text-amber-400"
+            class="h-4 w-4 shrink-0 animate-spin text-app-warning-400"
           />
-          <span class="text-amber-300">{{ t('board.frame.bootstrappingRepository') }}</span>
-          <span v-if="bootstrapSubtasks" class="ms-auto text-amber-200/80">
+          <span class="text-app-warning-300">{{ t('board.frame.bootstrappingRepository') }}</span>
+          <span v-if="bootstrapSubtasks" class="ms-auto text-app-warning-200/80">
             {{
               t('board.frame.bootstrapStepsCount', {
                 completed: bootstrapSubtasks.completed,
@@ -316,9 +316,9 @@ const ITEM_ICON: Record<string, string> = {
             }}
           </span>
         </div>
-        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
+        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-app-warning-900/40">
           <div
-            class="h-full rounded bg-amber-400 transition-all"
+            class="h-full rounded bg-app-warning-400 transition-all"
             :style="{ width: bootstrapPct + '%' }"
           />
         </div>
@@ -330,18 +330,18 @@ const ITEM_ICON: Record<string, string> = {
             class="flex items-start gap-1.5 text-[11px]"
             :class="
               item.status === 'completed'
-                ? 'text-amber-200/60 line-through'
+                ? 'text-app-warning-200/60 line-through'
                 : item.status === 'in_progress'
-                  ? 'text-amber-100'
-                  : 'text-amber-200/80'
+                  ? 'text-app-warning-100'
+                  : 'text-app-warning-200/80'
             "
           >
             <UIcon
               :name="ITEM_ICON[item.status]"
               class="mt-px h-3 w-3 shrink-0"
               :class="[
-                item.status === 'in_progress' ? 'animate-spin text-amber-400' : '',
-                item.status === 'completed' ? 'text-emerald-400' : 'text-amber-400/70',
+                item.status === 'in_progress' ? 'animate-spin text-app-warning-400' : '',
+                item.status === 'completed' ? 'text-app-success-400' : 'text-app-warning-400/70',
               ]"
             />
             <span>{{ item.label }}</span>
@@ -368,11 +368,11 @@ const ITEM_ICON: Record<string, string> = {
       <!-- parked on a human adoption review: the run is waiting on the viewer, not working -->
       <div
         v-else-if="awaitingReview"
-        class="m-3 space-y-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3"
+        class="m-3 space-y-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/5 p-3"
       >
         <div class="flex items-start gap-2">
-          <UIcon name="i-lucide-user-check" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-          <p class="text-xs text-amber-200/90">{{ t('bootstrap.adoption.cardPrompt') }}</p>
+          <UIcon name="i-lucide-user-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
+          <p class="text-xs text-app-warning-200/90">{{ t('bootstrap.adoption.cardPrompt') }}</p>
         </div>
         <BootstrapRunSteps :run-id="awaitingReview.id" />
         <div class="flex justify-end">
@@ -404,7 +404,7 @@ const ITEM_ICON: Record<string, string> = {
             <div class="flex items-center gap-2">
               <div
                 class="flex h-8 w-8 items-center justify-center rounded-lg"
-                :style="{ backgroundColor: typeMeta!.accent + '22' }"
+                :style="{ backgroundColor: tint(typeMeta!.accent) }"
               >
                 <UIcon
                   :name="typeMeta!.icon"
@@ -414,7 +414,7 @@ const ITEM_ICON: Record<string, string> = {
               </div>
               <div>
                 <div class="flex items-center gap-1.5">
-                  <span class="text-sm font-semibold text-white">{{ block.title }}</span>
+                  <span class="text-sm font-semibold text-highlighted">{{ block.title }}</span>
                   <!-- Mounted on more than one board in the org. On the title row rather than in
                        the action strip, because it qualifies the service's NAME: the work lands in
                        a repo another board also drives. -->
@@ -430,7 +430,7 @@ const ITEM_ICON: Record<string, string> = {
                     {{ t('board.frame.shared') }}
                   </UBadge>
                 </div>
-                <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
+                <div class="text-[11px] text-muted">{{ typeMeta!.label }}</div>
               </div>
             </div>
             <div class="flex items-center gap-1">
@@ -530,13 +530,13 @@ const ITEM_ICON: Record<string, string> = {
                stays is what the canvas can't show at a glance. -->
           <div
             v-if="modules.length || prTasks"
-            class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500"
+            class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-dimmed"
           >
             <span v-if="modules.length">{{
               t('board.frame.moduleCount', { count: modules.length }, modules.length)
             }}</span>
             <span v-if="modules.length && prTasks" aria-hidden="true">·</span>
-            <span v-if="prTasks" class="text-emerald-400">{{
+            <span v-if="prTasks" class="text-app-success-400">{{
               t('board.frame.prReadyCount', { count: prTasks })
             }}</span>
           </div>
@@ -549,7 +549,7 @@ const ITEM_ICON: Record<string, string> = {
              through to nothing; each lane body carries the same zone for drops inside it. -->
         <div
           :data-drop-zone="block.id"
-          class="nodrag relative rounded-xl bg-slate-950/40 p-2"
+          class="nodrag relative rounded-xl bg-app-950/40 p-2"
           :style="{ width: canvas.w + 'px', minHeight: canvas.h + 'px' }"
         >
           <!-- Initiatives sit in a wrapping band above the lanes: they are containers of work,
@@ -564,7 +564,7 @@ const ITEM_ICON: Record<string, string> = {
             v-if="!hasTasks && access.canWriteBoard.value"
             type="button"
             data-testid="frame-add-task-empty"
-            class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-slate-700 text-[11px] text-slate-500 hover:border-slate-500 hover:text-slate-300"
+            class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-muted text-[11px] text-dimmed hover:border-app-500 hover:text-toned"
             @click.stop="addTask"
           >
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> {{ t('board.frame.addFirstTask') }}

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

@@ -18,12 +18,12 @@ const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisi
 <template>
   <button
     type="button"
-    class="board-pulse flex items-center gap-1 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-semibold text-amber-950 shadow-lg transition hover:bg-amber-400"
+    class="board-pulse flex items-center gap-1 rounded-full bg-app-warning-500 px-2 py-0.5 text-xs font-semibold text-app-warning-50 dark:text-app-warning-950 shadow-lg transition hover:bg-app-warning-400"
     @click.stop="$emit('open')"
   >
     <UIcon :name="icon" class="h-3.5 w-3.5" />
     <span v-if="!compact">{{ displayLabel }}</span>
-    <span v-if="count && count > 1" class="rounded-full bg-amber-950/30 px-1">
+    <span v-if="count && count > 1" class="rounded-full bg-app-warning-950/30 px-1">
       {{ count }}
     </span>
   </button>

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

@@ -26,30 +26,34 @@ const selected = computed(() => ui.selectedBlockId === props.id)
   <div
     v-if="block"
     :data-block-id="block.id"
-    class="w-56 cursor-pointer rounded-lg border bg-slate-900/90 px-3 py-2 shadow-lg backdrop-blur transition-colors"
-    :class="selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'"
+    class="w-56 cursor-pointer rounded-lg border bg-default/90 px-3 py-2 shadow-lg backdrop-blur transition-colors"
+    :class="
+      selected
+        ? 'border-app-secondary-400 ring-1 ring-app-secondary-400/50'
+        : 'border-app-secondary-500/40'
+    "
     @click="ui.select(block.id)"
   >
     <div class="flex items-center gap-1.5">
-      <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 shrink-0 text-violet-400" />
-      <span class="text-[10px] font-semibold uppercase tracking-wide text-violet-300">{{
+      <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 shrink-0 text-app-secondary-400" />
+      <span class="text-[10px] font-semibold uppercase tracking-wide text-app-secondary-300">{{
         t('board.epic.label')
       }}</span>
-      <span class="ms-auto text-[10px] text-slate-400">{{ done }}/{{ total }}</span>
+      <span class="ms-auto text-[10px] text-muted">{{ done }}/{{ total }}</span>
     </div>
-    <div class="mt-1 truncate text-sm font-medium text-slate-100" :title="block.title">
+    <div class="mt-1 truncate text-sm font-medium text-app-100" :title="block.title">
       {{ block.title }}
     </div>
-    <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-700/60">
+    <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-accented/60">
       <div
-        class="h-full rounded-full bg-violet-500"
+        class="h-full rounded-full bg-app-secondary-500"
         :style="{ width: total ? `${Math.round((done / total) * 100)}%` : '0%' }"
       />
     </div>
-    <div v-if="active" class="mt-1 text-[10px] text-slate-400">
+    <div v-if="active" class="mt-1 text-[10px] text-muted">
       {{ t('board.epic.activeCount', { count: active }) }}
     </div>
-    <div v-else-if="total === 0" class="mt-1 text-[10px] text-slate-500">
+    <div v-else-if="total === 0" class="mt-1 text-[10px] text-dimmed">
       {{ t('board.epic.noTasksYet') }}
     </div>
   </div>

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

@@ -66,39 +66,37 @@ const withheldNote = computed(() => {
     <!-- The Done strip. Rendered only once the service HAS finished something: an empty archive
          is the one lane whose emptiness says nothing a reader needs (a new service has merged
          nothing, which its three live lanes already show). -->
-    <div v-if="doneLane && doneLane.total > 0" class="rounded-lg bg-slate-900/40">
+    <div v-if="doneLane && doneLane.total > 0" class="rounded-lg bg-default/40">
       <button
         type="button"
-        class="nodrag flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left hover:bg-slate-800/40"
+        class="nodrag flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left hover:bg-elevated/40"
         data-testid="done-lane-toggle"
         :aria-expanded="!laneView.doneLaneCollapsed"
         @click.stop="laneView.toggleDoneLane()"
       >
         <UIcon
           :name="laneView.doneLaneCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
-          class="h-3.5 w-3.5 shrink-0 text-slate-500"
+          class="h-3.5 w-3.5 shrink-0 text-dimmed"
         />
         <UIcon
           :name="LANE_META.done.icon"
           class="h-3.5 w-3.5 shrink-0"
           :style="{ color: LANE_META.done.color }"
         />
-        <span class="text-[11px] font-semibold text-slate-200">{{
-          t(LANE_META.done.labelKey)
-        }}</span>
+        <span class="text-[11px] font-semibold text-default">{{ t(LANE_META.done.labelKey) }}</span>
         <!-- The TOTAL, not what the caps admitted: "this service has finished 312 tasks" is the
              fact the lane carries, and counting only the visible cards would understate it by
              two orders of magnitude. -->
         <span
           class="shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
           :style="{
-            backgroundColor: LANE_META.done.color + '22',
+            backgroundColor: tint(LANE_META.done.color),
             color: LANE_META.done.color,
           }"
           data-testid="lane-count-done"
           >{{ doneLane.total }}</span
         >
-        <span v-if="withheldNote" class="ms-auto truncate text-[10px] text-slate-500">{{
+        <span v-if="withheldNote" class="ms-auto truncate text-[10px] text-dimmed">{{
           withheldNote
         }}</span>
       </button>
@@ -120,7 +118,7 @@ const withheldNote = computed(() => {
              has nothing in it rather than looking broken. -->
         <p
           v-if="doneSelection.shown.length === 0"
-          class="px-1 text-[10px] leading-snug text-slate-600"
+          class="px-1 text-[10px] leading-snug text-app-600"
         >
           {{ t('board.lanes.done.allWithheld') }}
         </p>

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

@@ -66,33 +66,33 @@ function select() {
     <div
       data-testid="initiative-card"
       :data-status="status"
-      class="cursor-pointer rounded-lg border border-indigo-800/60 bg-indigo-950/40 p-3 transition hover:border-indigo-600"
+      class="cursor-pointer rounded-lg border border-primary/60 bg-primary/10 p-3 transition hover:border-primary"
       :class="[
-        selected ? 'ring-2 ring-indigo-400/60' : '',
+        selected ? 'ring-2 ring-primary/60' : '',
         awaitingAnswers || attention ? 'board-pulse' : '',
       ]"
       @click.stop="select"
     >
       <div class="flex items-start justify-between gap-2">
         <div class="flex items-center gap-2">
-          <UIcon name="i-lucide-milestone" class="h-4 w-4 shrink-0 text-indigo-400" />
-          <div class="text-xs font-semibold text-white">{{ block.title }}</div>
+          <UIcon name="i-lucide-milestone" class="h-4 w-4 shrink-0 text-primary" />
+          <div class="text-xs font-semibold text-highlighted">{{ block.title }}</div>
         </div>
         <UBadge :color="INITIATIVE_STATUS_CHIPS[status]" variant="subtle" size="sm">
           {{ statusLabel }}
         </UBadge>
       </div>
-      <div class="mt-1 text-[10px] uppercase tracking-wide text-indigo-300/70">
+      <div class="mt-1 text-[10px] uppercase tracking-wide text-primary/70">
         {{ t('initiative.card.kind') }}
       </div>
       <div v-if="progress" class="mt-2 space-y-1">
-        <div class="h-1.5 overflow-hidden rounded bg-slate-800">
+        <div class="h-1.5 overflow-hidden rounded bg-elevated">
           <div
-            class="h-full rounded bg-indigo-400"
+            class="h-full rounded bg-primary"
             :style="{ width: `${Math.round((progress.settled / progress.total) * 100)}%` }"
           />
         </div>
-        <div class="text-[10px] text-slate-400">
+        <div class="text-[10px] text-muted">
           {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
         </div>
       </div>

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

@@ -75,7 +75,7 @@ const icon = computed(() => {
          saying "all of them" would be a row of chrome carrying no information. -->
     <div
       v-if="groupKey !== 'none'"
-      class="flex items-center gap-1 px-0.5 text-[10px] uppercase tracking-wide text-slate-500"
+      class="flex items-center gap-1 px-0.5 text-[10px] uppercase tracking-wide text-dimmed"
     >
       <UIcon v-if="icon" :name="icon" class="h-3 w-3 shrink-0" />
       <span class="truncate" :title="label">{{ label }}</span>

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

@@ -52,13 +52,13 @@ function onHandle(e: PointerEvent) {
          for read-only viewers, for whom the drag is a no-op anyway (see useBlockDrag). -->
     <div
       v-if="access.canWriteBoard.value"
-      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
+      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-muted bg-elevated/80 py-px active:cursor-grabbing pointer-coarse:py-2"
       :title="t('board.frame.dragTask')"
       @pointerdown="onHandle"
     >
       <UIcon
         name="i-lucide-grip-horizontal"
-        class="h-3 w-3 text-slate-500 pointer-coarse:h-5 pointer-coarse:w-5"
+        class="h-3 w-3 text-dimmed pointer-coarse:h-5 pointer-coarse:w-5"
       />
     </div>
     <TaskCard :task-id="taskId" :class="access.canWriteBoard.value ? '!rounded-t-none' : ''" />

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

@@ -90,11 +90,11 @@ const GRIPS: Record<ResizeEdge, GripStyle> = {
 // A bar is filled, an L-shaped corner mark is drawn in border colour — so the lit/idle classes
 // differ per shape as well as per tone.
 const TONES = {
-  frame: { barLit: 'bg-sky-400', markLit: 'border-sky-400', markIdle: 'border-slate-500' },
+  frame: { barLit: 'bg-app-info-400', markLit: 'border-app-info-400', markIdle: 'border-app-500' },
   module: {
-    barLit: 'bg-violet-300',
-    markLit: 'border-violet-300',
-    markIdle: 'border-violet-400/60',
+    barLit: 'bg-app-secondary-300',
+    markLit: 'border-app-secondary-300',
+    markIdle: 'border-app-secondary-400/60',
   },
 } as const
 

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