From f4595b6433e8b4f89f7b8dbb47c8031b36f04723 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Aug 2024 20:33:40 +0200 Subject: [PATCH] fix(material/datepicker): calendar font tokens not being picked up We were setting the `calendar-text-font` and `calendar-text-size` tokens at the top level of the calendar which meant that it wasn't being picked up in the cells, because they have `button` elements which have user agent styles. These changes resolve the issue by explicitly setting the tokens. Also fixes that the font size was too big in M3. Fixes #29608. --- src/material/core/tokens/m2/mat/_datepicker.scss | 2 +- src/material/core/tokens/m3/mat/_datepicker.scss | 4 ++-- src/material/datepicker/calendar-body.scss | 7 +++++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/src/material/core/tokens/m2/mat/_datepicker.scss index e6ee31ec39c8..18231a105e99 100644 --- a/src/material/core/tokens/m2/mat/_datepicker.scss +++ b/src/material/core/tokens/m2/mat/_datepicker.scss @@ -106,7 +106,7 @@ $private-default-overlap-color: #a8dab5; // that were set in the previous theming API to reduce the amount of subtle screenshot // differences. We should look into introducing the other tokens in a follow-up. calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family), - calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything + calendar-text-size: 13px, calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size), calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight), diff --git a/src/material/core/tokens/m3/mat/_datepicker.scss b/src/material/core/tokens/m3/mat/_datepicker.scss index d49e965ba89a..02343b4931ab 100644 --- a/src/material/core/tokens/m3/mat/_datepicker.scss +++ b/src/material/core/tokens/m3/mat/_datepicker.scss @@ -73,8 +73,8 @@ $prefix: (mat, datepicker); token-definition.hardcode(elevation.get-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-text-font: map.get($systems, md-sys-typescale, body-medium-font), + calendar-text-size: map.get($systems, md-sys-typescale, body-medium-size), calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size), calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight), calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size), diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index 551c76d88970..e71068c1c915 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -90,6 +90,13 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( outline: none; font-family: inherit; margin: 0; + + // Needs to be repeated here in order to override the user agent styles. + @include token-utils.use-tokens($_tokens...) { + @include token-utils.create-token-slot(font-family, calendar-text-font); + @include token-utils.create-token-slot(font-size, calendar-text-size); + } + @include button-common.reset(); }