mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
Kristiyan Kostadinov
committed by
Andrew Seguin
Andrew Seguin
parent
3ad80e45d3
commit
63db51f4f7
@@ -1,37 +1,40 @@
|
||||
<!-- via https://en.wikipedia.org/wiki/Pangram -->
|
||||
<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
|
||||
<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
|
||||
<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
|
||||
<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
|
||||
<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
|
||||
<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
|
||||
<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
|
||||
<div class="mat-typography">
|
||||
<h1 class="mat-display-4">How vexingly quick daft zebras jump!</h1>
|
||||
<h1 class="mat-display-3">The wizard quickly jinxed the gnomes before they vaporized.</h1>
|
||||
<h1 class="mat-display-2">The quick brown fox jumps over the lazy dog.</h1>
|
||||
<h1 class="mat-display-1">Grumpy wizards make toxic brew for the evil queen and jack.</h1>
|
||||
<h1>Jackdaws love my big sphinx of quartz.</h1>
|
||||
<h2>The five boxing wizards jump quickly.</h2>
|
||||
<h3>Pack my box with five dozen liquor jugs.</h3>
|
||||
<h4>Bright vixens jump; dozy fowl quack.</h4>
|
||||
|
||||
<div class="mat-body">
|
||||
<p>
|
||||
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
|
||||
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
|
||||
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
|
||||
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
|
||||
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
|
||||
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
|
||||
</p>
|
||||
<div class="mat-body">
|
||||
<p>
|
||||
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
|
||||
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
|
||||
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
|
||||
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
|
||||
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
|
||||
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
|
||||
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
|
||||
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
|
||||
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
|
||||
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
|
||||
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
|
||||
</p>
|
||||
<p>
|
||||
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
|
||||
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
|
||||
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
|
||||
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
|
||||
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
|
||||
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
|
||||
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
|
||||
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
|
||||
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
|
||||
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
|
||||
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
|
||||
</p>
|
||||
<p>
|
||||
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
|
||||
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
|
||||
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
|
||||
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
|
||||
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
|
||||
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
.mat-option {
|
||||
font: {
|
||||
family: mat-font-family($config);
|
||||
size: mat-font-size($config, subheading);
|
||||
size: mat-font-size($config, subheading-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,90 +12,119 @@
|
||||
// Represents a collection of typography levels.
|
||||
// Defaults come from https://material.io/guidelines/style/typography.html
|
||||
@function mat-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat-typography-level(112px, 112px, 300),
|
||||
$display-3: mat-typography-level(56px, 56px, 400),
|
||||
$display-2: mat-typography-level(45px, 48px, 400),
|
||||
$display-1: mat-typography-level(34px, 40px, 400),
|
||||
$headline: mat-typography-level(24px, 32px, 400),
|
||||
$title: mat-typography-level(20px, 20px, 500),
|
||||
$subheading: mat-typography-level(16px, 28px, 400),
|
||||
$body-2: mat-typography-level(14px, 24px, 500),
|
||||
$body-1: mat-typography-level(14px, 20px, 400),
|
||||
$caption: mat-typography-level(12px, 12px, 400),
|
||||
$button: mat-typography-level(14px, 14px, 500),
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat-typography-level(112px, 112px, 300),
|
||||
$display-3: mat-typography-level(56px, 56px, 400),
|
||||
$display-2: mat-typography-level(45px, 48px, 400),
|
||||
$display-1: mat-typography-level(34px, 40px, 400),
|
||||
$headline: mat-typography-level(24px, 32px, 400),
|
||||
$title: mat-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat-typography-level(16px, 28px, 400),
|
||||
$subheading-1: mat-typography-level(15px, 24px, 400),
|
||||
$body-2: mat-typography-level(14px, 24px, 500),
|
||||
$body-1: mat-typography-level(14px, 20px, 400),
|
||||
$caption: mat-typography-level(12px, 20px, 400),
|
||||
$button: mat-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
$input: mat-typography-level(inherit, 1.125, 400)
|
||||
$input: mat-typography-level(inherit, 1.125, 400)
|
||||
) {
|
||||
@return (
|
||||
font-family: $font-family,
|
||||
display-4: $display-4,
|
||||
display-3: $display-3,
|
||||
display-2: $display-2,
|
||||
display-1: $display-1,
|
||||
headline: $headline,
|
||||
title: $title,
|
||||
subheading: $subheading,
|
||||
body-2: $body-2,
|
||||
body-1: $body-1,
|
||||
caption: $caption,
|
||||
button: $button,
|
||||
input: $input,
|
||||
font-family: $font-family,
|
||||
display-4: $display-4,
|
||||
display-3: $display-3,
|
||||
display-2: $display-2,
|
||||
display-1: $display-1,
|
||||
headline: $headline,
|
||||
title: $title,
|
||||
subheading-2: $subheading-2,
|
||||
subheading-1: $subheading-1,
|
||||
body-2: $body-2,
|
||||
body-1: $body-1,
|
||||
caption: $caption,
|
||||
button: $button,
|
||||
input: $input,
|
||||
);
|
||||
}
|
||||
|
||||
// Adds the base typography styles, based on a config.
|
||||
// TODO(crisbeto): the headers need to handle margins as well.
|
||||
@mixin mat-base-typography($config, $selector: '.mat-typography') {
|
||||
.mat-h0, .mat-hero-header {
|
||||
@include mat-typography-level-to-styles($config, display-4);
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.mat-h1, #{$selector} h1 {
|
||||
@include mat-typography-level-to-styles($config, display-3);
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.mat-h2, #{$selector} h2 {
|
||||
@include mat-typography-level-to-styles($config, display-2);
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.mat-h3, #{$selector} h3 {
|
||||
@include mat-typography-level-to-styles($config, display-1);
|
||||
}
|
||||
|
||||
.mat-h4, #{$selector} h4 {
|
||||
.mat-h1, .mat-headline, #{$selector} h1 {
|
||||
@include mat-typography-level-to-styles($config, headline);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.mat-h5, #{$selector} h5 {
|
||||
.mat-h2, .mat-title, #{$selector} h2 {
|
||||
@include mat-typography-level-to-styles($config, title);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.mat-h3, .mat-subheading-2, #{$selector} h3 {
|
||||
@include mat-typography-level-to-styles($config, subheading-2);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.mat-h4, .mat-subheading-1, #{$selector} h4 {
|
||||
@include mat-typography-level-to-styles($config, subheading-1);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
// Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
|
||||
// consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
|
||||
// and h6 at 0.67em.
|
||||
.mat-h5, #{$selector} h5 {
|
||||
font-size: mat-font-size($config, body-1) * 0.83;
|
||||
font-weight: mat-font-weight($config, body-1);
|
||||
font-family: mat-font-family($config);
|
||||
line-height: mat-line-height($config, body-1);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.mat-h6, #{$selector} h6 {
|
||||
@include mat-typography-level-to-styles($config, subheading);
|
||||
font-size: mat-font-size($config, body-1) * 0.67;
|
||||
font-weight: mat-font-weight($config, body-1);
|
||||
font-family: mat-font-family($config);
|
||||
line-height: mat-line-height($config, body-1);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.mat-body-strong {
|
||||
.mat-body-strong, .mat-body-2 {
|
||||
@include mat-typography-level-to-styles($config, body-2);
|
||||
}
|
||||
|
||||
.mat-body, #{$selector} {
|
||||
.mat-body, .mat-body-1, #{$selector} {
|
||||
@include mat-typography-level-to-styles($config, body-1);
|
||||
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-small {
|
||||
.mat-small, .mat-caption {
|
||||
@include mat-typography-level-to-styles($config, caption);
|
||||
}
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.
|
||||
.mat-display-4, #{$selector} .mat-display-4 {
|
||||
@include mat-typography-level-to-styles($config, display-4);
|
||||
margin: 0 0 56px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.mat-display-3, #{$selector} .mat-display-3 {
|
||||
@include mat-typography-level-to-styles($config, display-3);
|
||||
margin: 0 0 64px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.mat-display-2, #{$selector} .mat-display-2 {
|
||||
@include mat-typography-level-to-styles($config, display-2);
|
||||
margin: 0 0 64px;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.mat-display-1, #{$selector} .mat-display-1 {
|
||||
@include mat-typography-level-to-styles($config, display-1);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
// Default list
|
||||
.mat-list, .mat-nav-list {
|
||||
.mat-list-item {
|
||||
font-size: mat-font-size($config, subheading);
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
@include mat-line-base(mat-font-size($config, body-1));
|
||||
}
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
.mat-menu-item {
|
||||
font: {
|
||||
family: mat-font-family($config);
|
||||
size: mat-font-size($config, subheading);
|
||||
size: mat-font-size($config, subheading-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,6 +66,6 @@
|
||||
}
|
||||
|
||||
.mat-select-trigger {
|
||||
font-size: mat-font-size($config, subheading);
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,5 +42,6 @@
|
||||
.mat-toolbar h5,
|
||||
.mat-toolbar h6 {
|
||||
@include mat-typography-level-to-styles($config, title);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user