From 5bbb291dee12346e32b2453b908121e2e96ba11e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Mon, 10 Sep 2018 21:15:37 +0200
Subject: [PATCH] fix(dialog,bottom-sheet): invert backdrop color on dark
 themes

Similarly to how we handle the sidenav backdrop and ripples, these changes invert the color for the dialog and bottom sheet backdrops in dark themes.
---
 src/dev-app/dialog/dialog-demo.ts             | 2 +-
 src/lib/bottom-sheet/_bottom-sheet-theme.scss | 5 +++++
 src/lib/bottom-sheet/bottom-sheet-config.ts   | 2 +-
 src/lib/dialog/_dialog-theme.scss             | 5 +++++
 src/lib/dialog/dialog-config.ts               | 2 +-
 src/lib/dialog/dialog.ts                      | 6 +++---
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index b3640fa356be..b8149315e00f 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -28,7 +28,7 @@ export class DialogDemo {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,
-    backdropClass: '',
+    backdropClass: defaultDialogConfig.backdropClass,
     width: '',
     height: '',
     minWidth: '',
diff --git a/src/lib/bottom-sheet/_bottom-sheet-theme.scss b/src/lib/bottom-sheet/_bottom-sheet-theme.scss
index 046e11d0b5f7..3c3139029c2e 100644
--- a/src/lib/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/lib/bottom-sheet/_bottom-sheet-theme.scss
@@ -5,12 +5,17 @@
 @mixin mat-bottom-sheet-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $backdrop-color: invert(mat-color($background, card, 0.288));
 
   .mat-bottom-sheet-container {
     @include _mat-theme-elevation(16, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
+
+  .mat-bottom-sheet-backdrop {
+    background: $backdrop-color;
+  }
 }
 
 @mixin mat-bottom-sheet-typography($config) {
diff --git a/src/lib/bottom-sheet/bottom-sheet-config.ts b/src/lib/bottom-sheet/bottom-sheet-config.ts
index 415d8f5aa9f5..ad32d75aff9b 100644
--- a/src/lib/bottom-sheet/bottom-sheet-config.ts
+++ b/src/lib/bottom-sheet/bottom-sheet-config.ts
@@ -32,7 +32,7 @@ export class MatBottomSheetConfig<D = any> {
   hasBackdrop?: boolean = true;
 
   /** Custom class for the backdrop. */
-  backdropClass?: string;
+  backdropClass?: string = 'mat-bottom-sheet-backdrop';
 
   /** Whether the user can use escape or clicking outside to close the bottom sheet. */
   disableClose?: boolean = false;
diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss
index c073788a4c48..afda210c3d6a 100644
--- a/src/lib/dialog/_dialog-theme.scss
+++ b/src/lib/dialog/_dialog-theme.scss
@@ -7,12 +7,17 @@
 @mixin mat-dialog-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $backdrop-color: invert(mat-color($background, card, 0.288));
 
   .mat-dialog-container {
     @include _mat-theme-elevation(24, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
+
+  .mat-dialog-backdrop {
+    background: $backdrop-color;
+  }
 }
 
 @mixin mat-dialog-typography($config) {
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index add3efbe9063..b098f2ecaff0 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -54,7 +54,7 @@ export class MatDialogConfig<D = any> {
   hasBackdrop?: boolean = true;
 
   /** Custom class for the backdrop, */
-  backdropClass?: string = '';
+  backdropClass?: string = 'mat-dialog-backdrop';
 
   /** Whether the user can use escape or clicking on the backdrop to close the modal. */
   disableClose?: boolean = false;
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index e1be22a997ef..65d1ba0797a5 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -189,7 +189,7 @@ export class MatDialog implements OnDestroy {
    * @returns The overlay configuration.
    */
   private _getOverlayConfig(dialogConfig: MatDialogConfig): OverlayConfig {
-    const state = new OverlayConfig({
+    const overlayConfig = new OverlayConfig({
       positionStrategy: this._overlay.position().global(),
       scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),
       panelClass: dialogConfig.panelClass,
@@ -203,10 +203,10 @@ export class MatDialog implements OnDestroy {
     });
 
     if (dialogConfig.backdropClass) {
-      state.backdropClass = dialogConfig.backdropClass;
+      overlayConfig.backdropClass = dialogConfig.backdropClass;
     }
 
-    return state;
+    return overlayConfig;
   }
 
   /**