Simplify #fff color in favor of global

10up · Jan 22, 2025 · d5ebaf9 · d5ebaf9
1 parent 5772766
commit d5ebaf9
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 19 deletions.
diff --git a/assets/css/autosuggest.css b/assets/css/autosuggest.css
@@ -1,8 +1,10 @@
+@import "./global/colors.css";
+
 .ep-autosuggest-container {
 	position: relative;
 
 	& .ep-autosuggest {
-		background: #fff;
+		background: var(--ep-c-white);
 		border: 1px solid #ccc;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 		display: none;

diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
@@ -1,4 +1,5 @@
 @import "@10up/component-tooltip";
+@import "./global/colors.css";
 
 :root {
 	--ep-dashboard-status-ok: #6aa000;
@@ -40,7 +41,7 @@ h2.ep-list-features {
 }
 
 .ep-header-menu {
-	background-color: #fff;
+	background-color: var(--ep-c-white);
 	border-bottom: 2px solid #ddd;
 	margin-left: -20px;
 	padding-bottom: 5px;
@@ -132,7 +133,7 @@ h2.ep-list-features {
 
 .error-overlay.cant-connect,
 .error-overlay.syncing {
-	background-color: #fff;
+	background-color: var(--ep-c-white);
 	bottom: 0;
 	content: " ";
 	display: block;
@@ -576,7 +577,7 @@ h2.ep-list-features {
 }
 
 .ep-circle {
-	background: #fff;
+	background: var(--ep-c-white);
 	border-radius: 50%;
 	color: #626262;
 	display: inline-block;
@@ -617,7 +618,7 @@ h2.ep-list-features {
 
 .ep-circle--active {
 	background-color: #d73c38;
-	color: #fff;
+	color: var(--ep-c-white);
 }
 
 .wrap.intro {
@@ -648,7 +649,7 @@ h2.ep-list-features {
 	border: none;
 	border-radius: 10px;
 	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
-	color: #fff;
+	color: var(--ep-c-white);
 	display: inline-block;
 	margin: 0 0.75em;
 	padding: 1em 1.5em;
@@ -661,7 +662,7 @@ h2.ep-list-features {
 }
 
 .setup-message .setup-button-primary {
-	background-color: #fff;
+	background-color: var(--ep-c-white);
 	color: #d84440;
 }
 
@@ -859,14 +860,14 @@ h2 .nav-tab.ep-credentials-tab {
 	} */
 
 	@media (--wide-min) {
-		background-color: #fff;
+		background-color: var(--ep-c-white);
 		margin-right: 28px;
 		width: 37%;
 	}
 }
 
 .stats-queries {
-	background-color: #fff;
+	background-color: var(--ep-c-white);
 	width: 100%;
 
 	/* @media( --tablet-min ) {

diff --git a/assets/css/facets.css b/assets/css/facets.css
@@ -1,5 +1,6 @@
+@import "./global/colors.css";
+
 :root {
-	--ep-range-slider-background-color: #fff;
 	--ep-range-slider-track-color: #eee;
 
 	@media ( min-width: 768px ) {
@@ -142,7 +143,7 @@
 	border-radius: calc(var(--ep-range-slider-thumb-size) / 2);
 	box-shadow:
 		inset 0 0 0 calc(var(--ep-range-slider-thumb-size) / 10) currentcolor,
-		inset 0 0 0 calc((var(--ep-range-slider-thumb-size) - var(--ep-range-slider-track-size)) / 2) var(--ep-range-slider-background-color);
+		inset 0 0 0 calc((var(--ep-range-slider-thumb-size) - var(--ep-range-slider-track-size)) / 2) var(--ep-c-white);
 	height: var(--ep-range-slider-thumb-size);
 	width: var(--ep-range-slider-thumb-size);
 }

diff --git a/assets/css/instant-results.css b/assets/css/instant-results.css
@@ -1,3 +1,4 @@
+@import "./global/colors.css";
 @import "instant-results/utilities.css";
 @import "instant-results/checkbox.css";
 @import "instant-results/input.css";
@@ -16,8 +17,8 @@
 @import "instant-results/tokens.css";
 @import "instant-results/toolbar.css";
 
+
 :root {
-	--ep-search-background-color: #fff;
 	--ep-search-alternate-background-color: #efefef;
 	--ep-search-border-color: #dfdfdf;
 	--ep-search-range-thumb-size: 1.625em;

diff --git a/assets/css/instant-results/modal.css b/assets/css/instant-results/modal.css
@@ -36,7 +36,7 @@
 }
 
 .ep-search-modal__content {
-	background-color: var(--ep-search-background-color);
+	background-color: var(--ep-c-white);
 	bottom: 0;
 	display: flex;
 	flex-direction: column;

diff --git a/assets/css/instant-results/range-slider.css b/assets/css/instant-results/range-slider.css
@@ -20,7 +20,7 @@
 	border-radius: calc(var(--ep-search-range-thumb-size) / 2);
 	box-shadow:
 		inset 0 0 0 calc(var(--ep-search-range-thumb-size) / 10) currentcolor,
-		inset 0 0 0 calc((var(--ep-search-range-thumb-size) - var(--ep-search-range-track-size)) / 2) var(--ep-search-background-color);
+		inset 0 0 0 calc((var(--ep-search-range-thumb-size) - var(--ep-search-range-track-size)) / 2) var(--ep-c-white);
 	height: var(--ep-search-range-thumb-size);
 	width: var(--ep-search-range-thumb-size);
 }
diff --git a/assets/css/ordering.css b/assets/css/ordering.css
@@ -1,3 +1,5 @@
+@import "./global/colors.css";
+
 #ep-ordering {
 	border-left-width: 0;
 	border-right-width: 0;
@@ -11,13 +13,13 @@
 	& .pointers,
 	& .pointer-search,
 	& .loading {
-		background-color: #fff;
+		background-color: var(--ep-c-white);
 		border-left: 1px solid #eee;
 		border-right: 1px solid #eee;
 	}
 
 	& .new-post {
-		background: #fff;
+		background: var(--ep-c-white);
 		padding: 0 1em;
 	}
 
@@ -81,7 +83,7 @@
 	}
 
 	& .legend {
-		background: #fff;
+		background: var(--ep-c-white);
 		border-bottom: 1px solid #eee;
 		padding: 1em 0;
 		text-align: center;

diff --git a/assets/css/woocommerce/admin/components/combobox.css b/assets/css/woocommerce/admin/components/combobox.css
@@ -1,5 +1,4 @@
 :root {
-	--ep-combobox-list-background: #fff;
 	--ep-combobox-list-background-selected: #f5f5f5;
 	--ep-combobox-list-border: #8c8f94;
 }
@@ -9,7 +8,7 @@
 }
 
 .ep-combobox__list {
-	background-color: var(--ep-combobox-list-background);
+	background-color: var(var(--ep-c-white));
 	border: 1px solid var(--ep-combobox-list-border);
 	border-radius: 4px;
 	box-shadow: 0 2px 6px rgb(0 0 0 / 5%);

diff --git a/assets/css/woocommerce/admin/orders.css b/assets/css/woocommerce/admin/orders.css
@@ -1,3 +1,4 @@
+@import "./global/colors.css";
 @import "components/combobox.css";
 @import "components/suggestion.css";