fix(navigationdrawer): tonal surface update

PiperOrigin-RevId: 522235172
material-components · Apr 6, 2023 · 4f9df51 · 4f9df51
1 parent 3934f51
commit 4f9df51
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 26 deletions.
diff --git a/navigationdrawer/lib/_navigation-drawer-modal.scss b/navigationdrawer/lib/_navigation-drawer-modal.scss
@@ -21,17 +21,16 @@ $_delay: 0s;
 $_transition-duration: 0.25s;
 
 $_reference: (
-  container-color: #fff,
-  container-height: 100%,
-  container-shape: 0 16px 16px 0,
-  container-surface-tint-layer-color: null,
-  container-width: 360px,
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  'container-width': 360px,
   // TODO(b/216384393): Temporary existing token to use for shadow color
-  divider-color: #000,
-  modal-container-elevation: 1,
-  scrim-color: null,
-  scrim-opacity: 0.04,
-  standard-container-elevation: 0,
+  'divider-color': #000,
+  'modal-container-elevation': 1,
+  'scrim-color': null,
+  'scrim-opacity': 0.04,
+  'standard-container-elevation': 0,
 );
 
 $_custom-property-prefix: 'navigation-drawer-modal';
@@ -56,7 +55,7 @@ $_custom-property-prefix: 'navigation-drawer-modal';
 
     @include elevation.theme(
       (
-        level: var(--_modal-container-elevation),
+        'level': var(--_modal-container-elevation),
       )
     );
   }

diff --git a/navigationdrawer/lib/_navigation-drawer.scss b/navigationdrawer/lib/_navigation-drawer.scss
@@ -19,15 +19,14 @@ $delay: 0s;
 $transition-duration: 0.25s;
 
 $_reference: (
-  container-color: #fff,
-  container-height: 100%,
-  container-shape: 0 16px 16px 0,
-  container-surface-tint-layer-color: null,
-  container-width: 360px,
+  'container-color': #fff,
+  'container-height': 100%,
+  'container-shape': 0 16px 16px 0,
+  'container-width': 360px,
   // TODO(b/216384393): Temporary existing token to use for shadow color
-  divider-color: #000,
-  modal-container-elevation: 1,
-  standard-container-elevation: 0,
+  'divider-color': #000,
+  'modal-container-elevation': 1,
+  'standard-container-elevation': 0,
 );
 
 $_custom-property-prefix: 'navigation-drawer';
@@ -52,9 +51,8 @@ $_custom-property-prefix: 'navigation-drawer';
 
     @include elevation.theme(
       (
-        level: var(--_standard-container-elevation),
-        shadow-color: var(--_divider-color),
-        surface-tint: var(--_container-surface-tint-layer-color),
+        'level': var(--_standard-container-elevation),
+        'shadow-color': var(--_divider-color),
       )
     );
   }

diff --git a/navigationdrawer/lib/navigation-drawer.ts b/navigationdrawer/lib/navigation-drawer.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation-surface.js';
+import '../../elevation/elevation.js';
 
 import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
@@ -56,7 +56,7 @@ export class NavigationDrawer extends LitElement {
         aria-modal="${this.ariaModal}"
         class="md3-navigation-drawer ${this.getRenderClasses()}"
         role="dialog">
-        <md-elevation-surface shadow></md-elevation-surface>
+        <md-elevation></md-elevation>
         <div class="md3-navigation-drawer__slot-content">
           <slot></slot>
         </div>

diff --git a/tokens/_md-comp-navigation-drawer.scss b/tokens/_md-comp-navigation-drawer.scss
@@ -9,8 +9,7 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-navigation-drawer';
+@use './v0_172/md-comp-navigation-drawer';
 // go/keep-sorted end
 
 $_default: (