@cat-factory/app 0.302.2 → 0.303.0

package/app/components/pipeline/BinaryOutputStepPicker.vue

@@ -473,9 +473,7 @@ const declaredFormats = computed(() => {
 <template>
   <div class="ms-6 flex flex-col gap-1.5" data-testid="binary-output-picker">
     <div class="flex items-center gap-2">
-      <span class="text-[10px] text-slate-500">{{
-        t('pipeline.builder.binaryOutputStorage')
-      }}</span>
+      <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputStorage') }}</span>
       <USelect
         class="w-56"
         :model-value="config?.storageServiceId ?? ''"
@@ -490,9 +488,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-slate-500">{{
-        t('pipeline.builder.binaryOutputContext')
-      }}</span>
+      <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputContext') }}</span>
       <USelectMenu
         class="w-56"
         multiple
@@ -507,7 +503,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-slate-500">{{
+      <span class="text-[10px] text-dimmed">{{
         t('pipeline.builder.binaryOutputGenerators')
       }}</span>
       <USelectMenu
@@ -525,7 +521,7 @@ const declaredFormats = computed(() => {
     </div>
 
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-slate-500">{{
+      <span class="text-[10px] text-dimmed">{{
         t('pipeline.builder.binaryOutputModalities')
       }}</span>
       <USelectMenu
@@ -545,7 +541,7 @@ const declaredFormats = computed(() => {
          under them. Both tiers: like the rest of this picker it is not an override of a default —
          a format nobody stated is a format the run does not check. -->
     <div v-if="config?.storageServiceId" class="flex items-center gap-2">
-      <span class="text-[10px] text-slate-500">{{
+      <span class="text-[10px] text-dimmed">{{
         t('pipeline.builder.binaryOutputMediaTypes')
       }}</span>
       <UInput
@@ -560,7 +556,7 @@ const declaredFormats = computed(() => {
     </div>
     <p
       v-if="config?.storageServiceId && declaredFormats.length"
-      class="ms-1 text-[10px] text-slate-500"
+      class="ms-1 text-[10px] text-dimmed"
       data-testid="binary-output-declared-formats"
     >
       {{
@@ -576,7 +572,7 @@ const declaredFormats = computed(() => {
          option nobody stated is an option the run does not apply. -->
     <template v-if="config?.storageServiceId">
       <div v-if="offers('reference-image')" class="flex items-start gap-2">
-        <span class="mt-1 text-[10px] text-slate-500">{{
+        <span class="mt-1 text-[10px] text-dimmed">{{
           t('pipeline.builder.binaryReferenceImages')
         }}</span>
         <UTextarea
@@ -592,7 +588,7 @@ const declaredFormats = computed(() => {
       </div>
       <p
         v-if="unusableReferences.length"
-        class="ms-1 text-[10px] text-amber-400"
+        class="ms-1 text-[10px] text-app-warning-400"
         data-testid="binary-output-reference-unusable"
       >
         {{
@@ -603,7 +599,7 @@ const declaredFormats = computed(() => {
       </p>
 
       <div v-if="offers('instruction-edit') || offers('mask-edit')" class="flex items-center gap-2">
-        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryEditMode') }}</span>
+        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryEditMode') }}</span>
         <USelect
           class="w-56"
           size="xs"
@@ -622,7 +618,7 @@ const declaredFormats = computed(() => {
         />
       </div>
       <div v-if="generation.edit" class="flex items-center gap-2">
-        <span class="text-[10px] text-slate-500">{{
+        <span class="text-[10px] text-dimmed">{{
           t('pipeline.builder.binaryEditInstruction')
         }}</span>
         <UInput
@@ -640,7 +636,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('negative-prompt')" class="flex items-center gap-2">
-        <span class="text-[10px] text-slate-500">{{
+        <span class="text-[10px] text-dimmed">{{
           t('pipeline.builder.binaryNegativePrompt')
         }}</span>
         <UInput
@@ -656,9 +652,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('aspect-ratio')" class="flex items-center gap-2">
-        <span class="text-[10px] text-slate-500">{{
-          t('pipeline.builder.binaryAspectRatio')
-        }}</span>
+        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryAspectRatio') }}</span>
         <UInput
           class="w-56"
           size="xs"
@@ -676,9 +670,7 @@ const declaredFormats = computed(() => {
            exists to remove. -->
       <div v-if="offers('exact-size')" class="flex flex-col gap-1">
         <div class="flex items-center gap-2">
-          <span class="text-[10px] text-slate-500">{{
-            t('pipeline.builder.binaryOutputSize')
-          }}</span>
+          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryOutputSize') }}</span>
           <UInput
             class="w-24"
             type="number"
@@ -688,7 +680,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-size-width"
             @change="setOutputSize('width', ($event.target as HTMLInputElement).value)"
           />
-          <span class="text-[10px] text-slate-500">×</span>
+          <span class="text-[10px] text-dimmed">×</span>
           <UInput
             class="w-24"
             type="number"
@@ -704,7 +696,7 @@ const declaredFormats = computed(() => {
              that does not carry the requirement. -->
         <p
           v-if="outputSizeIncomplete"
-          class="text-[10px] text-amber-400"
+          class="text-[10px] text-app-warning-400"
           data-testid="binary-output-size-incomplete"
         >
           {{ t('pipeline.builder.binaryOutputSizeIncomplete') }}
@@ -712,7 +704,7 @@ const declaredFormats = computed(() => {
       </div>
 
       <div v-if="offers('seed')" class="flex items-center gap-2">
-        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binarySeed') }}</span>
+        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binarySeed') }}</span>
         <UInput
           class="w-56"
           type="number"
@@ -739,9 +731,7 @@ const declaredFormats = computed(() => {
               setGeneration({ transparentBackground: $event ? true : undefined })
             "
           />
-          <span class="text-[10px] text-slate-500">{{
-            t('pipeline.builder.binaryTransparent')
-          }}</span>
+          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryTransparent') }}</span>
         </label>
         <label v-if="offers('tileable')" class="flex items-center gap-1.5">
           <UCheckbox
@@ -749,7 +739,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-tileable"
             @update:model-value="setGeneration({ tileable: $event ? true : undefined })"
           />
-          <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryTileable') }}</span>
+          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryTileable') }}</span>
         </label>
         <label v-if="offers('upscale')" class="flex items-center gap-1.5">
           <UCheckbox
@@ -757,7 +747,7 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-upscale"
             @update:model-value="setGeneration({ upscale: $event ? 2 : undefined })"
           />
-          <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryUpscale') }}</span>
+          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryUpscale') }}</span>
         </label>
       </div>
 
@@ -769,12 +759,10 @@ const declaredFormats = computed(() => {
           data-testid="binary-output-comparison"
           @update:model-value="setComparison($event === true)"
         />
-        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryComparison') }}</span>
+        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryComparison') }}</span>
       </label>
       <div v-if="config.comparison" class="ms-6 flex flex-wrap items-center gap-3">
-        <span class="text-[10px] text-slate-500">{{
-          t('pipeline.builder.binaryPerGenerator')
-        }}</span>
+        <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryPerGenerator') }}</span>
         <USelect
           class="w-20"
           size="xs"
@@ -789,14 +777,12 @@ const declaredFormats = computed(() => {
             data-testid="binary-output-multi-select"
             @update:model-value="setMultiSelect($event === true)"
           />
-          <span class="text-[10px] text-slate-500">{{
-            t('pipeline.builder.binaryMultiSelect')
-          }}</span>
+          <span class="text-[10px] text-dimmed">{{ t('pipeline.builder.binaryMultiSelect') }}</span>
         </label>
       </div>
       <p
         v-if="comparisonUnreachable"
-        class="text-[10px] text-amber-400"
+        class="text-[10px] text-app-warning-400"
         data-testid="binary-output-comparison-unreachable"
       >
         {{ t('pipeline.builder.binaryComparisonUnreachable') }}
@@ -808,25 +794,25 @@ const declaredFormats = computed(() => {
          an untagged one, and a lost CONTEXT service is not a lost storage target. -->
     <p
       v-if="has('catalog_unavailable')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-unavailable"
     >
       {{ t('pipeline.builder.binaryOutputUnavailable') }}
     </p>
     <p
       v-else-if="has('no_storage_service')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-no-storage"
     >
       {{ t('pipeline.builder.binaryOutputNoStorage', { capability: ASSET_STORAGE_CAPABILITY }) }}
     </p>
-    <p v-if="has('unknown_service')" class="text-[10px] text-amber-400">
+    <p v-if="has('unknown_service')" class="text-[10px] text-app-warning-400">
       {{ t('pipeline.builder.binaryOutputMissing') }}
     </p>
-    <p v-if="has('not_storage_capable')" class="text-[10px] text-amber-400">
+    <p v-if="has('not_storage_capable')" class="text-[10px] text-app-warning-400">
       {{ t('pipeline.builder.binaryOutputNotStorage', { capability: ASSET_STORAGE_CAPABILITY }) }}
     </p>
-    <p v-if="has('unknown_context_service')" class="text-[10px] text-amber-400">
+    <p v-if="has('unknown_context_service')" class="text-[10px] text-app-warning-400">
       {{
         t('pipeline.builder.binaryOutputContextMissing', {
           ids: pick.unknownContextIds.join(', '),
@@ -840,14 +826,14 @@ const declaredFormats = computed(() => {
          it says so and stops, exactly as run admission does. -->
     <p
       v-if="has('generators_unavailable')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-generators-unavailable"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorsUnavailable') }}
     </p>
     <p
       v-if="has('unknown_generator')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-unknown-generator"
     >
       {{
@@ -858,7 +844,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="has('modality_uncovered')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-modality-uncovered"
     >
       {{
@@ -869,7 +855,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="has('media_type_uncovered')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-media-type-uncovered"
     >
       {{
@@ -884,7 +870,7 @@ const declaredFormats = computed(() => {
          would send someone editing a selection that is fine. -->
     <p
       v-if="has('media_type_unverifiable')"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-media-type-unverifiable"
     >
       {{
@@ -900,7 +886,7 @@ const declaredFormats = computed(() => {
          mismatch. Silence here is what turned it into a surprise at the door. -->
     <p
       v-if="has('generator_harness_required')"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-generator-harness"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorHarness', { generators: harnessServedSummary }) }}
@@ -911,14 +897,14 @@ const declaredFormats = computed(() => {
          line carries is the step's own prompt, which is the field right beside it. -->
     <p
       v-if="has('generator_overlap')"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-generator-overlap"
     >
       {{ t('pipeline.builder.binaryOutputGeneratorOverlap', { overlaps: overlapSummary }) }}
     </p>
     <p
       v-if="has('capability_unsupported')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-capability-unsupported"
     >
       {{
@@ -933,7 +919,7 @@ const declaredFormats = computed(() => {
     <p
       v-for="value in pick.unacceptedValues"
       :key="value.option"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-value-unaccepted"
     >
       {{
@@ -949,7 +935,7 @@ const declaredFormats = computed(() => {
          two values on this form. -->
     <p
       v-if="has('output_size_ambiguous')"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-size-ambiguous"
     >
       {{
@@ -964,7 +950,7 @@ const declaredFormats = computed(() => {
          selections in the product. -->
     <p
       v-if="has('capability_unverifiable')"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-capability-unverifiable"
     >
       {{
@@ -979,7 +965,7 @@ const declaredFormats = computed(() => {
     <p
       v-for="value in pick.partiallyAcceptedValues"
       :key="value.option"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-value-partial"
     >
       {{
@@ -994,7 +980,7 @@ const declaredFormats = computed(() => {
          another has not said what it takes, so the step starts and is served by the second. -->
     <p
       v-if="has('option_value_unverifiable')"
-      class="text-[10px] text-slate-500"
+      class="text-[10px] text-dimmed"
       data-testid="binary-output-value-unverifiable"
     >
       {{
@@ -1005,7 +991,7 @@ const declaredFormats = computed(() => {
     </p>
     <p
       v-if="unusableMediaTypes.length"
-      class="text-[10px] text-amber-400"
+      class="text-[10px] text-app-warning-400"
       data-testid="binary-output-media-type-unusable"
     >
       {{

package/app/components/pipeline/EstimateThresholdFields.vue

@@ -53,12 +53,12 @@ function commit(axis: EstimateAxis, raw: string) {
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2">
-    <span class="text-[10px] text-slate-500" :title="t(OUTCOME_HINT_KEYS[outcome])">
+  <div class="flex flex-wrap items-center gap-2 border-t border-default pt-2">
+    <span class="text-[10px] text-dimmed" :title="t(OUTCOME_HINT_KEYS[outcome])">
       {{ t('pipeline.builder.runWhenAny') }}
     </span>
     <template v-for="f in fields" :key="f.axis">
-      <label class="text-slate-400" :title="f.hint">{{ f.label }}</label>
+      <label class="text-muted" :title="f.hint">{{ f.label }}</label>
       <input
         :value="f.value"
         :title="f.hint"
@@ -66,7 +66,7 @@ function commit(axis: EstimateAxis, raw: string) {
         min="0"
         max="1"
         step="0.1"
-        class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+        class="w-14 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
         @change="commit(f.axis, ($event.target as HTMLInputElement).value)"
       />
     </template>

package/app/components/pipeline/GateConfigFields.vue

@@ -115,13 +115,16 @@ const gateFieldValues = computed<DescriptorFieldValues>({
 
 <template>
   <div v-if="gated || gateFields?.length" class="ms-6 space-y-2" data-testid="gate-config">
-    <div v-if="gated" class="space-y-2 rounded-md border border-amber-800/40 bg-amber-950/10 p-2">
+    <div
+      v-if="gated"
+      class="space-y-2 rounded-md border border-app-warning-800/40 bg-app-warning-950/10 p-2"
+    >
       <div class="flex flex-wrap items-center gap-2 text-[10px]">
-        <span class="text-slate-500">{{ t('pipeline.gateConfig.approversLabel') }}</span>
+        <span class="text-dimmed">{{ t('pipeline.gateConfig.approversLabel') }}</span>
         <label
           v-for="role in APPROVER_ROLES"
           :key="role"
-          class="flex items-center gap-1 text-slate-400"
+          class="flex items-center gap-1 text-muted"
         >
           <input
             type="checkbox"
@@ -134,7 +137,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
       </div>
 
       <div class="flex flex-wrap items-center gap-2 text-[10px]">
-        <span class="text-slate-500">{{ t('pipeline.gateConfig.namedApproversLabel') }}</span>
+        <span class="text-dimmed">{{ t('pipeline.gateConfig.namedApproversLabel') }}</span>
         <USelectMenu
           class="w-64"
           multiple
@@ -149,7 +152,7 @@ const gateFieldValues = computed<DescriptorFieldValues>({
       </div>
 
       <div class="flex flex-wrap items-center gap-2 text-[10px]">
-        <label class="text-slate-500" :title="t('pipeline.gateConfig.requiredApprovalsHint')">
+        <label class="text-dimmed" :title="t('pipeline.gateConfig.requiredApprovalsHint')">
           {{ t('pipeline.gateConfig.requiredApprovalsLabel') }}
         </label>
         <input
@@ -158,14 +161,14 @@ const gateFieldValues = computed<DescriptorFieldValues>({
           min="1"
           :max="MAX_GATE_APPROVALS"
           step="1"
-          class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+          class="w-14 rounded border border-muted bg-default px-1.5 py-0.5 text-app-100"
           data-testid="gate-required-approvals"
           @change="setRequiredApprovals(($event.target as HTMLInputElement).value)"
         />
-        <span class="text-slate-500">{{ t('pipeline.gateConfig.requiredApprovalsHint') }}</span>
+        <span class="text-dimmed">{{ t('pipeline.gateConfig.requiredApprovalsHint') }}</span>
       </div>
 
-      <p v-if="!config.approvers" class="text-[10px] text-slate-500">
+      <p v-if="!config.approvers" class="text-[10px] text-dimmed">
         {{ t('pipeline.gateConfig.anyoneHint') }}
       </p>
     </div>
@@ -174,9 +177,9 @@ const gateFieldValues = computed<DescriptorFieldValues>({
        the gate's own English (the descriptor-form convention); only the heading is i18n. -->
     <div
       v-if="gateFields?.length"
-      class="space-y-2 rounded-md border border-slate-800 bg-slate-900/40 p-2"
+      class="space-y-2 rounded-md border border-default bg-default/40 p-2"
     >
-      <p class="text-[10px] text-slate-500">{{ t('pipeline.gateConfig.gateParametersLabel') }}</p>
+      <p class="text-[10px] text-dimmed">{{ t('pipeline.gateConfig.gateParametersLabel') }}</p>
       <DescriptorFields
         v-model="gateFieldValues"
         :fields="gateFields"

package/app/components/pipeline/IterationCapPrompt.vue

@@ -31,12 +31,14 @@ const emit = defineEmits<{ resolve: [choice: IterationCapChoice] }>()
 </script>
 
 <template>
-  <div class="rounded-lg border border-amber-500/40 bg-amber-500/5 p-4 text-sm text-amber-200">
+  <div
+    class="rounded-lg border border-app-warning-500/40 bg-app-warning-500/5 p-4 text-sm text-app-warning-200"
+  >
     <div class="flex items-center gap-2 font-medium">
       <UIcon name="i-lucide-alert-triangle" class="h-5 w-5 shrink-0" />
       {{ heading }}
     </div>
-    <p class="mt-1 text-[12px] text-amber-200/80">{{ detail }}</p>
+    <p class="mt-1 text-[12px] text-app-warning-200/80">{{ detail }}</p>
     <div class="mt-3 flex flex-wrap gap-2">
       <UButton
         color="primary"