feat(material/schematics): Switch custom theme schematic to use theme mixin instead of define-theme and add high contrast override mixins (#29642)

Author: amysorto

.ng-dev/google-sync-config.json

@@ -6,7 +6,7 @@
     "src/material/**/*.ts",
     "src/material/**/*.html",
     "src/material/**/*.scss",
-    "src/material/schematics/ng-generate/m3-theme/**/*",
+    "src/material/schematics/ng-generate/theme-color/**/*",
     "src/material-experimental/**/*.ts",
     "src/material-experimental/**/*.html",
     "src/material-experimental/**/*.scss",
@@ -25,7 +25,7 @@
     "src/**/*spec.ts",
     "src/cdk/schematics/**/*",
     "src/material/schematics/**/*",
-    "src/material/schematics/ng-generate/m3-theme/**/*.bazel",
+    "src/material/schematics/ng-generate/theme-color/**/*.bazel",
     "src/google-maps/schematics/**/*",
     "src/cdk/testing/testbed/zone-types.d.ts",
     "src/material/_theming.scss",

guides/schematics.md

@@ -118,11 +118,12 @@ ng generate @angular/cdk:drag-drop <component-name>
 
 ### Material 3 Theme schematic
 
-The `m3-theme` schematic will generate a file with Material 3 themes created
-from custom colors.
+The `theme-color` schematic will generate a file with Material 3 palettes from the specified colors
+that can be used in a theme file. It also generates high contrast color override mixins if
+specified.
 
 ```
-ng generate @angular/material:m3-theme
+ng generate @angular/material:theme-color
 ```
 
-Learn more about this schematic in its [documentation](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/m3-theme/README.md).
+Learn more about this schematic in its [documentation](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md).

guides/theming.md

@@ -128,30 +128,36 @@ and `tertiary` options:
 - `$rose-palette`
 
 ##### Custom theme
-Alternatively, a theme can be generated with a custom color with the following schematic:
+Alternatively, custom palettes can be generated with a custom color with the following schematic:
 
 ```shell
-ng generate @angular/material:m3-theme
+ng generate @angular/material:theme-color
 ```
 
-This schematic integrates with [Material Color Utilities](https://github.com/material-foundation/material-color-utilities) to build a theme based on a generated set of palettes based on a single color. Optionally you can provide additional custom colors for the secondary, tertiary, and neutral palettes.
+This schematic integrates with [Material Color Utilities](https://github.com/material-foundation/material-color-utilities) to build palettes based on a single color. Optionally you can provide
+additional custom colors for the secondary, tertiary, and neutral palettes.
 
-The output of the schematic is a new Sass file that exports a theme or themes (if generating both a light and dark theme) that can be provided to component theme mixins.
+The output of the schematic is a new Sass file that exports the palettes that can be provided to
+a theme definition.
 
 ```scss
 @use '@angular/material' as mat;
-@use './path/to/m3-theme';
-
-@include mat.core();
+@use './path/to/my-theme'; // location of generated file
 
 html {
-  // Apply the light theme by default
-  @include mat.core-theme(m3-theme.$light-theme);
-  @include mat.button-theme(m3-theme.$light-theme);
+  @include mat.theme(
+    color: (
+      primary: my-theme.$primary-palette,
+      tertiary: my-theme.$tertiary-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  )
 }
 ```
 
-Learn more about this schematic in its [documentation](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/m3-theme/README.md).
+You can also optionally generate high contrast override mixins for your custom theme that allows for
+a better accessibility experience. Learn more about this schematic in its [documentation](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md).
 
 <!-- TODO(mmalerba): Illustrate palettes with example. -->
 

package.json

@@ -98,7 +98,7 @@
     "@bazel/terser": "5.8.1",
     "@bazel/worker": "5.8.1",
     "@firebase/app-types": "^0.7.0",
-    "@material/material-color-utilities": "^0.2.7",
+    "@material/material-color-utilities": "^0.3.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",

src/material/schematics/BUILD.bazel

@@ -76,7 +76,7 @@ pkg_npm(
     name = "npm_package",
     srcs = ["package.json"],
     nested_packages = [
-        "//src/material/schematics/ng-generate/m3-theme:npm_package",
+        "//src/material/schematics/ng-generate/theme-color:npm_package",
     ],
     deps = [
         ":collection_assets",

src/material/schematics/collection.json

@@ -47,9 +47,9 @@
     },
     "m3Theme": {
       "description": "Generate M3 theme",
-      "factory": "./ng-generate/m3-theme/index_bundled",
-      "schema": "./ng-generate/m3-theme/schema.json",
-      "aliases": ["m3-theme", "M3-theme"]
+      "factory": "./ng-generate/theme-color/index_bundled",
+      "schema": "./ng-generate/theme-color/schema.json",
+      "aliases": ["theme-color"]
     }
   }
 }