@cat-factory/app 0.302.2 → 0.303.1

package/app/components/github/GitHubPanel.vue

@@ -309,15 +309,15 @@ async function merge(pr: GitHubPullRequest) {
         <template v-else>
           <!-- connection header -->
           <div
-            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="flex items-center gap-2 min-w-0">
-              <UIcon :name="providerIcon" class="h-5 w-5 text-slate-300" />
+              <UIcon :name="providerIcon" class="h-5 w-5 text-toned" />
               <div class="min-w-0">
-                <div class="truncate text-sm text-slate-200">
+                <div class="truncate text-sm text-default">
                   {{ github.connection?.accountLogin }}
                 </div>
-                <div class="text-[11px] text-slate-500">{{ connectionMeta }}</div>
+                <div class="text-[11px] text-dimmed">{{ connectionMeta }}</div>
               </div>
             </div>
             <div class="flex items-center gap-1">
@@ -371,7 +371,7 @@ async function merge(pr: GitHubPullRequest) {
             </UButton>
           </div>
 
-          <div v-if="github.loading" class="flex items-center gap-2 py-6 text-sm text-slate-400">
+          <div v-if="github.loading" class="flex items-center gap-2 py-6 text-sm text-muted">
             <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
             {{ t('github.panel.loading') }}
           </div>
@@ -380,7 +380,7 @@ async function merge(pr: GitHubPullRequest) {
           <section v-else-if="tab === 'repos'" class="space-y-2">
             <!-- manage which repos this board links -->
             <div class="flex items-center justify-between">
-              <span class="text-[11px] uppercase tracking-wide text-slate-500">
+              <span class="text-[11px] uppercase tracking-wide text-dimmed">
                 {{ t('github.panel.linkedToBoard') }}
               </span>
               <UButton
@@ -398,23 +398,20 @@ async function merge(pr: GitHubPullRequest) {
               </UButton>
             </div>
 
-            <div
-              v-if="managing"
-              class="space-y-2 rounded-md border border-slate-700 bg-slate-900/80 p-3"
-            >
-              <p class="text-[12px] text-slate-400">
+            <div v-if="managing" class="space-y-2 rounded-md border border-muted bg-default/80 p-3">
+              <p class="text-[12px] text-muted">
                 {{
                   isAppConnection ? t('vcs.panel.manageHintApp') : t('vcs.panel.manageHintToken')
                 }}
               </p>
               <div
                 v-if="github.loadingAvailable"
-                class="flex items-center gap-2 py-3 text-sm text-slate-400"
+                class="flex items-center gap-2 py-3 text-sm text-muted"
               >
                 <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
                 {{ t('github.panel.loadingRepos') }}
               </div>
-              <p v-else-if="!github.availableRepos.length" class="py-2 text-sm text-slate-400">
+              <p v-else-if="!github.availableRepos.length" class="py-2 text-sm text-muted">
                 {{
                   isAppConnection
                     ? t('vcs.panel.noAvailableReposApp')
@@ -426,15 +423,15 @@ async function merge(pr: GitHubPullRequest) {
                   v-for="r in github.availableRepos"
                   :key="r.githubId"
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start transition hover:bg-slate-800/60"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start transition hover:bg-elevated/60"
                   @click="toggleSelected(r.githubId)"
                 >
                   <UIcon
                     :name="selected.has(r.githubId) ? 'i-lucide-check-square' : 'i-lucide-square'"
                     class="h-4 w-4 shrink-0"
-                    :class="selected.has(r.githubId) ? 'text-indigo-400' : 'text-slate-500'"
+                    :class="selected.has(r.githubId) ? 'text-primary' : 'text-dimmed'"
                   />
-                  <span class="truncate text-sm text-slate-200">{{ r.owner }}/{{ r.name }}</span>
+                  <span class="truncate text-sm text-default">{{ r.owner }}/{{ r.name }}</span>
                   <UBadge v-if="r.private" color="neutral" variant="subtle" size="sm">
                     {{ t('github.panel.private') }}
                   </UBadge>
@@ -465,7 +462,7 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.repos.length && !managing" class="py-4 text-sm text-slate-400">
+            <p v-if="!github.repos.length && !managing" class="py-4 text-sm text-muted">
               {{ t('github.panel.noLinkedRepos') }}
             </p>
 
@@ -477,13 +474,13 @@ async function merge(pr: GitHubPullRequest) {
                  with a control whose result is the operator's to act on. -->
             <BranchProtectionPreflight
               v-if="github.repos.length && access.canManageIntegrations.value"
-              class="rounded-md border border-slate-800 bg-slate-900/40 p-3"
+              class="rounded-md border border-default bg-default/40 p-3"
             />
 
             <div
               v-for="repo in github.repos"
               :key="repo.githubId"
-              class="rounded-md border border-slate-800 bg-slate-900/60"
+              class="rounded-md border border-default bg-default/60"
             >
               <div class="flex items-center justify-between gap-2 px-3 py-2">
                 <button
@@ -496,9 +493,9 @@ async function merge(pr: GitHubPullRequest) {
                         ? 'i-lucide-chevron-down'
                         : 'i-lucide-chevron-right'
                     "
-                    class="h-4 w-4 shrink-0 text-slate-500"
+                    class="h-4 w-4 shrink-0 text-dimmed"
                   />
-                  <span class="truncate text-sm text-slate-200">
+                  <span class="truncate text-sm text-default">
                     {{ repo.owner }}/{{ repo.name }}
                   </span>
                   <UBadge v-if="repo.private" color="neutral" variant="subtle" size="sm">
@@ -506,13 +503,13 @@ async function merge(pr: GitHubPullRequest) {
                   </UBadge>
                 </button>
                 <div class="flex items-center gap-2">
-                  <span v-if="repo.defaultBranch" class="text-[11px] text-slate-500">
+                  <span v-if="repo.defaultBranch" class="text-[11px] text-dimmed">
                     {{ repo.defaultBranch }}
                   </span>
                   <ULink
                     :to="github.repoUrl(repo.githubId) ?? '#'"
                     target="_blank"
-                    class="text-[11px] text-indigo-400 hover:underline"
+                    class="text-[11px] text-primary hover:underline"
                   >
                     {{ t('github.panel.open') }}
                   </ULink>
@@ -521,21 +518,21 @@ async function merge(pr: GitHubPullRequest) {
 
               <div
                 v-if="expandedRepo === repo.githubId"
-                class="space-y-2 border-t border-slate-800 px-3 py-2"
+                class="space-y-2 border-t border-default px-3 py-2"
               >
                 <div
                   v-for="b in github.branches[repo.githubId] ?? []"
                   :key="b.name"
                   class="flex items-center justify-between gap-2 text-[12px]"
                 >
-                  <span class="flex items-center gap-1.5 truncate text-slate-300">
-                    <UIcon name="i-lucide-git-branch" class="h-3.5 w-3.5 text-slate-500" />
+                  <span class="flex items-center gap-1.5 truncate text-toned">
+                    <UIcon name="i-lucide-git-branch" class="h-3.5 w-3.5 text-dimmed" />
                     {{ b.name }}
                     <UBadge v-if="b.protected" color="warning" variant="subtle" size="sm">
                       {{ t('github.panel.protected') }}
                     </UBadge>
                   </span>
-                  <code class="text-[10px] text-slate-500">{{ b.headSha.slice(0, 7) }}</code>
+                  <code class="text-[10px] text-dimmed">{{ b.headSha.slice(0, 7) }}</code>
                 </div>
 
                 <!-- new branch -->
@@ -591,7 +588,7 @@ async function merge(pr: GitHubPullRequest) {
 
             <div
               v-if="showPrForm"
-              class="space-y-2 rounded-md border border-slate-700 bg-slate-900/80 p-3"
+              class="space-y-2 rounded-md border border-muted bg-default/80 p-3"
             >
               <UFormField :label="t('github.panel.repository')">
                 <UDropdownMenu :items="repoMenu" :content="{ align: 'start' }">
@@ -635,19 +632,19 @@ async function merge(pr: GitHubPullRequest) {
               </div>
             </div>
 
-            <p v-if="!github.pulls.length" class="py-4 text-sm text-slate-400">
+            <p v-if="!github.pulls.length" class="py-4 text-sm text-muted">
               {{ t(pullTerms.none) }}
             </p>
             <div
               v-for="pr in github.pulls"
               :key="`${pr.repoGithubId}-${pr.number}`"
-              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">
-                  <span class="text-slate-500">#{{ pr.number }}</span> {{ pr.title }}
+                <div class="truncate text-sm text-default">
+                  <span class="text-dimmed">#{{ pr.number }}</span> {{ pr.title }}
                 </div>
-                <div class="truncate text-[11px] text-slate-500">
+                <div class="truncate text-[11px] text-dimmed">
                   {{ github.repoFor(pr.repoGithubId)?.name }} · {{ pr.headRef }} → {{ pr.baseRef }}
                 </div>
               </div>
@@ -672,7 +669,7 @@ async function merge(pr: GitHubPullRequest) {
                 <ULink
                   :to="github.pullUrl(pr) ?? '#'"
                   target="_blank"
-                  class="text-[11px] text-indigo-400 hover:underline"
+                  class="text-[11px] text-primary hover:underline"
                 >
                   {{ t('github.panel.open') }}
                 </ULink>
@@ -682,19 +679,19 @@ async function merge(pr: GitHubPullRequest) {
 
           <!-- issues -->
           <section v-else class="space-y-2">
-            <p v-if="!github.issues.length" class="py-4 text-sm text-slate-400">
+            <p v-if="!github.issues.length" class="py-4 text-sm text-muted">
               {{ t('github.panel.noIssues') }}
             </p>
             <div
               v-for="issue in github.issues"
               :key="`${issue.repoGithubId}-${issue.number}`"
-              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">
-                  <span class="text-slate-500">#{{ issue.number }}</span> {{ issue.title }}
+                <div class="truncate text-sm text-default">
+                  <span class="text-dimmed">#{{ issue.number }}</span> {{ issue.title }}
                 </div>
-                <div class="truncate text-[11px] text-slate-500">
+                <div class="truncate text-[11px] text-dimmed">
                   {{ github.repoFor(issue.repoGithubId)?.name }}
                   <span v-if="issue.labels.length">· {{ issue.labels.join(', ') }}</span>
                 </div>
@@ -710,7 +707,7 @@ async function merge(pr: GitHubPullRequest) {
                 <ULink
                   :to="github.issueUrl(issue) ?? '#'"
                   target="_blank"
-                  class="text-[11px] text-indigo-400 hover:underline"
+                  class="text-[11px] text-primary hover:underline"
                 >
                   {{ t('github.panel.open') }}
                 </ULink>

package/app/components/github/RepoTreeBrowser.vue

@@ -179,7 +179,7 @@ watch(
         {{ t('github.repoTree.root') }}
       </UButton>
       <template v-for="crumb in breadcrumbs" :key="crumb.path">
-        <span class="text-slate-600">/</span>
+        <span class="text-app-600">/</span>
         <UButton
           size="xs"
           variant="ghost"
@@ -193,14 +193,14 @@ watch(
     </div>
 
     <!-- listing -->
-    <div class="max-h-56 overflow-auto rounded border border-slate-800">
-      <div v-if="loading" class="p-3 text-sm text-slate-400">
+    <div class="max-h-56 overflow-auto rounded border border-default">
+      <div v-if="loading" class="p-3 text-sm text-muted">
         {{ t('github.repoTree.loading') }}
       </div>
-      <div v-else-if="isEmpty" class="p-3 text-sm text-slate-400">
+      <div v-else-if="isEmpty" class="p-3 text-sm text-muted">
         {{ mode === 'dir' ? t('github.repoTree.noSubdirectories') : t('github.repoTree.empty') }}
       </div>
-      <ul v-else class="divide-y divide-slate-800">
+      <ul v-else class="divide-y divide-default">
         <li
           v-for="entry in dirEntries"
           :key="entry.path"
@@ -208,22 +208,22 @@ watch(
         >
           <button
             type="button"
-            class="flex items-center gap-2 truncate text-sm text-slate-200 hover:text-primary-400"
+            class="flex items-center gap-2 truncate text-sm text-default hover:text-primary"
             @click="browseTo(entry.path)"
           >
-            <UIcon name="i-lucide-folder" class="h-4 w-4 shrink-0 text-amber-400" />
+            <UIcon name="i-lucide-folder" class="h-4 w-4 shrink-0 text-app-warning-400" />
             <span class="truncate">{{ entry.name }}</span>
           </button>
           <span
             v-if="clashes(entry)"
-            class="flex shrink-0 items-center gap-1 text-xs text-amber-400"
+            class="flex shrink-0 items-center gap-1 text-xs text-app-warning-400"
           >
             <UIcon name="i-lucide-circle-alert" class="h-3.5 w-3.5" />
             {{ t('github.repoTree.exists') }}
           </span>
           <span
             v-else-if="mode === 'dir' && isAdded(entry.path)"
-            class="flex shrink-0 items-center gap-1 text-xs text-slate-500"
+            class="flex shrink-0 items-center gap-1 text-xs text-dimmed"
           >
             <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
             {{ t('github.repoTree.added') }}
@@ -242,7 +242,7 @@ watch(
           <!-- multiple: a bulk header so a whole directory of documents is one click -->
           <li
             v-if="selectableFiles.length > 1"
-            class="flex items-center gap-2 bg-slate-900/60 px-3 py-1.5"
+            class="flex items-center gap-2 bg-default/60 px-3 py-1.5"
           >
             <UCheckbox
               :model-value="allSelected"
@@ -258,7 +258,7 @@ watch(
             />
             <button
               type="button"
-              class="text-xs text-slate-400 hover:text-primary-400"
+              class="text-xs text-muted hover:text-primary"
               @click="toggleAllFiles"
             >
               {{
@@ -284,18 +284,18 @@ watch(
               />
               <button
                 type="button"
-                class="flex items-center gap-2 truncate text-sm hover:text-primary-400"
-                :class="isPicked(entry.path) ? 'text-primary-400' : 'text-slate-300'"
+                class="flex items-center gap-2 truncate text-sm hover:text-primary"
+                :class="isPicked(entry.path) ? 'text-primary' : 'text-toned'"
                 :disabled="isAdded(entry.path)"
                 @click="pick(entry.path)"
               >
-                <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-slate-400" />
+                <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-muted" />
                 <span class="truncate">{{ entry.name }}</span>
               </button>
             </div>
             <span
               v-if="isAdded(entry.path)"
-              class="flex shrink-0 items-center gap-1 text-xs text-slate-500"
+              class="flex shrink-0 items-center gap-1 text-xs text-dimmed"
             >
               <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
               {{ t('github.repoTree.added') }}
@@ -303,7 +303,7 @@ watch(
             <UIcon
               v-else-if="!multiple && isPicked(entry.path)"
               name="i-lucide-check"
-              class="h-4 w-4 shrink-0 text-primary-400"
+              class="h-4 w-4 shrink-0 text-primary"
             />
           </li>
         </template>
@@ -316,14 +316,14 @@ watch(
     <div v-if="placingNewDir" class="mt-2 flex items-center justify-between gap-2">
       <p
         class="min-w-0 truncate text-xs"
-        :class="nameTakenHere ? 'text-amber-400' : 'text-slate-400'"
+        :class="nameTakenHere ? 'text-app-warning-400' : 'text-muted'"
       >
         <template v-if="nameTakenHere">
           {{ t('github.repoTree.nameTaken', { name: newDirName }) }}
         </template>
         <template v-else>
           {{ t('github.repoTree.newDirTarget') }}
-          <code class="text-slate-200">{{ pickedPathFor(currentPath) }}</code>
+          <code class="text-default">{{ pickedPathFor(currentPath) }}</code>
         </template>
       </p>
       <UButton

package/app/components/humanTest/HumanTestWindow.vue

@@ -65,12 +65,12 @@ const ENV_STATUS_LABEL: Record<HumanTestEnvironmentStatus, string> = {
   torn_down: 'humanTest.envStatus.tornDown',
 }
 const ENV_STATUS_COLOR: Record<HumanTestEnvironmentStatus, string> = {
-  provisioning: 'text-amber-300',
-  ready: 'text-emerald-300',
-  failed: 'text-rose-300',
-  expired: 'text-slate-400',
-  tearing_down: 'text-slate-400',
-  torn_down: 'text-slate-400',
+  provisioning: 'text-app-warning-300',
+  ready: 'text-app-success-300',
+  failed: 'text-app-error-300',
+  expired: 'text-muted',
+  tearing_down: 'text-muted',
+  torn_down: 'text-muted',
 }
 
 const PHASE_LABEL: Record<NonNullable<HumanTestStepState['phase']>, string> = {
@@ -150,7 +150,7 @@ const canDestroy = computed(
   <ResultWindowShell
     :open="open"
     icon="i-lucide-user-check"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="headerTitle"
     :subtitle="phase ? t(PHASE_LABEL[phase]) : t('humanTest.subtitle')"
     width="3xl"
@@ -159,7 +159,7 @@ const canDestroy = computed(
     <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4">
       <div
         v-if="!ht"
-        class="flex flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        class="flex flex-col items-center justify-center gap-2 py-10 text-center text-muted"
       >
         <UIcon name="i-lucide-user-check" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('humanTest.notStarted') }}</p>
@@ -167,8 +167,8 @@ const canDestroy = computed(
 
       <template v-else>
         <!-- Environment -->
-        <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-4">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        <section class="rounded-lg border border-default bg-default/60 p-4">
+          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('humanTest.environment.heading') }}
           </h3>
           <div v-if="env" class="space-y-2">
@@ -187,22 +187,22 @@ const canDestroy = computed(
               :href="env.url"
               target="_blank"
               rel="noopener"
-              class="inline-flex items-center gap-1.5 break-all text-[13px] text-sky-300 hover:underline"
+              class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
             >
               <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
               {{ env.url }}
             </a>
-            <p v-else class="text-[12px] italic text-slate-500">
+            <p v-else class="text-[12px] italic text-dimmed">
               {{ t('humanTest.environment.noUrl') }}
             </p>
-            <p v-if="env.expiresAt" class="text-[11px] text-slate-500">
+            <p v-if="env.expiresAt" class="text-[11px] text-dimmed">
               {{ t('humanTest.environment.expires', { date: d(new Date(env.expiresAt), 'long') }) }}
             </p>
           </div>
-          <p v-else class="text-[12px] text-amber-300/90">
+          <p v-else class="text-[12px] text-app-warning-300/90">
             {{ ht.degradedReason ?? t('humanTest.environment.none') }}
           </p>
-          <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-amber-300/90">
+          <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-app-warning-300/90">
             {{ ht.degradedReason }}
           </p>
 
@@ -249,23 +249,20 @@ const canDestroy = computed(
         <!-- Working state -->
         <p
           v-if="working"
-          class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
+          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-[12px] text-toned"
         >
-          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-amber-300" />
+          <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
           {{ phase ? t(PHASE_LABEL[phase]) : '' }}
         </p>
 
         <!-- Findings / fix -->
-        <section
-          v-if="awaitingHuman"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
-        >
+        <section v-if="awaitingHuman" class="rounded-lg border border-default bg-default/60 p-4">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('humanTest.fix.heading') }}
             </h3>
             <button
-              class="text-[12px] text-slate-400 hover:text-slate-200"
+              class="text-[12px] text-muted hover:text-default"
               @click="showFindings = !showFindings"
             >
               {{ showFindings ? t('humanTest.fix.cancel') : t('humanTest.fix.requestFix') }}
@@ -276,7 +273,7 @@ const canDestroy = computed(
               v-model="findings"
               rows="4"
               :placeholder="t('humanTest.fix.placeholder')"
-              class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
+              class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
             />
             <UButton
               size="sm"
@@ -295,19 +292,19 @@ const canDestroy = computed(
         <!-- Rounds history -->
         <section
           v-if="ht.rounds && ht.rounds.length"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+          class="rounded-lg border border-default bg-default/60 p-4"
         >
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('humanTest.history.heading', { count: ht.attempts }, ht.attempts) }}
           </h3>
           <ol class="space-y-2">
             <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
               <UIcon
                 :name="r.kind === 'fix' ? 'i-lucide-wrench' : 'i-lucide-git-merge'"
-                class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400"
+                class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted"
               />
               <div class="min-w-0 flex-1">
-                <span class="text-slate-200">{{
+                <span class="text-default">{{
                   r.kind === 'fix'
                     ? t('humanTest.history.fixRequested')
                     : t('humanTest.history.pulledMain')
@@ -316,10 +313,10 @@ const canDestroy = computed(
                   class="ms-1.5 rounded px-1 text-[10px] uppercase"
                   :class="
                     r.outcome === 'completed'
-                      ? 'bg-emerald-500/15 text-emerald-300'
+                      ? 'bg-app-success-500/15 text-app-success-300'
                       : r.outcome === 'failed'
-                        ? 'bg-rose-500/15 text-rose-300'
-                        : 'bg-slate-500/15 text-slate-300'
+                        ? 'bg-app-error-500/15 text-app-error-300'
+                        : 'bg-app-500/15 text-toned'
                   "
                 >
                   {{
@@ -328,7 +325,7 @@ const canDestroy = computed(
                       : t('humanTest.roundOutcome.inProgress')
                   }}
                 </span>
-                <p v-if="r.findings" class="leading-snug text-slate-400">{{ r.findings }}</p>
+                <p v-if="r.findings" class="leading-snug text-muted">{{ r.findings }}</p>
               </div>
             </li>
           </ol>
@@ -339,7 +336,7 @@ const canDestroy = computed(
     <!-- Footer: the primary confirm action -->
     <footer
       v-if="ht"
-      class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+      class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
       <StepRunMeta
         v-if="step"

package/app/components/initiative/InitiativePlanNotice.vue

@@ -39,19 +39,19 @@ const { t } = useI18n()
 
 <template>
   <section
-    class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3.5"
+    class="mb-4 rounded-lg border border-app-warning-500/40 bg-app-warning-500/10 p-3.5"
     data-testid="initiative-plan-notice"
   >
     <header class="flex items-start gap-2.5">
-      <UIcon name="i-lucide-clipboard-check" class="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
+      <UIcon name="i-lucide-clipboard-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300" />
       <div class="min-w-0 flex-1">
-        <h3 class="text-[13px] font-semibold text-amber-200">
+        <h3 class="text-[13px] font-semibold text-app-warning-200">
           {{ t('initiative.planReview.title') }}
         </h3>
-        <p class="mt-0.5 text-[12px] leading-relaxed text-amber-100/80">
+        <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
           {{ t('initiative.planReview.body') }}
         </p>
-        <p class="mt-2 text-[12px] leading-relaxed text-amber-100/70">
+        <p class="mt-2 text-[12px] leading-relaxed text-app-warning-100/70">
           {{ t('initiative.planReview.noDocument') }}
           <template v-if="hasSections">
             {{ t('initiative.planReview.noDocumentSections') }}