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.statusbar-padding {
-// --------------------------------------------------
+  --ion-statusbar-padding: 20px;
-
-.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);
-    }
-  }
 }

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

@@ -1,11 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-@import "../tabbar/tabbar.ios.vars";
-
-// iOS App
-// --------------------------------------------------
-
-/// @prop - Color for links for the app
-$app-ios-link-color:             ion-color(primary, base) !default;
-
-/// @prop - Statusbar padding for the app
-$app-ios-statusbar-padding:       20px !default;

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

@@ -1,24 +1,6 @@
 @import "./app";
-@import "./app.md.vars";
 
-// Material Design App
+.app-md.statusbar-padding {
-// --------------------------------------------------
+  --ion-statusbar-padding: 20px;
-
-.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);
-    }
-  }
 }
 

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

@@ -1,9 +0,0 @@
-@import "../../themes/ionic.globals.md";
-@import "../tabbar/tabbar.md.vars";
-
-
-// Material Design App
-// --------------------------------------------------
-
-/// @prop - Statusbar padding for the app
-$app-md-statusbar-padding:       20px !default;

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/app/app.vars.scss

@@ -1,32 +0,0 @@
-// Globals
-// --------------------------------------------------
-@import "../../themes/ionic.globals";
-@import "../../themes/ionic.mixins";
-
-
-// App
-// --------------------------------------------------
-
-/// @prop - Font weight of all headings
-$headings-font-weight:         500 !default;
-
-/// @prop - Line height of all headings
-$headings-line-height:         1.2 !default;
-
-/// @prop - Font size of heading level 1
-$h1-font-size:                 26px !default;
-
-/// @prop - Font size of heading level 2
-$h2-font-size:                 24px !default;
-
-/// @prop - Font size of heading level 3
-$h3-font-size:                 22px !default;
-
-/// @prop - Font size of heading level 4
-$h4-font-size:                 20px !default;
-
-/// @prop - Font size of heading level 5
-$h5-font-size:                 18px !default;
-
-/// @prop - Font size of heading level 6
-$h6-font-size:                 16px !default;

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};
-
+  --padding-top: #{$toolbar-ios-padding};
-  @include padding($toolbar-ios-padding);
+  --padding-bottom: #{$toolbar-ios-padding};
-
+  --padding-start: #{$toolbar-ios-padding};
-  min-height: $toolbar-ios-height;
+  --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};
-
+  --padding-top: #{$toolbar-md-padding};
-  @include padding($toolbar-md-padding);
+  --padding-bottom: #{$toolbar-md-padding};
-
+  --padding-start: #{$toolbar-md-padding};
-  min-height: #{$toolbar-md-height};
+  --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: {
+      class: createColorClasses(this.color)
-        ...createColorClasses(this.color),
-        'toolbar-translucent': this.translucent
-      }
     };
   }
 
   render() {
     return [
       <div class="toolbar-background"></div>,
-      <slot name="start"></slot>,
+      <div class="toolbar-container">
-      <slot name="secondary"></slot>,
+        <slot name="start"></slot>
-      <div class="toolbar-content">
+        <slot name="secondary"></slot>
-        <slot></slot>
+        <div class="toolbar-content">
-      </div>,
+          <slot></slot>
-      <slot name="primary"></slot>,
+        </div>
-      <slot name="end"></slot>
+        <slot name="primary"></slot>
+        <slot name="end"></slot>
+      </div>
     ];
   }
 }

core/src/themes/ionic.mixins.scss

@@ -632,79 +632,3 @@
     }
   }
 }
-
-
-// Add generic safe area sizing
-// @param {string} $prop - css property you want to set
-// @param {string} $safe-area-position - short safe-area-inset value you want to modify
-// @param {string} $value - additional value you want to modify, if none, pass 0
-// ----------------------------------------------------------
-@mixin safe-area-sizing($prop, $safe-area-position, $value){
-  #{$prop}: unquote("calc(#{$value} + constant(#{$safe-area-position}))");
-  #{$prop}: unquote("calc(#{$value} + env(#{$safe-area-position}))");
-}
-
-
-// Add safe area padding and sizing to the footer area
-// @param {string} $toolbar-height - height of the toolbar
-// @param {string} $toolbar-padding - padding of the toolbar
-// @param {string} $tabs-height - height of the tabs
-// ----------------------------------------------------------
-@mixin footer-safe-area($toolbar-height, $toolbar-padding, $tabs-height) {
-  ion-tabs ion-tabbar:not(.placement-top) {
-    @include safe-area-padding(null, null, 0, null);
-    @include safe-area-sizing(height, safe-area-inset-bottom, $tabs-height)
-  }
-
-  ion-footer .toolbar:last-child {
-    @include safe-area-padding(null, null, $toolbar-padding, null);
-    @include safe-area-sizing(min-height, safe-area-inset-bottom, $toolbar-height)
-  }
-}
-
-
-// Add padding to the toolbar to account for the statusbar
-// @param {string} $toolbar-height - height of the toolbar
-// @param {string} $toolbar-padding - padding of the toolbar
-// @param {string} $content-padding - padding of the content
-// @param {string} $statusbar-padding - padding of the statusbar
-// --------------------------------------------------------------------------------
-@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
-
-  > .toolbar:first-child {
-    @include padding(calc(#{$statusbar-padding} + #{$toolbar-padding}), null, null, null);
-    @include safe-area-padding($toolbar-padding, null, null, null);
-
-    min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
-    @include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height);
-  }
-
-  > ion-content:first-child ion-scroll {
-    @include padding($statusbar-padding, null, null, null);
-    @include safe-area-padding(0px, null, null, null);
-  }
-}
-
-
-// Add padding to the toolbar to account for the statusbar
-// @param {string} $toolbar-height - height of the toolbar
-// @param {string} $toolbar-padding - padding of the toolbar
-// @param {string} $content-padding - padding of the content
-// @param {string} $statusbar-padding - padding of the statusbar
-//
-// iOS is the only mode that uses this mixin and it should be removed with #5036
-// --------------------------------------------------------------------------------
-@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
-
-  > .toolbar:first-child ion-segment,
-  > .toolbar:first-child ion-title {
-    @include padding($statusbar-padding, null, null, null);
-    @include safe-area-padding(0px, null, null, null);
-
-    height: calc(#{$toolbar-height} + #{$statusbar-padding});
-    @include safe-area-sizing(height, safe-area-inset-top, $toolbar-height);
-
-    min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
-    @include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height)
-  }
-}