main - ea0d1ba feat(material/core): deprecate the core mixin (#29906)

Author: wagnermaciel

docs-content/guides/material-2.html

@@ -98,19 +98,6 @@ <h3 id="custom-themes-with-sass" class="docs-header-link">
       <p>A <strong>theme file</strong> is a Sass file that calls Angular Material Sass mixins to output color,
 typography, and density CSS styles.</p>
 
-        <h4 id="the-core-mixin" class="docs-header-link">
-          <span header-link="the-core-mixin"></span>
-          The <code>core</code> mixin
-        </h4>
-      <p>Angular Material defines a mixin named <code>core</code> that includes prerequisite styles for common
-features used by multiple components, such as ripples. The <code>core</code> mixin must be included exactly
-once for your application, even if you define multiple themes. Including the <code>core</code> mixin multiple
-times will result in duplicate CSS in your application.</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">@include</span> mat.core();
-</code></pre>
-
         <h4 id="defining-a-theme" class="docs-header-link">
           <span header-link="defining-a-theme"></span>
           Defining a theme
@@ -173,8 +160,6 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
 theme Sass mixins.</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">@include</span> mat.core();
-
 <span class="hljs-variable">$my-primary</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-indigo-palette</span>, <span class="hljs-number">500</span>);
 <span class="hljs-variable">$my-accent</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-pink-palette</span>, A200, A100, A400);
 
@@ -205,8 +190,6 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
 uses every single component, this will produce unnecessary CSS.</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">@include</span> mat.core();
-
 <span class="hljs-variable">$my-primary</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-indigo-palette</span>, <span class="hljs-number">500</span>);
 <span class="hljs-variable">$my-accent</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-pink-palette</span>, A200, A100, A400);
 
@@ -344,8 +327,6 @@ <h4 id="multiple-themes-in-one-file" class="docs-header-link">
 CSS rule declaration. See the <a href="https://sass-lang.com/documentation/at-rules/mixin">documentation for Sass mixins</a> for further background.</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">@include</span> mat.core();
-
 <span class="hljs-comment">// Define a dark theme</span>
 <span class="hljs-variable">$dark-theme</span>: mat.m2-define-dark-theme((
  color: (
@@ -474,7 +455,6 @@ <h2 id="strong-focus-indicators" class="docs-header-link">
 the custom theme API.</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">@include</span> mat.core();
 <span class="hljs-keyword">@include</span> mat.strong-focus-indicators();
 
 <span class="hljs-variable">$my-primary</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-indigo-palette</span>, <span class="hljs-number">500</span>);
@@ -504,7 +484,6 @@ <h3 id="customizing-strong-focus-indicators" class="docs-header-link">
 of the custom theme API.</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">@include</span> mat.core();
 <span class="hljs-keyword">@include</span> mat.strong-focus-indicators((
   <span class="hljs-attribute">border-style</span>: dotted,
   <span class="hljs-attribute">border-width</span>: <span class="hljs-number">4px</span>,
@@ -1012,8 +991,6 @@ <h4 id="typography-configs-and-theming" class="docs-header-link">
 defining multiple themes</a>.</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">@include</span> mat.core();
-
 <span class="hljs-variable">$my-primary</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$indigo-palette</span>, <span class="hljs-number">500</span>);
 <span class="hljs-variable">$my-accent</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$pink-palette</span>, A200, A100, A400);
 <span class="hljs-variable">$my-typography</span>: mat.m2-define-typography-config();
@@ -1310,8 +1287,6 @@ <h4 id="step-4-include-the-theme-mixin-in-your-application" class="docs-header-l
 <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/carousel-theme&#x27;</span> as carousel;
 
-<span class="hljs-keyword">@include</span> mat.core();
-
 <span class="hljs-variable">$my-primary</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-indigo-palette</span>, <span class="hljs-number">500</span>);
 <span class="hljs-variable">$my-accent</span>: mat.m2-define-palette(mat.<span class="hljs-variable">$m2-pink-palette</span>, A200, A100, A400);
 

docs-content/guides/theming-your-components.html

@@ -284,8 +284,6 @@ <h3 id="step-4-include-the-theme-mixin-in-your-application" class="docs-header-l
 <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/carousel-theme&#x27;</span> as carousel;
 
-<span class="hljs-keyword">@include</span> mat.core();
-
 <span class="hljs-variable">$my-theme</span>: mat.define-theme((
   color: (
     theme-type: light,

docs-content/guides/theming.html

@@ -26,19 +26,6 @@ <h3 id="custom-themes-with-sass" class="docs-header-link">
       <p>A <strong>theme file</strong> is a Sass file that calls Angular Material Sass mixins to output color,
 typography, and density CSS styles.</p>
 
-        <h4 id="the-core-mixin" class="docs-header-link">
-          <span header-link="the-core-mixin"></span>
-          The <code>core</code> mixin
-        </h4>
-      <p>Angular Material defines a mixin named <code>core</code> that includes prerequisite styles for common
-features used by multiple components, such as ripples. The <code>core</code> mixin must be included exactly
-once for your application, even if you define multiple themes. Including the <code>core</code> mixin multiple
-times will result in duplicate CSS in your application.</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">@include</span> mat.core();
-</code></pre>
-
         <h4 id="defining-a-theme" class="docs-header-link">
           <span header-link="defining-a-theme"></span>
           Defining a theme
@@ -309,8 +296,6 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
 theme Sass mixins.</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">@include</span> mat.core();
-
 <span class="hljs-variable">$my-theme</span>: mat.define-theme((
  color: (
     theme-type: light,
@@ -338,8 +323,6 @@ <h4 id="applying-a-theme-to-components" class="docs-header-link">
 uses every single component, this will produce unnecessary CSS.</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">@include</span> mat.core();
-
 <span class="hljs-variable">$my-theme</span>: mat.define-theme((
  color: (
     theme-type: light,
@@ -430,8 +413,6 @@ <h4 id="multiple-themes-in-one-file" class="docs-header-link">
 CSS rule declaration. See the <a href="https://sass-lang.com/documentation/at-rules/mixin">documentation for Sass mixins</a> for further background.</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">@include</span> mat.core();
-
 <span class="hljs-comment">// Define a dark theme</span>
 <span class="hljs-variable">$dark-theme</span>: mat.define-theme((
   color: (
@@ -589,7 +570,6 @@ <h2 id="strong-focus-indicators" class="docs-header-link">
 the custom theme API.</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">@include</span> mat.core();
 <span class="hljs-keyword">@include</span> mat.strong-focus-indicators();
 
 <span class="hljs-variable">$my-theme</span>: mat.define-theme((
@@ -618,7 +598,6 @@ <h3 id="customizing-strong-focus-indicators" class="docs-header-link">
 of the custom theme API.</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">@include</span> mat.core();
 <span class="hljs-keyword">@include</span> mat.strong-focus-indicators((
   <span class="hljs-attribute">border-style</span>: dotted,
   <span class="hljs-attribute">border-width</span>: <span class="hljs-number">4px</span>,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "19.0.0-next.9+sha-a670949",
+  "version": "19.0.0-next.9+sha-ea0d1ba",
   "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.9+sha-a670949",
-    "@angular/cdk-experimental": "19.0.0-next.9+sha-a670949",
+    "@angular/cdk": "19.0.0-next.9+sha-ea0d1ba",
+    "@angular/cdk-experimental": "19.0.0-next.9+sha-ea0d1ba",
     "@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.9+sha-a670949",
-    "@angular/material-experimental": "19.0.0-next.9+sha-a670949",
-    "@angular/material-moment-adapter": "19.0.0-next.9+sha-a670949",
-    "@angular/material-luxon-adapter": "19.0.0-next.9+sha-a670949",
-    "@angular/material-date-fns-adapter": "19.0.0-next.9+sha-a670949"
+    "@angular/material": "19.0.0-next.9+sha-ea0d1ba",
+    "@angular/material-experimental": "19.0.0-next.9+sha-ea0d1ba",
+    "@angular/material-moment-adapter": "19.0.0-next.9+sha-ea0d1ba",
+    "@angular/material-luxon-adapter": "19.0.0-next.9+sha-ea0d1ba",
+    "@angular/material-date-fns-adapter": "19.0.0-next.9+sha-ea0d1ba"
   },
   "dependencies": {
     "tslib": "^2.3.0"