From a6b6303e4472beb1a60e07d4f7933e45cfb1d0a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Tue, 9 May 2023 09:20:32 +0200
Subject: [PATCH] Make sure colors don't break existing themes

---
 assets/js/blocks/mini-cart/frontend.ts               | 7 ++++---
 assets/js/blocks/mini-cart/quantity-badge/style.scss | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/js/blocks/mini-cart/frontend.ts b/assets/js/blocks/mini-cart/frontend.ts
index aead5843308..ee0e0c82c44 100644
--- a/assets/js/blocks/mini-cart/frontend.ts
+++ b/assets/js/blocks/mini-cart/frontend.ts
@@ -180,8 +180,7 @@ window.addEventListener( 'load', () => {
 
 	/**
 	 * Get the background color of the body then set it as the background color
-	 * of the Mini Cart Contents block. We use :where here to make customized
-	 * background color alway have higher priority.
+	 * of the Mini Cart Contents block.
 	 *
 	 * We only set the background color, instead of the whole background. As
 	 * we only provide the option to customize the background color.
@@ -199,12 +198,14 @@ window.addEventListener( 'load', () => {
 		? getClosestColor( firstMiniCartButton, 'color' )
 		: 'inherit';
 
+	// We use :where here to reduce specificity so customized colors and theme
+	// CSS take priority.
 	style.appendChild(
 		document.createTextNode(
 			`:where(.wp-block-woocommerce-mini-cart-contents) {
 				background-color: ${ backgroundColor };
 			}
-			.wc-block-mini-cart__badge {
+			:where(.wc-block-mini-cart__badge) {
 				background-color: ${ badgeBackgroundColor };
 				color: ${ badgeTextColor };
 			}`
diff --git a/assets/js/blocks/mini-cart/quantity-badge/style.scss b/assets/js/blocks/mini-cart/quantity-badge/style.scss
index cadbf5740f5..35203487961 100644
--- a/assets/js/blocks/mini-cart/quantity-badge/style.scss
+++ b/assets/js/blocks/mini-cart/quantity-badge/style.scss
@@ -22,7 +22,9 @@
 	transition: all 0.15s;
 	white-space: nowrap;
 	z-index: 1;
+}
 
+:where(.wc-block-mini-cart__badge) {
 	// These values will be overridden in JS.
 	background-color: transparent;
 	color: transparent;