fix(snack-bar): align theming with spec (#6506)

Author: crisbeto

src/lib/core/theming/_all-theme.scss

@@ -26,7 +26,7 @@
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
-@import '../../snack-bar/simple-snack-bar-theme';
+@import '../../snack-bar/snack-bar-theme';
 @import '../../form-field/form-field-theme';
 
 
@@ -60,5 +60,5 @@
   @include mat-tabs-theme($theme);
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);
-  @include mat-simple-snack-bar-theme($theme);
+  @include mat-snack-bar-theme($theme);
 }

src/lib/core/typography/_all-typography.scss

@@ -25,7 +25,7 @@
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
-@import '../../snack-bar/simple-snack-bar-theme';
+@import '../../snack-bar/snack-bar-theme';
 @import '../option/option-theme';
 @import '../option/optgroup-theme';
 @import '../../form-field/form-field-theme';
@@ -67,5 +67,5 @@
   @include mat-list-typography($config);
   @include mat-option-typography($config);
   @include mat-optgroup-typography($config);
-  @include mat-simple-snack-bar-typography($config);
+  @include mat-snack-bar-typography($config);
 }

src/lib/snack-bar/_simple-snack-bar-theme.scss

@@ -0,0 +1,34 @@
+@import '../core/typography/typography-utils';
+@import '../core/theming/palette';
+
+@mixin mat-snack-bar-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $accent: map-get($theme, accent);
+
+  .mat-snack-bar-container {
+    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
+    color: if($is-dark-theme, $black-87-opacity, white);
+  }
+
+  .mat-simple-snackbar-action {
+    color: if($is-dark-theme, inherit, mat-color($accent));
+  }
+}
+
+@mixin mat-snack-bar-typography($config) {
+  .mat-simple-snackbar {
+    font: {
+      family: mat-font-family($config, body-1);
+      size: mat-font-size($config, body-1);
+    }
+  }
+
+  .mat-simple-snackbar-action {
+    line-height: 1;
+    font: {
+      family: inherit;
+      size: inherit;
+      weight: mat-font-weight($config, button);
+    }
+  }
+}

src/lib/snack-bar/_snack-bar-theme.scss

@@ -7,15 +7,13 @@ $mat-snack-bar-button-margin: 48px !default;
 .mat-simple-snackbar {
   display: flex;
   justify-content: space-between;
-  color: white;
   line-height: 20px;
 }
 
 .mat-simple-snackbar-action {
   @include mat-button-reset;
 
   background: none;
-  color: inherit;
   flex-shrink: 0;
   margin-left: $mat-snack-bar-button-margin;
 

src/lib/snack-bar/simple-snack-bar.scss

@@ -1,14 +1,11 @@
-@import '../core/style/elevation';
 @import '../core/a11y/a11y';
 
 $mat-snack-bar-padding: 14px 24px !default;
 $mat-snack-bar-min-width: 288px !default;
 $mat-snack-bar-max-width: 568px !default;
 
 
-:host {
-  @include mat-elevation(6);
-  background: #323232;
+.mat-snack-bar-container {
   border-radius: 2px;
   box-sizing: content-box;
   display: block;

src/lib/snack-bar/snack-bar-container.scss

@@ -15,7 +15,8 @@ import {
   OnDestroy,
   Renderer2,
   ElementRef,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   trigger,
@@ -53,8 +54,10 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
   templateUrl: 'snack-bar-container.html',
   styleUrls: ['snack-bar-container.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
   host: {
     'role': 'alert',
+    'class': 'mat-snack-bar-container',
     '[@state]': 'animationState',
     '(@state.done)': 'onAnimationEnd($event)'
   },