From 51f205cc586da766c6daccea288460dedd734334 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 19 Sep 2024 14:27:28 -0400
Subject: [PATCH 1/3] refactor: move mat-elevation-* classes out of core

---
 src/dev-app/theme.scss        | 1 +
 src/material/_index.scss      | 2 +-
 src/material/core/_core.scss  | 7 +++++++
 src/universal-app/styles.scss | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 9a4eb8c6e9d3..456d58793135 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -25,6 +25,7 @@ $candy-app-theme: mat.m2-define-light-theme((
 // 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.elevation();
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
diff --git a/src/material/_index.scss b/src/material/_index.scss
index b00dcc5996e6..1d2af707f2e5 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -36,7 +36,7 @@
 @forward './core/style/validation' as private-*;
 
 // Structural
-@forward './core/core' show core;
+@forward './core/core' show core, elevation;
 @forward './core/ripple/ripple' show ripple;
 @forward './core/focus-indicators/private' show strong-focus-indicators,
   strong-focus-indicators-color, strong-focus-indicators-theme;
diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index f0080ea547a8..ca06849ca0ea 100644
--- a/src/material/core/_core.scss
+++ b/src/material/core/_core.scss
@@ -26,7 +26,14 @@
         @include token-utils.create-token-slot(background-color, background-color, transparent);
         @include token-utils.create-token-slot(color, text-color, inherit);
       }
+    }
+  }
+}
 
+// Mixin that provides the .mat-elevation-* classes.
+@mixin elevation() {
+  @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.
diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss
index 9e1af4470a0e..9ab2508f0651 100644
--- a/src/universal-app/styles.scss
+++ b/src/universal-app/styles.scss
@@ -1,6 +1,7 @@
 @use '@angular/material' as mat;
 
 @include mat.core();
+@include mat.elevation();
 
 $theme: mat.define-theme((
   color: (

From 4fbe8399cb9085330fc2b86c00aaaedbb8ed53e0 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 19 Sep 2024 14:29:52 -0400
Subject: [PATCH 2/3] fixup! refactor: move mat-elevation-* classes out of core

---
 src/dev-app/theme.scss        | 2 +-
 src/material/_index.scss      | 2 +-
 src/material/core/_core.scss  | 2 +-
 src/universal-app/styles.scss | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 456d58793135..f55c1ec44ec6 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -25,7 +25,7 @@ $candy-app-theme: mat.m2-define-light-theme((
 // 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.elevation();
+@include mat.elevation-classes();
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
diff --git a/src/material/_index.scss b/src/material/_index.scss
index 1d2af707f2e5..a9dcd056cd51 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -36,7 +36,7 @@
 @forward './core/style/validation' as private-*;
 
 // Structural
-@forward './core/core' show core, elevation;
+@forward './core/core' show core, elevation-classes;
 @forward './core/ripple/ripple' show ripple;
 @forward './core/focus-indicators/private' show strong-focus-indicators,
   strong-focus-indicators-color, strong-focus-indicators-theme;
diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index ca06849ca0ea..c94b4618026d 100644
--- a/src/material/core/_core.scss
+++ b/src/material/core/_core.scss
@@ -31,7 +31,7 @@
 }
 
 // Mixin that provides the .mat-elevation-* classes.
-@mixin elevation() {
+@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
diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss
index 9ab2508f0651..8a1de0b21fc1 100644
--- a/src/universal-app/styles.scss
+++ b/src/universal-app/styles.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 
 @include mat.core();
-@include mat.elevation();
+@include mat.elevation-classes();
 
 $theme: mat.define-theme((
   color: (

From c4e6fa0974ec341877d27a56b0eb8ed31485719b Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 19 Sep 2024 14:40:01 -0400
Subject: [PATCH 3/3] fixup! refactor: move mat-elevation-* classes out of core

---
 src/universal-app/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss
index 8a1de0b21fc1..9e1af4470a0e 100644
--- a/src/universal-app/styles.scss
+++ b/src/universal-app/styles.scss
@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 
 @include mat.core();
-@include mat.elevation-classes();
 
 $theme: mat.define-theme((
   color: (