feat(select): use gray tokens

Author: thetaPC

core/src/components/select/select.ios.scss

@@ -16,7 +16,7 @@
 
   // Color deviates from the iOS spec, but satisfies WCAG AAA:
   // https://www.w3.org/TR/WCAG20-TECHS/G18.html
-  color: #{$text-color-step-350};
+  color: var(--ion-color-gray-650);
 }
 
 // Select Inner Wrapper

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

@@ -4,7 +4,7 @@
 // ----------------------------------------------------------------
 
 :host(.select-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(.select-fill-outline:hover) {
-    --border-color: #{$background-color-step-750};
+    --border-color: var(--ion-color-gray-750);
   }
 }
 

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

@@ -4,8 +4,8 @@
 // ----------------------------------------------------------------
 
 :host(.select-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;
@@ -47,8 +47,8 @@
  */
 @media (any-hover: hover) {
   :host(.select-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);
   }
 }
 
@@ -58,7 +58,7 @@
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.has-focus) {
-  --background: #{$background-color-step-150};
+  --background: var(--ion-color-gray-150);
   --border-color: var(--highlight-color);
 }
 

core/src/components/select/select.md.vars.scss

@@ -8,7 +8,7 @@
 $select-md-icon-size: dynamic-font(13px);
 
 /// @prop - Color of the select icon
-$select-md-icon-color: $text-color-step-500;
+$select-md-icon-color: var(--ion-color-gray-500);
 
 /// @prop - The amount of whitespace to display on either side of the floating label
 $select-md-floating-label-padding: 4px;

core/src/components/select/select.native.scss

@@ -78,7 +78,7 @@
 // ----------------------------------------------------------------
 
 .select-bottom .helper-text {
-  color: $text-color-step-300;
+  color: var(--ion-color-gray-700);
 }
 
 // Select Text