Skip to content

Commit b2e7cd3

Browse files
committed
refactor(material/core): add functions for normalizing to 2014 and (#21516)
2018 style typography configs. This is part of a plan to reconcile how typography is handled in the different versions of Material Design (both external versions and Google's internal spec). (cherry picked from commit d53c60f)
1 parent 3e9ef44 commit b2e7cd3

File tree

1 file changed

+39
-9
lines changed

1 file changed

+39
-9
lines changed

src/material/core/typography/_typography.scss

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,24 +74,54 @@
7474
@return map-get($config, headline-1) != null;
7575
}
7676

77+
// Whether a config is for the Material Design 2014 typography system.
78+
@function mat-private-typography-is-2014-config($config) {
79+
@return map-get($config, headline) != null;
80+
}
81+
7782
// Given a config for either the 2014 or 2018 Material Design typography system,
7883
// produces a normalized typography config for the 2014 Material Design typography system.
7984
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
8085
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
81-
@function mat-private-typography-normalized-config($config) {
86+
@function mat-private-typography-to-2014-config($config) {
8287
@if mat-private-typography-is-2018-config($config) {
8388
@return mat-typography-config(
84-
$display-3: map-get($config, display-1),
85-
$display-2: map-get($config, display-2),
86-
$display-1: map-get($config, display-3),
87-
$headline: map-get($config, headline-4),
88-
$title: map-get($config, subtitle-1),
89-
$subheading-2: map-get($config, subhead-1),
90-
$subheading-1: map-get($config, subhead-2),
89+
$display-4: map-get($config, headline-1),
90+
$display-3: map-get($config, headline-2),
91+
$display-2: map-get($config, headline-3),
92+
$display-1: map-get($config, headline-4),
93+
$headline: map-get($config, headline-5),
94+
$title: map-get($config, headline-6),
95+
$subheading-2: map-get($config, subtitle-1),
96+
$subheading-1: map-get($config, subtitle-2),
9197
$body-2: map-get($config, body-1),
9298
$body-1: map-get($config, body-2),
93-
$caption: map-get($config, caption),
9499
$button: map-get($config, button),
100+
$caption: map-get($config, caption),
101+
);
102+
}
103+
@return $config;
104+
}
105+
106+
// Given a config for either the 2014 or 2018 Material Design typography system,
107+
// produces a normalized typography config for the 2018 Material Design typography system.
108+
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
109+
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
110+
@function mat-private-typography-to-2018-config($config) {
111+
@if mat-private-typography-is-2014-config($config) {
112+
@return (
113+
headline-1: map-get($config, display-4),
114+
headline-2: map-get($config, display-3),
115+
headline-3: map-get($config, display-2),
116+
headline-4: map-get($config, display-1),
117+
headline-5: map-get($config, headline),
118+
headline-6: map-get($config, title),
119+
subtitle-1: map-get($config, subheading-2),
120+
subtitle-2: map-get($config, subheading-1),
121+
body-1: map-get($config, body-2),
122+
body-2: map-get($config, body-1),
123+
button: map-get($config, button),
124+
caption: map-get($config, caption),
95125
);
96126
}
97127
@return $config;

0 commit comments

Comments
 (0)