Commit 11cf6619b01 for woocommerce
commit 11cf6619b014623716e1f01098f66e4b58435e2d
Author: Jill Q. <jill.quek@automattic.com>
Date: Tue Apr 28 17:23:40 2026 +0800
Tokenize hardcoded grays in Woo admin for WP 7.0 alignment (#64276)
Tokenize and inherit grays in Woo admin for WP 7.0 alignment
Touches 7 SCSS files across 2 packages. Where Woo was overriding a
Gutenberg default with a hardcoded gray that matched the token value,
the override is removed so the component inherits Gutenberg's WP 7.0
default. Where the value is genuinely Woo-specific, the hex is replaced
with the matching $gray-* token.
Inherit from Gutenberg (removes redundant overrides):
- Core-profiler onboarding checkbox border
- Core-profiler onboarding text input border
- Variations table unchecked checkbox border
Tokenize hex → $gray-* (no visual change, forward-compatible):
- Marketplace promo-card body text (#555 → $gray-800, darker + AAA)
- Settings-email upload-zone hover border (#999 → $gray-600)
- Tax partner bullet separator (#bbb → $gray-400)
- Customize-store site-hub toggle color + icon fill (#ccc → $gray-400)
- Launch-your-store hub site-hub toggle color + icon fill (#ccc → $gray-400)
Visible effect:
- Onboarding checkbox + input borders render darker (Gutenberg WP 7.0 default)
- Variations table unchecked checkbox border renders darker (same)
- Promo-card body text renders darker, AAA contrast on white
Intentionally skipped:
- packages/js/components/tree-select-control — the file explicitly
copy-froze values to WP 6.5.1 at the original author's request;
tokenising here would re-introduce drift that comment forbids.
- client/legacy/css/admin.scss and assets/css/admin.scss — handled by
annchichi's parallel PR #64280 which adds $gray-* to the legacy
_variables.scss and does the legacy-admin hex swaps.
Complementary to #64280 — between the two PRs, admin-side grayscale
hardcoding in the React admin + product-editor + legacy admin is
tokenised or inheriting from Gutenberg.
diff --git a/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align b/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align
new file mode 100644
index 00000000000..bdd528b8632
--- /dev/null
+++ b/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Remove redundant variations table checkbox border-color override; inherit Gutenberg's WP 7.0 CheckboxControl default ($gray-900).
diff --git a/packages/js/product-editor/src/components/variations-table/styles.scss b/packages/js/product-editor/src/components/variations-table/styles.scss
index 14e9d6d85d0..710d1eb0c94 100644
--- a/packages/js/product-editor/src/components/variations-table/styles.scss
+++ b/packages/js/product-editor/src/components/variations-table/styles.scss
@@ -62,12 +62,6 @@
.woocommerce-sortable__handle {
display: none;
}
-
- .components-checkbox-control__input[type="checkbox"] {
- &:not(:checked):not(:focus) {
- border-color: $gray-600;
- }
- }
}
&__notice {
diff --git a/plugins/woocommerce/changelog/tweak-admin-grayscale-tokenize-wp7-align b/plugins/woocommerce/changelog/tweak-admin-grayscale-tokenize-wp7-align
new file mode 100644
index 00000000000..e2ad7f77d38
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-admin-grayscale-tokenize-wp7-align
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Tokenize hardcoded grays across Woo admin React client. Remove redundant onboarding checkbox and text input border overrides (inherit Gutenberg's WP 7.0 defaults for unchecked, checked, and focused states), darken marketplace promo text for improved readability, and tokenize remaining scattered gray hexes.
diff --git a/plugins/woocommerce/client/admin/client/core-profiler/style.scss b/plugins/woocommerce/client/admin/client/core-profiler/style.scss
index 6868a5a9c05..235d83c0543 100644
--- a/plugins/woocommerce/client/admin/client/core-profiler/style.scss
+++ b/plugins/woocommerce/client/admin/client/core-profiler/style.scss
@@ -46,11 +46,6 @@
.components-checkbox-control__input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
- border-color: #757575;
-
- &:checked {
- border-color: transparent;
- }
}
svg.components-checkbox-control__checked {
@@ -561,12 +556,10 @@
.components-text-control__input {
height: 40px;
- border-color: #bbb;
border-radius: 2px;
border-width: 1px;
font-size: 13px;
&:focus {
- border-color: transparent;
box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #006088);
}
}
diff --git a/plugins/woocommerce/client/admin/client/customize-store/style.scss b/plugins/woocommerce/client/admin/client/customize-store/style.scss
index 56357ceab7d..0109f7735f4 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/style.scss
+++ b/plugins/woocommerce/client/admin/client/customize-store/style.scss
@@ -71,7 +71,7 @@
.woocommerce-edit-site-site-hub__view-mode-toggle-container {
height: 64px;
padding: 16px 12px 0 0;
- color: #ccc;
+ color: $gray-400;
width: auto;
}
@@ -114,7 +114,7 @@
.edit-site-site-icon__icon {
width: 32px;
height: 32px;
- fill: #ccc;
+ fill: $gray-400;
}
}
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss b/plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss
index 0d4b9eced1e..a07c650fe51 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss
@@ -115,7 +115,7 @@
.woocommerce-edit-site-site-hub__view-mode-toggle-container {
height: 64px;
padding: 16px 12px 0 0;
- color: #ccc;
+ color: $gray-400;
width: auto;
}
@@ -177,7 +177,7 @@
.edit-site-site-icon__icon {
width: 32px;
height: 32px;
- fill: #ccc;
+ fill: $gray-400;
}
}
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
index 6ffabdfd451..6234faa5c70 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/promo-card/promo-card.scss
@@ -87,7 +87,7 @@
.promo-text {
font-size: 14px;
- color: #555;
+ color: $gray-800;
}
.promo-cta {
diff --git a/plugins/woocommerce/client/admin/client/settings-email/style.scss b/plugins/woocommerce/client/admin/client/settings-email/style.scss
index b34d2f2dd2b..3d1d2161a70 100644
--- a/plugins/woocommerce/client/admin/client/settings-email/style.scss
+++ b/plugins/woocommerce/client/admin/client/settings-email/style.scss
@@ -316,7 +316,7 @@ $wc-setting-email-width: 634px;
width: 400px;
&:hover {
- border-color: #999;
+ border-color: $gray-600;
cursor: pointer;
}
}
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/tax/components/partners.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/tax/components/partners.scss
index f725f543d58..ef709e8e2ac 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/tax/components/partners.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/tax/components/partners.scss
@@ -51,7 +51,7 @@
&::after {
content: "•";
- color: #bbb;
+ color: $gray-400;
margin-left: 4px;
@include breakpoint( "<782px" ) {