fix(material/core): change ng-add to use mat.theme (#29990)

* fix(material/core): change ng-add to use mat.theme

* fix(material/core): tests

---------

Co-authored-by: Andrew Seguin <[email protected]>
(cherry picked from commit 0a5b036)

Author: andrewseguin

src/material/schematics/ng-add/index.spec.ts

@@ -124,7 +124,7 @@ describe('ng-add schematic', () => {
     const themeContent = buffer!.toString();
 
     expect(themeContent).toContain(`@use '@angular/material' as mat;`);
-    expect(themeContent).toContain(`$material-theme: mat.define-theme((`);
+    expect(themeContent).toContain(`@include mat.theme((`);
   });
 
   it('should create a custom theme file if no SCSS file could be found', async () => {

src/material/schematics/ng-add/theming/create-custom-theme.ts

@@ -12,32 +12,16 @@ export function createCustomTheme(name: string = 'app') {
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Define the theme object.
-$${name}-theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$azure-palette,
-    tertiary: mat.$blue-palette,
-  ),
-  density: (
-    scale: 0,
-  )
-));
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-:root {
-  @include mat.all-component-themes($${name}-theme);
-}
-
-// Comment out the line below if you want to use the pre-defined typography utility classes.
-// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
-// @include mat.typography-hierarchy($${name}-theme);
-
-// Comment out the line below if you want to use the deprecated \`color\` inputs.
-// @include mat.color-variants-backwards-compatibility($${name}-theme);
-`;
+html {
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
+}`;
 }