feat(ionic-theme): improve scss architecture for ionic theme (#29345)

Issue number: None

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This PR follows the architectural changes defined on the _SCSS
Architecture Design Doc_. Due to some of the developments done in the
meantime, not everything that was defined on that document was followed
and some sections were simplified.

Overall, there were two guidelines that supported the work on this PR:
- Have no impact on the current scss partials & CSS architecture for the
`md/iOS` themes.
- Make everything related to the new `Ionic` Theme separated.

Based on these, here're the changes made:

**On Themes folder (private):**
- Renamed current internal scss partials on src/themes, related to
md/iOS, to `native.*.scss` and move them to a new folder, called
`native`. Updated imports on all framework.
- Removed the ionic prefix from the name of the mixins and function
partials on src/themes. Updated imports on all framework.
- Created new folder, named ionic, inside src/themes. This holds the
`ionic.globals.scss`, with all the mixins and functions forwarded, to be
used on other scopes.
- Replaced on already created Ionic theme files, the usage of tokens and
mixins with @use, to instead _@use
"../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an
equal approach is followed everywhere and also makes it easier to change
the files imported or paths, in the future, as its all in the same
global file.
- Updated the foundations `readMe` file, with the new process for using
globals.


![themes](https://github.com/ionic-team/ionic-framework/assets/32780808/1455523c-3ccd-4310-a974-522f9f8ade02)


**On css folder (public):**
- Created new folder, named `ionic`, inside src/css. This holds all the
files related exclusively to Ionic Theme, following the same structure
as exists now for md/iOS, with a core, a bundle, utils, etc. Some files
were a bit duplicated, to eliminate imports from ios or md theme
partials. The only file common to both Themes is the `normalize.scss`.
- No folder structure or renamings were done on the existing output, to
prevent breaking-changes for developers already making imports from this
folder.
- Updated typography and link partials to use globals instead of tokens.
- Changed `font-size` styles on typography to be on `body`, instead of
`html`, to enable correct support of accessibility features on browsers
and devices, related to `font-size`.


![css](https://github.com/ionic-team/ionic-framework/assets/32780808/10bedddc-23c1-4c50-a4e4-77fb7f6c6430)


**Other changes related to global styles new architecture:**
- Updated margin & padding utility-classed generated by token, to
include css variables and padding/margin mixins.
- Updated link test to use new global Ionic bundle, correct
utility-class on ion-content and updated snapshots. The font-size
changed to 16, as its now the default on the body.
- Updated typography snapshots.
- Updated prettier format on all scss files. Later on we should make
sure this is equal for all team members.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: Sean Perkins <sean@ionic.io>

core/src/css/core.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@import "../themes/ionic.globals";
+@import "../themes/native/native.globals";
 @import "../components/menu/menu.ios.vars";
 @import "../components/menu/menu.md.vars";
 
@@ -161,7 +161,6 @@ html.ios ion-modal.modal-card .ion-page {
   }
 }
 
-
 // Page Container Structure
 // --------------------------------------------------
 
@@ -224,11 +223,11 @@ ion-toast-controller,
   display: block;
 }
 
-
 // Ionic Safe Margins
 // --------------------------------------------------
 
-html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
+html.plt-ios.plt-hybrid,
+html.plt-ios.plt-pwa {
   --ion-statusbar-padding: 20px;
 }
 
@@ -247,7 +246,6 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
   }
 }
 
-
 // Global Card Styles
 // --------------------------------------------------
 
@@ -256,7 +254,6 @@ ion-card-header.ion-color .ion-inherit-color {
   color: inherit;
 }
 
-
 // Menu Styles
 // --------------------------------------------------
 
@@ -304,7 +301,7 @@ ion-card-header.ion-color .ion-inherit-color {
   box-shadow: $menu-ios-box-shadow-reveal;
 }
 
-[dir=rtl].ios .menu-content-reveal {
+[dir="rtl"].ios .menu-content-reveal {
   box-shadow: $menu-ios-box-shadow-reveal-rtl;
 }
 

core/src/css/display.scss

@@ -1,5 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Display
 // --------------------------------------------------

core/src/css/flex-utils.scss

@@ -30,7 +30,6 @@
   align-self: auto !important;
 }
 
-
 // Flex Wrap
 // --------------------------------------------------
 
@@ -46,7 +45,6 @@
   flex-wrap: wrap-reverse !important;
 }
 
-
 // Justify Content
 // --------------------------------------------------
 
@@ -74,7 +72,6 @@
   justify-content: space-evenly !important;
 }
 
-
 // Align Items
 // --------------------------------------------------
 

core/src/css/float-elements.scss

@@ -1,5 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Float Elements
 // --------------------------------------------------

core/src/css/ionic-swiper.scss

@@ -1,19 +1,18 @@
-@import "../themes/ionic.globals.ios.scss";
+@import "../themes/native/native.globals.ios.scss";
 
 // Slides
 // --------------------------------------------------
 
 .swiper {
-
   // These values are the same for iOS and MD
   // We just do not add a .md or .ios class beforehand
   // so the styles are easier to override by the user.
   --bullet-background: $text-color-step-800;
   --bullet-background-active: ion-color(primary, base);
-  --progress-bar-background: rgba($text-color-rgb, .25);
+  --progress-bar-background: rgba($text-color-rgb, 0.25);
   --progress-bar-background-active: ion-color(primary, shade);
-  --scroll-bar-background: rgba($text-color-rgb, .1);
-  --scroll-bar-background-active: rgba($text-color-rgb, .5);
+  --scroll-bar-background: rgba($text-color-rgb, 0.1);
+  --scroll-bar-background-active: rgba($text-color-rgb, 0.5);
   /**
    * @prop --bullet-background: Background of the pagination bullets
    * @prop --bullet-background-active: Background of the active pagination bullet
@@ -40,7 +39,6 @@
   background: var(--bullet-background-active);
 }
 
-
 // Pagination Progress Bar
 // --------------------------------------------------
 
@@ -75,7 +73,6 @@
 }
 
 .swiper .swiper-slide {
-
   // Center slide text vertically
   display: flex;
   position: relative;

core/src/css/ionic/bundle.ionic.scss

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

core/src/css/ionic/core.ionic.scss

@@ -0,0 +1,346 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Font Family
+// --------------------------------------------------
+
+:root {
+  --ionic-global-background-color: #{globals.$ionic-color-neutral-10};
+  --ionic-global-text-color: #{globals.$ionic-color-neutral-900};
+}
+
+html {
+  --ionic-dynamic-font: -apple-system-body;
+  font-family: #{globals.$ionic-font-family};
+}
+
+body {
+  background: var(--ionic-global-background-color);
+  color: var(--ionic-global-text-color);
+}
+
+body.backdrop-no-scroll {
+  overflow: hidden;
+}
+
+// Modal - Card Style
+// --------------------------------------------------
+/**
+ * Card style modal needs additional padding on the
+ * top of the header. We accomplish this by targeting
+ * the first toolbar in the header.
+ * Footer also needs this. We do not adjust the bottom
+ * padding though because of the safe area.
+ */
+html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
+html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
+html.ios ion-modal ion-footer ion-toolbar:first-of-type {
+  padding-top: globals.$ionic-space-xxs;
+}
+
+/**
+* Card style modal needs additional padding on the
+* bottom of the header. We accomplish this by targeting
+* the last toolbar in the header.
+*/
+html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
+html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
+  padding-bottom: globals.$ionic-space-xxs;
+}
+
+/**
+* Add padding on the left and right
+* of toolbars while accounting for
+* safe area values when in landscape.
+*/
+html.ios ion-modal ion-toolbar {
+  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-xs);
+  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-xs);
+}
+
+/**
+ * Card style modal on iPadOS
+ * should only have backdrop on first instance.
+ */
+@media screen and (min-width: 768px) {
+  html.ios ion-modal.modal-card:first-of-type {
+    --backdrop-opacity: 0.18;
+  }
+}
+
+/**
+ * Subsequent modals should not have a backdrop/box shadow
+ * as it will cause the screen to appear to get progressively
+ * darker. With Ionic 6, declarative modals made it
+ * possible to have multiple non-presented modals in the DOM,
+ * so we could no longer rely on ion-modal:first-of-type.
+ * Here we disable the opacity/box-shadow for every modal
+ * that comes after the first presented modal.
+ *
+ * Note: ion-modal:not(.overlay-hidden):first-of-type
+ * does not match the first modal to not have
+ * the .overlay-hidden class, it will match the
+ * first modal in general only if it does not
+ * have the .overlay-hidden class.
+ * The :nth-child() pseudo-class has support
+ * for selectors which would help us here. At the
+ * time of writing it does not have great cross browser
+ * support.
+ *
+ * Note 2: This should only apply to non-card and
+ * non-sheet modals. Card and sheet modals have their
+ * own criteria for displaying backdrops/box shadows.
+ *
+ * Do not use :not(.overlay-hidden) in place of
+ * .show-modal because that triggers a memory
+ * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
+ */
+ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
+  --backdrop-opacity: 0;
+  --box-shadow: none;
+}
+
+/**
+ * This works around a bug in WebKit where the
+ * content will overflow outside of the bottom border
+ * radius when re-painting. As long as a single
+ * border radius value is set on .ion-page, this
+ * issue does not happen. We set the top left radius
+ * here because the top left corner will always have a
+ * radius no matter the platform.
+ * This behavior only applies to card modals.
+ */
+html.ios ion-modal.modal-card .ion-page {
+  border-top-left-radius: var(--border-radius);
+}
+
+// Page Container Structure
+// --------------------------------------------------
+
+.ion-page {
+  @include globals.position(0, 0, 0, 0);
+
+  display: flex;
+  position: absolute;
+
+  flex-direction: column;
+  justify-content: space-between;
+
+  contain: layout size style;
+  z-index: 0;
+}
+
+/**
+ * When making custom dialogs, using
+ * ion-content is not required. As a result,
+ * some developers may wish to have dialogs
+ * that are automatically sized by the browser.
+ * These changes allow certain dimension values
+ * such as fit-content to work correctly.
+ */
+ion-modal > .ion-page {
+  position: relative;
+
+  height: 100%;
+
+  contain: layout style;
+}
+
+.split-pane-visible > .ion-page.split-pane-main {
+  position: relative;
+}
+
+ion-route,
+ion-route-redirect,
+ion-router,
+ion-select-option,
+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 {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+.ion-page-invisible {
+  opacity: 0;
+}
+
+.can-go-back > ion-header ion-back-button {
+  display: block;
+}
+
+// Ionic Safe Margins
+// --------------------------------------------------
+
+html.plt-ios.plt-hybrid,
+html.plt-ios.plt-pwa {
+  --ion-statusbar-padding: globals.$ionic-space-m;
+}
+
+@supports (padding-top: 20px) {
+  html {
+    --ion-safe-area-top: var(--ion-statusbar-padding);
+  }
+}
+
+@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);
+  }
+}
+
+// Global Card Styles
+// --------------------------------------------------
+
+ion-card.ion-color .ion-inherit-color,
+ion-card-header.ion-color .ion-inherit-color {
+  color: inherit;
+}
+
+// Menu Styles
+// --------------------------------------------------
+
+.menu-content {
+  transform: translate3d(0, 0, 0);
+}
+
+.menu-content-open {
+  cursor: pointer;
+  touch-action: manipulation;
+
+  /**
+   * The containing element itself should be clickable but
+   * everything inside of it should not clickable when menu is open
+   *
+   * Setting pointer-events after scrolling has already started
+   * will not cancel scrolling which is why we also set
+   * overflow-y below.
+   */
+  pointer-events: none;
+
+  /**
+   * This accounts for scenarios where the main content itself
+   * is scrollable.
+   */
+  overflow-y: hidden;
+}
+
+/**
+ * Setting overflow cancels any in-progress scrolling
+ * when the menu opens. This prevents users from accidentally
+ * scrolling the main content while also dragging the menu open.
+ * The code below accounts for both ion-content and then custom
+ * scroll containers within ion-content (such as virtual scroll)
+ */
+.menu-content-open ion-content {
+  --overflow: hidden;
+}
+
+.menu-content-open .ion-content-scroll-host {
+  overflow: hidden;
+}
+
+.menu-content-reveal {
+  box-shadow: #{globals.$ionic-elevation-1};
+}
+
+.menu-content-push {
+  box-shadow: #{globals.$ionic-elevation-1};
+}
+
+// Accordion Styles
+ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
+  border-top-left-radius: globals.$ionic-border-radius-rounded-medium;
+  border-top-right-radius: globals.$ionic-border-radius-rounded-medium;
+}
+ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
+  border-bottom-left-radius: globals.$ionic-border-radius-rounded-medium;
+  border-bottom-right-radius: globals.$ionic-border-radius-rounded-medium;
+}
+ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] {
+  --border-width: 0;
+}
+
+ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
+  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ion-accordion .ion-accordion-toggle-icon {
+    /* stylelint-disable declaration-no-important */
+    transition: none !important;
+  }
+}
+/**
+ * The > [slot="header"] selector ensures that we do
+ * not modify toggle icons for any nested accordions. The state
+ * of one accordion should not affect any accordions inside
+ * of a nested accordion group.
+ */
+ion-accordion.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
+ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
+  transform: rotate(180deg);
+}
+
+ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot="header"] {
+  --border-width: 0;
+  --inner-border-width: 0;
+}
+
+ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
+ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
+  margin-top: 0;
+}
+
+// Safari/iOS 15 changes the appearance of input[type="date"].
+// For backwards compatibility from Ionic 5/Safari 14 designs,
+// we override the appearance only when using within an ion-input.
+ion-input input::-webkit-date-and-time-value {
+  text-align: start;
+}
+
+/**
+ * The .ion-datetime-button-overlay class contains
+ * styles that allow any modal/popover to be
+ * sized according to the dimensions of the datetime
+ * when used with ion-datetime-button.
+ */
+.ion-datetime-button-overlay {
+  --width: fit-content;
+  --height: fit-content;
+}
+
+/**
+ * The grid variant can scale down when inline.
+ * When used in a `fit-content` overlay, this causes
+ * the overlay to shrink when the month/year picker is open.
+ * Explicitly setting the dimensions lets us have a consistently
+ * sized grid interface.
+ */
+.ion-datetime-button-overlay ion-datetime.datetime-grid {
+  width: 320px;
+  min-height: 320px;
+}
+
+/**
+ * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
+ * should not be scrollable to ensure the inner content does scroll. However, if the popover
+ * does not have a child ion-content (or class equivalent) then the .popover-viewport element
+ * should remain scrollable. This code exists globally because popover targets
+ * .popover-viewport using ::slotted which only supports simple selectors.
+ *
+ * Note that we do not need to account for .ion-content-scroll-host here because that
+ * class should always be placed within ion-content even if ion-content is not scrollable.
+ */
+.popover-viewport:has(> ion-content) {
+  overflow: hidden;
+}

core/src/css/ionic/global.bundle.ionic.scss

@@ -0,0 +1,5 @@
+@import "../normalize";
+@import "./structure.ionic";
+@import "./typography.ionic";
+@import "./link.ionic";
+@import "./ionic-swiper.ionic";

core/src/css/ionic/ionic-swiper.ionic.scss

@@ -0,0 +1,95 @@
+@use "../../foundations/ionic.vars.scss" as tokens;
+
+// Slides
+// --------------------------------------------------
+
+.swiper {
+  --bullet-background: #{tokens.$ionic-color-neutral-800};
+  --bullet-background-active: #{tokens.$ionic-color-primary};
+  --progress-bar-background: rgba(#010408, 0.25);
+  --progress-bar-background-active: #{tokens.$ionic-color-primary-600};
+  --scroll-bar-background: rgba(#010408, 0.1);
+  --scroll-bar-background-active: rgba(#010408, 0.5);
+  /**
+   * @prop --bullet-background: Background of the pagination bullets
+   * @prop --bullet-background-active: Background of the active pagination bullet
+   *
+   * @prop --progress-bar-background: Background of the pagination progress-bar
+   * @prop --progress-bar-background-active: Background of the active pagination progress-bar
+   *
+   * @prop --scroll-bar-background: Background of the pagination scroll-bar
+   * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar
+   */
+  display: block;
+
+  user-select: none;
+}
+
+// Pagination Bullets
+// --------------------------------------------------
+
+.swiper .swiper-pagination-bullet {
+  background: var(--bullet-background);
+}
+
+.swiper .swiper-pagination-bullet-active {
+  background: var(--bullet-background-active);
+}
+
+// Pagination Progress Bar
+// --------------------------------------------------
+
+.swiper .swiper-pagination-progressbar {
+  background: var(--progress-bar-background);
+}
+
+.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--progress-bar-background-active);
+}
+
+// Scrollbar
+// --------------------------------------------------
+
+.swiper .swiper-scrollbar {
+  background: var(--scroll-bar-background);
+}
+
+.swiper .swiper-scrollbar-drag {
+  background: var(--scroll-bar-background-active);
+}
+
+// Slide
+// --------------------------------------------------
+
+.swiper .slide-zoom {
+  display: block;
+
+  width: 100%;
+
+  text-align: center;
+}
+
+.swiper .swiper-slide {
+  // Center slide text vertically
+  display: flex;
+  position: relative;
+
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 18px;
+
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.swiper .swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}

core/src/css/ionic/link.ionic.scss

@@ -1,4 +1,4 @@
-@use "../foundations/ionic.vars" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 
 // Link: Shared Styles (Standalone & Underline)
 // -------------------------------------------------------------------------------
@@ -7,11 +7,11 @@
 
   align-items: center;
 
-  gap: 4px;
+  gap: globals.$ionic-space-xxxs;
 
   transition: color 0.2s ease-in-out;
 
-  font-weight: 400;
+  font-weight: globals.$ionic-font-weight-regular;
 
   text-decoration-color: inherit;
 
@@ -23,7 +23,7 @@
   // -------------------------------------------------------------------------------
 
   &:visited {
-    color: tokens.$ionic-color-info-500;
+    color: globals.$ionic-color-info-500;
   }
 }
 
@@ -42,7 +42,7 @@
     }
   }
 
-  color: tokens.$ionic-color-info-400;
+  color: globals.$ionic-color-info-400;
 
   text-decoration: none;
 
@@ -51,7 +51,7 @@
 
   &:focus,
   &.ion-focused {
-    outline: 2px solid tokens.$ionic-color-primary-100;
+    outline: 2px solid globals.$ionic-color-primary-100;
     outline-offset: 2px;
 
     text-decoration: underline;
@@ -62,7 +62,7 @@
 
   &:active,
   &.ion-activated {
-    color: tokens.$ionic-color-info-500;
+    color: globals.$ionic-color-info-500;
 
     text-decoration: underline;
   }
@@ -84,7 +84,7 @@ a.ionic-link,
 
   @media (any-hover: hover) {
     &:hover {
-      color: tokens.$ionic-color-info-400;
+      color: globals.$ionic-color-info-400;
     }
   }
 
@@ -97,7 +97,7 @@ a.ionic-link,
 
   &:focus,
   &.ion-focused {
-    outline: 2px solid tokens.$ionic-color-primary-100;
+    outline: 2px solid globals.$ionic-color-primary-100;
     outline-offset: 2px;
 
     color: currentColor;
@@ -110,7 +110,7 @@ a.ionic-link,
 
   &:active,
   &.ion-activated {
-    color: tokens.$ionic-color-info-500;
+    color: globals.$ionic-color-info-500;
   }
 }
 

core/src/css/ionic/structure.ionic.scss

@@ -0,0 +1,85 @@
+@use "../../themes/mixins" as mixins;
+
+// Structure
+// --------------------------------------------------
+// Adds structural css to the native html elements
+
+* {
+  box-sizing: border-box;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  -webkit-text-size-adjust: 100%;
+
+  text-size-adjust: 100%;
+}
+
+html:not(.hydrated) body {
+  display: none;
+}
+
+html.ion-ce body {
+  display: block;
+}
+
+html.plt-pwa {
+  height: 100vh;
+}
+
+body {
+  @include mixins.font-smoothing();
+  @include mixins.margin(0);
+  @include mixins.padding(0);
+
+  position: fixed;
+
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+
+  /**
+   * Because body has position: fixed,
+   * it should be promoted to its own
+   * layer.
+   *
+   * WebKit does not always promote
+   * the body to its own layer on page
+   * load in Ionic apps. Once scrolling on
+   * ion-content starts, WebKit will promote
+   * body. Unfortunately, this causes a re-paint
+   * which results in scrolling being halted
+   * until the next user gesture.
+   *
+   * This impacts the Custom Elements build.
+   * The lazy loaded build causes the browser to
+   * re-paint during hydration which causes WebKit
+   * to promote body to its own layer.
+   * In the CE Build, this hydration does not
+   * happen, so the additional re-paint does not occur.
+   */
+  transform: translateZ(0);
+
+  text-rendering: optimizeLegibility;
+
+  overflow: hidden;
+
+  touch-action: manipulation;
+
+  -webkit-user-drag: none;
+
+  -ms-content-zooming: none;
+
+  word-wrap: break-word;
+
+  overscroll-behavior-y: none;
+  -webkit-text-size-adjust: none;
+
+  text-size-adjust: none;
+}

core/src/css/ionic/typography.ionic.scss

@@ -0,0 +1,91 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+html {
+  font-family: globals.$ionic-font-family;
+}
+
+body {
+  font-weight: globals.$ionic-font-weight-regular;
+  font-size: globals.$ionic-font-size-m;
+
+  line-height: globals.$ionic-font-line-height-m;
+}
+
+/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
+h1,
+.ionic-heading1,
+h2,
+.ionic-heading2,
+h3,
+.ionic-heading3,
+h4,
+.ionic-heading4,
+h5,
+.ionic-heading5,
+h6,
+.ionic-heading6 {
+  color: globals.$ionic-color-neutral-900;
+
+  font-weight: globals.$ionic-font-weight-semi-bold;
+}
+
+h1,
+.ionic-heading1 {
+  font-size: globals.$ionic-font-size-h1;
+
+  line-height: globals.$ionic-font-line-height-xxl;
+}
+
+h2,
+.ionic-heading2 {
+  font-size: globals.$ionic-font-size-h2;
+
+  line-height: globals.$ionic-font-line-height-xl;
+}
+
+h3,
+.ionic-heading3 {
+  font-size: globals.$ionic-font-size-h3;
+
+  line-height: globals.$ionic-font-line-height-xl;
+}
+
+h4,
+.ionic-heading4 {
+  font-size: globals.$ionic-font-size-h4;
+
+  line-height: globals.$ionic-font-line-height-l;
+}
+
+h5,
+.ionic-heading5 {
+  font-size: globals.$ionic-font-size-h5;
+
+  line-height: globals.$ionic-font-line-height-l;
+}
+
+h6,
+.ionic-heading6 {
+  font-size: globals.$ionic-font-size-h6;
+
+  line-height: globals.$ionic-font-line-height-m;
+}
+
+.ionic-display-s {
+  font-size: globals.$ionic-font-size-display-s;
+  font-weight: globals.$ionic-font-weight-regular;
+
+  line-height: globals.$ionic-font-line-height-s;
+}
+
+.ionic-display-m {
+  font-size: globals.$ionic-font-size-display-m;
+  font-weight: globals.$ionic-font-weight-regular;
+
+  line-height: globals.$ionic-font-line-height-m;
+}
+
+/* Common */
+.ionic-font-italic {
+  font-style: italic;
+}

core/src/css/ionic/utils.bundle.ionic.scss

@@ -0,0 +1 @@
+@import "../../foundations/ionic.utility";

core/src/css/normalize.scss

@@ -1,6 +1,5 @@
 // ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css
 
-
 // HTML5 display definitions
 // ==========================================================================
 
@@ -20,7 +19,6 @@ audio:not([controls]) {
   height: 0;
 }
 
-
 // Text-level semantics
 // ==========================================================================
 
@@ -63,7 +61,6 @@ samp {
   font-size: 1em;
 }
 
-
 // Forms
 // ==========================================================================
 
@@ -196,7 +193,6 @@ input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-
 // Tables
 // ==========================================================================//
 

core/src/css/padding.scss

@@ -1,6 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
-
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Element Space
 // --------------------------------------------------
@@ -69,7 +68,6 @@ $margin: var(--ion-margin, 16px);
   @include padding-horizontal($padding);
 }
 
-
 // Margin
 // --------------------------------------------------
 

core/src/css/palettes/high-contrast-dark.scss

@@ -1,71 +1,71 @@
 @use "sass:map";
-@import "../../themes/ionic.functions.color";
+@import "../../themes/functions.color";
 
-$primary:         #7cabff !default;
-$secondary:       #62bdff !default;
-$tertiary:        #b6b9f9 !default;
-$success:         #4ada71 !default;
-$warning:         #ffce31 !default;
-$danger:          #fc9aa2 !default;
-$light:           #222428 !default;
-$medium:          #a8aab3 !default;
-$dark:            #f4f5f8 !default;
+$primary: #7cabff !default;
+$secondary: #62bdff !default;
+$tertiary: #b6b9f9 !default;
+$success: #4ada71 !default;
+$warning: #ffce31 !default;
+$danger: #fc9aa2 !default;
+$light: #222428 !default;
+$medium: #a8aab3 !default;
+$dark: #f4f5f8 !default;
 
-$colors:  (
+$colors: (
   primary: (
-    base:             $primary,
-    contrast:         #000,
-    shade:            get-color-shade($primary),
-    tint:             get-color-tint($primary)
+    base: $primary,
+    contrast: #000,
+    shade: get-color-shade($primary),
+    tint: get-color-tint($primary),
   ),
   secondary: (
-    base:             $secondary,
-    contrast:         #000,
-    shade:            get-color-shade($secondary),
-    tint:             get-color-tint($secondary)
+    base: $secondary,
+    contrast: #000,
+    shade: get-color-shade($secondary),
+    tint: get-color-tint($secondary),
   ),
   tertiary: (
-    base:             $tertiary,
-    contrast:         #000,
-    shade:            get-color-shade($tertiary),
-    tint:             get-color-tint($tertiary)
+    base: $tertiary,
+    contrast: #000,
+    shade: get-color-shade($tertiary),
+    tint: get-color-tint($tertiary),
   ),
   success: (
-    base:             $success,
-    contrast:         #000,
-    shade:            get-color-shade($success),
-    tint:             get-color-tint($success)
+    base: $success,
+    contrast: #000,
+    shade: get-color-shade($success),
+    tint: get-color-tint($success),
   ),
   warning: (
-    base:             $warning,
-    contrast:         #000,
-    shade:            get-color-shade($warning),
-    tint:             get-color-tint($warning)
+    base: $warning,
+    contrast: #000,
+    shade: get-color-shade($warning),
+    tint: get-color-tint($warning),
   ),
   danger: (
-    base:             $danger,
-    contrast:         #000,
-    shade:            get-color-shade($danger),
-    tint:             get-color-tint($danger)
+    base: $danger,
+    contrast: #000,
+    shade: get-color-shade($danger),
+    tint: get-color-tint($danger),
   ),
   light: (
-    base:             $light,
-    contrast:         #fff,
-    shade:            get-color-shade($light),
-    tint:             get-color-tint($light)
+    base: $light,
+    contrast: #fff,
+    shade: get-color-shade($light),
+    tint: get-color-tint($light),
   ),
   medium: (
-    base:             $medium,
-    contrast:         #000,
-    shade:            get-color-shade($medium),
-    tint:             get-color-tint($medium)
+    base: $medium,
+    contrast: #000,
+    shade: get-color-shade($medium),
+    tint: get-color-tint($medium),
   ),
   dark: (
-    base:             $dark,
-    contrast:         #000,
-    shade:            get-color-shade($dark),
-    tint:             get-color-tint($dark)
-  )
+    base: $dark,
+    contrast: #000,
+    shade: get-color-shade($dark),
+    tint: get-color-tint($dark),
+  ),
 ) !default;
 
 /// Text step colors are generated based on
@@ -105,13 +105,12 @@ $lightest-text-color: $text-color;
       --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
     }
-
   }
 }
 
 @mixin high-contrast-dark-ios-palette() {
   $background-color: #000000;
-  
+
   & {
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
@@ -175,7 +174,7 @@ $lightest-text-color: $text-color;
 
 @mixin high-contrast-dark-md-palette() {
   $background-color: #121212;
-  
+
   & {
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};

core/src/css/palettes/high-contrast.scss

@@ -1,71 +1,71 @@
 @use "sass:map";
-@import "../../themes/ionic.functions.color";
+@import "../../themes/functions.color";
 
-$primary:         #003fae !default;
-$secondary:       #01487b !default;
-$tertiary:        #3400e6 !default;
-$success:         #004314 !default;
-$warning:         #5f4100 !default;
-$danger:          #9c000c !default;
-$light:           #f4f5f8 !default;
-$medium:          #444446 !default;
-$dark:            #222428 !default;
+$primary: #003fae !default;
+$secondary: #01487b !default;
+$tertiary: #3400e6 !default;
+$success: #004314 !default;
+$warning: #5f4100 !default;
+$danger: #9c000c !default;
+$light: #f4f5f8 !default;
+$medium: #444446 !default;
+$dark: #222428 !default;
 
-$colors:  (
+$colors: (
   primary: (
-    base:             $primary,
-    contrast:         #fff,
-    shade:            get-color-shade($primary),
-    tint:             get-color-tint($primary)
+    base: $primary,
+    contrast: #fff,
+    shade: get-color-shade($primary),
+    tint: get-color-tint($primary),
   ),
   secondary: (
-    base:             $secondary,
-    contrast:         #fff,
-    shade:            get-color-shade($secondary),
-    tint:             get-color-tint($secondary)
+    base: $secondary,
+    contrast: #fff,
+    shade: get-color-shade($secondary),
+    tint: get-color-tint($secondary),
   ),
   tertiary: (
-    base:             $tertiary,
-    contrast:         #fff,
-    shade:            get-color-shade($tertiary),
-    tint:             get-color-tint($tertiary)
+    base: $tertiary,
+    contrast: #fff,
+    shade: get-color-shade($tertiary),
+    tint: get-color-tint($tertiary),
   ),
   success: (
-    base:             $success,
-    contrast:         #fff,
-    shade:            get-color-shade($success),
-    tint:             get-color-tint($success)
+    base: $success,
+    contrast: #fff,
+    shade: get-color-shade($success),
+    tint: get-color-tint($success),
   ),
   warning: (
-    base:             $warning,
-    contrast:         #fff,
-    shade:            get-color-shade($warning),
-    tint:             get-color-tint($warning)
+    base: $warning,
+    contrast: #fff,
+    shade: get-color-shade($warning),
+    tint: get-color-tint($warning),
   ),
   danger: (
-    base:             $danger,
-    contrast:         #fff,
-    shade:            get-color-shade($danger),
-    tint:             get-color-tint($danger)
+    base: $danger,
+    contrast: #fff,
+    shade: get-color-shade($danger),
+    tint: get-color-tint($danger),
   ),
   light: (
-    base:             $light,
-    contrast:         #000,
-    shade:            get-color-shade($light),
-    tint:             get-color-tint($light)
+    base: $light,
+    contrast: #000,
+    shade: get-color-shade($light),
+    tint: get-color-tint($light),
   ),
   medium: (
-    base:             $medium,
-    contrast:         #fff,
-    shade:            get-color-shade($medium),
-    tint:             get-color-tint($medium)
+    base: $medium,
+    contrast: #fff,
+    shade: get-color-shade($medium),
+    tint: get-color-tint($medium),
   ),
   dark: (
-    base:             $dark,
-    contrast:         #fff,
-    shade:            get-color-shade($dark),
-    tint:             get-color-tint($dark)
-  )
+    base: $dark,
+    contrast: #fff,
+    shade: get-color-shade($dark),
+    tint: get-color-tint($dark),
+  ),
 ) !default;
 
 /// Text step colors are generated based on

core/src/css/structure.scss

@@ -1,6 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
-
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Structure
 // --------------------------------------------------

core/src/css/test/link/basic/index.html

@@ -7,8 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../css/link.ionic.css" rel="stylesheet" />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
@@ -28,7 +27,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding">
+      <ion-content class="ionic-padding-space-m">
         <h3>Standalone (.ionic-link)</h3>
         <div class="links" id="standalone">
           <div><a class="ionic-link" href="#">Link - Default</a></div>

core/src/css/test/typography/basic/typography.e2e.ts

@@ -9,7 +9,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
     test('should apply the globals styles for each semantic tag', async ({ page }) => {
       await page.setContent(
         `
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
         <div>
           <h1>H1: The quick brown fox jumps over the lazy dog</h1>
           <h2>H2: The quick brown fox jumps over the lazy dog</h2>
@@ -32,7 +33,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
     test('should apply the utility classes for each heading', async ({ page }) => {
       await page.setContent(
         `
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
         <div>
           <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
           <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
@@ -52,7 +54,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
     test('should apply the heading classes on ion-text element', async ({ page }) => {
       await page.setContent(
         `
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
         <div>
           <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
           <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
@@ -72,7 +75,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
     test('should apply the utility classes for font weights', async ({ page }) => {
       await page.setContent(
         `
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
         <div>
           <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
           <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
@@ -91,7 +95,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
     test('should apply the utility classes for font display', async ({ page }) => {
       await page.setContent(
         `
-        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
+        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
         <div>
           <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
           <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>

core/src/css/text-alignment.scss

@@ -1,5 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Text Alignment
 // --------------------------------------------------

core/src/css/text-transformation.scss

@@ -1,5 +1,5 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Text Transformation
 // --------------------------------------------------

core/src/css/typography.ionic.scss

@@ -1,90 +0,0 @@
-@use "../foundations/ionic.vars.scss" as tokens;
-/* This import below is temporary, to make sure basic tests have access to all utility-classes */
-@import "../foundations/ionic.utility.scss";
-
-html {
-  font-family: #{tokens.$ionic-font-family};
-  font-size: #{tokens.$ionic-font-size-m};
-  font-weight: #{tokens.$ionic-font-weight-regular};
-
-  line-height: #{tokens.$ionic-font-line-height-m};
-}
-
-/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
-h1,
-.ionic-heading1,
-h2,
-.ionic-heading2,
-h3,
-.ionic-heading3,
-h4,
-.ionic-heading4,
-h5,
-.ionic-heading5,
-h6,
-.ionic-heading6 {
-  color: #{tokens.$ionic-color-neutral-900};
-
-  font-weight: #{tokens.$ionic-font-weight-semi-bold};
-}
-
-h1,
-.ionic-heading1 {
-  font-size: #{tokens.$ionic-font-size-h1};
-
-  line-height: #{tokens.$ionic-font-line-height-xxl};
-}
-
-h2,
-.ionic-heading2 {
-  font-size: #{tokens.$ionic-font-size-h2};
-
-  line-height: #{tokens.$ionic-font-line-height-xl};
-}
-
-h3,
-.ionic-heading3 {
-  font-size: #{tokens.$ionic-font-size-h3};
-
-  line-height: #{tokens.$ionic-font-line-height-xl};
-}
-
-h4,
-.ionic-heading4 {
-  font-size: #{tokens.$ionic-font-size-h4};
-
-  line-height: #{tokens.$ionic-font-line-height-l};
-}
-
-h5,
-.ionic-heading5 {
-  font-size: #{tokens.$ionic-font-size-h5};
-
-  line-height: #{tokens.$ionic-font-line-height-l};
-}
-
-h6,
-.ionic-heading6 {
-  font-size: #{tokens.$ionic-font-size-h6};
-
-  line-height: #{tokens.$ionic-font-line-height-m};
-}
-
-.ionic-display-s {
-  font-size: #{tokens.$ionic-font-size-display-s};
-  font-weight: #{tokens.$ionic-font-weight-regular};
-
-  line-height: #{tokens.$ionic-font-line-height-s};
-}
-
-.ionic-display-m {
-  font-size: #{tokens.$ionic-font-size-display-m};
-  font-weight: #{tokens.$ionic-font-weight-regular};
-
-  line-height: #{tokens.$ionic-font-line-height-m};
-}
-
-/* Common */
-.ionic-font-italic {
-  font-style: italic;
-}

core/src/css/typography.scss

@@ -1,32 +1,32 @@
-@import "../themes/ionic.globals";
-@import "../themes/ionic.mixins";
+@import "../themes/native/native.globals";
+@import "../themes/mixins";
 
 // Typography
 // --------------------------------------------------
 
 /// @prop - Font weight of all headings
-$headings-font-weight:         500 !default;
+$headings-font-weight: 500 !default;
 
 /// @prop - Line height of all headings
-$headings-line-height:         1.2 !default;
+$headings-line-height: 1.2 !default;
 
 /// @prop - Font size of heading level 1
-$h1-font-size:                 dynamic-font(26px) !default;
+$h1-font-size: dynamic-font(26px) !default;
 
 /// @prop - Font size of heading level 2
-$h2-font-size:                 dynamic-font(24px) !default;
+$h2-font-size: dynamic-font(24px) !default;
 
 /// @prop - Font size of heading level 3
-$h3-font-size:                 dynamic-font(22px) !default;
+$h3-font-size: dynamic-font(22px) !default;
 
 /// @prop - Font size of heading level 4
-$h4-font-size:                 dynamic-font(20px) !default;
+$h4-font-size: dynamic-font(20px) !default;
 
 /// @prop - Font size of heading level 5
-$h5-font-size:                 dynamic-font(18px) !default;
+$h5-font-size: dynamic-font(18px) !default;
 
 /// @prop - Font size of heading level 6
-$h6-font-size:                 dynamic-font(16px) !default;
+$h6-font-size: dynamic-font(16px) !default;
 
 html {
   font-family: var(--ion-font-family);
@@ -107,9 +107,9 @@ sup {
 }
 
 sup {
-  top: -.5em;
+  top: -0.5em;
 }
 
 sub {
-  bottom: -.25em;
+  bottom: -0.25em;
 }