Button styles: Add is-destructive helper class for red buttons (#151)

WordPress · Sep 2, 2024 · 4511a51 · 4511a51
1 parent ce72c81
commit 4511a51
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_button.scss
@@ -113,6 +113,50 @@
 		}
 	}
 
+	// Add "destructive" button styles.
+	&.is-destructive {
+		--wp--custom--button--color--text: var(--wp--preset--color--white);
+		--wp--custom--button--color--background: #d6310c;
+		--wp--custom--button--hover--color--background: #b60000;
+		--wp--custom--button--outline--color--text: #d6310c;
+
+		--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
+		--wp--custom--button--outline--hover--color--background: var(--wp--custom--button--outline--color--text);
+		--wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text);
+
+		.wp-block-button__link:focus {
+			background-color: var(--wp--custom--button--outline--color--text);
+			color: var(--wp--preset--color--white);
+			outline-color: var(--wp--custom--button--outline--hover--border--color);
+		}
+
+		&.is-style-text .wp-block-button__link:hover {
+			--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--charcoal-1);
+			--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--pomegrade-3);
+			--wp--custom--button--outline--hover--border--color: var(--wp--preset--color--pomegrade-3);
+		}
+
+		&.is-style-fill-on-dark {
+			--wp--custom--button--focus--border--color: var(--wp--preset--color--white);
+			--wp--custom--button--hover--color--background: var(--wp--preset--color--pomegrade-1);
+		}
+
+		&.is-style-outline-on-dark {
+			--wp--custom--button--outline--color--text: var(--wp--preset--color--pomegrade-1);
+
+			.wp-block-button__link:hover {
+				color: var(--wp--preset--color--charcoal-1);
+			}
+
+			.wp-block-button__link:focus {
+				--wp--custom--button--outline--hover--border--color: var(--wp--custom--button--outline--color--text);
+				background-color: var(--wp--custom--button--outline--color--background);
+				color: var(--wp--preset--color--white);
+				outline-color: var(--wp--preset--color--white);
+			}
+		}
+	}
+
 	// Block style for navigation, but uses button style mixins.
 	&.is-style-button-list {
 		gap: 0;