From bd22926c4995b2d953a08aac7125241929f78f9e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 8 Oct 2019 16:42:37 -0400
Subject: [PATCH] feat(overlays): add global backdrop opacity variable for
 animations (#19533)

adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
---
 core/api.txt                                  |  6 ++++
 .../action-sheet/action-sheet.ios.scss        |  1 +
 .../action-sheet/action-sheet.md.scss         |  1 +
 .../components/action-sheet/action-sheet.scss |  2 ++
 .../action-sheet/animations/ios.enter.ts      |  2 +-
 .../action-sheet/animations/ios.leave.ts      |  2 +-
 .../action-sheet/animations/md.enter.ts       |  2 +-
 .../action-sheet/animations/md.leave.ts       |  2 +-
 core/src/components/action-sheet/readme.md    |  1 +
 .../components/action-sheet/test/basic/e2e.ts |  8 +++++
 .../action-sheet/test/basic/index.html        | 11 +++++--
 core/src/components/alert/alert.ios.scss      |  1 +
 core/src/components/alert/alert.md.scss       |  1 +
 core/src/components/alert/alert.scss          |  2 ++
 .../components/alert/animations/ios.enter.ts  |  2 +-
 .../components/alert/animations/ios.leave.ts  |  2 +-
 .../components/alert/animations/md.enter.ts   |  2 +-
 .../components/alert/animations/md.leave.ts   |  2 +-
 core/src/components/alert/readme.md           | 19 ++++++------
 .../loading/animations/ios.enter.ts           |  2 +-
 .../loading/animations/ios.leave.ts           |  2 +-
 .../components/loading/animations/md.enter.ts |  2 +-
 .../components/loading/animations/md.leave.ts |  2 +-
 core/src/components/loading/loading.ios.scss  |  1 +
 core/src/components/loading/loading.md.scss   |  1 +
 core/src/components/loading/loading.scss      |  2 ++
 core/src/components/loading/readme.md         | 21 +++++++-------
 .../components/modal/animations/ios.enter.ts  |  2 +-
 .../components/modal/animations/ios.leave.ts  |  2 +-
 .../components/modal/animations/md.enter.ts   |  2 +-
 .../components/modal/animations/md.leave.ts   |  2 +-
 core/src/components/modal/modal.ios.scss      |  4 +++
 core/src/components/modal/modal.md.scss       |  4 +++
 core/src/components/modal/modal.scss          |  1 +
 core/src/components/modal/readme.md           | 27 ++++++++---------
 .../components/picker/animations/ios.enter.ts |  2 +-
 .../components/picker/animations/ios.leave.ts |  2 +-
 core/src/components/picker/picker.ios.scss    |  1 +
 core/src/components/picker/picker.md.scss     |  1 +
 core/src/components/picker/picker.scss        |  2 ++
 core/src/components/picker/readme.md          | 29 ++++++++++---------
 .../popover/animations/ios.enter.ts           |  2 +-
 .../popover/animations/ios.leave.ts           |  2 +-
 .../components/popover/animations/md.enter.ts |  2 +-
 .../components/popover/animations/md.leave.ts |  2 +-
 core/src/components/popover/popover.ios.scss  |  1 +
 core/src/components/popover/popover.md.scss   |  1 +
 core/src/components/popover/popover.scss      |  2 ++
 core/src/components/popover/readme.md         | 21 +++++++-------
 49 files changed, 136 insertions(+), 80 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index ca1eb1ea89..dcb44b77d5 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 69f77b5340..afe9f36cf2 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/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;
 }
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 79d577d9b5..f080453ea9 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index b7230b5adb..f93646cea3 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/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;
diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
index 40fd7abda8..9e4363869d 100644
--- a/core/src/components/action-sheet/animations/ios.enter.ts
+++ b/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')!)
diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
index 52e4ff4523..414ebfebfc 100644
--- a/core/src/components/action-sheet/animations/ios.leave.ts
+++ b/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')!)
diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
index 3ad476c8aa..97288a10d3 100644
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/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')!)
diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
index 468b79f501..b3251b74f6 100644
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/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')!)
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 708b67cc30..f916b63d01 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/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     |
diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts
index 685541bbc1..d96982cd3f 100644
--- a/core/src/components/action-sheet/test/basic/e2e.ts
+++ b/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);
+});
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index 52bd855f5c..73199c8e28 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/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',
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index e950d572b8..bcf7426693 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/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;
 }
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
index db9aedfb3c..dcdd95c073 100644
--- a/core/src/components/alert/alert.md.scss
+++ b/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;
 }
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 23f66a0ea7..e62adb3890 100644
--- a/core/src/components/alert/alert.scss
+++ b/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;
diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts
index bbc5f8afaf..fcddaf0a02 100644
--- a/core/src/components/alert/animations/ios.enter.ts
+++ b/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')!)
diff --git a/core/src/components/alert/animations/ios.leave.ts b/core/src/components/alert/animations/ios.leave.ts
index 84a4cdfce3..975370ee22 100644
--- a/core/src/components/alert/animations/ios.leave.ts
+++ b/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')!)
diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
index d9a6032cd7..f682443f95 100644
--- a/core/src/components/alert/animations/md.enter.ts
+++ b/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')!)
diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
index 2c12c3b3d8..647fee397f 100644
--- a/core/src/components/alert/animations/md.leave.ts
+++ b/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')!)
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index a432d5c68b..451a95aa09 100644
--- a/core/src/components/alert/readme.md
+++ b/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
diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
index b01dace428..48a7b32d07 100644
--- a/core/src/components/loading/animations/ios.enter.ts
+++ b/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')!)
diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
index a36395c263..cb15a1a017 100644
--- a/core/src/components/loading/animations/ios.leave.ts
+++ b/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')!)
diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts
index 989537c0cd..15c6190b60 100644
--- a/core/src/components/loading/animations/md.enter.ts
+++ b/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')!)
diff --git a/core/src/components/loading/animations/md.leave.ts b/core/src/components/loading/animations/md.leave.ts
index ba86ba8447..c6f27ecf76 100644
--- a/core/src/components/loading/animations/md.leave.ts
+++ b/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')!)
diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss
index 828b374473..52217e4b38 100644
--- a/core/src/components/loading/loading.ios.scss
+++ b/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;
 
diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss
index 03a9fd3fee..f913723fe7 100644
--- a/core/src/components/loading/loading.md.scss
+++ b/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;
 
diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
index 3e51fbdb3c..d95f3175d6 100644
--- a/core/src/components/loading/loading.scss
+++ b/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;
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 2bbf9f09e0..8d9ff55aab 100644
--- a/core/src/components/loading/readme.md
+++ b/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
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index cb6d135f5d..3c6ce85172 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/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')!)
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index 2728a6f8fb..13a06a028d 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/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!)
diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts
index 15ae0be989..f47a670b67 100644
--- a/core/src/components/modal/animations/md.enter.ts
+++ b/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')!)
diff --git a/core/src/components/modal/animations/md.leave.ts b/core/src/components/modal/animations/md.leave.ts
index 9e527da240..1d655eb909 100644
--- a/core/src/components/modal/animations/md.leave.ts
+++ b/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)
diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 8c8770d979..540e32529b 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/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};
diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss
index aabfa3d6f7..a32d493717 100644
--- a/core/src/components/modal/modal.md.scss
+++ b/core/src/components/modal/modal.md.scss
@@ -5,6 +5,10 @@
 // Material Design Modals
 // --------------------------------------------------
 
+:host {
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+}
+
 @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
   :host {
     --border-radius: 2px;
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index d48094f485..2399f8c529 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -20,6 +20,7 @@
    * @prop --height: Height of the modal
    * @prop --max-height: Maximum height of the modal
    *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --width: 100%;
   --min-width: auto;
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 1f586ad7d9..27798674df 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -395,19 +395,20 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name              | Description                        |
-| ----------------- | ---------------------------------- |
-| `--background`    | Background of the modal content    |
-| `--border-color`  | Border color of the modal content  |
-| `--border-radius` | Border radius of the modal content |
-| `--border-style`  | Border style of the modal content  |
-| `--border-width`  | Border width of the modal content  |
-| `--height`        | Height of the modal                |
-| `--max-height`    | Maximum height of the modal        |
-| `--max-width`     | Maximum width of the modal         |
-| `--min-height`    | Minimum height of the modal        |
-| `--min-width`     | Minimum width of the modal         |
-| `--width`         | Width of the modal                 |
+| Name                 | Description                        |
+| -------------------- | ---------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop            |
+| `--background`       | Background of the modal content    |
+| `--border-color`     | Border color of the modal content  |
+| `--border-radius`    | Border radius of the modal content |
+| `--border-style`     | Border style of the modal content  |
+| `--border-width`     | Border width of the modal content  |
+| `--height`           | Height of the modal                |
+| `--max-height`       | Maximum height of the modal        |
+| `--max-width`        | Maximum width of the modal         |
+| `--min-height`       | Minimum height of the modal        |
+| `--min-width`        | Minimum width of the modal         |
+| `--width`            | Width of the modal                 |
 
 
 ## Dependencies
diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts
index 093d80ec58..8c7f17b80e 100644
--- a/core/src/components/picker/animations/ios.enter.ts
+++ b/core/src/components/picker/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.26);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.picker-wrapper')!)
diff --git a/core/src/components/picker/animations/ios.leave.ts b/core/src/components/picker/animations/ios.leave.ts
index 106df59b17..d9f388a854 100644
--- a/core/src/components/picker/animations/ios.leave.ts
+++ b/core/src/components/picker/animations/ios.leave.ts
@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.26, 0.01);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.picker-wrapper')!)
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index 469cafbaa3..effa4969e0 100644
--- a/core/src/components/picker/picker.ios.scss
+++ b/core/src/components/picker/picker.ios.scss
@@ -9,6 +9,7 @@
   --border-width: #{1px 0 0};
   --border-color: #{$picker-ios-border-color};
   --height: #{$picker-ios-height};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
 
   color: $picker-ios-option-text-color;
 }
diff --git a/core/src/components/picker/picker.md.scss b/core/src/components/picker/picker.md.scss
index 0b0edfc1b5..347d0b50d3 100644
--- a/core/src/components/picker/picker.md.scss
+++ b/core/src/components/picker/picker.md.scss
@@ -9,6 +9,7 @@
   --border-width: #{$hairlines-width 0 0};
   --border-color: #{$picker-md-border-color};
   --height: #{$picker-md-height};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
 
   color: $picker-md-option-text-color;
 }
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index 66ddcb0ac0..4c05c82092 100644
--- a/core/src/components/picker/picker.scss
+++ b/core/src/components/picker/picker.scss
@@ -20,6 +20,8 @@
    * @prop --min-height: Minimum height of the picker
    * @prop --height: Height of the picker
    * @prop --max-height: Maximum height of the picker
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --border-radius: 0;
   --border-style: solid;
diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md
index 7b92295cf1..69597a7495 100644
--- a/core/src/components/picker/readme.md
+++ b/core/src/components/picker/readme.md
@@ -89,20 +89,21 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name               | Description                            |
-| ------------------ | -------------------------------------- |
-| `--background`     | Background of the picker               |
-| `--background-rgb` | Background of the picker in rgb format |
-| `--border-color`   | Border color of the picker             |
-| `--border-radius`  | Border radius of the picker            |
-| `--border-style`   | Border style of the picker             |
-| `--border-width`   | Border width of the picker             |
-| `--height`         | Height of the picker                   |
-| `--max-height`     | Maximum height of the picker           |
-| `--max-width`      | Maximum width of the picker            |
-| `--min-height`     | Minimum height of the picker           |
-| `--min-width`      | Minimum width of the picker            |
-| `--width`          | Width of the picker                    |
+| Name                 | Description                            |
+| -------------------- | -------------------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop                |
+| `--background`       | Background of the picker               |
+| `--background-rgb`   | Background of the picker in rgb format |
+| `--border-color`     | Border color of the picker             |
+| `--border-radius`    | Border radius of the picker            |
+| `--border-style`     | Border style of the picker             |
+| `--border-width`     | Border width of the picker             |
+| `--height`           | Height of the picker                   |
+| `--max-height`       | Maximum height of the picker           |
+| `--max-width`        | Maximum width of the picker            |
+| `--min-height`       | Minimum height of the picker           |
+| `--min-width`        | Minimum width of the picker            |
+| `--width`            | Width of the picker                    |
 
 
 ## Dependencies
diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index 43a6510ccd..21ffa93024 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -104,7 +104,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimati
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.08);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.popover-wrapper')!)
diff --git a/core/src/components/popover/animations/ios.leave.ts b/core/src/components/popover/animations/ios.leave.ts
index 8e3bf06beb..20cffbb893 100644
--- a/core/src/components/popover/animations/ios.leave.ts
+++ b/core/src/components/popover/animations/ios.leave.ts
@@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.08, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.popover-wrapper')!)
diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
index 278208b361..308f7e8fc2 100644
--- a/core/src/components/popover/animations/md.enter.ts
+++ b/core/src/components/popover/animations/md.enter.ts
@@ -86,7 +86,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimatio
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 0.32);
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.popover-wrapper')!)
diff --git a/core/src/components/popover/animations/md.leave.ts b/core/src/components/popover/animations/md.leave.ts
index 08335966d9..98c770eee0 100644
--- a/core/src/components/popover/animations/md.leave.ts
+++ b/core/src/components/popover/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('.popover-wrapper')!)
diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss
index fd46b5416b..e89b72b25d 100644
--- a/core/src/components/popover/popover.ios.scss
+++ b/core/src/components/popover/popover.ios.scss
@@ -8,6 +8,7 @@
   --width: #{$popover-ios-width};
   --max-height: #{$popover-ios-max-height};
   --box-shadow: none;
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.08);
 }
 
 .popover-content {
diff --git a/core/src/components/popover/popover.md.scss b/core/src/components/popover/popover.md.scss
index 2b918a699a..e588debfc0 100644
--- a/core/src/components/popover/popover.md.scss
+++ b/core/src/components/popover/popover.md.scss
@@ -8,6 +8,7 @@
   --width: #{$popover-md-width};
   --max-height: #{$popover-md-max-height};
   --box-shadow: #{$popover-md-box-shadow};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
 .popover-content {
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index 80b90cf16d..13f9e7d621 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -15,6 +15,8 @@
    * @prop --min-height: Minimum height of the popover
    * @prop --height: Height of the popover
    * @prop --max-height: Maximum height of the popover
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --background: #{$popover-background-color};
   --min-width: 0;
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index a76ad54101..21643d9ecd 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -156,16 +156,17 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name           | Description                   |
-| -------------- | ----------------------------- |
-| `--background` | Background of the popover     |
-| `--box-shadow` | Box shadow of the popover     |
-| `--height`     | Height of the popover         |
-| `--max-height` | Maximum height of the popover |
-| `--max-width`  | Maximum width of the popover  |
-| `--min-height` | Minimum height of the popover |
-| `--min-width`  | Minimum width of the popover  |
-| `--width`      | Width of the popover          |
+| Name                 | Description                   |
+| -------------------- | ----------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop       |
+| `--background`       | Background of the popover     |
+| `--box-shadow`       | Box shadow of the popover     |
+| `--height`           | Height of the popover         |
+| `--max-height`       | Maximum height of the popover |
+| `--max-width`        | Maximum width of the popover  |
+| `--min-height`       | Minimum height of the popover |
+| `--min-width`        | Minimum width of the popover  |
+| `--width`            | Width of the popover          |
 
 
 ## Dependencies