@cat-factory/app 0.302.2 → 0.303.1

package/app/components/spec/ServiceSpecWindow.vue

@@ -182,7 +182,7 @@ function kindLabel(item: RequirementItem): string {
   <ResultWindowShell
     :open="open"
     icon="i-lucide-scroll-text"
-    icon-class="bg-indigo-500/15 text-indigo-300"
+    icon-class="bg-primary/15 text-primary"
     :title="t('spec.title')"
     :subtitle="block ? spec?.service || block.title : undefined"
     variant="centered"
@@ -191,7 +191,7 @@ function kindLabel(item: RequirementItem): string {
   >
     <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
     <template v-if="present" #header-extras>
-      <div class="flex items-center rounded-lg border border-slate-700 p-0.5">
+      <div class="flex items-center rounded-lg border border-muted p-0.5">
         <UButton
           :color="mode === 'structured' ? 'primary' : 'neutral'"
           :variant="mode === 'structured' ? 'soft' : 'ghost'"
@@ -226,7 +226,7 @@ function kindLabel(item: RequirementItem): string {
     <!-- loading -->
     <div
       v-if="loading && !view"
-      class="flex flex-1 items-center justify-center gap-2 text-sm text-slate-400"
+      class="flex flex-1 items-center justify-center gap-2 text-sm text-muted"
     >
       <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
       {{ t('spec.loading') }}
@@ -235,9 +235,9 @@ function kindLabel(item: RequirementItem): string {
     <!-- error -->
     <div
       v-else-if="errored"
-      class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-sm text-slate-400"
+      class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-sm text-muted"
     >
-      <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
+      <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-app-warning-400" />
       {{ t('spec.error') }}
       <UButton
         icon="i-lucide-rotate-cw"
@@ -256,10 +256,10 @@ function kindLabel(item: RequirementItem): string {
       v-else-if="!present"
       class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center"
     >
-      <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-slate-600" />
+      <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-app-600" />
       <div>
-        <p class="text-sm font-medium text-slate-300">{{ t('spec.empty.title') }}</p>
-        <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
+        <p class="text-sm font-medium text-toned">{{ t('spec.empty.title') }}</p>
+        <p class="mx-auto mt-1 max-w-md text-xs text-dimmed">
           {{ t('spec.empty.description') }}
         </p>
       </div>
@@ -268,7 +268,7 @@ function kindLabel(item: RequirementItem): string {
     <!-- spec body: navigable tree + detail -->
     <div v-else class="flex min-h-0 flex-1">
       <!-- nav: modules → feature groups -->
-      <nav class="w-64 shrink-0 overflow-y-auto border-e border-slate-800 px-3 py-4">
+      <nav class="w-64 shrink-0 overflow-y-auto border-e border-default px-3 py-4">
         <UButton
           block
           class="mb-2 justify-start"
@@ -285,7 +285,7 @@ function kindLabel(item: RequirementItem): string {
           {{ t('spec.overview') }}
         </UButton>
         <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
-          <div class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+          <div class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
             {{ mod.name }}
           </div>
           <ul class="space-y-0.5">
@@ -295,18 +295,18 @@ function kindLabel(item: RequirementItem): string {
                 class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-[13px] transition"
                 :class="
                   selected?.m === mi && selected?.g === gi
-                    ? 'bg-indigo-500/15 text-indigo-200'
-                    : 'text-slate-300 hover:bg-slate-800'
+                    ? 'bg-primary/15 text-primary'
+                    : 'text-toned hover:bg-elevated'
                 "
                 @click="selectGroup(mi, gi)"
               >
                 <span class="truncate">{{ group.name }}</span>
-                <span class="shrink-0 text-[10px] text-slate-500">{{ reqCount(group) }}</span>
+                <span class="shrink-0 text-[10px] text-dimmed">{{ reqCount(group) }}</span>
               </button>
             </li>
             <li
               v-if="(mod.groups?.length ?? 0) === 0"
-              class="px-2 py-1 text-[11px] italic text-slate-600"
+              class="px-2 py-1 text-[11px] italic text-app-600"
             >
               {{ t('spec.noFeatureGroups') }}
             </li>
@@ -318,14 +318,14 @@ function kindLabel(item: RequirementItem): string {
       <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
         <!-- service overview -->
         <template v-if="selected === null">
-          <h2 class="text-lg font-semibold text-white">{{ spec?.service }}</h2>
+          <h2 class="text-lg font-semibold text-highlighted">{{ spec?.service }}</h2>
           <!-- The service's own prose, so it takes the reading measure the shell's `full` width
                obliges (see the `width` prop). The requirement rows and Gherkin blocks below keep
                the full span — they are structure, not paragraphs. -->
-          <p v-if="spec?.summary" class="mt-2 max-w-3xl whitespace-pre-line text-sm text-slate-300">
+          <p v-if="spec?.summary" class="mt-2 max-w-3xl whitespace-pre-line text-sm text-toned">
             {{ spec.summary }}
           </p>
-          <p v-else class="mt-2 text-sm text-slate-500">{{ t('spec.noSummary') }}</p>
+          <p v-else class="mt-2 text-sm text-dimmed">{{ t('spec.noSummary') }}</p>
           <!-- implementation-state rollup: how much of the written-down behaviour is observed
                to hold, rather than merely agreed -->
           <div
@@ -339,9 +339,9 @@ function kindLabel(item: RequirementItem): string {
             <UBadge color="neutral" variant="subtle" size="sm">
               {{ t('spec.state.aspirationalCount', { count: specStates.aspirational }) }}
             </UBadge>
-            <span class="text-slate-500">{{ t('spec.state.rollupHint') }}</span>
+            <span class="text-dimmed">{{ t('spec.state.rollupHint') }}</span>
           </div>
-          <p class="mt-4 text-xs text-slate-500">
+          <p class="mt-4 text-xs text-dimmed">
             {{
               hasGherkin
                 ? t('spec.moduleHintGherkin', { count: modules.length }, modules.length)
@@ -352,11 +352,11 @@ function kindLabel(item: RequirementItem): string {
 
         <!-- selected feature group -->
         <template v-else-if="selectedGroup">
-          <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+          <div class="mb-1 text-[11px] uppercase tracking-wide text-dimmed">
             {{ selectedModule?.name }}
           </div>
-          <h2 class="text-lg font-semibold text-white">{{ selectedGroup.name }}</h2>
-          <p v-if="selectedGroup.summary" class="mt-1 max-w-3xl text-sm text-slate-400">
+          <h2 class="text-lg font-semibold text-highlighted">{{ selectedGroup.name }}</h2>
+          <p v-if="selectedGroup.summary" class="mt-1 max-w-3xl text-sm text-muted">
             {{ selectedGroup.summary }}
           </p>
 
@@ -364,11 +364,11 @@ function kindLabel(item: RequirementItem): string {
           <template v-if="mode === 'gherkin'">
             <pre
               v-if="selectedFeature"
-              class="mt-4 overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-4 text-[12.5px] leading-relaxed text-slate-200"
+              class="mt-4 overflow-x-auto rounded-lg border border-default bg-app-950/60 p-4 text-[12.5px] leading-relaxed text-default"
             ><code>{{ selectedFeature.content }}</code></pre>
             <div
               v-else
-              class="mt-4 rounded-lg border border-dashed border-slate-700 p-6 text-center text-sm text-slate-500"
+              class="mt-4 rounded-lg border border-dashed border-muted p-6 text-center text-sm text-dimmed"
             >
               {{ t('spec.noGherkinForGroup') }}
             </div>
@@ -376,7 +376,7 @@ function kindLabel(item: RequirementItem): string {
 
           <!-- STRUCTURED view: requirements + acceptance + domain rules -->
           <template v-else>
-            <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-slate-500">
+            <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-dimmed">
               {{ t('spec.noRequirements') }}
             </div>
             <!-- per-group implementation-state rollup + the filter over the two halves -->
@@ -385,8 +385,11 @@ function kindLabel(item: RequirementItem): string {
               class="mt-4 flex flex-wrap items-center justify-between gap-2"
               data-testid="spec-state-filter"
             >
-              <div class="flex items-center gap-1.5 text-[11px] text-slate-500">
-                <UIcon :name="STATE_META.established.icon" class="h-3.5 w-3.5 text-emerald-400" />
+              <div class="flex items-center gap-1.5 text-[11px] text-dimmed">
+                <UIcon
+                  :name="STATE_META.established.icon"
+                  class="h-3.5 w-3.5 text-app-success-400"
+                />
                 {{
                   t('spec.state.groupRollup', {
                     established: groupStates.established,
@@ -394,7 +397,7 @@ function kindLabel(item: RequirementItem): string {
                   })
                 }}
               </div>
-              <div class="flex items-center rounded-lg border border-slate-700 p-0.5">
+              <div class="flex items-center rounded-lg border border-muted p-0.5">
                 <UButton
                   v-for="option in STATE_FILTERS"
                   :key="option.value"
@@ -418,7 +421,7 @@ function kindLabel(item: RequirementItem): string {
                  back here rather than making them find the toggle again. -->
             <div
               v-if="reqCount(selectedGroup) > 0 && visibleRequirements.length === 0"
-              class="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-500"
+              class="mt-4 flex flex-wrap items-center gap-2 text-sm text-dimmed"
               data-testid="spec-state-filter-empty"
             >
               {{ t('spec.state.noneMatchFilter') }}
@@ -441,10 +444,10 @@ function kindLabel(item: RequirementItem): string {
               <li
                 v-for="req in visibleRequirements"
                 :key="req.id"
-                class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+                class="rounded-lg border border-default bg-default/60 p-4"
               >
                 <div class="flex items-start justify-between gap-3">
-                  <h3 class="text-sm font-semibold text-slate-100">{{ req.title }}</h3>
+                  <h3 class="text-sm font-semibold text-app-100">{{ req.title }}</h3>
                   <div class="flex shrink-0 items-center gap-1.5">
                     <!-- implementation state: agreed vs observed to hold. The distinction the
                          build prompt and the tester act on, so a reader must see it too. -->
@@ -463,7 +466,7 @@ function kindLabel(item: RequirementItem): string {
                     <UBadge color="neutral" variant="subtle" size="sm">{{ kindLabel(req) }}</UBadge>
                   </div>
                 </div>
-                <p class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
+                <p class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
                   {{ req.statement }}
                 </p>
                 <!-- acceptance criteria (Given/When/Then) -->
@@ -471,22 +474,22 @@ function kindLabel(item: RequirementItem): string {
                   <div
                     v-for="ac in req.acceptance ?? []"
                     :key="ac.id"
-                    class="rounded-md border border-slate-800 bg-slate-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
+                    class="rounded-md border border-default bg-app-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
                   >
-                    <p class="text-slate-300">
-                      <span class="font-semibold text-emerald-400">{{
+                    <p class="text-toned">
+                      <span class="font-semibold text-app-success-400">{{
                         t('spec.acceptance.given')
                       }}</span>
                       {{ ac.given }}
                     </p>
-                    <p class="text-slate-300">
-                      <span class="font-semibold text-sky-400">{{
+                    <p class="text-toned">
+                      <span class="font-semibold text-app-info-400">{{
                         t('spec.acceptance.when')
                       }}</span>
                       {{ ac.when }}
                     </p>
-                    <p class="text-slate-300">
-                      <span class="font-semibold text-violet-400">{{
+                    <p class="text-toned">
+                      <span class="font-semibold text-app-secondary-400">{{
                         t('spec.acceptance.then')
                       }}</span>
                       {{ ac.outcome }}
@@ -499,7 +502,7 @@ function kindLabel(item: RequirementItem): string {
             <!-- domain rules / invariants scoped to this group -->
             <div v-if="(selectedGroup.rules?.length ?? 0) > 0" class="mt-6">
               <div
-                class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
               >
                 <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
                 {{ t('spec.domainRules') }}
@@ -508,10 +511,10 @@ function kindLabel(item: RequirementItem): string {
                 <li
                   v-for="rule in selectedGroup.rules ?? []"
                   :key="rule.id"
-                  class="rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-[13px] text-slate-300"
+                  class="rounded-md border border-default bg-default/60 px-3 py-2 text-[13px] text-toned"
                 >
                   {{ rule.rule }}
-                  <span v-if="rule.rationale" class="text-slate-500">{{
+                  <span v-if="rule.rationale" class="text-dimmed">{{
                     t('spec.ruleRationale', { rationale: rule.rationale })
                   }}</span>
                 </li>

package/app/components/tasks/BugHuntModal.vue

@@ -339,8 +339,8 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
     <template #body>
       <!-- No tracker offered (none connected/installed, or all disabled). -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
-        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">{{ t('bugHunt.connectFirst') }}</p>
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-dimmed" />
+        <p class="text-sm text-muted">{{ t('bugHunt.connectFirst') }}</p>
         <div class="flex flex-wrap justify-center gap-2">
           <UButton
             v-for="choice in addableSources"
@@ -356,12 +356,12 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
       </div>
 
       <!-- No service frame yet → nowhere for an adopted bug to land. -->
-      <p v-else-if="!containerItems.length" class="text-center text-xs text-slate-500">
+      <p v-else-if="!containerItems.length" class="text-center text-xs text-dimmed">
         {{ t('bugHunt.needFrameFirst') }}
       </p>
 
       <div v-else class="space-y-4">
-        <p class="text-xs text-slate-400">{{ t('bugHunt.intro') }}</p>
+        <p class="text-xs text-muted">{{ t('bugHunt.intro') }}</p>
 
         <div class="grid gap-3 sm:grid-cols-2">
           <UFormField :label="t('bugHunt.tracker')">
@@ -386,7 +386,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                 <span class="truncate">{{ descriptor?.label ?? t('bugHunt.pickTracker') }}</span>
               </UButton>
             </UDropdownMenu>
-            <p v-else class="flex items-center gap-1.5 py-1 text-sm text-slate-300">
+            <p v-else class="flex items-center gap-1.5 py-1 text-sm text-toned">
               <UIcon v-if="descriptor?.icon" :name="descriptor.icon" class="h-4 w-4 shrink-0" />
               <span class="truncate">{{ descriptor?.label ?? t('bugHunt.pickTracker') }}</span>
             </p>
@@ -397,10 +397,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                  STATED rather than asked: the repository the service below is linked to. No
                  control at all, because every value one could offer here is either that repo
                  (nothing to choose) or another one this board holds no service for. -->
-            <p
-              v-if="boardFromService"
-              class="flex items-center gap-1.5 py-1 text-sm text-slate-300"
-            >
+            <p v-if="boardFromService" class="flex items-center gap-1.5 py-1 text-sm text-toned">
               <UIcon name="i-lucide-folder-git-2" class="h-4 w-4 shrink-0" />
               <span class="truncate">{{ scopedRepo ?? t('bugHunt.boardFromService') }}</span>
             </p>
@@ -422,12 +419,12 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             />
             <!-- The service holds no repository, so there are no issues to read. Said here
                  rather than in a toast: it invalidates the scope named right above it. -->
-            <p v-if="huntNeedsRepo" class="mt-1 text-xs text-amber-400">
+            <p v-if="huntNeedsRepo" class="mt-1 text-xs text-app-warning-400">
               {{ t('bugHunt.boardNeedsRepo') }}
             </p>
             <!-- A board read that failed for a fixable reason (unreachable site, expired
                  token): named, so the user isn't left with an empty picker and no cause. -->
-            <p v-else-if="boardsFailure" class="mt-1 text-xs text-amber-400">
+            <p v-else-if="boardsFailure" class="mt-1 text-xs text-app-warning-400">
               {{ t('bugHunt.boardsFailed', { reason: boardsFailure }) }}
             </p>
           </UFormField>
@@ -440,7 +437,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             <!-- Not a disabled input: this tracker's provider never sends the predicate, so a box
                  still holding a value would read as a filter that is on. What it CAN narrow by is
                  named instead, since the alternative is a hunt over every open issue. -->
-            <p v-else class="text-xs text-amber-400">
+            <p v-else class="text-xs text-app-warning-400">
               {{ t('bugHunt.issueTypeUnsupported', { tracker: descriptor?.label ?? '' }) }}
             </p>
           </UFormField>
@@ -458,15 +455,15 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
         <!-- Two blocks rather than one with a computed `keypath`: the i18n extractor reads a
              bound keypath as the key itself, so a dynamic one is a key missing from every
              locale. Every other `<i18n-t>` in the SPA names its key statically for that reason. -->
-        <p v-if="containerStated" class="text-xs text-slate-400">
+        <p v-if="containerStated" class="text-xs text-muted">
           <i18n-t v-if="boardFromService" keypath="bugHunt.huntingIn" tag="span" scope="global">
             <template #container>
-              <span class="font-medium text-slate-200">{{ pinnedContainer!.title }}</span>
+              <span class="font-medium text-default">{{ pinnedContainer!.title }}</span>
             </template>
           </i18n-t>
           <i18n-t v-else keypath="bugHunt.adoptingInto" tag="span" scope="global">
             <template #container>
-              <span class="font-medium text-slate-200">{{ pinnedContainer!.title }}</span>
+              <span class="font-medium text-default">{{ pinnedContainer!.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -490,33 +487,33 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
           >
             {{ t('bugHunt.run') }}
           </UButton>
-          <span v-if="hunt.hunting" class="text-xs text-slate-400">
+          <span v-if="hunt.hunting" class="text-xs text-muted">
             {{ t('bugHunt.running') }}
           </span>
         </div>
 
         <!-- Results -->
-        <div v-if="hunt.hasResult" class="space-y-3 border-t border-slate-800 pt-3">
-          <p class="text-xs text-slate-400">
+        <div v-if="hunt.hasResult" class="space-y-3 border-t border-default pt-3">
+          <p class="text-xs text-muted">
             <!-- The board the scan actually ran against, named because on a repo-backed tracker
                  the platform resolved it: the person reading the shortlist should not have to
                  infer which repository it came out of. -->
-            <span class="text-slate-500">
+            <span class="text-dimmed">
               {{ t('bugHunt.scannedBoard', { board: hunt.result!.board }) }}
             </span>
             {{ t(STATUS_KEYS[hunt.result!.analysisStatus]) }}
-            <span v-if="hunt.result!.model" class="text-slate-500">
+            <span v-if="hunt.result!.model" class="text-dimmed">
               {{ t('bugHunt.viaModel', { model: hunt.result!.model }) }}
             </span>
           </p>
-          <p v-if="hunt.result!.truncated" class="text-xs text-amber-400">
+          <p v-if="hunt.result!.truncated" class="text-xs text-app-warning-400">
             {{ t('bugHunt.truncated', { count: hunt.result!.scanned }) }}
           </p>
 
           <div
             v-for="candidate in hunt.candidates"
             :key="candidate.externalId"
-            class="space-y-2 rounded-md border border-slate-800 p-3"
+            class="space-y-2 rounded-md border border-default p-3"
           >
             <div class="flex items-start justify-between gap-3">
               <div class="min-w-0 space-y-1">
@@ -535,12 +532,12 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                     :to="candidate.url"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="truncate text-sm font-medium text-slate-100"
+                    class="truncate text-sm font-medium text-app-100"
                   >
                     {{ candidate.externalId }}: {{ candidate.title }}
                   </ULink>
                 </div>
-                <p v-if="candidate.analysis" class="text-xs text-slate-400">
+                <p v-if="candidate.analysis" class="text-xs text-muted">
                   {{
                     t('bugHunt.ratings', {
                       impact: candidate.analysis.impact,
@@ -549,10 +546,10 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                     })
                   }}
                 </p>
-                <p v-if="candidate.analysis?.rationale" class="text-xs text-slate-300">
+                <p v-if="candidate.analysis?.rationale" class="text-xs text-toned">
                   {{ candidate.analysis.rationale }}
                 </p>
-                <div class="flex flex-wrap items-center gap-2 text-[11px] text-slate-500">
+                <div class="flex flex-wrap items-center gap-2 text-[11px] text-dimmed">
                   <span v-if="candidate.priority">{{ candidate.priority }}</span>
                   <span v-for="label in candidate.labels" :key="label">{{ label }}</span>
                   <span v-if="createdAtDate(candidate.createdAt)">
@@ -582,7 +579,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
             </div>
           </div>
 
-          <p v-if="!hunt.candidates.length" class="text-center text-xs text-slate-500">
+          <p v-if="!hunt.candidates.length" class="text-center text-xs text-dimmed">
             {{ t('bugHunt.noCandidates') }}
           </p>
         </div>

package/app/components/tasks/ContextIssuePicker.vue

@@ -284,7 +284,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
+  <div class="space-y-2 rounded-lg border border-default bg-default/40 p-2">
     <!-- Which tracker is being searched, always visible, plus the trackers the user could add from
          here (each opens the connect modal over the caller's form). With a single entry there is
          nothing to decide, so the tracker is named as plain text: a chevron opening a one-item menu
@@ -293,7 +293,7 @@ onMounted(() => {
     <div class="flex items-center gap-1.5">
       <span
         :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
       >
         {{ t('tasks.picker.sourceLabel') }}
       </span>
@@ -315,7 +315,7 @@ onMounted(() => {
           <span class="truncate">{{ descriptor?.label ?? t('tasks.picker.noSource') }}</span>
         </UButton>
       </UDropdownMenu>
-      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-slate-300">
+      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-toned">
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0" />
         <span class="truncate">{{ descriptor?.label ?? t('tasks.picker.noSource') }}</span>
       </span>
@@ -335,7 +335,7 @@ onMounted(() => {
       @keydown.enter="refRow && pickRef(refRow)"
     />
 
-    <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
+    <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
       {{ searchError }}
     </p>
 
@@ -345,10 +345,10 @@ onMounted(() => {
         v-for="row in importedRows"
         :key="`imp:${row.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickImported(row)"
       >
-        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
         <span class="truncate">{{ row.externalId }} · {{ row.title }}</span>
         <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
           t('tasks.picker.imported')
@@ -360,10 +360,10 @@ onMounted(() => {
         v-for="r in searchRows"
         :key="`hit:${r.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickSearch(r)"
       >
-        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-muted" />
         <span class="truncate">{{ r.externalId }} · {{ r.title }}</span>
         <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ r.status }}
@@ -374,14 +374,14 @@ onMounted(() => {
       <button
         v-if="refRow"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickRef(refRow)"
       >
-        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-muted" />
         <span class="truncate">
           <i18n-t keypath="tasks.picker.attachByReference" tag="span" scope="global">
             <template #ref>
-              <span class="text-slate-200">{{ refRow }}</span>
+              <span class="text-default">{{ refRow }}</span>
             </template>
           </i18n-t>
         </span>

package/app/components/tasks/TaskContextIssues.vue

@@ -138,11 +138,11 @@ async function attach(item: PendingContext) {
         :href="issue.url"
         target="_blank"
         rel="noopener"
-        class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300 hover:bg-slate-800/60"
+        class="flex items-center gap-1.5 rounded-md border border-default bg-default/60 px-2 py-1.5 text-xs text-toned hover:bg-elevated/60"
       >
         <UIcon
           :name="tasks.descriptorFor(issue.source)?.icon ?? 'i-lucide-square-check'"
-          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+          class="h-3.5 w-3.5 shrink-0 text-primary"
         />
         <span class="truncate">{{ issue.externalId }} · {{ issue.title }}</span>
         <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
@@ -150,7 +150,7 @@ async function attach(item: PendingContext) {
         </UBadge>
       </a>
     </div>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ emptyHint }}
     </p>
   </InspectorSection>

package/app/components/tasks/TaskImportModal.vue

@@ -126,8 +126,8 @@ async function doSpawnEpic() {
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
-        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">{{ t('tasks.import.connectFirst') }}</p>
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-dimmed" />
+        <p class="text-sm text-muted">{{ t('tasks.import.connectFirst') }}</p>
         <div class="flex justify-center gap-2">
           <UButton
             v-for="choice in addableSources"
@@ -143,7 +143,7 @@ async function doSpawnEpic() {
       </div>
 
       <!-- No service frame yet → nowhere to create a task. -->
-      <p v-else-if="!containerItems.length" class="text-center text-xs text-slate-500">
+      <p v-else-if="!containerItems.length" class="text-center text-xs text-dimmed">
         {{ t('tasks.import.needFrameFirst') }}
       </p>
 
@@ -152,10 +152,10 @@ async function doSpawnEpic() {
         <!-- Where the new task lands. Stated when there is one legal target (opened from a service
              frame that has no modules); otherwise a real choice, scoped to that frame when the
              modal was opened from one. -->
-        <p v-if="containerStated" class="text-xs text-slate-400">
+        <p v-if="containerStated" class="text-xs text-muted">
           <i18n-t keypath="tasks.import.creatingIn" tag="span" scope="global">
             <template #container>
-              <span class="font-medium text-slate-200">{{ pinnedContainer!.title }}</span>
+              <span class="font-medium text-default">{{ pinnedContainer!.title }}</span>
             </template>
           </i18n-t>
         </p>
@@ -182,8 +182,8 @@ async function doSpawnEpic() {
         </UFormField>
 
         <!-- Secondary: spawn a parent/epic issue as a whole linked task group. -->
-        <div class="space-y-2 border-t border-slate-800 pt-3">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <div class="space-y-2 border-t border-default pt-3">
+          <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('tasks.import.asEpic') }}
           </span>
           <div class="flex items-end gap-2">

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -122,16 +122,16 @@ async function toggleEnabled(enabled: boolean) {
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
-        <p class="text-sm text-slate-400">
+        <p class="text-sm text-muted">
           {{ t('tasks.connect.intro', { label: descriptor.label }) }}
         </p>
 
         <!-- Credentialless source (GitHub Issues): no form, just the on/off toggle. -->
         <template v-if="credentialless">
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('tasks.connect.credentialless') }}
           </p>
-          <p v-if="!available" class="text-[11px] text-amber-400">
+          <p v-if="!available" class="text-[11px] text-app-warning-400">
             {{ t('tasks.connect.installAppHint', { label: descriptor.label }) }}
           </p>
         </template>
@@ -149,7 +149,7 @@ async function toggleEnabled(enabled: boolean) {
             >
               {{ t('tasks.connect.oauthButton', { label: descriptor.label }) }}
             </UButton>
-            <p class="text-center text-[11px] text-slate-500">
+            <p class="text-center text-[11px] text-dimmed">
               {{ t('tasks.connect.oauthOr') }}
             </p>
           </template>
@@ -167,7 +167,7 @@ async function toggleEnabled(enabled: boolean) {
             />
           </UFormField>
         </div>
-        <p v-else class="text-[11px] text-slate-500">
+        <p v-else class="text-[11px] text-dimmed">
           {{
             connection?.label
               ? t('tasks.connect.connectedTo', { label: connection.label })
@@ -178,11 +178,13 @@ async function toggleEnabled(enabled: boolean) {
         <!-- The per-workspace on/off toggle, available once the source is usable. -->
         <div
           v-if="available"
-          class="flex items-center justify-between gap-2 rounded-md border border-slate-800 px-3 py-2"
+          class="flex items-center justify-between gap-2 rounded-md border border-default px-3 py-2"
         >
           <div class="text-sm">
-            <div class="font-medium text-slate-200">{{ t('tasks.connect.offerToWorkspace') }}</div>
-            <div class="text-[11px] text-slate-500">
+            <div class="font-medium text-default">
+              {{ t('tasks.connect.offerToWorkspace') }}
+            </div>
+            <div class="text-[11px] text-dimmed">
               {{ t('tasks.connect.offerHint', { label: descriptor.label }) }}
             </div>
           </div>