Commit c17c87f720 for woocommerce
commit c17c87f720b1c08e33312d3ec4f4b9433e113cd1
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Mon Jan 19 10:45:04 2026 +0000
Update input borders and colors to use currentColor (#62710)
* Update input borders and colors to use currentColor
* Make local pickup use currentColor instead of hardcoded white
* Make dark mode inputs transparent
* Use currentColor at varying levels of opacity for borders in blocks
* Add changelog
* Undo changes to inputs leaving them as they were
* Update borders on dark mode to use the theme colour
* Make shipping method selector use currentColor for border
* Update borders on express payments UI
* Update border colours on terms separator
* Update borders on my account order and download table
* Use currentColor for local pickup select
* Ensure radio inputs have visible borders in dark mode
diff --git a/plugins/woocommerce/changelog/wooprd-1437-color-system-clean-up b/plugins/woocommerce/changelog/wooprd-1437-color-system-clean-up
new file mode 100644
index 0000000000..4103c55c1f
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-1437-color-system-clean-up
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update inputs and border colours in Cart/Checkout blocks to match the theme's text colour.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
index 71fde49426..e2e1c7f411 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
@@ -13,12 +13,12 @@ $input-background-dark: rgba(0, 0, 0, 0.1);
$image-placeholder-border-color: #f2f2f2;
// Universal colors for use on the frontend, currently being applied to checkout blocks.
-// #e7e7e7 on white. Used for low contrast decorative elements such as section borders.
-$universal-border-light: rgba(17, 17, 17, 0.11);
+// 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);
// Used for radio and checkbox resting state.
-$universal-border-medium: rgba(25, 23, 17, 0.48);
+$universal-border-medium: color-mix(in srgb, currentColor 48%, transparent);
// #1e1e1e on white. Used for low contrast decorative elements such as input borders.
-$universal-border-strong: rgba(17, 17, 17, 0.8);
+$universal-border-strong: color-mix(in srgb, currentColor 80%, transparent);
// Used for low emphasis text such as input labels.
$universal-body-low-emphasis: rgba(17, 17, 17, 0.7);
// Used for low contrast decorative elements background color.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
index 4885a665d9..ca5ee71fab 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
@@ -79,13 +79,6 @@ $border-width: 1px;
pointer-events: none;
flex-grow: 1;
}
-
- .has-dark-controls & {
- &::before,
- &::after {
- border-color: $input-border-dark;
- }
- }
}
.wc-block-components-express-payment__title {
@@ -105,9 +98,6 @@ $border-width: 1px;
border-radius: 0 0 $universal-border-radius $universal-border-radius;
margin-top: calc($universal-border-radius + $border-width);
min-height: 48px;
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
> p {
margin-bottom: em($gap);
@@ -167,10 +157,6 @@ $border-width: 1px;
content: " ";
flex: 1;
border-bottom: 1px solid $universal-border-light;
-
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
}
}
@include cart-checkout-below-large-container {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-totals/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-totals/style.scss
index a1394b4ae3..09e25664e5 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-totals/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-totals/style.scss
@@ -15,8 +15,4 @@
padding-bottom: 0;
border: 0;
}
-
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
-}
\ No newline at end of file
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-card/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-card/style.scss
index 88946da68e..c471f40b79 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-card/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-card/style.scss
@@ -1,10 +1,6 @@
.wc-block-components-address-card {
@include card-styles();
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
-
address {
display: flex;
flex-direction: column;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
index 07ddaf5873..e00b0e2165 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
@@ -62,12 +62,6 @@
}
}
-.has-dark-controls {
- .wp-block-woocommerce-checkout-order-summary-block {
- border: 1px solid $input-border-dark;
- }
-}
-
.wc-block-checkout__main {
.wc-block-components-order-summary {
margin-top: $gap-smaller;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-totals/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-totals/style.scss
index 997dd4ac20..f8d57015c6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-totals/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-totals/style.scss
@@ -5,8 +5,4 @@
padding-bottom: 0;
border: 0;
}
-
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
index 4dda989fbb..b57ccf90ba 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
@@ -73,7 +73,7 @@
gap: $gap-smallest;
.has-dark-controls & {
- color: $gray-300;
+ color: currentColor;
}
.wc-block-editor-components-block-icon {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
index 1f02b734ff..5e4c5c13e3 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
@@ -31,10 +31,10 @@ $component-background-hover: color-mix(in srgb, currentColor 12%, transparent);
border-radius: $universal-border-radius;
border: 2px solid transparent;
background-color: transparent;
- color: $input-text-light;
+ color: currentColor;
.has-dark-controls & {
- color: $input-text-dark;
+ color: currentColor;
}
&:hover,
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss
index 094f0a334f..a3a792a007 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss
@@ -6,10 +6,6 @@
padding-top: $gap-large;
border-top: 1px solid $universal-border-light;
- .has-dark-controls & {
- border-top-color: $input-border-dark;
- }
-
@include cart-checkout-below-large-container {
padding-top: 0;
border-top: 0;
diff --git a/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss b/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
index 82d4d0aff2..ee22f049de 100644
--- a/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
@@ -26,12 +26,6 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
position: absolute;
}
- .has-dark-controls & {
- &::after {
- background: $input-border-dark;
- }
- }
-
// The first child doesn't need a fake border-top because it's handled by its parent's border-top. This stops
// a double border.
&:first-child::after {
@@ -70,12 +64,6 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
box-sizing: border-box;
}
- .has-dark-controls & {
- &::after {
- border-color: $input-border-dark;
- }
- }
-
// Remove the top border when the first element is selected, this is so we don't get a double border with the
// box-shadow.
&.wc-block-components-radio-control--highlight-checked--first-selected::after {
@@ -111,12 +99,6 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
position: absolute;
}
- .has-dark-controls & {
- &::after {
- background: $input-border-dark;
- }
- }
-
// The first child doesn't need a fake border-top because it's handled by its parent's border-top.
&:first-child::after {
display: none;
diff --git a/plugins/woocommerce/client/blocks/packages/components/totals-wrapper/style.scss b/plugins/woocommerce/client/blocks/packages/components/totals-wrapper/style.scss
index 79507d4772..b9fe104d46 100644
--- a/plugins/woocommerce/client/blocks/packages/components/totals-wrapper/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/totals-wrapper/style.scss
@@ -2,10 +2,6 @@
border-top: 1px solid $universal-border-light;
padding: $gap 0;
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
-
// TotalWrappers like Discount and Fee are sometimes empty
// this prevents displaying the empty areas in Order Summary
&:empty,
@@ -35,10 +31,6 @@
.wc-block-components-totals-wrapper {
&:first-child {
border-top: 1px solid $universal-border-light;
-
- .has-dark-controls & {
- border-color: $input-border-dark;
- }
}
}
}
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss
index dc1bc6ad54..ba34cf7401 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss
@@ -942,11 +942,12 @@ p.demo_store,
}
table.shop_table {
- border: 1px solid rgba(0, 0, 0, 0.1);
+ border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
border-collapse: separate;
+ border-spacing: 0;
border-radius: 5px;
th {
@@ -956,7 +957,7 @@ p.demo_store,
}
td {
- border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
padding: 9px 12px;
vertical-align: middle;
line-height: 1.5em;
@@ -981,7 +982,7 @@ p.demo_store,
tfoot th,
tbody th {
font-weight: 700;
- border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
}