@cat-factory/app 0.310.1 → 0.310.3

package/README.md

@@ -330,6 +330,29 @@ Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML ele
 - **Prose and layout markup is not in scope.** `<p>`, `<h1>`-`<h6>`, `<ul>`, `<li>`, `<dl>`, `<pre>`, `<code>`, `<img>`, `<nav>`, `<div>` and `<span>` are not controls and have no Nuxt UI component; heading typography is the type scale's rule above.
 - `scripts/check-frontend-primitives.mjs` (CI) holds the count at zero. There is deliberately **no allow-list**: the migration expected two exceptions (a Vue Flow gesture handle, a full-bleed media tile) and both converted cleanly, so the exception table would have had more surface than the thing it governed. A site that genuinely cannot convert says why with a `raw-control-ok:` comment, on that line or the one above; nothing in the tree needs one, and a second one appearing is the signal that the rule needs revisiting rather than the site.
 
+### Buttons and badges follow one variant policy
+
+What a primary, a secondary or a destructive action looks like is decided once, here, and not per call site. The weights are Nuxt UI's own [variant table](https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/design-system.md) (`solid` highest, then `outline`, `soft`, `subtle`, `ghost`, and `link` for a text link inside content), mapped onto the app's kinds of action:
+
+| Kind                                                                  | Props                                                                                                                                                                                   |
+| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary action, ONE per view                                          | none (the default, `primary solid`)                                                                                                                                                     |
+| Dismissal in a dialog or form (Cancel, Close)                         | `color="neutral" variant="ghost"`                                                                                                                                                       |
+| Real secondary action (Save draft, Back)                              | `color="neutral" variant="outline"`                                                                                                                                                     |
+| Bulk action in a dialog footer, beside Close (Reseed all, Update all) | `variant="ghost"` (primary colour): the dialog's main action, kept light because each row above it has its own button                                                                   |
+| Send-back on a gate (bounce, request a fix)                           | `color="warning" variant="soft"`, so the approve beside it stays the one primary                                                                                                        |
+| Inline, navigation and chrome actions                                 | `color="neutral" variant="ghost"`, usually with `size="xs"`                                                                                                                             |
+| Icon-only action                                                      | `IconButton` with `color="neutral" variant="ghost"`                                                                                                                                     |
+| Destructive action, labelled                                          | `color="error" variant="soft"`; `color="error"` alone (solid) only as the confirm step of a destructive action (a dialog's confirm, or an armed inline confirm such as a step's reject) |
+| Destructive action, icon-only (a row's trash icon)                    | `IconButton` with `color="error" variant="ghost"`                                                                                                                                       |
+| A banner's call to action                                             | solid, in the banner's colour (`color="warning"`, `color="error"`)                                                                                                                      |
+| Status chip                                                           | `UBadge` with `variant="subtle" size="sm"`, and a `BadgeColor` map for the colour                                                                                                       |
+
+- **The defaults are Nuxt UI's own**: `primary solid md` for both `UButton` and `UBadge`, stated in `app.config.ts` (`ui.button.defaultVariants`, `ui.badge.defaultVariants`) so the value has one visible home and the guard can read it. A call site states only what DIFFERS.
+- **One solid button per view.** Two solid buttons side by side compete for the same attention, so the second action takes a lighter variant from the table. The guard refuses two solid buttons under one parent element; it counts a `v-if` chain as one button and a `v-for` list as one, looks through a plain `<template>` wrapper, and treats a slot `<template #name>` as its own region. A file holding several forms that each end in a Save is several views and passes. A site that genuinely needs two says why with a `solid-ok:` comment on its own line, directly above the second button.
+- **The unstyled group is the one a theme restyles, so it is the primary tier.** A theme document's `style.defaults` (a size, a button variant, a button colour) REPLACES the default for every control that does not state that prop; it does not scale or shift the others. So whichever group is unstyled is the group a theme moves. With the primary actions unstyled, a theme with `size: 'lg'` or `variants: { buttons: 'outline' }` restyles the actions and leaves the chrome alone. With the quiet chrome unstyled, the same theme would grow or fill every toolbar and icon button past the actions and invert the hierarchy. This is why the dense, quiet chrome carries its props and the primary action carries none, and why Nuxt UI's own internal buttons (a modal's close button, a toast's actions) agree with the app's.
+- **A restated default is a bug, not noise.** It pins the value against a theme that changes the default, and it hides which props are the reason a control looks the way it does. `scripts/check-frontend-variants.mjs` (CI) refuses a value equal to the default on `UButton` and `UBadge` (either casing, either quote style, or a key of a `v-bind="{ … }"` object) and on every component that spreads its attributes into one (`IconButton`; the list is derived, so a new wrapper is covered), reading the defaults from `app.config.ts` itself. Inside a `UFieldGroup` or `UButtonGroup` it does not check `size`: the group sets the size there, so an explicit `size` overrides the group rather than restating the default. It reads template tags only, so a `ButtonProps` object (a toast's `actions`, a modal's `:close`) is not checked. A site that must keep a literal says why with a `variant-default-ok:` comment on its own line, directly above the tag; it waives that tag only.
+
 ### Themes and colour mode
 
 A **theme** is a Nuxt UI theme editor document (https://ui.nuxt.com/theme): the sparse `ThemeDoc` the editor edits and shares as a `?doc=` link, decoded by `utils/theme/link.ts` and typed in `utils/theme/doc.ts` (a port of the editor engine's tables). The app speaks THAT format rather than one of its own, so a theme built in the editor imports as-is and a built-in theme is a document a user could have exported. `utils/theme/builtins.ts` ships `Cat Factory` (the default; its `colors` MUST equal `app.config.ts`'s `ui.colors`, which paints the first frame) and the editor's own `Mono` preset, referenced from the preset table rather than copied. The `theme` store persists the pick and the user's imported documents in this browser; `plugins/theme.client.ts` applies the active document at runtime: aliases onto `appConfig.ui.colors` (Nuxt UI's own colours plugin re-emits the ramps), default variants and component overrides onto `appConfig.ui.<component>` merged INTO the layer's own overrides, and tokens / radius / fonts onto one `<style id="app-theme">` whose selectors anchor on the `data-theme` attribute on `<html>` (`utils/theme/css.ts`, which is also the write boundary for untrusted values). The faces the built-in themes name (Geist, Geist Mono) are self-hosted through `@nuxt/fonts` (`fonts.families` in `nuxt.config.ts`, pinned by `builtins.spec.ts`); a font an IMPORTED theme names is applied as a family name only, so it renders when the device or the deployment provides it. A editor link whose document equals one of the editor's presets collapses to `{ preset: 'mono' }`; `utils/theme/presets.ts` is a copy of the editor's preset table so such a link rebuilds (a decode table, not menu entries).

package/app/app.config.ts

@@ -12,6 +12,17 @@ export default defineAppConfig({
       error: 'rose',
       neutral: 'slate',
     },
+    // The default button and badge are Nuxt UI's own, stated so they have one visible home and
+    // `scripts/check-frontend-variants.mjs` can refuse a literal equal to them (the variant policy
+    // in `frontend/app/README.md`). They must stay the PRIMARY tier: a theme's `style.defaults`
+    // replaces these for every control that does not state the prop, so the unstyled group is the
+    // one a theme restyles, and the quiet chrome states `color="neutral" variant="ghost"` itself.
+    button: {
+      defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
+    },
+    badge: {
+      defaultVariants: { color: 'primary', variant: 'solid', size: 'md' },
+    },
     // Give every overlay the same layered surface the agent-run-details reader uses: the deep
     // `app-950` surface (below `bg-default`) so the `bg-default` panels/cards inside pop, with
     // `border-default` chrome. All tokens are theme role tokens (`app-950` is the hand-defined

package/app/components/assistant/AssistantModal.vue

@@ -220,7 +220,6 @@ function reveal(blockId: string): void {
 
           <div class="flex flex-wrap items-center gap-2">
             <UButton
-              color="primary"
               icon="i-lucide-sparkles"
               :loading="assistant.running"
               :disabled="gate.state !== 'ready'"

package/app/components/auth/BackendMisconfiguredScreen.vue

@@ -56,7 +56,7 @@ function reload() {
       </ul>
 
       <div class="mt-6 flex items-center justify-center gap-3">
-        <UButton color="primary" icon="i-lucide-rotate-ccw" @click="reload">
+        <UButton icon="i-lucide-rotate-ccw" @click="reload">
           {{ t('app.misconfigured.reload') }}
         </UButton>
       </div>

package/app/components/auth/LoginScreen.vue

@@ -234,7 +234,6 @@ const noSignInMethod = computed(
         <UButton
           block
           size="lg"
-          color="primary"
           icon="i-lucide-cloud"
           data-testid="mothership-signin"
           @click="auth.signInViaMothership()"
@@ -260,7 +259,6 @@ const noSignInMethod = computed(
           :key="p"
           block
           size="lg"
-          color="primary"
           :icon="PROVIDER_ICONS[p]"
           :loading="patBusy"
           @click="submitPat(p)"
@@ -329,7 +327,6 @@ const noSignInMethod = computed(
         <UButton
           block
           size="lg"
-          color="primary"
           icon="i-lucide-building-2"
           data-testid="sso-signin"
           @click="auth.loginWithSso(invite)"
@@ -352,7 +349,6 @@ const noSignInMethod = computed(
           v-if="auth.providers.github"
           block
           size="lg"
-          color="primary"
           icon="i-lucide-github"
           @click="auth.login(invite)"
         >
@@ -413,14 +409,7 @@ const noSignInMethod = computed(
           data-testid="login-password"
         />
         <p v-if="error" class="text-sm text-app-error-400" data-testid="login-error">{{ error }}</p>
-        <UButton
-          block
-          size="lg"
-          color="primary"
-          type="submit"
-          :loading="busy"
-          data-testid="login-submit"
-        >
+        <UButton block size="lg" type="submit" :loading="busy" data-testid="login-submit">
           {{ mode === 'signup' ? t('auth.login.createAccount') : t('auth.login.signIn') }}
         </UButton>
         <p class="text-center text-xs text-muted">
@@ -428,7 +417,6 @@ const noSignInMethod = computed(
             <i18n-t keypath="auth.login.needAccount" tag="span" scope="global">
               <template #signUp>
                 <UButton
-                  color="primary"
                   variant="link"
                   class="p-0 text-xs text-primary hover:underline"
                   @click="setMode('signup')"
@@ -442,7 +430,6 @@ const noSignInMethod = computed(
             <i18n-t keypath="auth.login.haveAccount" tag="span" scope="global">
               <template #signIn>
                 <UButton
-                  color="primary"
                   variant="link"
                   class="p-0 text-xs text-primary hover:underline"
                   @click="setMode('login')"
@@ -455,7 +442,6 @@ const noSignInMethod = computed(
         </p>
         <p v-if="mode === 'login'" class="text-center text-xs text-muted">
           <UButton
-            color="primary"
             variant="link"
             class="p-0 text-xs text-primary hover:underline"
             @click="setMode('forgot')"
@@ -512,7 +498,6 @@ const noSignInMethod = computed(
           <UButton
             block
             size="lg"
-            color="primary"
             type="submit"
             :icon="PROVIDER_ICONS[remotePatProvider]"
             :loading="remotePatBusy"
@@ -572,13 +557,12 @@ const noSignInMethod = computed(
             class="w-full"
           />
           <p v-if="error" class="text-sm text-app-error-400">{{ error }}</p>
-          <UButton block size="lg" color="primary" type="submit" :loading="busy">
+          <UButton block size="lg" type="submit" :loading="busy">
             {{ t('auth.login.sendResetLink') }}
           </UButton>
         </template>
         <p class="text-center text-xs text-muted">
           <UButton
-            color="primary"
             variant="link"
             class="p-0 text-xs text-primary hover:underline"
             @click="setMode('login')"

package/app/components/auth/ResetPasswordScreen.vue

@@ -62,7 +62,7 @@ function goToLogin() {
         <p class="mb-4 text-sm text-toned">
           {{ t('auth.resetPassword.doneBody') }}
         </p>
-        <UButton block size="lg" color="primary" @click="goToLogin">{{
+        <UButton block size="lg" @click="goToLogin">{{
           t('auth.resetPassword.goToSignIn')
         }}</UButton>
       </template>
@@ -94,12 +94,11 @@ function goToLogin() {
           class="w-full"
         />
         <p v-if="error" class="text-sm text-app-error-400">{{ error }}</p>
-        <UButton block size="lg" color="primary" type="submit" :loading="busy">
+        <UButton block size="lg" type="submit" :loading="busy">
           {{ t('auth.resetPassword.submit') }}
         </UButton>
         <p class="text-center text-xs text-muted">
           <UButton
-            color="primary"
             variant="link"
             class="p-0 text-xs text-primary hover:underline"
             @click="goToLogin"

package/app/components/board/AddTaskModal.vue

@@ -1456,7 +1456,6 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
           t('common.cancel')
         }}</UButton>
         <UButton
-          color="primary"
           data-testid="add-task-submit"
           :icon="isRecurring ? 'i-lucide-arrow-right' : 'i-lucide-plus'"
           :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"

package/app/components/board/BoardCanvas.vue

@@ -179,7 +179,6 @@ function onPaneClick() {
       >
         <UButton
           v-if="access.canManageIntegrations.value"
-          color="primary"
           icon="i-lucide-git-branch-plus"
           @click="ui.openBootstrap()"
         >
@@ -187,7 +186,6 @@ function onPaneClick() {
         </UButton>
         <UButton
           v-if="github.available && access.canWriteBoard.value"
-          color="primary"
           variant="soft"
           icon="i-lucide-folder-git-2"
           @click="ui.openAddService()"

package/app/components/board/CreateInitiativeModal.vue

@@ -285,7 +285,6 @@ async function create() {
         </UButton>
         <UButton
           data-testid="create-initiative-submit"
-          color="primary"
           :loading="submitting || initiatives.creating"
           :disabled="!canSubmit"
           @click="create"

package/app/components/board/RecurringPipelineModal.vue

@@ -689,13 +689,7 @@ async function add() {
         <UButton color="neutral" variant="ghost" @click="requestClose()">{{
           t('common.cancel')
         }}</UButton>
-        <UButton
-          color="primary"
-          icon="i-lucide-repeat"
-          :loading="saving"
-          :disabled="!canAdd"
-          @click="add"
-        >
+        <UButton icon="i-lucide-repeat" :loading="saving" :disabled="!canAdd" @click="add">
           {{ t('board.recurring.submit') }}
         </UButton>
       </div>

package/app/components/board/ReviewFrictionDialog.vue

@@ -135,13 +135,7 @@ function createAnyway() {
           >
             {{ t('errors.reviewFriction.createAnyway') }}
           </UButton>
-          <UButton
-            color="primary"
-            size="sm"
-            icon="i-lucide-list-checks"
-            :disabled="pending"
-            @click="goReview"
-          >
+          <UButton size="sm" icon="i-lucide-list-checks" :disabled="pending" @click="goReview">
             {{ t('errors.reviewFriction.goReview') }}
           </UButton>
         </div>

package/app/components/board/nodes/InitiativeCard.vue

@@ -105,7 +105,6 @@ function select() {
           data-testid="initiative-card-review"
           :data-attention="attention.kind"
           size="xs"
-          variant="solid"
           color="warning"
           :icon="INITIATIVE_ATTENTION_ICONS[attention.kind]"
           @click.stop="attention.open()"
@@ -116,8 +115,6 @@ function select() {
           v-else-if="awaitingAnswers"
           data-testid="initiative-card-answer-planning"
           size="xs"
-          variant="solid"
-          color="primary"
           icon="i-lucide-messages-square"
           @click.stop="openPlanning"
         >
@@ -141,7 +138,6 @@ function select() {
           data-testid="initiative-card-run-planning"
           size="xs"
           variant="soft"
-          color="primary"
           icon="i-lucide-play"
           :loading="starting || running"
           :disabled="!planningPipeline || running || starting"

package/app/components/board/nodes/TaskCard.vue

@@ -495,7 +495,6 @@ function selectTask() {
       <template v-if="task.status === 'pr_ready'">
         <UButton
           v-if="outcomeReadable"
-          color="primary"
           variant="soft"
           size="xs"
           icon="i-lucide-clipboard-check"
@@ -530,13 +529,7 @@ function selectTask() {
         >
           {{ t('board.task.review') }}
         </UButton>
-        <UButton
-          color="success"
-          variant="solid"
-          size="xs"
-          icon="i-lucide-git-merge"
-          @click.stop="merge"
-        >
+        <UButton color="success" size="xs" icon="i-lucide-git-merge" @click.stop="merge">
           {{ t('board.task.merge') }}
         </UButton>
       </template>

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -387,7 +387,6 @@ watch(open, (isOpen) => {
             {{ t('common.cancel') }}
           </UButton>
           <UButton
-            color="primary"
             icon="i-lucide-play"
             :loading="submitting"
             :disabled="!canSubmit"

package/app/components/bootstrap/BootstrapModal.vue

@@ -900,7 +900,6 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
 
           <div class="flex justify-end">
             <UButton
-              color="primary"
               icon="i-lucide-rocket"
               :loading="launching"
               :disabled="!canLaunch"
@@ -1082,12 +1081,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               >
                 {{ t('common.cancel') }}
               </UButton>
-              <UButton
-                color="primary"
-                :loading="savingArch"
-                :disabled="!canSaveArch"
-                @click="saveArch"
-              >
+              <UButton :loading="savingArch" :disabled="!canSaveArch" @click="saveArch">
                 {{ archForm.id ? t('common.save') : t('bootstrap.arch.add') }}
               </UButton>
             </div>

package/app/components/brainstorm/BrainstormWindow.vue

@@ -408,7 +408,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     />
                     <div class="mt-2 flex flex-wrap items-center gap-2">
                       <UButton
-                        color="primary"
                         variant="soft"
                         size="xs"
                         icon="i-lucide-corner-down-left"
@@ -519,7 +518,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <div v-if="session && status === 'ready'" class="space-y-2 border-t border-default pt-4">
             <UButton
               v-if="canProceed"
-              color="primary"
               size="sm"
               block
               icon="i-lucide-arrow-right"
@@ -533,7 +531,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </UButton>
             <UButton
               v-else
-              color="primary"
               size="sm"
               block
               icon="i-lucide-wand-sparkles"
@@ -558,7 +555,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- action: merged (inspect → re-run / redo) -->
           <div v-if="session && merged" class="space-y-2 border-t border-default pt-4">
             <UButton
-              color="primary"
               size="sm"
               block
               icon="i-lucide-sparkles"
@@ -593,7 +589,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 :placeholder="t('brainstorm.redoPlaceholder')"
               />
               <UButton
-                color="primary"
                 variant="soft"
                 size="xs"
                 block

package/app/components/bugFishing/BugFishingWindow.vue

@@ -612,7 +612,6 @@ const PHASE_ICON: Record<string, string> = {
             <div v-if="isOpen(finding) && canAct" class="mt-2 flex items-center gap-2">
               <UButton
                 size="xs"
-                color="primary"
                 icon="i-lucide-wrench"
                 :loading="bugFishing.spawning.has(finding.id)"
                 :disabled="finding.dismissed || bugFishing.spawning.has(finding.id)"
@@ -654,7 +653,6 @@ const PHASE_ICON: Record<string, string> = {
         }}
       </p>
       <UButton
-        color="primary"
         icon="i-lucide-check"
         :loading="bugFishing.resolving"
         :disabled="!canAct"

package/app/components/clarity/ClarityReviewWindow.vue

@@ -552,7 +552,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <div v-if="review && status === 'ready'" class="space-y-2 border-t border-default pt-4">
             <UButton
               v-if="canProceed"
-              color="primary"
               size="sm"
               block
               icon="i-lucide-arrow-right"
@@ -566,7 +565,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </UButton>
             <UButton
               v-else
-              color="primary"
               size="sm"
               block
               icon="i-lucide-wand-sparkles"
@@ -591,7 +589,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- action: merged (inspect → re-review / redo) -->
           <div v-if="review && merged" class="space-y-2 border-t border-default pt-4">
             <UButton
-              color="primary"
               size="sm"
               block
               icon="i-lucide-sparkles"
@@ -626,7 +623,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 :placeholder="t('clarity.redoPlaceholder')"
               />
               <UButton
-                color="primary"
                 variant="soft"
                 size="xs"
                 block

package/app/components/common/AsyncViewError.vue

@@ -22,7 +22,7 @@ function reload() {
       <p class="mt-2 text-xs leading-relaxed text-muted">
         {{ t('errors.asyncView.body') }}
       </p>
-      <UButton class="mt-4" color="primary" variant="soft" size="xs" @click="reload">
+      <UButton class="mt-4" variant="soft" size="xs" @click="reload">
         {{ t('errors.asyncView.reload') }}
       </UButton>
     </div>

package/app/components/common/ClarificationItem.vue

@@ -113,7 +113,6 @@ const draft = computed({
           v-if="canRecommend !== false"
           size="xs"
           variant="soft"
-          color="primary"
           icon="i-lucide-wand-2"
           data-testid="clarification-recommend"
           :loading="recommending"
@@ -139,7 +138,6 @@ const draft = computed({
           class="mt-1.5"
           size="xs"
           variant="soft"
-          color="primary"
           icon="i-lucide-check"
           data-testid="clarification-use-recommendation"
           :disabled="disabled"

package/app/components/context/ContextAttachmentFields.vue

@@ -259,7 +259,7 @@ function removePending(item: PendingContext) {
             })
           }}
         </span>
-        <UButton color="primary" variant="soft" size="xs" @click="acceptOffer">
+        <UButton variant="soft" size="xs" @click="acceptOffer">
           {{ t('contextAttachments.pastedLink.attach') }}
         </UButton>
       </div>

package/app/components/docs/DocInterviewWindow.vue

@@ -255,7 +255,6 @@ const onProceed = () =>
           {{ t('docInterview.proceed') }}
         </UButton>
         <UButton
-          color="primary"
           size="sm"
           :loading="resuming"
           :disabled="!!continueBlockedReason"

package/app/components/documents/DocumentImportModal.vue

@@ -87,7 +87,6 @@ function preview(externalId: string) {
           <UButton
             v-for="s in documents.sources"
             :key="s.source"
-            color="primary"
             variant="soft"
             :icon="s.icon"
             @click="ui.openDocumentConnect(s.source)"
@@ -115,7 +114,6 @@ function preview(externalId: string) {
             />
           </UFormField>
           <UButton
-            color="primary"
             icon="i-lucide-file-down"
             :loading="importing"
             :disabled="!ref_.trim()"
@@ -149,7 +147,6 @@ function preview(externalId: string) {
                 <DocumentSyncState :doc="doc" class="mt-1" />
               </div>
               <UButton
-                color="primary"
                 variant="soft"
                 size="xs"
                 icon="i-lucide-wand-sparkles"

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -124,7 +124,6 @@ async function disconnect() {
 
         <div v-if="oauth" class="space-y-2">
           <UButton
-            color="primary"
             icon="i-lucide-shield-check"
             :loading="startingOAuth"
             data-testid="document-connect-oauth"
@@ -158,20 +157,14 @@ async function disconnect() {
           <UButton
             v-if="connected"
             color="error"
-            variant="ghost"
+            variant="soft"
             icon="i-lucide-unplug"
             @click="disconnect"
           >
             {{ t('documents.connect.disconnect') }}
           </UButton>
           <div v-else />
-          <UButton
-            color="primary"
-            icon="i-lucide-plug"
-            :loading="saving"
-            :disabled="!canSubmit"
-            @click="submit"
-          >
+          <UButton icon="i-lucide-plug" :loading="saving" :disabled="!canSubmit" @click="submit">
             {{ connected ? t('documents.connect.update') : t('documents.connect.connect') }}
           </UButton>
         </div>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -100,12 +100,7 @@ async function unlink(doc: SourceDocument) {
         <div v-if="!documents.documents.length" class="space-y-3 text-center">
           <UIcon name="i-lucide-file-plus" class="mx-auto h-8 w-8 text-dimmed" />
           <p class="text-sm text-muted">{{ t('documents.templates.importFirst') }}</p>
-          <UButton
-            color="primary"
-            variant="soft"
-            icon="i-lucide-file-down"
-            @click="ui.openDocumentImport()"
-          >
+          <UButton variant="soft" icon="i-lucide-file-down" @click="ui.openDocumentImport()">
             {{ t('documents.templates.importButton') }}
           </UButton>
         </div>
@@ -215,7 +210,6 @@ async function unlink(doc: SourceDocument) {
               />
             </UFormField>
             <UButton
-              color="primary"
               variant="soft"
               icon="i-lucide-file-badge"
               :loading="busy"

package/app/components/documents/SpawnPreviewModal.vue

@@ -219,7 +219,6 @@ async function spawn() {
             t('common.cancel')
           }}</UButton>
           <UButton
-            color="primary"
             icon="i-lucide-wand-sparkles"
             :loading="spawning"
             :disabled="!plan || loadingPlan"

package/app/components/documents/StartFromDesignModal.vue

@@ -221,7 +221,6 @@ function stage() {
             {{ t('common.cancel') }}
           </UButton>
           <UButton
-            color="primary"
             icon="i-lucide-arrow-right"
             :disabled="!row || !target"
             data-testid="start-from-design-continue"

package/app/components/environments/steps/EnvPreflightStep.vue

@@ -39,7 +39,6 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
       <UButton
         size="xs"
         variant="soft"
-        color="primary"
         icon="i-lucide-list-checks"
         :loading="store.preflightRunning"
         data-testid="env-setup-preflight-run"
@@ -101,7 +100,6 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
     <JourneyStepNav :go-back="goBack">
       <template #primary>
         <UButton
-          color="primary"
           trailing-icon="i-lucide-arrow-right"
           data-testid="env-setup-next"
           @click="exit('advance')"

package/app/components/environments/steps/EnvReviewStep.vue

@@ -120,7 +120,6 @@ const canLeaveReview = computed(
       <UButton
         size="xs"
         variant="soft"
-        color="primary"
         icon="i-lucide-wand-sparkles"
         :loading="store.detecting"
         :disabled="!store.hasRepo"
@@ -200,7 +199,6 @@ const canLeaveReview = computed(
           <UButton
             size="xs"
             variant="soft"
-            color="primary"
             icon="i-lucide-git-merge"
             data-testid="env-setup-apply-analysis"
             @click="store.applyAnalystDraft()"
@@ -360,7 +358,7 @@ const canLeaveReview = computed(
             {{ rawError }}
           </p>
           <div class="flex justify-end">
-            <UButton size="xs" color="primary" data-testid="env-setup-raw-apply" @click="applyRaw">
+            <UButton size="xs" data-testid="env-setup-raw-apply" @click="applyRaw">
               {{ t('environmentWizard.review.rawApply') }}
             </UButton>
           </div>
@@ -371,7 +369,6 @@ const canLeaveReview = computed(
     <JourneyStepNav :go-back="goBack">
       <template #primary>
         <UButton
-          color="primary"
           trailing-icon="i-lucide-arrow-right"
           :disabled="!canLeaveReview"
           data-testid="env-setup-next"

package/app/components/environments/steps/EnvSaveStep.vue

@@ -52,7 +52,6 @@ useEnvironmentWizardTarget(() => props.input.frameId)
 
     <div v-if="!store.saved" class="flex justify-end">
       <UButton
-        color="primary"
         icon="i-lucide-save"
         :loading="store.saving"
         :disabled="!store.composeService.trim()"