fix(theming): don't assume selector corresponds to expression (#10818)

Before this change, the theming code assume that if you have a selector
like "md-primary", all of the expressions therein will only be in terms
of "primary". This was not the case, causing one style to leave an
unevaluated expression in the css output.

This change *also* deletes the troublesome style because it seemed to be
incorrect anyway.

Fixes #10793

Author: jelbourn

src/components/radioButton/radio-button-theme.scss

@@ -87,9 +87,6 @@ md-radio-group.md-THEME_NAME-theme {
   &.md-primary .md-checked:not([disabled]) .md-ink-ripple, .md-checked:not([disabled]).md-primary .md-ink-ripple {
     color: '{{primary-color-0.26}}';
   }
-  .md-checked.md-primary .md-ink-ripple {
-    color: '{{warn-color-0.26}}';
-  }
 }
 
 md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) {

src/core/services/theming/theming.js

@@ -880,14 +880,8 @@ function parseRules(theme, colorType, rules) {
   checkValidPalette(theme, colorType);
 
   rules = rules.replace(/THEME_NAME/g, theme.name);
-  var generatedRules = [];
-  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|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g');
   var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow|default)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g;
-  var palette = PALETTES[color.name];
 
   // find and replace simple variables where we use a specific hue, not an entire palette
   // eg. "{{primary-100}}"
@@ -910,10 +904,17 @@ function parseRules(theme, colorType, rules) {
     return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[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)
-  angular.forEach(color.hues, function(hueValue, hueName) {
+  angular.forEach(['default', 'hue-1', 'hue-2', 'hue-3'], function(hueName) {
     var newRule = rules
-      .replace(hueRegex, function(match, _, colorType, hueType, opacity) {
+      .replace(hueRegex, function(match, _, matchedColorType, hueType, opacity) {
+        var color = theme.colors[matchedColorType];
+        var palette = PALETTES[color.name];
+        var hueValue = color.hues[hueName];
         return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity);
       });
     if (hueName !== 'default') {
@@ -961,17 +962,12 @@ function generateAllThemes($injector, $mdTheming) {
                   .filter(function(rule) { return rule && rule.trim().length; })
                   .map(function(rule) { return rule.trim() + '}'; });
 
-
-  var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g');
-
   THEME_COLOR_TYPES.forEach(function(type) {
     rulesByType[type] = '';
   });
 
-
   // Sort the rules based on type, allowing us to do color substitution on a per-type basis
   rules.forEach(function(rule) {
-    var match = rule.match(ruleMatchRegex);
     // First: test that if the rule has '.md-accent', it goes into the accent set of rules
     for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) {
       if (rule.indexOf('.md-' + type) > -1) {

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

@@ -250,6 +250,7 @@ describe('$mdThemingProvider', function() {
         expect(parse('.md-THEME_NAME-theme { color: "{{foreground-shadow}}"; }')[0].content)
           .toEqual('color: ;');
       });
+
       it('for a dark theme', function() {
         testTheme.dark();
         expect(parse('.md-THEME_NAME-theme { color: "{{foreground-1}}"; }')[0].content)
@@ -264,6 +265,7 @@ describe('$mdThemingProvider', function() {
           .toEqual('color: 1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4);');
       });
     });
+
     it('parses contrast colors', function() {
       testTheme.primaryPalette('testPalette', {
         'default': '50'
@@ -283,6 +285,7 @@ describe('$mdThemingProvider', function() {
       expect(parse('{ color: "{{primary-contrast}}"; }')[0].content)
         .toEqual('color: rgb(255,255,255);');
     });
+
     it('generates base, non-colorType-specific, rules', function() {
       var accent100 = themingProvider._rgba(themingProvider._PALETTES.testPalette['100'].value);
       var result = parse('.md-THEME_NAME-theme { color: "{{accent-100}}"; }');
@@ -296,6 +299,7 @@ describe('$mdThemingProvider', function() {
       expect(result[3].hue).toBe('hue-3');
       expect(result.length).toBe(4);
     });
+
     it('generates colorType-specific rules for each hue', function() {
       var primary = themingProvider._rgba(themingProvider._PALETTES.testPalette['500'].value);
       var hue1 = themingProvider._rgba(themingProvider._PALETTES.testPalette['300'].value);
@@ -309,6 +313,14 @@ describe('$mdThemingProvider', function() {
       expect(result.length).toEqual(4);
     });
 
+    it('should generate styles when a md-something selector has an expression for a different palette', function() {
+      // The selector has `md-primary` in the name, but the expression is for md-warn.
+      var result = parse('.md-THEME_NAME-theme.md-primary { color: "{{warn-color}}"; }');
+
+      // This should not leave an unevaluated expression in the output.
+      expect(result.join(' ')).not.toContain('{{');
+    });
+
     it('generates colorType-specific rules for each hue with opacity', function() {
       var primary = themingProvider._rgba(themingProvider._PALETTES.testPalette['500'].value, '0.3');
       var hue1 = themingProvider._rgba(themingProvider._PALETTES.testPalette['300'].value, '0.3');