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

Author: amysorto

docs-content/guides/schematics.html

@@ -142,9 +142,10 @@ <h3 id="material-3-theme-schematic" class="docs-header-link">
           <span header-link="material-3-theme-schematic"></span>
           Material 3 Theme schematic
         </h3>
-      <p>The <code>m3-theme</code> schematic will generate a file with Material 3 themes created
-from custom colors.</p>
-<pre><code>ng generate @angular/material:m3-theme
+      <p>The <code>theme-color</code> 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.</p>
+<pre><code>ng generate @angular/material:theme-color
 </code></pre>
-<p>Learn more about this schematic in its <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/m3-theme/README.md">documentation</a>.</p>
+<p>Learn more about this schematic in its <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md">documentation</a>.</p>
 </div>

docs-content/guides/theming.html

@@ -200,23 +200,29 @@ <h5 id="custom-theme" class="docs-header-link">
           <span header-link="custom-theme"></span>
           Custom theme
         </h5>
-      <p>Alternatively, a theme can be generated with a custom color with the following schematic:</p>
-<pre><code class="language-shell">ng generate @angular/material:m3-theme
+      <p>Alternatively, custom palettes can be generated with a custom color with the following schematic:</p>
+<pre><code class="language-shell">ng generate @angular/material:theme-color
 </code></pre>
-<p>This schematic integrates with <a href="https://github.com/material-foundation/material-color-utilities">Material Color Utilities</a> 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.</p>
-<p>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.</p>
+<p>This schematic integrates with <a href="https://github.com/material-foundation/material-color-utilities">Material Color Utilities</a> to build palettes based on a single color. Optionally you can provide
+additional custom colors for the secondary, tertiary, and neutral palettes.</p>
+<p>The output of the schematic is a new Sass file that exports the palettes that can be provided to
+a theme definition.</p>
 <pre><code class="language-scss"><span class="hljs-keyword">@use</span> <span class="hljs-string">&#x27;@angular/material&#x27;</span> as mat;
-<span class="hljs-keyword">@use</span> <span class="hljs-string">&#x27;./path/to/m3-theme&#x27;</span>;
-
-<span class="hljs-keyword">@include</span> mat.core();
+<span class="hljs-keyword">@use</span> <span class="hljs-string">&#x27;./path/to/my-theme&#x27;</span>; <span class="hljs-comment">// location of generated file</span>
 
 <span class="hljs-selector-tag">html</span> {
-  <span class="hljs-comment">// Apply the light theme by default</span>
-  <span class="hljs-keyword">@include</span> mat.core-theme(m3-theme.<span class="hljs-variable">$light-theme</span>);
-  <span class="hljs-keyword">@include</span> mat.button-theme(m3-theme.<span class="hljs-variable">$light-theme</span>);
+  <span class="hljs-keyword">@include</span> mat.theme(
+    <span class="hljs-attribute">color</span>: (
+      <span class="hljs-attribute">primary</span>: my-theme.<span class="hljs-variable">$primary-palette</span>,
+      <span class="hljs-attribute">tertiary</span>: my-theme.<span class="hljs-variable">$tertiary-palette</span>,
+    ),
+    <span class="hljs-attribute">typography</span>: Roboto,
+    <span class="hljs-attribute">density</span>: <span class="hljs-number">0</span>,
+  )
 }
 </code></pre>
-<p>Learn more about this schematic in its <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/m3-theme/README.md">documentation</a>.</p>
+<p>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 <a href="https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md">documentation</a>.</p>
 <!-- TODO(mmalerba): Illustrate palettes with example. -->
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "19.0.0-next.8+sha-a58e6f6",
+  "version": "19.0.0-next.8+sha-9c3af28",
   "description": "Angular Components Examples",
   "private": true,
   "repository": {
@@ -259,15 +259,15 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "19.0.0-next.8+sha-a58e6f6",
-    "@angular/cdk-experimental": "19.0.0-next.8+sha-a58e6f6",
+    "@angular/cdk": "19.0.0-next.8+sha-9c3af28",
+    "@angular/cdk-experimental": "19.0.0-next.8+sha-9c3af28",
     "@angular/core": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
     "@angular/common": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
-    "@angular/material": "19.0.0-next.8+sha-a58e6f6",
-    "@angular/material-experimental": "19.0.0-next.8+sha-a58e6f6",
-    "@angular/material-moment-adapter": "19.0.0-next.8+sha-a58e6f6",
-    "@angular/material-luxon-adapter": "19.0.0-next.8+sha-a58e6f6",
-    "@angular/material-date-fns-adapter": "19.0.0-next.8+sha-a58e6f6"
+    "@angular/material": "19.0.0-next.8+sha-9c3af28",
+    "@angular/material-experimental": "19.0.0-next.8+sha-9c3af28",
+    "@angular/material-moment-adapter": "19.0.0-next.8+sha-9c3af28",
+    "@angular/material-luxon-adapter": "19.0.0-next.8+sha-9c3af28",
+    "@angular/material-date-fns-adapter": "19.0.0-next.8+sha-9c3af28"
   },
   "dependencies": {
     "tslib": "^2.3.0"