refactor(material-experimental/mdc-snack-bar): switch to new theming API (#25273)

Reworks the MDC-based snack bar to use the new CSS-variable-based theming APIs.

Author: crisbeto

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

@@ -1,50 +1,31 @@
 @use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/snackbar' as mdc-snackbar;
+@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use 'sass:color';
 @use 'sass:map';
 
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
-
-  $orig-fill-color: mdc-snackbar.$fill-color;
-  $orig-label-ink-color: mdc-snackbar.$label-ink-color;
-  $orig-dismiss-ink-color: mdc-snackbar.$dismiss-ink-color;
+  $is-dark-theme: map.get($config, is-dark);
+  $accent: map.get($config, accent);
 
   @include mat.private-using-mdc-theme($config) {
-    mdc-snackbar.$fill-color: color.mix(
-      mdc-theme-color.prop-value(on-surface),
-      mdc-theme-color.prop-value(surface),
-      80%
-    );
-    mdc-snackbar.$label-ink-color: rgba(
-      mdc-theme-color.prop-value(surface),
-      mdc-theme-color.text-emphasis(high)
-    );
-    mdc-snackbar.$dismiss-ink-color: rgba(
-      mdc-theme-color.prop-value(surface),
-      mdc-theme-color.text-emphasis(high)
-    );
-
-    @include mdc-snackbar.core-styles($query: mat.$private-mdc-theme-styles-query);
-  }
+    .mat-mdc-snack-bar-container {
+      $button-color: if($is-dark-theme, currentColor, mat.get-color-from-palette($accent, text));
+      --mat-mdc-snack-bar-button-color: #{$button-color};
 
-  mdc-snackbar.$fill-color: $orig-fill-color;
-  mdc-snackbar.$label-ink-color: $orig-label-ink-color;
-  mdc-snackbar.$dismiss-ink-color: $orig-dismiss-ink-color;
-
-  // Four classes is necessary to make it higher specificity than the mdc-button theme styles.
-  // This ensures the correct styles will be applied regardless of the order te mixins are
-  // @included.
-  .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action {
-    $is-dark-theme: map.get($config, is-dark);
-    $accent: map.get($config, accent);
-    color: if($is-dark-theme, inherit, mat.get-color-from-palette($accent, text));
-
-    .mat-ripple-element {
-      background-color: currentColor;
-      opacity: 0.1;
+      @include mdc-snackbar-theme.theme((
+        container-color: color.mix(
+          mdc-theme-color.prop-value(on-surface),
+          mdc-theme-color.prop-value(surface),
+          80%
+        ),
+        supporting-text-color: rgba(
+          mdc-theme-color.prop-value(surface),
+          mdc-theme-color.text-emphasis(high)
+        )
+      ));
     }
   }
 }
@@ -53,7 +34,14 @@
   $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
   @include mat.private-using-mdc-typography($config) {
-    @include mdc-snackbar.core-styles($query: mat.$private-mdc-typography-styles-query);
+    .mat-mdc-snack-bar-container {
+      @include mdc-snackbar-theme.theme((
+        supporting-text-font: mat.font-family($config, body-2),
+        supporting-text-line-height: mat.line-height($config, body-2),
+        supporting-text-size: mat.font-size($config, body-2),
+        supporting-text-weight: mat.font-weight($config, body-2),
+      ));
+    }
   }
 }
 

src/material-experimental/mdc-snack-bar/snack-bar-container.scss

@@ -1,23 +1,86 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 @use '@angular/cdk';
-@use '@material/snackbar' as mdc-snackbar;
+@use '@material/snackbar/snackbar' as mdc-snackbar;
+@use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 
 
 @include mat.private-disable-mdc-fallback-declarations {
   // Include the styles without the animations since we
   // reuse the same animation as the non-MDC version.
-  @include mdc-snackbar.core-styles($query: mat.$private-mdc-base-styles-without-animation-query);
+  @include mdc-snackbar.static-styles($query: mat.$private-mdc-base-styles-without-animation-query);
 }
 
-// MDC sets the position as fixed and sets the container on the bottom center of the page (or
-// otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
-// of positions, so we'll defer logic there.
 .mat-mdc-snack-bar-container {
+  @include mat.private-disable-mdc-fallback-declarations {
+    // The styles weren't included in `static-styles` so we need to add them ourselves.
+    @include mdc-snackbar-theme.min-width(
+      mdc-snackbar-theme.$min-width,
+      $query: mat.$private-mdc-base-styles-query
+    );
+    @include mdc-snackbar-theme.max-width(
+      mdc-snackbar-theme.$max-width,
+      $query: mat.$private-mdc-base-styles-query
+    );
+    @include mdc-snackbar-theme.viewport-margin(
+      mdc-snackbar-theme.$viewport-margin-narrow,
+      $query: mat.$private-mdc-base-styles-query
+    );
+
+    // MDC has the `container-elevation` which sounds like it should work, but it ends up applying
+    // the shadow on the outer container instead of the `.mdc-snackbar__surface` which causes
+    // a white background behind the rounded corners, because the `border-radius` is on the
+    // surface element.
+    @include mdc-snackbar-theme.elevation(mdc-snackbar-theme.$elevation);
+
+    @include mdc-snackbar-theme.theme-styles(map.merge(mdc-snackbar-theme.$light-theme, (
+      container-color: inherit,
+      supporting-text-color: inherit,
+      container-shape: mdc-snackbar-theme.$shape-radius,
+      supporting-text-font: inherit,
+      supporting-text-line-height: inherit,
+      supporting-text-size: inherit,
+      supporting-text-weight: inherit,
+
+      // Removed to match the previous appearance.
+      supporting-text-tracking: null,
+
+      // We're not using any of these since the button styling goes through `mat-button`.
+      action-label-text-color: null,
+      action-focus-state-layer-opacity: null,
+      action-hover-state-layer-opacity: null,
+      action-pressed-state-layer-opacity: null,
+      icon-focus-state-layer-opacity: null,
+      icon-hover-state-layer-opacity: null,
+      icon-pressed-state-layer-opacity: null,
+    )));
+  }
+
+  // MDC sets the position as fixed and sets the container on the bottom center of the page (or
+  // otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
+  // of positions, so we'll defer logic there.
   position: static;
 
   @include cdk.high-contrast(active, off) {
     border: solid 1px;
   }
+
+  // The `mat-mdc-button` and `:not(:disabled)` here are redundant, but we need them to increase
+  // the specificity over the button styles that may bleed in from the rest of the app.
+  .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
+    // MDC's `action-label-text-color` should be able to do this, but the button theme has a
+    // higher specificity so it ends up overriding it. Define our own variable that we can
+    // use to control the color instead.
+    color: var(--mat-mdc-snack-bar-button-color, transparent);
+
+    // Darken the ripples in the button so they're visible against the dark background.
+    --mat-mdc-button-persistent-ripple-color: currentColor;
+
+    .mat-ripple-element {
+      background-color: currentColor;
+      opacity: 0.1;
+    }
+  }
 }
 
 // These elements need to have full width using flex layout.