build: fix typography demo

Fixes that the demo for the typography wasn't working. Also makes it easier to compare legacy and non-legacy typographies.

Author: crisbeto

src/dev-app/theme.scss

@@ -29,6 +29,9 @@ $candy-app-theme: mat.define-light-theme((
 @include experimental.column-resize-theme($candy-app-theme);
 @include experimental.popover-edit-theme($candy-app-theme);
 
+@include mat.legacy-typography-hierarchy($candy-app-theme, '.mat-legacy-typography');
+@include mat.typography-hierarchy($candy-app-theme);
+
 .demo-strong-focus {
   // Note: we can theme the indicators directly through `strong-focus-indicators` as well.
   // Use the theme so we have some coverage over the entire API surface.

src/dev-app/typography/BUILD.bazel

@@ -10,6 +10,8 @@ ng_module(
         ":typography_demo_scss",
     ],
     deps = [
+        "//src/material/checkbox",
+        "@npm//@angular/forms",
     ],
 )
 

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

@@ -1,9 +1,11 @@
+<mat-checkbox [(ngModel)]="isLegacy">Is Legacy</mat-checkbox>
+
 <!-- via https://en.wikipedia.org/wiki/Pangram -->
-<div class="mat-typography">
-  <h1 class="mat-display-4">How vexingly quick daft zebras jump!</h1>
-  <h1 class="mat-display-3">The wizard quickly jinxed the gnomes before they vaporized.</h1>
-  <h1 class="mat-display-2">The quick brown fox jumps over the lazy dog.</h1>
-  <h1 class="mat-display-1">Grumpy wizards make toxic brew for the evil queen and jack.</h1>
+<div [class]="isLegacy ? 'mat-legacy-typography' : 'mat-typography'">
+  <h1 [class]="isLegacy ? 'mat-display-4' : 'mat-headline-1'">How vexingly quick daft zebras jump!</h1>
+  <h1 [class]="isLegacy ? 'mat-display-3' : 'mat-headline-2'">The wizard quickly jinxed the gnomes before they vaporized.</h1>
+  <h1 [class]="isLegacy ? 'mat-display-2' : 'mat-headline-3'">The quick brown fox jumps over the lazy dog.</h1>
+  <h1 [class]="isLegacy ? 'mat-display-1' : 'mat-headline-4'">Grumpy wizards make toxic brew for the evil queen and jack.</h1>
   <h1>Jackdaws love my big sphinx of quartz.</h1>
   <h2>The five boxing wizards jump quickly.</h2>
   <h3>Pack my box with five dozen liquor jugs.</h3>

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

@@ -7,11 +7,16 @@
  */
 
 import {Component} from '@angular/core';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'typography-demo',
   templateUrl: 'typography-demo.html',
   styleUrls: ['typography-demo.css'],
+  imports: [MatCheckboxModule, FormsModule],
   standalone: true,
 })
-export class TypographyDemo {}
+export class TypographyDemo {
+  isLegacy = false;
+}