From dccd97cb234a96b6904e00da6a14b2e1d92f5e5c Mon Sep 17 00:00:00 2001
From: Kevin Batdorf <kbat82@gmail.com>
Date: Fri, 28 Oct 2022 05:46:39 -0400
Subject: [PATCH] Change color on destructive button focus state (#44427)

* Change color on destructive button focus state

* Update changelog

* revert arbitrary formatting change

* Update focus styling

* Revert non destructive styling

* Remove added appearance rule

* patch from Lena Morita

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9518ea437f199..f9e3686bfde77 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -25,6 +25,7 @@
 
 ### Bug Fix
 
+-   `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
 -   `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)).
 -   `ItemGroup`: fix RTL `Item` styles when rendered as a button ([#45280](https://github.com/WordPress/gutenberg/pull/45280)).
 -   `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)).
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index ab7cd4f3c2511..29b8d4aa2cba9 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -171,52 +171,30 @@
 	/**
 	 * Destructive buttons.
 	 */
-
 	&.is-destructive {
-		color: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-
-		&:focus:not(:disabled) {
-			color: $components-color-accent;
-		}
-
-		&:active:not(:disabled) {
-			background: $gray-400;
-		}
-	}
+		--wp-components-color-accent: #{$alert-red};
+		--wp-components-color-accent-darker-10: #{darken($alert-red, 10%)};
+		--wp-components-color-accent-darker-20: #{darken($alert-red, 20%)};
 
-	&.is-destructive.is-primary {
-		color: #fff;
-		background: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: #fff;
-			background: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-	}
+		// Only the default variant is styled differently from the non-destructive counterparts.
+		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
+			color: $alert-red;
+			box-shadow: inset 0 0 0 $border-width $alert-red;
 
-	&.is-destructive.is-tertiary {
-		box-shadow: none;
+			&:hover:not(:disabled) {
+				color: darken($alert-red, 20%);
+			}
 
-		&:hover:not(:disabled) {
-			box-shadow: inset 0 0 0 $border-width $alert-red;
-			color: $alert-red;
-		}
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
+			}
 
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
-			color: $alert-red;
+			&:active:not(:disabled) {
+				background: $gray-400;
+			}
 		}
 	}
 
-
 	/**
 	 * Link buttons.
 	 */
@@ -241,21 +219,6 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
-
-		// Link buttons that are red to indicate destructive behavior.
-		&.is-destructive {
-			color: $alert-red;
-
-			&:active:not(:disabled),
-			&:hover:not(:disabled) {
-				color: darken($alert-red, 20%);
-				background: none;
-			}
-
-			&:focus:not(:disabled) {
-				color: $components-color-accent;
-			}
-		}
 	}
 
 	&:not([aria-disabled="true"]):active {