From 327992a98d67f56f4606103b21dfe6307ef2d58e Mon Sep 17 00:00:00 2001
From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Date: Tue, 22 Sep 2026 20:27:11 -0700
Subject: [PATCH] refactor(web): Button consumers outside the composer stop
 restyling it

Clears the 149 shadcn/no-restyle findings on Button outside the chat
composer. No new variant, size, or prop. Two existing Button styles change.

Changes to components/ui/button.tsx:
- glass is now a pill (rounded-full). All three Button consumers
  (Scroll to end, Cite selection, PR review trigger) forced rounded-full,
  so the variant owns it.
- The base now styles aria-disabled like disabled (opacity-64,
  not-allowed cursor). This is a generic state for a disabled control
  that still hosts an explanation popover, and it replaces the hand-rolled
  copy on the git quick action.

Drift, moved onto existing variants and sizes (the visible change is accepted):
- Text-colour tweaks (text-muted-foreground, hover:text-foreground, the
  sidebar muted tokens, text-muted-foreground/60, font-normal) become
  ghost-muted: server update icon and batch action, Add environment,
  message copy (ghost), Show full message, PR sort toggles, settings and
  thread search clear, accent-colour Clear, PR edit pencil.
- Toggle-state tints become variant switches, secondary when pressed:
  device-toolbar aspect lock, markdown table expand and code wrap. This
  deletes the chat-markdown-chrome-action CSS.
- Setup Required chips become warning-outline + micro.
- Padding and size tweaks drop to the size's own padding: ps-[8.5px],
  ps/pe/gap on the palette submit, px-1, and px-0/px overrides on the
  header script actions. Multiline dialog and onboarding rows use
  sm-multiline.
- Hover and background tweaks are deleted: diff collapse, reset zoom,
  PR code collapse, context meter, script icon picker, media navigation
  bg-white/10 and rounded-full. White-on-image snapshot buttons use the
  existing overlay variant.
- Diff-type colour moves from the Button to its chevron icon.

Restructured:
- Reveal on row hover (opacity-0 group-hover:opacity-100) is the row's
  behaviour, so it moves to a plain wrapper span: diff comment delete,
  project actions edit, script menu edit, PullRequestEditButton.
- The sticky device-toolbar close backing, the colour-picker footer
  divider, and the monospace on the when-clause label move to plain
  elements.
- The provider update pill dismiss was not a Button (it inherits the
  pill's tone colour and has no surface of its own), so it is now a
  plain button.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/browser/BrowserDeviceToolbar.tsx | 41 ++++++++----------
 apps/web/src/components/ChatMarkdown.tsx      | 12 ++----
 apps/web/src/components/ChatView.tsx          |  2 +-
 apps/web/src/components/CommandPalette.tsx    | 12 ++----
 .../web/src/components/CustomSnoozeDialog.tsx |  2 +-
 apps/web/src/components/DiffPanel.tsx         | 13 +++---
 apps/web/src/components/GitActionsControl.tsx | 23 ++++------
 .../src/components/ProjectScriptsControl.tsx  | 42 ++++++++++---------
 .../web/src/components/ServerUpdateAction.tsx |  4 +-
 apps/web/src/components/Sidebar.tsx           |  2 +-
 .../chat/AssistantSelectionToolbar.tsx        |  2 +-
 .../components/chat/ContextWindowMeter.tsx    |  2 +-
 .../components/chat/ExpandedImageDialog.tsx   | 13 ++----
 .../src/components/chat/MessageCopyButton.tsx |  5 +--
 .../src/components/chat/MessagesTimeline.tsx  |  4 +-
 apps/web/src/components/chat/OpenInPicker.tsx |  1 -
 .../chat/SnapShotAttachmentDetails.tsx        |  7 +---
 .../diffs/DiffCommentAnnotation.tsx           | 19 +++++----
 .../components/onboarding/WelcomeWizard.tsx   | 12 +++---
 .../components/preview/PreviewMoreMenu.tsx    |  1 -
 .../src/components/projectScriptEditor.tsx    |  2 +-
 .../pullRequest/PullRequestCodeTab.tsx        |  2 +-
 .../pullRequest/PullRequestComposer.tsx       |  8 +---
 .../pullRequest/PullRequestDetailPanel.tsx    |  3 +-
 .../pullRequest/PullRequestEditButton.tsx     | 13 +++---
 .../PullRequestReviewAnnotation.tsx           |  8 +---
 .../pullRequest/PullRequestSummaryTab.tsx     |  4 +-
 .../settings/ConnectionsSettings.tsx          | 13 +-----
 .../settings/KeybindingsSettings.tsx          |  4 +-
 .../settings/ProjectActionsList.tsx           | 21 +++++-----
 .../settings/ProviderAccentColorPicker.tsx    | 32 +++++++-------
 .../settings/SettingsSidebarNav.tsx           |  4 +-
 .../sidebar/SidebarProviderUpdatePill.tsx     | 10 ++---
 .../sidebar/SidebarThreadHeader.tsx           |  4 +-
 apps/web/src/components/ui/button.tsx         |  4 +-
 apps/web/src/components/ui/input.tsx          |  3 ++
 apps/web/src/index.css                        | 20 +--------
 scripts/lint-restyle-ceiling.ts               |  2 +-
 38 files changed, 156 insertions(+), 220 deletions(-)

diff --git a/apps/web/src/browser/BrowserDeviceToolbar.tsx b/apps/web/src/browser/BrowserDeviceToolbar.tsx
index f84e18d84669..a8c9027f8a16 100644
--- a/apps/web/src/browser/BrowserDeviceToolbar.tsx
+++ b/apps/web/src/browser/BrowserDeviceToolbar.tsx
@@ -242,10 +242,7 @@ export function BrowserDeviceToolbar({
           onChange={(event) => updateCustomDimension("width", event.target.value)}
           aria-label="Viewport width"
           aria-invalid={!customValid}
-          className={cn(
-            "text-center [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
-            width >= 360 ? "w-14" : "w-13",
-          )}
+          className={width >= 360 ? "w-14" : "w-13"}
         />
         <span className="text-xs text-muted-foreground">×</span>
         <Input
@@ -270,10 +267,7 @@ export function BrowserDeviceToolbar({
           onChange={(event) => updateCustomDimension("height", event.target.value)}
           aria-label="Viewport height"
           aria-invalid={!customValid}
-          className={cn(
-            "text-center [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
-            width >= 360 ? "w-14" : "w-13",
-          )}
+          className={width >= 360 ? "w-14" : "w-13"}
         />
       </form>
 
@@ -281,14 +275,13 @@ export function BrowserDeviceToolbar({
         <TooltipTrigger
           render={
             <Button
-              variant="ghost"
+              variant={aspectRatio === null ? "ghost" : "secondary"}
               size="icon-xs"
               type="button"
               aria-label={
                 aspectRatio === null ? "Lock viewport aspect ratio" : "Unlock viewport aspect ratio"
               }
               aria-pressed={aspectRatio !== null}
-              className={cn(aspectRatio !== null && "bg-accent text-foreground")}
               disabled={pending || !customValid}
               onPointerDown={(event) => event.preventDefault()}
               onClick={toggleAspectRatio}
@@ -315,19 +308,21 @@ export function BrowserDeviceToolbar({
       >
         <ScreenRotationIcon />
       </Button>
-      <Button
-        variant="ghost"
-        size="icon-xs"
-        type="button"
-        aria-label="Close device toolbar"
-        className="sticky right-0 ml-auto bg-background/95"
-        disabled={pending}
-        onClick={() => {
-          apply({ _tag: "fill" }, null);
-        }}
-      >
-        <X />
-      </Button>
+      {/* Sticky backing so scrolled controls do not show through the close action. */}
+      <span className="sticky right-0 ml-auto flex bg-background/95">
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          type="button"
+          aria-label="Close device toolbar"
+          disabled={pending}
+          onClick={() => {
+            apply({ _tag: "fill" }, null);
+          }}
+        >
+          <X />
+        </Button>
+      </span>
     </div>
   );
 }
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index ef833e0e6794..f48c573aa8bc 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -784,9 +784,8 @@ function MarkdownTable({ children, ...props }: React.ComponentProps<"table">) {
             render={
               <Button
                 type="button"
-                variant="ghost"
+                variant={expanded ? "secondary" : "ghost-muted"}
                 size="icon-xs"
-                className="chat-markdown-chrome-action"
                 aria-pressed={expanded}
                 onClick={toggleExpanded}
                 aria-label={expandLabel}
@@ -805,9 +804,8 @@ function MarkdownTable({ children, ...props }: React.ComponentProps<"table">) {
                   render={
                     <Button
                       type="button"
-                      variant="ghost"
+                      variant="ghost-muted"
                       size="icon-xs"
-                      className="chat-markdown-chrome-action"
                       aria-label={copyLabel}
                     />
                   }
@@ -993,9 +991,8 @@ function MarkdownCodeBlock({
               render={
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant={wrapped ? "secondary" : "ghost-muted"}
                   size="icon-xs"
-                  className="chat-markdown-chrome-action"
                   aria-pressed={wrapped}
                   onClick={() => setWrapped((value) => !value)}
                   aria-label={wrapLabel}
@@ -1011,9 +1008,8 @@ function MarkdownCodeBlock({
               render={
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant="ghost-muted"
                   size="icon-xs"
-                  className="chat-markdown-chrome-action"
                   onClick={handleCopy}
                   aria-label={copyLabel}
                 />
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 62b7e41fdd6c..9af410f5722e 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -9991,7 +9991,7 @@ export default function ChatView(props: ChatViewProps) {
                       composerRef.current?.restoreAfterTimelineReachedEnd();
                       scrollToEnd(true);
                     }}
-                    className="pointer-events-auto gap-1.5 rounded-full px-3 text-muted-foreground hover:text-foreground"
+                    className="pointer-events-auto"
                     size="xs"
                     variant="glass"
                   >
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 118ac9d1c9e0..7ee1d12036db 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -1528,9 +1528,8 @@ function OpenCommandPaletteDialog(props: {
               <TooltipTrigger
                 render={
                   <Button
-                    variant="outline"
-                    size="xs"
-                    className="h-5 rounded-[.25rem] px-1.5 text-[10px] text-warning-foreground"
+                    variant="warning-outline"
+                    size="micro"
                     onClick={() => {
                       openSourceControlSettings();
                     }}
@@ -2861,7 +2860,7 @@ function OpenCommandPaletteDialog(props: {
               variant="outline"
               size="xs"
               tabIndex={-1}
-              className="absolute inset-e-2.5 top-1/2 gap-1.5 pe-1 ps-2 -translate-y-1/2"
+              className="absolute inset-e-2.5 top-1/2 -translate-y-1/2"
               aria-label={`${remoteProjectButtonLabel ?? "Continue"} (Enter)`}
               disabled={!canSubmitRemoteProjectFlow}
               onMouseDown={(event) => {
@@ -2888,10 +2887,7 @@ function OpenCommandPaletteDialog(props: {
               variant="outline"
               size="xs"
               tabIndex={-1}
-              className={cn(
-                "absolute inset-e-2.5 top-1/2 pe-1 ps-2 -translate-y-1/2",
-                hasHighlightedBrowseItem ? "gap-1" : "gap-1.5",
-              )}
+              className="absolute inset-e-2.5 top-1/2 -translate-y-1/2"
               aria-label={`${submitActionLabel} (${addShortcutLabel})`}
               disabled={
                 !canCreateProjectInEnvironment(browseEnvironment?.connection.phase) ||
diff --git a/apps/web/src/components/CustomSnoozeDialog.tsx b/apps/web/src/components/CustomSnoozeDialog.tsx
index ca7ff81c80ab..670df0e3e12e 100644
--- a/apps/web/src/components/CustomSnoozeDialog.tsx
+++ b/apps/web/src/components/CustomSnoozeDialog.tsx
@@ -119,7 +119,7 @@ function CustomSnoozeDialog() {
                             <Button
                               id={`${id}-date`}
                               variant="outline"
-                              className="w-full justify-between font-normal"
+                              className="w-full justify-between"
                             />
                           }
                         >
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 8c1f6791a2d5..41cc4c82fa0f 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -1125,10 +1125,7 @@ export default function DiffPanel({
                               <Button
                                 size="icon-micro"
                                 variant="ghost"
-                                className={cn(
-                                  "-ms-0.5 [--control-icon-color:currentColor] bg-transparent hover:bg-foreground/10",
-                                  getDiffCollapseIconClassName(fileDiff),
-                                )}
+                                className="-ms-0.5"
                                 aria-label={
                                   collapsed ? `Expand ${filePath}` : `Collapse ${filePath}`
                                 }
@@ -1142,9 +1139,13 @@ export default function DiffPanel({
                             }
                           >
                             {collapsed ? (
-                              <ChevronRightIcon className="size-4" />
+                              <ChevronRightIcon
+                                className={cn("size-4", getDiffCollapseIconClassName(fileDiff))}
+                              />
                             ) : (
-                              <ChevronDownIcon className="size-4" />
+                              <ChevronDownIcon
+                                className={cn("size-4", getDiffCollapseIconClassName(fileDiff))}
+                              />
                             )}
                           </TooltipTrigger>
                           <TooltipPopup side="top">
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 776c492fdfec..5c9d37d8b4e5 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -646,9 +646,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
                         <TooltipTrigger
                           render={
                             <Button
-                              variant="outline"
-                              size="xs"
-                              className="h-5 rounded-[.25rem] px-1.5 text-[10px] text-warning-foreground"
+                              variant="warning-outline"
+                              size="micro"
                               onClick={(event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -1799,14 +1798,7 @@ export default function GitActionsControl({
             <Popover>
               <PopoverTrigger
                 openOnHover
-                render={
-                  <Button
-                    aria-disabled="true"
-                    className="cursor-not-allowed rounded-e-none border-e-0 ps-[8.5px] opacity-64 before:rounded-e-none"
-                    size="xs"
-                    variant="outline"
-                  />
-                }
+                render={<Button aria-disabled="true" size="xs" variant="outline" />}
               >
                 <GitQuickActionIcon
                   quickAction={quickAction}
@@ -1824,7 +1816,6 @@ export default function GitActionsControl({
             <Button
               variant="outline"
               size="xs"
-              className="ps-[8.5px]"
               disabled={isGitActionRunning || quickAction.disabled}
               onClick={runQuickAction}
             >
@@ -2056,16 +2047,16 @@ export default function GitActionsControl({
               Abort
             </Button>
             <Button
-              className="min-h-8 w-full max-w-full whitespace-normal py-1.5 leading-snug sm:min-h-7 sm:w-auto"
+              className="w-full max-w-full sm:w-auto"
               variant="outline"
-              size="sm"
+              size="sm-multiline"
               onClick={continuePendingDefaultBranchAction}
             >
               {pendingDefaultBranchActionCopy?.continueLabel ?? "Continue"}
             </Button>
             <Button
-              className="min-h-8 w-full max-w-full whitespace-normal py-1.5 leading-snug sm:min-h-7 sm:w-auto"
-              size="sm"
+              className="w-full max-w-full sm:w-auto"
+              size="sm-multiline"
               onClick={checkoutFeatureBranchAndContinuePendingAction}
             >
               Check out feature branch & continue
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index 97de05d1d896..0c8dae6c2619 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -192,24 +192,28 @@ export default function ProjectScriptsControl({
                     <MenuShortcut className="ms-0">{shortcutLabel}</MenuShortcut>
                   </span>
                 ))}
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-xs"
-                className={`absolute right-0 top-1/2 size-6 -translate-y-1/2 ${presentation === "menu" ? "" : "opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-visible:opacity-100 group-focus-visible:pointer-events-auto"}`}
-                aria-label={`Edit ${script.name}`}
-                onPointerDown={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  openEditDialog(script);
-                }}
+              <span
+                className={`absolute right-0 top-1/2 flex -translate-y-1/2 ${presentation === "menu" ? "" : "opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-visible:opacity-100 group-focus-visible:pointer-events-auto"}`}
               >
-                <SettingsIcon className="size-3.5" />
-              </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  className="size-6"
+                  aria-label={`Edit ${script.name}`}
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    openEditDialog(script);
+                  }}
+                >
+                  <SettingsIcon className="size-3.5" />
+                </Button>
+              </span>
             </span>
           </MenuItem>
         );
@@ -269,7 +273,7 @@ export default function ProjectScriptsControl({
                 <Button
                   size="xs"
                   variant="outline"
-                  className="w-7 px-0 sm:w-6 @3xl/header-actions:w-auto! @3xl/header-actions:px-[calc(--spacing(2)-1px)]"
+                  className="w-7 sm:w-6 @3xl/header-actions:w-auto!"
                   aria-label={`Run ${primaryScript.name}`}
                   // The tooltip wrapper replaces data-slot="button", so themed
                   // toolbar styling needs its own hook.
@@ -329,7 +333,7 @@ export default function ProjectScriptsControl({
               <Button
                 size="xs"
                 variant="outline"
-                className="w-7 px-0 sm:w-6 @3xl/header-actions:w-auto! @3xl/header-actions:px-[calc(--spacing(2)-1px)]"
+                className="w-7 sm:w-6 @3xl/header-actions:w-auto!"
                 aria-label="Add action"
                 // The tooltip wrapper replaces data-slot="button", so themed
                 // toolbar styling needs its own hook.
diff --git a/apps/web/src/components/ServerUpdateAction.tsx b/apps/web/src/components/ServerUpdateAction.tsx
index a4b288a6eab7..fa7ec5e601f1 100644
--- a/apps/web/src/components/ServerUpdateAction.tsx
+++ b/apps/web/src/components/ServerUpdateAction.tsx
@@ -270,8 +270,8 @@ export function ServerUpdateAction({
           render={
             <Button
               size="icon-xs"
-              variant="ghost"
-              className={className ?? "text-muted-foreground hover:text-foreground"}
+              variant="ghost-muted"
+              className={className}
               aria-label={`${actionLabel} for ${serverLabel}`}
               onClick={onClick}
             />
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 70183831cc91..12b06d739476 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -4500,7 +4500,7 @@ export default function Sidebar() {
                                 tabIndex={-1}
                                 aria-hidden="true"
                                 title={`Project settings for ${project.displayName}`}
-                                className="ml-auto focus-visible:bg-accent focus-visible:text-foreground"
+                                className="ml-auto"
                                 onPointerDown={(event) => event.stopPropagation()}
                                 onClick={(event) => {
                                   void handleProjectSettings(event, project);
diff --git a/apps/web/src/components/chat/AssistantSelectionToolbar.tsx b/apps/web/src/components/chat/AssistantSelectionToolbar.tsx
index a7c622ade17a..ff03524cfef2 100644
--- a/apps/web/src/components/chat/AssistantSelectionToolbar.tsx
+++ b/apps/web/src/components/chat/AssistantSelectionToolbar.tsx
@@ -134,7 +134,7 @@ export function AssistantSelectionToolbar({
       variant="glass"
       disabled={tooLong}
       aria-label={tooLong ? "Selection is too long to cite" : "Cite selection in composer"}
-      className="fixed z-50 max-w-[calc(100vw-1rem)] rounded-full px-2.5"
+      className="fixed z-50 max-w-[calc(100vw-1rem)]"
       style={{ left: selection.position.x, top: selection.position.y }}
       onPointerDown={(event) => event.preventDefault()}
       onClick={cite}
diff --git a/apps/web/src/components/chat/ContextWindowMeter.tsx b/apps/web/src/components/chat/ContextWindowMeter.tsx
index caebdd3cb2e9..8f6b09954d3a 100644
--- a/apps/web/src/components/chat/ContextWindowMeter.tsx
+++ b/apps/web/src/components/chat/ContextWindowMeter.tsx
@@ -45,7 +45,7 @@ export function ContextWindowMeter(props: {
           <Button
             size="icon-sm"
             variant="ghost-muted"
-            className="size-7 rounded-full hover:text-muted-foreground data-pressed:text-muted-foreground"
+            className="size-7"
             aria-label={
               usage.maxTokens !== null && usedPercentage
                 ? `Context window ${usedPercentage} used`
diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index aaa4dc2daa59..a547ed821405 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -193,7 +193,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
             type="button"
             size="icon"
             variant="media-navigation"
-            className="left-0 top-auto -bottom-12 translate-y-0 rounded-full bg-white/10 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
+            className="left-0 top-auto -bottom-12 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
             aria-label="Previous media"
             onClick={() => navigateImage(-1)}
           >
@@ -252,12 +252,11 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
                       <Button
                         aria-label={contentsLabel}
                         aria-pressed={showingAccessibilityDetails}
-                        className="[--control-icon-color:currentColor] hover:bg-white/10 hover:text-white"
                         onClick={() =>
                           setAccessibilityDetailsSrc(showingAccessibilityDetails ? null : item.src)
                         }
                         size="icon-micro"
-                        variant="ghost-muted"
+                        variant="overlay"
                       />
                     }
                   >
@@ -266,11 +265,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
                   <TooltipPopup side="top">{contentsLabel}</TooltipPopup>
                 </Tooltip>
               ) : item.source ? (
-                <SnapShotContentsButton
-                  source={item.source}
-                  side="top"
-                  className="hover:bg-white/10 hover:text-white"
-                />
+                <SnapShotContentsButton source={item.source} side="top" />
               ) : null}
             </div>
           </div>
@@ -280,7 +275,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
             type="button"
             size="icon"
             variant="media-navigation"
-            className="right-0 top-auto -bottom-12 translate-y-0 rounded-full bg-white/10 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
+            className="right-0 top-auto -bottom-12 translate-y-0 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
             aria-label="Next media"
             onClick={() => navigateImage(1)}
           >
diff --git a/apps/web/src/components/chat/MessageCopyButton.tsx b/apps/web/src/components/chat/MessageCopyButton.tsx
index aaaa171f10de..3a647857bae9 100644
--- a/apps/web/src/components/chat/MessageCopyButton.tsx
+++ b/apps/web/src/components/chat/MessageCopyButton.tsx
@@ -2,7 +2,6 @@ import { memo, useRef } from "react";
 import { CopyIcon, CheckIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
-import { cn } from "~/lib/utils";
 import {
   ANCHORED_COPY_TOAST_TIMEOUT_MS,
   showAnchoredCopyErrorToast,
@@ -43,8 +42,8 @@ export const MessageCopyButton = memo(function MessageCopyButton({
             ref={ref}
             type="button"
             size={size}
-            variant={variant}
-            className={cn("text-muted-foreground hover:text-foreground", className)}
+            variant={variant === "ghost" ? "ghost-muted" : variant}
+            className={className}
           />
         }
       >
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index d5bef349264c..20b8438fbc1c 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -3956,11 +3956,11 @@ const CollapsibleUserMessageBody = memo(function CollapsibleUserMessageBody(prop
             <Button
               type="button"
               size="xs"
-              variant="ghost"
+              variant="ghost-muted"
               aria-expanded={expanded}
               data-scroll-anchor-ignore
               onClick={() => setExpanded((value) => !value)}
-              className="-ml-1 h-6 rounded-md px-1.5 text-secondary-label text-xs hover:bg-muted/55 hover:text-message-foreground"
+              className="-ml-1"
             >
               {expanded ? "Show less" : "Show full message"}
             </Button>
diff --git a/apps/web/src/components/chat/OpenInPicker.tsx b/apps/web/src/components/chat/OpenInPicker.tsx
index 35a75a20a36e..3c0b2cd118ed 100644
--- a/apps/web/src/components/chat/OpenInPicker.tsx
+++ b/apps/web/src/components/chat/OpenInPicker.tsx
@@ -353,7 +353,6 @@ export const OpenInPicker = memo(function OpenInPicker({
     <Group aria-label="Open in editor">
       <Button
         aria-label={compact ? "Open file in preferred editor" : undefined}
-        className="ps-[8.5px]"
         size="xs"
         variant="outline"
         disabled={!preferredEditor || !openInCwd || remote.mode === "remote-unavailable"}
diff --git a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
index 8135d677ad6c..e23de85632b1 100644
--- a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
+++ b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
@@ -153,7 +153,7 @@ export function SnapShotContentsButton({
                   className={className}
                   onClick={(event) => event.stopPropagation()}
                   size="icon-micro"
-                  variant="ghost-muted"
+                  variant="overlay"
                 />
               }
             />
@@ -211,10 +211,7 @@ export function SnapShotAttachmentDetails({
       <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-center gap-1.5 text-[11px] font-medium leading-3.5 text-white">
           <span className="truncate">{source.appName}</span>
-          <SnapShotContentsButton
-            source={source}
-            className="pointer-events-auto text-white/60 hover:bg-white/10 hover:text-white focus-visible:ring-white/70"
-          />
+          <SnapShotContentsButton source={source} className="pointer-events-auto" />
         </div>
         <div className="truncate text-[9px] leading-3.5 text-white/70">
           {source.windowTitle || "Captured window"}
diff --git a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
index adbe5b20cefc..ba046566cb01 100644
--- a/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
+++ b/apps/web/src/components/diffs/DiffCommentAnnotation.tsx
@@ -67,15 +67,16 @@ export function DiffCommentAnnotation({
         <MessageCircle className="mt-0.5 size-3.5 shrink-0 text-primary/70" aria-hidden="true" />
         <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 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}
-          >
-            <Trash2 className="size-3" />
-          </Button>
+          <span className="-my-1 -mr-1 flex shrink-0 opacity-0 transition-opacity group-hover/comment:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
+            <Button
+              variant="ghost-muted"
+              size="icon-xs"
+              aria-label="Delete comment"
+              onClick={onDelete}
+            >
+              <Trash2 className="size-3" />
+            </Button>
+          </span>
         ) : null}
       </div>
     );
diff --git a/apps/web/src/components/onboarding/WelcomeWizard.tsx b/apps/web/src/components/onboarding/WelcomeWizard.tsx
index 100869f25369..26ba0cea419d 100644
--- a/apps/web/src/components/onboarding/WelcomeWizard.tsx
+++ b/apps/web/src/components/onboarding/WelcomeWizard.tsx
@@ -357,12 +357,13 @@ function ConnectionStep({
               render={
                 <Button
                   variant="ghost"
-                  className="h-auto min-h-14 w-full justify-start gap-3 px-3 py-3 text-left whitespace-normal sm:h-auto"
+                  size="sm-multiline"
+                  className="min-h-14 w-full justify-start"
                 />
               }
             >
               <LinkIcon className="size-4 text-muted-foreground" />
-              <span className="flex-1">Add a computer</span>
+              <span className="flex-1 text-left">Add a computer</span>
               <ChevronRightIcon
                 className={cn("size-4 text-muted-foreground", pairingOpen && "rotate-90")}
               />
@@ -429,14 +430,11 @@ function ConnectAccountOption({
             }
           }}
           render={
-            <Button
-              variant="ghost"
-              className="h-auto min-h-14 w-full justify-start gap-3 px-3 py-3 text-left whitespace-normal sm:h-auto"
-            />
+            <Button variant="ghost" size="sm-multiline" className="min-h-14 w-full justify-start" />
           }
         >
           <CloudIcon className="size-4 text-muted-foreground" />
-          <span className="flex-1">T3 Connect</span>
+          <span className="flex-1 text-left">T3 Connect</span>
           <span className="text-xs text-muted-foreground">
             {!isLoaded
               ? "Loading sign-in…"
diff --git a/apps/web/src/components/preview/PreviewMoreMenu.tsx b/apps/web/src/components/preview/PreviewMoreMenu.tsx
index f4112f3a77dc..88c596bbaded 100644
--- a/apps/web/src/components/preview/PreviewMoreMenu.tsx
+++ b/apps/web/src/components/preview/PreviewMoreMenu.tsx
@@ -185,7 +185,6 @@ export function PreviewMoreMenu({
               type="button"
               onClick={callTab(bridge.resetZoom)}
               aria-label="Reset zoom"
-              className="[:hover,[data-pressed]]:bg-foreground/10"
               disabled={tabDisabled}
             >
               <RotateCcw />
diff --git a/apps/web/src/components/projectScriptEditor.tsx b/apps/web/src/components/projectScriptEditor.tsx
index 0778fb0da531..b3708f5721f6 100644
--- a/apps/web/src/components/projectScriptEditor.tsx
+++ b/apps/web/src/components/projectScriptEditor.tsx
@@ -319,7 +319,7 @@ export function ProjectScriptEditorDialog({
                           <Button
                             type="button"
                             variant="outline"
-                            className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:border-transparent dark:bg-white/[0.035] dark:data-pressed:before:shadow-none"
+                            className="size-9 shrink-0"
                             aria-label="Choose icon"
                           />
                         }
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index a366c67d31eb..997f2d46f836 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -785,7 +785,7 @@ function PullRequestCodeTab({
           variant="ghost-muted"
           aria-expanded={!collapsed}
           aria-label={collapsed ? "Expand diff" : "Collapse diff"}
-          className="mr-1 rounded hover:bg-transparent"
+          className="mr-1"
           onClick={(event) => {
             event.stopPropagation();
             toggleFile(item.id);
diff --git a/apps/web/src/components/pullRequest/PullRequestComposer.tsx b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
index 84bc10ff448d..fedd76610e87 100644
--- a/apps/web/src/components/pullRequest/PullRequestComposer.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
@@ -78,13 +78,7 @@ export function PullRequestComposer({
       }}
     >
       <PopoverTrigger
-        render={
-          <Button
-            size="icon"
-            variant="glass"
-            className="rounded-full shadow-lg [--glass-opacity:50%]"
-          />
-        }
+        render={<Button size="icon" variant="glass" />}
         // The only label this control has, so the pending count belongs in it: the badge beside
         // the icon is decorative and a reader who cannot see it still needs the number.
         aria-label={
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index ee7351974bc1..536bab75b438 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -2662,8 +2662,7 @@ export function PullRequestDetailPanel({
                 </PullRequestMetaLine>
                 <Button
                   size="xs"
-                  variant="ghost"
-                  className="h-7 px-2 text-[10px] text-muted-foreground"
+                  variant="ghost-muted"
                   aria-label={
                     timelineOrder === "newest"
                       ? "Show oldest activity first"
diff --git a/apps/web/src/components/pullRequest/PullRequestEditButton.tsx b/apps/web/src/components/pullRequest/PullRequestEditButton.tsx
index b04ec17b8754..bdc7c26eb769 100644
--- a/apps/web/src/components/pullRequest/PullRequestEditButton.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestEditButton.tsx
@@ -12,16 +12,15 @@ export function PullRequestEditButton({
   "aria-label": string;
 }) {
   return (
-    <Button
-      {...props}
-      size="icon-xs"
-      variant="ghost"
+    <span
       className={cn(
-        "shrink-0 text-muted-foreground opacity-0 transition-opacity pointer-coarse:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none",
+        "flex shrink-0 opacity-0 transition-opacity pointer-coarse:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100 motion-reduce:transition-none",
         className,
       )}
     >
-      <PencilIcon aria-hidden className="size-3" />
-    </Button>
+      <Button {...props} size="icon-xs" variant="ghost-muted">
+        <PencilIcon aria-hidden className="size-3" />
+      </Button>
+    </span>
   );
 }
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
index 54f4860b9533..11acd48a4c10 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
@@ -312,7 +312,6 @@ export function ReviewThreadCard({
               <Button
                 size="xs"
                 variant="ghost"
-                className="px-1"
                 disabled={loadingMore}
                 onClick={() => void loadMore()}
               >
@@ -352,12 +351,7 @@ export function ReviewThreadCard({
                 </div>
               </div>
             ) : (
-              <Button
-                size="xs"
-                variant="ghost"
-                className="mt-2 px-1"
-                onClick={() => setReplying(true)}
-              >
+              <Button size="xs" variant="ghost" className="mt-2" onClick={() => setReplying(true)}>
                 Reply
               </Button>
             )
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index c4f310201182..33b9a42c6ce0 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -922,8 +922,8 @@ export function PullRequestSummaryTab({
         actions={
           <Button
             size="xs"
-            variant="ghost"
-            className="h-7 shrink-0 px-2 text-[10px] text-muted-foreground"
+            variant="ghost-muted"
+            className="shrink-0"
             aria-label={
               commentOrder === "newest"
                 ? "Show oldest comments first"
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 48e9529a2df4..defd65cbf6b9 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -3680,11 +3680,7 @@ export function ConnectionsSettings() {
         headerAction={
           <div className="flex items-center gap-1">
             {savedServerUpdateTargets.length > 0 ? (
-              <ServerUpdatesAction
-                targets={savedServerUpdateTargets}
-                variant="ghost"
-                className="font-normal text-muted-foreground/60 hover:text-muted-foreground"
-              />
+              <ServerUpdatesAction targets={savedServerUpdateTargets} variant="ghost-muted" />
             ) : null}
             <Dialog
               open={addBackendDialogOpen}
@@ -3700,12 +3696,7 @@ export function ConnectionsSettings() {
                   render={
                     <DialogTrigger
                       render={
-                        <Button
-                          size="xs"
-                          variant="ghost"
-                          className="font-normal text-muted-foreground/60 hover:text-muted-foreground"
-                          aria-label="Add environment"
-                        >
+                        <Button size="xs" variant="ghost-muted" aria-label="Add environment">
                           <PlusIcon className="size-3" />
                           <span>Add environment</span>
                         </Button>
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index bc8e4e9df31c..3512a6a25a6c 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -891,12 +891,12 @@ function WhenClauseControl({
           <Button
             variant={expression ? "ghost" : "ghost-muted"}
             size="micro"
-            className="min-w-0 shrink font-mono"
+            className="min-w-0 shrink"
           />
         }
         aria-label={`Edit when clause for ${label}`}
       >
-        <span className="truncate">{expression || "Always"}</span>
+        <span className="truncate font-mono">{expression || "Always"}</span>
         <ChevronDownIcon className="size-3.5 shrink-0 opacity-60" />
       </PopoverTrigger>
       <PopoverContent align="start" sideOffset={6}>
diff --git a/apps/web/src/components/settings/ProjectActionsList.tsx b/apps/web/src/components/settings/ProjectActionsList.tsx
index 812022a2b8f3..e17c8a8226d8 100644
--- a/apps/web/src/components/settings/ProjectActionsList.tsx
+++ b/apps/web/src/components/settings/ProjectActionsList.tsx
@@ -51,16 +51,17 @@ export function ProjectActionsList({
             {shortcutLabel ? (
               <span className="text-xs text-muted-foreground">{shortcutLabel}</span>
             ) : null}
-            <Button
-              size="icon-xs"
-              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)}
-            >
-              <SettingsIcon className="size-3.5" />
-            </Button>
+            <span className="flex shrink-0 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100">
+              <Button
+                size="icon-xs"
+                variant="ghost-muted"
+                aria-label={`Edit ${script.name}`}
+                disabled={disabled}
+                onClick={() => onEdit(script)}
+              >
+                <SettingsIcon className="size-3.5" />
+              </Button>
+            </span>
           </>
         }
       />
diff --git a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
index 22e91a24553d..76f6b7bae52c 100644
--- a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
+++ b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -92,21 +92,23 @@ function ProviderCustomColorPicker(props: {
       />
       <PopoverPopup side="bottom" align="start" sideOffset={6} padding="none">
         <ProviderCustomColorPanel value={normalized} onCommit={props.onCommit} />
-        <PopoverClose
-          render={
-            <Button
-              type="button"
-              size="sm"
-              variant="ghost"
-              className="h-8 w-full justify-start rounded-none border-t border-border/60 px-3 text-xs text-muted-foreground [--control-icon-color:currentColor]"
-              onClick={props.onClear}
-              disabled={!props.value}
-            >
-              <XIcon className="size-3.5" aria-hidden />
-              Clear color
-            </Button>
-          }
-        />
+        <div className="border-t border-border/60 p-1">
+          <PopoverClose
+            render={
+              <Button
+                type="button"
+                size="compact"
+                variant="ghost-muted"
+                className="w-full justify-start"
+                onClick={props.onClear}
+                disabled={!props.value}
+              >
+                <XIcon aria-hidden />
+                Clear color
+              </Button>
+            }
+          />
+        </div>
       </PopoverPopup>
     </Popover>
   );
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index 5f4d29b00bc4..ec46ab1f13a3 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -265,8 +265,8 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
                 <Button
                   type="button"
                   size="icon-micro"
-                  variant="ghost"
-                  className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
+                  variant="ghost-muted"
+                  className="shrink-0"
                   aria-label="Clear settings search"
                   onClick={() => {
                     clearSearch();
diff --git a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
index 4e9547842353..2d1159bdb40c 100644
--- a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
@@ -11,7 +11,6 @@ import {
   type ProviderUpdateSidebarPillView,
 } from "../ProviderUpdateLaunchNotification.logic";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import { Button } from "../ui/button";
 
 const PROVIDER_UPDATE_PILL_STYLES = {
   loading:
@@ -192,15 +191,14 @@ export function SidebarProviderUpdatePill() {
         <Tooltip>
           <TooltipTrigger
             render={
-              <Button
-                size="icon-micro"
-                variant="ghost"
+              <button
+                type="button"
                 aria-label="Dismiss provider update notice"
-                className="relative z-[1] mr-1 [--control-icon-color:currentColor] rounded-md text-inherit opacity-70 hover:bg-transparent hover:opacity-100"
+                className="relative z-[1] mr-1 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md opacity-70 outline-none hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={() => startExit(displayedView.key, null, displayedView.key)}
               >
                 <XIcon className="size-3.5 shrink-0" />
-              </Button>
+              </button>
             }
           />
           <TooltipPopup side="top">Dismiss until provider status changes</TooltipPopup>
diff --git a/apps/web/src/components/sidebar/SidebarThreadHeader.tsx b/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
index 07c1c8e86535..839c2ba37f01 100644
--- a/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
+++ b/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
@@ -108,8 +108,8 @@ export function SidebarThreadHeader({
           <Button
             type="button"
             size="icon-micro"
-            variant="ghost"
-            className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
+            variant="ghost-muted"
+            className="shrink-0"
             aria-label="Clear thread search"
             onClick={() => {
               onClearSearch();
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 27b492ee2f4d..8ef1b602ae7b 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -8,7 +8,7 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
-  "[--control-icon-color:currentColor] [&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--control-radius)] border font-medium text-base outline-none transition-[box-shadow,scale] [&:active:not([aria-haspopup])]:scale-[0.97] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--control-radius)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='text-'])]:text-[var(--control-icon-color)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "[--control-icon-color:currentColor] [&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--control-radius)] border font-medium text-base outline-none transition-[box-shadow,scale] [&:active:not([aria-haspopup])]:scale-[0.97] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--control-radius)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 aria-disabled:cursor-not-allowed aria-disabled:opacity-64 sm:text-sm [&_svg:not([class*='text-'])]:text-[var(--control-icon-color)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     defaultVariants: {
       size: "default",
@@ -52,7 +52,7 @@ const buttonVariants = cva(
         "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",
+          "surface-glass [--control-icon-color:var(--contrast-muted-foreground)] rounded-full border-border/60 text-foreground shadow-sm before:rounded-full [:hover,[data-pressed]]:border-border",
         link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
         "media-close":
           "[--control-icon-color:currentColor] border-transparent bg-black/65 text-white shadow-sm ring-1 ring-white/20 [:hover,[data-pressed]]:bg-black/80 focus-visible:ring-white",
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index a5810308b6e8..448986505a00 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -28,6 +28,9 @@ function Input({
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
     props.type === "search" &&
       "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+    // Number fields are typed into; browser spin buttons crowd narrow fields and step by 1.
+    props.type === "number" &&
+      "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
     props.type === "file" &&
       "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm",
   );
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 9c70fa541cef..e40b3d384cd7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1350,8 +1350,7 @@ html[data-theme-id] .chat-markdown .chat-markdown-codeblock pre {
   background-color: transparent;
 }
 
-html[data-theme-id] .chat-markdown .chat-markdown-codeblock-header,
-html[data-theme-id] .chat-markdown .chat-markdown-chrome-action {
+html[data-theme-id] .chat-markdown .chat-markdown-codeblock-header {
   color: color-mix(in srgb, var(--code-foreground) 72%, transparent);
 }
 
@@ -1377,11 +1376,6 @@ html[data-theme-id="t3-chat"] {
   }
 }
 
-html[data-theme-id] .chat-markdown .chat-markdown-chrome-action:hover,
-html[data-theme-id] .chat-markdown .chat-markdown-chrome-action[aria-pressed="true"] {
-  color: var(--code-foreground);
-}
-
 html[data-theme-id] [data-app-sidebar] {
   --background: var(--app-theme-canvas);
   --foreground: var(--app-theme-text);
@@ -1858,20 +1852,10 @@ code {
   background: color-mix(in srgb, var(--contrast-border) 78%, transparent);
 }
 
-.chat-markdown .chat-markdown-codeblock-header,
-.chat-markdown .chat-markdown-chrome-action {
+.chat-markdown .chat-markdown-codeblock-header {
   color: color-mix(in srgb, var(--contrast-foreground) 72%, transparent);
 }
 
-.chat-markdown .chat-markdown-chrome-action:hover {
-  color: var(--contrast-foreground);
-}
-
-.chat-markdown .chat-markdown-chrome-action[aria-pressed="true"] {
-  color: var(--contrast-foreground);
-  background: color-mix(in srgb, var(--contrast-foreground) 8%, transparent);
-}
-
 .chat-markdown .chat-markdown-codeblock pre {
   margin: 0;
   border: none;
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 5342f99227bf..a009b75c0d95 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 = 250;
+export const RESTYLE_CEILING = 101;
 
 const RULE = "shadcn(no-restyle)";