diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index f98045c9cf..97e3342af4 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/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))};
}
\ No newline at end of file
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 7e4fc8a4d8..54868aeb55 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/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
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 66c06a92f3..980645fa2f 100644
--- a/core/src/components/button/button.ios.scss
+++ b/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;
+ }
}
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index cc3f5d3f5c..7fef42e6a6 100644
--- a/core/src/components/button/button.scss
+++ b/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))};
+}
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 51b8414437..2595ad75c7 100644
--- a/core/src/components/button/button.tsx
+++ b/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,
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index eb605877de..786a869173 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/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;
-// }
-// }
-
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 211448ef68..bf0ec422ba 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/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;
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index 7cfef8a92a..5290254e55 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/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))};
-}
+}
\ No newline at end of file
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 02caa3aa83..5fed2e38e2 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/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
}}
diff --git a/core/src/components/toolbar/test/custom/e2e.ts b/core/src/components/toolbar/test/custom/e2e.ts
new file mode 100644
index 0000000000..b24e3ca7b5
--- /dev/null
+++ b/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();
+});
diff --git a/core/src/components/toolbar/test/custom/index.html b/core/src/components/toolbar/test/custom/index.html
new file mode 100644
index 0000000000..812309ff62
--- /dev/null
+++ b/core/src/components/toolbar/test/custom/index.html
@@ -0,0 +1,298 @@
+
+
+
+
+
+ Toolbar - Custom
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color: Themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Color: Themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themed w / Color Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themed w / Color Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Component Level Vars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Component Level Vars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Component Level Vars w/ Color Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Component Level Vars w/ Color Buttons
+
+
+
+
+
+
+
+