@cat-factory/app 0.302.2 → 0.303.0

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -357,20 +357,20 @@ async function save() {
           <div class="space-y-6">
             <!-- Run-timing escalation -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.waiting.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 <i18n-t keypath="settings.workspaceSettings.waiting.body" tag="span" scope="global">
                   <template #overdue>
-                    <span class="text-error-400">{{
+                    <span class="text-app-error-400">{{
                       t('settings.workspaceSettings.waiting.overdue')
                     }}</span>
                   </template>
                 </i18n-t>
               </p>
               <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.waiting.escalateAfter') }}
                 </span>
                 <UInput
@@ -384,14 +384,14 @@ async function save() {
 
             <!-- Per-service running-task limit -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.taskLimit.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.taskLimit.body') }}
               </p>
               <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">{{
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
                   t('settings.workspaceSettings.taskLimit.mode')
                 }}</span>
                 <USelect
@@ -404,7 +404,7 @@ async function save() {
               </label>
 
               <label v-if="draft.taskLimitMode === 'shared'" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.taskLimit.maxRunning') }}
                 </span>
                 <UInput v-model.number="draft.taskLimitShared" type="number" :min="1" size="sm" />
@@ -412,7 +412,7 @@ async function save() {
 
               <div v-else-if="draft.taskLimitMode === 'per_type'" class="grid grid-cols-2 gap-3">
                 <label v-for="taskType in TASK_TYPES" :key="taskType" class="block">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                     {{ maxTaskTypeLabel(taskType) }}
                   </span>
                   <UInput
@@ -428,14 +428,14 @@ async function save() {
             <!-- The pre-dispatch input gate: the structural check of a task's own wording, run
                  before a run's first agent step is dispatched. -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.inputGate.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.inputGate.body') }}
               </p>
               <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">{{
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
                   t('settings.workspaceSettings.inputGate.mode')
                 }}</span>
                 <USelect
@@ -451,14 +451,14 @@ async function save() {
 
             <!-- Review-debt friction on task creation -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.reviewFriction.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.reviewFriction.body') }}
               </p>
               <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">{{
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
                   t('settings.workspaceSettings.reviewFriction.mode')
                 }}</span>
                 <USelect
@@ -471,7 +471,7 @@ async function save() {
               </label>
 
               <label v-if="draft.reviewFrictionMode !== 'off'" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.reviewFriction.warnCount') }}
                 </span>
                 <UInput
@@ -483,17 +483,17 @@ async function save() {
               </label>
 
               <div v-if="draft.reviewFrictionMode === 'enforce'" class="space-y-2">
-                <p class="text-[11px] text-slate-400">
+                <p class="text-[11px] text-muted">
                   {{ t('settings.workspaceSettings.reviewFriction.enforceHint') }}
                 </p>
                 <label class="flex items-center gap-2">
                   <USwitch v-model="draft.reviewFrictionBlockCountEnabled" size="sm" />
-                  <span class="text-[13px] text-slate-300">{{
+                  <span class="text-[13px] text-toned">{{
                     t('settings.workspaceSettings.reviewFriction.blockCountToggle')
                   }}</span>
                 </label>
                 <label v-if="draft.reviewFrictionBlockCountEnabled" class="block w-48">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                     {{ t('settings.workspaceSettings.reviewFriction.blockCount') }}
                   </span>
                   <UInput
@@ -505,12 +505,12 @@ async function save() {
                 </label>
                 <label class="flex items-center gap-2">
                   <USwitch v-model="draft.reviewFrictionBlockStuckEnabled" size="sm" />
-                  <span class="text-[13px] text-slate-300">{{
+                  <span class="text-[13px] text-toned">{{
                     t('settings.workspaceSettings.reviewFriction.blockStuckToggle')
                   }}</span>
                 </label>
                 <label v-if="draft.reviewFrictionBlockStuckEnabled" class="block w-48">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                     {{ t('settings.workspaceSettings.reviewFriction.blockStuckMinutes') }}
                   </span>
                   <UInput
@@ -525,15 +525,15 @@ async function save() {
 
             <!-- Agent observability -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.observability.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.observability.body') }}
               </p>
               <label class="flex items-center gap-2">
                 <USwitch v-model="draft.storeAgentContext" size="sm" />
-                <span class="text-sm text-slate-200">{{
+                <span class="text-sm text-default">{{
                   t('settings.workspaceSettings.observability.toggle')
                 }}</span>
               </label>
@@ -541,15 +541,15 @@ async function save() {
 
             <!-- Engine-maintained PR verification report -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.prReport.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.prReport.body') }}
               </p>
               <label class="flex items-center gap-2">
                 <USwitch v-model="draft.publishPrVerificationReport" size="sm" />
-                <span class="text-sm text-slate-200">{{
+                <span class="text-sm text-default">{{
                   t('settings.workspaceSettings.prReport.toggle')
                 }}</span>
               </label>
@@ -557,14 +557,14 @@ async function save() {
 
             <!-- Visual-confirmation artifact retention -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.retention.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.retention.body') }}
               </p>
               <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.retention.days') }}
                 </span>
                 <UInput
@@ -579,14 +579,14 @@ async function save() {
 
             <!-- What the board's Done swimlane keeps in view -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.doneLane.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.doneLane.body') }}
               </p>
               <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.doneLane.maxItems') }}
                 </span>
                 <UInput
@@ -598,17 +598,17 @@ async function save() {
                   data-testid="done-lane-max-items"
                 />
               </label>
-              <p v-if="draft.doneLaneMaxItems === 0" class="text-[11px] text-slate-500">
+              <p v-if="draft.doneLaneMaxItems === 0" class="text-[11px] text-dimmed">
                 {{ t('settings.workspaceSettings.doneLane.zeroHint') }}
               </p>
               <label class="flex items-center gap-2">
                 <UCheckbox v-model="draft.doneLaneRetentionEnabled" size="sm" />
-                <span class="text-[11px] text-slate-300">{{
+                <span class="text-[11px] text-toned">{{
                   t('settings.workspaceSettings.doneLane.ageToggle')
                 }}</span>
               </label>
               <label v-if="draft.doneLaneRetentionEnabled" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
                   {{ t('settings.workspaceSettings.doneLane.days') }}
                 </span>
                 <UInput
@@ -620,17 +620,17 @@ async function save() {
                   data-testid="done-lane-retention-days"
                 />
               </label>
-              <p class="text-[11px] text-slate-500">
+              <p class="text-[11px] text-dimmed">
                 {{ t('settings.workspaceSettings.doneLane.hidesOnlyHint') }}
               </p>
             </section>
 
             <!-- Run credential: the App installation vs. the initiator's own token -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.runCredential.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.runCredential.body') }}
               </p>
               <label class="flex items-center gap-2">
@@ -639,18 +639,18 @@ async function save() {
                   size="sm"
                   data-testid="allow-initiator-pat"
                 />
-                <span class="text-sm text-slate-200">{{
+                <span class="text-sm text-default">{{
                   t('settings.workspaceSettings.runCredential.toggle')
                 }}</span>
               </label>
-              <p v-if="!draft.allowInitiatorPat" class="text-[11px] text-amber-300">
+              <p v-if="!draft.allowInitiatorPat" class="text-[11px] text-app-warning-300">
                 {{ t('settings.workspaceSettings.runCredential.offHint') }}
               </p>
               <!-- Stated rather than read: the account floor lives behind an ACCOUNT-admin
                    endpoint, which a workspace admin may not hold, so probing it here would 403
                    for exactly the people this note is for. A static line sets the expectation
                    without pretending to report a value we cannot see. -->
-              <p v-if="draft.allowInitiatorPat" class="text-[11px] text-slate-500">
+              <p v-if="draft.allowInitiatorPat" class="text-[11px] text-dimmed">
                 {{ t('settings.workspaceSettings.runCredential.accountFloorNote') }}
               </p>
             </section>
@@ -659,10 +659,10 @@ async function save() {
                  It is a property of how this team fixes bugs rather than of any one hunt, which
                  is why it is a board setting and not a field on the expedition. -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.bugFishing.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.bugFishing.body') }}
               </p>
               <USelectMenu
@@ -677,15 +677,15 @@ async function save() {
 
             <!-- Kaizen agent -->
             <section class="space-y-2">
-              <h3 class="text-sm font-semibold text-slate-200">
+              <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.kaizen.heading') }}
               </h3>
-              <p class="text-[11px] text-slate-400">
+              <p class="text-[11px] text-muted">
                 {{ t('settings.workspaceSettings.kaizen.body') }}
               </p>
               <label class="flex items-center gap-2">
                 <USwitch v-model="draft.kaizenEnabled" size="sm" />
-                <span class="text-sm text-slate-200">{{
+                <span class="text-sm text-default">{{
                   t('settings.workspaceSettings.kaizen.toggle')
                 }}</span>
               </label>

package/app/components/skills/ReviewSkillQueue.vue

@@ -63,7 +63,7 @@ function toggle(id: string) {
 <template>
   <div>
     <div class="mb-1 flex items-center justify-between gap-2">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ t('skills.reviewQueue.label') }}
       </span>
       <UPopover v-model:open="open" :content="{ align: 'end' }">
@@ -87,8 +87,8 @@ function toggle(id: string) {
                   v-for="s in offered"
                   :key="s.id"
                   type="button"
-                  class="flex w-full items-start gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60 disabled:cursor-not-allowed disabled:opacity-40"
-                  :class="selectedSet.has(s.id) ? 'text-slate-100' : 'text-slate-300'"
+                  class="flex w-full items-start gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60 disabled:cursor-not-allowed disabled:opacity-40"
+                  :class="selectedSet.has(s.id) ? 'text-app-100' : 'text-toned'"
                   :disabled="atCap && !selectedSet.has(s.id)"
                   :aria-pressed="selectedSet.has(s.id)"
                   :data-testid="`review-skill-option-${s.id}`"
@@ -97,28 +97,28 @@ function toggle(id: string) {
                   <UIcon
                     :name="selectedSet.has(s.id) ? 'i-lucide-check' : 'i-lucide-plus'"
                     class="mt-0.5 h-4 w-4 shrink-0"
-                    :class="selectedSet.has(s.id) ? 'text-primary-400' : 'text-slate-500'"
+                    :class="selectedSet.has(s.id) ? 'text-primary' : 'text-dimmed'"
                   />
                   <span class="min-w-0 flex-1">
                     <span class="block truncate">{{ s.name }}</span>
-                    <span class="block truncate text-[11px] text-slate-500">
+                    <span class="block truncate text-[11px] text-dimmed">
                       {{ s.description }}
                     </span>
                   </span>
                 </button>
               </template>
-              <p v-else class="px-2 py-3 text-[12px] text-slate-500">
+              <p v-else class="px-2 py-3 text-[12px] text-dimmed">
                 {{ t('skills.reviewQueue.pickerEmpty') }}
               </p>
             </div>
 
             <p
               v-if="atCap"
-              class="border-t border-slate-800 px-2 py-1.5 text-[11px] text-amber-400"
+              class="border-t border-default px-2 py-1.5 text-[11px] text-app-warning-400"
             >
               {{ t('skills.reviewQueue.capped', { max: MAX_REVIEW_SKILLS }) }}
             </p>
-            <div class="flex justify-end border-t border-slate-800 p-1.5">
+            <div class="flex justify-end border-t border-default p-1.5">
               <UButton
                 size="xs"
                 color="neutral"
@@ -145,11 +145,11 @@ function toggle(id: string) {
         data-testid="review-skill-badge"
         @click="toggle(s.id)"
       >
-        <span class="me-1 tabular-nums text-slate-400">{{ i + 1 }}</span>
+        <span class="me-1 tabular-nums text-muted">{{ i + 1 }}</span>
         {{ s.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ t('skills.reviewQueue.hint') }}
     </p>
   </div>

package/app/components/skills/SkillLibraryManager.vue

@@ -152,7 +152,7 @@ async function unlinkSource(id: string) {
          with a raw 503 — say so instead. -->
     <div
       v-if="library.available === false"
-      class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-400"
+      class="rounded-md border border-default bg-default/40 p-3 text-sm text-muted"
     >
       {{ t('skills.unavailable') }}
     </div>
@@ -164,24 +164,27 @@ async function unlinkSource(id: string) {
         <div
           v-for="s in library.catalog"
           :key="s.id"
-          class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="flex items-start gap-2 rounded-md border border-default bg-default/60 p-3"
         >
-          <UIcon name="i-lucide-book-open-check" class="mt-0.5 h-4 w-4 shrink-0 text-sky-400" />
+          <UIcon
+            name="i-lucide-book-open-check"
+            class="mt-0.5 h-4 w-4 shrink-0 text-app-info-400"
+          />
           <div class="min-w-0 flex-1">
             <div class="flex items-center gap-2">
-              <p class="truncate text-sm font-medium text-slate-100">{{ s.name }}</p>
+              <p class="truncate text-sm font-medium text-app-100">{{ s.name }}</p>
               <UBadge color="neutral" variant="subtle" size="sm" class="shrink-0">
                 {{ t(SKILL_GROUP_LABEL_KEYS[s.group]) }}
               </UBadge>
             </div>
-            <p class="text-xs text-slate-400">{{ s.description }}</p>
+            <p class="text-xs text-muted">{{ s.description }}</p>
             <!-- The manifest declared a group this build does not know (a typo, or a member
                  retired since the sync). It is filed under Other, and saying which value was
                  declared is what lets the author fix their frontmatter. -->
-            <p v-if="s.declaredGroup" class="mt-1 text-[11px] text-amber-400">
+            <p v-if="s.declaredGroup" class="mt-1 text-[11px] text-app-warning-400">
               {{ t('skills.catalog.groupUnknown', { group: s.declaredGroup }) }}
             </p>
-            <p class="mt-1 flex flex-wrap gap-x-3 text-[11px] text-slate-500">
+            <p class="mt-1 flex flex-wrap gap-x-3 text-[11px] text-dimmed">
               <span v-if="s.resources.length">
                 {{ t('skills.catalog.resources', { count: s.resources.length }) }}
               </span>
@@ -191,7 +194,7 @@ async function unlinkSource(id: string) {
             </p>
           </div>
         </div>
-        <p v-if="!library.catalog.length" class="text-sm text-slate-500">
+        <p v-if="!library.catalog.length" class="text-sm text-dimmed">
           {{ t('skills.catalog.empty') }}
         </p>
       </div>
@@ -202,15 +205,15 @@ async function unlinkSource(id: string) {
         <div
           v-for="s in library.sources"
           :key="s.id"
-          class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="flex items-center gap-2 rounded-md border border-default bg-default/60 p-3"
         >
-          <UIcon name="i-lucide-git-branch" class="h-4 w-4 text-slate-400" />
+          <UIcon name="i-lucide-git-branch" class="h-4 w-4 text-muted" />
           <div class="min-w-0">
-            <span class="font-mono text-sm text-slate-100">
+            <span class="font-mono text-sm text-app-100">
               {{ s.repoOwner }}/{{ s.repoName
-              }}<span class="text-slate-500">/{{ s.dirPath || '' }}</span>
+              }}<span class="text-dimmed">/{{ s.dirPath || '' }}</span>
             </span>
-            <p class="text-xs text-slate-500">
+            <p class="text-xs text-dimmed">
               {{
                 s.lastSyncedAt
                   ? t('skills.sources.metaSynced', {
@@ -258,18 +261,18 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!library.sources.length" class="text-sm text-slate-500">
+        <p v-if="!library.sources.length" class="text-sm text-dimmed">
           {{ t('skills.sources.empty') }}
         </p>
 
         <!-- Link a new source. Needs the GitHub integration; hide the form when it's off. -->
         <div
           v-if="!library.sourcesAvailable"
-          class="rounded-md border border-slate-800 bg-slate-900/40 p-3 text-sm text-slate-500"
+          class="rounded-md border border-default bg-default/40 p-3 text-sm text-dimmed"
         >
           {{ t('skills.sources.githubRequired') }}
         </div>
-        <div v-else class="rounded-md border border-slate-800 p-3">
+        <div v-else class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('skills.sources.linkTitle') }}</p>
           <div class="flex flex-col gap-2">
             <!-- Connected: search a repo + browse to the skills directory -->
@@ -277,16 +280,16 @@ async function unlinkSource(id: string) {
               <GitHubRepoSearchSelect v-model="sourceRepoId" @update:repo="sourceRepo = $event" />
               <div
                 v-if="sourceRepoId !== undefined"
-                class="rounded-md border border-slate-800 bg-slate-900/40 p-2"
+                class="rounded-md border border-default bg-default/40 p-2"
               >
-                <p class="mb-2 text-xs text-slate-400">
+                <p class="mb-2 text-xs text-muted">
                   {{ t('skills.sources.browseHint') }}
                 </p>
                 <RepoTreeBrowser v-model="sourceDir" :repo-github-id="sourceRepoId" mode="dir" />
-                <p class="mt-2 truncate text-xs text-slate-400">
+                <p class="mt-2 truncate text-xs text-muted">
                   <template v-if="sourceDir">
                     {{ t('skills.sources.selectedDir') }}
-                    <code class="text-slate-200">{{ sourceDir }}</code>
+                    <code class="text-default">{{ sourceDir }}</code>
                   </template>
                   <template v-else>{{ t('skills.sources.wholeRepo') }}</template>
                 </p>

package/app/components/slack/SlackPanel.vue

@@ -208,12 +208,12 @@ async function saveMapping() {
     </template>
     <template #body>
       <div class="space-y-5">
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{ t('slack.panel.intro') }}
         </p>
 
         <!-- not connected: connect UI -->
-        <div v-if="!slack.connected" class="space-y-3 rounded-lg border border-slate-700 p-3">
+        <div v-if="!slack.connected" class="space-y-3 rounded-lg border border-muted p-3">
           <UButton
             v-if="slack.oauthEnabled"
             color="primary"
@@ -224,7 +224,7 @@ async function saveMapping() {
             {{ t('slack.connect.addToSlack') }}
           </UButton>
           <div class="space-y-1">
-            <span class="block text-[10px] uppercase tracking-wide text-slate-500">
+            <span class="block text-[10px] uppercase tracking-wide text-dimmed">
               {{ t('slack.connect.orPasteToken') }}
             </span>
             <div class="flex gap-2">
@@ -245,11 +245,9 @@ async function saveMapping() {
 
         <!-- connected -->
         <template v-else>
-          <div
-            class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
-          >
-            <UIcon name="i-lucide-slack" class="text-emerald-400" />
-            <span class="flex-1 text-sm text-slate-200">
+          <div class="flex items-center gap-2 rounded-lg border border-muted bg-elevated/40 p-3">
+            <UIcon name="i-lucide-slack" class="text-app-success-400" />
+            <span class="flex-1 text-sm text-default">
               <i18n-t keypath="slack.connected.label" tag="span">
                 <template #team>
                   <span class="font-semibold">{{ slack.connection?.teamName }}</span>
@@ -269,16 +267,16 @@ async function saveMapping() {
 
           <!-- routing -->
           <div class="space-y-3">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('slack.routing.heading') }}
             </p>
             <div
               v-for="row in ROUTABLE"
               :key="row.type"
-              class="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-2"
+              class="flex items-center gap-3 rounded-lg border border-muted bg-elevated/40 p-2"
             >
               <USwitch v-model="routes[row.type]!.enabled" size="sm" />
-              <span class="w-32 text-sm text-slate-300">{{ row.label }}</span>
+              <span class="w-32 text-sm text-toned">{{ row.label }}</span>
               <UInput
                 v-model="routes[row.type]!.channel"
                 size="sm"
@@ -294,7 +292,7 @@ async function saveMapping() {
 
             <label class="flex items-center gap-2">
               <USwitch v-model="mentionsEnabled" size="sm" />
-              <span class="text-sm text-slate-300">{{ t('slack.routing.mentionMembers') }}</span>
+              <span class="text-sm text-toned">{{ t('slack.routing.mentionMembers') }}</span>
             </label>
 
             <div class="flex justify-end">
@@ -313,15 +311,13 @@ async function saveMapping() {
 
           <!-- member mapping -->
           <div v-if="mentionsEnabled" class="space-y-2">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('slack.members.heading') }}
             </p>
-            <p class="text-[11px] leading-snug text-slate-500">
+            <p class="text-[11px] leading-snug text-dimmed">
               <i18n-t keypath="slack.members.hint" tag="span">
                 <template #product>
-                  <span class="font-medium text-slate-400">{{
-                    t('slack.members.productLabel')
-                  }}</span>
+                  <span class="font-medium text-muted">{{ t('slack.members.productLabel') }}</span>
                 </template>
               </i18n-t>
             </p>