feat(overlay): make it easier to override backdrop color (#9114)

Previously the dark backdrop color was `rgba(0, 0, 0, 0.6)` to which we also added an opacity of `0.48`. This is hard to reason about, because we've got two stacking opacities that the consumer would have to multiply in order to figure out what the actual color is, in addition to being hard to override. These changes switch to animating the backdrop between 0 and 1, as well as setting the backdrop color to `rgba(0, 0, 0, 0.288)` (0.288 being 0.48 * 0.6).

Fixes #7855.

Author: crisbeto

src/cdk/overlay/_overlay.scss

@@ -6,7 +6,7 @@ $cdk-z-index-overlay: 1000;
 $cdk-z-index-overlay-backdrop: 1000;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.288);
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
@@ -64,7 +64,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     opacity: 0;
 
     &.cdk-overlay-backdrop-showing {
-      opacity: 0.48;
+      opacity: 1;
     }
   }