CR

core/src/components/modal/animations/sheet.ts

@@ -1,7 +1,7 @@
 import { createAnimation } from '@utils/animation/animation';
 
 import type { ModalAnimationOptions } from '../modal-interface';
-import { getBackdropValueForSheet, staticBackdropOpacity } from '../utils';
+import { getBackdropValueForSheet } from '../utils';
 
 export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
   const { currentBreakpoint, backdropBreakpoint } = opts;
@@ -13,14 +13,14 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
    */
   const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!;
 
-  const initialBackdrop =
-    opts.theme === 'ionic'
-      ? staticBackdropOpacity
-      : shouldShowBackdrop
-      ? `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`
-      : '0';
+  let initialBackdropOpacity = '0';
+  if (opts.initialBackdropOpacity) {
+    initialBackdropOpacity = opts.initialBackdropOpacity;
+  } else if (shouldShowBackdrop) {
+    initialBackdropOpacity = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`;
+  }
 
-  const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
+  const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdropOpacity);
 
   if (shouldShowBackdrop) {
     backdropAnimation
@@ -46,18 +46,17 @@ export const createSheetLeaveAnimation = (opts: ModalAnimationOptions) => {
    * is defined, so we need to account for that offset by figuring out
    * what the current backdrop value should be.
    */
-  const backdropValue =
-    opts.theme === 'ionic'
-      ? staticBackdropOpacity
-      : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint!, backdropBreakpoint!)})`;
+  const backdropOpacityValue = opts.backdropOpacityValue
+    ? opts.backdropOpacityValue
+    : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint!, backdropBreakpoint!)})`;
 
   const defaultBackdrop = [
-    { offset: 0, opacity: backdropValue },
+    { offset: 0, opacity: backdropOpacityValue },
     { offset: 1, opacity: 0 },
   ];
 
   const customBackdrop = [
-    { offset: 0, opacity: backdropValue },
+    { offset: 0, opacity: backdropOpacityValue },
     { offset: backdropBreakpoint!, opacity: 0 },
     { offset: 1, opacity: 0 },
   ];

core/src/components/modal/gestures/sheet.ts

@@ -72,13 +72,19 @@ export const createSheetGesture = (
     { offset: 1, opacity: staticBackdropOpacity },
   ];
 
+  let backdropKeyframes = defaultBackdrop;
+  if (theme === 'ionic') {
+    backdropKeyframes = ionicThemeBackdrop;
+  } else if (backdropBreakpoint !== 0) {
+    backdropKeyframes = customBackdrop;
+  }
+
   const SheetDefaults = {
     WRAPPER_KEYFRAMES: [
       { offset: 0, transform: 'translateY(0%)' },
       { offset: 1, transform: 'translateY(100%)' },
     ],
-    BACKDROP_KEYFRAMES:
-      theme === 'ionic' ? ionicThemeBackdrop : backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
+    BACKDROP_KEYFRAMES: backdropKeyframes,
   };
 
   const contentEl = baseEl.querySelector('ion-content');

core/src/components/modal/modal-interface.ts

@@ -1,6 +1,6 @@
 import type { OverlayOptions } from '@utils/overlays-interface';
 
-import type { ComponentProps, ComponentRef, FrameworkDelegate, Theme } from '../../interface';
+import type { ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
 
 export interface ModalOptions<T extends ComponentRef = ComponentRef> extends OverlayOptions {
   component: T;
@@ -27,7 +27,8 @@ export interface ModalAnimationOptions {
   presentingEl?: HTMLElement;
   currentBreakpoint?: number;
   backdropBreakpoint?: number;
-  theme: Theme;
+  initialBackdropOpacity?: string;
+  backdropOpacityValue?: string;
 }
 
 export interface ModalBreakpointChangeEventDetail {

core/src/components/modal/modal.tsx

@@ -44,7 +44,7 @@ import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
 import { createSheetGesture } from './gestures/sheet';
 import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
 import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './modal-interface';
-import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
+import { setCardStatusBarDark, setCardStatusBarDefault, staticBackdropOpacity } from './utils';
 
 // TODO(FW-2832): types
 
@@ -83,6 +83,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private inheritedAttributes: Attributes = {};
   private statusBarStyle?: StatusBarStyle;
 
+  get theme(): Theme {
+    return getIonTheme(this);
+  }
+
   private inline = false;
   private workingDelegate?: FrameworkDelegate;
 
@@ -574,7 +578,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
-      theme: getIonTheme(this),
+      initialBackdropOpacity: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
+      backdropOpacityValue: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
     });
 
     /* tslint:disable-next-line */
@@ -792,7 +797,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
         presentingEl: presentingElement,
         currentBreakpoint: this.currentBreakpoint ?? this.initialBreakpoint,
         backdropBreakpoint: this.backdropBreakpoint,
-        theme: getIonTheme(this),
+        initialBackdropOpacity: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
+        backdropOpacityValue: this.theme === 'ionic' ? staticBackdropOpacity : undefined,
       }
     );
 
@@ -1048,14 +1054,12 @@ interface ModalOverlayOptions {
    */
   currentBreakpoint?: number;
   /**
-   * The point after which the backdrop will being
+   * The point after which the backdrop will begin
    * to fade in when using a sheet modal.
    */
   backdropBreakpoint: number;
-  /**
-   * The theme used by the sheet modal
-   */
-  theme: Theme;
+  initialBackdropOpacity?: string;
+  backdropOpacityValue?: string;
 }
 
 type ModalPresentOptions = ModalOverlayOptions;

core/src/components/modal/utils.ts

@@ -1,7 +1,7 @@
 import { win } from '@utils/browser';
 import { StatusBar, Style } from '@utils/native/status-bar';
 
-export const staticBackdropOpacity = 0.7;
+export const staticBackdropOpacity = '0.7';
 
 /**
  * Use y = mx + b to