fix(material-experimental/theming): align dialog with M3

Fixes up the tokens so that the dialog matches the M3 spec.

Author: crisbeto

src/dev-app/dialog/dialog-demo.html

@@ -14,6 +14,10 @@ <h1>Dialog demo</h1>
   <mat-checkbox [(ngModel)]="enableLegacyPadding">Enable legacy padding</mat-checkbox>
 </p>
 
+<p>
+  <mat-checkbox [(ngModel)]="isScrollable">Make dialog scrollable</mat-checkbox>
+</p>
+
 <mat-card class="demo-dialog-card">
   <mat-card-content>
     <h2>Dialog dimensions</h2>
@@ -92,7 +96,7 @@ <h2>Other options</h2>
       <mat-form-field>
         <mat-label>Button alignment</mat-label>
         <mat-select [(ngModel)]="actionsAlignment">
-          <mat-option>Start</mat-option>
+          <mat-option value="start">Start</mat-option>
           <mat-option value="end">End</mat-option>
           <mat-option value="center">Center</mat-option>
         </mat-select>

src/dev-app/dialog/dialog-demo.ts

@@ -27,8 +27,6 @@ import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 
-const defaultDialogConfig = new MatDialogConfig();
-
 @Component({
   selector: 'dialog-demo',
   templateUrl: 'dialog-demo.html',
@@ -61,7 +59,7 @@ export class DialogDemo {
     height: '',
     minWidth: '',
     minHeight: '',
-    maxWidth: defaultDialogConfig.maxWidth,
+    maxWidth: '',
     maxHeight: '',
     position: {
       top: '',
@@ -75,6 +73,7 @@ export class DialogDemo {
   };
   numTemplateOpens = 0;
   enableLegacyPadding = false;
+  isScrollable = false;
 
   @ViewChild(TemplateRef) template: TemplateRef<any>;
 
@@ -110,6 +109,7 @@ export class DialogDemo {
   openContentElement() {
     const dialogRef = this.dialog.open(ContentElementDialog, this._getDialogConfig());
     dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
+    dialogRef.componentInstance.isScrollable = this.isScrollable;
   }
 
   openTemplate() {
@@ -195,7 +195,7 @@ export class JazzDialog {
     `
     img {
       max-width: 100%;
-      height: 800px;
+      max-height: 800px;
     }
   `,
   ],
@@ -212,12 +212,17 @@ export class JazzDialog {
         astronomical units (4.50x109 km). It is named after the Roman god of the sea and has the
         astronomical symbol ♆, a stylised version of the god Neptune's trident.
       </p>
-      <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
+
+      @if (isScrollable) {
+        @for (i of [1, 2, 3]; track $index) {
+          <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
+        }
+      }
     </mat-dialog-content>
 
     <mat-dialog-actions [align]="actionsAlignment">
       <button
-        mat-raised-button
+        mat-button
         color="primary"
         mat-dialog-close>Close</button>
 
@@ -238,12 +243,13 @@ export class JazzDialog {
   imports: [MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions],
 })
 export class ContentElementDialog {
-  actionsAlignment: 'start' | 'center' | 'end';
+  actionsAlignment?: 'start' | 'center' | 'end';
+  isScrollable: boolean;
 
   constructor(public dialog: MatDialog) {}
 
   showInStackedDialog() {
-    this.dialog.open(IFrameDialog);
+    this.dialog.open(IFrameDialog, {maxWidth: '80vw'});
   }
 }
 
@@ -253,6 +259,7 @@ export class ContentElementDialog {
     `
     iframe {
       width: 800px;
+      height: 500px;
     }
   `,
   ],
@@ -265,7 +272,7 @@ export class ContentElementDialog {
 
     <mat-dialog-actions>
       <button
-        mat-raised-button
+        mat-button
         color="primary"
         mat-dialog-close>Close</button>
     </mat-dialog-actions>

src/material-experimental/theming/_custom-tokens.scss

@@ -347,6 +347,29 @@
   ));
 }
 
+/// Generates custom tokens for the dialog.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the dialog
+@function dialog($systems, $exclude-hardcoded) {
+  @return (
+    container-max-width: _hardcode(560px, $exclude-hardcoded),
+    container-small-max-width: _hardcode(calc(100vw - 32px), $exclude-hardcoded),
+    container-min-width: _harcode(280px, $exclude-hardcoded),
+    actions-alignment: _hardcode(flex-end, $exclude-hardcoded),
+    content-padding: _hardcode(20px 24px, $exclude-hardcoded),
+    with-actions-content-padding: _hardcode(20px 24px 0, $exclude-hardcoded),
+    actions-padding: _hardcode(16px 24px, $exclude-hardcoded),
+
+    // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
+    // element to size the title which in turn means that we can't set a specific padding
+    // and get the exact same space out of it. These values were determined through
+    // trial and error so that the first line of text is 24px from the top and the bottom
+    // of the text is 16px from the content under it.
+    headline-padding: _hardcode(6px 24px 13px, $exclude-hardcoded),
+  );
+}
+
 /// Generates custom tokens for the mat-divider.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

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

@@ -432,6 +432,38 @@
   ));
 }
 
+/// Fixes inconsistent values in the dialog tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of dialog tokens currently being generated.
+/// @param {Map} $all-tokens Map of all dialog tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-dialog-tokens($systems, $tokens) {
+  $tokens: _rename-map-keys($tokens, (
+    headline-color: subhead-color,
+    headline-font: subhead-font,
+    headline-line-height: subhead-line-height,
+    headline-size: subhead-size,
+    headline-tracking: subhead-tracking,
+    headline-weight: subhead-weight,
+  ));
+
+  @if (map.has-key($tokens, container-elevation)) {
+    $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 $tokens;
+}
+
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -495,7 +527,7 @@
     ),
     _namespace-tokens(
       (mdc, dialog),
-      mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded),
+      _fix-dialog-tokens($systems, mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded)),
       $token-slots
     ),
     _namespace-tokens(
@@ -726,6 +758,11 @@
       custom-tokens.datepicker($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, dialog),
+      custom-tokens.dialog($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, divider),
       custom-tokens.divider($systems, $exclude-hardcoded),