feat(toolbar): add ionic theme styles (#29656)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Added ionic theme scss architecture for
- Toolbar
- Menu Button
- Buttons
- Searchbar
- Title

For the toolbar, it was decided to follow an approach closer to ios
regarding the slots offering and behaviour, as it matches more closely
the UX/UI requirements.

- Added TODO related to z-index task on toolbar an header ionic files.
- Added new ion-title and ion-toolbar tests for ionic theme.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Toolbar Sample
Screen](https://ionic-framework-15lh8i02e-ionic1.vercel.app/src/components/toolbar/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

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);
+}

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;
+}

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

@@ -1,5 +1,5 @@
 @import "./buttons.ios.vars";
-@import "./buttons";
+@import "./buttons.native";
 
 // iOS Toolbar Default Button
 // --------------------------------------------------

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
 // --------------------------------------------------

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;
 }
 

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,
 })

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};
+}

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
 // --------------------------------------------------
 

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;
+}

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
 // --------------------------------------------------

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
 // --------------------------------------------------

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);
+}

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,
 })

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;
-}

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;
+}

core/src/components/searchbar/searchbar.ios.scss

@@ -1,4 +1,4 @@
-@import "./searchbar";
+@import "./searchbar.native";
 @import "./searchbar.ios.vars";
 
 // iOS Searchbar

core/src/components/searchbar/searchbar.md.scss

@@ -1,4 +1,4 @@
-@import "./searchbar";
+@import "./searchbar.native";
 @import "./searchbar.md.vars";
 
 // Material Design Searchbar

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;
+}

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,
 })

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>

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);

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;
 

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);
+}

core/src/components/title/title.ios.scss

@@ -1,4 +1,4 @@
-@import "./title";
+@import "./title.native";
 
 // iOS Title
 // --------------------------------------------------

core/src/components/title/title.md.scss

@@ -1,4 +1,4 @@
-@import "./title";
+@import "./title.native";
 
 // Material Design Title
 // --------------------------------------------------

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)};
+}

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,
 })

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>

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;
 }
 

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);
+}

core/src/components/toolbar/toolbar.ios.scss

@@ -1,4 +1,4 @@
-@import "./toolbar";
+@import "./toolbar.native";
 @import "./toolbar.ios.vars";
 
 // iOS Toolbar

core/src/components/toolbar/toolbar.md.scss

@@ -1,4 +1,4 @@
-@import "./toolbar";
+@import "./toolbar.native";
 @import "./toolbar.md.vars";
 
 // Material Design Toolbar

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;
+}

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,
 })

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>