feat(range): use gray tokens

Author: thetaPC

core/src/components/range/range.ios.vars.scss

@@ -23,7 +23,7 @@ $range-ios-hit-height: $range-ios-slider-height;
 $range-ios-bar-height: 4px;
 
 /// @prop - Background of the range bar
-$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
+$range-ios-bar-background-color: var(--ion-components-ion-range-bg);
 
 /// @prop - Border radius of the range bar
 $range-ios-bar-border-radius: 2px;

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

@@ -20,7 +20,7 @@ $range-md-slider-height: 42px;
 $range-md-bar-height: 2px;
 
 /// @prop - Background of the range bar
-$range-md-bar-background-color: $background-color-step-250;
+$range-md-bar-background-color: var(--ion-color-gray-250);
 
 /// @prop - Font size of the range pin
 $range-md-pin-font-size: dynamic-font(12px);

core/src/themes/ios/dark.tokens.ts

@@ -91,5 +91,8 @@ export const darkTheme: DarkTheme = {
     IonPicker: {
       highlightBg: colors.gray['150']!, // Available only in iOS
     },
+    IonRange: {
+      bg: colors.gray['900']!, // Available only in iOS
+    },
   },
 };

core/src/themes/ios/light.tokens.ts

@@ -33,5 +33,8 @@ export const lightTheme: LightTheme = {
     IonPicker: {
       highlightBg: '#eeeeef', // Available only in iOS
     },
+    IonRange: {
+      bg: colors.gray['100']!, // Available only in iOS
+    },
   },
 };