feat(theme): Add new mdc-theme-on-primary global variable (#2483)

Add new on-primary and on-secondary colors. BREAKING CHANGE: Removes the --mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR> CSS custom properties, and the mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR> CSS classes
material-components · Apr 18, 2018 · 777a0fd · 777a0fd
1 parent 82cd6ff
commit 777a0fd
Show file tree

Hide file tree

Showing 16 changed files with 62 additions and 125 deletions.
diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html
@@ -54,7 +54,7 @@
     <aside class="mdc-drawer mdc-drawer--temporary demo-drawer">
       <nav class="mdc-drawer__drawer">
         <header class="mdc-drawer__header">
-          <div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
+          <div class="mdc-drawer__header-content mdc-theme--on-primary mdc-theme--primary-bg">
             Header here
           </div>
         </header>

diff --git a/demos/icon-toggle.html b/demos/icon-toggle.html
@@ -109,7 +109,7 @@ <h2>Additional Color Combinations</h2>
           <div id="demo-color-combos">
             <div id="light-on-bg" class="demo-color-combo">
               <div>
-                <i class="mdc-icon-toggle material-icons mdc-theme--text-primary-on-primary"
+                <i class="mdc-icon-toggle material-icons mdc-theme--on-primary"
                    role="button"
                    aria-label="Add to favorites"
                    aria-pressed="false"
@@ -119,7 +119,7 @@ <h2>Additional Color Combinations</h2>
                   favorite_border
                 </i>
               </div>
-              <div class="mdc-theme--text-primary-on-primary">Light icon on background</div>
+              <div class="mdc-theme--on-primary">Light icon on background</div>
             </div>
             <div id="dark-on-bg" class="demo-color-combo">
               <div class="mdc-theme--primary">

diff --git a/demos/tabs.scss b/demos/tabs.scss
@@ -66,12 +66,12 @@
 .custom-indicator-tab-bar-in-toolbar,
 .custom-tab-bar-in-toolbar {
   .mdc-tab:not(.mdc-tab--active) {
-    @include mdc-tab-ink-color(rgba(mdc-theme-prop-value(text-primary-on-primary), 0.54));
+    @include mdc-tab-ink-color(rgba(mdc-theme-prop-value(on-primary), 0.54));
   }
 
   .mdc-tab--active,
   .mdc-tab:hover {
-    @include mdc-tab-ink-color(text-primary-on-primary);
+    @include mdc-tab-ink-color(on-primary);
   }
 }
 
@@ -80,5 +80,5 @@
 }
 
 .custom-tab-bar-in-toolbar {
-  @include mdc-tab-bar-indicator-ink-color(text-primary-on-primary);
+  @include mdc-tab-bar-indicator-ink-color(on-primary);
 }
diff --git a/demos/theme-loader.js b/demos/theme-loader.js
@@ -16,7 +16,7 @@
  */
 
 (function() {
-  var TRUSTED_THEMES = ['baseline', 'black', 'dark', 'white', 'yellow'];
+  var TRUSTED_THEMES = ['baseline', 'black', 'dark', 'shrine'];
   var DEFAULT_THEME = TRUSTED_THEMES[0];
   var PRIVATE_TYPE_MARKER = {};
 

diff --git a/demos/theme/_menu.scss b/demos/theme/_menu.scss
@@ -57,10 +57,6 @@
   border-color: $material-color-amber-300 $material-color-pink-400 $material-color-pink-400 $material-color-amber-300;
 }
 
-[data-theme="white"] .demo-theme-color-radio__inner {
-  border-color: #fff $material-color-orange-500 $material-color-orange-500 #fff;
-}
-
-[data-theme="yellow"] .demo-theme-color-radio__inner {
-  border-color: $material-color-yellow-500 $material-color-blue-500 $material-color-blue-500 $material-color-yellow-500;
+[data-theme="shrine"] .demo-theme-color-radio__inner {
+  border-color: #442B2D #FCB8AB #FCB8AB #442B2D;
 }
diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -73,21 +73,13 @@
                   </div>
                   Black primary (custom)
                 </li>
-                <li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="white">
+                <li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="shrine">
                   <div class="mdc-list-item__graphic">
                     <i class="demo-theme-color-radio">
                       <span class="demo-theme-color-radio__inner"></span>
                     </i>
                   </div>
-                  White primary (custom)
-                </li>
-                <li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="yellow">
-                  <div class="mdc-list-item__graphic">
-                    <i class="demo-theme-color-radio">
-                      <span class="demo-theme-color-radio__inner"></span>
-                    </i>
-                  </div>
-                  Yellow primary (custom)
+                  Shrine (custom)
                 </li>
               </ul>
             </div>
@@ -113,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>
@@ -182,10 +174,10 @@ <h3 class="mdc-typography--headline5 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>
@@ -218,11 +210,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
 
               <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--text-primary-on-primary">Primary</span>
-                  <span class="demo-theme-text-style mdc-theme--text-secondary-on-primary">Secondary</span>
-                  <span class="demo-theme-text-style mdc-theme--text-hint-on-primary">Hint</span>
-                  <span class="demo-theme-text-style mdc-theme--text-disabled-on-primary">Disabled</span>
-                  <span class="demo-theme-text-style mdc-theme--text-icon-on-primary material-icons">favorite</span>
+                  <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>
@@ -232,11 +221,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
 
               <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--text-primary-on-secondary">Primary</span>
-                  <span class="demo-theme-text-style mdc-theme--text-secondary-on-secondary">Secondary</span>
-                  <span class="demo-theme-text-style mdc-theme--text-hint-on-secondary">Hint</span>
-                  <span class="demo-theme-text-style mdc-theme--text-disabled-on-secondary">Disabled</span>
-                  <span class="demo-theme-text-style mdc-theme--text-icon-on-secondary material-icons">favorite</span>
+                  <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>

diff --git a/demos/theme/theme-white.scss → demos/theme/theme-shrine.scss b/demos/theme/theme-white.scss → demos/theme/theme-shrine.scss
@@ -16,8 +16,9 @@
 
 @import "../../packages/mdc-theme/color-palette";
 
-// TODO: Use theme mixin(s) instead
-$mdc-theme-primary: #fff;
-$mdc-theme-secondary: $material-color-orange-500;
+$mdc-theme-primary: #fcb8ab;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: #442b2d;
+$mdc-theme-on-secondary: #442b2d;
 
 @import "./theme-shared";
diff --git a/demos/theme/theme-yellow.scss b/demos/theme/theme-yellow.scss
diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html
@@ -42,7 +42,7 @@
     <aside class="mdc-drawer mdc-drawer--temporary">
       <nav class="mdc-drawer__drawer">
         <header class="mdc-drawer__header">
-          <div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
+          <div class="mdc-drawer__header-content mdc-theme--on-primary mdc-theme--primary-bg">
             Header here
           </div>
         </header>

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -54,8 +54,8 @@
 .mdc-button--unelevated {
   @include mdc-button--filled_;
   @include mdc-button-container-fill-color(primary);
-  @include mdc-button-ink-color(text-primary-on-primary);
-  @include mdc-states(text-primary-on-primary);
+  @include mdc-button-ink-color(on-primary);
+  @include mdc-states(on-primary);
 }
 
 .mdc-button--raised {

diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
@@ -23,8 +23,8 @@
   @include mdc-fab-base_;
   @include mdc-fab-container-color(secondary);
   @include mdc-fab-icon-size(24px);
-  @include mdc-fab-ink-color(text-primary-on-secondary);
-  @include mdc-states(text-primary-on-secondary);
+  @include mdc-fab-ink-color(on-secondary);
+  @include mdc-states(on-secondary);
 }
 
 .mdc-fab--mini {

diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md
@@ -272,7 +272,7 @@ it, or its ancestors, have a `dir="rtl"` attribute.
 
 `mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background
 color for its background color. `mdc-grid-tile__secondary` uses the theme's primary
-color for it's background color, and the theme's `text-primary-on-primary` color for its text color.
+color for its background color, and the theme's `on-primary` color for its text color.
 
 ### Using the Foundation Class
 

diff --git a/packages/mdc-grid-list/mdc-grid-list.scss b/packages/mdc-grid-list/mdc-grid-list.scss
@@ -117,7 +117,7 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 
 .mdc-grid-tile__secondary {
   @include mdc-theme-prop(background-color, primary);
-  @include mdc-theme-prop(color, text-primary-on-primary);
+  @include mdc-theme-prop(color, on-primary);
 
   position: absolute;
   bottom: 0;

diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md
@@ -16,23 +16,7 @@ path: /catalog/theme/
   </a>
 </div>-->
 
-This color palette comprises primary and secondary colors that can be used for illustration or to develop your brand colors.
-
-MDC Theme is a foundational module that themes MDC Web components. The colors in this module are derived from three theme colors:
-
-* Primary: the primary color used in your application, applies to a number of UI elements.
-* Secondary: the secondary color used in your application, applies to a number of UI elements. (Previously called "accent".)
-* Background: the background color for your application, aka the color on top of which your UI is drawn.
-
-and five text styles:
-
-* Primary: used for most text
-* Secondary: used for text which is lower in the visual hierarchy
-* Hint: used for text hints, such as those in text fields and labels
-* Disabled: used for text in disabled components and content
-* Icon: used for icons
-
-> **A note about Primary and Secondary**, don't confuse primary/secondary _color_ with primary/secondary _text_. The former refers to the primary/secondary _theme_ color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content.
+The Material Design color system can be used to create a color scheme that reflects your brand or style.
 
 ## Design & API Documentation
 
@@ -53,58 +37,58 @@ npm install @material/theme
 
 ## Usage
 
-### Change Theme Colors
-
-MDC Theme makes it easy to develop your brand colors. You override the default theme color through Sass variables or CSS custom properties. CSS custom properties enables runtime theming.
+### Color Scheme
 
-> **A note about Sass variables**, you need to define the three theme color variables before importing mdc-theme or any MDC Web components that rely on it, like following:
+You can define the theme color variables before importing any MDC Web components:
 
 ```scss
-$mdc-theme-primary: #9c27b0; // Purple 500
-$mdc-theme-secondary: #ffab40; // Orange A200
-$mdc-theme-background: #fff; // White
+$mdc-theme-primary: #fcb8ab;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: #442b2d;
+$mdc-theme-on-secondary: #442b2d;
 
-@import "@material/theme/mdc-theme";
+@import "@material/button/mdc-button";
 ```
 
-> **A note about `$mdc-theme-secondary`**: This variable was previously named `$mdc-theme-accent`.
-> For backward compatibility, `$mdc-theme-accent` still exists, but it is **deprecated**.
-> Apps that previously customized `$mdc-theme-accent` will continue to work, but new apps should use
-> `$mdc-theme-secondary` instead.
-
-The text color, for text placed on top of these selected theme colors, is programmatically computed based on color contrast. We follow the Web Content Accessibility Guidelines 2.0.
+We suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.
 
 https://www.w3.org/TR/WCAG20
 
+### Advanced customization
+
+Color scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work "out of the box". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.
+
+### Non-Sass customization
+
+Only a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.
+
 #### CSS Custom Properties
 
-> **A note about `<TEXT_STYLE>` and `<THEME_COLOR>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`. `<THEME_COLOR>` represents the lowercase name of the theme colors listed above, e.g. `secondary`. When you put it all together it would be `--mdc-theme-text-hint-on-secondary`.
+**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
 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-text-<TEXT_STYLE>-on-<THEME_COLOR>` | Text color for TEXT_STYLE on top of THEME_COLOR background
+`--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
 
-### CSS Classes
+#### CSS Classes
 
-MDC Web provides SASS mixins, such as `mdc-button-filled-accessible`, to facilitate customization of some components. For more information, consult the documentation for each component.
-
-If you want to modify an element, which is not a Material Design component, you can apply the following modifier CSS classes.
-
-> **A note about `<TEXT_STYLE>` and `<THEME_COLOR>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`. `<THEME_COLOR>` represents the lowercase name of the theme colors listed above, e.g. `secondary`. When you put it all together it would be `mdc-theme--text-hint-on-secondary`.
+> **A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
 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-<THEME_COLOR>` | Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background
 `mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background
 `mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background
 
@@ -118,16 +102,18 @@ Mixin | Description
 
 The properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.
 
-> **A note about `<TEXT_STYLE>` and `<THEME_COLOR>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`. `<THEME_COLOR>` represents the lowercase name of the theme colors listed above, e.g. `secondary`. When you put it all together it would be `text-hint-on-secondary`.
+**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.
 
 Property Name | Description
 --- | ---
 `primary` | The theme primary color
 `secondary` | The theme secondary color
 `background` | The theme background color
-`text-<TEXT_STYLE>-on-<THEME_COLOR>` | TEXT_STYLE on top of THEME_COLOR background
 `text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background
 `text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background
+`on-primary` | A text/iconography color that is usable on top of primary color
+`on-secondary` | A text/iconography color that is usable on top of secondary color
+
 
 #### `mdc-theme-luminance($color)`