fix(tabs): align theming with spec updates

- by default, use the accent color for the selected tab's text
  instead of the primary color. It should match the ink bar.
- add support for white/black (contrast color) ink bar with `md-primary` background
- non-selected tabs are now colored with the palette's contrast color at 70% opacity
- remove padding around `md-tabs` in Dynamic Tabs demo
- add theming docs for `md-tabs`
- fix theming issues with pagination buttons
- default `md-accent` and `md-warn` tab background colors to the 500 hue

Fixes #7685

Author: Splaktar

src/components/tabs/demoCenterTabs/readme.html

@@ -0,0 +1 @@
+<p>This demo shows how you can horizontally center tabs and use the primary color as your tab background.</p>

src/components/tabs/demoDynamicHeight/readme.html

@@ -1,11 +1,10 @@
 <p>
   The Dynamic Height demo shows how tabs can be used to display content with varying heights.
 </p>
-
-<p>
-  <i>
+<blockquote>
+  <p>
     <b>Note:</b> If you are using the Tabs component for page-level navigation, please take a look
-    at the <a href="./demo/navBar">NavBar component</a> instead as it can handle this case a bit
-    more natively.
-  </i>
-</p>
+    at the <a href="./demo/navBar">NavBar component</a> instead. It has better support for navigation
+    and can performantly handle tabs with larger, more rich content.
+  </p>
+</blockquote>

src/components/tabs/demoDynamicTabs/index.html

@@ -1,5 +1,5 @@
 <div ng-controller="AppCtrl" layout="column" ng-cloak>
-  <md-content class="md-padding">
+  <md-content>
     <md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect md-swipe-content>
       <md-tab ng-repeat="tab in tabs"
               ng-disabled="tab.disabled"

src/components/tabs/demoDynamicTabs/readme.html

@@ -1 +1 @@
-<p>The Dynamic Tabs demo shows how internal tab views can be easily used.</p>
+<p>The Dynamic Tabs demo shows how internal tab views can be used.</p>

src/components/tabs/demoStaticTabs/index.html

@@ -1,6 +1,6 @@
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content class="md-padding">
-    <md-tabs class="md-primary" md-selected="data.selectedIndex"
+    <md-tabs class="md-primary md-no-ink-bar-color" md-selected="data.selectedIndex"
              md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
       <md-tab id="tab1" md-tab-class="example-selector-tab1">
         <md-tab-label>Item One</md-tab-label>

src/components/tabs/demoStaticTabs/readme.html

@@ -1 +1,4 @@
-<p>The Static Tabs demo shows how to disable and bottom-align tabs:</p>
+<p>
+  The Static Tabs demo shows how to disable and bottom-align tabs. Additionally, it demonstrates
+  the <code>md-no-ink-bar-color</code> class.
+</p>

src/components/tabs/js/tabsDirective.js

@@ -31,21 +31,36 @@
  * **Tabs-only** support is useful when tab buttons are used for custom navigation regardless of any
  * other components, content, or views.
  *
- * <i><b>Note:</b> If you are using the Tabs component for page-level navigation, please use
- * the <a ng-href="./api/directive/mdNavBar">NavBar component</a> instead. It handles this
- * case a more natively and more performantly.</i>
+ * <blockquote><b>Note:</b> If you are using the Tabs component for page-level navigation, please
+ * use the <a ng-href="./api/directive/mdNavBar">NavBar component</a> instead. It handles this
+ * case a more natively and more performantly.</blockquote>
  *
  * **Tabs with internal views** are the traditional usage where each tab has associated view
  * content and the view switching is managed internally by the Tabs component.
  *
  * **Tabs with external view content** is often useful when content associated with each tab is
  * independently managed and data-binding notifications announce tab selection changes.
  *
- * Additional features also include:
+ * Additional features include:
  *
  * *  Content can include any markup.
  * *  If a tab is disabled while active/selected, then the next tab will be auto-selected.
  *
+ * ### Theming
+ *
+ * By default, tabs use your app's accent color for the selected tab's text and ink bar.
+ *
+ * You can use the theming classes to change the color of the `md-tabs` background:
+ * * Applying `class="md-primary"` will use your app's primary color for the background, your
+ *   accent color for the ink bar, and your primary palette's contrast color for the text of the
+ *   selected tab.
+ *   * When using the `md-primary` class, you can add the `md-no-ink-bar-color` class to make the
+ *     ink bar use your theme's primary contrast color instead of the accent color.
+ * * Applying `class="md-accent"` will use your app's accent color for the background and your
+ *   accent palette's contrast color for the text and ink bar of the selected tab.
+ * * Applying `class="md-warn"` will use your app's warn color for the background and your
+ *   warn palette's contrast color for the text and ink bar of the selected tab.
+ *
  * ### Explanation of tab stretching
  *
  * Initially, tabs will have an inherent size.  This size will either be defined by how much space
@@ -96,16 +111,16 @@
  *
  * @usage
  * <hljs lang="html">
- * <md-tabs md-selected="selectedIndex" >
- *   <img ng-src="img/angular.png" class="centered">
+ * <md-tabs md-selected="selectedIndex">
+ *   <img ng-src="img/angular.png" class="centered" alt="Angular icon">
  *   <md-tab
  *       ng-repeat="tab in tabs | orderBy:predicate:reversed"
  *       md-on-select="onTabSelected(tab)"
  *       md-on-deselect="announceDeselected(tab)"
  *       ng-disabled="tab.disabled">
  *     <md-tab-label>
  *       {{tab.title}}
- *       <img src="img/removeTab.png" ng-click="removeTab(tab)" class="delete">
+ *       <img src="img/removeTab.png" ng-click="removeTab(tab)" class="delete" alt="Remove tab">
  *     </md-tab-label>
  *     <md-tab-body>
  *       {{tab.content}}

src/components/tabs/tabs-theme.scss

@@ -1,11 +1,16 @@
 @mixin md-tab-primary {
   > md-tabs-wrapper {
     background-color: '{{primary-color}}';
+
+    md-prev-button md-icon,
+    md-next-button md-icon {
+      color: '{{primary-contrast}}';
+    }
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
           &, md-icon {
-            color: '{{primary-100}}';
+            color: '{{primary-contrast-0.7}}';
           }
           &.md-active, &.md-focused {
             &, md-icon {
@@ -16,66 +21,90 @@
             background: '{{primary-contrast-0.1}}';
           }
         }
+        > md-ink-bar {
+          color: '{{accent-color}}';
+          background: '{{accent-color}}';
+        }
       }
     }
   }
+  &.md-no-ink-bar-color {
+    &>md-tabs-wrapper>md-tabs-canvas>md-pagination-wrapper>md-ink-bar {
+      color: '{{primary-contrast}}';
+      background: '{{primary-contrast}}';
+    }
+  }
 }
 @mixin md-tab-warn {
   > md-tabs-wrapper {
-    background-color: '{{warn-color}}';
+    background-color: '{{warn-500}}';
+
+    md-prev-button md-icon,
+    md-next-button md-icon {
+      color: '{{warn-500-contrast}}';
+    }
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
           &, md-icon {
-            color: '{{warn-100}}';
+            color: '{{warn-500-contrast-0.7}}';
           }
           &.md-active, &.md-focused {
             &, md-icon {
-              color: '{{warn-contrast}}';
+              color: '{{warn-500-contrast-1}}';
             }
           }
           &.md-focused {
-            background: '{{warn-contrast-0.1}}';
+            background: '{{warn-500-contrast-0.1}}';
           }
         }
+        > md-ink-bar {
+          color: '{{warn-500-contrast}}';
+          background: '{{warn-500-contrast}}';
+        }
       }
     }
   }
 }
 @mixin md-tab-accent {
   > md-tabs-wrapper {
-    background-color: '{{accent-color}}';
+    background-color: '{{accent-500}}';
+
+    md-prev-button md-icon,
+    md-next-button md-icon {
+      color: '{{accent-500-contrast-0.7}}';
+    }
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
           &, md-icon {
-            color: '{{accent-A100}}';
+            color: '{{accent-500-contrast-0.7}}';
           }
           &.md-active, &.md-focused {
             &, md-icon {
-              color: '{{accent-contrast}}';
+              color: '{{accent-500-contrast-1}}';
             }
           }
           &.md-focused {
-            background: '{{accent-contrast-0.1}}';
+            background: '{{accent-500-contrast-0.1}}';
           }
         }
         > md-ink-bar {
-          color: '{{primary-600-1}}';
-          background: '{{primary-600-1}}';
+          color: '{{accent-500-contrast}}';
+          background: '{{accent-500-contrast}}';
         }
       }
     }
   }
-
 }
 md-tabs.md-THEME_NAME-theme {
   md-tabs-wrapper {
     background-color: transparent;
     border-color: '{{foreground-4}}';
   }
-  .md-paginator md-icon {
-    color: '{{primary-color}}';
+  md-prev-button md-icon,
+  md-next-button md-icon {
+    color: '{{foreground-2}}';
   }
 
   md-ink-bar {
@@ -92,7 +121,7 @@ md-tabs.md-THEME_NAME-theme {
     }
     &.md-active, &.md-focused {
       &, md-icon {
-        color: '{{primary-color}}';
+        color: '{{accent-color}}';
       }
     }
     &.md-focused {