feat(theming): rename palette methods, change default palettes

BREAKING: primaryColor, accentColor, and warnColor are depricated. Use
primaryPalette, accentPalette, and warnPalette instead. Additionally
the default palettes have been changed to indigo for primary and pink as
accent. Configure your default theme using $mdThemingProvider to change.

Closes #1252

docs/content/Theming/03_configuring_a_theme.md

@@ -18,15 +18,15 @@ during application configuration.
 ### Configuring Color Intentions
 
 You can specify a color palette for a given color intention by calling the
-appropriate configuration method (`theme.primaryColor`, `theme.accentColor`,
-`theme.warnColor`, `theme.backgroundColor`).
+appropriate configuration method (`theme.primaryPalette`, `theme.accentPalette`,
+`theme.warnPalette`, `theme.backgroundPalette`).
 
 <hljs lang="js">
 angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
   $mdThemingProvider.theme('default')
-    .primaryColor('pink')
-    .accentColor('orange');
+    .primaryPalette('pink')
+    .accentPalette('orange');
 });
 </hljs>
 
@@ -43,15 +43,15 @@ angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
 
   $mdThemingProvider.theme('default')
-    .primaryColor('pink', {
+    .primaryPalette('pink', {
       'default': '400', // by default use shade 400 from the pink palette for primary intentions
       'hue-1': '100', // use shade 100 for the `md-hue-1` class
       'hue-2': '600', // use shade 600 for the `md-hue-2` class
       'hue-3': 'A100' // use shade A100 for the `md-hue-3` class
     })
     // If you specify less than all of the keys, it will inherit from the
     // default shades
-    .accentColor('purple', {
+    .accentPalette('purple', {
       'default': '200' // use shade 200 for default, and keep all other shades the same
     });
 
@@ -94,7 +94,7 @@ angular.module('myApp', ['ngMaterial'])
   });
 
   $mdThemingProvider.theme('default')
-    .primaryColor('amazingPaletteName')
+    .primaryPalette('amazingPaletteName')
 
 });
 </hljs>
@@ -117,7 +117,7 @@ angular.module('myApp', ['ngMaterial'])
 
   // Use that theme for the primary intentions
   $mdThemingProvider.theme('default')
-    .primaryColor('neonRed')
+    .primaryPalette('neonRed')
 
 });
 </hljs>

docs/content/Theming/04_multiple_themes.md

@@ -19,7 +19,7 @@ angular.module(
 angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
   $mdThemingProvider.theme('altTheme')
-    .primaryColor('purple') // specify primary color, all
+    .primaryPalette('purple') // specify primary color, all
                             // other color intentions will be inherited
                             // from default
 });

src/components/button/demoBasicUsage/index.html

@@ -45,7 +45,7 @@
       <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-3">Accent Hue 3</md-button>
+      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
       <div class="label">Themed</div>
     </section>
 

src/core/core.js

@@ -24,10 +24,10 @@ function MdCoreConfigure($provide, $mdThemingProvider) {
   $provide.decorator('$$rAF', ['$delegate', '$rootScope', rAFDecorator]);
 
   $mdThemingProvider.theme('default')
-    .primaryColor('blue')
-    .accentColor('green')
-    .warnColor('red')
-    .backgroundColor('grey');
+    .primaryPalette('indigo')
+    .accentPalette('pink')
+    .warnPalette('red')
+    .backgroundPalette('grey');
 
   function rAFDecorator($$rAF, $rootScope) {
     /**

src/core/services/theming/theming.js

@@ -61,10 +61,10 @@ var DEFAULT_COLOR_TYPE = 'primary';
 // A color in a theme will use these hues by default, if not specified by user.
 var LIGHT_DEFAULT_HUES = {
   'accent': {
-    'default': 'A700',
-    'hue-1': 'A200',
+    'default': 'A200',
+    'hue-1': 'A100',
     'hue-2': 'A400',
-    'hue-3': 'A100'
+    'hue-3': 'A700'
   }
 };
 var DARK_DEFAULT_HUES = {
@@ -154,7 +154,7 @@ function ThemingProvider($mdColorPalette) {
   // Register a theme (which is a collection of color palettes to use with various states
   // ie. warn, accent, primary )
   // Optionally inherit from an existing theme
-  // $mdThemingProvider.theme('custom-theme').primaryColor('red');
+  // $mdThemingProvider.theme('custom-theme').primaryPalette('red');
   function registerTheme(name, inheritFrom) {
     inheritFrom = inheritFrom || 'default';
     if (THEMES[name]) return THEMES[name];
@@ -219,7 +219,7 @@ function ThemingProvider($mdColorPalette) {
 
     THEME_COLOR_TYPES.forEach(function(colorType) {
       var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];
-      self[colorType + 'Color'] = function setColorType(paletteName, hues) {
+      self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {
         var color = self.colors[colorType] = {
           name: paletteName,
           hues: angular.extend({}, defaultHues, hues)
@@ -248,9 +248,15 @@ function ThemingProvider($mdColorPalette) {
             );
           }
         });
-
         return self;
       };
+
+      self[colorType + 'Color'] = function() {
+        var args = Array.prototype.slice.call(arguments);
+        console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been depricated. ' +
+                     'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.');
+        return self[colorType + 'Palette'].apply(self, args);
+      };
     });
   }
 
@@ -450,7 +456,7 @@ function generateThemes($injector) {
     var lightColors = palette.contrastLightColors || [];
     var darkColors = palette.contrastDarkColors || [];
 
-    // Sass provides these colors as space-separated lists
+    // These colors are provided as space-separated lists
     if (typeof lightColors === 'string') lightColors = lightColors.split(' ');
     if (typeof darkColors === 'string') darkColors = darkColors.split(' ');
 

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

@@ -28,10 +28,10 @@ describe('$mdThemingProvider', function() {
         'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100']
       };
       defaultTheme = themingProvider.theme('default')
-        .primaryColor('testPalette')
-        .warnColor('testPalette')
-        .accentColor('testPalette')
-        .backgroundColor('testPalette');
+        .primaryPalette('testPalette')
+        .warnPalette('testPalette')
+        .accentPalette('testPalette')
+        .backgroundPalette('testPalette');
 
       testTheme = themingProvider.theme('test');
     });
@@ -67,7 +67,7 @@ describe('$mdThemingProvider', function() {
         testTheme.dark();
         expect(testTheme.colors.background.hues['hue-3']).toBe(darkBackground['hue-3']);
 
-        testTheme.backgroundColor('testPalette', {
+        testTheme.backgroundPalette('testPalette', {
           'hue-3': '50'
         });
         testTheme.dark(false);
@@ -79,7 +79,7 @@ describe('$mdThemingProvider', function() {
       var parentTheme;
       beforeEach(function() {
         themingProvider.definePalette('parentPalette', angular.extend({}, testPalette));
-        parentTheme = themingProvider.theme('parent').primaryColor('parentPalette');
+        parentTheme = themingProvider.theme('parent').primaryPalette('parentPalette');
       });
       it('allows extension by string', function() {
         var childTheme = themingProvider.theme('child', 'parent');
@@ -101,21 +101,21 @@ describe('$mdThemingProvider', function() {
       });
       it('allows specifying a custom hue map', function() {
         expect(testTheme.colors.primary.hues['hue-1']).not.toBe('50');
-        testTheme.primaryColor('testPalette', {
+        testTheme.primaryPalette('testPalette', {
           'hue-1': '50'
         });
         expect(testTheme.colors.primary.hues['hue-1']).toBe('50');
       });
       it('errors on invalid key in hue map', function() {
         expect(function() {
-          testTheme.primaryColor('testPalette', {
+          testTheme.primaryPalette('testPalette', {
             'invalid-key': '100'
           });
         }).toThrow();
       });
       it('errors on invalid value in hue map', function() {
         expect(function() {
-          testTheme.primaryColor('testPalette', {
+          testTheme.primaryPalette('testPalette', {
             'hue-1': 'invalid-value'
           });
         }).toThrow();
@@ -165,7 +165,7 @@ describe('$mdThemingProvider', function() {
     }
 
     it('errors if given a theme with invalid palettes', function() {
-      testTheme.primaryColor('invalidPalette');
+      testTheme.primaryPalette('invalidPalette');
       expect(function() {
         themingProvider._parseRules(testTheme, 'primary', '');
       }).toThrow();
@@ -204,13 +204,13 @@ describe('$mdThemingProvider', function() {
       });
     });
     it('parses contrast colors', function() {
-      testTheme.primaryColor('testPalette', {
+      testTheme.primaryPalette('testPalette', {
         'default': '50'
       });
       expect(parse('.md-THEME_NAME-theme { color: "{{primary-contrast}}"; } ')[0].content)
         .toEqual('color: rgb(0,0,0);');
 
-      testTheme.primaryColor('testPalette', {
+      testTheme.primaryPalette('testPalette', {
         'default': '800'
       });
       expect(parse('{ color: "{{primary-contrast}}"; }')[0].content)