fix(themes): anchor should inherit theme to support colors

Without theme inheritance, classname uses of md-primary, md-accent,
md-warn will not work properly.

* add theming.js spec url

> Developers must still apply the classname to the stand-alone anchor tags.

Author: ThomasBurleson

src/components/button/button-theme.scss

@@ -157,36 +157,38 @@
 }
 
 
-._md a.md-THEME_NAME-theme:not(.md-button) {
-  &.md-primary {
-    color: '{{primary-color}}';
+._md {
+  a.md-THEME_NAME-theme:not(.md-button) {
+    &.md-primary {
+      color: '{{primary-color}}';
 
-    &:hover {
-      color: '{{primary-700}}';
+      &:hover {
+        color: '{{primary-700}}';
+      }
     }
-  }
-  
-  &.md-accent {
-    color: '{{accent-color}}';
 
-    &:hover {
-      color: '{{accent-700}}';
+    &.md-accent {
+      color: '{{accent-color}}';
+
+      &:hover {
+        color: '{{accent-700}}';
+      }
     }
-  }
 
-  &.md-accent {
-    color: '{{accent-color}}';
+    &.md-accent {
+      color: '{{accent-color}}';
 
-    &:hover {
-      color: '{{accent-A700}}';
+      &:hover {
+        color: '{{accent-A700}}';
+      }
     }
-  }
 
-  &.md-warn {
-    color: '{{warn-color}}';
+    &.md-warn {
+      color: '{{warn-color}}';
 
-    &:hover {
-      color: '{{warn-700}}';
+      &:hover {
+        color: '{{warn-700}}';
+      }
     }
   }
 }

src/components/button/button.js

@@ -7,7 +7,40 @@
  */
 angular
     .module('material.components.button', [ 'material.core' ])
-    .directive('mdButton', MdButtonDirective);
+    .directive('mdButton', MdButtonDirective)
+    .directive('a', MdAnchorDirective);
+
+
+/**
+ * @ngdoc directive
+ * @name a
+ * @module material.components.button
+ *
+ * @restrict E
+ *
+ * @description
+ * `a` is a anchnor directive used to inherit theme so stand-alone anchors.
+ * This allows standalone `a` tags to support theme colors for md-primary, md-accent, etc.
+ *
+ * @usage
+ *
+ * <hljs lang="html">
+ *  <md-content md-theme="myTheme">
+ *    <a href="#chapter1" class="md-accent"></a>
+ *  </md-content>
+ * </hljs>
+ */
+function MdAnchorDirective($mdTheming) {
+  return {
+    restrict : 'E',
+    link : function postLink(scope, element) {
+      // Make sure to inherit theme so stand-alone anchors
+      // support theme colors for md-primary, md-accent, etc.
+      $mdTheming(element);
+    }
+  };
+}
+
 
 /**
  * @ngdoc directive

src/core/services/theming/theming.js

@@ -63,6 +63,8 @@ var GENERATED = { };
 var PALETTES;
 var THEMES;
 
+// Text Colors on light and dakr backgrounds
+// @see https://www.google.com/design/spec/style/color.html#color-text-background-colors
 var DARK_FOREGROUND = {
   name: 'dark',
   '1': 'rgba(0,0,0,0.87)',