From a9190d44f3e3f9a2d1e3ff488a9c233ddacc343c Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 21 Sep 2021 22:17:41 +0000 Subject: [PATCH 1/2] fix(material-experimental/mdc-menu): fix bold font when using 2014 typography --- src/material-experimental/mdc-menu/_menu-theme.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index f84c6aa13296..ad798cf5bddf 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; @use '@material/menu-surface' as mdc-menu-surface; @@ -47,6 +48,18 @@ @mixin typography($config-or-theme) { $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); + + // When the 2014 typography config is mapped to the 2018 config, the font-weight that winds up + // getting used for menu items looks slightly off. In this case we override it to a value that + // looks better. + @if (typography.private-typography-is-2014-config($config-or-theme)) { + $config: map.merge($config, ( + body-1: map.merge(map.get($config, body-1), ( + font-weight: 400 + )) + )); + } + @include mdc-helpers.mat-using-mdc-typography($config) { @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query); From d6bdfae39e63f137d923f204d0f9ed86874394fd Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 22 Sep 2021 17:29:27 +0000 Subject: [PATCH 2/2] 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 --- src/material-experimental/mdc-menu/_menu-theme.scss | 13 ------------- .../mdc-table/_table-theme.scss | 9 --------- src/material/core/typography/_typography.scss | 9 +++++++-- 3 files changed, 7 insertions(+), 24 deletions(-) diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index ad798cf5bddf..f84c6aa13296 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; @use '@material/menu-surface' as mdc-menu-surface; @@ -48,18 +47,6 @@ @mixin typography($config-or-theme) { $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - - // When the 2014 typography config is mapped to the 2018 config, the font-weight that winds up - // getting used for menu items looks slightly off. In this case we override it to a value that - // looks better. - @if (typography.private-typography-is-2014-config($config-or-theme)) { - $config: map.merge($config, ( - body-1: map.merge(map.get($config, body-1), ( - font-weight: 400 - )) - )); - } - @include mdc-helpers.mat-using-mdc-typography($config) { @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query); 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 0d24c3982508..55b3fb619705 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),