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

angular · Oct 22, 2024 · ea0d1ba · ea0d1ba
1 parent a670949
commit ea0d1ba
Show file tree

Hide file tree

Showing 19 changed files with 1 addition and 84 deletions.
diff --git a/guides/material-2.md b/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);
 

diff --git a/guides/theming-your-components.md b/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,

diff --git a/guides/theming.md b/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,

diff --git a/integration/yarn-pnp-compat/src/styles.scss b/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,

diff --git a/src/dev-app/theme-m3.scss b/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) {

diff --git a/src/dev-app/theme.scss b/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();
 

diff --git a/src/e2e-app/theme.scss b/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,

diff --git a/src/material/core/_core.scss b/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

diff --git a/src/material/core/theming/prebuilt/azure-blue.scss b/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();
 

diff --git a/src/material/core/theming/prebuilt/cyan-orange.scss b/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();
 

diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss
@@ -3,8 +3,6 @@
 @use '../../m2';
 @use '../../typography/typography';
 
-// Include non-theme styles for core.
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss
@@ -3,9 +3,6 @@
 @use '../../m2';
 @use '../../typography/typography';
 
-
-// Include non-theme styles for core.
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/prebuilt/magenta-violet.scss b/src/material/core/theming/prebuilt/magenta-violet.scss
@@ -5,7 +5,6 @@
 @use '../../core';
 @use '../../typography/typography';
 
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss
@@ -3,9 +3,6 @@
 @use '../../m2';
 @use '../../typography/typography';
 
-
-// Include non-theme styles for core.
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss
@@ -3,9 +3,6 @@
 @use '../../m2';
 @use '../../typography/typography';
 
-
-// Include non-theme styles for core.
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/prebuilt/rose-red.scss b/src/material/core/theming/prebuilt/rose-red.scss
@@ -5,7 +5,6 @@
 @use '../../core';
 @use '../../typography/typography';
 
-@include core.core();
 @include core.app-background();
 @include core.elevation-classes();
 

diff --git a/src/material/core/theming/tests/test-theming-bundle.scss b/src/material/core/theming/tests/test-theming-bundle.scss
@@ -29,7 +29,6 @@ $rem-typography: mat.m2-define-rem-typography-config();
 @include mat.all-component-densities($theme);
 
 // Core mixins.
-@include mat.core();
 @include mat.strong-focus-indicators();
 @include mat.strong-focus-indicators-theme($theme);
 

diff --git a/src/material/schematics/ng-add/theming/create-custom-theme.ts b/src/material/schematics/ng-add/theming/create-custom-theme.ts
@@ -14,11 +14,6 @@ export function createCustomTheme(name: string = 'app') {
 @use '@angular/material' as mat;
 // 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 theme object.
 $${name}-theme: mat.define-theme((
   color: (

diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss
@@ -1,6 +1,5 @@
 @use '@angular/material' as mat;
 
-@include mat.core();
 @include mat.app-background();
 
 $theme: mat.define-theme((