Commit 516f47c3729 for woocommerce
commit 516f47c3729ca8afcb437c59d7fac670ea676bd4
Author: Ann <annchichi@users.noreply.github.com>
Date: Wed Apr 29 03:27:25 2026 +0800
Use --wp-admin-theme-color for legacy Select2 (#64244)
* Use --wp-admin-theme-color for legacy Select2 and address autocomplete blues
* Add changelog entry for legacy admin blues theme color sweep
diff --git a/plugins/woocommerce/changelog/tweak-legacy-admin-blues-theme-color-sweep b/plugins/woocommerce/changelog/tweak-legacy-admin-blues-theme-color-sweep
new file mode 100644
index 00000000000..8de856b48cb
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-legacy-admin-blues-theme-color-sweep
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Replace remaining hardcoded admin blues in legacy Select2 and address autocomplete stylesheets with var(--wp-admin-theme-color) so borders and hover/focus states adopt the merchant's admin color scheme.
diff --git a/plugins/woocommerce/client/legacy/css/address-autocomplete.scss b/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
index 47c9006f1fd..de567c39422 100644
--- a/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
+++ b/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
@@ -33,13 +33,13 @@
&:hover,
&.active {
- background-color: #0073aa;
+ background-color: var(--wp-admin-theme-color, #0073aa);
color: #fff;
}
&:focus {
outline: none;
- background-color: #0073aa;
+ background-color: var(--wp-admin-theme-color, #0073aa);
color: #fff;
}
}
diff --git a/plugins/woocommerce/client/legacy/css/select2.scss b/plugins/woocommerce/client/legacy/css/select2.scss
index 86bfc283487..6dffff04449 100644
--- a/plugins/woocommerce/client/legacy/css/select2.scss
+++ b/plugins/woocommerce/client/legacy/css/select2.scss
@@ -487,7 +487,7 @@
.select2-results__option--highlighted[data-selected],
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
- background-color: #0073aa;
+ background-color: var(--wp-admin-theme-color, #0073aa);
color: white;
}
@@ -508,7 +508,7 @@
}
.select2-container--classic .select2-selection--single:focus {
- border: 1px solid #0073aa;
+ border: 1px solid var(--wp-admin-theme-color, #0073aa);
}
.select2-container--classic
@@ -586,7 +586,7 @@
}
.select2-container--classic.select2-container--open .select2-selection--single {
- border: 1px solid #0073aa;
+ border: 1px solid var(--wp-admin-theme-color, #0073aa);
}
.select2-container--classic.select2-container--open
@@ -633,7 +633,7 @@
}
.select2-container--classic .select2-selection--multiple:focus {
- border: 1px solid #0073aa;
+ border: 1px solid var(--wp-admin-theme-color, #0073aa);
}
.select2-container--classic
@@ -701,7 +701,7 @@
.select2-container--classic.select2-container--open
.select2-selection--multiple {
- border: 1px solid #0073aa;
+ border: 1px solid var(--wp-admin-theme-color, #0073aa);
}
.select2-container--classic.select2-container--open.select2-container--above
@@ -769,5 +769,5 @@
}
.select2-container--classic.select2-container--open .select2-dropdown {
- border-color: #0073aa;
+ border-color: var(--wp-admin-theme-color, #0073aa);
}