feat(theme): Add light/dark vars for primary/secondary color; rename …

…`accent` to `secondary` (#1116)

BREAKING CHANGE

* In the spec, "accent" color was renamed to "secondary" to be more semantically correct.
* All occurrences of the word "accent" have been changed to "secondary", _except_ modifier CSS classes for individual components (e.g., `mdc-button--accent`), which remain unchanged for now.
* For backward compatibility, `$mdc-theme-accent` still exists, and `$mdc-theme-secondary` points to it. This ensures that clients that were previously overriding `$mdc-theme-accent` will continue to work.
* Light/dark tonal variants (e.g., `$mdc-theme-primary-light`) are not yet being used, but will become used soon when we update our components to align with an upcoming version of the spec.

demos/button.html

@@ -97,10 +97,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button">
             Div
@@ -134,10 +134,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent" data-demo-no-js>
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
             Div
@@ -171,10 +171,10 @@
             Raised with Primary
           </a>
           <a href="/button.html" class="mdc-button mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </a>
           <a href="/button.html" class="mdc-button mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </a>
         </fieldset>
 
@@ -205,10 +205,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button">
             Div
@@ -244,10 +244,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button">
             Div
@@ -280,10 +280,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent" data-demo-no-js>
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
             Div
@@ -317,10 +317,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--raised" tabindex="0" role="button">
             Div
@@ -356,10 +356,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--theme-dark mdc-button--accent" data-demo-no-js>
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--theme-dark mdc-button--raised mdc-button--accent" data-demo-no-js>
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--theme-dark mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
             Div
@@ -393,10 +393,10 @@
             Raised with Primary
           </button>
           <button class="mdc-button mdc-button--theme-dark  mdc-button--accent">
-            Default with Accent
+            Default with Secondary
           </button>
           <button class="mdc-button mdc-button--theme-dark  mdc-button--raised mdc-button--accent">
-            Raised with Accent
+            Raised with Secondary
           </button>
           <div class="mdc-button mdc-button--theme-dark  mdc-button--raised" tabindex="0" role="button">
             Div

demos/demos.scss

@@ -21,7 +21,7 @@
 // Base style
 
 $mdc-theme-primary: #212121 !default; // Grey 900
-$mdc-theme-accent: #64dd17 !default; // Light Green A700
+$mdc-theme-secondary: #64dd17 !default; // Light Green A700
 
 @import "../packages/material-components-web/material-components-web";
 

demos/icon-toggle.html

@@ -195,7 +195,7 @@ <h2>Primary Colored Icons</h2>
         </div>
 
         <div class="toggle-example">
-          <h2>Accent Colored Icons</h2>
+          <h2>Secondary Colored Icons</h2>
           <div class="demo-wrapper">
             <i class="mdc-icon-toggle mdc-icon-toggle--accent material-icons"
                role="button"

demos/index.html

@@ -226,7 +226,7 @@
               <span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/ic_theme_24px.svg" /></span>
               <a href="theme.html" class="mdc-list-item__text">
                 Theme
-                <span class="mdc-list-item__text__secondary">Using primary and accent colors</span>
+                <span class="mdc-list-item__text__secondary">Using primary and secondary colors</span>
               </a>
           </li>
 

demos/linear-progress.html

@@ -167,7 +167,7 @@
                 <span class="mdc-linear-progress__bar-inner"></span>
               </div>
             </div>
-            <figcaption>Accent</figcaption>
+            <figcaption>Secondary Color</figcaption>
           </figure>
 
         </fieldset>

demos/ripple.html

@@ -176,8 +176,8 @@ <h2>Theme Styles</h2>
           </div>
           <div
             class="mdc-ripple-surface mdc-ripple-surface--accent
-                   mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
-            Accent
+                   mdc-theme--secondary demo-surface mdc-elevation--z2" tabindex="0">
+            Secondary
           </div>
         </div>
         <div>
@@ -189,8 +189,8 @@ <h2>Theme Styles - CSS Only</h2>
           </div>
           <div
             class="mdc-ripple-surface mdc-ripple-surface--accent
-                   mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
-            Accent
+                   mdc-theme--secondary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Secondary
           </div>
         </div>
 

demos/tabs.html

@@ -331,8 +331,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Accent Color Indicator</legend>
-          <nav id="accent-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
+          <legend class="mdc-typography--title">Secondary Color Indicator</legend>
+          <nav id="secondary-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
             <a class="mdc-tab" href="#three">Three</a>
@@ -343,7 +343,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Accent Color Indicator - CSS-Only</legend>
+          <legend class="mdc-typography--title">Secondary Color Indicator - CSS-Only</legend>
           <nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
@@ -448,7 +448,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
           <div class="demo-note">
             <em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
           </div>
-          <div class="mdc-toolbar mdc-theme--accent-bg">
+          <div class="mdc-toolbar mdc-theme--secondary-bg">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
                 <h1 class="mdc-toolbar__title">Title</h1>
@@ -470,7 +470,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
       <section>
         <fieldset>
           <legend class="mdc-typography--title">Within mdc-toolbar + primary indicator, CSS-Only</legend>
-          <div class="mdc-toolbar mdc-theme--accent-bg">
+          <div class="mdc-toolbar mdc-theme--secondary-bg">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
                 <h1 class="mdc-toolbar__title">Title</h1>
@@ -492,15 +492,15 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + accent indicator</legend>
+          <legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator</legend>
           <div class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
                 <h1 class="mdc-toolbar__title">Title</h1>
               </div>
               <div class="mdc-toolbar__section mdc-toolbar__section--align-end">
                 <div>
-                  <nav id="toolbar-tab-bar-accent-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
+                  <nav id="toolbar-tab-bar-secondary-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
                     <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
                     <a class="mdc-tab" href="#two">Item Two</a>
                     <a class="mdc-tab" href="#three">Item Three</a>
@@ -515,7 +515,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + accent indicator, CSS-Only</legend>
+          <legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator, CSS-Only</legend>
           <div class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
@@ -582,9 +582,9 @@ <h1 class="mdc-toolbar__title">Title</h1>
           window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar'));
           window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified'));
           window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar'));
-          window.accentIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#accent-indicator-tab-bar'));
+          window.secondaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#secondary-indicator-tab-bar'));
           window.primaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-primary-indicator'));
-          window.accentIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-accent-indicator'));
+          window.secondaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-secondary-indicator'));
 
           var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
           var dots = document.querySelector('.dots');
@@ -654,9 +654,9 @@ <h1 class="mdc-toolbar__title">Title</h1>
             window.iconTextTabBar.layout();
             window.toolbarTabBar.layout();
             window.primaryIndicatorTabBar.layout();
-            window.accentIndicatorTabBar.layout();
+            window.secondaryIndicatorTabBar.layout();
             window.primaryIndicatorToolbarTabBar.layout();
-            window.accentIndicatorToolbarTabBar.layout();
+            window.secondaryIndicatorToolbarTabBar.layout();
             window.dynamicTabBar.layout();
             toolbarTabBarModified.layout();
           });

demos/textfield.html

@@ -26,7 +26,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <style>
       .mdc-theme--dark {
-        --mdc-theme-primary: var(--mdc-theme-accent, #64dd17);
+        --mdc-theme-primary: var(--mdc-theme-secondary, #64dd17);
         background-color: #303030;
       }
 

demos/theme.html

@@ -38,7 +38,7 @@
       .demo-theme__color__block {
         display: inline-block;
         box-sizing: border-box;
-        width: 130px;
+        width: 150px;
         height: 50px;
         line-height: 50px;
         text-align: center;
@@ -106,36 +106,39 @@
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
         <button class="mdc-button mdc-button--raised mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</button>
-        <button class="mdc-button mdc-button--raised button mdc-theme--accent-bg mdc-theme--text-primary-on-accent">Accent</button>
+        <button class="mdc-button mdc-button--raised button mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</button>
       </section>
 
       <h2 class="mdc-typography--display1">Theme colors</h2>
 
       <section class="example">
         <h3 class="mdc-typography--title">Theme colors as text</h3>
         <div class="demo-theme__color">
-          <div class="demo-theme__color__label">Primary</div>
-          <div class="demo-theme__color__block mdc-theme--primary mdc-typography mdc-typography--body2">Lorem ipsum</div>
+          <div class="demo-theme__color__block mdc-theme--primary mdc-typography mdc-typography--body2">Primary</div>
+          <div class="demo-theme__color__block mdc-theme--primary-light mdc-typography mdc-typography--body2">Primary Light</div>
+          <div class="demo-theme__color__block mdc-theme--primary-dark mdc-typography mdc-typography--body2">Primary Dark</div>
         </div>
         <div class="demo-theme__color">
-          <div class="demo-theme__color__label">Accent</div>
-          <div class="demo-theme__color__block mdc-theme--accent mdc-typography mdc-typography--body2">Lorem ipsum</div>
+          <div class="demo-theme__color__block mdc-theme--secondary mdc-typography mdc-typography--body2">Secondary</div>
+          <div class="demo-theme__color__block mdc-theme--secondary-light mdc-typography mdc-typography--body2">Secondary Light</div>
+          <div class="demo-theme__color__block mdc-theme--secondary-dark mdc-typography mdc-typography--body2">Secondary Dark</div>
         </div>
       </section>
 
       <section class="example">
         <h3 class="mdc-typography--title">Theme colors as background</h3>
         <div class="demo-theme__color">
-          <div class="demo-theme__color__label">Primary</div>
-          <div class="demo-theme__color__block mdc-theme--primary-bg"></div>
+          <div class="demo-theme__color__block mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
+          <div class="demo-theme__color__block mdc-theme--primary-light-bg mdc-theme--text-primary-on-primary-light">Primary Light</div>
+          <div class="demo-theme__color__block mdc-theme--primary-dark-bg mdc-theme--text-primary-on-primary-dark">Primary Dark</div>
         </div>
         <div class="demo-theme__color">
-          <div class="demo-theme__color__label">Accent</div>
-          <div class="demo-theme__color__block mdc-theme--accent-bg"></div>
+          <div class="demo-theme__color__block mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
+          <div class="demo-theme__color__block mdc-theme--secondary-light-bg mdc-theme--text-primary-on-secondary-light">Secondary Light</div>
+          <div class="demo-theme__color__block mdc-theme--secondary-dark-bg mdc-theme--text-primary-on-secondary-dark">Secondary Dark</div>
         </div>
         <div class="demo-theme__color">
-          <div class="demo-theme__color__label">Background</div>
-          <div class="demo-theme__color__block mdc-theme--background"></div>
+          <div class="demo-theme__color__block mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
         </div>
       </section>
 
@@ -158,13 +161,13 @@ <h3 class="mdc-typography--title">Text on primary</h3>
           <span class="mdc-theme--text-disabled-on-primary">Disabled</span>
           <span class="mdc-theme--text-icon-on-primary material-icons">favorite</span>
         </div>
-        <h3 class="mdc-typography--title">Text on accent</h3>
-        <div class="demo-theme__text-styles mdc-theme--accent-bg mdc-typography mdc-typography--body2">
-          <span class="mdc-theme--text-primary-on-accent">Primary</span>
-          <span class="mdc-theme--text-secondary-on-accent">Secondary</span>
-          <span class="mdc-theme--text-hint-on-accent">Hint</span>
-          <span class="mdc-theme--text-disabled-on-accent">Disabled</span>
-          <span class="mdc-theme--text-icon-on-accent material-icons">favorite</span>
+        <h3 class="mdc-typography--title">Text on secondary</h3>
+        <div class="demo-theme__text-styles mdc-theme--secondary-bg mdc-typography mdc-typography--body2">
+          <span class="mdc-theme--text-primary-on-secondary">Primary</span>
+          <span class="mdc-theme--text-secondary-on-secondary">Secondary</span>
+          <span class="mdc-theme--text-hint-on-secondary">Hint</span>
+          <span class="mdc-theme--text-disabled-on-secondary">Disabled</span>
+          <span class="mdc-theme--text-icon-on-secondary material-icons">favorite</span>
         </div>
         <h3 class="mdc-typography--title">Text on user-defined light background</h3>
         <div class="demo-theme__text-styles demo-theme--custom-light-bg mdc-typography mdc-typography--body2">

docs/authoring-components.md

@@ -386,7 +386,7 @@ our [@material/rtl](../packages/mdc-rtl) library to assist us with this.
 ### Support for theming
 
 A component should be able to be altered according to a **theme**. A theme can be defined any way
-you wish. It may be by using _primary_ and _accent_ colors, or you may choose to expose scss
+you wish. It may be by using _primary_ and _secondary_ colors, or you may choose to expose scss
 variables or CSS Custom properties specific to your component. Whichever way you choose, ensure that
 _clients can easily alter common aesthetic elements of your component to make it fit with their
 overall design_. We use [@material/theme](../packages/mdc-theme) for this purpose.

docs/getting-started.md

@@ -216,7 +216,7 @@ hit the button, and get a pleasant greeting :wave:
 You may have noticed that the button background, as well as the label and underline on focused text
 input fields, defaults to the Indigo 500 (`#673AB7`) color from the [Material Design color palette](https://material.io/guidelines/style/color.html#color-color-palette).
 This is part of the default theme that ships with MDC-Web; it uses Indigo 500 for a primary color, and
-Pink A200 (`#FF4081`) for an accent color. Let's change the theme's primary color.
+Pink A200 (`#FF4081`) for a secondary color. Let's change the theme's primary color.
 
 A common misconception when implementing Material Design is that the colors you use _must_ come from
 the Material Design color palette. This is not true at all. The only defining guideline for color within Material