diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 49707b9aa7..47aba075f3 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/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))};
+}
\ No newline at end of file
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index 7e09552c38..37b6613fb9 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/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) {
- ::slotted(*) .button-solid-ios:hover {
- opacity: .4;
- }
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
+ --color: #{$toolbar-ios-background};
+ --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);
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index a16f551c3d..16ef447952 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/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);
}
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index d693234c72..b647ea2bad 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/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))};
+}
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index 4ea60b026a..56f4ff5800 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/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) {
- color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) {
+ background: #{var(--ion-toolbar-color-checked, var(--background-checked))};
+
+ color: #{var(--ion-toolbar-background, var(--color-checked))};
}
// Segment: Color Toolbar
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 7df1f94103..73e0b44d6a 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/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))};
diff --git a/core/src/components/toolbar/test/colors/index.html b/core/src/components/toolbar/test/colors/index.html
index e3f62ca3ca..db4627d52a 100644
--- a/core/src/components/toolbar/test/colors/index.html
+++ b/core/src/components/toolbar/test/colors/index.html
@@ -21,6 +21,7 @@
Solid
+ Outline
Clear
diff --git a/core/src/themes/test/css-variables/css/default.css b/core/src/themes/test/css-variables/css/default.css
index c668f82d6b..0428edac38 100644
--- a/core/src/themes/test/css-variables/css/default.css
+++ b/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;
-}
+} */
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 661bcb3f03..39b02f30df 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -73,6 +73,7 @@
+
Default
Solid
Clear