From 30e09d72659d386db6c42b10caebce0a7b8bfa3b Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 2 Oct 2024 11:56:33 -0400
Subject: [PATCH] refactor(material/core): move classes out of core (#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                  | 26 ++++++++++++-------
 .../core/theming/prebuilt/azure-blue.scss     |  2 ++
 .../core/theming/prebuilt/cyan-orange.scss    |  2 ++
 .../theming/prebuilt/deeppurple-amber.scss    |  2 ++
 .../core/theming/prebuilt/indigo-pink.scss    |  2 ++
 .../core/theming/prebuilt/magenta-violet.scss |  2 ++
 .../core/theming/prebuilt/pink-bluegrey.scss  |  2 ++
 .../core/theming/prebuilt/purple-green.scss   |  2 ++
 .../core/theming/prebuilt/rose-red.scss       |  2 ++
 9 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index 34484bdac4c9..a60951c5156f 100644
--- a/src/material/core/_core.scss
+++ b/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() {}
diff --git a/src/material/core/theming/prebuilt/azure-blue.scss b/src/material/core/theming/prebuilt/azure-blue.scss
index d32fb2610f5e..679fe103d0c6 100644
--- a/src/material/core/theming/prebuilt/azure-blue.scss
+++ b/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: (
diff --git a/src/material/core/theming/prebuilt/cyan-orange.scss b/src/material/core/theming/prebuilt/cyan-orange.scss
index 69836aa4cf98..3bb56e93d571 100644
--- a/src/material/core/theming/prebuilt/cyan-orange.scss
+++ b/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: (
diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss
index 27c69c101a0e..d2b1b501ca25 100644
--- a/src/material/core/theming/prebuilt/deeppurple-amber.scss
+++ b/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);
diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss
index 1ce0fcfdd2e5..69befacb992a 100644
--- a/src/material/core/theming/prebuilt/indigo-pink.scss
+++ b/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);
diff --git a/src/material/core/theming/prebuilt/magenta-violet.scss b/src/material/core/theming/prebuilt/magenta-violet.scss
index 060ece5b8d65..22535103829c 100644
--- a/src/material/core/theming/prebuilt/magenta-violet.scss
+++ b/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: (
diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss
index 7e5b8bf81315..5872bd4d1e05 100644
--- a/src/material/core/theming/prebuilt/pink-bluegrey.scss
+++ b/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);
diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss
index ee4212d4cd54..851155e161e4 100644
--- a/src/material/core/theming/prebuilt/purple-green.scss
+++ b/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);
diff --git a/src/material/core/theming/prebuilt/rose-red.scss b/src/material/core/theming/prebuilt/rose-red.scss
index b9904a21702c..22efa203137a 100644
--- a/src/material/core/theming/prebuilt/rose-red.scss
+++ b/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: (