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

Author: wagnermaciel

guides/material-2.md

@@ -108,19 +108,6 @@ custom theme with Sass, or by importing a pre-built theme CSS file.
 A **theme file** is a Sass file that calls Angular Material Sass mixins to output color,
 typography, and density CSS styles.
 
-#### The `core` mixin
-
-Angular Material defines a mixin named `core` that includes prerequisite styles for common
-features used by multiple components, such as ripples. The `core` mixin must be included exactly
-once for your application, even if you define multiple themes. Including the `core` mixin multiple
-times will result in duplicate CSS in your application.
-
-```scss
-@use '@angular/material' as mat;
-
-@include mat.core();
-```
-
 #### Defining a theme
 
 Angular Material represents a theme as a Sass map that contains your color, typography, and density
@@ -190,8 +177,6 @@ theme Sass mixins.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
@@ -225,8 +210,6 @@ uses every single component, this will produce unnecessary CSS.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
@@ -337,8 +320,6 @@ CSS rule declaration. See the [documentation for Sass mixins][sass-mixins] for f
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 // Define a dark theme
 $dark-theme: mat.m2-define-dark-theme((
  color: (
@@ -470,7 +451,6 @@ the custom theme API.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
 @include mat.strong-focus-indicators();
 
 $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
@@ -502,7 +482,6 @@ of the custom theme API.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
 @include mat.strong-focus-indicators((
   border-style: dotted,
   border-width: 4px,
@@ -812,8 +791,6 @@ defining multiple themes](#defining-multiple-themes).
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $my-primary: mat.m2-define-palette(mat.$indigo-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$pink-palette, A200, A100, A400);
 $my-typography: mat.m2-define-typography-config();
@@ -1064,8 +1041,6 @@ the other theme mixins in your application.
 @use '@angular/material' as mat;
 @use './path/to/carousel-theme' as carousel;
 
-@include mat.core();
-
 $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
 $my-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 

guides/theming-your-components.md

@@ -229,8 +229,6 @@ the other theme mixins in your application.
 @use '@angular/material' as mat;
 @use './path/to/carousel-theme' as carousel;
 
-@include mat.core();
-
 $my-theme: mat.define-theme((
   color: (
     theme-type: light,

guides/theming.md

@@ -28,19 +28,6 @@ familiarity with CSS and Sass basics, including variables, functions, and mixins
 A **theme file** is a Sass file that calls Angular Material Sass mixins to output color,
 typography, and density CSS styles.
 
-#### The `core` mixin
-
-Angular Material defines a mixin named `core` that includes prerequisite styles for common
-features used by multiple components, such as ripples. The `core` mixin must be included exactly
-once for your application, even if you define multiple themes. Including the `core` mixin multiple
-times will result in duplicate CSS in your application.
-
-```scss
-@use '@angular/material' as mat;
-
-@include mat.core();
-```
-
 #### Defining a theme
 
 Angular Material represents a theme as a Sass map that contains your color, typography, and density
@@ -218,8 +205,6 @@ theme Sass mixins.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $my-theme: mat.define-theme((
  color: (
     theme-type: light,
@@ -250,8 +235,6 @@ uses every single component, this will produce unnecessary CSS.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $my-theme: mat.define-theme((
  color: (
     theme-type: light,
@@ -335,8 +318,6 @@ CSS rule declaration. See the [documentation for Sass mixins][sass-mixins] for f
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 // Define a dark theme
 $dark-theme: mat.define-theme((
   color: (
@@ -500,7 +481,6 @@ the custom theme API.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
 @include mat.strong-focus-indicators();
 
 $my-theme: mat.define-theme((
@@ -531,7 +511,6 @@ of the custom theme API.
 ```scss
 @use '@angular/material' as mat;
 
-@include mat.core();
 @include mat.strong-focus-indicators((
   border-style: dotted,
   border-width: 4px,

integration/yarn-pnp-compat/src/styles.scss

@@ -8,8 +8,6 @@ $theme: mat.m2-define-light-theme((
   density: 0
 ));
 
-@include mat.core();
-
 @include mat.all-component-themes($theme);
 
 html,

src/dev-app/theme-m3.scss

@@ -30,11 +30,6 @@ $light-theme: create-theme($type: light);
 // Create our dark theme.
 $dark-theme: create-theme($type: dark);
 
-// 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 the default theme styles.
 html {
   body:not(.demo-experimental-theme) {

src/dev-app/theme.scss

@@ -21,10 +21,6 @@ $candy-app-theme: mat.m2-define-light-theme((
   density: 0,
 ));
 
-// 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.app-background();
 @include mat.elevation-classes();
 

src/e2e-app/theme.scss

@@ -1,7 +1,5 @@
 @use '@angular/material' as mat;
 
-@include mat.core();
-
 $theme: mat.define-theme((
   color: (
     theme-type: light,

src/material/core/_core.scss

@@ -2,7 +2,7 @@
 @use './tokens/token-utils';
 @use './style/elevation';
 
-// Mixin that renders all of the core styles that are not theme-dependent.
+/// @deprecated This mixin is a no-op and is going to be removed in v21.
 @mixin core() {}
 
 // Emits the mat-app-background CSS class. This predefined class sets the

src/material/core/theming/prebuilt/azure-blue.scss

@@ -5,7 +5,6 @@
 @use '../../core';
 @use '../../typography/typography';
 
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

src/material/core/theming/prebuilt/cyan-orange.scss

@@ -5,7 +5,6 @@
 @use '../../core';
 @use '../../typography/typography';
 
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();