From c0490e9d0eb057218bfa5df3f25a7c26c37145a5 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:10 -0700
Subject: [PATCH] refactor(web): use ghost-muted where ghost buttons restyled
 to muted (#13020)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/DiffFilePathCopyButton.tsx    |  3 +--
 apps/web/src/components/RightPanelTabs.tsx            |  4 ++--
 apps/web/src/components/chat/ProviderStatusBanner.tsx |  4 ++--
 .../src/components/diffs/DiffCommentAnnotation.tsx    | 11 +++--------
 .../components/pullRequest/PullRequestCommentBody.tsx |  4 ++--
 .../components/pullRequest/PullRequestTimelineTab.tsx |  4 ++--
 .../components/settings/AddProviderInstanceDialog.tsx |  3 +--
 .../src/components/settings/ConnectionsSettings.tsx   |  6 ++----
 .../src/components/settings/KeybindingsSettings.tsx   |  6 ++----
 .../src/components/settings/ProjectActionsList.tsx    |  4 ++--
 .../src/components/settings/ProviderInstanceCard.tsx  |  4 ++--
 scripts/lint-restyle-ceiling.ts                       |  2 +-
 12 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/components/DiffFilePathCopyButton.tsx b/apps/web/src/components/DiffFilePathCopyButton.tsx
index 49b00ed89b744f5893d0cadc403a20ab644c42d2..5e78949336cff9f4cef9869d04512960e4aaea57 100644
--- a/apps/web/src/components/DiffFilePathCopyButton.tsx
+++ b/apps/web/src/components/DiffFilePathCopyButton.tsx
@@ -24,8 +24,7 @@ export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {
           <Button
             ref={ref}
             size="icon-micro"
-            variant="ghost"
-            className="text-muted-foreground [:hover,[data-pressed]]:bg-transparent"
+            variant="ghost-muted"
             aria-label="Copy file path"
             onClick={() => copyToClipboard(filePath, undefined)}
           />
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index e1bc3f151fd9e772673e6a5d4ff37f3c637c8771..7fffbf10407977c836a7e81be97f38dfc48ef763 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -1260,9 +1260,9 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                   render={
                     <Button
                       aria-label="Add panel surface"
-                      className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                      className="size-6 shrink-0"
                       size="icon-xs"
-                      variant="ghost"
+                      variant="ghost-muted"
                     />
                   }
                 >
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx
index 12f9dc04f26a092adca1d801a28762cd08084f8d..210bff4d7ad4b636465883f25a4f485d9d991673 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx
@@ -117,10 +117,10 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
         </div>
         <Button
           aria-label={`Dismiss ${providerName} provider ${status.status}`}
-          className="absolute top-2 right-2 size-6 text-muted-foreground hover:text-foreground"
+          className="absolute top-2 right-2 size-6"
           onClick={onDismiss}
           size="icon-xs"
-          variant="ghost"
+          variant="ghost-muted"
         >
           <XIcon aria-hidden className="size-3.5" />
         </Button>
diff --git a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
index bce9f7e55f58f8ff945645a270ff259b9ec3febb..6633a593067efff72091946c482cda9fe9bbe8d1 100644
--- a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
+++ b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
@@ -68,8 +68,8 @@ export function DiffCommentAnnotation({
         <p className="min-w-0 flex-1 whitespace-pre-wrap text-[13px] leading-5">{displayedText}</p>
         {onDelete ? (
           <Button
-            className="-my-1 -mr-1 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/comment:opacity-100 focus-visible:opacity-100 max-sm:opacity-100"
-            variant="ghost"
+            className="-my-1 -mr-1 shrink-0 opacity-0 transition-opacity group-hover/comment:opacity-100 focus-visible:opacity-100 max-sm:opacity-100"
+            variant="ghost-muted"
             size="icon-xs"
             aria-label="Delete comment"
             onClick={onDelete}
@@ -115,12 +115,7 @@ export function DiffCommentAnnotation({
       />
       <div className="mt-1.5 flex items-center gap-1">
         <span className="mr-auto text-[10px] text-muted-foreground/70">⌘/Ctrl Enter to send</span>
-        <Button
-          className="text-muted-foreground hover:text-foreground"
-          variant="ghost"
-          size="xs"
-          onClick={onCancel}
-        >
+        <Button variant="ghost-muted" size="xs" onClick={onCancel}>
           Cancel
         </Button>
         {secondaryAction ? (
diff --git a/apps/web/src/components/pullRequest/PullRequestCommentBody.tsx b/apps/web/src/components/pullRequest/PullRequestCommentBody.tsx
index d730c0f859a147b5cec97983349a28a723ace3e7..073cd2a07efb5d4e2313d6ec3107f74cdc96b0fd 100644
--- a/apps/web/src/components/pullRequest/PullRequestCommentBody.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCommentBody.tsx
@@ -44,8 +44,8 @@ export function PullRequestCommentBody({
       {overflowing ? (
         <Button
           size="xs"
-          variant="ghost"
-          className="mt-2 text-muted-foreground"
+          variant="ghost-muted"
+          className="mt-2"
           aria-expanded={expanded}
           aria-controls={id}
           onClick={() => {
diff --git a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx
index 5d0ba801edb55e6f1029d368c03a2b8705a32edb..e237848ffad078341d8a7e627921c7c7426d89e7 100644
--- a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx
@@ -166,8 +166,8 @@ function OpenOnHostButton({ url, onOpen }: { url: string | null; onOpen: (url: s
   return url === null ? null : (
     <Button
       size="icon-xs"
-      variant="ghost"
-      className="-mr-1 -mt-1 shrink-0 text-muted-foreground"
+      variant="ghost-muted"
+      className="-mr-1 -mt-1 shrink-0"
       aria-label="Open activity on host"
       onClick={() => onOpen(url)}
     >
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 810a1507930d408a4c25d7643829342ba2c70591..65eb8ad7699b7df3b72fe89e87a519c76300f0ca 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -369,8 +369,7 @@ export function AddProviderInstanceDialog({
                 <Button
                   type="button"
                   size="xs"
-                  variant="ghost"
-                  className="text-muted-foreground"
+                  variant="ghost-muted"
                   onClick={() => setAccentColor("")}
                 >
                   Clear
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 0adc7aed91819d427d55e44ed4056b41ddc5507d..1d0b3e0b71f3b779e8f8d0b8a83a9e5443588d96 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -1626,9 +1626,8 @@ function SavedBackendListRow({
           render={
             <Button
               type="button"
-              variant="ghost"
+              variant="ghost-muted"
               size="icon-xs"
-              className="text-muted-foreground hover:text-foreground"
               disabled={isRemoving}
               aria-label={`More actions for ${environment.label}`}
             />
@@ -3292,9 +3291,8 @@ export function ConnectionsSettings() {
                     render={
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="ghost-muted"
                         size="icon-xs"
-                        className="text-muted-foreground hover:text-foreground"
                         aria-label="More actions for this machine"
                       />
                     }
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index bac46a56d002b29dc9e2af58f6368fbfb13d48da..4a22680b63f4e8d87481d8dc2005bc05b64e27d4 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -952,9 +952,8 @@ function KeybindingRowMenu({
         render={
           <Button
             type="button"
-            variant="ghost"
+            variant="ghost-muted"
             size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
             disabled={isSaving}
             aria-label={`Actions for ${commandLabel(row.command)}`}
           />
@@ -1232,9 +1231,8 @@ function NewKeybindingCancelIcon({
         render={
           <Button
             type="button"
-            variant="ghost"
+            variant="ghost-muted"
             size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
             disabled={isSaving}
             aria-label="Cancel new keybinding"
             onClick={onCancel}
diff --git a/apps/web/src/components/settings/ProjectActionsList.tsx b/apps/web/src/components/settings/ProjectActionsList.tsx
index 1794a5fdaa2e68882fa27557c636271ab554c833..812022a2b8f3e415b57948c841a9b39a342f0efe 100644
--- a/apps/web/src/components/settings/ProjectActionsList.tsx
+++ b/apps/web/src/components/settings/ProjectActionsList.tsx
@@ -53,8 +53,8 @@ export function ProjectActionsList({
             ) : null}
             <Button
               size="icon-xs"
-              variant="ghost"
-              className="shrink-0 text-muted-foreground opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
+              variant="ghost-muted"
+              className="shrink-0 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
               aria-label={`Edit ${script.name}`}
               disabled={disabled}
               onClick={() => onEdit(script)}
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index 0a8c8fcbe404efdd5614c3c453605f8f4ee31f65..ed8f5893f501a048daf0f9c1c228dffe4ca2ccc5 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -767,8 +767,8 @@ export function ProviderInstanceCard({
                           <Button
                             type="button"
                             size="icon-xs"
-                            variant="ghost"
-                            className="shrink-0 text-muted-foreground hover:text-foreground"
+                            variant="ghost-muted"
+                            className="shrink-0"
                             onClick={() =>
                               copyToClipboard(updateCommand, { providerName: displayName })
                             }
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 30866b393a65e45cfb2f450a04b99da4d9e85c4f..5f36d62c1d24e4a2f8452b0dc182fb2e95eecf23 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 1207;
+export const RESTYLE_CEILING = 1184;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0