bug(datepicker): Value of calendar text size CSS variable is overriden by the user agent stylesheet

[zilia-gmethot]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The --mat-datepicker-calendar-text-size CSS variable of Angular Material's datepicker isn't applied properly because the font size of children element is overriden by the browser user agent style for the button element.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-dmhaw2?file=src%2Fglobal-styles.scss

Steps to reproduce:

1. In global-styles.scss, change the value of the --mat-datepicker-calendar-text-size and note that it doesn't affect the size of the day values of the datepicker.

Expected Behavior

I should be able to configure the font-size of the day values of the datepicker by setting a different value to the --mat-datepicker-calendar-text-size CSS variable.

Actual Behavior

When configuring the font-size of the day values of the datepicker by setting a different value to the --mat-datepicker-calendar-text-size CSS variable, no change occurs.

Environment

• Angular: 18.2.0
• CDK/Material: 18.2.0
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[zilia-gmethot]

@crisbeto Thank you so much!