Merge pull request #3088 from Automattic/seedlet/fix-button-colors-inside-groups

Seedlet: Fix button colors

seedlet/assets/css/style-editor.css

@@ -541,14 +541,14 @@ object {
 	color: currentColor;
 }
 
-.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-text a:not(.has-text-color),
-.wp-block-cover .block-editor-block-list__block a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color),
-.wp-block-cover-image .block-editor-block-list__block a:not(.has-text-color) {
+.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .block-editor-block-list__block a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .block-editor-block-list__block a:not(.has-text-color):not(.wp-block-button__link) {
 	color: currentColor;
 }
 

seedlet/assets/sass/blocks/button/_style.scss

@@ -25,11 +25,14 @@ input[type="submit"],
 
 		&.wp-block-button__link,
 		.wp-block-button__link {
-			color: var(--button--color-background);
 			background: transparent;
 			border: var(--button--border-width) solid currentcolor;
 			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 
+			&:not(.has-text-color) {
+				color: var(--button--color-background);
+			}
+
 			&:active {
 				color: var(--button--color-background);
 			}

seedlet/assets/sass/blocks/cover/_editor.scss

@@ -12,7 +12,7 @@
 	.block-editor-block-list__block {
 		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
 
-		a:not(.has-text-color) {
+		a:not(.has-text-color):not(.wp-block-button__link) {
 			color: currentColor;
 		}
 		.has-link-color a {

seedlet/assets/sass/blocks/cover/_style.scss

@@ -13,7 +13,7 @@
 		margin-top: var(--global--spacing-vertical);
 		margin-bottom: var(--global--spacing-vertical);
 
-		a:not(.has-text-color) {
+		a:not(.has-text-color):not(.wp-block-button__link) {
 			color: currentColor;
 		}
 		.has-link-color a {

seedlet/assets/sass/blocks/utilities/_style.scss

@@ -180,7 +180,7 @@
 
 // Gutenberg background-color options
 .has-background {
-	&:not(.has-background-background-color) a:not(.has-text-color),
+	&:not(.has-background-background-color) a:not(.has-text-color):not(.wp-block-button__link),
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}

seedlet/style-rtl.css

@@ -1247,12 +1247,16 @@ object {
 
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: var(--button--color-background);
 	background: transparent;
 	border: var(--button--border-width) solid currentcolor;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--button--color-background);
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
 	color: var(--button--color-background);
@@ -1365,12 +1369,12 @@ object {
 	margin-bottom: var(--global--spacing-vertical);
 }
 
-.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-text a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color) {
+.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link) {
 	color: currentColor;
 }
 
@@ -2606,7 +2610,7 @@ pre.wp-block-verse {
 	color: var(--global--color-black);
 }
 
-.has-background:not(.has-background-background-color) a:not(.has-text-color),
+.has-background:not(.has-background-background-color) a:not(.has-text-color):not(.wp-block-button__link),
 .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
 	color: currentColor;
 }

seedlet/style.css

@@ -1247,12 +1247,16 @@ object {
 
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: var(--button--color-background);
 	background: transparent;
 	border: var(--button--border-width) solid currentcolor;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: var(--button--color-background);
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
 	color: var(--button--color-background);
@@ -1365,12 +1369,12 @@ object {
 	margin-bottom: var(--global--spacing-vertical);
 }
 
-.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover .wp-block-cover-text a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color),
-.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color) {
+.wp-block-cover .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover__inner-container a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-image-text a:not(.has-text-color):not(.wp-block-button__link),
+.wp-block-cover-image .wp-block-cover-text a:not(.has-text-color):not(.wp-block-button__link) {
 	color: currentColor;
 }
 
@@ -2615,7 +2619,7 @@ pre.wp-block-verse {
 	color: var(--global--color-black);
 }
 
-.has-background:not(.has-background-background-color) a:not(.has-text-color),
+.has-background:not(.has-background-background-color) a:not(.has-text-color):not(.wp-block-button__link),
 .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
 	color: currentColor;
 }