fix(segment): segment in toolbar uses correct contrast (#26353)

resolves #26350

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

@@ -201,9 +201,15 @@
 // Segment Button: Toolbar w/ Color
 // --------------------------------------------------
 
-// Do not use the global or local CSS variable if the toolbar has a color
+// Toolbar with Color, Checked
+/**
+ * Use the contrast color as background since
+ * since the text color is the base color. Otherwise
+ * we will have contrast issues when using light/medium/dark
+ * palettes across light and dark mode.
+ */
 :host(.in-toolbar-color) .segment-button-indicator-background {
-  background: #fff;
+  background: #{current-color(contrast)};
 }
 
 // Toolbar with Color, Default Segment

core/src/components/segment/test/toolbar/segment.e2e.ts

@@ -31,6 +31,27 @@ test.describe('segment: toolbar', () => {
               <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
             </ion-segment>
           </ion-toolbar>
+          <ion-toolbar color="light">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="medium">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="dark">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
         </ion-header>
       `);