authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-22 12:22:10-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-22 12:22:10-07:00
logc0490e9d0eb057218bfa5df3f25a7c26c37145a5
tree46e317a3b35872063e9b3076a22396d9f3cc47a3
parent17e34773b148fd7351a44ab39e9616b4073a1fa8
signature Signed by PGP key B5690EEEBB952194

refactor(web): use ghost-muted where ghost buttons restyled to muted (#13020)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

12 files changed, 22 insertions(+), 33 deletions(-)

apps/web/src/components/DiffFilePathCopyButton.tsx+1-2
......@@ -24,8 +24,7 @@ export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {
2424 <Button
2525 ref={ref}
2626 size="icon-micro"
27 variant="ghost"
28 className="text-muted-foreground [:hover,[data-pressed]]:bg-transparent"
27 variant="ghost-muted"
2928 aria-label="Copy file path"
3029 onClick={() => copyToClipboard(filePath, undefined)}
3130 />
apps/web/src/components/RightPanelTabs.tsx+2-2
......@@ -1260,9 +1260,9 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
12601260 render={
12611261 <Button
12621262 aria-label="Add panel surface"
1263 className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
1263 className="size-6 shrink-0"
12641264 size="icon-xs"
1265 variant="ghost"
1265 variant="ghost-muted"
12661266 />
12671267 }
12681268 >
apps/web/src/components/chat/ProviderStatusBanner.tsx+2-2
......@@ -117,10 +117,10 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
117117 </div>
118118 <Button
119119 aria-label={`Dismiss ${providerName} provider ${status.status}`}
120 className="absolute top-2 right-2 size-6 text-muted-foreground hover:text-foreground"
120 className="absolute top-2 right-2 size-6"
121121 onClick={onDismiss}
122122 size="icon-xs"
123 variant="ghost"
123 variant="ghost-muted"
124124 >
125125 <XIcon aria-hidden className="size-3.5" />
126126 </Button>
apps/web/src/components/diffs/DiffCommentAnnotation.tsx+3-8
......@@ -68,8 +68,8 @@ export function DiffCommentAnnotation({
6868 <p className="min-w-0 flex-1 whitespace-pre-wrap text-[13px] leading-5">{displayedText}</p>
6969 {onDelete ? (
7070 <Button
71 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"
72 variant="ghost"
71 className="-my-1 -mr-1 shrink-0 opacity-0 transition-opacity group-hover/comment:opacity-100 focus-visible:opacity-100 max-sm:opacity-100"
72 variant="ghost-muted"
7373 size="icon-xs"
7474 aria-label="Delete comment"
7575 onClick={onDelete}
......@@ -115,12 +115,7 @@ export function DiffCommentAnnotation({
115115 />
116116 <div className="mt-1.5 flex items-center gap-1">
117117 <span className="mr-auto text-[10px] text-muted-foreground/70">⌘/Ctrl Enter to send</span>
118 <Button
119 className="text-muted-foreground hover:text-foreground"
120 variant="ghost"
121 size="xs"
122 onClick={onCancel}
123 >
118 <Button variant="ghost-muted" size="xs" onClick={onCancel}>
124119 Cancel
125120 </Button>
126121 {secondaryAction ? (
apps/web/src/components/pullRequest/PullRequestCommentBody.tsx+2-2
......@@ -44,8 +44,8 @@ export function PullRequestCommentBody({
4444 {overflowing ? (
4545 <Button
4646 size="xs"
47 variant="ghost"
48 className="mt-2 text-muted-foreground"
47 variant="ghost-muted"
48 className="mt-2"
4949 aria-expanded={expanded}
5050 aria-controls={id}
5151 onClick={() => {
apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx+2-2
......@@ -166,8 +166,8 @@ function OpenOnHostButton({ url, onOpen }: { url: string | null; onOpen: (url: s
166166 return url === null ? null : (
167167 <Button
168168 size="icon-xs"
169 variant="ghost"
170 className="-mr-1 -mt-1 shrink-0 text-muted-foreground"
169 variant="ghost-muted"
170 className="-mr-1 -mt-1 shrink-0"
171171 aria-label="Open activity on host"
172172 onClick={() => onOpen(url)}
173173 >
apps/web/src/components/settings/AddProviderInstanceDialog.tsx+1-2
......@@ -369,8 +369,7 @@ export function AddProviderInstanceDialog({
369369 <Button
370370 type="button"
371371 size="xs"
372 variant="ghost"
373 className="text-muted-foreground"
372 variant="ghost-muted"
374373 onClick={() => setAccentColor("")}
375374 >
376375 Clear
apps/web/src/components/settings/ConnectionsSettings.tsx+2-4
......@@ -1626,9 +1626,8 @@ function SavedBackendListRow({
16261626 render={
16271627 <Button
16281628 type="button"
1629 variant="ghost"
1629 variant="ghost-muted"
16301630 size="icon-xs"
1631 className="text-muted-foreground hover:text-foreground"
16321631 disabled={isRemoving}
16331632 aria-label={`More actions for ${environment.label}`}
16341633 />
......@@ -3292,9 +3291,8 @@ export function ConnectionsSettings() {
32923291 render={
32933292 <Button
32943293 type="button"
3295 variant="ghost"
3294 variant="ghost-muted"
32963295 size="icon-xs"
3297 className="text-muted-foreground hover:text-foreground"
32983296 aria-label="More actions for this machine"
32993297 />
33003298 }
apps/web/src/components/settings/KeybindingsSettings.tsx+2-4
......@@ -952,9 +952,8 @@ function KeybindingRowMenu({
952952 render={
953953 <Button
954954 type="button"
955 variant="ghost"
955 variant="ghost-muted"
956956 size="icon-sm"
957 className="text-muted-foreground hover:text-foreground"
958957 disabled={isSaving}
959958 aria-label={`Actions for ${commandLabel(row.command)}`}
960959 />
......@@ -1232,9 +1231,8 @@ function NewKeybindingCancelIcon({
12321231 render={
12331232 <Button
12341233 type="button"
1235 variant="ghost"
1234 variant="ghost-muted"
12361235 size="icon-sm"
1237 className="text-muted-foreground hover:text-foreground"
12381236 disabled={isSaving}
12391237 aria-label="Cancel new keybinding"
12401238 onClick={onCancel}
apps/web/src/components/settings/ProjectActionsList.tsx+2-2
......@@ -53,8 +53,8 @@ export function ProjectActionsList({
5353 ) : null}
5454 <Button
5555 size="icon-xs"
56 variant="ghost"
57 className="shrink-0 text-muted-foreground opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
56 variant="ghost-muted"
57 className="shrink-0 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
5858 aria-label={`Edit ${script.name}`}
5959 disabled={disabled}
6060 onClick={() => onEdit(script)}
apps/web/src/components/settings/ProviderInstanceCard.tsx+2-2
......@@ -767,8 +767,8 @@ export function ProviderInstanceCard({
767767 <Button
768768 type="button"
769769 size="icon-xs"
770 variant="ghost"
771 className="shrink-0 text-muted-foreground hover:text-foreground"
770 variant="ghost-muted"
771 className="shrink-0"
772772 onClick={() =>
773773 copyToClipboard(updateCommand, { providerName: displayName })
774774 }
scripts/lint-restyle-ceiling.ts+1-1
......@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
88// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
99// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
1010// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 1207;
11export const RESTYLE_CEILING = 1184;
1212
1313const RULE = "shadcn(no-restyle)";
1414