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

angular · Feb 12, 2024 · b77bf93 · b77bf93
1 parent 78a292b
commit b77bf93
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/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),

diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/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),
   );
 }
 

diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
@@ -75,10 +75,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;