fix(material-experimental/mdc-typography): better mappings for 2014 t…

…o 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 c649f7d)

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;
-    }
   }
 }
 

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),