Skip to content

Commit 63db51f

Browse files
crisbetoandrewseguin
crisbeto
authored and
andrewseguin
committed
refactor(typography): adjust breakpoints and add margins (#5009)
* Reworks the typography mappings to avoid excessively large headers. Previously the `display-*` breakpoints were mapped to `h*` elements, which was inaccurate. Now the `display-*` breakpoints aren't mapped to anything and the headers start from the `headline` breakpoint. * Replaces the `subheader` breakpoint with `subheader-2` and `subheader-1`. `subheader-2` correspond to the old `subheader`. * Adds margins to the headers and paragraphs. * Adds aliases that correspond exactly to the terminology from the spec.
1 parent 3ad80e4 commit 63db51f

File tree

7 files changed

+125
-92
lines changed

7 files changed

+125
-92
lines changed

‎src/demo-app/typography/typography-demo.html‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
11
<!-- via https://en.wikipedia.org/wiki/Pangram -->
2-
<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
3-
<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
4-
<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
5-
<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
6-
<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
7-
<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
8-
<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
2+
<div class="mat-typography">
3+
<h1 class="mat-display-4">How vexingly quick daft zebras jump!</h1>
4+
<h1 class="mat-display-3">The wizard quickly jinxed the gnomes before they vaporized.</h1>
5+
<h1 class="mat-display-2">The quick brown fox jumps over the lazy dog.</h1>
6+
<h1 class="mat-display-1">Grumpy wizards make toxic brew for the evil queen and jack.</h1>
7+
<h1>Jackdaws love my big sphinx of quartz.</h1>
8+
<h2>The five boxing wizards jump quickly.</h2>
9+
<h3>Pack my box with five dozen liquor jugs.</h3>
10+
<h4>Bright vixens jump; dozy fowl quack.</h4>
911

10-
<div class="mat-body">
11-
<p>
12-
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
13-
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
14-
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
15-
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
16-
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
17-
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
18-
</p>
12+
<div class="mat-body">
13+
<p>
14+
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
15+
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
16+
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
17+
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
18+
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
19+
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
20+
</p>
1921

20-
<p>
21-
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
22-
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
23-
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
24-
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
25-
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
26-
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
27-
</p>
22+
<p>
23+
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
24+
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
25+
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
26+
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
27+
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
28+
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
29+
</p>
2830

29-
<p>
30-
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
31-
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
32-
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
33-
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
34-
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
35-
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
36-
</p>
31+
<p>
32+
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
33+
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
34+
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
35+
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
36+
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
37+
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
38+
</p>
39+
</div>
3740
</div>

‎src/lib/core/option/_option-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
.mat-option {
4949
font: {
5050
family: mat-font-family($config);
51-
size: mat-font-size($config, subheading);
51+
size: mat-font-size($config, subheading-2);
5252
}
5353
}
5454
}

‎src/lib/core/typography/_typography.scss‎

Lines changed: 85 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,90 +12,119 @@
1212
// Represents a collection of typography levels.
1313
// Defaults come from https://material.io/guidelines/style/typography.html
1414
@function mat-typography-config(
15-
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
16-
$display-4: mat-typography-level(112px, 112px, 300),
17-
$display-3: mat-typography-level(56px, 56px, 400),
18-
$display-2: mat-typography-level(45px, 48px, 400),
19-
$display-1: mat-typography-level(34px, 40px, 400),
20-
$headline: mat-typography-level(24px, 32px, 400),
21-
$title: mat-typography-level(20px, 20px, 500),
22-
$subheading: mat-typography-level(16px, 28px, 400),
23-
$body-2: mat-typography-level(14px, 24px, 500),
24-
$body-1: mat-typography-level(14px, 20px, 400),
25-
$caption: mat-typography-level(12px, 12px, 400),
26-
$button: mat-typography-level(14px, 14px, 500),
15+
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
16+
$display-4: mat-typography-level(112px, 112px, 300),
17+
$display-3: mat-typography-level(56px, 56px, 400),
18+
$display-2: mat-typography-level(45px, 48px, 400),
19+
$display-1: mat-typography-level(34px, 40px, 400),
20+
$headline: mat-typography-level(24px, 32px, 400),
21+
$title: mat-typography-level(20px, 32px, 500),
22+
$subheading-2: mat-typography-level(16px, 28px, 400),
23+
$subheading-1: mat-typography-level(15px, 24px, 400),
24+
$body-2: mat-typography-level(14px, 24px, 500),
25+
$body-1: mat-typography-level(14px, 20px, 400),
26+
$caption: mat-typography-level(12px, 20px, 400),
27+
$button: mat-typography-level(14px, 14px, 500),
2728
// Line-height must be unit-less fraction of the font-size.
28-
$input: mat-typography-level(inherit, 1.125, 400)
29+
$input: mat-typography-level(inherit, 1.125, 400)
2930
) {
3031
@return (
31-
font-family: $font-family,
32-
display-4: $display-4,
33-
display-3: $display-3,
34-
display-2: $display-2,
35-
display-1: $display-1,
36-
headline: $headline,
37-
title: $title,
38-
subheading: $subheading,
39-
body-2: $body-2,
40-
body-1: $body-1,
41-
caption: $caption,
42-
button: $button,
43-
input: $input,
32+
font-family: $font-family,
33+
display-4: $display-4,
34+
display-3: $display-3,
35+
display-2: $display-2,
36+
display-1: $display-1,
37+
headline: $headline,
38+
title: $title,
39+
subheading-2: $subheading-2,
40+
subheading-1: $subheading-1,
41+
body-2: $body-2,
42+
body-1: $body-1,
43+
caption: $caption,
44+
button: $button,
45+
input: $input,
4446
);
4547
}
4648

4749
// Adds the base typography styles, based on a config.
48-
// TODO(crisbeto): the headers need to handle margins as well.
4950
@mixin mat-base-typography($config, $selector: '.mat-typography') {
50-
.mat-h0, .mat-hero-header {
51-
@include mat-typography-level-to-styles($config, display-4);
52-
53-
// Note: The spec doesn't mention letter spacing. The value comes from
54-
// eyeballing it until it looked exactly like the spec examples.
55-
letter-spacing: -0.05em;
56-
}
57-
58-
.mat-h1, #{$selector} h1 {
59-
@include mat-typography-level-to-styles($config, display-3);
60-
61-
// Note: The spec doesn't mention letter spacing. The value comes from
62-
// eyeballing it until it looked exactly like the spec examples.
63-
letter-spacing: -0.02em;
51+
.mat-h1, .mat-headline, #{$selector} h1 {
52+
@include mat-typography-level-to-styles($config, headline);
53+
margin: 0 0 16px;
6454
}
6555

66-
.mat-h2, #{$selector} h2 {
67-
@include mat-typography-level-to-styles($config, display-2);
68-
69-
// Note: The spec doesn't mention letter spacing. The value comes from
70-
// eyeballing it until it looked exactly like the spec examples.;
71-
letter-spacing: -0.005em;
56+
.mat-h2, .mat-title, #{$selector} h2 {
57+
@include mat-typography-level-to-styles($config, title);
58+
margin: 0 0 16px;
7259
}
7360

74-
.mat-h3, #{$selector} h3 {
75-
@include mat-typography-level-to-styles($config, display-1);
61+
.mat-h3, .mat-subheading-2, #{$selector} h3 {
62+
@include mat-typography-level-to-styles($config, subheading-2);
63+
margin: 0 0 16px;
7664
}
7765

78-
.mat-h4, #{$selector} h4 {
79-
@include mat-typography-level-to-styles($config, headline);
66+
.mat-h4, .mat-subheading-1, #{$selector} h4 {
67+
@include mat-typography-level-to-styles($config, subheading-1);
68+
margin: 0 0 16px;
8069
}
8170

71+
// Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
72+
// consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
73+
// and h6 at 0.67em.
8274
.mat-h5, #{$selector} h5 {
83-
@include mat-typography-level-to-styles($config, title);
75+
font-size: mat-font-size($config, body-1) * 0.83;
76+
font-weight: mat-font-weight($config, body-1);
77+
font-family: mat-font-family($config);
78+
line-height: mat-line-height($config, body-1);
79+
margin: 0 0 12px;
8480
}
8581

8682
.mat-h6, #{$selector} h6 {
87-
@include mat-typography-level-to-styles($config, subheading);
83+
font-size: mat-font-size($config, body-1) * 0.67;
84+
font-weight: mat-font-weight($config, body-1);
85+
font-family: mat-font-family($config);
86+
line-height: mat-line-height($config, body-1);
87+
margin: 0 0 12px;
8888
}
8989

90-
.mat-body-strong {
90+
.mat-body-strong, .mat-body-2 {
9191
@include mat-typography-level-to-styles($config, body-2);
9292
}
9393

94-
.mat-body, #{$selector} {
94+
.mat-body, .mat-body-1, #{$selector} {
9595
@include mat-typography-level-to-styles($config, body-1);
96+
97+
p {
98+
margin: 0 0 12px;
99+
}
96100
}
97101

98-
.mat-small {
102+
.mat-small, .mat-caption {
99103
@include mat-typography-level-to-styles($config, caption);
100104
}
105+
106+
// Note: The spec doesn't mention letter spacing. The value comes from
107+
// eyeballing it until it looked exactly like the spec examples.
108+
.mat-display-4, #{$selector} .mat-display-4 {
109+
@include mat-typography-level-to-styles($config, display-4);
110+
margin: 0 0 56px;
111+
letter-spacing: -0.05em;
112+
}
113+
114+
.mat-display-3, #{$selector} .mat-display-3 {
115+
@include mat-typography-level-to-styles($config, display-3);
116+
margin: 0 0 64px;
117+
letter-spacing: -0.02em;
118+
}
119+
120+
.mat-display-2, #{$selector} .mat-display-2 {
121+
@include mat-typography-level-to-styles($config, display-2);
122+
margin: 0 0 64px;
123+
letter-spacing: -0.005em;
124+
}
125+
126+
.mat-display-1, #{$selector} .mat-display-1 {
127+
@include mat-typography-level-to-styles($config, display-1);
128+
margin: 0 0 64px;
129+
}
101130
}

‎src/lib/list/_list-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
// Default list
4242
.mat-list, .mat-nav-list {
4343
.mat-list-item {
44-
font-size: mat-font-size($config, subheading);
44+
font-size: mat-font-size($config, subheading-2);
4545
@include mat-line-base(mat-font-size($config, body-1));
4646
}
4747

‎src/lib/menu/_menu-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
.mat-menu-item {
3535
font: {
3636
family: mat-font-family($config);
37-
size: mat-font-size($config, subheading);
37+
size: mat-font-size($config, subheading-2);
3838
}
3939
}
4040
}

‎src/lib/select/_select-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,6 @@
6666
}
6767

6868
.mat-select-trigger {
69-
font-size: mat-font-size($config, subheading);
69+
font-size: mat-font-size($config, subheading-2);
7070
}
7171
}

‎src/lib/toolbar/_toolbar-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,6 @@
4242
.mat-toolbar h5,
4343
.mat-toolbar h6 {
4444
@include mat-typography-level-to-styles($config, title);
45+
margin: 0;
4546
}
4647
}

0 commit comments

Comments
 (0)