Commit 8166392c1bd for woocommerce
commit 8166392c1bd0cb9e51bbce6f9a2fcd9b18b0db61
Author: Ann <annchichi@users.noreply.github.com>
Date: Thu May 7 01:09:58 2026 +0800
Align Woo admin gray text colors with WordPress 7.0 (via SCSS tokens) (#64280)
* Align Woo admin gray text colors with WP 7.0 via SCSS tokens
* Add changelog entry for admin gray colors WP 7.0 alignment
* Drop _colors.native.scss import and correct comment source
The @import "@wordpress/base-styles/_colors.native.scss" in status/style.scss
and wordpress-logo/style.scss silently reassigned $gray-900 to #1a1a1a
(no !default), defeating the PR's goal of #1e1e1e. $gray-900 is already
in scope via the admin client's SCSS build pipeline, as demonstrated by
payment-methods-selection/style.scss in the same PR.
Also fix the _variables.scss comment: #1e1e1e / #757575 mirror
@wordpress/base-styles/colors.scss (the WP admin palette), not the
React Native palette in _colors.native.scss (where $gray-900 is
#1a1a1a).
diff --git a/plugins/woocommerce/changelog/tweak-admin-gray-colors-wp7-align b/plugins/woocommerce/changelog/tweak-admin-gray-colors-wp7-align
new file mode 100644
index 00000000000..c86351f2ed7
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-admin-gray-colors-wp7-align
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Align Woo admin primary text (#2c3338 → #1e1e1e / $gray-900) and placeholder text (#646970 → #757575 / $gray-700) colors with WordPress 7.0 admin gray scale, using SCSS tokens.
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/status/style.scss b/plugins/woocommerce/client/admin/client/launch-your-store/status/style.scss
index a7b9682b055..7a2c265647e 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/status/style.scss
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/status/style.scss
@@ -11,7 +11,7 @@
display: flex;
align-items: center;
background-color: #eaeaeb;
- color: #2c3338;
+ color: $gray-900;
padding: 0 3px 0 10px;
font-size: 12px;
font-weight: 500;
diff --git a/plugins/woocommerce/client/admin/client/lib/wordpress-logo/style.scss b/plugins/woocommerce/client/admin/client/lib/wordpress-logo/style.scss
index 6d870f9dc3d..a9a07b4a39a 100644
--- a/plugins/woocommerce/client/admin/client/lib/wordpress-logo/style.scss
+++ b/plugins/woocommerce/client/admin/client/lib/wordpress-logo/style.scss
@@ -1,5 +1,5 @@
.wordpress-logo {
- fill: #2c3338;
+ fill: $gray-900;
margin: 0 auto 20px;
}
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
index 4a013a8e83b..6734675162b 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
@@ -251,7 +251,7 @@
padding: 2px 8px;
border-radius: 2px;
background-color: #f6f7f7;
- color: #2c3338;
+ color: $gray-900;
font-size: 12px;
font-weight: 400;
line-height: 16px;
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index d7034ec35a9..725f8bccf01 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -24,6 +24,10 @@ $highlightext: desaturate(lighten($highlight, 80%), 18%) !default; // Text
$contentbg: #fff !default; // Content BG - Tabs (active state)
$subtext: #767676 !default; // small, breadcrumbs etc
+// Mirrors @wordpress/base-styles/colors.scss (WP 7.0 admin gray scale).
+$gray-900: #1e1e1e !default; // Primary admin text
+$gray-700: #757575 !default; // Placeholder / secondary admin text
+
// Border radius tokens — mirrors WP Design System naming.
$radius-s: 2px !default; // Small radius: inputs, buttons, selects.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 66347ae6454..6215cf09365 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -626,7 +626,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
p {
- color: #2c3338;
+ color: $gray-900;
font-size: 14px;
line-height: 20px;
margin: 14px 64px 0 0;
@@ -679,7 +679,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.price-suffix {
- color: #646970; // Gray 50
+ color: $gray-700;
}
.product-reviews-block {
@@ -708,7 +708,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.product-reviews-count {
- color: #646970; // Gray 50
+ color: $gray-700;
font-size: 12px;
font-family: sans-serif;
line-height: 24px;
@@ -9127,7 +9127,7 @@ table.bar_chart {
a:visited,
a:hover,
a:active {
- color: #2c3338;
+ color: $gray-900;
padding: 10px 16px !important;
}
}