From 9401dcbd57cbdde2c47ebfeb8bf9cc48ce75a51e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 29 Aug 2025 13:54:48 +0200
Subject: [PATCH 1/5] fix(button): increase contrast for light positive action

Only secondary/plain, as primary uses white text color.
---
 components/button/server.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/button/server.css b/components/button/server.css
index eb4c3f3fc..7727ca12f 100644
--- a/components/button/server.css
+++ b/components/button/server.css
@@ -75,6 +75,7 @@
       color: light-dark(var(--color-green-50), var(--color-green-80));
 
       &:hover {
+        color: light-dark(var(--color-green-20), var(--color-green-80));
         background-color: light-dark(
           var(--color-green-90),
           var(--color-green-10)
@@ -102,6 +103,7 @@
       color: light-dark(var(--color-green-50), var(--color-green-80));
 
       &:hover {
+        color: light-dark(var(--color-green-20), var(--color-green-80));
         background-color: light-dark(
           var(--color-green-90),
           var(--color-green-10)

From 000e4ab3a408bb541761093e51babee977f79ded Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 29 Aug 2025 14:03:17 +0200
Subject: [PATCH 2/5] fix(button): increase contrast for light negative action

---
 components/button/server.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/button/server.css b/components/button/server.css
index 7727ca12f..c5780ef73 100644
--- a/components/button/server.css
+++ b/components/button/server.css
@@ -87,6 +87,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }
@@ -115,6 +116,7 @@
       color: light-dark(var(--color-red-50), var(--color-red-80));
 
       &:hover {
+        color: light-dark(var(--color-red-20), var(--color-red-80));
         background-color: light-dark(var(--color-red-90), var(--color-red-10));
       }
     }

From 9ed89ec706363098ebb606e3f5589cbacfcf9782 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 3 Sep 2025 14:19:39 +0200
Subject: [PATCH 3/5] chore(sandbox): add disabled buttons

---
 components/button/sandbox.js | 55 +++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/components/button/sandbox.js b/components/button/sandbox.js
index 2e6d673b3..a693d05b4 100644
--- a/components/button/sandbox.js
+++ b/components/button/sandbox.js
@@ -18,6 +18,7 @@ export class ButtonSandbox extends SandboxComponent {
       { icon, iconOnly: false },
       { icon, iconOnly: true },
     ];
+    const disabled = [false, true];
 
     return html`
       <style>
@@ -43,29 +44,39 @@ export class ButtonSandbox extends SandboxComponent {
         Button in <mdn-button .icon=${icon}>the middle</mdn-button> of text with
         icon.
       </p>
-      ${hrefs.map(
-        (href) => html`
-          <h3><code>${href ? "<a>" : "<button>"}</code></h3>
-          <section>
-            ${variants.map((variant) =>
-              actions.map((action) =>
-                icons.map(
-                  ({ icon, iconOnly }) => html`
-                    <mdn-button
-                      href=${ifDefined(href)}
-                      variant=${ifDefined(variant)}
-                      action=${ifDefined(action)}
-                      .icon=${icon}
-                      ?icon-only=${iconOnly}
-                    >
-                      ${variant || "no variant"} ${action} ${icon ? "icon" : ""}
-                    </mdn-button>
-                  `,
+      ${hrefs.map((href) =>
+        disabled.map(
+          (disabled) => html`
+            <h3>
+              <code
+                >${href
+                  ? "<a>"
+                  : `<button${disabled ? " disabled" : ""}>`}</code
+              >
+            </h3>
+            <section>
+              ${variants.map((variant) =>
+                actions.map((action) =>
+                  icons.map(
+                    ({ icon, iconOnly }) => html`
+                      <mdn-button
+                        href=${ifDefined(href)}
+                        variant=${ifDefined(variant)}
+                        action=${ifDefined(action)}
+                        .icon=${icon}
+                        ?icon-only=${iconOnly}
+                        ?disabled=${disabled}
+                      >
+                        ${variant || "no variant"} ${action}
+                        ${icon ? "icon" : ""} ${disabled ? "disabled" : ""}
+                      </mdn-button>
+                    `,
+                  ),
                 ),
-              ),
-            )}
-          </section>
-        `,
+              )}
+            </section>
+          `,
+        ),
       )}
       <h2>Server component</h2>
       <div class="manual-size">

From 1120399e817d87ef84a7468b491284ef45f3f3dd Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 3 Sep 2025 14:36:42 +0200
Subject: [PATCH 4/5] fix(button): increase dark neutral hover contrast

---
 components/button/server.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/button/server.css b/components/button/server.css
index c5780ef73..ae0238129 100644
--- a/components/button/server.css
+++ b/components/button/server.css
@@ -34,7 +34,7 @@
     background-color: light-dark(var(--color-black), var(--color-white));
 
     &:hover {
-      background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
+      background-color: light-dark(var(--color-gray-20), var(--color-gray-60));
     }
 
     &[data-action="positive"] {
@@ -68,7 +68,7 @@
     border-color: currentcolor;
 
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {
@@ -97,7 +97,7 @@
 
   &[data-variant="plain"] {
     &:hover {
-      background-color: light-dark(var(--color-gray-80), var(--color-gray-20));
+      background-color: light-dark(var(--color-gray-80), var(--color-gray-40));
     }
 
     &[data-action="positive"] {

From 34c264c698080cd3a43ac146e5f8f984d4b04c29 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 3 Sep 2025 14:44:45 +0200
Subject: [PATCH 5/5] fix(button): increase light primary hover contrast

---
 components/button/server.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/server.css b/components/button/server.css
index ae0238129..4f1ea16f1 100644
--- a/components/button/server.css
+++ b/components/button/server.css
@@ -34,7 +34,7 @@
     background-color: light-dark(var(--color-black), var(--color-white));
 
     &:hover {
-      background-color: light-dark(var(--color-gray-20), var(--color-gray-60));
+      background-color: light-dark(var(--color-gray-40), var(--color-gray-60));
     }
 
     &[data-action="positive"] {