feat(theming): reduce specificity of default-theme selectors

See [docs](http://material.angularjs.org#/CSS/components) for details.
angular · Jun 3, 2015 · 8468c60 · 8468c60 · robertmesserle · Jun 3, 2015
1 parent 8d17301
commit 8468c60
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js
@@ -430,6 +430,12 @@ function parseRules(theme, colorType, rules) {
     if (hueName !== 'default') {
       newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName);
     }
+
+    // Don't apply a selector rule to the default theme, making it easier to override
+    // styles of the base-component
+    if (theme.name == 'default') {
+      newRule = newRule.replace(/\.md-default-theme/g, '');
+    }
     generatedRules.push(newRule);
   });
 

diff --git a/src/core/services/theming/theming.spec.js b/src/core/services/theming/theming.spec.js
@@ -189,11 +189,19 @@ describe('$mdThemingProvider', function() {
         themingProvider._parseRules(testTheme, 'primary', '').join('');
       }).toThrow();
     });
+
+    it('drops the default theme name from the selectors', function() {
+      expect(themingProvider._parseRules(
+        defaultTheme, 'primary', '.md-THEME_NAME-theme.md-button { }'
+      ).join('')).toContain('.md-button { }');
+    });
+
     it('replaces THEME_NAME', function() {
       expect(themingProvider._parseRules(
         testTheme, 'primary', '.md-THEME_NAME-theme {}'
       ).join('')).toContain('.md-test-theme {}');
     });
+
     describe('parses foreground text and shadow', function() {
       it('for a light theme', function() {
         testTheme.dark(false);