fix(app): statusbarPadding

core/package.json

@@ -27,7 +27,7 @@
     "ionicons": "4.2.6"
   },
   "devDependencies": {
-    "@stencil/core": "0.10.10",
+    "@stencil/core": "0.11.0-0",
     "@stencil/dev-server": "latest",
     "@stencil/sass": "latest",
     "@stencil/utils": "latest",

core/src/components.d.ts

@@ -8122,10 +8122,6 @@ declare global {
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       '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`.
-       */
-      'translucent': boolean;
     }
   }
 
@@ -8156,10 +8152,6 @@ declare global {
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       '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`.
-       */
-      'translucent'?: boolean;
     }
   }
 }

core/src/components/app/app.ios.scss

@@ -1,21 +1,5 @@
 @import "./app";
-@import "./app.ios.vars";
 
-// iOS App
-// --------------------------------------------------
-
-.app-ios {
-  @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height);
-
-  // TODO this can be simplified
-  &.statusbar-padding {
-    .ion-page,
-    > ion-header,
-    .ion-page > ion-header,
-    ion-menu > .menu-inner,
-    ion-menu > .menu-inner > ion-header {
-      @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding);
-      @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding);
-    }
-  }
+.app-ios.statusbar-padding {
+  --ion-statusbar-padding: 20px;
 }

core/src/components/app/app.md.scss

@@ -1,24 +1,6 @@
 @import "./app";
-@import "./app.md.vars";
 
-// Material Design App
-// --------------------------------------------------
-
-.app-md {
-  @include footer-safe-area(
-    $toolbar-md-height,
-    $toolbar-md-padding,
-    $tabbar-md-height);
-
-  // TODO this can be simplified
-  &.statusbar-padding {
-    .ion-page,
-    .ion-page > ion-header,
-    ion-tab ion-nav .ion-page > ion-header,
-    ion-menu > .menu-inner,
-    ion-menu > .menu-inner > ion-header {
-      @include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
-    }
-  }
+.app-md.statusbar-padding {
+  --ion-statusbar-padding: 20px;
 }
 

core/src/components/app/app.scss

@@ -1,4 +1,5 @@
-@import "./app.vars";
+@import "../../themes/ionic.globals";
+@import "../../themes/ionic.mixins";
 
 // Page Container Structure
 // --------------------------------------------------

core/src/components/app/app.tsx

@@ -1,14 +1,20 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
-import { Config } from '../../interface';
+import { Config, Mode } from '../../interface';
 import { isDevice, isHybrid, needInputShims } from '../../utils/platform';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-app',
-  styleUrl: 'app.scss'
+  styleUrls: {
+    ios: 'app.ios.scss',
+    md: 'app.md.scss'
+  }
 })
 export class App {
 
+  mode!: Mode;
+
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
@@ -23,13 +29,15 @@ export class App {
   hostData() {
     const device = this.config.getBoolean('isDevice', isDevice(this.win));
     const hybrid = isHybrid(this.win);
-    const statusBar = this.config.getBoolean('statusbarPadding', hybrid);
+    const statusbarPadding = this.config.get('statusbarPadding', hybrid);
 
     return {
       class: {
+        ...createThemedClasses(this.mode, 'app'),
+
         'is-device': device,
         'is-hydrid': hybrid,
-        'statusbar-padding': statusBar
+        'statusbar-padding': statusbarPadding
       }
     };
   }

core/src/components/footer/footer.scss

@@ -13,3 +13,10 @@ ion-footer {
 
   z-index: $z-index-toolbar;
 }
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  ion-footer ion-toolbar:last-child {
+    /* stylelint-disable-next-line property-blacklist */
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

core/src/components/header/header.scss

@@ -13,3 +13,15 @@ ion-header {
 
   z-index: $z-index-toolbar;
 }
+
+ion-header ion-toolbar:first-child {
+  /* stylelint-disable-next-line property-blacklist */
+  padding-top: var(--ion-statusbar-padding);
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  ion-header ion-toolbar:first-child {
+    /* stylelint-disable-next-line property-blacklist */
+    padding-top: calc(env(safe-area-inset-top) + var(--ion-statusbar-padding));
+  }
+}

core/src/components/scroll/scroll.tsx

@@ -101,7 +101,7 @@ export class Scroll {
       this.queue.read(ts => {
         this.queued = false;
         this.detail.event = ev;
-        updateScrollDetail(this.detail, this.el, ts!, didStart);
+        updateScrollDetail(this.detail, this.el, ts, didStart);
         this.ionScroll.emit(this.detail);
       });
     }

core/src/components/tabbar/tabbar.scss

@@ -32,6 +32,13 @@
   order: -1;
 }
 
+@supports (padding-top: env(safe-area-inset-top)) {
+  :host(.placement-bottom) {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+
 
 // Tab Highlight
 // --------------------------------------------------

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