feat(toolbar): add ionic theme styles

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.scss → 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.scss → 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.scss → 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>