From f9c74a62b6353e2ba3096f797ed7fc735341ae4f Mon Sep 17 00:00:00 2001
From: Bruno Fantauzzi <bftzia@gmail.com>
Date: Tue, 1 Sep 2026 21:15:45 -0300
Subject: [PATCH] fix(kumo): remove ghost button background

---
 .changeset/quiet-ghost-buttons.md                   | 5 +++++
 packages/kumo/src/components/button/button.test.tsx | 7 +++++++
 packages/kumo/src/components/button/button.tsx      | 2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/quiet-ghost-buttons.md

diff --git a/.changeset/quiet-ghost-buttons.md b/.changeset/quiet-ghost-buttons.md
new file mode 100644
index 0000000000..454b08fcbc
--- /dev/null
+++ b/.changeset/quiet-ghost-buttons.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Remove the inherited resting background from ghost buttons so translucent parent surfaces do not appear darker beneath them.
diff --git a/packages/kumo/src/components/button/button.test.tsx b/packages/kumo/src/components/button/button.test.tsx
index ed2cf490df..736ea1ebe6 100644
--- a/packages/kumo/src/components/button/button.test.tsx
+++ b/packages/kumo/src/components/button/button.test.tsx
@@ -66,6 +66,13 @@ describe("Button", () => {
     expect(button.classList.contains("select-text")).toBe(false);
   });
 
+  it("does not paint a resting background for ghost buttons", () => {
+    const className = buttonVariants({ variant: "ghost" });
+
+    expect(className).toContain("hover:bg-kumo-tint");
+    expect(className).not.toContain("bg-inherit");
+  });
+
   it("forwards ref to the <button> DOM node", () => {
     const ref = React.createRef<HTMLButtonElement>();
     render(<Button ref={ref}>Click</Button>);
diff --git a/packages/kumo/src/components/button/button.tsx b/packages/kumo/src/components/button/button.tsx
index a8e50b53d0..52c04ed95d 100644
--- a/packages/kumo/src/components/button/button.tsx
+++ b/packages/kumo/src/components/button/button.tsx
@@ -58,7 +58,7 @@ export const KUMO_BUTTON_VARIANTS = {
       description: "Default button style for most actions",
     },
     ghost: {
-      classes: "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
+      classes: "text-kumo-default hover:bg-kumo-tint shadow-none",
       description: "Minimal button with no background",
     },
     destructive: {