feat(overlays): add global backdrop opacity variable for animations

core/api.txt

@@ -19,6 +19,7 @@ ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
+ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
 ion-action-sheet,css-prop,--background-activated
 ion-action-sheet,css-prop,--background-selected
@@ -57,6 +58,7 @@ ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertDidPresent,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertWillPresent,void,true
+ion-alert,css-prop,--backdrop-opacity
 ion-alert,css-prop,--background
 ion-alert,css-prop,--height
 ion-alert,css-prop,--max-height
@@ -589,6 +591,7 @@ ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingDidPresent,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingWillPresent,void,true
+ion-loading,css-prop,--backdrop-opacity
 ion-loading,css-prop,--background
 ion-loading,css-prop,--height
 ion-loading,css-prop,--max-height
@@ -684,6 +687,7 @@ ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalDidPresent,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalWillPresent,void,true
+ion-modal,css-prop,--backdrop-opacity
 ion-modal,css-prop,--background
 ion-modal,css-prop,--border-color
 ion-modal,css-prop,--border-radius
@@ -754,6 +758,7 @@ ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerDidPresent,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerWillPresent,void,true
+ion-picker,css-prop,--backdrop-opacity
 ion-picker,css-prop,--background
 ion-picker,css-prop,--background-rgb
 ion-picker,css-prop,--border-color
@@ -793,6 +798,7 @@ ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverDidPresent,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverWillPresent,void,true
+ion-popover,css-prop,--backdrop-opacity
 ion-popover,css-prop,--background
 ion-popover,css-prop,--box-shadow
 ion-popover,css-prop,--height

core/src/components/action-sheet/action-sheet.ios.scss

@@ -8,6 +8,7 @@
   --background: #{$action-sheet-ios-background-color};
   --background-selected: #{$action-sheet-ios-button-background-selected};
   --background-activated: #{$action-sheet-ios-button-background-activated};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 
   text-align: $action-sheet-ios-text-align;
 }

core/src/components/action-sheet/action-sheet.md.scss

@@ -8,6 +8,7 @@
   --background: #{$action-sheet-md-background-color};
   --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
   --background-activated: var(--background);
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
 .action-sheet-title {

core/src/components/action-sheet/action-sheet.scss

@@ -18,6 +18,8 @@
    * @prop --min-height: Minimum height of the action sheet
    * @prop --height: height of the action sheet
    * @prop --max-height: Maximum height of the action sheet
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --color: initial;
   --min-width: auto;

core/src/components/action-sheet/animations/ios.enter.ts

@@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.4);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/action-sheet/animations/ios.leave.ts

@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.4, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/action-sheet/animations/md.enter.ts

@@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.32);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/action-sheet/animations/md.leave.ts

@@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/action-sheet/readme.md

@@ -321,6 +321,7 @@ Type: `Promise<void>`
 
 | Name                     | Description                                        |
 | ------------------------ | -------------------------------------------------- |
+| `--backdrop-opacity`     | Opacity of the backdrop                            |
 | `--background`           | Background of the action sheet group               |
 | `--background-activated` | Background of the action sheet button when pressed |
 | `--background-selected`  | Background of the selected action sheet button     |

core/src/components/action-sheet/test/basic/e2e.ts

@@ -34,6 +34,10 @@ test('action-sheet: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
 });
 
+test('action-sheet: basic, custom backdrop', async () => {
+  await testActionSheet(DIRECTORY, '#customBackdrop');
+});
+
 /**
  * RTL Tests
  */
@@ -69,3 +73,7 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
 test('action-sheet:rtl: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
 });
+
+test('action-sheet:rtl: basic, custom backdrop', async () => {
+  await testActionSheet(DIRECTORY, '#customBackdrop', true);
+});

core/src/components/action-sheet/test/basic/index.html

@@ -28,6 +28,7 @@
       <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
       <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
       <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
     </ion-content>
 
   </ion-app>
@@ -49,6 +50,10 @@
       --height: 325px;
     }
 
+    .custom-backdrop {
+      --ion-backdrop-opacity: 1;
+    }
+
   </style>
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@@ -146,10 +151,12 @@
       await actionSheetElement.present();
     }
 
-    async function presentWithCssClass() {
+    async function presentWithCssClass(classList) {
+      const addClass = classList ? classList : "my-color-class my-custom-class";
+
       const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Custom Css Class",
-        cssClass: "my-color-class my-custom-class",
+        cssClass: addClass,
         buttons: [
           {
             text: 'Add to Favorites',

core/src/components/alert/alert.ios.scss

@@ -7,6 +7,7 @@
 :host {
   --background: #{$alert-ios-background-color};
   --max-width: #{$alert-ios-max-width};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
 
   font-size: $alert-ios-font-size;
 }

core/src/components/alert/alert.md.scss

@@ -7,6 +7,7 @@
 :host {
   --background: #{$alert-md-background-color};
   --max-width: #{$alert-md-max-width};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 
   font-size: $alert-md-font-size;
 }

core/src/components/alert/alert.scss

@@ -14,6 +14,8 @@
    * @prop --min-height: Minimum height of the alert
    * @prop --height: Height of the alert
    * @prop --max-height: Maximum height of the alert
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --min-width: #{$alert-min-width};
   --width: auto;

core/src/components/alert/animations/ios.enter.ts

@@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.3);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

core/src/components/alert/animations/ios.leave.ts

@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.3, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

core/src/components/alert/animations/md.enter.ts

@@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.32);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

core/src/components/alert/animations/md.leave.ts

@@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

core/src/components/alert/readme.md

@@ -1097,15 +1097,16 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name           | Description                 |
-| -------------- | --------------------------- |
-| `--background` | Background of the alert     |
-| `--height`     | Height of the alert         |
-| `--max-height` | Maximum height of the alert |
-| `--max-width`  | Maximum width of the alert  |
-| `--min-height` | Minimum height of the alert |
-| `--min-width`  | Minimum width of the alert  |
-| `--width`      | Width of the alert          |
+| Name                 | Description                 |
+| -------------------- | --------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop     |
+| `--background`       | Background of the alert     |
+| `--height`           | Height of the alert         |
+| `--max-height`       | Maximum height of the alert |
+| `--max-width`        | Maximum width of the alert  |
+| `--min-height`       | Minimum height of the alert |
+| `--min-width`        | Minimum width of the alert  |
+| `--width`            | Width of the alert          |
 
 
 ## Dependencies

core/src/components/loading/animations/ios.enter.ts

@@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.3);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

core/src/components/loading/animations/ios.leave.ts

@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.3, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

core/src/components/loading/animations/md.enter.ts

@@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.32);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

core/src/components/loading/animations/md.leave.ts

@@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

core/src/components/loading/loading.ios.scss

@@ -9,6 +9,7 @@
   --max-width: #{$loading-ios-max-width};
   --max-height: #{$loading-ios-max-height};
   --spinner-color: #{$loading-ios-spinner-color};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
 
   color: $loading-ios-text-color;
 

core/src/components/loading/loading.md.scss

@@ -9,6 +9,7 @@
   --max-width: #{$loading-md-max-width};
   --max-height: #{$loading-md-max-height};
   --spinner-color: #{$loading-md-spinner-color};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 
   color: $loading-md-text-color;
 

core/src/components/loading/loading.scss

@@ -16,6 +16,8 @@
    * @prop --max-height: Maximum height of the loading dialog
    *
    * @prop --spinner-color: Color of the loading spinner
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --min-width: auto;
   --width: auto;

core/src/components/loading/readme.md

@@ -242,16 +242,17 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name              | Description                          |
-| ----------------- | ------------------------------------ |
-| `--background`    | Background of the loading dialog     |
-| `--height`        | Height of the loading dialog         |
-| `--max-height`    | Maximum height of the loading dialog |
-| `--max-width`     | Maximum width of the loading dialog  |
-| `--min-height`    | Minimum height of the loading dialog |
-| `--min-width`     | Minimum width of the loading dialog  |
-| `--spinner-color` | Color of the loading spinner         |
-| `--width`         | Width of the loading dialog          |
+| Name                 | Description                          |
+| -------------------- | ------------------------------------ |
+| `--backdrop-opacity` | Opacity of the backdrop              |
+| `--background`       | Background of the loading dialog     |
+| `--height`           | Height of the loading dialog         |
+| `--max-height`       | Maximum height of the loading dialog |
+| `--max-width`        | Maximum width of the loading dialog  |
+| `--min-height`       | Minimum height of the loading dialog |
+| `--min-width`        | Minimum width of the loading dialog  |
+| `--spinner-color`    | Color of the loading spinner         |
+| `--width`            | Width of the loading dialog          |
 
 
 ## Dependencies

core/src/components/modal/animations/ios.enter.ts

@@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.4);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.modal-wrapper')!)

core/src/components/modal/animations/ios.leave.ts

@@ -13,7 +13,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.4, 0.0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0.0);
 
   wrapperAnimation
     .addElement(wrapperEl!)

core/src/components/modal/animations/md.enter.ts

@@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.32);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.modal-wrapper')!)

core/src/components/modal/animations/md.leave.ts

@@ -12,7 +12,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0.0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0.0);
 
   wrapperAnimation
     .addElement(wrapperEl)

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

@@ -4,6 +4,10 @@
 // iOS Modals
 // --------------------------------------------------
 
+:host {
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
+}
+
 @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
   :host {
     --border-radius: #{$modal-ios-border-radius};