@cat-factory/app 0.302.2 → 0.303.0

package/app/components/gates/GateResultView.vue

@@ -143,37 +143,37 @@ const STATUS_META = computed<
     label: t('gates.status.passed'),
     badge: 'success',
     icon: 'i-lucide-circle-check',
-    text: 'text-emerald-300',
+    text: 'text-app-success-300',
   },
   'gave-up': {
     label: t('gates.status.gaveUp'),
     badge: 'error',
     icon: 'i-lucide-circle-x',
-    text: 'text-rose-300',
+    text: 'text-app-error-300',
   },
   fixing: {
     label: t('gates.status.fixing'),
     badge: 'warning',
     icon: 'i-lucide-loader',
-    text: 'text-amber-300',
+    text: 'text-app-warning-300',
   },
   failing: {
     label: t('gates.status.failing'),
     badge: 'error',
     icon: 'i-lucide-circle-x',
-    text: 'text-rose-300',
+    text: 'text-app-error-300',
   },
   pending: {
     label: t('gates.status.pending'),
     badge: 'neutral',
     icon: 'i-lucide-clock',
-    text: 'text-slate-300',
+    text: 'text-toned',
   },
   checking: {
     label: t('gates.status.checking'),
     badge: 'neutral',
     icon: 'i-lucide-loader',
-    text: 'text-slate-300',
+    text: 'text-toned',
   },
 }))
 
@@ -191,7 +191,7 @@ const conflictVerdict = computed(() => {
   <ResultWindowShell
     :open="open"
     :icon="meta.icon"
-    icon-class="bg-sky-500/15 text-sky-300"
+    icon-class="bg-app-info-500/15 text-app-info-300"
     :title="headerTitle"
     :subtitle="subtitle"
     :step-ref="{ instanceId, stepIndex }"
@@ -214,11 +214,11 @@ const conflictVerdict = computed(() => {
       <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
         <div
           v-if="!gate"
-          class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+          class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
         >
           <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('gates.noActivity') }}</p>
-          <p class="max-w-sm text-[11px] text-slate-500">
+          <p class="max-w-sm text-[11px] text-dimmed">
             {{ t('gates.noActivityHint') }}
           </p>
         </div>
@@ -227,10 +227,13 @@ const conflictVerdict = computed(() => {
           <!-- Passed -->
           <div
             v-if="status === 'passed'"
-            class="flex items-start gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2.5"
+            class="flex items-start gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2.5"
           >
-            <UIcon name="i-lucide-circle-check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
-            <p class="text-[13px] leading-relaxed text-emerald-200">
+            <UIcon
+              name="i-lucide-circle-check"
+              class="mt-0.5 h-4 w-4 shrink-0 text-app-success-400"
+            />
+            <p class="text-[13px] leading-relaxed text-app-success-200">
               {{ step?.output || (isCi ? t('gates.passedCi') : t('gates.passedConflicts')) }}
             </p>
           </div>
@@ -238,10 +241,10 @@ const conflictVerdict = computed(() => {
           <!-- Human review: approval progress, the feedback being fixed, freeform fix box -->
           <template v-else-if="isHumanReview">
             <div
-              class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="flex items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
-              <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-violet-300" />
-              <span class="text-[13px] text-slate-200">
+              <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-app-secondary-300" />
+              <span class="text-[13px] text-default">
                 {{
                   t(
                     'gates.humanReview.approvals',
@@ -260,10 +263,10 @@ const conflictVerdict = computed(() => {
             </div>
             <div
               v-if="gate.lastFailureSummary"
-              class="relative mt-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="relative mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-slate-300">
+              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
@@ -272,7 +275,7 @@ const conflictVerdict = computed(() => {
               :href="prUrl"
               target="_blank"
               rel="noopener"
-              class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+              class="mt-2 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.humanReview.reviewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
@@ -280,10 +283,10 @@ const conflictVerdict = computed(() => {
 
             <!-- Freeform fix request: dispatch the fixer now with these instructions. -->
             <section v-if="status !== 'gave-up'" class="mt-4">
-              <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+              <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
                 {{ t('gates.humanReview.requestFixHeading') }}
               </h3>
-              <p class="mb-2 text-[11px] leading-relaxed text-slate-500">
+              <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
                 {{ t('gates.humanReview.requestFixDescription') }}
               </p>
               <textarea
@@ -291,7 +294,7 @@ const conflictVerdict = computed(() => {
                 rows="3"
                 :disabled="fixBusy"
                 :placeholder="t('gates.humanReview.requestFixPlaceholder')"
-                class="w-full resize-y rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-violet-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/60"
+                class="w-full resize-y rounded-md border border-default bg-app-950/60 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-secondary-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
               />
               <div class="mt-2 flex justify-end">
                 <UButton
@@ -313,30 +316,30 @@ const conflictVerdict = computed(() => {
 
           <!-- CI: failing checks -->
           <template v-else-if="isCi">
-            <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('gates.ci.failingChecks') }}
             </h3>
             <GateFailingCheckList v-if="failingChecks.length" :checks="failingChecks" />
-            <p v-else class="text-[13px] leading-relaxed text-slate-300">
+            <p v-else class="text-[13px] leading-relaxed text-toned">
               {{ gate.lastFailureSummary || t('gates.ci.failureFallback') }}
             </p>
           </template>
 
           <!-- Doc quality: the deterministic structural findings the gate raised -->
           <template v-else-if="isDocQuality">
-            <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('gates.docQuality.findings') }}
             </h3>
             <div
               v-if="gate.lastFailureSummary"
-              class="relative rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="relative rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-slate-300">
+              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
-            <p v-else class="text-[13px] leading-relaxed text-slate-300">
+            <p v-else class="text-[13px] leading-relaxed text-toned">
               {{ t('gates.docQuality.findingsFallback') }}
             </p>
             <a
@@ -344,7 +347,7 @@ const conflictVerdict = computed(() => {
               :href="prUrl"
               target="_blank"
               rel="noopener"
-              class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+              class="mt-2 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.docQuality.viewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
@@ -353,28 +356,28 @@ const conflictVerdict = computed(() => {
 
           <!-- Conflicts: verdict + the resolver's account of what it left -->
           <template v-else>
-            <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('gates.conflicts.mergeability') }}
             </h3>
             <div
-              class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="flex items-center gap-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <UIcon
                 :name="STATUS_META[status].icon"
                 class="h-4 w-4 shrink-0"
                 :class="STATUS_META[status].text"
               />
-              <span class="text-[13px] text-slate-200">{{ conflictVerdict }}</span>
+              <span class="text-[13px] text-default">{{ conflictVerdict }}</span>
             </div>
             <!-- GitHub's API reports mergeability as a single bit (no file list), but the
                      conflict resolver discovers the conflicting files in the container and
                      reports them back — surface that account here. -->
             <div
               v-if="gate.lastFailureSummary"
-              class="relative mt-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+              class="relative mt-2 rounded-md border border-default bg-app-950/40 px-3 py-2"
             >
               <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
-              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-slate-300">
+              <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-toned">
                 {{ gate.lastFailureSummary }}
               </p>
             </div>
@@ -383,7 +386,7 @@ const conflictVerdict = computed(() => {
               :href="prUrl"
               target="_blank"
               rel="noopener"
-              class="mt-2 inline-flex items-center gap-1 text-[12px] text-sky-300 hover:text-sky-200 hover:underline"
+              class="mt-2 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
             >
               {{ t('gates.conflicts.viewPr') }}
               <UIcon name="i-lucide-external-link" class="h-3 w-3" />
@@ -392,14 +395,14 @@ const conflictVerdict = computed(() => {
 
           <!-- Attempt history (both gates): what each helper run did and how it ended. -->
           <section v-if="attempts.length" class="mt-5">
-            <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('gates.attemptsHeading', { helper: helperMeta.label }) }}
             </h3>
             <ol class="space-y-2">
               <li
                 v-for="a in attempts"
                 :key="a.attempt"
-                class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+                class="rounded-md border border-default bg-app-950/40 px-3 py-2"
               >
                 <AttemptEntryHeader
                   :label="t('gates.attempt', { number: a.attempt })"
@@ -415,7 +418,7 @@ const conflictVerdict = computed(() => {
                   v-if="a.instructions || (a.failingChecks && a.failingChecks.length)"
                   class="mt-1.5"
                 >
-                  <p class="text-[11px] text-slate-500">
+                  <p class="text-[11px] text-dimmed">
                     {{ t('gates.attemptInstructions', { helper: helperMeta.label }) }}
                   </p>
                   <GateFailingCheckList
@@ -426,17 +429,17 @@ const conflictVerdict = computed(() => {
                   />
                   <p
                     v-else-if="a.instructions"
-                    class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-300"
+                    class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-toned"
                   >
                     {{ a.instructions }}
                   </p>
                 </div>
                 <!-- The helper's own report of what it did / what remains. -->
                 <template v-if="a.summary">
-                  <p class="mt-1.5 text-[11px] text-slate-500">
+                  <p class="mt-1.5 text-[11px] text-dimmed">
                     {{ t('gates.attemptReport', { helper: helperMeta.label }) }}
                   </p>
-                  <p class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400">
+                  <p class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
                     {{ a.summary }}
                   </p>
                 </template>
@@ -448,10 +451,10 @@ const conflictVerdict = computed(() => {
 
       <!-- Sidebar: gate state -->
       <aside
-        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="gate">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('gates.sidebar.state') }}
           </h4>
           <div class="flex items-center gap-2 text-[13px]">
@@ -465,10 +468,10 @@ const conflictVerdict = computed(() => {
         </div>
 
         <div v-if="gate">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ helperMeta.label }}
           </h4>
-          <p class="text-[12px] text-slate-300">
+          <p class="text-[12px] text-toned">
             <!-- The human-review gate's budget is effectively unbounded (it waits for a human
                      indefinitely), so render a plain round count rather than "0/9007199254740991". -->
             <template v-if="isHumanReview">
@@ -493,10 +496,10 @@ const conflictVerdict = computed(() => {
         </div>
 
         <div v-if="shortSha">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ t('gates.sidebar.gatedCommit') }}
           </h4>
-          <p class="font-mono text-[12px] text-slate-300">{{ shortSha }}</p>
+          <p class="font-mono text-[12px] text-toned">{{ shortSha }}</p>
         </div>
 
         <!-- Shared run metadata + embedded observability (model, run id, timing,
@@ -511,7 +514,7 @@ const conflictVerdict = computed(() => {
           :failure-at="instance?.failure?.occurredAt"
         />
 
-        <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
+        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
           {{ t('gates.sidebar.footer', { helper: helperMeta.label }) }}
         </p>
       </aside>

package/app/components/github/AddServiceFromRepoModal.vue

@@ -442,7 +442,7 @@ function done() {
   <UModal v-model:open="open" :title="t('github.addService.title')" :ui="{ content: 'max-w-xl' }">
     <template #body>
       <div class="space-y-6">
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{
             introProvider
               ? t('vcs.addService.intro', { provider: VCS_PROVIDER_LABELS[introProvider] })
@@ -454,11 +454,11 @@ function done() {
              offer whichever connect methods the deployment serves (never just the App) -->
         <div
           v-if="needsConnection"
-          class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+          class="space-y-3 rounded-md border border-app-warning-500/30 bg-app-warning-500/5 p-3"
         >
           <div class="flex items-start gap-2">
-            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
-            <p class="text-sm text-amber-200/90">
+            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
+            <p class="text-sm text-app-warning-200/90">
               {{ t('vcs.addService.connectFirst') }}
             </p>
           </div>
@@ -531,9 +531,9 @@ function done() {
 
             <div
               v-if="isMonorepo"
-              class="space-y-3 rounded-md border border-slate-700/60 bg-slate-900/40 p-3"
+              class="space-y-3 rounded-md border border-muted/60 bg-default/40 p-3"
             >
-              <p class="text-xs text-slate-400">
+              <p class="text-xs text-muted">
                 {{ t('github.addService.monorepoBrowseHint') }}
               </p>
               <RepoTreeBrowser
@@ -547,20 +547,20 @@ function done() {
 
               <!-- the selection cart + the add action sit right beside the tree, so the
                    picked services and the button that adds them are never scrolled apart -->
-              <div class="space-y-2 rounded-md border border-slate-800 bg-slate-950/40 p-2.5">
-                <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              <div class="space-y-2 rounded-md border border-default bg-app-950/40 p-2.5">
+                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
                   {{ t('github.addService.selectedServices') }}
                 </p>
                 <div v-if="selectedDirectories.length" class="flex flex-wrap gap-1.5">
                   <span
                     v-for="dir in selectedDirectories"
                     :key="dir"
-                    class="inline-flex items-center gap-1 rounded bg-slate-800 px-2 py-0.5 text-xs text-slate-200"
+                    class="inline-flex items-center gap-1 rounded bg-elevated px-2 py-0.5 text-xs text-default"
                   >
-                    <code class="text-slate-200">{{ dir }}</code>
+                    <code class="text-default">{{ dir }}</code>
                     <button
                       type="button"
-                      class="text-slate-400 hover:text-slate-100"
+                      class="text-muted hover:text-app-100"
                       :aria-label="t('github.addService.removeService', { directory: dir })"
                       @click="removeSelected(dir)"
                     >
@@ -568,7 +568,7 @@ function done() {
                     </button>
                   </span>
                 </div>
-                <p v-else class="text-xs text-slate-500">
+                <p v-else class="text-xs text-dimmed">
                   {{ t('github.addService.noServicesSelected') }}
                 </p>
 
@@ -617,10 +617,10 @@ function done() {
           <!-- just-added service: configure it with the same controls as the inspector -->
           <div
             v-if="configuredBlock"
-            class="space-y-4 rounded-md border border-emerald-900/50 bg-emerald-950/20 p-3"
+            class="space-y-4 rounded-md border border-app-success-900/50 bg-app-success-950/20 p-3"
           >
             <div
-              class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-400"
+              class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-success-400"
             >
               <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
               {{ t('github.addService.addedConfigure', { title: configuredBlock.title }) }}

package/app/components/github/BranchProtectionPreflight.vue

@@ -48,9 +48,9 @@ const exposedCount = computed(
 )
 
 const STATE_STYLE: Record<BranchProtectionStateValue, string> = {
-  unprotected: 'text-rose-300',
-  unknown: 'text-amber-300',
-  protected: 'text-emerald-400',
+  unprotected: 'text-app-error-300',
+  unknown: 'text-app-warning-300',
+  protected: 'text-app-success-400',
 }
 
 // Exhaustive Records of LITERAL keys, not an assembled `\`…\${state}\`` lookup: the typed-key
@@ -115,8 +115,8 @@ async function check() {
 
 <template>
   <section class="space-y-2" data-testid="branch-protection-preflight">
-    <h3 class="text-sm font-semibold text-slate-200">{{ t('vcs.branchProtection.heading') }}</h3>
-    <p class="text-[11px] text-slate-400">{{ t('vcs.branchProtection.body') }}</p>
+    <h3 class="text-sm font-semibold text-default">{{ t('vcs.branchProtection.heading') }}</h3>
+    <p class="text-[11px] text-muted">{{ t('vcs.branchProtection.body') }}</p>
 
     <UButton
       color="neutral"
@@ -131,7 +131,7 @@ async function check() {
     </UButton>
 
     <div v-if="failure" class="space-y-1" data-testid="branch-protection-failure">
-      <p class="text-xs text-rose-400">{{ t(failure.descriptionKey) }}</p>
+      <p class="text-xs text-app-error-400">{{ t(failure.descriptionKey) }}</p>
       <!-- The raw prose stays reachable, never dropped: the backend's messages here name the
            operator remedy, and the request id is the join to the one server log line that
            explains it. One click away, so it is never what a user is shown FIRST. -->
@@ -146,7 +146,7 @@ async function check() {
       >
         {{ t('errors.generic.showDetail') }}
       </UButton>
-      <p v-if="showFailureDetail" class="font-mono text-[10px] break-all text-slate-500">
+      <p v-if="showFailureDetail" class="font-mono text-[10px] break-all text-dimmed">
         {{ failure.detail }}
       </p>
     </div>
@@ -155,7 +155,7 @@ async function check() {
          would otherwise read exactly like a clean bill of health. -->
     <p
       v-else-if="report && report.capability === 'unavailable'"
-      class="text-xs text-amber-300"
+      class="text-xs text-app-warning-300"
       data-testid="branch-protection-unavailable"
     >
       {{ t('vcs.branchProtection.unavailable') }}
@@ -164,7 +164,7 @@ async function check() {
     <template v-else-if="report">
       <p
         class="text-xs"
-        :class="exposedCount ? 'text-rose-300' : 'text-emerald-400'"
+        :class="exposedCount ? 'text-app-error-300' : 'text-app-success-400'"
         data-testid="branch-protection-summary"
       >
         {{
@@ -178,15 +178,15 @@ async function check() {
         <li
           v-for="row in rows"
           :key="row.repoGithubId"
-          class="rounded-md border border-slate-800 bg-slate-900/40 px-2 py-1.5"
+          class="rounded-md border border-default bg-default/40 px-2 py-1.5"
         >
           <div class="flex items-baseline justify-between gap-2">
-            <span class="font-mono text-xs text-slate-300">{{ row.owner }}/{{ row.name }}</span>
+            <span class="font-mono text-xs text-toned">{{ row.owner }}/{{ row.name }}</span>
             <span class="text-[11px]" :class="STATE_STYLE[row.protection.state]">
               {{ STATE_LABEL[row.protection.state]() }}
             </span>
           </div>
-          <p class="text-[10px] text-slate-500">
+          <p class="text-[10px] text-dimmed">
             {{ row.defaultBranch }}<span v-if="detailLine(row)"> — {{ detailLine(row) }}</span>
           </p>
         </li>
@@ -194,7 +194,7 @@ async function check() {
 
       <!-- A cap that truncated silently would read as "these are all your repositories", which
            on a security report is the same failure as calling an unprobed repo protected. -->
-      <p v-if="report.omittedRepos > 0" class="text-[11px] text-amber-300">
+      <p v-if="report.omittedRepos > 0" class="text-[11px] text-app-warning-300">
         {{ t('vcs.branchProtection.omitted', { count: report.omittedRepos }, report.omittedRepos) }}
       </p>
     </template>

package/app/components/github/GitHubConnect.vue

@@ -73,7 +73,7 @@ async function connectManually() {
     <!-- discovered installations: pick one the App is already on -->
     <section class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-medium uppercase tracking-wide text-slate-500">
+        <span class="text-xs font-medium uppercase tracking-wide text-dimmed">
           {{ t('github.connect.yourInstallations') }}
         </span>
         <UButton
@@ -90,7 +90,7 @@ async function connectManually() {
 
       <div
         v-if="github.loadingInstallations && !github.installations.length"
-        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.connect.lookingForInstallations') }}
@@ -98,7 +98,7 @@ async function connectManually() {
 
       <p
         v-else-if="!github.installations.length"
-        class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+        class="rounded-md border border-dashed border-default px-3 py-3 text-sm text-muted"
       >
         {{ t('github.connect.noInstallations') }}
       </p>
@@ -106,7 +106,7 @@ async function connectManually() {
       <div
         v-for="inst in github.installations"
         :key="inst.installationId"
-        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 min-w-0 items-center gap-2">
           <UAvatar
@@ -115,10 +115,10 @@ async function connectManually() {
             size="2xs"
             :alt="inst.accountLogin"
           />
-          <UIcon v-else name="i-lucide-github" class="h-4 w-4 text-slate-400" />
+          <UIcon v-else name="i-lucide-github" class="h-4 w-4 text-muted" />
           <div class="min-w-0">
-            <div class="truncate text-sm text-slate-200">{{ inst.accountLogin }}</div>
-            <div class="text-[11px] text-slate-500">
+            <div class="truncate text-sm text-default">{{ inst.accountLogin }}</div>
+            <div class="text-[11px] text-dimmed">
               {{
                 t('github.connect.installationMeta', {
                   targetType: inst.targetType,

package/app/components/github/GitHubOnboarding.vue

@@ -24,15 +24,15 @@ const title = computed(() =>
 
 <template>
   <div
-    class="flex h-full w-full items-center justify-center overflow-y-auto bg-slate-950 text-slate-100"
+    class="flex h-full w-full items-center justify-center overflow-y-auto bg-app-950 text-app-100"
   >
     <div
-      class="my-8 w-full max-w-md rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
+      class="my-8 w-full max-w-md rounded-xl border border-default bg-default/80 p-8 backdrop-blur"
     >
       <div class="mb-5 text-center">
-        <UIcon :name="icon" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">{{ title }}</h1>
-        <p class="text-sm text-slate-400">
+        <UIcon :name="icon" class="mx-auto mb-3 h-10 w-10 text-primary" />
+        <h1 class="mb-1 text-lg font-semibold text-highlighted">{{ title }}</h1>
+        <p class="text-sm text-muted">
           {{ t('vcs.onboarding.intro') }}
         </p>
       </div>
@@ -41,10 +41,10 @@ const title = computed(() =>
 
       <p
         v-if="auth.required && auth.user"
-        class="mt-6 border-t border-slate-800 pt-4 text-center text-xs text-slate-500"
+        class="mt-6 border-t border-default pt-4 text-center text-xs text-dimmed"
       >
         {{ t('github.onboarding.signedInAs', { login: auth.user.login }) }} ·
-        <button class="text-slate-300 underline-offset-2 hover:underline" @click="auth.logout()">
+        <button class="text-toned underline-offset-2 hover:underline" @click="auth.logout()">
           {{ t('github.onboarding.signOut') }}
         </button>
       </p>