Unify app button system

src/app/AppSidebar.css

@@ -200,31 +200,6 @@
 
 .sidebar__authBtn {
   flex: 1 1 0;
-  padding: 0.45rem 0.55rem;
-  border-radius: 12px;
-  border: 1px solid var(--sidebar-border);
-  background: transparent;
-  color: var(--sidebar-text);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background 160ms ease,
-    border-color 160ms ease;
-}
-
-.sidebar__authBtn:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: var(--sidebar-primary-dim);
-}
-
-.sidebar__authBtn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.sidebar__authBtn--ghost {
-  opacity: 0.9;
 }
 
 .sidebar__authSelect {

src/app/AppSidebar.tsx

@@ -22,6 +22,7 @@ import {
   X,
 } from "lucide-react";
 import { AuthSidebarPanel } from "@/app/auth/AuthContext";
+import { Button } from "@/components/primitives/button";
 
 const navClass = ({ isActive }: { isActive: boolean }) =>
   clsx("sidebar__link", isActive && "sidebar__link--active");
@@ -84,8 +85,10 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
     <aside className={clsx("sidebar", mobileNavOpen && "sidebar--mobileOpen")}>
       <div className="sidebar__brand">
         <span>Vortex</span>
-        <button
+        <Button
           type="button"
+          size="iconMd"
+          variant="ghost"
           className="sidebar__mobileToggle"
           onClick={() => setMobileNavOpen((open) => !open)}
           aria-expanded={mobileNavOpen}
@@ -99,7 +102,7 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
           ) : (
             <Menu className="sidebar__mobileToggleIcon" aria-hidden="true" />
           )}
-        </button>
+        </Button>
       </div>
       <div className="sidebar__mobilePanel">
         <AuthSidebarPanel />

src/app/auth/AuthContext.tsx

@@ -22,6 +22,7 @@ import {
   signPolkadotMessage,
 } from "@/lib/polkadotExtension";
 import { governanceIdentityStatuses } from "@/lib/humanNodesUi";
+import { Button } from "@/components/primitives/button";
 
 type AuthState = {
   enabled: boolean;
@@ -330,23 +331,27 @@ export function AuthSidebarPanel() {
 
       <div className="sidebar__authButtons">
         {auth.authenticated ? (
-          <button
+          <Button
             type="button"
-            className="sidebar__authBtn sidebar__authBtn--ghost"
+            size="compact"
+            variant="ghost"
+            className="sidebar__authBtn"
             disabled={auth.loading}
             onClick={() => void auth.disconnect()}
           >
             Disconnect
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
             type="button"
+            size="compact"
+            variant="primary"
             className="sidebar__authBtn"
             disabled={auth.loading}
             onClick={() => void auth.connect()}
           >
             Connect
-          </button>
+          </Button>
         )}
       </div>
     </div>

src/components/AddressInline.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router";
 import { Check, Copy } from "lucide-react";
 import { shortAddress } from "@/lib/profileUi";
+import { Button } from "@/components/primitives/button";
 
 type AddressInlineProps = {
   address?: string | null;
@@ -57,9 +58,11 @@ export const AddressInline: React.FC<AddressInlineProps> = ({
         </span>
       )}
       {showCopy && normalizedAddress ? (
-        <button
+        <Button
           type="button"
-          className="hover:bg-surface-alt inline-flex h-6 w-6 items-center justify-center rounded-full text-muted transition hover:text-text"
+          size="iconXs"
+          variant="ghost"
+          className="shrink-0 text-muted hover:text-text"
           aria-label={copied ? "Copied" : "Copy address"}
           title={copied ? "Copied" : "Copy address"}
           onClick={() => void copy()}
@@ -69,7 +72,7 @@ export const AddressInline: React.FC<AddressInlineProps> = ({
           ) : (
             <Copy className="h-3.5 w-3.5" />
           )}
-        </button>
+        </Button>
       ) : null}
     </span>
   );

src/components/ExpandableCard.tsx

@@ -5,6 +5,7 @@ import { ChevronDown } from "lucide-react";
 import { Card } from "@/components/primitives/card";
 import { GlassyCard } from "@/components/GlassyCard";
 import { Kicker } from "@/components/Kicker";
+import { Button } from "@/components/primitives/button";
 import { cn } from "@/lib/utils";
 
 type ExpandableCardProps = {
@@ -30,8 +31,10 @@ export function ExpandableCard({
 }: ExpandableCardProps) {
   const content = (
     <>
-      <button
+      <Button
         type="button"
+        size="content"
+        variant="bare"
         className="flex w-full flex-col gap-4 px-5 py-4 text-left transition hover:bg-[color:var(--surface-glass-hover-bg)] sm:flex-row sm:items-center sm:justify-between"
         aria-expanded={expanded}
         onClick={onToggle}
@@ -49,7 +52,7 @@ export function ExpandableCard({
             )}
           />
         </div>
-      </button>
+      </Button>
 
       {expanded ? (
         <div className="space-y-5 border-t border-border px-5 py-5">

src/components/GlassyRecordCard.tsx

@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
 
 import { Chip } from "@/components/Chip";
 import { GlassyCard } from "@/components/GlassyCard";
+import { Button } from "@/components/primitives/button";
 import { StageChip } from "@/components/StageChip";
 import { normalizePreviewText } from "@/lib/textPreview";
 import { cn } from "@/lib/utils";
@@ -53,8 +54,10 @@ export function GlassyRecordCard({
         className,
       )}
     >
-      <button
+      <Button
         type="button"
+        size="content"
+        variant="bare"
         className="glassy-record-card__button"
         aria-expanded={expanded}
         onClick={onToggle}
@@ -90,7 +93,7 @@ export function GlassyRecordCard({
             )}
           />
         </span>
-      </button>
+      </Button>
 
       {expanded ? (
         <div className="glassy-record-card__details">{children}</div>

src/components/Hint.tsx

@@ -206,12 +206,7 @@ const HintSurface: React.FC<HintSurfaceProps> = ({
         </p>
       </CardHeader>
       <CardContent className="hint-actions flex justify-center px-4 pt-1 pb-3">
-        <Button
-          size="sm"
-          variant="primary"
-          className="text-xs"
-          onClick={onNavigate}
-        >
+        <Button size="sm" variant="primary" onClick={onNavigate}>
           {actionLabel}
         </Button>
       </CardContent>

src/components/PageHint.tsx

@@ -28,12 +28,12 @@ export const PageHint: React.FC<PageHintProps> = ({ pageId, className }) => {
     <div className={cn("pagehint-root", className)}>
       <Button
         variant="ghost"
-        size="sm"
-        className="h-10 w-10 rounded-full border border-(--pagehint) bg-(--pagehint) text-(--pagehint-foreground) shadow-(--shadow-pagehint) hover:bg-(--pagehint-hover) hover:text-(--pagehint-foreground) focus-visible:ring-(--pagehint-dim)"
+        size="iconMd"
+        className="border border-(--pagehint) bg-(--pagehint) text-(--pagehint-foreground) shadow-(--shadow-pagehint) hover:bg-(--pagehint-hover) hover:text-(--pagehint-foreground) focus-visible:ring-(--pagehint-dim)"
         onClick={() => setOpen(true)}
         aria-label="Open page hint"
       >
-        <span className="text-3xl leading-none font-bold" aria-hidden="true">
+        <span className="text-base leading-none font-bold" aria-hidden="true">
           ?
         </span>
       </Button>
@@ -55,7 +55,7 @@ export const PageHint: React.FC<PageHintProps> = ({ pageId, className }) => {
               </div>
               <Button
                 variant="ghost"
-                size="sm"
+                size="iconSm"
                 aria-label="Close page hint"
                 onClick={() => setOpen(false)}
                 className="text-text"

src/components/ProposalNarrative.css

@@ -75,13 +75,6 @@ ol.proposal-narrative__list {
   padding: 0.375rem;
 }
 
-.proposal-narrative-editor__toolbar button {
-  min-height: 2rem;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  font-size: 0.75rem;
-}
-
 .proposal-narrative-editor__input {
   display: block;
   width: 100%;

src/components/ProposalNarrativeEditor.tsx

@@ -139,7 +139,7 @@ export default function ProposalNarrativeEditor({
             key={label}
             aria-label={label}
             aria-controls={id}
-            size="sm"
+            size="toolbar"
             type="button"
             variant="ghost"
             onMouseDown={(event) => event.preventDefault()}
@@ -151,7 +151,7 @@ export default function ProposalNarrativeEditor({
         <Button
           aria-label="Link"
           aria-controls={id}
-          size="sm"
+          size="toolbar"
           type="button"
           variant="ghost"
           onMouseDown={(event) => event.preventDefault()}

src/components/VoteButton.tsx

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 
+import { Button } from "@/components/primitives/button";
 import { cn } from "@/lib/utils";
 import { SIM_AUTH_ENABLED } from "@/lib/featureFlags";
 import { useAuth } from "@/app/auth/AuthContext";
@@ -62,8 +63,10 @@ export function VoteButton({
       : undefined);
 
   return (
-    <button
+    <Button
       type="button"
+      size="content"
+      variant="bare"
       className={cn(
         baseClasses,
         sizeClasses[size],
@@ -82,6 +85,6 @@ export function VoteButton({
       <span className={size === "lg" ? "text-2xl leading-none" : ""}>
         {label}
       </span>
-    </button>
+    </Button>
   );
 }

src/components/WorkspaceHeader.tsx

@@ -81,7 +81,7 @@ export function WorkspaceHeaderAction({
       type="button"
       size="sm"
       variant="outline"
-      className="w-36 text-sm font-semibold opacity-90 hover:opacity-100"
+      className="w-36"
       disabled={disabled}
       onClick={onClick}
     >

src/components/discussions/ThreadPrimitives.tsx

@@ -209,33 +209,34 @@ export function ThreadList<
           variant={selectedThreadId === thread.id ? "panel" : "panelAlt"}
           radius="xl"
           shadow="none"
-          role="button"
-          tabIndex={0}
-          className="cursor-pointer px-4 py-3 transition hover:border-primary/60 focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
-          onClick={() => onSelect(thread.id)}
-          onKeyDown={(event) => {
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            onSelect(thread.id);
-          }}
+          className="overflow-hidden transition hover:border-primary/60"
         >
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-            <div className="min-w-0 flex-1 text-left">
-              <span className="text-xs font-semibold text-muted">
-                {categoryLabel(thread.category)} · {statusLabel(thread.status)}
-              </span>
-              <h3 className="mt-1 text-base font-semibold text-text">
-                {thread.title}
-              </h3>
-              <p className="mt-1 line-clamp-2 text-sm text-muted">
-                {thread.body}
-              </p>
-              <p className="mt-2 text-xs text-muted">
-                {thread.replies} replies · Updated{" "}
-                {formatDateTime(thread.updatedAt)}
-              </p>
+          <Button
+            type="button"
+            size="content"
+            variant="bare"
+            className="w-full cursor-pointer px-4 py-3 text-left"
+            onClick={() => onSelect(thread.id)}
+          >
+            <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div className="min-w-0 flex-1 text-left">
+                <span className="text-xs font-semibold text-muted">
+                  {categoryLabel(thread.category)} ·{" "}
+                  {statusLabel(thread.status)}
+                </span>
+                <h3 className="mt-1 text-base font-semibold text-text">
+                  {thread.title}
+                </h3>
+                <p className="mt-1 line-clamp-2 text-sm text-muted">
+                  {thread.body}
+                </p>
+                <p className="mt-2 text-xs text-muted">
+                  {thread.replies} replies · Updated{" "}
+                  {formatDateTime(thread.updatedAt)}
+                </p>
+              </div>
             </div>
-          </div>
+          </Button>
         </Surface>
       ))}
     </>