From 6c83e672b7b7ca3adc093faa024ebc432ee722a0 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 15 May 2023 10:09:54 +0200
Subject: [PATCH] Button: Update disabled state to be without background.
 (#50496)

* Button: Update disabled state to be without background.

* Update changelog.

* Merge changelog section

* Remove outdated TODO comment

---------

Co-authored-by: Lena Morita <lena@jaguchi.com>
---
 packages/components/CHANGELOG.md          |  1 +
 packages/components/src/button/style.scss | 17 +++++------------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d67bb0fc303cc..d49f137f467c8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -11,6 +11,7 @@
 ### Bug Fix
 
 -   `NavigableContainer`: do not trap focus in `TabbableContainer` ([#49846](https://github.com/WordPress/gutenberg/pull/49846)).
+-   Update `<Button>` component to have a transparent background for its tertiary disabled state, to match its enabled state.  ([#50496](https://github.com/WordPress/gutenberg/pull/50496)).
 
 ### Internal
 
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3ec844906b039..fefc93b4fa8e0 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -118,21 +118,14 @@
 		outline: 1px solid transparent;
 
 		&:active:not(:disabled) {
-			background: $components-color-gray-300;
-			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
 
-		&:hover:not(:disabled) {
-			color: $components-color-accent-darker-10;
-		}
-
 		&:disabled,
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:hover {
-			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			color: lighten($gray-700, 5%);
-			background: lighten($gray-300, 5%);
+			color: $gray-600;
+			background: transparent;
 			transform: none;
 			opacity: 1;
 			box-shadow: none;
@@ -165,12 +158,12 @@
 		color: $components-color-accent;
 		background: transparent;
 
-		&:hover:not(:disabled) {
+		&:hover:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
-		&:active:not(:disabled) {
+		&:active:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
@@ -239,7 +232,7 @@
 		}
 	}
 
-	&:not([aria-disabled="true"]):active {
+	&:not(:disabled, [aria-disabled="true"]):active {
 		color: $components-color-foreground;
 	}