fix(material/datepicker): fix touchui shadow and border-radius (#28577)

* fix(material/datepicker): fix touchui shadow and border-radius

* fix(material/datepicker): fix lint

Author: andrewseguin

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

@@ -371,7 +371,10 @@
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
     calendar-container-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
       $exclude-hardcoded),
+    calendar-container-touch-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
+    calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
     calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
     calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),

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

@@ -33,7 +33,9 @@ $private-default-overlap-color: #a8dab5;
 @function get-unthemable-tokens() {
   @return (
     calendar-container-shape: 4px,
+    calendar-container-touch-shape: 4px,
     calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+    calendar-container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
   );
 }
 

src/material/datepicker/datepicker-content.scss

@@ -1,4 +1,3 @@
-@use '../core/style/elevation';
 @use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
 @use '../core/tokens/token-utils';
 
@@ -75,10 +74,15 @@ $touch-max-height: 788px;
 }
 
 .mat-datepicker-content-touch {
-  @include elevation.elevation(24);
   display: block;
   max-height: 80vh;
 
+  @include token-utils.use-tokens(
+      tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()) {
+    @include token-utils.create-token-slot(box-shadow, calendar-container-touch-elevation-shadow);
+    @include token-utils.create-token-slot(border-radius, calendar-container-touch-shape);
+  }
+
   // Allows for the screen reader close button to be seen in touch UI mode.
   position: relative;