Commit 2362406622d for woocommerce

commit 2362406622d29de970e3531a75e57ed50f09107d
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date:   Fri Mar 6 12:38:58 2026 +0000

    Update checkout textarea to use global text colour for placeholder (#63539)

    * Make textareas show placeholder text the same as regular inputs

    * Add changelog

    * Remove opacity and show placeholder at full opacity

    * Update CSS to preserve placeholder colour on focus

diff --git a/plugins/woocommerce/changelog/wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color b/plugins/woocommerce/changelog/wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color
new file mode 100644
index 00000000000..ac06e8aabe9
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-1577-checkout-textarea-fields-do-not-inherit-global-text-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Textarea inputs on Checkout will now have the correct placeholder colour on light themes
diff --git a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
index 87a627998b5..dc9fc6a45ca 100644
--- a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
@@ -2,9 +2,11 @@
 	@include reset-typography();
 	@include font-small-locked;
 	background-color: $input-background-light;
-	border: 1px solid $universal-border-strong;
+	border: 1px solid color-mix(in srgb, $input-text-light 80%, transparent);
 	border-radius: $universal-border-radius;
-	color: $input-text-light;
+	// Use inherit so the placeholder picks up the global text color.
+	// Typed text color is reset below via :not(:placeholder-shown).
+	color: inherit;
 	font-family: inherit;
 	margin: 0;
 	padding: $gap-small;
@@ -12,16 +14,20 @@
 	box-sizing: border-box;

 	&::placeholder {
-		color: $universal-body-low-emphasis;
+		color: currentColor;
+	}
+
+	// When the user has typed text, use the standard input text color.
+	&:not(:placeholder-shown) {
+		color: $input-text-light;
 	}

 	&:focus {
 		background-color: $input-background-light;
-		color: $input-text-light;
 		// Keep border at 1px to prevent layout shift, use box-shadow for the extra
 		// 0.5px thickness
-		border: 1px solid currentColor;
-		box-shadow: inset 0 0 0 0.5px currentColor;
+		border: 1px solid $input-text-light;
+		box-shadow: inset 0 0 0 0.5px $input-text-light;
 	}

 	.has-dark-controls & {
@@ -30,7 +36,7 @@
 		color: $input-text-dark;

 		&::placeholder {
-			color: $input-placeholder-dark;
+			color: currentColor;
 		}
 	}
 }