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

Author: tanner-reits

core/src/components/modal/modal.scss renamed to core/src/components/modal/modal.common.scss

@@ -1,6 +1,6 @@
-@import "./modal.vars";
+@import "../../themes/mixins.scss";
 
-// Modals
+// Modals: Common Styles
 // --------------------------------------------------
 
 :host {
@@ -29,13 +29,10 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
-  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
-  --background: #{$background-color};
   --box-shadow: none;
-  --backdrop-opacity: 0;
 
   @include position(0, 0, 0, 0);
 
@@ -47,8 +44,6 @@
 
   outline: none;
 
-  color: $modal-text-color;
-
   contain: strict;
 }
 
@@ -90,37 +85,14 @@ ion-backdrop {
   background: transparent;
 }
 
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-small};
-    --ion-safe-area-top: 0px;
-    --ion-safe-area-bottom: 0px;
-    --ion-safe-area-right: 0px;
-    --ion-safe-area-left: 0px;
-  }
-}
-
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-large};
-  }
-}
-
 // Sheet Modal
 // --------------------------------------------------
 
 .modal-handle {
-  @include position(5px, 0px, null, 0px);
-  @include border-radius(8px, 8px, 8px, 8px);
   @include margin(null, auto, null, auto);
 
   position: absolute;
 
-  width: 36px;
-  height: 5px;
-
   /**
    * This allows the handle to appear
    * on top of user content in WebKit.
@@ -129,8 +101,6 @@ ion-backdrop {
 
   border: 0;
 
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-
   cursor: pointer;
 
   z-index: 11;
@@ -144,9 +114,6 @@ ion-backdrop {
 
     position: absolute;
 
-    width: 36px;
-    height: 5px;
-
     transform: translate(-50%, -50%);
 
     content: "";

core/src/components/modal/modal.ionic.scss

@@ -1,11 +1,15 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./modal";
+@use "./modal.common";
 
 // Ionic Modal
 // --------------------------------------------------
 
 :host {
+  --background: #{globals.$ionic-color-base-white};
+  --box-shadow: #{globals.$ionic-elevation-300};
   --backdrop-opacity: 1;
+
+  color: globals.$ionic-color-neutral-1200;
 }
 
 // Shape
@@ -21,3 +25,20 @@
 :host(.modal-rectangular) {
   --border-radius: #{globals.$ionic-border-radius-0};
 }
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+  @include globals.position(globals.$ionic-space-300, 0px, null, 0px);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
+
+  width: globals.$ionic-scale-1100;
+  height: globals.$ionic-scale-100;
+
+  background-color: globals.$ionic-color-neutral-300;
+}
+
+:host(.modal-sheet) .modal-wrapper {
+  @include globals.border-radius(var(--border-radius), var(--border-radius), 0, 0);
+}

core/src/components/modal/modal.ios.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.ios.vars";
 
 // iOS Modals

core/src/components/modal/modal.md.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.md.vars";
 
 // Material Design Modals

core/src/components/modal/modal.native.scss

@@ -0,0 +1,50 @@
+@use "./modal.common";
+@use "./modal.vars" as vars;
+@forward "./modal.vars.scss";
+
+// Modals: Native Styles
+// --------------------------------------------------
+
+:host {
+  --background: #{vars.$background-color};
+  --border-radius: 0;
+  --backdrop-opacity: 0;
+
+  color: vars.$modal-text-color;
+}
+
+@media only screen and (min-width: vars.$modal-inset-min-width) and (min-height: vars.$modal-inset-min-height-small) {
+  :host {
+    --width: #{vars.$modal-inset-width};
+    --height: #{vars.$modal-inset-height-small};
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
+  }
+}
+
+@media only screen and (min-width: vars.$modal-inset-min-width) and (min-height: vars.$modal-inset-min-height-large) {
+  :host {
+    --width: #{vars.$modal-inset-width};
+    --height: #{vars.$modal-inset-height-large};
+  }
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+  @include vars.position(5px, 0px, null, 0px);
+  @include vars.border-radius(8px, 8px, 8px, 8px);
+
+  width: 36px;
+  height: 5px;
+
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+
+  &::before {
+    width: 36px;
+    height: 5px;
+  }
+}

core/src/components/modal/test/shape/index.html

@@ -14,10 +14,6 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-modal {
-        --box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
-      }
-
       .container {
         margin-bottom: 20px;
       }