feat(typography): Update styles to match guidance (#2527)

Update all typography styles to match new guidance. Added a method of overriding individual properties in individual styles. 

BREAKING CHANGE: Previous typography styles are removed. The new styles are listed in the readme.

demos/button.html

@@ -105,9 +105,9 @@
           <label for="toggle-disabled" id="toggle-disabled-label">Disable buttons (excluding links)</label>
         </div>
 
-        <h1 class="mdc-typography--display2">Ripple Enabled</h1>
+        <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
         <fieldset>
-          <legend class="mdc-typography--title">Text Button</legend>
+          <legend class="mdc-typography--headline6">Text Button</legend>
           <div>
             <button class="mdc-button">
               Baseline
@@ -136,7 +136,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Raised Button</legend>
+          <legend class="mdc-typography--headline6">Raised Button</legend>
           <div>
             <button class="mdc-button mdc-button--raised">
               Baseline
@@ -165,7 +165,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated">
               Baseline
@@ -194,7 +194,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--stroked">
               Baseline
@@ -223,7 +223,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Custom button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button">
               Corner Radius
@@ -235,7 +235,7 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color">
               <i class="material-icons mdc-button__icon">favorite</i>
@@ -248,9 +248,9 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
           </div>
         </fieldset>
 
-        <h1 class="mdc-typography--display2">CSS Only</h1>
+        <h1 class="mdc-typography--headline3">CSS Only</h1>
         <fieldset>
-          <legend class="mdc-typography--title">Text Button</legend>
+          <legend class="mdc-typography--headline6">Text Button</legend>
           <div>
             <button class="mdc-button" data-demo-no-js>
               Baseline
@@ -279,7 +279,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Raised Button</legend>
+          <legend class="mdc-typography--headline6">Raised Button</legend>
           <div>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
               Baseline
@@ -308,7 +308,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Unelevated Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Unelevated Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Baseline
@@ -338,7 +338,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
               Baseline
@@ -367,7 +367,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Custom button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Custom button (Experimental)</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button" data-demo-no-js>
               Big Corner Radius
@@ -379,7 +379,7 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
               <i class="material-icons mdc-button__icon">favorite</i>

demos/card.html

@@ -45,10 +45,10 @@
           <a class="mdc-card__primary-action" href="#">
             <div class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></div>
             <div class="demo-card__primary">
-              <h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
-              <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
+              <h2 class="demo-card__title mdc-typography--headline6">Our Changing Planet</h2>
+              <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
             </div>
-            <div class="demo-card__secondary mdc-typography--body1">
+            <div class="demo-card__secondary mdc-typography--body2">
               Visit ten places on our planet that are undergoing the biggest changes today.
             </div>
           </a>
@@ -100,22 +100,22 @@ <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
 
       <section class="demo-card-collection">
         <div class="mdc-card mdc-card--stroked demo-card">
-          <div class="demo-card-article-group-heading mdc-typography--subheading2">Headlines</div>
+          <div class="demo-card-article-group-heading mdc-typography--subtitle2">Headlines</div>
 
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">Copper on the rise</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">Copper on the rise</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               Copper price soars amid global market optimism and increased demand.
             </p>
           </a>
 
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups rebound</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">U.S. tech startups rebound</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               Favorable business conditions have allowed startups to secure more fundraising deals compared to last
               year.
             </p>
@@ -124,8 +124,8 @@ <h2 class="demo-card-article__title mdc-typography--headline">U.S. tech startups
           <hr class="mdc-list-divider">
 
           <a class="demo-card-article mdc-ripple-surface" href="#">
-            <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energy ambitions</h2>
-            <p class="demo-card-article__snippet mdc-typography--body1">
+            <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean energy ambitions</h2>
+            <p class="demo-card-article__snippet mdc-typography--body2">
               China plans to invest billions of dollars for the development of over 300 clean energy projects in
               Southeast Asia.
             </p>
@@ -145,7 +145,7 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
           <a class="mdc-card__primary-action demo-card__primary-action" href="#">
             <div class="mdc-card__media mdc-card__media--square demo-card__media">
               <div class="mdc-card__media-content demo-card__media-content--with-title">
-                <div class="demo-card__media-title mdc-typography--subheading2">
+                <div class="demo-card__media-title mdc-typography--subtitle2">
                   Vacation Photos
                 </div>
               </div>
@@ -185,9 +185,9 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
             <div class="demo-card__music-row">
               <div class="mdc-card__media mdc-card__media--square demo-card__media demo-card__media--music"></div>
               <div class="demo-card__music-info">
-                <div class="demo-card__music-title mdc-typography--headline">Rozes</div>
-                <div class="demo-card__music-artist mdc-typography--body1">Under the Grave</div>
-                <div class="demo-card__music-year mdc-typography--body1">(2016)</div>
+                <div class="demo-card__music-title mdc-typography--headline5">Rozes</div>
+                <div class="demo-card__music-artist mdc-typography--body2">Under the Grave</div>
+                <div class="demo-card__music-year mdc-typography--body2">(2016)</div>
               </div>
             </div>
           </a>

demos/drawer/drawer.scss

@@ -47,8 +47,7 @@
     flex-grow: 1;
   }
 
-  @include mdc-typography(display2);
-  font-size: 24px;
+  @include mdc-typography(headline6);
   display: flex;
 }
 

demos/drawer/permanent-drawer-above-toolbar.html

@@ -114,7 +114,7 @@
       </header>
 
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Permanent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
 
         <div id="demo-radio-buttons">

demos/drawer/permanent-drawer-below-toolbar.html

@@ -106,7 +106,7 @@
         </div>
       </nav>
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Permanent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
 
         <div id="demo-radio-buttons">

demos/drawer/persistent-drawer.html

@@ -104,7 +104,7 @@
       </header>
 
       <main class="demo-main">
-        <h1 class="mdc-typography--display1">Persistent Drawer</h1>
+        <h1 class="mdc-typography--headline4">Persistent Drawer</h1>
         <p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
         <div id="demo-radio-buttons" class="theme-radio-buttons">
           <div class="mdc-form-field">

demos/drawer/temporary-drawer.html

@@ -91,7 +91,7 @@
       </nav>
     </aside>
     <main class="demo-main mdc-toolbar-fixed-adjust">
-      <h1 class="mdc-typography--display1">Temporary Drawer</h1>
+      <h1 class="mdc-typography--headline4">Temporary Drawer</h1>
       <p class="mdc-typography--body1">Click the menu icon above to open.</p>
       <div id="demo-radio-buttons" class="theme-radio-buttons">
         <div class="mdc-form-field">

demos/image-list.html

@@ -149,7 +149,7 @@
           </div>
         </div>
 
-        <h1 class="mdc-typography--headline">Standard Image List</h1>
+        <h1 class="mdc-typography--headline5">Standard Image List</h1>
         <div>
           <div class="mdc-form-field">
             <div class="mdc-radio">
@@ -305,7 +305,7 @@ <h1 class="mdc-typography--headline">Standard Image List</h1>
           </li>
         </ul>
 
-        <h1 class="mdc-typography--headline">Masonry Image List</h1>
+        <h1 class="mdc-typography--headline5">Masonry Image List</h1>
         <div>
           <div class="mdc-form-field">
             <div class="mdc-radio">

demos/linear-progress.html

@@ -73,7 +73,7 @@
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Linear Progress Indicators</legend>
+          <legend class="mdc-typography--headline6">Linear Progress Indicators</legend>
 
           <figure class="linear-progress-demo">
             <div role="progressbar" class="mdc-linear-progress">

demos/select.html

@@ -31,15 +31,6 @@
         padding-left: 0;
       }
 
-      /* Hack to work around style-loader asynchronously loading styles. */
-      /* Equivalent to using mdc-typography's subheading2, which is used in the sass file. */
-      .mdc-select {
-        font-family: Roboto, sans-serif;
-        font-size: 1rem;
-        font-weight: 400;
-        letter-spacing: .04em;
-      }
-
       .example {
         max-width: 400px;
         margin: 24px;
@@ -87,7 +78,7 @@
       </section>
 
       <section class="example">
-        <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
+        <h2 class="mdc-typography--headline6">Fully-Featured JS Component</h2>
         <section id="demo-wrapper">
           <div id="js-select" class="mdc-select">
             <select class="mdc-select__native-control" id="full-func-js-select">
@@ -141,7 +132,7 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
         </div>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">Select box</h2>
+        <h2 class="mdc-typography--headline6">Select box</h2>
         <section id="box-demo-wrapper">
           <div id="box-js-select" class="mdc-select mdc-select--box">
             <select class="mdc-select__native-control" id="select-box">
@@ -188,7 +179,7 @@ <h2 class="mdc-typography--title">Select box</h2>
         </div>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
+        <h2 class="mdc-typography--headline6">Pre-selected option via HTML</h2>
         <section>
           <div id="js-pre-selected" class="mdc-select">
             <select class="mdc-select__native-control" id="select-preselected">
@@ -211,7 +202,7 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
         </section>
       </section>
       <section class="example">
-        <h2 class="mdc-typography--title">MDC Select with optgroups</h2>
+        <h2 class="mdc-typography--headline6">MDC Select with optgroups</h2>
         <div id="optgroup-js-select" class="mdc-select">
           <select class="mdc-select__native-control" id="select-optgroups">
             <optgroup label="Meats">

demos/shape.html

@@ -55,9 +55,9 @@
       </section>
 
       <section class="demo-wrapper">
-        <h1 class="mdc-typography--display2">Button</h1>
+        <h1 class="mdc-typography--headline3">Button</h1>
 
-        <h2 class="mdc-typography--display1">Filled</h2>
+        <h2 class="mdc-typography--headline4">Filled</h2>
         <div class="mdc-shape-container two-corner-container">
           <button class="mdc-button mdc-button--unelevated">Skip</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
@@ -71,7 +71,7 @@ <h2 class="mdc-typography--display1">Filled</h2>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
         </div>
 
-        <h2 class="mdc-typography--display1">Stroked</h2>
+        <h2 class="mdc-typography--headline4">Stroked</h2>
         <div class="mdc-shape-container two-corner-container two-corner-container--stroked">
           <button class="mdc-button mdc-button--stroked">Skip</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
@@ -85,16 +85,16 @@ <h2 class="mdc-typography--display1">Stroked</h2>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
         </div>
 
-        <h1 class="mdc-typography--display2">Card</h1>
+        <h1 class="mdc-typography--headline3">Card</h1>
 
         <div class="mdc-shape-container card-container">
           <div class="mdc-card mdc-card--stroked demo-card">
             <a class="mdc-card__primary-action demo-card__primary-action" href="#">
               <div class="demo-card__row">
                 <div class="mdc-card__media mdc-card__media--square demo-card__media"></div>
                 <div class="demo-card__info">
-                  <div class="mdc-typography--headline">Title</div>
-                  <div class="mdc-typography--body1">Body text</div>
+                  <div class="mdc-typography--headline5">Title</div>
+                  <div class="mdc-typography--body2">Body text</div>
                 </div>
               </div>
             </a>

demos/snackbar.html

@@ -76,7 +76,7 @@
       </section>
 
       <section class="example">
-        <h2 class="mdc-typography--title">Basic Example</h2>
+        <h2 class="mdc-typography--headline6">Basic Example</h2>
 
         <div class="mdc-form-field">
           <div class="mdc-checkbox">