fix(buttons): use proper button colors based on CSS variables when in…

…side of a toolbar (#20633)

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

@@ -239,6 +239,6 @@ ion-icon {
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }

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

@@ -114,6 +114,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton

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

@@ -175,4 +175,12 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: #{current-color(tint)};
   }
+
+  // Solid buttons inside of a toolbar should use a tint of the current
+  // background so use white to tint it
+  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
+    background: #fff;
+
+    opacity: 0.10;
+  }
 }

core/src/components/button/button.scss

@@ -305,3 +305,19 @@ ion-ripple-effect {
   background: transparent;
   color: current-color(base);
 }
+
+// Button in Toolbar
+// --------------------------------------------------
+
+:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}
+
+:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
+}
+
+:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: #{var(--ion-toolbar-color, var(--background))};
+  color: #{var(--ion-toolbar-background, var(--color))};
+}

core/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
 import { Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { hasShadowDom } from '../../utils/helpers';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -208,7 +208,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: shape !== undefined,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
-
+          'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
           'ion-activatable': true,

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

@@ -17,12 +17,11 @@
   font-weight: 400;
 }
 
-
-
 ::slotted(*) ion-button:not(.button-round) {
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
 
+
 // iOS Toolbar with Color: Default Buttons
 // --------------------------------------------------
 
@@ -38,6 +37,8 @@
   --background-focused-opacity: .12;
   --background-activated: #000;
   --background-activated-opacity: .12;
+  --background-hover: #{current-color(base)};
+  --background-hover-opacity: 0.45;
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
 }
@@ -53,38 +54,21 @@
 }
 
 
-// iOS Toolbar Button Clear
+// iOS Toolbar Button Clear / Outline
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
-  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-}
-
-
-// iOS Toolbar Button Outline
-// --------------------------------------------------
-
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
-  --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-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+::slotted(*) .button-clear,
+::slotted(*) .button-outline {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: transparent;
 }
 
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
-  --color: #{$toolbar-ios-background};
-  --color-activated: #{$toolbar-ios-background};
-  --color-focused: #{$toolbar-ios-background};
-  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
-  --background-hover-opacity: 0.1;
+::slotted(*) .button-solid:not(.ion-color) {
   --background-focused: #000;
   --background-focused-opacity: .12;
   --background-activated: #000;
@@ -121,25 +105,3 @@
 
   line-height: .67;
 }
-
-
-// iOS Toolbar Menu Toggle
-// --------------------------------------------------
-
-// .button-menutoggle-ios {
-//   order: map-get($toolbar-order-ios, menu-toggle-start);
-
-//   min-width: 36px;
-
-//   --padding-top: 0;
-//   --padding-bottom: 0;
-//   --padding-start: 0;
-//   --padding-end: 0;
-
-//   ion-icon {
-//     @include padding(0, 6px);
-
-//     font-size: 28px;
-//   }
-// }
-

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

@@ -77,7 +77,6 @@
 
 ::slotted(*) .button-solid {
   --color: #{$toolbar-md-background};
-  --color-activated: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: transparent;
   --background-focused: currentColor;
@@ -89,13 +88,11 @@
 
 ::slotted(*) .button-outline {
   --color: initial;
-  --color-activated: currentColor;
-  --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
-  --border-color: #{$toolbar-md-color};
+  --border-color: currentColor;
 }
 
 
@@ -104,8 +101,6 @@
 
 ::slotted(*) .button-clear {
   --color: initial;
-  --color-focused: #{$toolbar-md-color};
-  --color-activated: currentColor;
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;

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

@@ -158,6 +158,6 @@ ion-icon {
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
-}
+}

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

@@ -86,6 +86,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           'menu-button-hidden': hidden,
           'menu-button-disabled': disabled,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true
         }}

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

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('toolbar:rtl: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});