@cat-factory/app 0.302.2 → 0.303.0

package/app/components/settings/CloudflareHandlerSection.vue

@@ -143,17 +143,17 @@ async function remove() {
 </script>
 
 <template>
-  <section class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
-    <h3 class="text-sm font-semibold text-slate-200">
+  <section class="space-y-2 rounded-lg border border-muted bg-default/40 p-3">
+    <h3 class="text-sm font-semibold text-default">
       {{ t('inspector.testConfig.provisionTypes.cloudflare') }}
     </h3>
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{ t('settings.infrastructure.cloudflare.intro') }}
     </p>
 
     <div
       v-if="handler && !editing"
-      class="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 p-2.5"
+      class="space-y-2 rounded-md border border-app-success-500/30 bg-app-success-500/5 p-2.5"
       data-testid="cloudflare-handler-connected"
     >
       <div class="flex items-start justify-between gap-2">
@@ -162,7 +162,7 @@ async function remove() {
           disabled
           size="lg"
           :label="t('settings.infrastructure.handler.connectionEstablished')"
-          :ui="{ label: 'text-[13px] font-semibold text-emerald-300' }"
+          :ui="{ label: 'text-[13px] font-semibold text-app-success-300' }"
         />
         <div class="flex items-center gap-1">
           <UButton
@@ -185,31 +185,31 @@ async function remove() {
           />
         </div>
       </div>
-      <p class="pl-7 text-[11px] text-slate-300">
+      <p class="pl-7 text-[11px] text-toned">
         {{ t('settings.infrastructure.cloudflare.connectedAs', { subdomain: workersSubdomain }) }}
       </p>
     </div>
 
     <div v-else class="space-y-2" data-testid="cloudflare-handler-form">
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('settings.infrastructure.cloudflare.label')
         }}</label>
         <UInput v-model="label" size="xs" />
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('settings.infrastructure.cloudflare.subdomain')
         }}</label>
         <UInput v-model="workersSubdomain" size="xs" placeholder="my-account" />
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('settings.infrastructure.cloudflare.subdomainHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('settings.infrastructure.cloudflare.token')
         }}</label>
         <UInput
@@ -222,28 +222,28 @@ async function remove() {
               : t('settings.infrastructure.cloudflare.tokenPlaceholder')
           "
         />
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('settings.infrastructure.cloudflare.tokenHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-slate-400">{{
+        <label class="text-[11px] text-muted">{{
           t('settings.infrastructure.cloudflare.repo')
         }}</label>
         <UInput v-model="repo" size="xs" placeholder="owner/repo" />
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('settings.infrastructure.cloudflare.repoHint') }}
         </p>
       </div>
 
-      <details class="rounded-md border border-slate-700/70 p-2">
-        <summary class="cursor-pointer text-[11px] text-slate-400">
+      <details class="rounded-md border border-muted/70 p-2">
+        <summary class="cursor-pointer text-[11px] text-muted">
           {{ t('settings.infrastructure.cloudflare.advanced') }}
         </summary>
         <div class="mt-2 space-y-2">
           <div class="space-y-1">
-            <label class="text-[11px] text-slate-400">{{
+            <label class="text-[11px] text-muted">{{
               t('settings.infrastructure.cloudflare.workerTemplate')
             }}</label>
             <!-- The placeholder is a FORMAT EXAMPLE containing vue-i18n metacharacters, so it
@@ -255,16 +255,16 @@ async function remove() {
             />
           </div>
           <div class="space-y-1">
-            <label class="text-[11px] text-slate-400">{{
+            <label class="text-[11px] text-muted">{{
               t('settings.infrastructure.cloudflare.environmentTemplate')
             }}</label>
             <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
           </div>
-          <p class="text-[11px] text-slate-500">
+          <p class="text-[11px] text-dimmed">
             {{ t('settings.infrastructure.cloudflare.templateHint') }}
           </p>
           <div class="space-y-1">
-            <label class="text-[11px] text-slate-400">{{
+            <label class="text-[11px] text-muted">{{
               t('settings.infrastructure.cloudflare.apiBaseUrl')
             }}</label>
             <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
@@ -301,7 +301,7 @@ async function remove() {
       <p
         v-if="testResult"
         class="text-[11px]"
-        :class="testResult.ok ? 'text-emerald-300' : 'text-rose-300'"
+        :class="testResult.ok ? 'text-app-success-300' : 'text-app-error-300'"
       >
         {{ testResult.message }}
       </p>

package/app/components/settings/ComposeEnvironmentSetupSection.vue

@@ -44,42 +44,42 @@ function start() {
 <template>
   <section class="space-y-3" data-testid="compose-env-setup-section">
     <div>
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.composeEnvSetup.title') }}
       </h3>
-      <p class="mt-1 text-xs leading-relaxed text-slate-400">
+      <p class="mt-1 text-xs leading-relaxed text-muted">
         {{ t('settings.composeEnvSetup.lead') }}
       </p>
     </div>
 
-    <div class="rounded border border-slate-800 bg-slate-900/40 p-3">
-      <p class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+    <div class="rounded border border-default bg-default/40 p-3">
+      <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
         {{ t('settings.composeEnvSetup.how.title') }}
       </p>
-      <ol class="mt-2 list-decimal space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+      <ol class="mt-2 list-decimal space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
         <li v-for="(step, i) in steps" :key="`how-${i}`">{{ step }}</li>
       </ol>
-      <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
+      <p class="mt-2 text-[11px] leading-relaxed text-dimmed">
         {{ t('settings.composeEnvSetup.how.outcome') }}
       </p>
     </div>
 
     <div class="grid gap-2 sm:grid-cols-2">
-      <div class="rounded border border-emerald-900/50 bg-emerald-950/20 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-emerald-200/90">
+      <div class="rounded border border-app-success-900/50 bg-app-success-950/20 p-3">
+        <p class="flex items-center gap-1.5 text-[11px] font-medium text-app-success-200/90">
           <UIcon name="i-lucide-check" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.needed.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
           <li v-for="(item, i) in needed" :key="`need-${i}`">{{ item }}</li>
         </ul>
       </div>
-      <div class="rounded border border-slate-800 bg-slate-900/40 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-slate-300">
+      <div class="rounded border border-default bg-default/40 p-3">
+        <p class="flex items-center gap-1.5 text-[11px] font-medium text-toned">
           <UIcon name="i-lucide-minus" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.notNeeded.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-slate-400">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
           <li v-for="(item, i) in notNeeded" :key="`skip-${i}`">{{ item }}</li>
         </ul>
       </div>
@@ -96,7 +96,7 @@ function start() {
       >
         {{ t('settings.composeEnvSetup.start') }}
       </UButton>
-      <span class="text-[11px] text-slate-500">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
+      <span class="text-[11px] text-dimmed">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
     </div>
   </section>
 </template>

package/app/components/settings/ConnectionTestVerdict.vue

@@ -50,13 +50,13 @@ const detail = computed(() => (causeKey.value ? (props.result?.message ?? '') :
 <template>
   <p
     v-if="result?.ok"
-    class="text-xs text-emerald-400 break-words"
+    class="text-xs text-app-success-400 break-words"
     data-testid="connection-test-result"
   >
     {{ result.message ?? t('settings.providerConnection.test.ok') }}
   </p>
   <div v-else-if="result" class="space-y-0.5" data-testid="connection-test-result">
-    <p class="text-xs text-rose-400 break-words">{{ headline }}</p>
-    <p v-if="detail" class="text-[11px] text-slate-400 break-words">{{ detail }}</p>
+    <p class="text-xs text-app-error-400 break-words">{{ headline }}</p>
+    <p v-if="detail" class="text-[11px] text-muted break-words">{{ detail }}</p>
   </div>
 </template>

package/app/components/settings/ConnectionWarnings.vue

@@ -35,7 +35,7 @@ const copy = (warning: ConnectionWarning): string => {
 <template>
   <div
     v-if="warnings?.length"
-    class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
+    class="rounded-md border border-app-warning-500/40 bg-app-warning-950/40 px-3 py-2 text-xs text-app-warning-200"
     data-testid="connection-warnings"
   >
     <p class="font-semibold">

package/app/components/settings/ConsensusGroupsSection.vue

@@ -208,13 +208,13 @@ async function remove(group: ConsensusGroup) {
 </script>
 
 <template>
-  <section v-if="visible" class="space-y-3 border-t border-slate-800 pt-5">
+  <section v-if="visible" class="space-y-3 border-t border-default pt-5">
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0">
-        <h2 class="text-sm font-semibold text-slate-100">
+        <h2 class="text-sm font-semibold text-app-100">
           {{ t('settings.consensusGroups.title') }}
         </h2>
-        <p class="mt-1 text-xs leading-relaxed text-slate-500">
+        <p class="mt-1 text-xs leading-relaxed text-dimmed">
           {{ t('settings.consensusGroups.intro') }}
         </p>
       </div>
@@ -238,11 +238,11 @@ async function remove(group: ConsensusGroup) {
         <div
           v-for="g in groups.groups"
           :key="g.id"
-          class="rounded-xl border border-slate-800 bg-slate-900/50 p-3"
+          class="rounded-xl border border-default bg-default/50 p-3"
           data-testid="consensus-group-row"
         >
           <div class="flex items-center gap-2">
-            <span class="truncate text-sm font-semibold text-slate-100">{{ g.name }}</span>
+            <span class="truncate text-sm font-semibold text-app-100">{{ g.name }}</span>
             <UBadge color="neutral" variant="subtle" size="xs">{{ barLabel(g) }}</UBadge>
             <div class="ms-auto flex items-center gap-1">
               <UButton
@@ -264,8 +264,8 @@ async function remove(group: ConsensusGroup) {
               />
             </div>
           </div>
-          <p v-if="g.description" class="mt-1 text-[11px] text-slate-400">{{ g.description }}</p>
-          <div class="mt-1.5 text-[11px] text-slate-400">
+          <p v-if="g.description" class="mt-1 text-[11px] text-muted">{{ g.description }}</p>
+          <div class="mt-1.5 text-[11px] text-muted">
             {{ t(`pipeline.builder.strategyOption.${g.strategy}`) }}
             ·
             {{
@@ -278,18 +278,16 @@ async function remove(group: ConsensusGroup) {
           </div>
         </div>
       </div>
-      <p v-else class="py-4 text-center text-sm text-slate-500">
+      <p v-else class="py-4 text-center text-sm text-dimmed">
         {{ t('settings.consensusGroups.list.empty') }}
       </p>
     </template>
 
     <!-- ===== editor ===== -->
-    <div v-else class="space-y-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+    <div v-else class="space-y-4 rounded-xl border border-default bg-default/50 p-4">
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label
-            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-          >
+          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('settings.consensusGroups.editor.nameLabel') }}
           </label>
           <UInput
@@ -300,14 +298,12 @@ async function remove(group: ConsensusGroup) {
           />
         </div>
         <div>
-          <label
-            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-          >
+          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('settings.consensusGroups.editor.strategyLabel') }}
           </label>
           <select
             v-model="editor.strategy"
-            class="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-100"
+            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
           >
             <option v-for="s in STRATEGIES" :key="s.value" :value="s.value">{{ s.label }}</option>
           </select>
@@ -315,7 +311,7 @@ async function remove(group: ConsensusGroup) {
       </div>
 
       <div>
-        <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('settings.consensusGroups.editor.descriptionLabel') }}
         </label>
         <UInput
@@ -329,7 +325,7 @@ async function remove(group: ConsensusGroup) {
       <!-- participants -->
       <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('settings.consensusGroups.editor.participantsLabel') }}
           </span>
           <UButton
@@ -341,7 +337,7 @@ async function remove(group: ConsensusGroup) {
             @click="addParticipant"
           />
         </div>
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('settings.consensusGroups.editor.participantsHint') }}
         </p>
         <div
@@ -363,7 +359,7 @@ async function remove(group: ConsensusGroup) {
           />
           <select
             v-model="p.modelId"
-            class="w-44 rounded border border-slate-700 bg-slate-900 px-1.5 py-1 text-xs text-slate-300"
+            class="w-44 rounded border border-muted bg-default px-1.5 py-1 text-xs text-toned"
           >
             <option :value="undefined">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
             <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
@@ -382,23 +378,19 @@ async function remove(group: ConsensusGroup) {
 
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label
-            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-          >
+          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('settings.consensusGroups.editor.synthesizerLabel') }}
           </label>
           <select
             v-model="editor.synthesizerModelId"
-            class="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-100"
+            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
           >
             <option value="">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
             <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
           </select>
         </div>
         <div v-if="editor.strategy === 'debate'">
-          <label
-            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-          >
+          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
             {{ t('pipeline.builder.rounds') }}
           </label>
           <UInput v-model.number="editor.rounds" type="number" min="1" max="5" size="sm" />
@@ -406,17 +398,17 @@ async function remove(group: ConsensusGroup) {
       </div>
 
       <!-- the estimate bar -->
-      <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-950/40 p-3">
-        <label class="flex items-center gap-2 text-xs text-slate-300">
-          <input v-model="editor.gated" type="checkbox" class="accent-emerald-500" />
+      <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
+        <label class="flex items-center gap-2 text-xs text-toned">
+          <input v-model="editor.gated" type="checkbox" class="accent-app-success-500" />
           {{ t('settings.consensusGroups.editor.gatedLabel') }}
         </label>
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('settings.consensusGroups.editor.gatedHint') }}
         </p>
         <div v-if="editor.gated" class="flex flex-wrap items-center gap-3 text-xs">
           <label
-            class="flex items-center gap-1.5 text-slate-400"
+            class="flex items-center gap-1.5 text-muted"
             :title="t('pipeline.builder.riskThresholdHint')"
           >
             {{ t('pipeline.builder.riskThreshold') }}
@@ -431,7 +423,7 @@ async function remove(group: ConsensusGroup) {
             />
           </label>
           <label
-            class="flex items-center gap-1.5 text-slate-400"
+            class="flex items-center gap-1.5 text-muted"
             :title="t('pipeline.builder.impactThresholdHint')"
           >
             {{ t('pipeline.builder.impactThreshold') }}
@@ -446,7 +438,7 @@ async function remove(group: ConsensusGroup) {
             />
           </label>
           <label
-            class="flex items-center gap-1.5 text-slate-400"
+            class="flex items-center gap-1.5 text-muted"
             :title="t('pipeline.builder.complexityThresholdHint')"
           >
             {{ t('settings.consensusGroups.editor.complexityThreshold') }}
@@ -461,7 +453,7 @@ async function remove(group: ConsensusGroup) {
             />
           </label>
         </div>
-        <p v-if="gatingIncomplete" class="text-[11px] text-amber-400">
+        <p v-if="gatingIncomplete" class="text-[11px] text-app-warning-400">
           {{ t('settings.consensusGroups.editor.gatingIncomplete') }}
         </p>
       </div>

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -90,12 +90,12 @@ async function remove(type: CustomManifestType) {
 </script>
 
 <template>
-  <section class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+  <section class="space-y-3 rounded-lg border border-muted bg-default/40 p-3">
     <div>
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.infrastructure.customType.title') }}
       </h3>
-      <p class="text-[11px] text-slate-500">{{ t('settings.infrastructure.customType.hint') }}</p>
+      <p class="text-[11px] text-dimmed">{{ t('settings.infrastructure.customType.hint') }}</p>
     </div>
 
     <!-- The catalog: registered (read-only) + workspace (editable). -->
@@ -103,11 +103,11 @@ async function remove(type: CustomManifestType) {
       <li
         v-for="type in infra.customTypes"
         :key="type.manifestId"
-        class="flex items-start justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/50 px-2.5 py-1.5"
+        class="flex items-start justify-between gap-2 rounded-md border border-default bg-default/50 px-2.5 py-1.5"
       >
         <div class="min-w-0">
           <div class="flex items-center gap-1.5">
-            <span class="truncate text-[13px] text-slate-200">{{ type.label }}</span>
+            <span class="truncate text-[13px] text-default">{{ type.label }}</span>
             <UBadge
               :color="type.source === 'workspace' ? 'primary' : 'neutral'"
               variant="subtle"
@@ -116,8 +116,8 @@ async function remove(type: CustomManifestType) {
               {{ t(`settings.infrastructure.customType.source.${type.source}`) }}
             </UBadge>
           </div>
-          <code class="text-[11px] text-slate-500">{{ type.manifestId }}</code>
-          <p v-if="type.description" class="text-[11px] text-slate-400">{{ type.description }}</p>
+          <code class="text-[11px] text-dimmed">{{ type.manifestId }}</code>
+          <p v-if="type.description" class="text-[11px] text-muted">{{ type.description }}</p>
         </div>
         <div v-if="type.source === 'workspace'" class="flex shrink-0 items-center gap-0.5">
           <UButton
@@ -139,13 +139,13 @@ async function remove(type: CustomManifestType) {
         </div>
       </li>
     </ul>
-    <p v-else class="text-[11px] text-slate-500">
+    <p v-else class="text-[11px] text-dimmed">
       {{ t('settings.infrastructure.customType.empty') }}
     </p>
 
     <!-- Add / edit a workspace-defined type. -->
-    <div class="space-y-2 border-t border-slate-800 pt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+    <div class="space-y-2 border-t border-default pt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
         {{
           editing
             ? t('settings.infrastructure.customType.editTitle', { id: draft.manifestId })

package/app/components/settings/DefaultProvisionTypeSection.vue

@@ -102,10 +102,10 @@ async function save() {
 <template>
   <section class="space-y-3" data-testid="default-provision-section">
     <div>
-      <h3 class="text-sm font-semibold text-slate-200">
+      <h3 class="text-sm font-semibold text-default">
         {{ t('settings.defaultProvision.title') }}
       </h3>
-      <p class="mt-1 text-[11px] leading-snug text-slate-500">
+      <p class="mt-1 text-[11px] leading-snug text-dimmed">
         {{ t('settings.defaultProvision.hint') }}
       </p>
     </div>
@@ -125,7 +125,7 @@ async function save() {
     </div>
 
     <div v-if="selection.type === 'custom'" class="space-y-1">
-      <label class="text-[11px] text-slate-400">
+      <label class="text-[11px] text-muted">
         {{ t('inspector.testConfig.customManifestId') }}
       </label>
       <USelect
@@ -138,7 +138,7 @@ async function save() {
         :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
         @update:model-value="(v: string) => setManifestId(v)"
       />
-      <p v-else class="text-[11px] leading-snug text-amber-300/80">
+      <p v-else class="text-[11px] leading-snug text-app-warning-300/80">
         {{ t('inspector.testConfig.customNoTypes') }}
       </p>
     </div>
@@ -147,7 +147,7 @@ async function save() {
          the workspace still has nothing stored. -->
     <p
       v-if="unset && selection.type"
-      class="text-[11px] leading-snug text-amber-300/80"
+      class="text-[11px] leading-snug text-app-warning-300/80"
       data-testid="default-provision-suggestion-hint"
     >
       {{ t('settings.defaultProvision.suggestionHint') }}
@@ -165,7 +165,7 @@ async function save() {
       >
         {{ t('settings.defaultProvision.save') }}
       </UButton>
-      <span v-if="!unset && !dirty" class="text-[11px] text-slate-500">
+      <span v-if="!unset && !dirty" class="text-[11px] text-dimmed">
         {{ t('settings.defaultProvision.savedState') }}
       </span>
     </div>