refactor(material/dialog): introduce tokens to help with M3 implementation

Adds the following tokens to the dialog which are required to implement M3:
* `container-max-width` - sets the default `max-width` of the dialog. Previously this was done through JS but was too wide.
* `container-small-max-width` - sets the default `max-width` on a small screen.
* `container-min-width` - minimum width of the dialog.
* `actions-alignment` - default alignment of the actions. Previously this was handled through JS, but we need to align the buttons to the end to match the spec.
* `content-padding` - padding of `mat-dialog-content`.
* `actions-padding` - padding of `mat-dialog-actions`.
* `headline-padding` - padding of `mat-dialog-title`.

Author: crisbeto

src/material-experimental/theming/_m3-density.scss

@@ -73,6 +73,7 @@ $_density-tokens: (
   (mat, checkbox): (
     touch-target-display: (block, block, none, none),
   ),
+  (mat, dialog): (),
   (mat, datepicker): (),
   (mat, divider): (),
   (mat, expansion): (

src/material/core/tokens/m2/_index.scss

@@ -8,6 +8,7 @@
 @use './mat/protected-button' as tokens-mat-protected-button;
 @use './mat/filled-button' as tokens-mat-filled-button;
 @use './mat/outlined-button' as tokens-mat-outlined-button;
+@use './mat/dialog' as tokens-mat-dialog;
 @use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
 @use './mat/card' as tokens-mat-card;
 @use './mat/datepicker' as tokens-mat-datepicker;
@@ -117,6 +118,7 @@
       _get-tokens-for-module($theme, tokens-mat-button-toggle),
       _get-tokens-for-module($theme, tokens-mat-card),
       _get-tokens-for-module($theme, tokens-mat-datepicker),
+      _get-tokens-for-module($theme, tokens-mat-dialog),
       _get-tokens-for-module($theme, tokens-mat-divider),
       _get-tokens-for-module($theme, tokens-mat-expansion),
       _get-tokens-for-module($theme, tokens-mat-fab),

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

@@ -0,0 +1,49 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, dialog);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    container-max-width: 80vw,
+    container-small-max-width: 80vw,
+    container-min-width: 0,
+    actions-alignment: start,
+    actions-padding: 8px,
+    content-padding: 20px 24px,
+    with-actions-content-padding: 20px 24px,
+
+    // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
+    // M3 calls it `headline` which is what we're aligning with.
+    headline-padding: 0 24px 9px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/dialog/_dialog-theme.scss

@@ -2,6 +2,8 @@
 @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;
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -14,6 +16,8 @@
     // 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-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
     }
   }
 }
@@ -25,6 +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-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
     }
   }
 }
@@ -36,6 +42,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-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
     }
   }
 }
@@ -70,5 +78,7 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-dialog-theme.theme(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/dialog-config.ts

@@ -81,7 +81,7 @@ export class MatDialogConfig<D = any> {
   minHeight?: number | string;
 
   /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
-  maxWidth?: number | string = '80vw';
+  maxWidth?: number | string;
 
   /** Max-height of the dialog. If a number is provided, assumes pixel units. */
   maxHeight?: number | string;

src/material/dialog/dialog-content-directives.ts

@@ -157,6 +157,7 @@ export class MatDialogContent {}
   standalone: true,
   host: {
     'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
+    '[class.mat-mdc-dialog-actions-align-start]': 'align === "start"',
     '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
     '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
   },
@@ -165,7 +166,7 @@ export class MatDialogActions {
   /**
    * Horizontal alignment of action buttons.
    */
-  @Input() align?: 'start' | 'center' | 'end' = 'start';
+  @Input() align?: 'start' | 'center' | 'end';
 }
 
 /**

src/material/dialog/dialog-ref.ts

@@ -72,6 +72,9 @@ export class MatDialogRef<T, R = any> {
     this.disableClose = config.disableClose;
     this.id = _ref.id;
 
+    // Used to target panels specifically tied to dialogs.
+    _ref.addPanelClass('mat-mdc-dialog-panel');
+
     // Emit when opening animation completes
     _containerInstance._animationStateChanged
       .pipe(

src/material/dialog/dialog.scss

@@ -2,7 +2,10 @@
 @use '@material/animation/animation' as mdc-animation;
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
+@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/token-utils';
+@use '../core/style/variables';
 @use './mdc-dialog-structure-overrides';
 
 // Dialog content max height. This has been copied from the standard dialog
@@ -52,22 +55,63 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   }
 }
 
+// This needs extra specificity so it doesn't get overwritten by the CDK structural styles.
+.cdk-overlay-pane.mat-mdc-dialog-panel {
+  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+    @include token-utils.create-token-slot(max-width, container-max-width);
+    @include token-utils.create-token-slot(min-width, container-min-width);
+
+    @media (variables.$xsmall) {
+      @include token-utils.create-token-slot(max-width, container-small-max-width);
+    }
+  }
+}
+
+.mat-mdc-dialog-title {
+  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+    @include token-utils.create-token-slot(padding, headline-padding);
+  }
+}
+
 // MDC sets the display behavior for title and actions, but not for content. Since we support
 // using the `mdc-dialog__content` as custom element, we need to set the element to `block`.
 .mat-mdc-dialog-content {
   display: block;
+
+  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+    // These styles need a bit more specificity.
+    .mat-mdc-dialog-container & {
+      @include token-utils.create-token-slot(padding, content-padding);
+    }
+
+    .mat-mdc-dialog-container:has(.mat-mdc-dialog-actions) & {
+      @include token-utils.create-token-slot(padding, with-actions-content-padding);
+    }
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-title + & {
+    padding-top: 0;
+  }
 }
 
 .mat-mdc-dialog-actions {
   // For backwards compatibility, actions align at start by default. MDC usually
   // aligns actions at the end of the container.
-  justify-content: start;
+  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+    @include token-utils.create-token-slot(padding, actions-padding);
+    @include token-utils.create-token-slot(justify-content, actions-alignment);
+  }
+
+  // .mat-mdc-dialog-actions-align-{start|center|end} are set by directive input "align"
+  // [align='start'], [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-mdc-dialog-actions-align-start, &[align='start'] {
+    justify-content: start;
+  }
 
-  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
-  // [align='center'] and [align='right'] are kept for backwards compability
   &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+
   &.mat-mdc-dialog-actions-align-end, &[align='end'] {
     justify-content: flex-end;
   }

src/material/dialog/dialog.spec.ts

@@ -474,10 +474,7 @@ describe('MDC-based MatDialog', () => {
 
     let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth)
-      .withContext('Expected dialog to set a default max-width on overlay pane')
-      .toBe('80vw');
-
+    expect(overlayPane.style.maxWidth).toBe('');
     dialogRef.close();
 
     tick(500);