feat(segment): adds global variable for targeting segment in toolbar (#16344)

adds the following variables

```
--ion-toolbar-color-unchecked
--ion-toolbar-color-checked
```

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

@@ -12,7 +12,7 @@
   --border-color: #{$segment-button-ios-border-color};
   --color: #{$segment-button-ios-text-color};
   --color-activated: var(--color);
-  --color-checked: #{ion-color(primary, contrast)};
+  --color-checked: #{$segment-button-ios-text-color-checked};
   --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
   --color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
   --border-radius: #{$segment-button-ios-border-radius};

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

@@ -30,6 +30,9 @@ $segment-button-ios-background-color-disabled:        ion-color(primary, base, $
 /// @prop - Text color of the segment button
 $segment-button-ios-text-color:                       ion-color(primary, base) !default;
 
+/// @prop - Text color of the checked segment button
+$segment-button-ios-text-color-checked:               ion-color(primary, contrast) !default;
+
 /// @prop - Border width of the segment button
 $segment-button-ios-border-width:                     1px !default;
 

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

@@ -15,7 +15,7 @@
   --background-activated: #{$segment-button-md-background-activated};
   --color: #{$segment-button-md-text-color};
   --color-activated: var(--color);
-  --color-checked: #{$segment-button-md-text-color-activated};
+  --color-checked: #{$segment-button-md-text-color-checked};
   --color-checked-disabled: var(--color-checked);
   --indicator-color: transparent;
   --indicator-color-checked: var(--color-checked);

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

@@ -25,7 +25,7 @@ $segment-button-md-border-bottom-width:               2px !default;
 $segment-button-md-border-bottom-color:               transparent !default;
 
 /// @prop - Text color of the activated segment button
-$segment-button-md-text-color-activated:              ion-color(primary, base) !default;
+$segment-button-md-text-color-checked:              ion-color(primary, base) !default;
 
 /// @prop - Border color of the activated segment button
 $segment-button-md-border-bottom-color-activated:     ion-color(primary, base) !default;

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

@@ -50,6 +50,13 @@
   line-height: $segment-button-ios-toolbar-line-height;
 }
 
+:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
+  --background-checked: var(--color);
+  --border-color: var(--color);
+  --color: #{var(--ion-toolbar-color-unchecked, $segment-button-ios-text-color)};
+  --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-ios-text-color-checked)};
+}
+
 // Segment: Color Toolbar
 // --------------------------------------------------
 

core/src/components/segment/segment.md.scss

@@ -26,6 +26,16 @@
   color: #{current-color(base)};
 }
 
+
+// Segment: Default Toolbar
+// --------------------------------------------------
+
+:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
+  --color: #{var(--ion-toolbar-color-unchecked, $segment-button-md-text-color)};
+  --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-md-text-color-checked)};
+}
+
+
 // Segment: Toolbar Color
 // --------------------------------------------------
 

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

@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals.md";
+@import "../segment-button/segment-button.md.vars";
 
 // Material Design Segment
 // --------------------------------------------------

core/src/components/segment/test/toolbar/index.html

@@ -32,6 +32,20 @@
         </ion-segment>
       </ion-toolbar>
 
+      <ion-toolbar class="themed">
+        <ion-segment value="Top">
+          <ion-segment-button value="Paid">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="Free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="Top">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
       <ion-toolbar color="primary">
         <ion-segment value="Free">
           <ion-segment-button value="Paid">
@@ -243,6 +257,22 @@
       Segment in Toolbar
     </ion-content>
 
+    <style>
+      .themed {
+        --ion-toolbar-background: #3880ff;
+      }
+
+      .ios .themed {
+        --ion-toolbar-color-unchecked: #fff;
+        --ion-toolbar-color-checked: #3880ff;
+      }
+
+      .md .themed {
+        --ion-toolbar-color-unchecked: rgba(255, 255, 255, 0.6);
+        --ion-toolbar-color-checked: #fff;
+      }
+    </style>
+
   </ion-app>
 </body>