Varia: use `currentColor` when background color is set

varia/sass/blocks/blog-posts/_editor.scss

@@ -15,6 +15,12 @@
 			&:hover {
 				color: #{map-deep-get($config-global, "color", "primary", "hover")};
 			}
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
 		}
 	}
 
@@ -23,5 +29,11 @@
 	.cat-links {
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			color: currentColor;
+		}
 	}
 }

varia/sass/blocks/blog-posts/_style.scss

@@ -25,6 +25,12 @@
 			&:hover {
 				color: #{map-deep-get($config-global, "color", "primary", "hover")};
 			}
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
 		}
 	}
 
@@ -52,6 +58,12 @@
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			color: currentColor;
+		}
+
 		> span {
 			display: inline-block;
 			margin-right: #{map-deep-get($config-global, "spacing", "unit")};
@@ -98,4 +110,12 @@ button[data-load-more-btn] {
 	// Extend button style
 	@extend %button-style;
 	display: inline-block;
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"] & {
+		background-color: transparent;
+		border: 2px solid currentColor;
+		color: currentColor;
+	}
 }

varia/style-editor.css

@@ -317,6 +317,12 @@ object {
 	color: indigo;
 }
 
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
 .wp-block-a8c-blog-posts .entry-meta,
 .wp-block-a8c-blog-posts .entry-footer,
 .wp-block-a8c-blog-posts .cat-links {
@@ -324,6 +330,22 @@ object {
 	font-size: 0.83333rem;
 }
 
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

varia/style-rtl.css

@@ -1294,6 +1294,7 @@ object {
 
 .wp-block-newspack-blocks-homepage-articles.is-grid article {
 	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
 }
 
 button[data-load-more-btn] {

varia/style.css

@@ -1217,6 +1217,12 @@ object {
 	color: indigo;
 }
 
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
 .wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
 	/* Vertical margins logic between post details */
 	margin-top: 16px;
@@ -1242,6 +1248,22 @@ object {
 	font-size: 0.83333rem;
 }
 
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
 .wp-block-newspack-blocks-homepage-articles article .entry-meta > span,
 .wp-block-newspack-blocks-homepage-articles article .entry-footer > span,
 .wp-block-newspack-blocks-homepage-articles article .cat-links > span {
@@ -1301,6 +1323,14 @@ button[data-load-more-btn] {
 	display: inline-block;
 }
 
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */