diff --git a/guides/material-2.md b/guides/material-2.md index c56b1ae30084..5a5809d2bafb 100644 --- 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 index b7ff62a1d579..c8c304f85f14 100644 --- 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 index e4c996420a02..c6d73ea35ebf 100644 --- 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 index bc17d34a5e2b..17ec073c31b7 100644 --- 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 index 9326e4824a2b..1bbbc4846795 100644 --- 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 index 908d228b948c..655662a8b6c0 100644 --- 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 index e103c7802fb7..d794f4750e68 100644 --- 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 index 2b115746784e..cc6d6320ec5d 100644 --- 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 index 679fe103d0c6..d9d6ee55eec3 100644 --- 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 index 3bb56e93d571..40eec288ef57 100644 --- 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 index d2b1b501ca25..57a01c38db74 100644 --- 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 index 69befacb992a..3c8d2e7c7fa9 100644 --- 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 index 22535103829c..fe9084c0e17b 100644 --- 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 index 5872bd4d1e05..23c5b11ec9f1 100644 --- 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 index 851155e161e4..5c89938f71de 100644 --- 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 index 22efa203137a..8e82d0e14f1c 100644 --- 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 index 83dbd551269a..27a1e3920ac6 100644 --- 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 index c3ed8ff2306b..0e8386421146 100644 --- 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 index a043f31c880e..5b9e56057c82 100644 --- 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((