@cat-factory/app 0.302.1 → 0.303.0

package/app/components/foundational/FoundationalSuppressions.vue

@@ -63,20 +63,20 @@ async function restore(serviceId: string) {
     data-testid="foundational-suppressions"
   >
     <p class="text-sm font-medium">{{ title[props.kind] }}</p>
-    <p class="text-xs text-slate-500">{{ intro[props.kind] }}</p>
+    <p class="text-xs text-dimmed">{{ intro[props.kind] }}</p>
     <div
       v-for="s in catalog.suppressions"
       :key="s.id"
-      class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 p-3"
+      class="flex items-center gap-2 rounded-md border border-default bg-default/40 p-3"
     >
-      <UIcon name="i-lucide-eye-off" class="h-4 w-4 shrink-0 text-slate-500" />
+      <UIcon name="i-lucide-eye-off" class="h-4 w-4 shrink-0 text-dimmed" />
       <div class="min-w-0 flex-1">
-        <p class="truncate text-sm text-slate-300">
+        <p class="truncate text-sm text-toned">
           {{ s.name || s.id }}
-          <code v-if="s.name" class="ms-1 text-[11px] text-slate-500">{{ s.id }}</code>
+          <code v-if="s.name" class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
         </p>
-        <p v-if="s.summary" class="text-xs text-slate-500">{{ s.summary }}</p>
-        <p v-if="!s.inherited" class="text-[11px] text-slate-500">
+        <p v-if="s.summary" class="text-xs text-dimmed">{{ s.summary }}</p>
+        <p v-if="!s.inherited" class="text-[11px] text-dimmed">
           {{ t('foundational.suppressions.shadowsNothing') }}
         </p>
       </div>

package/app/components/foundational/ServiceCatalogConnection.vue

@@ -219,30 +219,30 @@ async function disconnect() {
     <!-- Unwired is stated, never offered as a form that would fail with a raw 503. -->
     <div
       v-if="catalog.serviceCatalogAvailable === 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('serviceCatalog.unavailable') }}
     </div>
 
     <template v-else>
-      <p class="text-sm text-slate-400">{{ t('serviceCatalog.intro') }}</p>
+      <p class="text-sm text-muted">{{ t('serviceCatalog.intro') }}</p>
 
       <!-- The CONNECTED state, with what the last import concluded. `lastSyncMessage` is the
            load-bearing line: it is what says a catalog is a PREFIX of the portal's estate. -->
       <div
         v-if="connection"
-        class="flex flex-col gap-2 rounded-md border border-slate-800 bg-slate-900/40 p-3"
+        class="flex flex-col gap-2 rounded-md border border-default bg-default/40 p-3"
         data-testid="service-catalog-connected"
       >
         <div class="flex flex-wrap items-center gap-2">
           <UBadge :color="syncStatusColor" variant="subtle">{{ statusLabel }}</UBadge>
-          <span class="font-mono text-xs text-slate-300">{{ connection.baseUrl }}</span>
-          <span class="text-xs text-slate-500">{{ authModeLabel(connection.authMode) }}</span>
-          <span v-if="connection.lastSyncedAt" class="text-xs text-slate-500">
+          <span class="font-mono text-xs text-toned">{{ connection.baseUrl }}</span>
+          <span class="text-xs text-dimmed">{{ authModeLabel(connection.authMode) }}</span>
+          <span v-if="connection.lastSyncedAt" class="text-xs text-dimmed">
             {{ d(new Date(connection.lastSyncedAt), 'short') }}
           </span>
         </div>
-        <p class="text-xs text-slate-400">
+        <p class="text-xs text-muted">
           {{
             t('serviceCatalog.summary', {
               filter: connection.entityFilter.join(', '),
@@ -250,7 +250,7 @@ async function disconnect() {
             })
           }}
         </p>
-        <p v-if="connection.lastSyncMessage" class="text-xs text-amber-400">
+        <p v-if="connection.lastSyncMessage" class="text-xs text-app-warning-400">
           {{ connection.lastSyncMessage }}
         </p>
         <div class="flex gap-2">
@@ -272,8 +272,8 @@ async function disconnect() {
 
       <!-- The connect / re-connect form. Shown alongside a live connection too, because rotating
            a token is the routine reason to come here. -->
-      <div class="flex flex-col gap-3 rounded-md border border-slate-800 p-3">
-        <h4 class="text-sm font-medium text-slate-200">
+      <div class="flex flex-col gap-3 rounded-md border border-default p-3">
+        <h4 class="text-sm font-medium text-default">
           {{ connection ? t('serviceCatalog.form.replace') : t('serviceCatalog.form.connect') }}
         </h4>
 

package/app/components/fragments/FragmentLibraryManager.vue

@@ -592,13 +592,13 @@ async function unlinkSource(id: string) {
          would fail with a raw 503 — say so instead (any entry point lands here). -->
     <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('fragments.unavailable') }}
     </div>
 
     <template v-else>
-      <p class="text-sm text-slate-400">
+      <p class="text-sm text-muted">
         <template v-if="isWorkspace">
           {{ t('fragments.intro.workspace') }}
         </template>
@@ -626,7 +626,7 @@ async function unlinkSource(id: string) {
 
       <!-- Resolved (merged) catalog — workspace scope only -->
       <div v-if="tab === 'catalog'" class="flex flex-col gap-2">
-        <p class="text-xs text-slate-500">
+        <p class="text-xs text-dimmed">
           {{
             t(
               'fragments.catalog.summary',
@@ -638,10 +638,10 @@ async function unlinkSource(id: string) {
         <div
           v-for="f in library.resolved"
           :key="f.id"
-          class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="rounded-md border border-default bg-default/60 p-3"
         >
           <div class="flex items-center gap-2">
-            <span class="font-medium text-slate-100">{{ f.title }}</span>
+            <span class="font-medium text-app-100">{{ f.title }}</span>
             <UBadge size="xs" :color="tierColor[f.tier]" variant="subtle">
               {{ tierLabel[f.tier] }}
             </UBadge>
@@ -654,9 +654,9 @@ async function unlinkSource(id: string) {
             >
               {{ t('fragments.catalog.live', { source: f.documentRef.source }) }}
             </UBadge>
-            <span class="ms-auto font-mono text-[11px] text-slate-500">{{ f.id }}</span>
+            <span class="ms-auto font-mono text-[11px] text-dimmed">{{ f.id }}</span>
           </div>
-          <p class="mt-1 text-sm text-slate-400">{{ f.summary }}</p>
+          <p class="mt-1 text-sm text-muted">{{ f.summary }}</p>
           <div v-if="f.tags?.length" class="mt-1 flex flex-wrap gap-1">
             <UBadge v-for="tag in f.tags" :key="tag" size="xs" variant="outline" color="neutral">
               {{ tag }}
@@ -670,7 +670,7 @@ async function unlinkSource(id: string) {
         <div
           v-for="f in library.fragments"
           :key="f.id"
-          class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="rounded-md border border-default bg-default/60 p-3"
         >
           <!-- Inline editor (hand-authored fragments): title / summary / body / tags, with the
                same auto-generate-title button as the create form. -->
@@ -716,7 +716,7 @@ async function unlinkSource(id: string) {
                 :placeholder="t('fragments.authored.briefPlaceholder')"
                 :rows="2"
               />
-              <p class="text-xs text-slate-500">{{ t('fragments.authored.briefHint') }}</p>
+              <p class="text-xs text-dimmed">{{ t('fragments.authored.briefHint') }}</p>
             </div>
             <UInput
               v-model="editDraft.tags"
@@ -740,12 +740,12 @@ async function unlinkSource(id: string) {
           <div v-else class="flex items-start gap-2">
             <div class="min-w-0">
               <div class="flex items-center gap-2">
-                <span class="font-medium text-slate-100">{{ f.title }}</span>
+                <span class="font-medium text-app-100">{{ f.title }}</span>
                 <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
                   t('fragments.authored.fromRepo')
                 }}</UBadge>
               </div>
-              <p class="text-sm text-slate-400">{{ f.summary }}</p>
+              <p class="text-sm text-muted">{{ f.summary }}</p>
             </div>
             <div class="ms-auto flex gap-1">
               <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
@@ -769,7 +769,7 @@ async function unlinkSource(id: string) {
             </div>
           </div>
         </div>
-        <p v-if="!library.fragments.length" class="text-sm text-slate-500">
+        <p v-if="!library.fragments.length" class="text-sm text-dimmed">
           {{
             isWorkspace
               ? t('fragments.authored.empty.workspace')
@@ -777,7 +777,7 @@ async function unlinkSource(id: string) {
           }}
         </p>
 
-        <div class="rounded-md border border-slate-800 p-3">
+        <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
           <div class="flex flex-col gap-2">
             <div class="flex gap-2">
@@ -822,7 +822,7 @@ async function unlinkSource(id: string) {
                 :placeholder="t('fragments.authored.briefPlaceholder')"
                 :rows="2"
               />
-              <p class="text-xs text-slate-500">{{ t('fragments.authored.briefHint') }}</p>
+              <p class="text-xs text-dimmed">{{ t('fragments.authored.briefHint') }}</p>
             </div>
             <UInput v-model="draft.tags" :placeholder="t('fragments.authored.tagsPlaceholder')" />
             <UButton
@@ -841,25 +841,25 @@ async function unlinkSource(id: string) {
 
       <!-- Document-backed (living) fragments -->
       <div v-else-if="tab === 'documents'" class="flex flex-col gap-3">
-        <p class="text-xs text-slate-500">
+        <p class="text-xs text-dimmed">
           {{ t('fragments.documents.intro') }}
         </p>
 
         <div
           v-for="f in documentFragments"
           :key="f.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-radio" class="mt-0.5 h-4 w-4 text-emerald-400" />
+          <UIcon name="i-lucide-radio" class="mt-0.5 h-4 w-4 text-app-success-400" />
           <div class="min-w-0">
             <div class="flex items-center gap-2">
-              <span class="font-medium text-slate-100">{{ f.title }}</span>
+              <span class="font-medium text-app-100">{{ f.title }}</span>
               <UBadge size="xs" color="success" variant="subtle">
                 {{ f.documentRef?.source }}
               </UBadge>
             </div>
-            <p class="text-sm text-slate-400">{{ f.summary }}</p>
-            <p v-if="f.resolvedAt" class="text-[11px] text-slate-500">
+            <p class="text-sm text-muted">{{ f.summary }}</p>
+            <p v-if="f.resolvedAt" class="text-[11px] text-dimmed">
               {{
                 t('fragments.documents.lastResolved', { date: d(new Date(f.resolvedAt), 'long') })
               }}
@@ -884,16 +884,16 @@ async function unlinkSource(id: string) {
             />
           </div>
         </div>
-        <p v-if="!documentFragments.length" class="text-sm text-slate-500">
+        <p v-if="!documentFragments.length" class="text-sm text-dimmed">
           {{ t('fragments.documents.empty') }}
         </p>
 
-        <div class="rounded-md border border-slate-800 p-3">
+        <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.documents.linkTitle') }}</p>
-          <div v-if="docLinkDisabled" class="text-sm text-slate-500">
+          <div v-if="docLinkDisabled" class="text-sm text-dimmed">
             {{ t('fragments.documents.disabledHint') }}
           </div>
-          <div v-else-if="!documents.connectedSources.length" class="text-sm text-slate-500">
+          <div v-else-if="!documents.connectedSources.length" class="text-sm text-dimmed">
             {{ t('fragments.documents.connectFirst') }}
           </div>
           <div v-else class="flex flex-col gap-2">
@@ -921,9 +921,9 @@ async function unlinkSource(id: string) {
               <GitHubRepoSearchSelect v-model="docRepoId" @update:repo="docRepo = $event" />
               <div
                 v-if="docRepoId !== 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('fragments.documents.githubBrowseHint') }}
                 </p>
                 <RepoTreeBrowser
@@ -936,18 +936,15 @@ async function unlinkSource(id: string) {
                   @toggle="toggleDocFile"
                 />
                 <div v-if="stagedDocRefs.length" class="mt-2 space-y-1">
-                  <p class="text-xs font-medium text-slate-400">
+                  <p class="text-xs font-medium text-muted">
                     {{ t('fragments.documents.selectedFiles', { count: stagedDocRefs.length }) }}
                   </p>
                   <div
                     v-for="staged in stagedDocRefs"
                     :key="staged.path"
-                    class="flex items-center gap-1.5 rounded bg-slate-800/60 px-2 py-1 text-xs text-slate-300"
+                    class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1 text-xs text-toned"
                   >
-                    <UIcon
-                      name="i-lucide-file-code-2"
-                      class="h-3.5 w-3.5 shrink-0 text-indigo-400"
-                    />
+                    <UIcon name="i-lucide-file-code-2" class="h-3.5 w-3.5 shrink-0 text-primary" />
                     <span class="truncate">{{ staged.path }}</span>
                     <UButton
                       class="ms-auto"
@@ -985,7 +982,7 @@ async function unlinkSource(id: string) {
               </UButton>
               <p
                 v-if="docLinkBlockedReason"
-                class="flex items-center gap-1 text-xs text-slate-500"
+                class="flex items-center gap-1 text-xs text-dimmed"
                 data-testid="fragment-link-blocked-reason"
               >
                 <UIcon name="i-lucide-info" class="h-3.5 w-3.5 shrink-0" />
@@ -1001,15 +998,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('fragments.sources.metaSynced', { ref: s.gitRef })
@@ -1051,11 +1048,11 @@ 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('fragments.sources.empty') }}
         </p>
 
-        <div class="rounded-md border border-slate-800 p-3">
+        <div class="rounded-md border border-default p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.sources.linkTitle') }}</p>
           <div class="flex flex-col gap-2">
             <!-- Connected: search a repo + browse to the guideline directory -->
@@ -1063,16 +1060,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('fragments.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('fragments.sources.selectedDir') }}
-                    <code class="text-slate-200">{{ sourceDir }}</code>
+                    <code class="text-default">{{ sourceDir }}</code>
                   </template>
                   <template v-else>{{ t('fragments.sources.wholeRepo') }}</template>
                 </p>

package/app/components/fragments/FragmentSelector.vue

@@ -76,7 +76,7 @@ function manageAccount() {
 <template>
   <div>
     <div class="mb-1 flex items-center justify-between gap-2">
-      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{ label }}
       </span>
       <span v-else />
@@ -99,7 +99,7 @@ function manageAccount() {
               <template v-if="categoryGroups.length">
                 <div v-for="group in categoryGroups" :key="group.category">
                   <p
-                    class="px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                    class="px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
                   >
                     {{ group.category }}
                   </p>
@@ -107,8 +107,8 @@ function manageAccount() {
                     v-for="f in group.fragments"
                     :key="f.id"
                     type="button"
-                    class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60"
-                    :class="selectedSet.has(f.id) ? 'text-slate-100' : 'text-slate-300'"
+                    class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
+                    :class="selectedSet.has(f.id) ? 'text-app-100' : 'text-toned'"
                     :title="f.summary"
                     :data-testid="`fragment-option-${f.id}`"
                     :aria-pressed="selectedSet.has(f.id)"
@@ -117,38 +117,38 @@ function manageAccount() {
                     <UIcon
                       :name="selectedSet.has(f.id) ? 'i-lucide-check' : 'i-lucide-plus'"
                       class="h-4 w-4 shrink-0"
-                      :class="selectedSet.has(f.id) ? 'text-primary-400' : 'text-slate-500'"
+                      :class="selectedSet.has(f.id) ? 'text-primary' : 'text-dimmed'"
                     />
                     <span class="flex-1 truncate">{{ f.title }}</span>
                   </button>
                 </div>
               </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('inspector.fragments.pickerEmpty') }}
               </p>
 
-              <div class="mt-1 border-t border-slate-800 pt-1">
+              <div class="mt-1 border-t border-default pt-1">
                 <button
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-slate-300 hover:bg-slate-800/60"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageBoard"
                 >
-                  <UIcon name="i-lucide-book-marked" class="h-4 w-4 shrink-0 text-slate-400" />
+                  <UIcon name="i-lucide-book-marked" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageBoard') }}</span>
                 </button>
                 <button
                   v-if="accounts.enabled"
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-slate-300 hover:bg-slate-800/60"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageAccount"
                 >
-                  <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-slate-400" />
+                  <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageAccount') }}</span>
                 </button>
               </div>
             </div>
 
-            <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"
@@ -178,7 +178,7 @@ function manageAccount() {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <div v-else-if="emptyText" class="text-[11px] text-slate-500">
+    <div v-else-if="emptyText" class="text-[11px] text-dimmed">
       {{ emptyText }}
     </div>
   </div>

package/app/components/fragments/GitHubDocUrlImport.vue

@@ -76,7 +76,7 @@ async function importUrl() {
         {{ t('fragments.documents.urlImport.action') }}
       </UButton>
     </div>
-    <p v-if="error" class="text-xs text-red-400" data-testid="fragment-url-import-error">
+    <p v-if="error" class="text-xs text-app-error-400" data-testid="fragment-url-import-error">
       {{ error }}
     </p>
   </div>

package/app/components/gates/GateFailingCheckList.vue

@@ -23,12 +23,12 @@ const { t } = useI18n()
       :key="`${c.name}-${i}`"
       class="flex items-center"
       :class="
-        dense ? 'gap-1.5' : 'gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5'
+        dense ? 'gap-1.5' : 'gap-2 rounded-md border border-default bg-app-950/40 px-3 py-1.5'
       "
     >
       <UIcon
         name="i-lucide-circle-x"
-        class="shrink-0 text-rose-400"
+        class="shrink-0 text-app-error-400"
         :class="dense ? 'h-3 w-3' : 'h-3.5 w-3.5'"
       />
       <a
@@ -36,7 +36,7 @@ const { t } = useI18n()
         :href="c.url"
         target="_blank"
         rel="noopener"
-        class="group min-w-0 flex-1 truncate text-sky-300 hover:text-sky-200 hover:underline"
+        class="group min-w-0 flex-1 truncate text-app-info-300 hover:text-app-info-200 hover:underline"
         :class="dense ? 'text-[12px]' : 'text-[13px]'"
         :title="t('gates.ci.openOnGithub', { name: c.name })"
       >
@@ -49,11 +49,11 @@ const { t } = useI18n()
       <span
         v-else
         class="min-w-0 flex-1 truncate"
-        :class="dense ? 'text-[12px] text-slate-300' : 'text-[13px] text-slate-200'"
+        :class="dense ? 'text-[12px] text-toned' : 'text-[13px] text-default'"
         >{{ c.name }}</span
       >
       <span
-        class="shrink-0 uppercase text-rose-300"
+        class="shrink-0 uppercase text-app-error-300"
         :class="dense ? 'text-[10px]' : 'text-[11px]'"
         >{{ c.conclusion ?? t('gates.ci.conclusionFallback') }}</span
       >