Commit 5200c6a125 for woocommerce

commit 5200c6a125541682808cf81fdf3bb2661a961f02
Author: Raluca Stan <ralucastn@gmail.com>
Date:   Sat Dec 6 14:51:46 2025 +0100

    Fix text visibility in select inputs (#62268)

    * Fix glyph’s descenders visibility in select inputs

    * changelog

    * Fix mixin

    * Set height for input and select
    Remove padding on focus select to prevent content jump
    Allow for a big lineheight like in the design

    * Fix select padding

    ---------

    Co-authored-by: Alefe Souza <contact@alefesouza.com>

diff --git a/plugins/woocommerce/changelog/fix-select-typography b/plugins/woocommerce/changelog/fix-select-typography
new file mode 100644
index 0000000000..8399873086
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-select-typography
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix text visibility in select inputs
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
index 6512bed1cc..bcc2f49414 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
@@ -33,6 +33,11 @@ $fontSizes: (
 	line-height: 16px;
 }

+@mixin font-for-inputs-locked {
+	font-size: 16px;
+	line-height: 25px;
+}
+
 // We're treating mobile inputs as a special case, increasing the font-size to
 // 16px to avoid mobile Safari auto-zooming when focusing on the input. The
 // minimum font-size to prevent this behavior is 16px. Please don't change it!
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 83fba64d07..a79bae68b0 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
@@ -29,8 +29,7 @@

 	.wc-blocks-components-select__select {
 		@include reset-typography();
-		font-size: 16px;
-		line-height: 22px;
+		@include font-for-inputs-locked;
 		border-radius: $universal-border-radius;
 		width: 100%;
 		appearance: none;
@@ -39,22 +38,14 @@
 		border: 1px solid $universal-border-strong;
 		box-sizing: border-box;

-		padding: $gap-large - 3px $gap-smaller + 1px $gap-smaller;
-
-		// We are hardcoding the height to reserve space for a wider border that
-		// we apply for focused state. Without it, when focusing the input its
-		// height will increase by 1px, causing the rest of the form to shift.
-		// height = font line-height + vertical padding + focused top/bottom border
-		// Don't worry, this calculation won't be performed at runtime, SCSS
-		// is transforming it into a singular value during build time.
-		height: calc(15px + 16px * 2 + 1.5px * 2);
+		padding: $gap $gap-smaller + 1px 0;
+		height: 50px;

 		&:focus {
 			border-color: currentColor;
 			border-width: 1.5px;
-			// original padding - border size
-			padding-left: $gap-smaller + 0.5px;
-			padding-top: $gap-large - 3.5px;
+
+			padding: $gap $gap-smaller + .5px 0;
 		}

 		.has-dark-controls & {
diff --git a/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss b/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
index 7e81f206b5..70689cab23 100644
--- a/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
@@ -42,7 +42,7 @@
 	input[type="password"],
 	input[type="email"] {
 		@include reset-typography();
-		@include font-regular-locked;
+		@include font-for-inputs-locked();
 		padding: $gap $gap-small;
 		width: 100%;
 		border-radius: $universal-border-radius;
@@ -54,13 +54,7 @@
 		background-color: $input-background-light;
 		color: $input-text-light;

-		// We are hardcoding the height to reserve space for a wider border that
-		// we apply for focused state. Without it, when focusing the input its
-		// height will increase by 1px, causing the rest of the form to shift.
-		// height = font line-height + vertical padding + focused top/bottom border
-		// Don't worry, this calculation won't be performed at runtime, SCSS
-		// is transforming it into a singular value during build time.
-		height: calc(15px + 16px * 2 + 1.5px * 2);
+		height: 50px;

 		&:focus {
 			background-color: $input-background-light;