feat: integrate typography api into all components (#4375)

* feat: integrate typography api into all components

* Includes the base typography styles for headers, body text etc.
* Adds mixins for typography next to the theme and moves out all of the component typography styles into them.
* Switches all the hardcoded typography values to use the ones from the spec.
* Adjusts the letter spacing on some of the headers to align them to the spec.

**Note:** While going through the components, I haven't checked whether the styles are accurate in regards to the spec. I've left notes in the places where the font sizes weren't a part of the pre-defined ones.

* fix: address feedback

* fix: explicit toolbar header typography

* chore: add comments about letter spacing

* fix: theme error

* chore: re-add $mat-font-family

* fix: missing typography for mat-icon-button

Author: crisbeto

src/demo-app/demo-app-module.ts

@@ -40,6 +40,7 @@ import {StyleDemo} from './style/style-demo';
 import {DataTableDemo} from './data-table/data-table-demo';
 import {PeopleDatabase} from './data-table/people-database';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {TypographyDemo} from './typography/typography-demo';
 import {
   CdkDataTableModule,
   FullscreenOverlayContainer,
@@ -168,6 +169,7 @@ export class DemoMaterialModule {}
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    TypographyDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},

src/demo-app/demo-app/demo-app.html

@@ -21,7 +21,7 @@
   <div>
     <md-toolbar color="primary">
       <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
+        <md-icon class="md-24">menu</md-icon>
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
@@ -30,9 +30,10 @@ <h1>Angular Material Demos</h1>
           <button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
             Change detection: {{changeDetectionStrategy}}
           </button>
-          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-            Fullscreen
+          <button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            <md-icon class="md-24">fullscreen</md-icon>
           </button>
+          <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
           <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
             {{root.dir.toUpperCase()}}
           </button>

src/demo-app/demo-app/demo-app.ts

@@ -65,7 +65,8 @@ export class DemoApp {
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
-    {name: 'Style', route: 'style'}
+    {name: 'Style', route: 'style'},
+    {name: 'Typography', route: 'typography'}
   ];
 
   constructor(private _element: ElementRef) {

src/demo-app/demo-app/routes.ts

@@ -34,6 +34,7 @@ import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DataTableDemo} from '../data-table/data-table-demo';
+import {TypographyDemo} from '../typography/typography-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -70,4 +71,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'typography', component: TypographyDemo}
 ];

src/demo-app/index.html

@@ -9,6 +9,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

@@ -0,0 +1,37 @@
+<!-- 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-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>
+    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>

src/demo-app/typography/typography-demo.scss

@@ -0,0 +1,3 @@
+.mat-body {
+  max-width: 800px;
+}

src/demo-app/typography/typography-demo.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'typography-demo',
+  templateUrl: 'typography-demo.html',
+  styleUrls: ['typography-demo.css'],
+})
+export class TypographyDemo { }

src/lib/autocomplete/_autocomplete-theme.scss

@@ -21,4 +21,6 @@
     }
   }
 
-}
+}
+
+@mixin mat-autocomplete-typography($config) { }

src/lib/button-toggle/_button-toggle-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 // Applies a focus style to an md-button-toggle element for each of the supported palettes.
 @mixin _mat-button-toggle-focus-color($theme) {
@@ -36,3 +37,9 @@
     }
   }
 }
+
+@mixin mat-button-toggle-typography($config) {
+  .mat-button-toggle {
+    font-family: mat-font-family($config);
+  }
+}