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 <[email protected]>
WordPress · Oct 28, 2022 · dccd97c · dccd97c
1 parent a71ff6a
commit dccd97c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 53 deletions.
diff --git 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
@@ -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 {