Align button module with legacy btn styles

Author: root

packages/web/src/components/ui/button/index.module.css

@@ -5,7 +5,6 @@
   justify-content: center;
   gap: var(--sp-2);
   height: var(--btn-height-md);
-  min-height: var(--touch-target-min);
   padding: 0 var(--sp-4);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
@@ -14,35 +13,24 @@
   font-weight: var(--font-medium);
   line-height: 1;
   white-space: nowrap;
-  text-decoration: none;
   transition:
     background var(--duration-normal) var(--ease-out),
     border-color var(--duration-normal) var(--ease-out),
     color var(--duration-normal) var(--ease-out),
     box-shadow var(--duration-normal) var(--ease-out),
     transform var(--duration-fast) var(--ease-out);
-  cursor: pointer;
 }
 
 .btn:focus-visible,
 :global(.btn):focus-visible {
   box-shadow:
-    0 0 0 calc(var(--sp-1) / 2) var(--bg-page),
-    0 0 0 var(--sp-1) var(--border-focus);
+    0 0 0 2px var(--bg-page),
+    0 0 0 4px rgba(108, 182, 255, 0.35);
 }
 
-.btn:hover:not(:disabled):not([aria-disabled="true"]),
-:global(.btn):hover:not(:disabled):not([aria-disabled="true"]) {
-  transform: translateY(calc(var(--sp-1) / -4));
-}
-
-.btn:disabled,
-.btn[aria-disabled="true"],
-:global(.btn):disabled,
-:global(.btn[aria-disabled="true"]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
+.btn:hover:not(:disabled),
+:global(.btn):hover:not(:disabled) {
+  transform: translateY(-1px);
 }
 
 .primary,
@@ -53,7 +41,7 @@
 
 .primary:hover:not(:disabled):not([aria-disabled="true"]),
 :global(.btn-primary):hover:not(:disabled):not([aria-disabled="true"]) {
-  background: color-mix(in srgb, var(--accent-blue) 84%, var(--bg-surface) 16%);
+  background: color-mix(in srgb, var(--accent-blue) 84%, white 16%);
 }
 
 .secondary,
@@ -92,17 +80,15 @@
 
 .sm,
 :global(.btn-sm) {
-  height: var(--btn-height-sm);
-  min-height: var(--touch-target-min);
+  height: 24px;
   padding: 0 var(--sp-2);
   border-radius: var(--radius-sm);
   font-size: var(--text-xs);
 }
 
 .lg,
 :global(.btn-lg) {
-  height: var(--btn-height-lg);
-  min-height: var(--touch-target-min);
+  height: 40px;
   padding: 0 var(--sp-6);
   border-radius: var(--radius-lg);
   font-size: var(--text-lg);

packages/web/src/components/ui/button/index.test.tsx

@@ -109,4 +109,20 @@ describe("Button", () => {
 
     expect(screen.getByRole("link", { name: "Settings" })).toHaveAttribute("href", "/settings");
   });
+
+  it("preserves legacy classes and loading semantics for anchors", () => {
+    render(
+      <Button as="a" href="/settings" loading variant="ghost" size="sm">
+        Settings
+      </Button>
+    );
+
+    expect(screen.getByRole("link", { name: "Settings" })).toHaveClass(
+      "btn",
+      "btn-ghost",
+      "btn-sm"
+    );
+    expect(screen.getByRole("link", { name: "Settings" })).toHaveAttribute("aria-busy", "true");
+    expect(screen.getByRole("link", { name: "Settings" })).not.toHaveAttribute("disabled");
+  });
 });