diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0f854ab79e..3d4929f352 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0f7b93f632..b88ce64c82 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index c36abd09d9..5f94117ad7 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0a0a9fc56d..7003f61fac 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9894639a90..5eb6eabc07 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2d43379ff4..69bb2ebc1f 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 43536f939a..66e2b49539 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0de2056599..9390df5bc4 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index f252f6686e..7b11e45ce6 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/buttons/buttons.common.scss b/core/src/components/buttons/buttons.common.scss
new file mode 100644
index 0000000000..f2b2eaf667
--- /dev/null
+++ b/core/src/components/buttons/buttons.common.scss
@@ -0,0 +1,19 @@
+@use "../../themes/mixins" as mixins;
+
+:host {
+  display: flex;
+
+  align-items: center;
+
+  transform: translateZ(0);
+}
+
+// Toolbar Buttons
+// --------------------------------------------------
+
+::slotted(*) ion-button {
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  @include mixins.margin(0);
+}
diff --git a/core/src/components/buttons/buttons.ionic.scss b/core/src/components/buttons/buttons.ionic.scss
new file mode 100644
index 0000000000..57aec7bfb8
--- /dev/null
+++ b/core/src/components/buttons/buttons.ionic.scss
@@ -0,0 +1,33 @@
+@use "./buttons.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Buttons
+// --------------------------------------------------
+
+::slotted(*) .button-has-icon-only {
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
+// Toolbar Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-clear {
+  --color: globals.$ionic-color-neutral-1200;
+  --background: transparent;
+  --background-activated: transparent;
+  --background-focused: transparent;
+  --background-hover: transparent;
+}
+
+// Toolbar Button Icon
+// --------------------------------------------------
+
+::slotted(*) .button-has-icon-only {
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+}
+
+::slotted(*) ion-icon[slot="icon-only"] {
+  font-size: globals.$ionic-font-size-600;
+}
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index f14f9050bc..abfbb42cc4 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -1,5 +1,5 @@
 @import "./buttons.ios.vars";
-@import "./buttons";
+@import "./buttons.native";
 
 // iOS Toolbar Default Button
 // --------------------------------------------------
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index fb4acdc381..64658af1fa 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -1,5 +1,5 @@
 @import "./buttons.md.vars";
-@import "./buttons";
+@import "./buttons.native";
 
 // Material Design Toolbar Default Button
 // --------------------------------------------------
diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.native.scss
similarity index 78%
rename from core/src/components/buttons/buttons.scss
rename to core/src/components/buttons/buttons.native.scss
index 15106c1bf7..774af90a19 100644
--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.native.scss
@@ -1,12 +1,7 @@
+@import "./buttons.common";
 @import "../../themes/native/native.globals";
 
 :host {
-  display: flex;
-
-  align-items: center;
-
-  transform: translateZ(0);
-
   z-index: $z-index-toolbar-buttons;
 }
 
diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx
index 10efd7a259..e438084cc0 100644
--- a/core/src/components/buttons/buttons.tsx
+++ b/core/src/components/buttons/buttons.tsx
@@ -12,7 +12,7 @@ import { getIonTheme } from '../../global/ionic-global';
   styleUrls: {
     ios: 'buttons.ios.scss',
     md: 'buttons.md.scss',
-    ionic: 'buttons.md.scss',
+    ionic: 'buttons.ionic.scss',
   },
   scoped: true,
 })
diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss
index 862ad7f75f..29da3783cd 100644
--- a/core/src/components/header/header.ionic.scss
+++ b/core/src/components/header/header.ionic.scss
@@ -12,3 +12,8 @@ ion-header {
     border-bottom: globals.$ionic-border-size-025 globals.$ionic-border-style-solid globals.$ionic-color-neutral-300;
   }
 }
+
+ion-toolbar + ion-toolbar {
+  --padding-start: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-400};
+}
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1b69695209..cfeb7f3bf3 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 111fd502da..6542cad2c5 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1d05ccb932..e0c9473d63 100644
Binary files a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6d29918620..cd61f8d471 100644
Binary files a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9decff45e8..be53d3b2e3 100644
Binary files a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Safari-linux.png
index dffde2a914..6d94788203 100644
Binary files a/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/header/test/divider/header.e2e.ts-snapshots/ionic-header-divider-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3e62d5d697..a71542b758 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8f20526ab2..098d423b93 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 69b61210e2..d390edeaeb 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 40ee2a5c9e..6b2fa55d02 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e0b1d21ec8..d9dec5a149 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 19be395cf5..3dc4f84d54 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5af70d4704..8bb15a7fa6 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
index faa37f1ed8..283ade5fa9 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png
index 223873afa7..52bb14cb0c 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 69c10a57f6..ec4433ab7e 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 51eb0fb098..767963180a 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png
index bd77874469..ef8143a509 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.common.scss
similarity index 89%
rename from core/src/components/menu-button/menu-button.scss
rename to core/src/components/menu-button/menu-button.common.scss
index b372dd0819..d9eba708e7 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Menu Button
 // --------------------------------------------------
@@ -107,15 +107,6 @@ ion-icon {
   display: none;
 }
 
-// Menu Button: Disabled
-// --------------------------------------------------
-
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 // Menu Button: Focused
 // --------------------------------------------------
 
@@ -148,13 +139,6 @@ ion-icon {
   }
 }
 
-// Menu Button with Color
-// --------------------------------------------------
-
-:host(.ion-color) .button-native {
-  color: current-color(base);
-}
-
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 
diff --git a/core/src/components/menu-button/menu-button.ionic.scss b/core/src/components/menu-button/menu-button.ionic.scss
new file mode 100644
index 0000000000..7abd073ba4
--- /dev/null
+++ b/core/src/components/menu-button/menu-button.ionic.scss
@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./menu-button.common";
+
+// Menu Button Ionic
+// --------------------------------------------------
+
+:host {
+  --background-focused: currentColor;
+  --background-focused-opacity: 0.12;
+  --background-hover: currentColor;
+  --background-hover-opacity: 0.04;
+  --border-radius: initial;
+  --color: initial;
+  --padding-start: 0;
+  --padding-end: 0;
+  position: relative;
+
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+
+  font-size: globals.$ionic-font-size-600;
+}
diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index bab590c788..eb816f033d 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals.ios";
-@import "./menu-button";
+@import "./menu-button.native";
 
 // iOS Menu Button
 // --------------------------------------------------
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 6c278212e9..8e0a78ac95 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals.md";
-@import "./menu-button";
+@import "./menu-button.native";
 
 // MD Menu Button
 // --------------------------------------------------
diff --git a/core/src/components/menu-button/menu-button.native.scss b/core/src/components/menu-button/menu-button.native.scss
new file mode 100644
index 0000000000..c4e0600a34
--- /dev/null
+++ b/core/src/components/menu-button/menu-button.native.scss
@@ -0,0 +1,21 @@
+@import "../../themes/native/native.globals";
+@import "./menu-button.common";
+
+// Menu Button
+// --------------------------------------------------
+
+// Menu Button: Disabled
+// --------------------------------------------------
+
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+// Menu Button with Color
+// --------------------------------------------------
+
+:host(.ion-color) .button-native {
+  color: current-color(base);
+}
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 101a4b0c17..61e683c126 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -25,7 +25,7 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
   styleUrls: {
     ios: 'menu-button.ios.scss',
     md: 'menu-button.md.scss',
-    ionic: 'menu-button.md.scss',
+    ionic: 'menu-button.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.common.scss
similarity index 85%
rename from core/src/components/searchbar/searchbar.scss
rename to core/src/components/searchbar/searchbar.common.scss
index cd08a33def..21d6a7d9a0 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Searchbar
 // --------------------------------------------------
@@ -20,7 +20,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: #{$placeholder-opacity};
+  --placeholder-opacity: var(--ion-placeholder-opacity, 1);
 
   @include font-smoothing();
 
@@ -33,24 +33,9 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: current-color(contrast);
-}
-
-:host(.ion-color) .searchbar-input {
-  background: current-color(base);
-}
-
-:host(.ion-color) .searchbar-clear-button,
-:host(.ion-color) .searchbar-cancel-button,
-:host(.ion-color) .searchbar-search-icon {
-  color: inherit;
-}
-
 .searchbar-search-icon {
   // Don't let them tap on the icon
   color: var(--icon-color);
@@ -160,9 +145,3 @@
 :host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }
-
-:host(.searchbar-disabled) {
-  cursor: default;
-  opacity: 0.4;
-  pointer-events: none;
-}
diff --git a/core/src/components/searchbar/searchbar.ionic.scss b/core/src/components/searchbar/searchbar.ionic.scss
new file mode 100644
index 0000000000..cb256c85ce
--- /dev/null
+++ b/core/src/components/searchbar/searchbar.ionic.scss
@@ -0,0 +1,73 @@
+@use "searchbar.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Searchbar
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.$ionic-color-neutral-100};
+  --border-radius: #{globals.$ionic-border-radius-800};
+  --box-shadow: none;
+  --cancel-button-color: #{globals.$ionic-color-neutral-800};
+  --clear-button-color: #{globals.$ionic-color-neutral-800};
+  --color: #{globals.$ionic-color-neutral-800};
+  --icon-color: #{globals.$ionic-color-neutral-800};
+
+  @include globals.padding(0);
+
+  min-height: globals.$ionic-scale-1000;
+
+  contain: content;
+}
+
+.searchbar-input-container {
+  min-height: globals.$ionic-scale-1000;
+}
+
+// Searchbar Search Icon
+// -----------------------------------------
+
+.searchbar-search-icon {
+  display: none;
+}
+
+// Searchbar Input Field
+// -----------------------------------------
+
+.searchbar-input {
+  @include globals.padding(globals.$ionic-space-300);
+
+  height: 100%;
+
+  font-size: globals.$ionic-font-size-350;
+  font-weight: globals.$ionic-font-weight-regular;
+
+  contain: strict;
+}
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-button {
+  @include globals.position(50%, globals.$ionic-space-200, null, null);
+
+  position: absolute;
+
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+
+  transform: translateY(-50%);
+
+  background-color: transparent;
+
+  font-size: globals.$ionic-font-size-400;
+
+  contain: strict;
+}
+
+// Searchbar in Toolbar
+// -----------------------------------------
+
+:host-context(ion-toolbar) {
+  min-height: globals.$ionic-scale-1000;
+}
diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
index b115d2d4ca..a7a3415cb6 100644
--- a/core/src/components/searchbar/searchbar.ios.scss
+++ b/core/src/components/searchbar/searchbar.ios.scss
@@ -1,4 +1,4 @@
-@import "./searchbar";
+@import "./searchbar.native";
 @import "./searchbar.ios.vars";
 
 // iOS Searchbar
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 639d02a44e..b29e3d09f9 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/core/src/components/searchbar/searchbar.md.scss
@@ -1,4 +1,4 @@
-@import "./searchbar";
+@import "./searchbar.native";
 @import "./searchbar.md.vars";
 
 // Material Design Searchbar
diff --git a/core/src/components/searchbar/searchbar.native.scss b/core/src/components/searchbar/searchbar.native.scss
new file mode 100644
index 0000000000..5df4c82c74
--- /dev/null
+++ b/core/src/components/searchbar/searchbar.native.scss
@@ -0,0 +1,31 @@
+@import "../../themes/native/native.globals";
+@import "searchbar.common";
+
+// Searchbar
+// --------------------------------------------------
+
+:host {
+  --placeholder-opacity: #{$placeholder-opacity};
+
+  font-family: $font-family-base;
+}
+
+:host(.ion-color) {
+  color: current-color(contrast);
+}
+
+:host(.ion-color) .searchbar-input {
+  background: current-color(base);
+}
+
+:host(.ion-color) .searchbar-clear-button,
+:host(.ion-color) .searchbar-cancel-button,
+:host(.ion-color) .searchbar-search-icon {
+  color: inherit;
+}
+
+:host(.searchbar-disabled) {
+  cursor: default;
+  opacity: 0.4;
+  pointer-events: none;
+}
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 4f1f87946b..868cd06704 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -24,7 +24,7 @@ import type { SearchbarChangeEventDetail, SearchbarInputEventDetail } from './se
   styleUrls: {
     ios: 'searchbar.ios.scss',
     md: 'searchbar.md.scss',
-    ionic: 'searchbar.md.scss',
+    ionic: 'searchbar.ionic.scss',
   },
   scoped: true,
 })
diff --git a/core/src/components/title/test/basic/index.html b/core/src/components/title/test/basic/index.html
index 0b3257888b..d27214ccd1 100644
--- a/core/src/components/title/test/basic/index.html
+++ b/core/src/components/title/test/basic/index.html
@@ -33,7 +33,7 @@
         </ion-header>
 
         <ion-header>
-          <ion-toolbar>
+          <ion-toolbar class="toolbar-title-default">
             <ion-buttons slot="start">
               <ion-back-button default-href="#"></ion-back-button>
             </ion-buttons>
@@ -80,7 +80,8 @@
     </ion-app>
 
     <style>
-      .ios .hide-ios {
+      .ios .hide-ios,
+      .ionic .hide-ios {
         display: none;
       }
     </style>
diff --git a/core/src/components/title/test/basic/title.e2e.ts b/core/src/components/title/test/basic/title.e2e.ts
index afecacd1cd..ea5869d29d 100644
--- a/core/src/components/title/test/basic/title.e2e.ts
+++ b/core/src/components/title/test/basic/title.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('title: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/title/test/basic', config);
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1c03087049
Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ed039ba0f6
Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..58d70676b2
Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.common.scss
similarity index 84%
rename from core/src/components/title/title.scss
rename to core/src/components/title/title.common.scss
index e084b20f31..5d2cbe6e96 100644
--- a/core/src/components/title/title.scss
+++ b/core/src/components/title/title.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Title
 // --------------------------------------------------
@@ -19,10 +19,6 @@
   color: var(--color);
 }
 
-:host(.ion-color) {
-  color: #{current-color(base)};
-}
-
 .toolbar-title {
   display: block;
 
diff --git a/core/src/components/title/title.ionic.scss b/core/src/components/title/title.ionic.scss
new file mode 100644
index 0000000000..fe18c12eb9
--- /dev/null
+++ b/core/src/components/title/title.ionic.scss
@@ -0,0 +1,32 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "title.common";
+
+// Ionic Title
+// --------------------------------------------------
+
+:host {
+  @include globals.typography(globals.$ionic-heading-h6-medium);
+  @include globals.padding(var(--padding-top), 0, var(--padding-bottom));
+
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+:host-context(ion-toolbar) {
+  @include globals.position(0, null, null, 0);
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateZ(0);
+
+  z-index: -1; // TODO(ROU-10853): replace this value with a layer token. This is here to prevent the title from blokcing interaction with buttons.
+}
+
+// Title: Large
+// --------------------------------------------------
+
+:host(.title-large) {
+  @include globals.typography(globals.$ionic-heading-h1-medium);
+}
diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss
index ceef38339f..c3de3713c3 100644
--- a/core/src/components/title/title.ios.scss
+++ b/core/src/components/title/title.ios.scss
@@ -1,4 +1,4 @@
-@import "./title";
+@import "./title.native";
 
 // iOS Title
 // --------------------------------------------------
diff --git a/core/src/components/title/title.md.scss b/core/src/components/title/title.md.scss
index 24458e27c8..4a126e2070 100644
--- a/core/src/components/title/title.md.scss
+++ b/core/src/components/title/title.md.scss
@@ -1,4 +1,4 @@
-@import "./title";
+@import "./title.native";
 
 // Material Design Title
 // --------------------------------------------------
diff --git a/core/src/components/title/title.native.scss b/core/src/components/title/title.native.scss
new file mode 100644
index 0000000000..309f3680ce
--- /dev/null
+++ b/core/src/components/title/title.native.scss
@@ -0,0 +1,6 @@
+@import "../../themes/native/native.globals";
+@import "title.common";
+
+:host(.ion-color) {
+  color: #{current-color(base)};
+}
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index c771791ea2..ba64e8c524 100644
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -14,7 +14,7 @@ import type { Color, StyleEventDetail } from '../../interface';
   styleUrls: {
     ios: 'title.ios.scss',
     md: 'title.md.scss',
-    ionic: 'title.md.scss',
+    ionic: 'title.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/toolbar/test/theme-ionic/index.html b/core/src/components/toolbar/test/theme-ionic/index.html
new file mode 100644
index 0000000000..e1f042024a
--- /dev/null
+++ b/core/src/components/toolbar/test/theme-ionic/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ionic Toolbar</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-title>Page title</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <div style="text-align: center">
+            <ion-text class="ionic-heading-h6-medium">Ion Text</ion-text>
+          </div>
+          <ion-buttons slot="end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-text size="large" class="ionic-heading-h1-medium">Ion Text</ion-text>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Icon Buttons</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Contact
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Buttons</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Back Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-buttons slot="end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.common.scss
similarity index 87%
rename from core/src/components/toolbar/toolbar.scss
rename to core/src/components/toolbar/toolbar.common.scss
index 8de5e4ec42..bd9fd63185 100644
--- a/core/src/components/toolbar/toolbar.scss
+++ b/core/src/components/toolbar/toolbar.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Toolbar
 // --------------------------------------------------
@@ -42,26 +42,16 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
-
   contain: content;
 
-  z-index: $z-index-toolbar;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: current-color(contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: current-color(base);
-}
-
 .toolbar-container {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: flex;
+
   position: relative;
 
   flex-direction: row;
@@ -74,7 +64,6 @@
 
   contain: content;
   overflow: hidden;
-  z-index: $z-index-toolbar;
 
   box-sizing: border-box;
 }
@@ -97,7 +86,6 @@
 
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
-  z-index: $z-index-toolbar-background;
   pointer-events: none;
 }
 
diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss
new file mode 100644
index 0000000000..6a15979af3
--- /dev/null
+++ b/core/src/components/toolbar/toolbar.ionic.scss
@@ -0,0 +1,92 @@
+@use "./toolbar.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+$toolbar-order-ionic: (
+  slot-start: 1,
+  slot-secondary: 2,
+  content: 3,
+  slot-primary: 4,
+  slot-end: 5,
+);
+
+// Ionic Toolbar
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.$ionic-color-base-white};
+  --color: #{globals.$ionic-color-neutral-1200};
+  --border-color: currentColor;
+  --padding-top: #{globals.$ionic-space-200};
+  --padding-bottom: #{globals.$ionic-space-200};
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
+  --min-height: #{globals.$ionic-scale-1400};
+}
+
+.toolbar-container {
+  gap: globals.$ionic-space-400;
+}
+
+// Toolbar: Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 2;
+  order: map-get($toolbar-order-ionic, content);
+
+  min-width: 0;
+}
+
+// Toolbar: Searchbar
+// --------------------------------------------------
+
+:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
+  @include globals.padding(0);
+}
+
+// Toolbar: Title
+// --------------------------------------------------
+
+::slotted(ion-title) {
+  @include globals.padding-horizontal(var(--padding-top), var(--padding-end));
+}
+
+:host(.toolbar-title-default) ::slotted(ion-title) {
+  text-align: center;
+}
+
+:host(.toolbar-title-large) ::slotted(ion-title) {
+  @include globals.padding-horizontal(globals.$ionic-space-400);
+}
+
+// Ionic Toolbar Slot Placement
+// --------------------------------------------------
+
+::slotted([slot="secondary"]) {
+  order: map-get($toolbar-order-ionic, slot-secondary);
+}
+
+::slotted([slot="primary"]) {
+  order: map-get($toolbar-order-ionic, slot-primary);
+
+  text-align: end;
+}
+
+::slotted([slot="start"]) {
+  order: map-get($toolbar-order-ionic, slot-start);
+}
+
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
+  display: flex;
+
+  flex: 1;
+  gap: globals.$ionic-space-200;
+}
+
+::slotted([slot="end"]) {
+  justify-content: end;
+  order: map-get($toolbar-order-ionic, slot-end);
+
+  font-size: var(--ionic-font-size-600, 1.5rem);
+}
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index 765cc35a32..d66d00a5e1 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -1,4 +1,4 @@
-@import "./toolbar";
+@import "./toolbar.native";
 @import "./toolbar.ios.vars";
 
 // iOS Toolbar
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
index a3cbbbea2b..984b200f60 100644
--- a/core/src/components/toolbar/toolbar.md.scss
+++ b/core/src/components/toolbar/toolbar.md.scss
@@ -1,4 +1,4 @@
-@import "./toolbar";
+@import "./toolbar.native";
 @import "./toolbar.md.vars";
 
 // Material Design Toolbar
diff --git a/core/src/components/toolbar/toolbar.native.scss b/core/src/components/toolbar/toolbar.native.scss
new file mode 100644
index 0000000000..406ec132e8
--- /dev/null
+++ b/core/src/components/toolbar/toolbar.native.scss
@@ -0,0 +1,30 @@
+@import "./toolbar.common";
+@import "../../themes/native/native.globals";
+
+// Toolbar
+// --------------------------------------------------
+
+:host {
+  font-family: $font-family-base;
+
+  z-index: $z-index-toolbar;
+}
+
+:host(.ion-color) {
+  color: current-color(contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: current-color(base);
+}
+
+.toolbar-container {
+  z-index: $z-index-toolbar;
+}
+
+// Toolbar: Transparent
+// --------------------------------------------------
+
+.toolbar-background {
+  z-index: $z-index-toolbar-background;
+}
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index f8ac1f337a..f457a48b81 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -20,7 +20,7 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
   styleUrls: {
     ios: 'toolbar.ios.scss',
     md: 'toolbar.md.scss',
-    ionic: 'toolbar.md.scss',
+    ionic: 'toolbar.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html
index 1a2f1173b6..989efe0443 100644
--- a/core/src/css/test/typography/basic/index.html
+++ b/core/src/css/test/typography/basic/index.html
@@ -16,12 +16,6 @@
   </head>
 
   <body>
-    <style>
-      ion-title {
-        margin: 10px 0;
-      }
-    </style>
-
     <ion-app>
       <ion-header>
         <ion-toolbar>
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8e2a362a4d..9734c334ca 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 74bb1c30dd..bfd326e326 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1ffe6a3f74..c8a108c993 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ