fix(material/datepicker): fix M3 styles (#28556)

* fix(material/datepicker): fix M3 styles

* fix(material/datepicker): fix m2 text button color

Author: andrewseguin

src/dev-app/datepicker/datepicker-demo.html

@@ -15,7 +15,7 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field color="accent">
+  <mat-form-field [color]="color">
     <mat-label>Min date</mat-label>
     <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
         [disabled]="inputDisabled" [max]="maxDate">
@@ -29,7 +29,7 @@ <h2>Options</h2>
       }
     </mat-datepicker>
   </mat-form-field>
-  <mat-form-field color="accent">
+  <mat-form-field [color]="color">
     <mat-label>Max date</mat-label>
     <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
         [disabled]="inputDisabled" [min]="minDate">
@@ -45,7 +45,7 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field color="accent">
+  <mat-form-field [color]="color">
     <mat-label>Start at date</mat-label>
     <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
         [disabled]="inputDisabled">

src/material-experimental/theming/_custom-tokens.scss

@@ -341,9 +341,10 @@
     toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant),
+    calendar-header-divider-color: transparent,
     calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change(
@@ -368,6 +369,9 @@
     ),
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     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-shape: map.get($systems, md-sys-shape, corner-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),

src/material/core/tokens/m2/mat/_datepicker.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
@@ -30,7 +31,10 @@ $private-default-overlap-color: #a8dab5;
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    calendar-container-shape: 4px,
+    calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -43,6 +47,8 @@ $private-default-overlap-color: #a8dab5;
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
 
   $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
@@ -67,6 +73,7 @@ $private-default-overlap-color: #a8dab5;
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
+    calendar-period-button-text-color: $on-surface,
     calendar-period-button-icon-color: $inactive-icon-color,
     calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-divider-color: $divider-color,

src/material/datepicker/_datepicker-theme.scss

@@ -34,7 +34,12 @@ $calendar-weekday-table-font-size: 11px !default;
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-unthemable-tokens());
+    }
+  }
 }
 
 /// Outputs color theme styles for the mat-datepicker.

src/material/datepicker/calendar.scss

@@ -59,6 +59,8 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(font-size, calendar-period-button-text-size);
     @include token-utils.create-token-slot(font-weight, calendar-period-button-text-weight);
+    @include token-utils.create-token-slot(--mdc-text-button-label-text-color,
+      calendar-period-button-text-color);
   }
 }
 

src/material/datepicker/datepicker-content.scss

@@ -27,14 +27,15 @@ $touch-max-height: 788px;
 
 
 .mat-datepicker-content {
-  @include elevation.elevation(4);
   display: block;
   border-radius: 4px;
 
   @include token-utils.use-tokens(
     tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()) {
     @include token-utils.create-token-slot(background-color, calendar-container-background-color);
     @include token-utils.create-token-slot(color, calendar-container-text-color);
+    @include token-utils.create-token-slot(box-shadow, calendar-container-elevation-shadow);
+    @include token-utils.create-token-slot(border-radius, calendar-container-shape);
   }
 
   .mat-calendar {