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 }) {...@@ -24,8 +24,7 @@ export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {
24 <Button24 <Button
25 ref={ref}25 ref={ref}
26 size="icon-micro"26 size="icon-micro"
27 variant="ghost"27 variant="ghost-muted"
28 className="text-muted-foreground [:hover,[data-pressed]]:bg-transparent"
29 aria-label="Copy file path"28 aria-label="Copy file path"
30 onClick={() => copyToClipboard(filePath, undefined)}29 onClick={() => copyToClipboard(filePath, undefined)}
31 />30 />
apps/web/src/components/RightPanelTabs.tsx+2-2
...@@ -1260,9 +1260,9 @@ export function RightPanelTabs(props: RightPanelTabsProps) {...@@ -1260,9 +1260,9 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
1260 render={1260 render={
1261 <Button1261 <Button
1262 aria-label="Add panel surface"1262 aria-label="Add panel surface"
1263 className="size-6 shrink-0 text-muted-foreground hover:text-foreground"1263 className="size-6 shrink-0"
1264 size="icon-xs"1264 size="icon-xs"
1265 variant="ghost"1265 variant="ghost-muted"
1266 />1266 />
1267 }1267 }
1268 >1268 >
apps/web/src/components/chat/ProviderStatusBanner.tsx+2-2
...@@ -117,10 +117,10 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({...@@ -117,10 +117,10 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
117 </div>117 </div>
118 <Button118 <Button
119 aria-label={`Dismiss ${providerName} provider ${status.status}`}119 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"
121 onClick={onDismiss}121 onClick={onDismiss}
122 size="icon-xs"122 size="icon-xs"
123 variant="ghost"123 variant="ghost-muted"
124 >124 >
125 <XIcon aria-hidden className="size-3.5" />125 <XIcon aria-hidden className="size-3.5" />
126 </Button>126 </Button>
apps/web/src/components/diffs/DiffCommentAnnotation.tsx+3-8
...@@ -68,8 +68,8 @@ export function DiffCommentAnnotation({...@@ -68,8 +68,8 @@ export function DiffCommentAnnotation({
68 <p className="min-w-0 flex-1 whitespace-pre-wrap text-[13px] leading-5">{displayedText}</p>68 <p className="min-w-0 flex-1 whitespace-pre-wrap text-[13px] leading-5">{displayedText}</p>
69 {onDelete ? (69 {onDelete ? (
70 <Button70 <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"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"72 variant="ghost-muted"
73 size="icon-xs"73 size="icon-xs"
74 aria-label="Delete comment"74 aria-label="Delete comment"
75 onClick={onDelete}75 onClick={onDelete}
...@@ -115,12 +115,7 @@ export function DiffCommentAnnotation({...@@ -115,12 +115,7 @@ export function DiffCommentAnnotation({
115 />115 />
116 <div className="mt-1.5 flex items-center gap-1">116 <div className="mt-1.5 flex items-center gap-1">
117 <span className="mr-auto text-[10px] text-muted-foreground/70">⌘/Ctrl Enter to send</span>117 <span className="mr-auto text-[10px] text-muted-foreground/70">⌘/Ctrl Enter to send</span>
118 <Button118 <Button variant="ghost-muted" size="xs" onClick={onCancel}>
119 className="text-muted-foreground hover:text-foreground"
120 variant="ghost"
121 size="xs"
122 onClick={onCancel}
123 >
124 Cancel119 Cancel
125 </Button>120 </Button>
126 {secondaryAction ? (121 {secondaryAction ? (
apps/web/src/components/pullRequest/PullRequestCommentBody.tsx+2-2
...@@ -44,8 +44,8 @@ export function PullRequestCommentBody({...@@ -44,8 +44,8 @@ export function PullRequestCommentBody({
44 {overflowing ? (44 {overflowing ? (
45 <Button45 <Button
46 size="xs"46 size="xs"
47 variant="ghost"47 variant="ghost-muted"
48 className="mt-2 text-muted-foreground"48 className="mt-2"
49 aria-expanded={expanded}49 aria-expanded={expanded}
50 aria-controls={id}50 aria-controls={id}
51 onClick={() => {51 onClick={() => {
apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx+2-2
...@@ -166,8 +166,8 @@ function OpenOnHostButton({ url, onOpen }: { url: string | null; onOpen: (url: s...@@ -166,8 +166,8 @@ function OpenOnHostButton({ url, onOpen }: { url: string | null; onOpen: (url: s
166 return url === null ? null : (166 return url === null ? null : (
167 <Button167 <Button
168 size="icon-xs"168 size="icon-xs"
169 variant="ghost"169 variant="ghost-muted"
170 className="-mr-1 -mt-1 shrink-0 text-muted-foreground"170 className="-mr-1 -mt-1 shrink-0"
171 aria-label="Open activity on host"171 aria-label="Open activity on host"
172 onClick={() => onOpen(url)}172 onClick={() => onOpen(url)}
173 >173 >
apps/web/src/components/settings/AddProviderInstanceDialog.tsx+1-2
...@@ -369,8 +369,7 @@ export function AddProviderInstanceDialog({...@@ -369,8 +369,7 @@ export function AddProviderInstanceDialog({
369 <Button369 <Button
370 type="button"370 type="button"
371 size="xs"371 size="xs"
372 variant="ghost"372 variant="ghost-muted"
373 className="text-muted-foreground"
374 onClick={() => setAccentColor("")}373 onClick={() => setAccentColor("")}
375 >374 >
376 Clear375 Clear
apps/web/src/components/settings/ConnectionsSettings.tsx+2-4
...@@ -1626,9 +1626,8 @@ function SavedBackendListRow({...@@ -1626,9 +1626,8 @@ function SavedBackendListRow({
1626 render={1626 render={
1627 <Button1627 <Button
1628 type="button"1628 type="button"
1629 variant="ghost"1629 variant="ghost-muted"
1630 size="icon-xs"1630 size="icon-xs"
1631 className="text-muted-foreground hover:text-foreground"
1632 disabled={isRemoving}1631 disabled={isRemoving}
1633 aria-label={`More actions for ${environment.label}`}1632 aria-label={`More actions for ${environment.label}`}
1634 />1633 />
...@@ -3292,9 +3291,8 @@ export function ConnectionsSettings() {...@@ -3292,9 +3291,8 @@ export function ConnectionsSettings() {
3292 render={3291 render={
3293 <Button3292 <Button
3294 type="button"3293 type="button"
3295 variant="ghost"3294 variant="ghost-muted"
3296 size="icon-xs"3295 size="icon-xs"
3297 className="text-muted-foreground hover:text-foreground"
3298 aria-label="More actions for this machine"3296 aria-label="More actions for this machine"
3299 />3297 />
3300 }3298 }
apps/web/src/components/settings/KeybindingsSettings.tsx+2-4
...@@ -952,9 +952,8 @@ function KeybindingRowMenu({...@@ -952,9 +952,8 @@ function KeybindingRowMenu({
952 render={952 render={
953 <Button953 <Button
954 type="button"954 type="button"
955 variant="ghost"955 variant="ghost-muted"
956 size="icon-sm"956 size="icon-sm"
957 className="text-muted-foreground hover:text-foreground"
958 disabled={isSaving}957 disabled={isSaving}
959 aria-label={`Actions for ${commandLabel(row.command)}`}958 aria-label={`Actions for ${commandLabel(row.command)}`}
960 />959 />
...@@ -1232,9 +1231,8 @@ function NewKeybindingCancelIcon({...@@ -1232,9 +1231,8 @@ function NewKeybindingCancelIcon({
1232 render={1231 render={
1233 <Button1232 <Button
1234 type="button"1233 type="button"
1235 variant="ghost"1234 variant="ghost-muted"
1236 size="icon-sm"1235 size="icon-sm"
1237 className="text-muted-foreground hover:text-foreground"
1238 disabled={isSaving}1236 disabled={isSaving}
1239 aria-label="Cancel new keybinding"1237 aria-label="Cancel new keybinding"
1240 onClick={onCancel}1238 onClick={onCancel}
apps/web/src/components/settings/ProjectActionsList.tsx+2-2
...@@ -53,8 +53,8 @@ export function ProjectActionsList({...@@ -53,8 +53,8 @@ export function ProjectActionsList({
53 ) : null}53 ) : null}
54 <Button54 <Button
55 size="icon-xs"55 size="icon-xs"
56 variant="ghost"56 variant="ghost-muted"
57 className="shrink-0 text-muted-foreground opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"57 className="shrink-0 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
58 aria-label={`Edit ${script.name}`}58 aria-label={`Edit ${script.name}`}
59 disabled={disabled}59 disabled={disabled}
60 onClick={() => onEdit(script)}60 onClick={() => onEdit(script)}
apps/web/src/components/settings/ProviderInstanceCard.tsx+2-2
...@@ -767,8 +767,8 @@ export function ProviderInstanceCard({...@@ -767,8 +767,8 @@ export function ProviderInstanceCard({
767 <Button767 <Button
768 type="button"768 type="button"
769 size="icon-xs"769 size="icon-xs"
770 variant="ghost"770 variant="ghost-muted"
771 className="shrink-0 text-muted-foreground hover:text-foreground"771 className="shrink-0"
772 onClick={() =>772 onClick={() =>
773 copyToClipboard(updateCommand, { providerName: displayName })773 copyToClipboard(updateCommand, { providerName: displayName })
774 }774 }
scripts/lint-restyle-ceiling.ts+1-1
...@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";...@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
8// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the8// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
9// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you9// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
10// migrate a file, and delete this script when the rule becomes an error.10// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 1207;11export const RESTYLE_CEILING = 1184;
1212
13const RULE = "shadcn(no-restyle)";13const RULE = "shadcn(no-restyle)";
1414