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.
angular · Jun 8, 2017 · 63db51f · 63db51f
1 parent 3ad80e4
commit 63db51f
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 92 deletions.
diff --git a/src/demo-app/typography/typography-demo.html b/src/demo-app/typography/typography-demo.html
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -42,5 +42,6 @@
   .mat-toolbar h5,
   .mat-toolbar h6 {
     @include mat-typography-level-to-styles($config, title);
+    margin: 0;
   }
 }