feat(material/schematics): use M3 themes in schematics

Updates the schematics to refer to the M3 prebuilt themes and to generate an M3 theme when the user selects `custom` in `ng add`.

Author: crisbeto

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

@@ -104,7 +104,7 @@ describe('ng-add schematic', () => {
     const workspace = await getWorkspace(tree);
     const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-    expectProjectStyleFile(project, '@angular/material/prebuilt-themes/indigo-pink.css');
+    expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
   });
 
   it('should support adding a custom theme', async () => {
@@ -124,7 +124,8 @@ describe('ng-add schematic', () => {
     const themeContent = buffer!.toString();
 
     expect(themeContent).toContain(`@use '@angular/material' as mat;`);
-    expect(themeContent).toContain(`$material-primary: mat.define-palette(`);
+    expect(themeContent).toContain(`@use '@angular/material-experimental' as matx;`);
+    expect(themeContent).toContain(`$material-theme: matx.define-theme((`);
   });
 
   it('should create a custom theme file if no SCSS file could be found', async () => {
@@ -312,7 +313,7 @@ describe('ng-add schematic', () => {
 
   describe('theme files', () => {
     /** Path to the default prebuilt theme file that will be added when running ng-add. */
-    const defaultPrebuiltThemePath = '@angular/material/prebuilt-themes/indigo-pink.css';
+    const defaultPrebuiltThemePath = '@angular/material/prebuilt-themes/azure-blue.css';
 
     /** Writes a specific style file to the workspace in the given tree */
     function writeStyleFileToWorkspace(tree: Tree, stylePath: string) {
@@ -560,7 +561,7 @@ describe('ng-add schematic', () => {
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-      expectProjectStyleFile(project, '@angular/material/prebuilt-themes/indigo-pink.css');
+      expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
     });
 
     it('should add material app styles', async () => {
@@ -630,7 +631,7 @@ describe('ng-add schematic', () => {
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-      expectProjectStyleFile(project, '@angular/material/prebuilt-themes/indigo-pink.css');
+      expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
     });
 
     it('should add material app styles', async () => {

src/material/schematics/ng-add/schema.json

@@ -14,26 +14,26 @@
     "theme": {
       "description": "The theme to apply",
       "type": "string",
-      "default": "indigo-pink",
+      "default": "azure-blue",
       "x-prompt": {
         "message": "Choose a prebuilt theme name, or \"custom\" for a custom theme:",
         "type": "list",
         "items": [
           {
-            "value": "indigo-pink",
-            "label": "Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]"
+            "value": "azure-blue",
+            "label": "Azure/Blue         [Preview: https://material.angular.io?theme=azure-blue]"
           },
           {
-            "value": "deeppurple-amber",
-            "label": "Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]"
+            "value": "rose-red",
+            "label": "Rose/Red           [Preview: https://material.angular.io?theme=rose-red]"
           },
           {
-            "value": "pink-bluegrey",
-            "label": "Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]"
+            "value": "magenta-violet",
+            "label": "Magenta/Violet     [Preview: https://material.angular.io?theme=magenta-violet]"
           },
           {
-            "value": "purple-green",
-            "label": "Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]"
+            "value": "cyan-orange",
+            "label": "Cyan/Orange        [Preview: https://material.angular.io?theme=cyan-orange]"
           },
           {"value": "custom", "label": "Custom"}
         ]

src/material/schematics/ng-add/schema.ts

@@ -14,7 +14,7 @@ export interface Schema {
   animations: 'enabled' | 'disabled' | 'excluded';
 
   /** Name of pre-built theme to install. */
-  theme: 'indigo-pink' | 'deeppurple-amber' | 'pink-bluegrey' | 'purple-green' | 'custom';
+  theme: 'azure-blue' | 'rose-red' | 'magenta-violet' | 'cyan-orange' | 'custom';
 
   /** Whether to set up global typography styles. */
   typography: boolean;

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

@@ -12,38 +12,38 @@ 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;
+@use '@angular/material-experimental' as matx;
 // 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();
 
-// 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.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.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.define-light-theme((
+// Define the theme object.
+$${name}-theme: matx.define-theme((
   color: (
-    primary: $${name}-primary,
-    accent: $${name}-accent,
-    warn: $${name}-warn,
+    theme-type: light,
+    primary: matx.$m3-azure-palette,
+    tertiary: matx.$m3-blue-palette,
   ),
-  typography: mat.define-typography-config(),
-  density: 0
+  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.
-@include mat.all-component-themes($${name}-theme);
+: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($theme);
 
+// Comment out the line below if you want to use the deprecated \`color\` inputs.
+// @include matx.color-variants-back-compat($theme);
 `;
 }

src/material/schematics/ng-add/theming/theming.ts

@@ -39,7 +39,7 @@ const defaultCustomThemeFilename = 'custom-theme.scss';
 /** Add pre-built styles to the main project style file. */
 export function addThemeToAppStyles(options: Schema): Rule {
   return (host: Tree, context: SchematicContext) => {
-    const themeName = options.theme || 'indigo-pink';
+    const themeName = options.theme || 'azure-blue';
     return themeName === 'custom'
       ? insertCustomTheme(options.project, host, context.logger)
       : insertPrebuiltTheme(options.project, themeName, context.logger);