From ea4f0090c38ad7f514e79a4b7bb1f5f7fabef836 Mon Sep 17 00:00:00 2001
From: lynnjepsen <lynnjepsen@google.com>
Date: Mon, 2 Apr 2018 16:02:54 -0700
Subject: [PATCH] fix theme demo page, update README

---
 demos/theme/index.html       | 30 +++++++++++++++++++++++++++---
 packages/mdc-theme/README.md |  4 ++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/demos/theme/index.html b/demos/theme/index.html
index 865f8cb99d6..2efa061e8d1 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -105,7 +105,7 @@
     <aside class="mdc-drawer--temporary">
       <nav class="mdc-drawer__drawer">
         <header class="mdc-drawer__header">
-          <div class="mdc-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary">
+          <div class="mdc-drawer__header-content mdc-theme--primary-bg mdc-theme--on-primary">
             Header here
           </div>
         </header>
@@ -174,10 +174,10 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
               <div class="demo-theme-color-group">
                 <div class="demo-theme-color-swatches">
-                  <div class="demo-theme-color-swatch mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
+                  <div class="demo-theme-color-swatch mdc-theme--primary-bg mdc-theme--on-primary">Primary</div>
                 </div>
                 <div class="demo-theme-color-swatches">
-                  <div class="demo-theme-color-swatch mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
+                  <div class="demo-theme-color-swatch mdc-theme--secondary-bg mdc-theme--on-secondary">Secondary</div>
                 </div>
                 <div class="demo-theme-color-swatches">
                   <div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
@@ -204,6 +204,30 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             </fieldset>
           </div>
 
+          <div class="demo-theme-color-section__row">
+            <fieldset class="demo-fieldset--color">
+              <legend class="mdc-typography--subheading2">Text on primary</legend>
+
+              <div class="demo-theme-color-group">
+                <div class="demo-theme-text-row mdc-theme--primary-bg mdc-typography--body2">
+                  <span class="demo-theme-text-style mdc-theme--on-primary">Text</span>
+                  <span class="demo-theme-text-style mdc-theme--on-primary material-icons">favorite</span>
+                </div>
+              </div>
+            </fieldset>
+
+            <fieldset class="demo-fieldset--color">
+              <legend class="mdc-typography--subheading2">Text on secondary</legend>
+
+              <div class="demo-theme-color-group">
+                <div class="demo-theme-text-row mdc-theme--secondary-bg mdc-typography--body2">
+                  <span class="demo-theme-text-style mdc-theme--on-secondary">Text</span>
+                  <span class="demo-theme-text-style mdc-theme--on-secondary material-icons">favorite</span>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+
           <div class="demo-theme-color-section__row">
             <fieldset class="demo-fieldset--color">
               <legend class="mdc-typography--subheading2">Text on user-defined light background</legend>
diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md
index 2140576ee29..c26c2f317b8 100644
--- a/packages/mdc-theme/README.md
+++ b/packages/mdc-theme/README.md
@@ -71,6 +71,8 @@ CSS Custom property | Description
 `--mdc-theme-primary` | The theme primary color
 `--mdc-theme-secondary` | The theme secondary color
 `--mdc-theme-background` | The theme background color
+`--mdc-theme-on-primary` | Text color on top of a primary background
+`--mdc-theme-on-secondary` | Text color on top of a secondary background
 `--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background
 `--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background
 
@@ -83,6 +85,8 @@ CSS Class | Description
 `mdc-theme--primary` | Sets the text color to the theme primary color
 `mdc-theme--secondary` | Sets the text color to the theme secondary color
 `mdc-theme--background` | Sets the background color to the theme background color
+`mdc-theme--on-primary` | Sets the text color to the theme on-primary color
+`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color
 `mdc-theme--primary-bg` | Sets the background color to the theme primary color
 `mdc-theme--secondary-bg` | Sets the background color to the theme secondary color
 `mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background