feat(textarea): use gray tokens

Author: thetaPC

core/src/components/textarea/test/validation/index.html

@@ -24,8 +24,6 @@
         font-size: 12px;
         font-weight: normal;
 
-        color: var(--ion-color-step-600);
-
         margin-top: 10px;
         margin-bottom: 5px;
       }

core/src/components/textarea/textarea.md.outline.scss

@@ -4,7 +4,7 @@
 // ----------------------------------------------------------------
 
 :host(.textarea-fill-outline) {
-  --border-color: #{$background-color-step-300};
+  --border-color: var(--ion-color-gray-300);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -33,7 +33,7 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-outline:hover) {
-    --border-color: #{$background-color-step-750};
+    --border-color: var(--ion-color-gray-750);
   }
 }
 

core/src/components/textarea/textarea.md.solid.scss

@@ -4,8 +4,8 @@
 // ----------------------------------------------------------------
 
 :host(.textarea-fill-solid) {
-  --background: #{$background-color-step-50};
-  --border-color: #{$background-color-step-500};
+  --background: var(--ion-color-gray-50);
+  --border-color: var(--ion-color-gray-500);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -46,8 +46,8 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-solid:hover) {
-    --background: #{$background-color-step-100};
-    --border-color: #{$background-color-step-750};
+    --background: var(--ion-color-gray-100);
+    --border-color: var(--ion-color-gray-750);
   }
 }
 
@@ -56,8 +56,8 @@
  * much darker on focus.
  */
 :host(.textarea-fill-solid.has-focus) {
-  --background: #{$background-color-step-150};
-  --border-color: #{$background-color-step-750};
+  --background: var(--ion-color-gray-150);
+  --border-color: var(--ion-color-gray-750);
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {

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

@@ -72,14 +72,14 @@
 // ----------------------------------------------------------------
 
 .textarea-bottom .helper-text {
-  color: globals.$text-color-step-300;
+  color: var(--ion-color-gray-700);
 }
 
 // Textarea Max Length Counter
 // ----------------------------------------------------------------
 
 .textarea-bottom .counter {
-  color: globals.$text-color-step-300;
+  color: var(--ion-color-gray-700);
 
   padding-inline-start: 16px;
 }