refactor(material/dialog): simplify structural styles (#29068)

Simplifies the dialog styles to make them smaller and easier to follow.

(cherry picked from commit cd5832d)

Author: crisbeto

src/material/core/tokens/m2/mat/_dialog.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 
@@ -8,6 +9,7 @@ $prefix: (mat, dialog);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
     container-max-width: 80vw,
     container-small-max-width: 80vw,
     container-min-width: 0,

src/material/core/tokens/m2/mdc/_dialog.scss

@@ -13,15 +13,13 @@ $prefix: (mdc, dialog);
 // our CSS.
 @function get-unthemable-tokens() {
   @return (
-    // Height of the container's elevation.
-    container-elevation: 24,
-    // Color of the elevation shadow.
-    container-shadow-color: #000,
     // Border radius of the container.
     container-shape: 4px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
+    container-elevation: null,
+    container-shadow-color: null,
     with-divider-divider-height: null,
     with-divider-divider-color: null,
     with-icon-icon-size: null,

src/material/core/tokens/m3/mat/_dialog.scss

@@ -10,6 +10,7 @@ $prefix: (mat, dialog);
 /// @return {Map} A set of custom tokens for the dialog
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
+    container-elevation-shadow: token-utils.hardcode(none, $exclude-hardcoded),
     container-max-width: token-utils.hardcode(560px, $exclude-hardcoded),
     container-small-max-width: token-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded),
     container-min-width: token-utils.hardcode(280px, $exclude-hardcoded),

src/material/core/tokens/m3/mdc/_dialog.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -20,20 +19,5 @@ $prefix: (mdc, dialog);
     headline-weight: subhead-weight,
   ));
 
-  @if map.get($tokens, container-elevation) != null {
-    $tokens: map.merge($tokens, (
-      // The spec has the dialog at an elevation of 3 which is consistent with the current
-      // version of the tokens (0_161), however both the designs and MDC's implementation
-      // have the elevation set to 0. Set it manually to 0 here since the value in the
-      // exported tokens is likely outdated.
-      container-elevation: 0,
-
-      // This color needs to be supplied for MDC to produce the shadow. Technically we don't
-      // have to provide it since the elevation is set to 0 above, but we do it in case
-      // the value changes in the future.
-      container-shadow-color: #000,
-    ));
-  }
-
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

src/material/dialog/_dialog-theme.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
@@ -16,7 +15,8 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-unthemable-tokens());
       @include token-utils.create-token-values(
         tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
     }
@@ -29,7 +29,8 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-color-tokens($theme));
       @include token-utils.create-token-values(
         tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
     }
@@ -42,7 +43,8 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-typography-tokens($theme));
       @include token-utils.create-token-values(
         tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
     }
@@ -88,7 +90,8 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
-    @include mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mdc-dialog.$prefix, map.get($tokens, tokens-mdc-dialog.$prefix));
     @include token-utils.create-token-values(
       tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
   }

src/material/dialog/_mdc-dialog-structure-overrides.scss

@@ -1,4 +1,4 @@
-<div class="mdc-dialog__container">
+<div class="mat-mdc-dialog-inner-container mdc-dialog__container">
   <div class="mat-mdc-dialog-surface mdc-dialog__surface">
     <ng-template cdkPortalOutlet />
   </div>