From d19f06167ac74abdb15ffcedfde132269f0f9d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?=
 <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com>
Date: Thu, 16 Oct 2025 15:06:12 +0100
Subject: [PATCH] refactor(textarea): update styles to use semantic tokens
 (#30712)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- update scss files to use semantic tokens;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 .../textarea/textarea.ionic.outline.scss         |  2 +-
 core/src/components/textarea/textarea.ionic.scss | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss
index 3b29ab1a68..c18190b436 100644
--- a/core/src/components/textarea/textarea.ionic.outline.scss
+++ b/core/src/components/textarea/textarea.ionic.outline.scss
@@ -5,7 +5,7 @@
 
 :host(.textarea-fill-outline) {
   --border-width: #{globals.$ion-border-size-025};
-  --border-color: #{globals.$ion-primitives-neutral-500};
+  --border-color: #{globals.$ion-border-input-default};
 }
 
 // Textarea Fill: Outline, Textarea Wrapper
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
index 3224897450..b0009fdfc1 100644
--- a/core/src/components/textarea/textarea.ionic.scss
+++ b/core/src/components/textarea/textarea.ionic.scss
@@ -7,12 +7,12 @@
 // --------------------------------------------------
 
 :host {
-  --border-color: #{globals.$ion-primitives-neutral-500};
+  --border-color: #{globals.$ion-border-input-default};
   --color: #{globals.$ion-text-default};
-  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-valid: #{globals.$ion-text-success};
   --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --highlight-color-focused: #{globals.ion-color(primary, base)};
-  --placeholder-color: #{globals.$ion-primitives-neutral-800};
+  --placeholder-color: #{globals.$ion-text-subtlest};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-bg-surface-default};
   --padding-bottom: #{globals.$ion-space-200};
@@ -64,15 +64,15 @@
 // --------------------------------------------------
 
 :host(.textarea-shape-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+  --border-radius: #{globals.$ion-soft-xl};
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: #{globals.$ion-border-radius-400};
+  --border-radius: #{globals.$ion-round-xl};
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: #{globals.$ion-rectangular-xl};
 }
 
 // Textarea Wrapper
@@ -112,7 +112,7 @@
   transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive,
     transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
 
-  color: globals.$ion-primitives-neutral-1000;
+  color: globals.$ion-text-subtle;
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -143,7 +143,7 @@ ion-icon {
 
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
-  color: globals.$ion-primitives-neutral-800;
+  color: globals.$ion-text-subtlest;
 }
 
 :host(.has-focus.ion-valid) .helper-text {