From 5f9c9d4b198400f562a6e775a81602ec3ffe3832 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 24 Sep 2021 13:11:15 -0700 Subject: [PATCH] fix(material-experimental/mdc-typography): better mappings for 2014 to 2018 typography (#23618) * fix(material-experimental/mdc-menu): fix bold font when using 2014 typography * fix(material-experimental/mdc-typography): better mappings for 2014 to 2018 typography This PR cleans up some typography hacks in menu and table in favor of a higher level fix in the mapping code itself. Despite the naming subheading-1 in the 2014 system looks more like body-1 in the 2018 system and body-2 in the 2014 system looks more like subtitle-2 in the 2018 system. See my hackmd for the original typography mapping plan for a side-by-side comparison of the different levels & systems: https://hackmd.io/-IBynZC1QHCBefcFQyaAkA (cherry picked from commit c649f7dfca3df2cd3a47365a2930718dab4a8a09) --- src/material-experimental/mdc-table/_table-theme.scss | 9 --------- src/material/core/typography/_typography.scss | 9 +++++++-- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss index 80e57e65ec99..3fbf1b73c5df 100644 --- a/src/material-experimental/mdc-table/_table-theme.scss +++ b/src/material-experimental/mdc-table/_table-theme.scss @@ -54,15 +54,6 @@ theming.get-typography-config($config-or-theme)); @include mdc-helpers.mat-using-mdc-typography($config) { @include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query); - - // MDC's header cell typography uses the `subtitle-2` config value. Due to legacy reasons, - // this value is mapped from Angular Material's `subheading-1` config value. This is not - // a perfect mapping because the Material spec shows the header having `font-weight: 500` - // instead of `subheading-1`'s default weight of 400. This override makes sure that the - // heading has the expected weight of 500. - .mat-mdc-header-cell { - font-weight: 500; - } } } diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss index 541b2903f859..12d74db0d12a 100644 --- a/src/material/core/typography/_typography.scss +++ b/src/material/core/typography/_typography.scss @@ -158,8 +158,13 @@ headline-5: map.get($config, headline), headline-6: map.get($config, title), subtitle-1: map.get($config, subheading-2), - subtitle-2: map.get($config, subheading-1), - body-1: map.get($config, body-2), + + // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2 + // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018 + // system. + subtitle-2: map.get($config, body-2), + body-1: map.get($config, subheading-1), + body-2: map.get($config, body-1), button: map.get($config, button), caption: map.get($config, caption),