From 10971cc3ca04dbdd80ef66c10203c38a311c705e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 16 Nov 2018 13:19:01 -0500
Subject: [PATCH] feat(segment): adds global variable for targeting segment in
 toolbar (#16344)

adds the following variables

```
--ion-toolbar-color-unchecked
--ion-toolbar-color-checked
```
---
 .../segment-button/segment-button.ios.scss    |  2 +-
 .../segment-button.ios.vars.scss              |  3 ++
 .../segment-button/segment-button.md.scss     |  2 +-
 .../segment-button.md.vars.scss               |  2 +-
 core/src/components/segment/segment.ios.scss  |  7 +++++
 core/src/components/segment/segment.md.scss   | 10 +++++++
 .../components/segment/segment.md.vars.scss   |  1 +
 .../segment/test/toolbar/index.html           | 30 +++++++++++++++++++
 8 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index a54c7332f2..f63cd5757a 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/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};
diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
index d9ea8d7e7e..b30e38034b 100644
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ b/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;
 
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index ace9166eb8..7101f16b21 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/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);
diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss
index 5d2a7f7aea..e5113224b9 100644
--- a/core/src/components/segment-button/segment-button.md.vars.scss
+++ b/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;
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index c6c0b578ab..9c5c936912 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/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
 // --------------------------------------------------
 
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 99525f36bc..d80a781033 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/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
 // --------------------------------------------------
 
diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss
index 8afad1e1f2..9d12593879 100644
--- a/core/src/components/segment/segment.md.vars.scss
+++ b/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
 // --------------------------------------------------
diff --git a/core/src/components/segment/test/toolbar/index.html b/core/src/components/segment/test/toolbar/index.html
index f68875be37..d55f46d84e 100644
--- a/core/src/components/segment/test/toolbar/index.html
+++ b/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>