refactor(material/core): move classes out of core (angular#29811)

* refactor(material/core): move classes out of core

* fixup! refactor(material/core): move classes out of core

* fixup! refactor(material/core): move classes out of core

* fixup! refactor(material/core): move classes out of core

src/material/core/_core.scss

@@ -6,6 +6,13 @@
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
+  @include cdk.a11y-visually-hidden();
+  @include private.structural-styling();
+}
+
+// Emits the mat-app-background CSS class. This predefined class sets the
+// background color and text color of an element.
+@mixin app-background() {
   // TODO: Move ripple styles to be dynamically loaded instead of in core.
   // This variable is used as a fallback for the ripple element's
   // background color. However, if it isn't defined anywhere, then MSS
@@ -14,9 +21,6 @@
     --mat-app-on-surface: initial;
   }
 
-  @include cdk.a11y-visually-hidden();
-  @include private.structural-styling();
-
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
@@ -26,7 +30,17 @@
         @include token-utils.create-token-slot(background-color, background-color, transparent);
         @include token-utils.create-token-slot(color, text-color, inherit);
       }
+    }
+  }
+}
 
+// Emits CSS classes for applying elevation. These classes follow the pattern
+// mat-elevation-z#, where # is the elevation number you want, from 0 to 24.
+// These predefined classes use the CSS box-shadow settings defined by the
+// Material Design specification.
+@mixin elevation-classes() {
+  @at-root {
+    @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
       // Provides external CSS classes for each elevation value. Each CSS class is formatted as
       // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
       // is elevated.
@@ -42,9 +56,3 @@
     }
   }
 }
-
-// Mixin that provides the .mat-app-background class.
-@mixin app-background() {}
-
-// Mixin that provides the .mat-elevation-* classes.
-@mixin elevation-classes() {}

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

@@ -6,6 +6,8 @@
 @use '../../typography/typography';
 
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 $theme: definition.define-theme((
   color: (

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

@@ -6,6 +6,8 @@
 @use '../../typography/typography';
 
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 $theme: definition.define-theme((
   color: (

src/material/core/theming/prebuilt/deeppurple-amber.scss

@@ -5,6 +5,8 @@
 
 // Include non-theme styles for core.
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 // Define a theme.
 $primary: m2.define-palette(m2.$deep-purple-palette);

src/material/core/theming/prebuilt/indigo-pink.scss

@@ -6,6 +6,8 @@
 
 // Include non-theme styles for core.
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 // Define a theme.
 $primary: m2.define-palette(m2.$indigo-palette);

src/material/core/theming/prebuilt/magenta-violet.scss

@@ -6,6 +6,8 @@
 @use '../../typography/typography';
 
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 $theme: definition.define-theme((
   color: (

src/material/core/theming/prebuilt/pink-bluegrey.scss

@@ -6,6 +6,8 @@
 
 // Include non-theme styles for core.
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 // Define a theme.
 $primary: m2.define-palette(m2.$pink-palette, 700, 500, 900);

src/material/core/theming/prebuilt/purple-green.scss

@@ -6,6 +6,8 @@
 
 // Include non-theme styles for core.
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 // Define a theme.
 $primary: m2.define-palette(m2.$purple-palette, 700, 500, 800);

src/material/core/theming/prebuilt/rose-red.scss

@@ -6,6 +6,8 @@
 @use '../../typography/typography';
 
 @include core.core();
+@include core.app-background();
+@include core.elevation-classes();
 
 $theme: definition.define-theme((
   color: (