build: switch dev app layout to use MDC (#25670)

Switches the dev app layout to use the MDC versions of the components and fixes a couple of visual issues.

Author: crisbeto

src/dev-app/dev-app/BUILD.bazel

@@ -12,10 +12,10 @@ ng_module(
     deps = [
         "//src/cdk/bidi",
         "//src/cdk/overlay",
+        "//src/material/button",
         "//src/material/core",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-list",
+        "//src/material/list",
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/router",

src/dev-app/dev-app/dev-app-404.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 
 @Component({
@@ -18,6 +18,6 @@ import {RouterModule} from '@angular/router';
   `,
   host: {'class': 'mat-typography'},
   standalone: true,
-  imports: [MatLegacyButtonModule, RouterModule],
+  imports: [MatButtonModule, RouterModule],
 })
 export class DevApp404 {}

src/dev-app/dev-app/dev-app-layout.html

@@ -44,7 +44,7 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
-        <div>
+        <div class="demo-config-buttons">
           <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
             <mat-icon>fullscreen</mat-icon>
           </button>

src/dev-app/dev-app/dev-app-layout.scss

@@ -18,7 +18,7 @@ body {
     min-width: 15vw;
     position: fixed;
 
-    .mat-button {
+    .mat-mdc-button {
       width: 100%;
       position: relative;
       bottom: 0;
@@ -69,3 +69,12 @@ body {
   // Removes extra space on top of toolbar on IE.
   display: block;
 }
+
+.demo-config-buttons {
+  display: flex;
+  align-items: center;
+
+  .mat-mdc-button-base {
+    --mdc-text-button-label-text-color: inherit;
+  }
+}

src/dev-app/dev-app/dev-app-layout.ts

@@ -13,8 +13,8 @@ import {DevAppDirectionality} from './dev-app-directionality';
 import {DevAppRippleOptions} from './ripple-options';
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatListModule} from '@angular/material/list';
+import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
@@ -32,9 +32,9 @@ export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED';
   standalone: true,
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyListModule,
+    MatListModule,
     MatSidenavModule,
     MatToolbarModule,
     RouterModule,