feat(modal): add default ionic theme styles (#29876)

Issue number: resolves internal

---------

<!-- 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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

No default modal styles for the Ionic theme

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

- Splits common and native styles into separate stylesheets
- Adds default styles to modals for Ionic theme

## 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.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I only applied some of the global styles to the sheet modal vairation
since it is unclear whether the card variation will be used in the
widgets

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

@@ -36,37 +36,68 @@ body.backdrop-no-scroll {
 
 // Modal - Card Style
 // --------------------------------------------------
+html.ionic ion-modal ion-header {
+  box-shadow: none;
+}
+
 /**
- * Card style modal needs additional padding on the
+ * Modals need 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-150;
+html.ionic ion-modal.modal-card ion-header ion-toolbar:first-of-type,
+html.ionic ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
+html.ionic ion-modal ion-footer ion-toolbar:first-of-type {
+  padding-top: globals.$ionic-space-400;
 }
 
 /**
-* Card style modal needs additional padding on the
+* Modals need 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-150;
+html.ionic ion-modal.modal-card ion-header ion-toolbar:last-of-type,
+html.ionic ion-modal.modal-sheet ion-header ion-toolbar:last-of-type,
+html.ionic ion-modal ion-footer ion-toolbar:last-of-type {
+  padding-bottom: globals.$ionic-space-400;
 }
 
 /**
-* Add padding on the left and right
-* of toolbars while accounting for
-* safe area values when in landscape.
+* Add additional padding to the left and right of toolbars while accounting
+* for the safe area insets.
 */
-html.ios ion-modal ion-toolbar {
-  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-200);
-  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-200);
+html.ionic ion-modal ion-toolbar {
+  --padding-start: calc(var(--ion-safe-area-right) + #{globals.$ionic-space-400});
+  --padding-end: calc(var(--ion-safe-area-left) + #{globals.$ionic-space-400});
+}
+
+/**
+* Center an `ion-title` within a modal header. This works around
+* limitations with `:host-context()` not being supported in all browsers.
+*/
+html.ionic ion-modal ion-header ion-toolbar ion-title {
+  @include globals.position(0, null, null, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateZ(0);
+
+  text-align: center;
+}
+
+/**
+* Add padding to the left, right, and bottom of `ion-content`
+* within a modal.
+*/
+html.ionic ion-modal.modal-sheet ion-content {
+  --padding-start: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-400};
+  --padding-bottom: #{globals.$ionic-space-400};
 }
 
 /**
@@ -74,7 +105,7 @@ html.ios ion-modal ion-toolbar {
  * should only have backdrop on first instance.
  */
 @media screen and (min-width: 768px) {
-  html.ios ion-modal.modal-card:first-of-type {
+  html.ionic ion-modal.modal-card:first-of-type {
     --backdrop-opacity: 0.18;
   }
 }
@@ -121,7 +152,7 @@ ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
  * radius no matter the platform.
  * This behavior only applies to card modals.
  */
-html.ios ion-modal.modal-card .ion-page {
+html.ionic ion-modal.modal-card .ion-page {
   border-top-left-radius: var(--border-radius);
 }