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.
angular · Sep 10, 2018 · 9e797b1 · 9e797b1
1 parent 4ddbde9
commit 9e797b1
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-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
@@ -4,11 +4,16 @@
 @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 {
     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
@@ -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
@@ -6,11 +6,16 @@
 @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 {
     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
@@ -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
@@ -187,7 +187,7 @@ export class MatDialog {
    * @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,
@@ -200,10 +200,10 @@ export class MatDialog {
     });
 
     if (dialogConfig.backdropClass) {
-      state.backdropClass = dialogConfig.backdropClass;
+      overlayConfig.backdropClass = dialogConfig.backdropClass;
     }
 
-    return state;
+    return overlayConfig;
   }
 
   /**