fix(datepicker): switch to typography api (#4950)

Switches the datepicker's typography styles to use the typography API and moves them into the theme file.

src/lib/core/typography/_all-typography.scss

@@ -5,6 +5,7 @@
 @import '../../card/card-theme';
 @import '../../checkbox/checkbox-theme';
 @import '../../chips/chips-theme';
+@import '../../datepicker/datepicker-theme';
 @import '../../dialog/dialog-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
@@ -34,6 +35,7 @@
   @include mat-card-typography($config);
   @include mat-checkbox-typography($config);
   @include mat-chips-typography($config);
+  @include mat-datepicker-typography($config);
   @include mat-dialog-typography($config);
   @include mat-grid-list-typography($config);
   @include mat-icon-typography($config);

src/lib/datepicker/_datepicker-theme.scss

@@ -1,5 +1,10 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+
+$mat-calendar-body-font-size: 13px !default;
+$mat-calendar-weekday-table-font-size: 11px !default;
 
 
 @mixin mat-datepicker-theme($theme) {
@@ -78,3 +83,28 @@
     border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
   }
 }
+
+@mixin mat-datepicker-typography($config) {
+  .mat-calendar {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-calendar-body {
+    font-size: $mat-calendar-body-font-size;
+  }
+
+  .mat-calendar-body-label,
+  .mat-calendar-period-button {
+    font: {
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+
+  .mat-calendar-table-header th {
+    font: {
+      size: $mat-calendar-weekday-table-font-size;
+      weight: mat-font-weight($config, body-1);
+    }
+  }
+}

src/lib/datepicker/calendar-body.scss

@@ -1,5 +1,3 @@
-$mat-calendar-body-font-size: 13px !default;
-$mat-calendar-body-header-font-size: 14px !default;
 $mat-calendar-body-label-padding-start: 5% !default;
 $mat-calendar-body-label-translation: -6px !default;
 $mat-calendar-body-cell-min-size: 32px !default;
@@ -13,7 +11,6 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
 
 
 .mat-calendar-body {
-  font-size: $mat-calendar-body-font-size;
   min-width: $mat-calendar-body-min-size;
 }
 
@@ -24,8 +21,6 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   line-height: 0;
   transform: translateX($mat-calendar-body-label-translation);
   text-align: left;
-  font-size: $mat-calendar-body-header-font-size;
-  font-weight: bold;
 }
 
 .mat-calendar-body-cell {

src/lib/datepicker/calendar.scss

@@ -6,10 +6,8 @@ $mat-calendar-controls-vertical-padding: 5%;
 $mat-calendar-controls-start-padding: calc(100% / 14 - 22px);
 // Same as above, but on other side for arrows.
 $mat-calendar-controls-end-padding: calc(100% / 14 - 22px);
-$mat-calendar-period-font-size: 14px;
 $mat-calendar-arrow-size: 5px !default;
 $mat-calendar-arrow-disabled-opacity: 0.5 !default;
-$mat-calendar-weekday-table-font-size: 11px !default;
 
 // Values chosen to approximate https://material.io/icons/#ic_navigate_before and
 // https://material.io/icons/#ic_navigate_next as closely as possible.
@@ -43,9 +41,6 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mat-calendar-period-button {
-  font: inherit;
-  font-size: $mat-calendar-period-font-size;
-  font-weight: bold;
   min-width: 0;
 }
 
@@ -108,8 +103,6 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-table-header th {
   text-align: center;
-  font-size: $mat-calendar-weekday-table-font-size;
-  font-weight: normal;
   padding: 0 0 $mat-calendar-padding 0;
 }