fix(app): statusbarPadding

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

@@ -9,10 +9,11 @@
   --ion-color-contrast: #{$toolbar-ios-text-color};
   --border-color: #{$toolbar-ios-border-color};
   --translucent-filter: #{$toolbar-ios-translucent-filter};
-
-  @include padding($toolbar-ios-padding);
-
-  min-height: $toolbar-ios-height;
+  --padding-top: #{$toolbar-ios-padding};
+  --padding-bottom: #{$toolbar-ios-padding};
+  --padding-start: #{$toolbar-ios-padding};
+  --padding-end: #{$toolbar-ios-padding};
+  --min-height: #{$toolbar-ios-height};
 
   font-family: $toolbar-ios-font-family;
 }

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

@@ -8,10 +8,11 @@
   --ion-color-base: #{$toolbar-md-background-color};
   --ion-color-contrast: #{$toolbar-md-text-color};
   --border-color: #{$toolbar-md-border-color};
-
-  @include padding($toolbar-md-padding);
-
-  min-height: #{$toolbar-md-height};
+  --padding-top: #{$toolbar-md-padding};
+  --padding-bottom: #{$toolbar-md-padding};
+  --padding-start: #{$toolbar-md-padding};
+  --padding-end: #{$toolbar-md-padding};
+  --min-height: #{$toolbar-md-height};
 
   font-family: #{$toolbar-md-font-family};
 }

core/src/components/toolbar/toolbar.scss

@@ -11,6 +11,26 @@
 
   @include font-smoothing();
 
+  display: block;
+
+  width: 100%;
+
+  color: #{current-color(contrast)};
+
+  contain: content;
+
+  z-index: $z-index-toolbar;
+  box-sizing: border-box;
+}
+
+.toolbar-container {
+  @include padding(
+    var(--padding-top),
+    var(--padding-end),
+    var(--padding-bottom),
+    var(--padding-start)
+  );
+
   display: flex;
   position: relative;
 
@@ -20,23 +40,16 @@
 
   width: 100%;
 
-  color: #{current-color(contrast)};
+  min-height: var(--min-height);
 
   contain: content;
   overflow: hidden;
   z-index: $z-index-toolbar;
-  box-sizing: border-box;
-  backdrop-filter: var(--backdrop-filter);
 }
 
 // Transparent Toolbar
 // --------------------------------------------------
 
-:host(.toolbar-translucent) {
-  --backdrop-filter: var(--translucent-filter);
-  --opacity: .8;
-}
-
 .toolbar-background {
   @include position(0, 0, 0, 0);
 

core/src/components/toolbar/toolbar.tsx

@@ -28,33 +28,24 @@ export class Toolbar {
    */
   @Prop() mode!: Mode;
 
-  /**
-   * If true, the toolbar will be translucent.
-   * Note: In order to scroll content behind the toolbar, the `fullscreen`
-   * attribute needs to be set on the content.
-   * Defaults to `false`.
-   */
-  @Prop() translucent = false;
-
   hostData() {
     return {
-      class: {
-        ...createColorClasses(this.color),
-        'toolbar-translucent': this.translucent
-      }
+      class: createColorClasses(this.color)
     };
   }
 
   render() {
     return [
       <div class="toolbar-background"></div>,
-      <slot name="start"></slot>,
-      <slot name="secondary"></slot>,
-      <div class="toolbar-content">
-        <slot></slot>
-      </div>,
-      <slot name="primary"></slot>,
-      <slot name="end"></slot>
+      <div class="toolbar-container">
+        <slot name="start"></slot>
+        <slot name="secondary"></slot>
+        <div class="toolbar-content">
+          <slot></slot>
+        </div>
+        <slot name="primary"></slot>
+        <slot name="end"></slot>
+      </div>
     ];
   }
 }