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.

Author: crisbeto

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

@@ -43,6 +43,7 @@ import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
+import {TypographyDemo} from './typography/typography-demo';
 
 
 @NgModule({
@@ -100,6 +101,7 @@ import {StyleDemo} from './style/style-demo';
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    TypographyDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

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

@@ -25,12 +25,14 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
-        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-          Fullscreen
-        </button>
-        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
-          {{root.dir.toUpperCase()}}
-        </button>
+        <div>
+          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            Fullscreen
+          </button>
+          <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+            {{root.dir.toUpperCase()}}
+          </button>
+        </div>
       </div>
     </md-toolbar>
 

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

@@ -32,6 +32,7 @@ body {
     .demo-toolbar {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       width: 100%;
     }
   }

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

@@ -48,7 +48,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

@@ -32,6 +32,7 @@ import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
+import {TypographyDemo} from '../typography/typography-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -66,4 +67,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="dist/packages/material/core/theming/prebuilt/indigo-pink.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,15 @@
+<h1 class="mat-h0">Lorem ipsum dolor sit amet.</h1>
+<h1 class="mat-h1">Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
+<h2 class="mat-h2">Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
+<h3 class="mat-h3">Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
+<h4 class="mat-h4">Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
+<h5 class="mat-h5">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+<h6 class="mat-h6">Lorem ipsum dolor sit amet, consectetur adipisicing.</h6>
+
+<div class="mat-body">
+  <p>Lorem ipsum dolor sit amet, <span class="mat-body-strong">consectetur</span> adipisicing elit. Iure voluptatem amet facilis rerum non dolore repellendus ab. Assumenda nisi perspiciatis odit illum voluptatem expedita laborum! Debitis nisi eius, ratione nostrum velit dignissimos molestias saepe, esse facilis blanditiis, labore optio. Accusantium, nihil illo est beatae nobis expedita animi libero, laboriosam excepturi consequatur eaque, ab repudiandae.</p>
+
+  <p>Inventore quaerat amet consectetur laudantium ipsa animi atque in fugit, quas magni dolorem, esse doloribus omnis nulla corporis laboriosam sint. Debitis sequi, reiciendis vitae perferendis eveniet quaerat distinctio aliquid laborum asperiores autem laboriosam ducimus quae, possimus, enim at unde facere porro. Optio totam cupiditate, molestiae esse voluptates maxime reprehenderit, nobis officia facere id temporibus dicta pariatur illo nihil quam dignissimos ipsa dolores numquam, libero ducimus nam. Aspernatur quae accusantium ipsa asperiores laboriosam illo molestiae explicabo rerum eum iusto, qui, voluptas praesentium!</p>
+
+  <p>Culpa dolor, velit ipsam ipsum alias, est, quam ab voluptatibus id repudiandae deserunt vel dolorem neque. Sapiente soluta fuga iste, adipisci dolores voluptate laudantium, nam praesentium quam similique non, id sit doloremque ex doloribus itaque esse culpa excepturi reprehenderit corporis? Sit, ducimus. Tempore non, maiores unde ut velit tenetur, vitae odit. Voluptate qui blanditiis atque odit nobis laborum nihil animi eligendi similique dolorum, tempore, error.</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

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