fix(theming, toolbar, subheader, input): align color palettes and contrasts with AA standards

docs/app/css/style.css

@@ -554,7 +554,6 @@ md-tabs.demo-source-tabs .active md-tab-label {
 md-toolbar.demo-toolbar {
   border-radius: 3px 3px 0 0;
   box-shadow: 0 1px rgba(255, 255, 255, 0.1);
-  color: white;
 }
 md-toolbar.demo-toolbar md-tab-label {
   color: #99E4EE;

docs/app/js/app.js

@@ -51,13 +51,18 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     '800': '#014AB6',
     '900': '#013583',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '300 400 A200 A400'
+    'contrastDarkColors': '50 100 200 300 400 A100 A200',
+    'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
   }));
+
   $mdThemingProvider.definePalette('docs-red', $mdThemingProvider.extendPalette('red', {
     'A100': '#DE3641'
   }));
 
+  $mdThemingProvider.definePalette('docs-warn', $mdThemingProvider.extendPalette('deep-orange', {
+    '500': '#d32f2f' // Override 500 with 700 hue for improved contrast on flat buttons
+  }));
+
   $mdThemingProvider.theme('docs-dark', 'default')
     .primaryPalette('yellow')
     .dark();
@@ -76,8 +81,9 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .defaultIconSet('img/icons/sets/core-icons.svg', 24);
 
   $mdThemingProvider.theme('default')
-      .primaryPalette('docs-blue')
-      .accentPalette('docs-red');
+    .primaryPalette('docs-blue')
+    .accentPalette('docs-red')
+    .warnPalette('docs-warn');
 
   $mdThemingProvider.enableBrowserColor();
 

docs/content/Theming/03_configuring_a_theme.md

@@ -4,7 +4,7 @@
 
 ## Configuring a theme
 
-By default your AngularJS Material application will use the default theme, a theme
+By default, your AngularJS Material application will use the default theme, a theme
 that is pre-configured with the following palettes for intention groups:
 
 - *primary* - indigo
@@ -72,16 +72,24 @@ angular.module('myApp', ['ngMaterial'])
 
 ### Defining Custom Palettes
 
-As mentioned before, AngularJS Material ships with the Material Design
-Spec's color palettes built in. In the event that you need to define a custom color palette, you can use `$mdThemingProvider` to define it, thereby making 
-it available to your theme for use in its intention groups. Note that you must
-specify all hues in the definition map.
+As mentioned before, AngularJS Material ships with the Material Design Spec's color palettes built
+in. In the event that you need to define a custom color palette, you can use `$mdThemingProvider`
+to define it. This makes the palette available to your theme for use in its intention groups.
+Note that you must specify all hues in the definition map. If you only want to override a few hues,
+please extend a palette (above).
+
+For a dark colored, custom palette, you should specify the default contrast color as  `light`.
+For lighter hues in the palette, you may need to add them to the list of `contrastDarkColors` to
+meet contrast guidelines. Similarly, you may need to add darker hues to `contrastStrongLightColors`,
+which has been updated to the latest Material Design guidelines for
+[Color Usability](https://material.io/archive/guidelines/style/color.html#color-usability).
+The update to the guidelines changed primary text on dark backgrounds from 87% to 100% opacity.
 
 <hljs lang="js">
 angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
 
-  $mdThemingProvider.definePalette('amazingPaletteName', {
+  $mdThemingProvider.definePalette('amazingDarkPaletteName', {
     '50': 'ffebee',
     '100': 'ffcdd2',
     '200': 'ef9a9a',
@@ -96,17 +104,49 @@ angular.module('myApp', ['ngMaterial'])
     'A200': 'ff5252',
     'A400': 'ff1744',
     'A700': 'd50000',
-    'contrastDefaultColor': 'light',    // whether, by default, text (contrast) 
-                                        // on this palette should be dark or light
-
-    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
-     '200', '300', '400', 'A100'],
-    'contrastLightColors': undefined    // could also specify this if default was 'dark'
+    // By default, text (contrast) on this palette should be white with 87% opacity.
+    'contrastDefaultColor': 'light',
+    // By default, for these lighter hues, text (contrast) should be 'dark'.
+    'contrastDarkColors': '50 100 200 300 400 500 600 A100 A200 A400',
+    // By default, for these darker hues, text (contrast) should be white with 100% opacity.
+    'contrastStrongLightColors': '700 800 900 A700'
   });
 
   $mdThemingProvider.theme('default')
-    .primaryPalette('amazingPaletteName')
+    .primaryPalette('amazingDarkPaletteName')
+});
+</hljs>
+
+For a light colored, custom palette, you should specify the default contrast color as `dark`.
+Then `contrastStrongLightColors` can be used if any hues are too dark for dark text.
+
+<hljs lang="js">
+angular.module('myApp', ['ngMaterial'])
+.config(function($mdThemingProvider) {
 
+  $mdThemingProvider.definePalette('amazingLightPaletteName', {
+    '50': '#f1f8e9',
+    '100': '#dcedc8',
+    '200': '#c5e1a5',
+    '300': '#aed581',
+    '400': '#9ccc65',
+    '500': '#8bc34a',
+    '600': '#7cb342',
+    '700': '#689f38',
+    '800': '#558b2f',
+    '900': '#33691e',
+    'A100': '#ccff90',
+    'A200': '#b2ff59',
+    'A400': '#76ff03',
+    'A700': '#64dd17',
+    // By default, text (contrast) on this palette should be dark with 87% opacity.
+    'contrastDefaultColor': 'dark',
+    // By default, for these darker hues, text (contrast) should be white with 100% opacity.
+    'contrastStrongLightColors': '800 900'
+  });
+
+  $mdThemingProvider.theme('default')
+    .accentPalette('amazingLightPaletteName')
 });
 </hljs>
 

src/components/button/button-theme.scss

@@ -52,21 +52,6 @@
       }
     }
   }
-  &.md-fab {
-    background-color: '{{accent-color}}';
-    color: '{{accent-contrast}}';
-    &:not([disabled]) {
-      .md-icon {
-        color: '{{accent-contrast}}';
-      }
-      &:hover {
-        background-color: '{{accent-A700}}';
-      }
-      &.md-focused {
-        background-color: '{{accent-A700}}';
-      }
-    }
-  }
 
   &.md-raised {
     color: '{{background-900}}';

src/components/button/demoBasicUsage/index.html

@@ -2,10 +2,10 @@
   <md-content>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <md-button>{{title1}}</md-button>
+      <md-button>Button</md-button>
       <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
       <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
-      <md-button class="md-warn">{{title4}}</md-button>
+      <md-button class="md-warn">Warn</md-button>
       <div class="label">Flat</div>
     </section>
     <md-divider></md-divider>
@@ -14,7 +14,7 @@
       <md-button class="md-raised">Button</md-button>
       <md-button class="md-raised md-primary">Primary</md-button>
       <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
-      <md-button class="md-raised md-warn">Warn</md-button>
+      <md-button class="md-raised md-accent">Accent</md-button>
       <div class="label">Raised</div>
     </section>
     <md-divider></md-divider>
@@ -58,10 +58,10 @@
     <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
-      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
-      <md-button class="md-accent">Accent</md-button>
-      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
+      <md-button class="md-primary md-hue-2">Primary Hue 2</md-button>
+      <md-button class="md-warn md-raised md-hue-1">Warn Hue 1</md-button>
+      <md-button class="md-accent md-raised md-hue-2">Accent Hue 2</md-button>
+      <md-button class="md-accent md-hue-3">Accent Hue 3</md-button>
       <div class="label">Themed</div>
     </section>
     <md-divider></md-divider>

src/components/button/demoBasicUsage/script.js

@@ -1,7 +1,5 @@
 angular.module('buttonsDemoBasic', ['ngMaterial'])
 .controller('AppCtrl', function($scope) {
-  $scope.title1 = 'Button';
-  $scope.title4 = 'Warn';
   $scope.isDisabled = true;
   $scope.googleUrl = 'http://google.com';
 });

src/components/button/demoBasicUsage/style.css

@@ -13,5 +13,4 @@ section .md-button {
   bottom: 5px;
   left: 7px;
   font-size: 14px;
-  opacity: 0.54;
 }

src/components/card/demoCardActionButtons/index.html

@@ -90,7 +90,7 @@
       <md-card>
         <md-card-header>
           <md-card-avatar>
-            <img src="img/logo.svg"/>
+            <img src="img/logo.svg" alt="Washed Out"/>
           </md-card-avatar>
           <md-card-header-text>
             <span class="md-title">AngularJS</span>

src/components/card/demoInCardActions/index.html

@@ -30,7 +30,7 @@
       <md-card>
         <md-card-header>
           <md-card-avatar>
-            <img class="md-user-avatar" src="img/100-2.jpeg"/>
+            <img class="md-user-avatar" src="img/100-2.jpeg" alt="Washed Out"/>
           </md-card-avatar>
           <md-card-header-text>
             <span class="md-title">User</span>

src/components/checkbox/checkbox-theme.scss

@@ -28,7 +28,7 @@ md-checkbox.md-THEME_NAME-theme {
   }
 
   &.md-checked .md-icon:after {
-    border-color: '{{accent-contrast-0.87}}';
+    border-color: '{{background-default}}';
   }
 
   &:not([disabled]) {
@@ -60,10 +60,6 @@ md-checkbox.md-THEME_NAME-theme {
       &.md-checked.md-focused:not([disabled]) .md-container:before {
         background-color: '{{warn-color-0.26}}';
       }
-
-      &.md-checked .md-icon:after {
-        border-color: '{{background-200}}';
-      }
     }
   }
 
@@ -76,17 +72,8 @@ md-checkbox.md-THEME_NAME-theme {
       background-color: '{{foreground-3}}';
     }
 
-    &.md-checked .md-icon:after {
-      border-color: '{{background-200}}';
-    }
-
-    .md-icon:after {
-      border-color: '{{foreground-3}}';
-    }
-
     .md-label {
       color: '{{foreground-3}}';
     }
   }
-
 }

src/components/colors/colors.js

@@ -5,7 +5,7 @@
    *  Use a RegExp to check if the `md-colors="<expression>"` is static string
    *  or one that should be observed and dynamically interpolated.
    */
-  var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
+  var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?(['"])[a-zA-Z0-9-.]*(['"]))+\s*}$/;
   var colorPalettes = null;
 
   /**

src/components/colors/demoBasicUsage/index.html

@@ -1,6 +1,6 @@
 <div layout="column" ng-cloak class="md-padding">
   <p style="margin-bottom: 10px;">
-    Custom component implementations using Material elements often want to easily apply theme colors
+    Custom component implementations using Material elements often want to apply theme colors
     to their custom components. Consider the custom <code>&lt;user-card&gt;</code> component below
     where the <code>md-colors</code> attribute is used to color the background and text colors
     using either the current or specified theme palette colors.
@@ -18,7 +18,7 @@ <h4 class="card-title"> <code>&lt;user-card&gt;</code> coloring using the 'fores
   <p class="footnote">
     Note: The <code>md-colors</code> directive allows pre-defined theme colors to be applied
     as CSS style properties. <code>md-colors</code> uses the palettes defined in the
-    <a class="md-accent" href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
+    <a href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
       Material Design Colors</a> and the themes defined using <code>$mdThemingProvider</code>.
     This directive is an extension of the <code>$mdTheming</code> features.
   </p>

src/components/colors/demoThemePicker/index.html

@@ -1,12 +1,12 @@
 <div layout="column" ng-cloak ng-controller="ThemeDemoCtrl" class="md-padding">
   <p>
-    Select two of the <a class="md-accent" href="{{mdURL}}">Material Palettes</a>
+    Select two of the <a href="{{mdURL}}">Material Palettes</a>
     below:
   </p>
   <!-- Theme Options -->
   <div layout="row" layout-wrap layout-align="center center">
     <md-button ng-repeat="color in colors" flex-gt-md="15" flex="30"
-               md-colors="{background: '{{color}}'}" md-colors-watch="false"
+               md-colors="{background: '{{color}}-400'}" md-colors-watch="false"
                ng-disabled="primary === color && !isPrimary" ng-click="selectTheme(color)">
       {{color}}
     </md-button>

src/components/input/input-theme.scss

@@ -1,6 +1,6 @@
 md-input-container.md-THEME_NAME-theme {
   .md-input {
-    @include input-placeholder-color('\'{{background-default-contrast-hint}}\'');
+    @include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');
     color: '{{background-default-contrast}}';
     border-color: '{{background-default-contrast-divider}}';
   }
@@ -11,7 +11,7 @@ md-input-container.md-THEME_NAME-theme {
 
   label,
   .md-placeholder {
-    color: '{{background-default-contrast-hint}}';
+    color: '{{background-default-contrast-secondary}}';
   }
 
   label.md-required:after {

src/components/subheader/subheader-theme.scss

@@ -1,5 +1,5 @@
 .md-subheader.md-THEME_NAME-theme {
-  color: '{{ foreground-2-0.23 }}';
+  color: '{{ foreground-2-0.54 }}';
   background-color: '{{background-default}}';
 
   &.md-primary {