@cat-factory/app 0.302.2 → 0.303.0

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"

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