Try simplifying with CSS vars

WordPress · Oct 25, 2022 · 6ea9152 · 6ea9152
1 parent c264be0
commit 6ea9152
Showing 1 changed file with 15 additions and 57 deletions.
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -171,55 +171,27 @@
 	/**
 	 * Destructive buttons.
 	 */
-
 	&.is-destructive {
-		color: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled),
-		&:focus:not(:disabled) {
-			color: darken($alert-red, 20%);
-		}
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%);
-		}
+		--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%)};
 
-		&:active:not(:disabled) {
+		// 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;
-		}
-	}
-
-	&.is-destructive.is-primary {
-		color: #fff;
-		background: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled),
-		&:focus:not(:disabled) {
-			color: #fff;
-			background: darken($alert-red, 20%);
-		}
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) darken($alert-red, 20%);
-		}
-
-		&:active:not(:disabled) {
-			background: $alert-red;
-			color: #fff;
-		}
-	}
+			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;
+			}
 		}
 	}
 
@@ -247,20 +219,6 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
-
-		// Link buttons that are red to indicate destructive behavior.
-		&.is-destructive {
-			color: $alert-red;
-
-			&:hover:not(:disabled),
-			&:focus:not(:disabled) {
-				color: darken($alert-red, 20%);
-			}
-
-			&:active:not(:disabled) {
-				color: $alert-red;
-			}
-		}
 	}
 
 	&:not([aria-disabled="true"]):active {