Commit e813c06318c for woocommerce
commit e813c06318c5e56aa0a1c784fd5912de5673fc2c
Author: Jill Q. <jill.quek@automattic.com>
Date: Tue Apr 28 11:12:06 2026 +0800
Align structural admin elements with WP theme color CSS custom properties (#64196)
* Replace hardcoded admin blues with WP theme color CSS vars
Three spots in the admin React client hardcoded the old WordPress
accent blue (#2271b1 / #0073aa / #135e96), which looks out of place
now that WP 7.0's Modern color scheme uses #3858e9. They also fail
to respect custom admin color schemes.
Changed to var(--wp-admin-theme-color) (and
var(--wp-admin-theme-color-darker-20) for hover) with the old hex as
a fallback. Each of these locations now tracks whatever admin theme
color is active:
- Fulfillments icon fill + hover (WP admin script)
- Marketplace product card :focus-visible ring
- Dashboard chart "Skip to content" link color
Part of: RSM \u2014 Woo Sprinkles
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Extend theme-color alignment to remaining hardcoded admin blues
After the initial 3-spot fix, a fuller audit found 13 more
hardcoded admin blues across 7 files in the React admin client.
All follow the same pattern: old hardcoded blue replaced with
var(--wp-admin-theme-color, #original-hex), so Woo admin now
respects the merchant's selected admin color scheme.
Locations:
- Homescreen mobile app modal (magic link button + link)
- Marketplace my-subscriptions (refresh link, info icon, hover)
- Marketing overview campaign titles
- Task lists: products index (3 spots), products stack (2 spots),
import-products cards (2 spots), reminder bar background
One hover-state color (my-subscriptions line 314) uses
var(--wp-admin-theme-color-darker-10) for a subtle hover variation.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Revert text-link color changes to preserve accessibility across schemes
While QA'ing on Coffee and Sunrise admin color schemes, discovered that
WordPress core deliberately keeps text links at a hardcoded accessible
blue regardless of the active scheme. Several WP admin color schemes
(Light, Coffee, Ocean) use accent colors with insufficient contrast
for text on white backgrounds.
Our original PR made text links follow var(--wp-admin-theme-color),
which would make links unreadable for merchants on those schemes.
Reverting the 10 text-link color changes while keeping the 8
structural alignment changes that DO benefit from scheme-following:
KEPT (structural elements that scale with scheme correctly):
- Fulfillments SVG icon fill + hover
- Marketplace product card :focus-visible ring
- Homescreen magic link button background (white text overlay)
- My-subscriptions info icon fill
- Task list products stack :hover border
- Import-products :hover border
- Reminder bar background (white text overlay)
REVERTED (text links — stay accessibility-safe blue):
- Mobile app modal "Send another" link text
- Dashboard "Skip to content" link text
- My-subscriptions refresh link + a:hover
- Marketing campaign title links
- Task list product/import anchors and button text
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Address CodeRabbit nitpicks: hover darkening + fallback consistency
Two small follow-ups from CodeRabbit's review:
1. Mobile app modal magic link button: added &:hover background using
var(--wp-admin-theme-color-darker-20) so the button darkens on hover
in a scheme-aware way, matching the pattern used in fulfillments.
The existing :hover text-color override is preserved.
2. Fulfillments hover border fallback: the hover border was using
#00a0d2 as its fallback while the sibling SVG fills in the same
block use #2271b1 / #135e96. Aligned to #2271b1 so all fallbacks
in the block come from the same blue family.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Revert reminder bar theme-color change after accessibility review
Ayush flagged that the reminder bar (13px white text on solid accent
bg) would fail WCAG AA on multiple non-default schemes. Testing the
math confirmed it's worse than just Light/Ocean — 7 of 9 schemes fail
AA with white-on-accent.
The reminder bar is a bespoke element that doesn't follow WordPress's
standard notice patterns. The right fix is a reskin to use WP's
notice styling (dark text on light bg, which sidesteps the contrast
issue entirely) — but that's scope creep for this PR.
Reverting this one file to keep reminder bar hardcoded. A follow-up
PR will reskin it properly.
The other 6 changes in this PR don't have the contrast issue:
- Button backgrounds with white text overlay (button is padded,
white-on-theme passes on the default scheme)
- Focus rings (visual indicator, different contrast rules)
- Hover borders (don't carry text)
- Decorative icon fills (paired with text labels)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Ayush Pahwa <ayush.pahwa@automattic.com>
diff --git a/plugins/woocommerce/changelog/tweak-admin-hardcoded-blues-theme-color b/plugins/woocommerce/changelog/tweak-admin-hardcoded-blues-theme-color
new file mode 100644
index 00000000000..a60d0e54b2e
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-admin-hardcoded-blues-theme-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Replace hardcoded admin blue colors with WP admin theme color CSS custom properties so Woo inherits the active color scheme
diff --git a/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss b/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
index 3269b9a239f..bfb2c8d8c47 100644
--- a/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
+++ b/plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss
@@ -206,10 +206,13 @@
}
button.components-button.send-magic-link-button {
- background: #007cba;
+ background: var(--wp-admin-theme-color, #007cba);
color: #fff;
position: relative;
margin-bottom: 1em;
+ &:hover {
+ background: var(--wp-admin-theme-color-darker-20, #005a87);
+ }
:hover {
// the hover state makes the text invisible so we need to override it
color: #fff;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
index 72051dc140d..38d4f031fdd 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
@@ -118,7 +118,7 @@
}
svg {
- fill: #007cba;
+ fill: var(--wp-admin-theme-color, #007cba);
margin-left: 2px;
width: 16px;
height: 16px;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
index d65fd707cdd..0beb5082bf2 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
@@ -156,7 +156,7 @@
}
&:focus-visible {
- box-shadow: 0 0 0 2px #2271b1;
+ box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
}
/* Use the ::after trick to make the whole card clickable: */
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
index 895a783737f..57ce7439267 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/import-products/cards.scss
@@ -22,7 +22,7 @@
&:hover {
background-color: #fff;
- border: 1.5px solid #007cba;
+ border: 1.5px solid var(--wp-admin-theme-color, #007cba);
.woocommerce-list__item-title {
color: #1e1e1e;
}
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/products/stack.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/products/stack.scss
index 45cfb87b5cf..653c16a40e0 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/products/stack.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/products/stack.scss
@@ -20,7 +20,7 @@
&:hover {
background-color: #fff;
- border: 1.5px solid #007cba;
+ border: 1.5px solid var(--wp-admin-theme-color, #007cba);
.woocommerce-list__item-title {
color: $gray-900;
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/style.scss b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/style.scss
index 6b16f28efb3..cfeb1b9bed7 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/style.scss
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/style.scss
@@ -427,14 +427,14 @@ a.fulfillments-trigger {
line-height: 16px;
svg {
- fill: #2271b1;
+ fill: var(--wp-admin-theme-color, #2271b1);
}
&:hover {
svg {
- fill: #135e96;
+ fill: var(--wp-admin-theme-color-darker-20, #135e96);
}
- border: 2px solid var(--wp-admin-theme-color, #00a0d2);
+ border: 2px solid var(--wp-admin-theme-color, #2271b1);
}
}