fix(buttons): use theme/color toolbar colors for buttons (#18191)

- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840

core/src/components/back-button/back-button.scss

@@ -148,3 +148,10 @@ ion-icon {
 
   pointer-events: none;
 }
+
+// Back Button in Toolbar: Global Theming
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}

core/src/components/buttons/buttons.ios.scss

@@ -21,27 +21,75 @@
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
 
-// iOS Toolbar with Color Default Button
+// iOS Toolbar with Color: Default Buttons
 // --------------------------------------------------
 
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
+  --border-color: initial;
   --color-activated: initial;
 }
 
+:host-context(.ion-color)::slotted(*) .button-solid {
+  --background: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast, .8)};
+  --background-focused: #{current-color(contrast, .6)};
+  --color: #{current-color(base)};
+  --color-focused: #{current-color(base)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-clear {
+  --background-focused: #{current-color(contrast, .1)};
+  --color-activated: #{current-color(contrast)};
+  --color-focused: #{current-color(contrast)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-outline {
+  --background-activated: #{current-color(contrast)};
+  --background-focused: #{current-color(contrast, .1)};
+  --color-activated: #{current-color(base)};
+  --color-focused: #{current-color(contrast)};
+}
+
+
+// iOS Toolbar Button Clear
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
+  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --color-activated: #{$toolbar-ios-color-activated};
+  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+}
+
+
+// iOS Toolbar Button Outline
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
+  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
+  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
+}
+
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-@media (any-hover: hover) {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
-  ::slotted(*) .button-solid-ios:hover {
+  --color: #{$toolbar-ios-background};
-    opacity: .4;
+  --color-activated: #{$toolbar-ios-background};
-  }
+  --color-focused: #{$toolbar-ios-background};
+  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
+  --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
 }
 
 
 // iOS Toolbar Button Icon
 // --------------------------------------------------
+
 ::slotted(*) ion-icon[slot="start"] {
   @include margin(0);
   @include margin-horizontal(null, .3em);

core/src/components/buttons/buttons.md.scss

@@ -22,14 +22,35 @@
 }
 
 
-// Material Design Toolbar w/ Color Default Button
+// Material Design Toolbar w/ Color: Default Buttons
 // --------------------------------------------------
 
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
   --color-activated: initial;
   --color-focused: initial;
-  --background-focused: #{ion-color(primary, contrast, 0.1)};
+  --background-focused: #{current-color(contrast, .1)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-solid {
+  --background: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast)};
+  --background-focused: #{current-color(contrast, .9)};
+  --color: #{current-color(base)};
+  --color-focused: #{current-color(base)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-outline {
+  --border-color: #{current-color(contrast)};
+}
+
+
+// Material Design Toolbar Default Button
+// --------------------------------------------------
+
+::slotted(*) .button {
+  --color-focused: #{$toolbar-md-color};
+  --background-focused: rgba(66, 66, 66, 0.1);
 }
 
 
@@ -39,8 +60,10 @@
 ::slotted(*) .button-solid {
   --color: #{$toolbar-md-background};
   --color-activated: #{$toolbar-md-background};
+  --color-focused: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: #{$toolbar-md-color};
+  --background-focused: #{$toolbar-md-color-activated};
 }
 
 
@@ -50,9 +73,11 @@
 ::slotted(*) .button-outline {
   --color: initial;
   --color-activated: currentColor;
+  --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
-  --border-color: currentColor;
+  --border-color: #{$toolbar-md-color};
+  --background-focused: rgba(66, 66, 66, 0.1);
 }
 
 

core/src/components/menu-button/menu-button.scss

@@ -70,3 +70,10 @@ ion-icon {
 :host(.ion-color) .button-native {
   color: current-color(base);
 }
+
+// Menu Button in Toolbar: Global Theming
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color)) {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}

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

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

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

@@ -44,11 +44,11 @@
 // Segment: Default Toolbar
 // --------------------------------------------------
 
-:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
   color: #{var(--ion-toolbar-color-unchecked, var(--color))};
 }
 
-:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) {
   --indicator-color-checked: #{var(--ion-toolbar-color-checked, var(--color-checked))};
 
   color: #{var(--ion-toolbar-color-checked, var(--color-checked))};

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

@@ -21,6 +21,7 @@
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
           <ion-button fill="solid">Solid</ion-button>
+          <ion-button fill="outline">Outline</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>

core/src/themes/test/css-variables/css/default.css

@@ -9,7 +9,7 @@
  * https://ionicframework.com/docs/theming/color-generator
 **/
 
-:root {
+/* :root {
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56,128,255;
   --ion-color-primary-contrast: #ffffff;
@@ -72,4 +72,4 @@
   --ion-color-light-contrast-rgb: 0,0,0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
-}
+} */

core/src/themes/test/css-variables/index.html

@@ -73,6 +73,7 @@
           <ion-toolbar>
             <ion-buttons slot="start">
               <ion-back-button default-href="/"></ion-back-button>
+              <ion-menu-button auto-hide="false"></ion-menu-button>
               <ion-button>Default</ion-button>
               <ion-button fill="solid">Solid</ion-button>
               <ion-button fill="clear">Clear</ion-button>