feat(segment-button): use gray tokens

Author: thetaPC

core/src/components/segment-button/segment-button.ios.vars.scss

@@ -13,7 +13,7 @@ $segment-button-ios-background-checked: $segment-button-ios-background;
 $segment-button-ios-color: $text-color;
 
 /// @prop - Background of the checked segment button indicator
-$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color));
+$segment-button-ios-indicator-color: var(--ion-components-ion-segment-button-checked-indicator-bg);
 
 /// @prop - Margin of the segment button
 $segment-button-ios-margin: 2px;

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

@@ -97,5 +97,8 @@ export const darkTheme: DarkTheme = {
     IonRefresher: {
       nativeSpinnerColor: colors.gray['450']!, // Available only in iOS
     },
+    IonSegmentButton: {
+      checkedIndicatorBg: colors.gray['350']!, // Available only in iOS
+    },
   },
 };

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

@@ -39,5 +39,8 @@ export const lightTheme: LightTheme = {
     IonRefresher: {
       nativeSpinnerColor: '#747577', // Available only in iOS
     },
+    IonSegmentButton: {
+      checkedIndicatorBg: defaultPrimitiveColors.white, // Available only in iOS
+    },
   },
 };