From b77bf93a7b0dcde360943a04d755cc1e126418d7 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 12 Feb 2024 06:09:24 -0700 Subject: [PATCH 1/2] fix(material/datepicker): fix touchui shadow and border-radius --- src/material-experimental/theming/_custom-tokens.scss | 3 +++ src/material/core/tokens/m2/mat/_datepicker.scss | 2 ++ src/material/datepicker/datepicker-content.scss | 7 ++++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 7a0002fc360d..decc9cca6a5d 100644 --- 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 index b950c712ee4b..6493a5d45776 100644 --- 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 index bda7655a1cb5..5a86417fcdf9 100644 --- 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; From e12aee265180350ccd4f45e880519512a427ee8d Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 13 Feb 2024 13:40:31 -0700 Subject: [PATCH 2/2] fix(material/datepicker): fix lint --- src/material/datepicker/datepicker-content.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss index 5a86417fcdf9..3184ed325cf6 100644 --- a/src/material/datepicker/datepicker-content.scss +++ b/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';