Commit 4d87950eee9 for woocommerce
commit 4d87950eee9306329c873246a13a719f8933e15c
Author: Ann <annchichi@users.noreply.github.com>
Date: Tue Apr 28 18:36:14 2026 +0800
Fix: adopt $radius-s (2px) border-radius for Woo custom inputs and buttons (WP 7.0) (#64417)
* Adopt $radius-s (2px) for Woo custom inputs and buttons
* Add changelog for border-radius WP 7.0 alignment
* Fix colorpickpreview and dimensions_field border-radius placement
diff --git a/plugins/woocommerce/changelog/fix-border-radius-inputs-buttons-wp7-align b/plugins/woocommerce/changelog/fix-border-radius-inputs-buttons-wp7-align
new file mode 100644
index 00000000000..2189d2e6fb9
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-border-radius-inputs-buttons-wp7-align
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Adopt 2px border-radius on Woo custom inputs and buttons to align with WP 7.0
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 32d28fa92f2..d7034ec35a9 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -24,6 +24,9 @@ $highlightext: desaturate(lighten($highlight, 80%), 18%) !default; // Text
$contentbg: #fff !default; // Content BG - Tabs (active state)
$subtext: #767676 !default; // small, breadcrumbs etc
+// Border radius tokens — mirrors WP Design System naming.
+$radius-s: 2px !default; // Small radius: inputs, buttons, selects.
+
// export vars as CSS vars
:root {
--woocommerce: #{$woocommerce};
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index a29546398f2..d462763c0b9 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -246,7 +246,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.addons-button {
- border-radius: 2px;
+ border-radius: $radius-s;
cursor: pointer;
display: block;
height: 37px;
@@ -5399,6 +5399,7 @@ img.help_tip {
display: inline-block;
width: 26px;
border: 1px solid #ddd;
+ border-radius: $radius-s;
font-size: 14px;
}
@@ -5502,7 +5503,6 @@ img.help_tip {
height: 30px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
font-size: 16px;
- border-radius: 4px;
margin-right: 3px;
@media only screen and (max-width: 782px) {
@@ -6407,6 +6407,7 @@ img.help_tip {
input {
width: 30.75%;
margin-right: 3.8%;
+ border-radius: $radius-s;
}
.last {
@@ -8227,6 +8228,7 @@ table.bar_chart {
.select2-selection--single {
height: 30px;
border-color: #7e8993;
+ border-radius: $radius-s;
@media only screen and (max-width: 782px) {
height: 40px;
@@ -8276,7 +8278,7 @@ table.bar_chart {
.select2-selection--multiple {
min-height: 30px;
border-color: #7e8993;
- border-radius: 4px;
+ border-radius: $radius-s;
}
.select2-search--inline .select2-search__field {
@@ -8346,7 +8348,6 @@ table.bar_chart {
.woocommerce table.form-table .colorpickpreview {
height: 40px;
width: 40px;
- border-radius: 2px;
box-sizing: border-box;
}
@@ -8354,7 +8355,6 @@ table.bar_chart {
.select2-container {
.select2-selection--single {
height: 40px; // Match WP 7.0 native select height.
- border-radius: 2px; // Match WP 7.0 native select border-radius.
.select2-selection__rendered {
line-height: 38px;
@@ -8477,7 +8477,6 @@ table.bar_chart {
.dimensions_field .wrap {
width: 55%; // Wider to compensate for increased padding.
- border-radius: 2px; // Match WP 7.0 input border-radius.
}
}