fix(theme, colors): fix lint errors and improve docs

- fix lint warning of unnecessary escape in regex and missing colon
- resolve test failures after merge
- fix URLs and icons in `md-colors` demos
- clarify how to map the old foreground expressions in theming docs
- update links to opacity requirements for icons

Author: Splaktar

src/components/colors/demoBasicUsage/index.html

@@ -17,9 +17,9 @@
   <!-- Footnote -->
   <p class="footnote">
     Note: The <code>md-colors</code> directive allows pre-defined theme colors to be easily applied
-    as CSS style properties. <code>md-colors</code> uses the Palettes defined at
-    <a class="md-accent" href="https://material.io/archive/guidelines/style/color.html#">Material Design Colors</a>
-    and the Themes defined using <code>$mdThemingProvider</code>. This feature is simply an
-    extension of the <code>$mdTheming</code> features.
+    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">
+      Material Design Colors</a> and the Themes defined using <code>$mdThemingProvider</code>.
+    This feature is simply an extension of the <code>$mdTheming</code> features.
   </p>
 </div>

src/components/colors/demoBasicUsage/regularCard.tmpl.html

@@ -2,7 +2,7 @@
   <md-card-title>
     <md-card-title-media>
       <div class="md-media-sm card-media" layout>
-        <md-icon md-svg-icon="person" style="color:grey"></md-icon>
+        <md-icon md-svg-icon="social:person" style="color:grey"></md-icon>
       </div>
     </md-card-title-media>
     <md-card-title-text>

src/components/colors/demoBasicUsage/script.js

@@ -5,7 +5,7 @@ angular.module('colorsDemo', ['ngMaterial'])
       .accentPalette('green');
 
     $mdIconProvider
-      .defaultIconSet('img/icons/sets/social-icons.svg', 24);
+      .iconSet('social', 'img/icons/sets/social-icons.svg', 24);
   })
   .directive('regularCard', function () {
     return {

src/components/colors/demoBasicUsage/userCard.tmpl.html

@@ -2,7 +2,7 @@
   <md-card-title>
     <md-card-title-media>
       <div class="md-media-sm card-media" layout md-colors="::{background: '{{theme}}-accent'}">
-        <md-icon md-svg-icon="person"></md-icon>
+        <md-icon md-svg-icon="social:person"></md-icon>
       </div>
     </md-card-title-media>
     <md-card-title-text>

src/components/colors/demoThemePicker/script.js

@@ -3,7 +3,7 @@ angular
   .controller('ThemeDemoCtrl', function ($scope, $mdColorPalette) {
     $scope.colors = Object.keys($mdColorPalette);
 
-    $scope.mdURL = 'https://material.google.com/style/color.html#color-color-palette';
+    $scope.mdURL = 'https://material.io/archive/guidelines/style/color.html#color-color-palette';
     $scope.primary = 'purple';
     $scope.accent = 'green';
 

src/core/services/theming/theming.js

@@ -134,9 +134,26 @@ function detectDisabledThemes($mdThemingProvider) {
  * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue
  * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules
  * {{primary-contrast-divider}} - Apply divider opacity to contrast color
- * {{background-default-contrast}} - Apply primary text color for contrasting with default background
- * {{background-50-contrast-icon}} - Apply contrast color for icon on background's shade 50 hue
  *
+ * Foreground expansion: Applies rgba to black/white foreground text
+ *
+ * Old Foreground Expressions:
+ * {{foreground-1}} - used for primary text
+ * {{foreground-2}} - used for secondary text/divider
+ * {{foreground-3}} - used for disabled text
+ * {{foreground-4}} - used for dividers
+ *
+ * New Foreground Expressions:
+ *
+ * Apply primary text color for contrasting with default background
+ *  {{background-default-contrast}} - default opacity
+ *  {{background-default-contrast-secondary}} - opacity for secondary text
+ *  {{background-default-contrast-hint}} - opacity for hints and placeholders
+ *  {{background-default-contrast-disabled}} - opacity for disabled text
+ *  {{background-default-contrast-divider}} - opacity for dividers
+ *
+ * Apply contrast color for specific shades
+ *  {{background-50-contrast-icon}} - Apply contrast color for icon on background's shade 50 hue
  */
 
 // In memory generated CSS rules; registered by theme.name
@@ -190,9 +207,8 @@ var DARK_DEFAULT_HUES = {
   }
 };
 
-// use inactive icon opacity from https://material.google.com/style/color.html#color-text-background-colors
-// not inactive icon opacity from https://material.google.com/style/icons.html#icons-system-icons
-
+// Icon opacity values (active/inactive) from
+// https://material.io/archive/guidelines/style/icons.html#icons-system-icons
 var DARK_CONTRAST_OPACITY = {
   'icon': 0.54,
   'secondary': 0.54,
@@ -209,6 +225,8 @@ var LIGHT_CONTRAST_OPACITY = {
   'divider': 0.12
 };
 
+// Icon opacity values (active/inactive) from
+// https://material.io/archive/guidelines/style/icons.html#icons-system-icons
 var STRONG_LIGHT_CONTRAST_OPACITY = {
   'icon': 1.0,
   'secondary': 0.7,
@@ -991,10 +1009,11 @@ function parseRules(theme, colorType, rules) {
   checkValidPalette(theme, colorType);
 
   rules = rules.replace(/THEME_NAME/g, theme.name);
+  var color = theme.colors[colorType];
   var themeNameRegex = new RegExp('\\.md-' + theme.name + '-theme', 'g');
   // Matches '{{ primary-color }}', etc
-  var hueRegex = new RegExp('(?:\'|")?{{\\s*(' + colorType + ')-?(color|default)?-?(contrast)?-?((?:\\d\\.?\\d*)|(?:[a-zA-Z]+))?\\s*}}(\"|\')?','g');
-  var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue-[0-3]|shadow|default)-?(contrast)?-?((?:\d\.?\d*)|(?:[a-zA-Z]+))?\s*\}\}'?"?/g;
+  var hueRegex = new RegExp('(\'|")?{{\\s*([a-zA-Z]+)-?(color|default)?-?(contrast)?-?((?:\\d\\.?\\d*)|(?:[a-zA-Z]+))?\\s*}}("|\')?','g');
+  var simpleVariableRegex = /'?"?{{\s*([a-zA-Z]+)-(A?\d+|hue-[0-3]|shadow|default)-?(contrast)?-?((?:\d\.?\d*)|(?:[a-zA-Z]+))?\s*}}'?"?/g;
   var palette = PALETTES[color.name];
   var defaultBgHue = theme.colors['background'].hues['default'];
   var defaultBgContrastType = PALETTES[theme.colors['background'].name][defaultBgHue].contrastType;
@@ -1005,20 +1024,20 @@ function parseRules(theme, colorType, rules) {
   rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, contrast, opacity) {
     var regexColorType = colorType;
     if (colorType === 'foreground') {
-      if (hue == 'shadow') {
+      if (hue === 'shadow') {
         return theme.foregroundShadow;
       } else if (theme.foregroundPalette[hue]) {
         // Use user defined palette number (ie: foreground-2)
-        return rgba( colorToRgbaArray( theme.foregroundPalette[hue] ) );
+        return rgba(colorToRgbaArray(theme.foregroundPalette[hue]));
       } else if (theme.foregroundPalette['1']){
-        return rgba( colorToRgbaArray( theme.foregroundPalette['1'] ) );
+        return rgba(colorToRgbaArray(theme.foregroundPalette['1']));
       }
       // Default to background-default-contrast-{opacity}
       colorType = 'background';
       contrast = 'contrast';
       if (!opacity && hue) {
-        // Convert references to legacy hues to opacities (ie: foreground-4 to *-divider)
-        switch(hue) {
+        // Convert references to legacy hues to opacities (i.e. foreground-4 to *-divider)
+        switch (hue) {
           // hue-1 uses default opacity
           case '2':
             opacity = 'secondary';
@@ -1042,7 +1061,8 @@ function parseRules(theme, colorType, rules) {
     var colorDetails = (PALETTES[ theme.colors[colorType].name ][hue] || '');
 
     // If user has specified a foreground color, use those
-    if (colorType === 'background' && contrast && regexColorType !== 'foreground' && colorDetails.contrastType == defaultBgContrastType) {
+    if (colorType === 'background' && contrast && regexColorType !== 'foreground' &&
+        colorDetails.contrastType === defaultBgContrastType) {
       // Don't process if colorType was changed
       switch (opacity) {
         case 'secondary':
@@ -1077,8 +1097,6 @@ function parseRules(theme, colorType, rules) {
     return rgba(colorDetails[contrast ? 'contrast' : 'value'], opacity);
   });
 
-  // Matches '{{ primary-color }}', etc
-  var hueRegex = new RegExp('(\'|")?{{\\s*([a-zA-Z]+)-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}("|\')?','g');
   var generatedRules = [];
 
   // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)
@@ -1099,8 +1117,8 @@ function parseRules(theme, colorType, rules) {
 
     // Don't apply a selector rule to the default theme, making it easier to override
     // styles of the base-component
-    if (theme.name == 'default') {
-      var themeRuleRegex = /((?:\s|>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)\.md-default-theme((?:\s|>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g;
+    if (theme.name === 'default') {
+      var themeRuleRegex = /((?:\s|>|\.|\w|-|:|\(|\)|\[|]|"|'|=)*)\.md-default-theme((?:\s|>|\.|\w|-|:|\(|\)|\[|]|"|'|=)*)/g;
 
       newRule = newRule.replace(themeRuleRegex, function(match, start, end) {
         return match + ', ' + start + end;
@@ -1134,7 +1152,7 @@ function generateAllThemes($injector, $mdTheming) {
 
   // Break the CSS into individual rules
   var rules = themeCss
-                  .split(/\}(?!(\}|'|"|;))/)
+                  .split(/}(?!(}|'|"|;))/)
                   .filter(function(rule) { return rule && rule.trim().length; })
                   .map(function(rule) { return rule.trim() + '}'; });
 
@@ -1207,7 +1225,7 @@ function generateAllThemes($injector, $mdTheming) {
       return 'light';
     }
     function getContrastColor(contrastType) {
-      switch(contrastType) {
+      switch (contrastType) {
         default:
         case 'strongLight':
           return STRONG_LIGHT_CONTRAST_COLOR;
@@ -1218,7 +1236,7 @@ function generateAllThemes($injector, $mdTheming) {
       }
     }
     function getOpacityValues(contrastType) {
-      switch(contrastType) {
+      switch (contrastType) {
         default:
         case 'strongLight':
           return STRONG_LIGHT_CONTRAST_OPACITY;

src/core/services/theming/theming.spec.js

@@ -171,12 +171,12 @@ describe('$mdThemingProvider', function() {
     function parse(str) {
       return themingProvider._parseRules(testTheme, 'primary', str)
         .join('')
-        .split(/\}(?!(\}|'|"|;))/)
+        .split(/}(?!(}|'|"|;))/)
         .filter(function(val) { return !!val; })
         .map(function(rule) {
           rule += '}';
           return {
-            content: (rule.match(/\{\s*(.*?)\s*\}/) || [])[1] || null,
+            content: (rule.match(/{\s*(.*?)\s*}/) || [])[1] || null,
             hue: (rule.match(/md-(hue-\d)/) || [])[1] || null,
             type: (rule.match(/(primary)/) || [])[1] || null
           };