feat(refresher): use gray tokens

Author: thetaPC

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

@@ -7,7 +7,7 @@ $refresher-ios-icon-color: $text-color;
 $refresher-ios-text-color: $text-color;
 
 /// @prop - Color of the native refresher spinner
-$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
+$refresher-ios-native-spinner-color: var(--ion-components-ion-refresher-native-spinner-color);
 
 /// @prop - Width of the native refresher spinner
 $refresher-ios-native-spinner-width: 32px;

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

@@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color;
 $refresher-md-native-spinner-color: #{ion-color(primary, base)};
 
 /// @prop - Border of the native refresher spinner
-$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));
+$refresher-md-native-spinner-border: 1px solid var(--ion-components-ion-refresher-native-spinner-border);
 
 /// @prop - Background of the native refresher spinner
-$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));
+$refresher-md-native-spinner-background: var(--ion-components-ion-refresher-native-spinner-bg);
 
 /// @prop - Box shadow of the native refresher spinner
 $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);

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

@@ -94,5 +94,8 @@ export const darkTheme: DarkTheme = {
     IonRange: {
       bg: colors.gray['900']!, // Available only in iOS
     },
+    IonRefresher: {
+      nativeSpinnerColor: colors.gray['450']!, // Available only in iOS
+    },
   },
 };

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

@@ -36,5 +36,8 @@ export const lightTheme: LightTheme = {
     IonRange: {
       bg: colors.gray['100']!, // Available only in iOS
     },
+    IonRefresher: {
+      nativeSpinnerColor: '#747577', // Available only in iOS
+    },
   },
 };

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

@@ -96,5 +96,9 @@ export const darkTheme: DarkTheme = {
     IonModal: {
       handleBg: colors.gray['350']!,
     },
+    IonRefresher: {
+      nativeSpinnerBorder: colors.gray['200']!, // Available only in md
+      nativeSpinnerBg: colors.gray['250']!, // Available only in md
+    },
   },
 };

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

@@ -20,5 +20,9 @@ export const lightTheme: LightTheme = {
     IonModal: {
       handleBg: '#c0c0be',
     },
+    IonRefresher: {
+      nativeSpinnerBorder: '#ececec', // Available only in md
+      nativeSpinnerBg: '#ffffff', // Available only in md
+    },
   },
 };