fix(material/schematics): switch custom theme schematic to @use (#22436)

Reworks the custom theme schematic to go through the new theming API.

Author: crisbeto

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

@@ -122,8 +122,8 @@ describe('ng-add schematic', () => {
     const buffer = tree.read(expectedStylesPath);
     const themeContent = buffer!.toString();
 
-    expect(themeContent).toContain(`@import '~@angular/material/theming';`);
-    expect(themeContent).toContain(`$app-primary: mat-palette(`);
+    expect(themeContent).toContain(`@use '~@angular/material' as mat;`);
+    expect(themeContent).toContain(`$app-primary: mat.define-palette(`);
   });
 
   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

@@ -11,26 +11,26 @@ export function createCustomTheme(name: string = 'app') {
 return `
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$${name}-primary: mat-palette($mat-indigo);
-$${name}-accent: mat-palette($mat-pink, A200, A100, A400);
+$${name}-primary: mat.define-palette(mat.$indigo-palette);
+$${name}-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$${name}-warn: mat-palette($mat-red);
+$${name}-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$${name}-theme: mat-light-theme((
+$${name}-theme: mat.define-light-theme((
   color: (
     primary: $${name}-primary,
     accent: $${name}-accent,
@@ -41,7 +41,7 @@ $${name}-theme: mat-light-theme((
 // 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.
-@include angular-material-theme($${name}-theme);
+@include mat.all-component-themes($${name}-theme);
 
 `;
 }