fix textarea tokens

Author: BenOsodrac

core/src/components/textarea/textarea.common.scss

@@ -1,4 +1,4 @@
-@import "./textarea.vars";
+@import "../../themes/mixins";
 
 // Textarea
 // --------------------------------------------------
@@ -35,10 +35,8 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: #{$placeholder-opacity};
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: #{$textarea-padding-bottom};
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
@@ -400,8 +398,6 @@
    */
   @include margin-horizontal(auto, null);
 
-  color: $text-color-step-300;
-
   white-space: nowrap;
 }
 
@@ -578,19 +574,6 @@
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the textarea.
- */
-:host(.label-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
 // Start / End Slots
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.ionic.scss

@@ -13,6 +13,7 @@
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-primitives-base-white};
+  --padding-bottom: #{globals.$ion-space-200};
 
   @include globals.typography(globals.$ion-body-md-regular);
 }
@@ -220,3 +221,18 @@ ion-icon {
 :host(.textarea-readonly) {
   --background: #{globals.$ion-primitives-neutral-100};
 }
+
+/**
+ * This makes the label sit above the textarea.
+ */
+:host(.label-floating) .label-text-wrapper {
+  $form-control-label-stacked-scale: 0.75;
+
+  @include globals.transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the textarea.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}

core/src/components/textarea/textarea.native.scss

@@ -1,10 +1,14 @@
 @use "../../themes/native/native.globals" as globals;
 @use "./textarea.common";
+@import "./textarea.vars";
 
 // Textarea - iOS and Material Design
 // --------------------------------------------------
 
 :host {
+  --placeholder-opacity: #{$placeholder-opacity};
+  --padding-bottom: #{$textarea-padding-bottom};
+
   min-height: 44px;
 
   font-family: globals.$font-family-base;
@@ -138,3 +142,16 @@
   margin-inline-start: globals.$form-control-label-margin;
   margin-inline-end: 0;
 }
+
+/**
+ * This makes the label sit above the textarea.
+ */
+:host(.label-floating) .label-text-wrapper {
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the textarea.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}