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. -->
This commit is contained in:
João Ferreira
2025-10-16 15:06:12 +01:00
committed by GitHub
parent 635edaf733
commit d19f06167a
2 changed files with 9 additions and 9 deletions

View File

@ -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

View File

@ -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 {