feat(input): use gray tokens

Author: thetaPC

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

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

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

@@ -2,8 +2,8 @@
 // ----------------------------------------------------------------
 
 :host(.input-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;
@@ -44,8 +44,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-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);
   }
 }
 
@@ -54,8 +54,8 @@
  * much darker on focus.
  */
 :host(.input-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(.input-fill-solid) .input-wrapper {

core/src/components/input/input.native.scss

@@ -55,7 +55,7 @@
   width: 30px;
   height: 30px;
 
-  color: $text-color-step-400;
+  color: var(--ion-color-gray-600);
 }
 
 /**
@@ -108,14 +108,14 @@
 // ----------------------------------------------------------------
 
 .input-bottom .helper-text {
-  color: $text-color-step-300;
+  color: var(--ion-color-gray-700);
 }
 
 // Input Max Length Counter
 // ----------------------------------------------------------------
 
 .input-bottom .counter {
-  color: $text-color-step-300;
+  color: var(--ion-color-gray-700);
 
   padding-inline-start: 16px;
 }

core/src/components/input/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;
       }