+
How vexingly quick daft zebras jump!
+
The wizard quickly jinxed the gnomes before they vaporized.
+
The quick brown fox jumps over the lazy dog.
+
Grumpy wizards make toxic brew for the evil queen and jack.
+
Jackdaws love my big sphinx of quartz.
+
The five boxing wizards jump quickly.
+
Pack my box with five dozen liquor jugs.
+
Bright vixens jump; dozy fowl quack.
-
-
- 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.
-
+
+
+ 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.
+
-
- 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.
-
+
+ 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.
+
-
- 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.
-
+
+ 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.
+
+
diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
index bf04240f795d..9d4b7d40680e 100644
--- a/src/lib/core/option/_option-theme.scss
+++ b/src/lib/core/option/_option-theme.scss
@@ -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);
}
}
}
diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss
index f39186eb39b0..7ea07725f0a9 100644
--- a/src/lib/core/typography/_typography.scss
+++ b/src/lib/core/typography/_typography.scss
@@ -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-h1, .mat-headline, #{$selector} h1 {
+ @include mat-typography-level-to-styles($config, headline);
+ margin: 0 0 16px;
}
- .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-h2, .mat-title, #{$selector} h2 {
+ @include mat-typography-level-to-styles($config, title);
+ margin: 0 0 16px;
}
- .mat-h3, #{$selector} h3 {
- @include mat-typography-level-to-styles($config, display-1);
+ .mat-h3, .mat-subheading-2, #{$selector} h3 {
+ @include mat-typography-level-to-styles($config, subheading-2);
+ margin: 0 0 16px;
}
- .mat-h4, #{$selector} h4 {
- @include mat-typography-level-to-styles($config, headline);
+ .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 {
- @include mat-typography-level-to-styles($config, title);
+ 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;
+ }
}
diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
index 91c414adca8e..2a064b4a9bdc 100644
--- a/src/lib/list/_list-theme.scss
+++ b/src/lib/list/_list-theme.scss
@@ -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));
}
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
index c3dfd259309f..1c212391cb9e 100644
--- a/src/lib/menu/_menu-theme.scss
+++ b/src/lib/menu/_menu-theme.scss
@@ -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);
}
}
}
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index cbab71e8aa27..4033a4716b97 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -66,6 +66,6 @@
}
.mat-select-trigger {
- font-size: mat-font-size($config, subheading);
+ font-size: mat-font-size($config, subheading-2);
}
}
diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss
index d24a7c30da21..947631b0a29d 100644
--- a/src/lib/toolbar/_toolbar-theme.scss
+++ b/src/lib/toolbar/_toolbar-theme.scss
@@ -42,5 +42,6 @@
.mat-toolbar h5,
.mat-toolbar h6 {
@include mat-typography-level-to-styles($config, title);
+ margin: 0;
}
}