Skip to content

Commit c649f7d

Browse files
authored
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
1 parent f466a2b commit c649f7d

File tree

2 files changed

+7
-11
lines changed

2 files changed

+7
-11
lines changed

src/material-experimental/mdc-table/_table-theme.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,6 @@
5454
theming.get-typography-config($config-or-theme));
5555
@include mdc-helpers.mat-using-mdc-typography($config) {
5656
@include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
57-
58-
// MDC's header cell typography uses the `subtitle-2` config value. Due to legacy reasons,
59-
// this value is mapped from Angular Material's `subheading-1` config value. This is not
60-
// a perfect mapping because the Material spec shows the header having `font-weight: 500`
61-
// instead of `subheading-1`'s default weight of 400. This override makes sure that the
62-
// heading has the expected weight of 500.
63-
.mat-mdc-header-cell {
64-
font-weight: 500;
65-
}
6657
}
6758
}
6859

src/material/core/typography/_typography.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,13 @@
158158
headline-5: map.get($config, headline),
159159
headline-6: map.get($config, title),
160160
subtitle-1: map.get($config, subheading-2),
161-
subtitle-2: map.get($config, subheading-1),
162-
body-1: map.get($config, body-2),
161+
162+
// These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
163+
// in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
164+
// system.
165+
subtitle-2: map.get($config, body-2),
166+
body-1: map.get($config, subheading-1),
167+
163168
body-2: map.get($config, body-1),
164169
button: map.get($config, button),
165170
caption: map.get($config, caption),

0 commit comments

Comments
 (0)