fix(material-experimental/mdc-snack-bar): support dark themes (#19926)

Sets up the variables so that we can generate the correct colors for dark themes.

Also updates us to the latest MDC canary which has a relevant fix for `mat-table`.

Author: crisbeto

package.json

@@ -57,7 +57,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "7.0.0-canary.7461aad68.0",
+    "material-components-web": "8.0.0-canary.d850de590.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",

src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss

@@ -1,11 +1,36 @@
 @import '../mdc-helpers/mdc-helpers';
+@import '@material/theme/functions.import';
+@import '@material/snackbar/variables.import';
 @import '@material/snackbar/mixins.import';
 
 @mixin mat-mdc-snack-bar-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
+
+  $orig-mdc-snackbar-fill-color: $mdc-snackbar-fill-color;
+  $orig-mdc-snackbar-label-ink-color: $mdc-snackbar-label-ink-color;
+  $orig-mdc-snackbar-dismiss-ink-color: $mdc-snackbar-dismiss-ink-color;
+
   @include mat-using-mdc-theme($config) {
+    $mdc-snackbar-fill-color: mix(
+      mdc-theme-prop-value(on-surface),
+      mdc-theme-prop-value(surface),
+      80%
+    ) !global;
+    $mdc-snackbar-label-ink-color: rgba(
+      mdc-theme-prop-value(surface),
+      mdc-theme-text-emphasis(high)
+    ) !global;
+    $mdc-snackbar-dismiss-ink-color: rgba(
+      mdc-theme-prop-value(surface),
+      mdc-theme-text-emphasis(high)
+    ) !global;
+
     @include mdc-snackbar-core-styles($query: $mat-theme-styles-query);
   }
+
+  $mdc-snackbar-fill-color: $orig-mdc-snackbar-fill-color !global;
+  $mdc-snackbar-label-ink-color: $orig-mdc-snackbar-label-ink-color !global;
+  $mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global;
 }
 
 @mixin mat-mdc-snack-bar-typography($config-or-theme) {