refactor(material-experimental/theming): align sidenav with M3 (#28518)

Aligns the sidenav styles with the M3 spec.

Author: crisbeto

src/dev-app/dev-app/dev-app-layout.scss

@@ -15,7 +15,6 @@ body {
   }
 
   .mat-sidenav {
-    min-width: 15vw;
     position: fixed;
 
     .mat-mdc-button {

src/dev-app/theme-m3.scss

@@ -108,6 +108,7 @@ dev-app {
     left: 50%;
     transform: translateX(-50%);
     padding: 8px;
+    border-radius: 8px 8px 0 0;
     background: red;
     color: white;
   }

src/material-experimental/theming/_custom-tokens.scss

@@ -1034,12 +1034,14 @@
 /// @return {Map} A set of custom tokens for the mat-sidenav
 @function sidenav($systems, $exclude-hardcoded) {
   @return (
-    container-shape: 16px,
-    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-elevation-shadow: _hardcode(none, $exclude-hardcoded),
+    container-divider-color: _hardcode(transparent, $exclude-hardcoded),
+    container-width: _hardcode(360px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
     container-background-color: map.get($systems, md-sys-color, surface),
     container-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    content-background-color: _hardcode(inherit, $exclude-hardcoded),
-    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    content-background-color: map.get($systems, md-sys-color, background),
+    content-text-color: map.get($systems, md-sys-color, on-background),
     scrim-color: mat.private-safe-color-change(
         map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
   );

src/material/core/tokens/m2/mat/_sidenav.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use '../../token-utils';
@@ -14,6 +15,8 @@ $prefix: (mat, sidenav);
     // Currently zero, but it appears to be relevant for M3.
     // See: https://m3.material.io/components/navigation-drawer/overview
     container-shape: 0,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-width: auto,
   );
 }
 

src/material/sidenav/drawer.scss

@@ -4,7 +4,6 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/variables';
 @use '../core/style/layout-common';
-@use '../core/style/elevation';
 
 $drawer-content-z-index: 1;
 $drawer-side-drawer-z-index: 2;
@@ -122,17 +121,16 @@ $drawer-over-drawer-z-index: 4;
 .mat-drawer {
   $high-contrast-border: solid 1px currentColor;
 
-  // The elevation of z-16 is noted in the design specifications.
-  // See https://material.io/design/components/navigation-drawer.html
-  @include elevation.elevation(16);
   @include drawer-stacking-context($drawer-over-drawer-z-index);
 
   @include token-utils.use-tokens(
     tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
     @include token-utils.create-token-slot(color, container-text-color);
+    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
     @include token-utils.create-token-slot(background-color, container-background-color);
     @include token-utils.create-token-slot(border-top-right-radius, container-shape);
     @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+    @include token-utils.create-token-slot(width, container-width);
   }
 
   display: block;