feat(material-experimental/mdc-dialog): switch to new theming api (#23620) (#24521)

Author: andrewseguin

src/material-experimental/mdc-dialog/_dialog-theme.scss

@@ -1,20 +1,56 @@
+@use 'sass:map';
 @use '@material/dialog' as mdc-dialog;
+@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography' as mdc-typography;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
+
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    .mat-mdc-dialog-container {
+      $surface: mdc-theme-color.$surface;
+      $on-surface: mdc-theme-color.$on-surface;
+      $text-emphasis-high: mdc-theme-color.text-emphasis(high);
+      $text-emphasis-medium: mdc-theme-color.text-emphasis(medium);
+
+      @include mdc-dialog-theme.theme((
+        container-color: $surface,
+        container-elevation: 24,
+        container-shadow-color: $on-surface,
+        with-divider-divider-color: rgba($on-surface, mdc-dialog.$scroll-divider-opacity),
+        subhead-color: rgba($on-surface, $text-emphasis-high),
+        supporting-text-color: rgba($on-surface, $text-emphasis-medium),
+      ));
+    }
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    .mat-mdc-dialog-container {
+      $styles: mdc-typography.$styles;
+      $headline6: map.get($styles, headline6);
+
+      @include mdc-dialog-theme.theme((
+        subhead-font: map.get($headline6, font-family),
+        subhead-line-height: map.get($styles, headline6, line-height),
+        subhead-size: map.get($styles, headline6, font-size),
+        subhead-weight: map.get($styles, headline6, font-weight),
+        subhead-tracking: map.get($styles, headline6, letter-spacing),
+
+        supporting-text-font: map.get($styles, body1, font-family),
+        supporting-text-line-height: map.get($styles, body1, line-height),
+        supporting-text-size: map.get($styles, body1, font-size),
+        supporting-text-weight: map.get($styles, body1, font-weight),
+        supporting-text-tracking: map.get($styles, body1, letter-spacing),
+      ));
+    }
   }
 }
 

src/material-experimental/mdc-dialog/dialog.scss

@@ -1,7 +1,33 @@
 @use '@material/dialog' as mdc-dialog;
+@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '../mdc-helpers/mdc-helpers';
 @use './mdc-dialog-structure-overrides';
 
+// Theme map with values for variables that will be overriden in the theme.
+// MDC's theming system requires non-null values for the slots to be inserted
+// and included as default values.
+$_dialog-initial-theme: (
+  // Color
+  container-color: white,
+  container-elevation: 24,
+  container-shadow-color: black,
+  with-divider-divider-color: black,
+  subhead-color: black,
+  supporting-text-color: black,
+
+  // Typography
+  subhead-font: 'Arial',
+  subhead-line-height: 14px,
+  subhead-size: 14px,
+  subhead-weight: 500,
+  subhead-tracking: 1px,
+  supporting-text-font: 'Arial',
+  supporting-text-line-height: 14px,
+  supporting-text-size: 14px,
+  supporting-text-weight: 500,
+  supporting-text-tracking: 1px,
+);
+
 // Dialog content max height. This has been copied from the standard dialog
 // and is needed to make the dialog content scrollable.
 $mat-dialog-content-max-height: 65vh !default;
@@ -16,6 +42,12 @@ $mat-dialog-button-horizontal-margin: 8px !default;
 @include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
   $mat-dialog-content-max-height);
 
+// Apply the theming slots to the container using an initial set of
+// values that will be overridden in the theme styles.
+.mat-mdc-dialog-container {
+  @include mdc-dialog-theme.theme-styles($_dialog-initial-theme);
+}
+
 // The dialog container is focusable. We remove the default outline shown in browsers.
 .mat-mdc-dialog-container {
   outline: 0;