diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss index 015c2a90b22..4453d6a4ef5 100644 --- a/src/lib/core/typography/_all-typography.scss +++ b/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); diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss index 0181df45aa9..9943107a4de 100644 --- a/src/lib/expansion/_expansion-theme.scss +++ b/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); + } +} diff --git a/src/lib/expansion/expansion-panel-header.scss b/src/lib/expansion/expansion-panel-header.scss index 6a2dab8e9b2..463f9b458d8 100644 --- a/src/lib/expansion/expansion-panel-header.scss +++ b/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; }