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 · Nov 18, 2018 · 5bbb291 · 5bbb291
1 parent 6d7f417
commit 5bbb291
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
 
   /**