fix(app): fix statusbarPadding

fixes #15073

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

@@ -1,5 +0,0 @@
-@import "./app";
-
-.app-ios.statusbar-padding {
-  --ion-statusbar-padding: 20px;
-}

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

@@ -1,6 +0,0 @@
-@import "./app";
-
-.app-md.statusbar-padding {
-  --ion-statusbar-padding: 20px;
-}
-

core/src/components/app/app.scss

@@ -1,6 +1,26 @@
 @import "../../themes/ionic.globals";
 @import "../../themes/ionic.mixins";
 
+ion-app.is-device {
+  user-select: none;
+}
+
+ion-app.statusbar-padding {
+  --ion-statusbar-padding: 20px;
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  ion-app.statusbar-padding {
+    --ion-statusbar-padding: constant(safe-area-inset-top);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  ion-app.statusbar-padding {
+    --ion-statusbar-padding: env(safe-area-inset-top);
+  }
+}
+
 // Page Container Structure
 // --------------------------------------------------
 
@@ -31,16 +51,6 @@ ion-app,
   opacity: 0;
 }
 
-.ion-page-hidden {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
-ion-app.is-device {
-  user-select: none;
-}
-
-
 // Misc
 // --------------------------------------------------
 
@@ -55,6 +65,8 @@ ion-alert-controller,
 ion-loading-controller,
 ion-modal-controller,
 ion-picker-controller,
-ion-toast-controller {
+ion-toast-controller,
+.ion-page-hidden {
+  /* stylelint-disable-next-line declaration-no-important */
   display: none;
 }

core/src/components/app/app.tsx

@@ -1,22 +1,16 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
+import { Config } from '../../interface';
 import { isDevice, isHybrid, isStandaloneMode, needInputShims } from '../../utils/platform';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-app',
-  styleUrls: {
+  styleUrl: 'app.scss'
-    ios: 'app.ios.scss',
-    md: 'app.md.scss'
-  }
 })
 export class App {
 
   private isDevice = false;
 
-  mode!: Mode;
-
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
@@ -40,8 +34,6 @@ export class App {
 
     return {
       class: {
-        ...createThemedClasses(this.mode, 'app'),
-
         'is-device': this.isDevice,
         'is-hydrid': hybrid,
         'is-standalone': isStandalone,

core/src/components/header/header.scss

@@ -21,6 +21,6 @@ ion-header ion-toolbar:first-child {
 @supports (padding-top: env(safe-area-inset-top)) {
   ion-header ion-toolbar:first-child {
     /* stylelint-disable-next-line length-zero-no-unit */
-    padding-top: calc(env(safe-area-inset-top) + var(--ion-statusbar-padding, 0px));
+    padding-top: var(--ion-statusbar-padding, 0px);
   }
 }