Commit 6a68159af4 for woocommerce
commit 6a68159af40195bfb3ea71f884069c321c002b97
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue Jan 20 15:31:48 2026 +0000
Add new x-small font size to blocks CSS and apply to Cart/Checkout (#62866)
* Add new x-small-locked mixin and update other mixins to match css var
* Update uses of renamed mixins
* Update remove item link to use new x-small preset
* Update product metadata font size
* Make select labels match input labels
* Make totals item description use theme x-small size
* Package items now use x-small font
* Update variation data font size
* Add changelog
diff --git a/plugins/woocommerce/changelog/wooprd-1455-font-size-system-missing-one-value b/plugins/woocommerce/changelog/wooprd-1455-font-size-system-missing-one-value
new file mode 100644
index 0000000000..a10e4fc7d5
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-1455-font-size-system-missing-one-value
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Bind some Cart/Checkout UI elements to block themes' "extra-small" font size for consistency.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
index 2a046861c6..4e25a60c9c 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
@@ -19,20 +19,26 @@ $fontSizes: (
}
@mixin font-large-locked {
+ font-size: var(--wp--preset--font-size--large, 28px);
+ line-height: 1.4;
+}
+
+@mixin font-medium-locked {
font-size: var(--wp--preset--font-size--medium, 22px);
- line-height: 27px;
+ line-height: 1.4;
}
-@mixin font-regular-locked {
+@mixin font-small-locked {
font-size: var(--wp--preset--font-size--small, 14px);
- line-height: 20px;
+ line-height: 1.4;
}
-@mixin font-small-locked {
- font-size: 13px;
- line-height: 16px;
+@mixin font-x-small-locked {
+ font-size: var(--wp--preset--font-size--x-small, calc( var(--wp--preset--font-size--small, 14px) * 0.875 ) );
+ line-height: 1.4;
}
+
@mixin font-for-inputs-locked {
font-size: 16px;
line-height: 25px;
@@ -393,7 +399,7 @@ $fontSizes: (
}
@mixin card-styles() {
- @include font-regular-locked;
+ @include font-small-locked;
border: 1px solid $universal-border-light;
padding: $gap;
margin: 0;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
index 24034fab4d..b2079c3228 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
@@ -13,7 +13,7 @@ table.wc-block-cart-items {
width: 100%;
.wc-block-cart-items__header {
- @include font-regular-locked;
+ @include font-small-locked;
text-transform: uppercase;
.wc-block-cart-items__header-image {
@@ -45,7 +45,7 @@ table.wc-block-cart-items {
margin: 0;
}
.wc-block-cart-item__prices {
- @include font-regular-locked;
+ @include font-small-locked;
}
.wc-block-cart-item__quantity {
@@ -56,7 +56,7 @@ table.wc-block-cart-items {
.wc-block-cart-item__remove-link {
@include link-button();
@include hover-effect();
- @include font-size(smaller);
+ @include font-x-small-locked;
text-transform: none;
white-space: nowrap;
@@ -66,7 +66,7 @@ table.wc-block-cart-items {
}
}
.wc-block-components-product-name {
- @include font-regular-locked;
+ @include font-small-locked;
display: block;
max-width: max-content;
line-height: 1.4;
@@ -75,7 +75,7 @@ table.wc-block-cart-items {
}
}
.wc-block-cart-item__total {
- @include font-regular-locked;
+ @include font-small-locked;
text-align: right;
line-height: 1.8;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
index 532868b3f8..00fd5ddff7 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
@@ -1,5 +1,6 @@
// Extra class added for specificity so styles are applied in the editor.
.wc-block-components-product-details.wc-block-components-product-details {
+ @include font-x-small-locked;
list-style: none;
margin: 0.5em 0;
padding: 0;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
index d37b28d321..1d34098aff 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
@@ -1,8 +1,9 @@
.wc-block-components-product-metadata {
- @include font-regular-locked;
+ @include font-small-locked;
.wc-block-components-product-metadata__description > p,
.wc-block-components-product-metadata__variation-data {
margin: 0;
+ @include font-x-small-locked;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
index addcf9567e..1f8be75036 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
@@ -112,11 +112,11 @@
}
.wc-block-components-shipping-rates-control__package-title {
- @include font-regular-locked;
+ @include font-small-locked;
}
.wc-block-components-shipping-rates-control__package-items {
- @include font-small-locked;
+ @include font-x-small-locked;
display: inline-block;
list-style: none;
margin: 0;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/style.scss
index ad3079396d..69c3773187 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/style.scss
@@ -33,6 +33,6 @@
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label {
- @include font-large-locked;
+ @include font-medium-locked;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
index 8bc499ec45..bb545e06b9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
@@ -22,7 +22,7 @@
// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
- @include font-regular-locked;
+ @include font-small-locked;
appearance: textfield;
background: transparent;
border: 0;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
index a79bae68b0..4358bc35ea 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
@@ -63,7 +63,8 @@
.wc-blocks-components-select__label {
@include reset-typography();
- @include font-small-locked;
+ font-size: 13px;
+ line-height: 1.4;
position: absolute;
top: $gap-smallest * 1.5;
left: $gap-smaller * 1.25;
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 ca5ee71fab..16b83dd8fc 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
@@ -82,7 +82,7 @@ $border-width: 1px;
}
.wc-block-components-express-payment__title {
- @include font-regular-locked;
+ @include font-small-locked;
@include reset-box;
word-break: break-word;
font-weight: 400;
@@ -136,7 +136,7 @@ $border-width: 1px;
}
.wc-block-components-express-payment-continue-rule {
- @include font-regular-locked;
+ @include font-small-locked;
display: flex;
align-items: center;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
index 49c30b125e..2700de7600 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
@@ -57,14 +57,14 @@
}
.wc-block-components-checkout-step__description-payments-aligned {
- @include font-regular-locked;
+ @include font-small-locked;
margin: 0;
padding-top: $gap-small;
padding-bottom: $gap-smaller;
}
}
.wc-block-components-radio-control-accordion-content {
- @include font-regular-locked;
+ @include font-small-locked;
padding: 0 $gap $gap;
&:empty,
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
index 600f46dd4e..a9f89521af 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
@@ -25,7 +25,7 @@
.wp-block-woocommerce-cart-order-summary-block {
border-bottom: 1px solid $universal-border-light;
margin-bottom: $gap;
- @include font-regular-locked;
+ @include font-small-locked;
.wc-block-components-totals-item,
.wc-block-components-panel,
@@ -131,7 +131,7 @@
.wc-block-cart__totals-title {
@include text-heading();
- @include font-regular-locked;
+ @include font-small-locked;
display: block;
font-weight: 500;
padding: $gap-smaller $gap $gap-smaller * 1.25 0;
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 c471f40b79..da34e0f79d 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
@@ -24,7 +24,7 @@
}
}
.wc-block-components-address-card__edit {
- @include font-regular-locked;
+ @include font-small-locked;
background-color: transparent;
border: 0;
color: inherit;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
index 6016770900..a9e55331a2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss
@@ -2,7 +2,7 @@
margin-bottom: $gap-larger;
.wc-block-checkout__actions_row {
- @include font-regular-locked;
+ @include font-small-locked;
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
index acd2f28fa3..280120fd9e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
@@ -84,7 +84,7 @@
}
.wc-block-components-address-form__address_2-toggle {
- @include font-regular-locked;
+ @include font-small-locked;
display: inline-block;
background: none;
border: none;
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 e00b0e2165..40ee7a55a5 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
@@ -2,7 +2,7 @@
border: 1px solid $universal-border-light;
border-radius: 5px;
box-sizing: border-box;
- @include font-regular-locked;
+ @include font-small-locked;
&.checkout-order-summary-block-fill-wrapper {
.wc-block-components-order-summary {
@@ -29,7 +29,7 @@
margin: 0 0 $gap-smaller $gap;
flex-grow: 1;
font-weight: 500;
- @include font-large-locked;
+ @include font-medium-locked;
}
.wc-block-components-checkout-order-summary__title-open-close {
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 b57ccf90ba..161623b62b 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
@@ -42,7 +42,7 @@
}
.wc-block-components-radio-control__description-group {
- @include font-regular-locked;
+ @include font-small-locked;
display: flex;
flex-direction: column;
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 5e4c5c13e3..f5ed96b16d 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
@@ -69,7 +69,7 @@ $component-background-hover: color-mix(in srgb, currentColor 12%, transparent);
.wc-block-checkout__shipping-method-option-title {
@include reset-typography();
- @include font-regular-locked;
+ @include font-small-locked;
line-height: 28px; // Match the icon size
text-wrap: balance;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
index 9a2b15a5fd..5d56684c1f 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss
@@ -10,7 +10,7 @@
}
.wc-block-components-shipping-rates-control__no-shipping-address-message {
- @include font-regular-locked;
+ @include font-small-locked;
padding: $gap-large;
background-color: color-mix(in srgb, currentColor 6%, transparent);
color: color-mix(in srgb, currentColor 66%, transparent);
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 a3a792a007..95080520e4 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
@@ -1,5 +1,5 @@
.wc-block-checkout__terms {
- @include font-regular-locked;
+ @include font-small-locked;
margin: 0 0 $gap-large;
&.wc-block-checkout__terms--with-separator {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
index c0a4faec47..f7938c6386 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
@@ -32,7 +32,7 @@
margin-top: -$gap-large;
font-weight: 400;
line-height: $gap * 1.25;
- @include font-regular-locked;
+ @include font-small-locked;
}
.wc-block-checkout__create-account {
margin-top: $gap !important;
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 62b9df75f4..aca7c8f483 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
@@ -174,8 +174,8 @@ h2.wc-block-mini-cart__title {
margin-bottom: $gap;
.wc-block-components-totals-item__description {
+ @include font-x-small-locked;
display: none;
- font-size: 0.75em;
font-weight: 400;
@media only screen and (min-width: 480px) {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
index aa403b5f0c..7763235920 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
@@ -6,7 +6,7 @@
}
h2.wp-block-heading {
- @include font-regular-locked;
+ @include font-small-locked;
}
// Gutenberg adds margin between elements but notices are often empty
diff --git a/plugins/woocommerce/client/blocks/packages/components/form-step/style.scss b/plugins/woocommerce/client/blocks/packages/components/form-step/style.scss
index 21eba05e17..796b01479d 100644
--- a/plugins/woocommerce/client/blocks/packages/components/form-step/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/form-step/style.scss
@@ -83,7 +83,7 @@
}
.wc-block-components-checkout-step__description {
- @include font-regular-locked;
+ @include font-small-locked;
margin: 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 ee22f049de..5c2ce63110 100644
--- a/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
@@ -175,12 +175,12 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label {
- @include font-regular-locked;
+ @include font-small-locked;
}
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
- @include font-regular-locked;
+ @include font-small-locked;
}
// Extra class for specificity.
diff --git a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
index c6f32b2d80..87a627998b 100644
--- a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
@@ -1,6 +1,6 @@
.wc-block-components-textarea {
@include reset-typography();
- @include font-regular-locked;
+ @include font-small-locked;
background-color: $input-background-light;
border: 1px solid $universal-border-strong;
border-radius: $universal-border-radius;
diff --git a/plugins/woocommerce/client/blocks/packages/components/title/style.scss b/plugins/woocommerce/client/blocks/packages/components/title/style.scss
index 5f343483ad..26ce3562b2 100644
--- a/plugins/woocommerce/client/blocks/packages/components/title/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/title/style.scss
@@ -1,6 +1,6 @@
@mixin title {
@include reset-box();
- @include font-large-locked;
+ @include font-medium-locked;
word-break: break-word;
font-weight: 500;
}
diff --git a/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss b/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
index d0dea6bae7..a40f778b08 100644
--- a/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
@@ -11,6 +11,6 @@
}
.wc-block-components-totals-item__description {
- @include font-size(small);
+ @include font-x-small-locked;
width: 100%;
}