fix(material/datepicker): calendar font tokens not being picked up (#…

…29610) (#29615)

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

@@ -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),

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),

src/material/datepicker/calendar-body.scss

@@ -91,6 +91,12 @@ $_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);
+  }
 }
 
 // We use ::before to apply a background to the body cell, because we need to apply a border