From 028e44e8c932d2d7d506a6dccbfdc7957c888d12 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 20 Mar 2023 12:10:28 -0700
Subject: [PATCH] fix(dialog): incorrect elevation layering

PiperOrigin-RevId: 518039204
---
 button/lib/_text-button.scss |  2 +-
 dialog/lib/_dialog.scss      | 10 +++++++---
 dialog/lib/_tokens.scss      |  2 ++
 dialog/lib/dialog.ts         |  4 ++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss
index 89162b94ab..634632aeae 100644
--- a/button/lib/_text-button.scss
+++ b/button/lib/_text-button.scss
@@ -46,7 +46,7 @@ $_custom-property-prefix: 'text-button';
       --_#{$token}: #{$value};
     }
 
-    --_container-color: unset;
+    --_container-color: none;
   }
 }
 
diff --git a/dialog/lib/_dialog.scss b/dialog/lib/_dialog.scss
index 0c600973ef..313f9f618b 100644
--- a/dialog/lib/_dialog.scss
+++ b/dialog/lib/_dialog.scss
@@ -9,6 +9,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../elevation/elevation';
 @use '../../sass/color';
 @use '../../sass/resolvers';
 @use '../../sass/shape';
@@ -119,9 +120,12 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    --md-elevation-level: var(--_container-elevation);
-    --md-elevation-surface-tine-color: var(
-      --_container-surface-tint-layer-color
+
+    @include elevation.theme(
+      (
+        level: var(--_container-elevation),
+        surface-tint: var(--_container-surface-tint-layer-color),
+      )
     );
   }
 
diff --git a/dialog/lib/_tokens.scss b/dialog/lib/_tokens.scss
index b7b3dcfeff..25f4907907 100644
--- a/dialog/lib/_tokens.scss
+++ b/dialog/lib/_tokens.scss
@@ -8,6 +8,7 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../elevation/lib/elevation';
 @use '../../sass/color';
 @use '../../sass/shape';
 @use '../../sass/string-ext';
@@ -85,5 +86,6 @@ $_fullscreen-tokens: (
  */
 @function md-comp-dialog-values() {
   $tokens: remove-unsupported-tokens(tokens.md-comp-dialog-values());
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
   @return map.merge(map.merge($tokens, $_tokens), $_fullscreen-tokens);
 }
diff --git a/dialog/lib/dialog.ts b/dialog/lib/dialog.ts
index 54a77b4bf4..5985648998 100644
--- a/dialog/lib/dialog.ts
+++ b/dialog/lib/dialog.ts
@@ -275,6 +275,7 @@ export class Dialog extends LitElement {
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handleDragEnd}
       >
+        <md-elevation surface></md-elevation>
         <header class="header">
           <slot name="header">
             <slot name="headline-prefix"></slot>
@@ -288,7 +289,6 @@ export class Dialog extends LitElement {
         <footer class="footer">
           <slot name="footer"></slot>
         </footer>
-        <md-elevation surface></md-elevation>
       </div>
     </dialog>`;
   }
@@ -544,4 +544,4 @@ export class Dialog extends LitElement {
     this.dragging = false;
     this.dragInfo = undefined;
   }
-}
\ No newline at end of file
+}