fix(expansion-panel): set up typography styles (#5739)

* Sets up the typography for the expansion panel module.
* Starts using the appropriate typography styles from the config and fixes the panel not having a defined font family.
* Fixes the panel content inheriting its font size from the body.

Author: crisbeto

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

@@ -8,6 +8,7 @@
 @import '../../table/table-theme';
 @import '../../datepicker/datepicker-theme';
 @import '../../dialog/dialog-theme';
+@import '../../expansion/expansion-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
 @import '../../input/input-theme';
@@ -45,6 +46,7 @@
   @include mat-table-typography($config);
   @include mat-datepicker-typography($config);
   @include mat-dialog-typography($config);
+  @include mat-expansion-panel-typography($config);
   @include mat-grid-list-typography($config);
   @include mat-icon-typography($config);
   @include mat-input-typography($config);

src/lib/expansion/_expansion-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 @mixin mat-expansion-panel-theme($theme) {
   $background: map-get($theme, background);
@@ -31,3 +32,17 @@
     color: mat-color($foreground, secondary-text);
   }
 }
+
+@mixin mat-expansion-panel-typography($config) {
+  .mat-expansion-panel-header {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, subheading-1);
+      weight: mat-font-weight($config, subheading-1);
+    }
+  }
+
+  .mat-expansion-panel-content {
+    @include mat-typography-level-to-styles($config, body-1);
+  }
+}

src/lib/expansion/expansion-panel-header.scss

@@ -35,14 +35,12 @@ $mat-expansion-panel-header-height-expanded: 64px;
 .mat-expansion-panel-header-title {
   display: flex;
   flex-grow: 1;
-  font-size: 15px;
   margin-right: 16px;
 }
 
 .mat-expansion-panel-header-description {
   display: flex;
   flex-grow: 2;
-  font-size: 15px;
   margin-right: 16px;
 }