From 901a5cbd12e56b52f6bcee416f057e833dcdce32 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Wed, 24 Jan 2024 08:26:57 -0800
Subject: [PATCH] chore(elevation): move private custom properties off of host

Elevation doesn't have variant styles, but it still uses shorter private custom properties to reduce its CSS size. I added a comment explaining why and moved the custom properties into the inner shadow dom so they can't be set on the host.

No size changes.

PiperOrigin-RevId: 601128500
---
 elevation/internal/_elevation.scss | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/elevation/internal/_elevation.scss b/elevation/internal/_elevation.scss
index b1b310646b..4151b9452e 100644
--- a/elevation/internal/_elevation.scss
+++ b/elevation/internal/_elevation.scss
@@ -27,12 +27,11 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-elevation-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-elevation-#{$token}, #{$value}));
+  }
 
   :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-elevation-#{$token}, #{$value});
-    }
-
     display: flex;
     pointer-events: none;
   }
@@ -53,6 +52,13 @@
   .shadow::after {
     content: '';
     transition-property: box-shadow, opacity;
+
+    // Elevation doesn't share styles with multiple variants, so we normally
+    // would not use private custom properties. However, these variables are
+    // repeated several times in the styles below, and a shorter custom property
+    // reduces the CSS size, minified and gzip.
+    --_level: #{map.get($tokens, 'level')};
+    --_shadow-color: #{map.get($tokens, 'shadow-color')};
   }
 
   // Key box shadow