fix(css): add core.css (#15220)

fixes #15170

core/src/css/colors.scss

@@ -1,32 +0,0 @@
-@import "../themes/ionic.globals";
-
-// Ionic Colors
-// --------------------------------------------------
-// Generates the color classes and variables based on the
-// colors map
-
-@mixin generate-color($color-name) {
-  $value: map-get($colors, $color-name);
-
-  $base: map-get($value, base);
-  $contrast: map-get($value, contrast);
-  $shade: map-get($value, shade);
-  $tint: map-get($value, tint);
-
-  --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
-  --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
-  --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
-  --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
-  --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
-}
-
-@each $color-name, $value in $colors {
-  .ion-color-#{$color-name} {
-    @include generate-color($color-name);
-  }
-}
-
-*::selection {
-  background: var(--ion-color-shade, rgba(0,0,0,0.3));
-}

core/src/css/core.scss

@@ -0,0 +1,118 @@
+@import "../themes/ionic.globals";
+
+// Ionic Font Family
+// --------------------------------------------------
+
+html.ios {
+  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+}
+html.md {
+  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
+}
+
+html {
+  --ion-font-family: var(--ion-default-font);
+}
+
+
+// Ionic Colors
+// --------------------------------------------------
+// Generates the color classes and variables based on the
+// colors map
+
+@mixin generate-color($color-name) {
+  $value: map-get($colors, $color-name);
+
+  $base: map-get($value, base);
+  $contrast: map-get($value, contrast);
+  $shade: map-get($value, shade);
+  $tint: map-get($value, tint);
+
+  --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
+  --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
+  --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
+  --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
+}
+
+@each $color-name, $value in $colors {
+  .ion-color-#{$color-name} {
+    @include generate-color($color-name);
+  }
+}
+
+*::selection {
+  background: var(--ion-color-shade, rgba(0,0,0,0.3));
+}
+
+
+// Page Container Structure
+// --------------------------------------------------
+
+.ion-page {
+  @include position(0, 0, 0, 0);
+
+  display: flex;
+  position: absolute;
+
+  flex-direction: column;
+  justify-content: space-between;
+
+  contain: layout size style;
+  overflow: hidden;
+  z-index: $z-index-page-container;
+}
+
+ion-route,
+ion-route-redirect,
+ion-router,
+ion-animation-controller,
+ion-nav-controller,
+ion-menu-controller,
+ion-action-sheet-controller,
+ion-alert-controller,
+ion-loading-controller,
+ion-modal-controller,
+ion-picker-controller,
+ion-popover-controller,
+ion-toast-controller,
+.ion-page-hidden,
+[hidden] {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+.ion-page-invisible {
+  opacity: 0;
+}
+
+
+// Ionic Safe Margins
+// --------------------------------------------------
+
+html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
+  --ion-statusbar-padding: 20px;
+}
+html {
+  --ion-safe-area-top: var(--ion-statusbar-padding);
+}
+
+// TODO: remove once Safari 11.2 dies
+@supports (padding-top: constant(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: constant(safe-area-inset-top);
+    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
+    --ion-safe-area-left: constant(safe-area-inset-left);
+    --ion-safe-area-right: constant(safe-area-inset-right);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: env(safe-area-inset-top);
+    --ion-safe-area-bottom: env(safe-area-inset-bottom);
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: env(safe-area-inset-right);
+  }
+}

core/src/css/global.bundle.css

@@ -0,0 +1,3 @@
+@import "./normalize";
+@import "./structure";
+@import "./typography";

core/src/css/ionic.bundle.scss

@@ -0,0 +1,8 @@
+// Core CSS, always required
+@import "./core";
+
+// Global CSS: blocks scrolling, sets box-sizing
+@import "./global.bundle";
+
+// CSS Utils
+@import "./utils.bundle";

core/src/css/structure.scss

@@ -49,70 +49,3 @@ body {
 
   text-size-adjust: none;
 }
-
-
-// Page Container Structure
-// --------------------------------------------------
-
-.ion-page {
-  @include position(0, 0, 0, 0);
-
-  display: flex;
-  position: absolute;
-
-  flex-direction: column;
-  justify-content: space-between;
-
-  contain: layout size style;
-  overflow: hidden;
-  z-index: $z-index-page-container;
-}
-
-ion-route,
-ion-route-redirect,
-ion-router,
-ion-animation-controller,
-ion-nav-controller,
-ion-menu-controller,
-ion-action-sheet-controller,
-ion-alert-controller,
-ion-loading-controller,
-ion-modal-controller,
-ion-picker-controller,
-ion-popover-controller,
-ion-toast-controller,
-.ion-page-hidden,
-[hidden] {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
-.ion-page-invisible {
-  opacity: 0;
-}
-
-html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
-  --ion-statusbar-padding: 20px;
-}
-html {
-  --ion-safe-area-top: var(--ion-statusbar-padding);
-}
-
-// TODO: remove once Safari 11.2 dies
-@supports (padding-top: constant(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: constant(safe-area-inset-top);
-    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
-    --ion-safe-area-left: constant(safe-area-inset-left);
-    --ion-safe-area-right: constant(safe-area-inset-right);
-  }
-}
-
-@supports (padding-top: env(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
-  }
-}

core/src/css/typography.scss

@@ -30,17 +30,8 @@ $h5-font-size:                 calc(#{$h1-font-size} - #{$h-step} * 4) !default;
 /// @prop - Font size of heading level 6
 $h6-font-size:                 calc(#{$h1-font-size} - #{$h-step} * 5) !default;
 
-
-:root[mode=ios] {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
-
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
-}
-
-:root[mode=md] {
-  --ion-font-family: "Roboto", "Helvetica Neue", sans-serif;
-
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
+html {
+  font-family: var(--ion-font-family);
 }
 
 a {

core/src/css/utils.bundle.scss

@@ -1,7 +1,3 @@
-@import "./normalize";
-@import "./structure";
-@import "./typography";
-@import "./colors";
 @import "./padding";
 @import "./float-elements";
 @import "./text-alignment";