Commit d88a80091c8 for woocommerce
commit d88a80091c8f67cac97270c0d83a2d4b1c3a787f
Author: yjailin <yoann.jailin@automattic.com>
Date: Thu Jul 23 13:19:01 2026 -0400
Fix: introduce --wc-separator-color token and apply consistently across blocks and legacy forms (#65697)
* Fix: introduce --wc-separator-color custom property and migrate select dividers
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix: move :root token block out of abstracts/_colors.scss into style.scss
The abstracts/_colors.scss partial is auto-prepended to every blocks
stylesheet by the sass-loader, so a :root {} rule there is duplicated
into every compiled CSS bundle. Move the global token declarations to
style.scss, the single global frontend entry stylesheet, so they are
emitted exactly once.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* revert: restore $universal-border-radius to 4px
Jorge flagged that setting $universal-border-radius to 0px breaks the
express-payment title border pseudo-elements (height: 0px - 1px = -1px).
Revert the border-radius change while keeping the --wc-separator-color
work:
- $universal-border-radius back to 4px
- drop the unused --wc-border-radius custom property from :root
- restore checkout-order-summary-block border-radius to its original 5px
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Restore checkout/register border-radius to 5px
The --wc-border-radius token was removed in a previous commit but this
consumer was left behind, falling back to 0. Restore the original 5px
value from trunk.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Update changelog for --wc-separator-color token
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/fix-wc-separator-color-token b/plugins/woocommerce/changelog/fix-wc-separator-color-token
new file mode 100644
index 00000000000..7dc4e7cb9b3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wc-separator-color-token
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Introduce --wc-separator-color CSS custom property for theme-aware border colors. Migrate $universal-border-light, the login/register form borders, and the mini-cart footer border to use this token.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
index b5e01256d3e..cc4741da920 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
@@ -11,7 +11,7 @@ $image-placeholder-border-color: #f2f2f2;
// Universal colors for use on the frontend, currently being applied to checkout blocks.
// Text colour at 20% opacity. Used for low contrast decorative elements such as section borders.
-$universal-border-light: color-mix(in srgb, currentColor 20%, transparent);
+$universal-border-light: var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
// Used for radio and checkbox resting state.
$universal-border-medium: color-mix(in srgb, currentColor 48%, transparent);
// #1e1e1e on white. Used for low contrast decorative elements such as input borders.
diff --git a/plugins/woocommerce/client/blocks/assets/css/style.scss b/plugins/woocommerce/client/blocks/assets/css/style.scss
index c6577e53e9f..4af07244e07 100644
--- a/plugins/woocommerce/client/blocks/assets/css/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/style.scss
@@ -1,3 +1,7 @@
+:root {
+ --wc-separator-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
body.wc-modal--open {
overflow: hidden;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
index aeedf3c8484..e203c42b9ee 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/style.scss
@@ -178,7 +178,7 @@ h2.wc-block-mini-cart__title {
}
.wc-block-mini-cart__footer {
- border-top: 1px solid $universal-translucent-border-color;
+ border-top: 1px solid $universal-border-light;
padding: $gap-large $gap;
.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss
index 6026622fe9b..eae1520c4e5 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss
@@ -1220,7 +1220,7 @@ p.demo_store,
form.login,
form.checkout_coupon,
form.register {
- border: 1px solid darken($secondary, 10%);
+ border: 1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
padding: 20px;
margin: 2em 0;
text-align: left;