From 18aa7036732c0fc2e2ab79e54d5d8f59a160843d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:16 -0700
Subject: [PATCH] refactor(web): ghost-muted icons follow the text; add
 ghost-destructive (#13033)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/LegacySidebar.tsx     |  1 -
 apps/web/src/components/RightPanelTabs.tsx    |  2 +-
 apps/web/src/components/Sidebar.tsx           |  2 +-
 .../chat/SnapShotAttachmentDetails.tsx        |  2 +-
 .../pullRequest/PullRequestListFilters.tsx    |  9 +-------
 .../settings/ProviderInstanceCard.tsx         | 22 +++++--------------
 .../settings/ProviderModelsSection.tsx        | 10 ++-------
 .../settings/SettingInheritance.tsx           | 18 ++++++---------
 .../src/components/settings/ThemeSettings.tsx |  3 +--
 apps/web/src/components/ui/button.tsx         |  4 +++-
 scripts/lint-restyle-ceiling.ts               |  2 +-
 11 files changed, 24 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index 5e60b9b0df7e0c5edd9c626e97b08662a5c67af9..f891e73694e6ace03466ebf74a2e202397314fe7 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -3038,7 +3038,6 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                     variant="ghost-muted"
                     aria-label="Add project"
                     data-testid="sidebar-add-project-trigger"
-                    className="[--control-icon-color:currentColor] text-icon-muted"
                     onClick={openAddProject}
                   />
                 }
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index e66909c0f9f5e43fe0dc5b4070d0add92cdb53f0..de2a0d61ee429e0b263335ee0514867fc65313bf 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -559,7 +559,7 @@ function RightPanelEmptyState(props: {
                       render={
                         <Button
                           aria-label="Open browser in a profile"
-                          className="absolute top-1/2 right-8 -translate-y-1/2 [--control-icon-color:currentColor]"
+                          className="absolute top-1/2 right-8 -translate-y-1/2"
                           size="icon-xs"
                           variant="ghost-muted"
                         />
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 799ab3f9e545adbebb9f7ce94e2d9d9dd13cbb95..a4dc6820d5183d38aa6270984432cd0242b56008 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -4517,7 +4517,7 @@ export default function Sidebar() {
                                 tabIndex={-1}
                                 aria-hidden="true"
                                 title={`Project settings for ${project.displayName}`}
-                                className="ml-auto [--control-icon-color:currentColor] text-icon-muted focus-visible:bg-accent focus-visible:text-foreground"
+                                className="ml-auto focus-visible:bg-accent focus-visible:text-foreground"
                                 onPointerDown={(event) => event.stopPropagation()}
                                 onClick={(event) => {
                                   void handleProjectSettings(event, project);
diff --git a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
index e37b3f0824b01a2119eff2306a26e7218e81aa9e..f781f1fbfa02394b34dbe365e78eb360db7617ff 100644
--- a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
+++ b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
@@ -150,7 +150,7 @@ export function SnapShotContentsButton({
                   aria-label={
                     includesAccessibility ? "View accessibility data" : "No accessibility data"
                   }
-                  className={cn("[--control-icon-color:currentColor]", className)}
+                  className={className}
                   onClick={(event) => event.stopPropagation()}
                   size="icon-micro"
                   variant="ghost-muted"
diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
index f769dd70fa4b2b80e0beff7a9ca1ad539cdc3b75..c627ff998287d967e82f75836b952d664e32b4c2 100644
--- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
@@ -500,14 +500,7 @@ export function PullRequestFiltersMenu({
   ];
   return (
     <Menu onOpenChange={onOpenChange}>
-      <MenuTrigger
-        render={
-          <Button
-            className={filterCount > 0 ? "[--control-icon-color:currentColor]" : undefined}
-            variant="outline"
-          />
-        }
-      >
+      <MenuTrigger render={<Button variant="outline" />}>
         <ListFilterIcon className="size-4" />
         <span>Filters</span>
         {filterCount > 0 ? (
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index eebd871735df333614bd854619d36e8cc22c9237..cfad142fbef4df55ace864d07d38a0f7e3f5bbd8 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -300,10 +300,6 @@ function ProviderEnvironmentSection(props: {
                       type="button"
                       size="icon-micro"
                       variant="ghost-muted"
-                      className={cn(
-                        "[--control-icon-color:currentColor]",
-                        variable.sensitive && "text-foreground",
-                      )}
                       onClick={() => {
                         const sensitive = !variable.sensitive;
                         updateVariable(variable.id, {
@@ -331,8 +327,7 @@ function ProviderEnvironmentSection(props: {
               <Button
                 type="button"
                 size="icon-micro"
-                variant="ghost-muted"
-                className="[--control-icon-color:currentColor] hover:text-destructive"
+                variant="ghost-destructive"
                 onClick={() => removeVariable(variable.id)}
                 aria-label={`Remove environment variable ${variable.name || index + 1}`}
               >
@@ -704,16 +699,12 @@ export function ProviderInstanceCard({
                 <Button
                   type="button"
                   size="icon-xs"
-                  variant="ghost"
-                  className={cn(
-                    "[--control-icon-color:currentColor]",
-                    versionAdvisory.emphasis === "strong"
-                      ? "text-warning hover:text-warning"
-                      : "text-muted-foreground hover:text-foreground",
-                  )}
+                  variant="ghost-muted"
                   aria-label="Update available — view details"
                 >
-                  <ArrowUpCircleIcon />
+                  <ArrowUpCircleIcon
+                    className={cn(versionAdvisory.emphasis === "strong" && "text-warning")}
+                  />
                 </Button>
               }
             />
@@ -793,9 +784,8 @@ export function ProviderInstanceCard({
           <Button
             type="button"
             size="icon-xs"
-            variant="ghost-muted"
+            variant="ghost-destructive"
             disabled={readOnly}
-            className="[--control-icon-color:currentColor] hover:text-destructive"
             onClick={onDelete}
             aria-label={`Delete instance ${instanceId}`}
           >
diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index 0cc88eb06384b64a31277038ad1923e51c5f08de..115baa26d05d297e982c4a9cc5652b54096c6b5b 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -312,13 +312,7 @@ export function ProviderModelsSection({
         render={
           <Button
             size="icon-micro"
-            variant="ghost"
-            className={cn(
-              "[--control-icon-color:currentColor]",
-              isFavorite
-                ? "text-yellow-500 hover:text-yellow-600"
-                : "text-muted-foreground/40 hover:text-muted-foreground",
-            )}
+            variant="ghost-muted"
             onClick={() => handleToggleFavorite(model.slug)}
             aria-label={`${isFavorite ? "Remove" : "Add"} ${model.name} ${
               isFavorite ? "from" : "to"
@@ -326,7 +320,7 @@ export function ProviderModelsSection({
           />
         }
       >
-        <StarIcon className={cn("size-3", isFavorite && "fill-current")} />
+        <StarIcon className={cn("size-3", isFavorite && "fill-current text-warning")} />
       </TooltipTrigger>
       <TooltipPopup side="top">
         {isFavorite ? "Remove from favorites" : "Add to favorites"}
diff --git a/apps/web/src/components/settings/SettingInheritance.tsx b/apps/web/src/components/settings/SettingInheritance.tsx
index a351fa5fa25b30a9edb0da6c964896b8b1824a3a..fe596a9c15236fa5f4340f4c19221829b19ea7e5 100644
--- a/apps/web/src/components/settings/SettingInheritance.tsx
+++ b/apps/web/src/components/settings/SettingInheritance.tsx
@@ -208,22 +208,18 @@ export function SettingInheritance({
                   size="icon-micro"
                   variant="ghost-muted"
                   aria-label={`${overrideSummary}. Show where this value comes from`}
-                  className={cn(
-                    "[--control-icon-color:currentColor]",
-                    state === "overridden"
-                      ? "text-primary hover:text-primary"
-                      : state === "mixed"
-                        ? "text-warning hover:text-warning"
-                        : state === "environment"
-                          ? "text-foreground/70 hover:text-foreground"
-                          : "text-muted-foreground/60 hover:text-foreground",
-                  )}
                 />
               }
             />
           }
         >
-          <LayersIcon className="size-3" />
+          <LayersIcon
+            className={cn(
+              "size-3",
+              state === "overridden" && "text-primary",
+              state === "mixed" && "text-warning",
+            )}
+          />
         </TooltipTrigger>
         <TooltipPopup side="top">{overrideSummary}</TooltipPopup>
       </Tooltip>
diff --git a/apps/web/src/components/settings/ThemeSettings.tsx b/apps/web/src/components/settings/ThemeSettings.tsx
index 6403555c4840f63edc65ca7ca9677c393924fc41..bf3305ba5a179e18d93bd5674016fbcc26192950 100644
--- a/apps/web/src/components/settings/ThemeSettings.tsx
+++ b/apps/web/src/components/settings/ThemeSettings.tsx
@@ -387,8 +387,7 @@ function ThemeLibraryCard({
                                 : `Remove ${theme.label}`
                             }
                             size="icon-xs"
-                            variant="ghost"
-                            className="text-muted-foreground hover:text-destructive"
+                            variant="ghost-destructive"
                             onClick={(event) => {
                               event.stopPropagation();
                               onRemove();
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 898e205d4843d887ed20d64a3c56554755ea173b..f3dc3efbd4223c006e1b71c4918c5f1c38a4ae75 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -49,7 +49,9 @@ const buttonVariants = cva(
         ghost:
           "[--control-icon-color:var(--contrast-muted-foreground)] border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
         "ghost-muted":
-          "[--control-icon-color:var(--contrast-muted-foreground)] border-transparent text-muted-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground",
+          "[--control-icon-color:currentColor] border-transparent text-muted-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground",
+        "ghost-destructive":
+          "[--control-icon-color:currentColor] border-transparent text-muted-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-destructive",
         glass:
           "surface-glass [--control-icon-color:var(--contrast-muted-foreground)] border-border/60 text-foreground shadow-sm [:hover,[data-pressed]]:border-border",
         link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 8940a53e5899c09c1f90c8a424b1d6e8f920be28..5fe692ce866a5f4eb074a65d7ddf3dd5fc5db3e8 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 = 899;
+export const RESTYLE_CEILING = 865;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0