build(aio): upgrade to CLI beta.32 and MD beta.2

aio/src/app/app.component.html

@@ -2,7 +2,7 @@
     <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="toggleSideNav()"><md-icon>menu</md-icon></button>
     <aio-menu></aio-menu>
     <md-input-container >
-      <input #search md-input placeholder="Search">
+      <input #search mdInput placeholder="Search">
     </md-input-container>
     <span class="fill-remaining-space"></span>
 </md-toolbar>

aio/src/app/app.module.ts

@@ -26,11 +26,11 @@ import { MenuComponent } from './sidenav/menu.component';
   imports: [
     BrowserModule,
     HttpModule,
-    MdButtonModule.forRoot(),
-    MdIconModule.forRoot(),
-    MdInputModule.forRoot(),
-    MdToolbarModule.forRoot(),
-    MdSidenavModule.forRoot()
+    MdButtonModule,
+    MdIconModule,
+    MdInputModule,
+    MdToolbarModule,
+    MdSidenavModule
   ],
   declarations: [
     AppComponent,

aio/src/content/features.html

@@ -59,6 +59,6 @@
     </div>
   </div>
   <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
-                          class="button button-large button-shield md-raised md-primary">Get
+                          class="button button-large button-shield mat-raised mat-primary">Get
     Started</a></div>
-</article>
+</article>

aio/src/content/home.html

@@ -3,12 +3,12 @@
       src="assets/images/logos/angular2/angular.svg" class="hero-logo"/>
     <h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1><a
         href="/docs/ts/latest/quickstart.html" md-button="md-button"
-        class="hero-cta md-raised button button-large button-plain">Get Started</a></div>
+        class="hero-cta mat-raised button button-large button-plain">Get Started</a></div>
   <announcement-bar class="announcement-bar">
     <div class="announcement-bar-slide cleafix is-visible"><img
         src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
       <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
-          href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button">Register
+          href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button mat-button">Register
         now</a></div>
   </announcement-bar>
 </header>
@@ -66,7 +66,7 @@
       </div>
     </div>
     <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
-                            class="button button-large button-shield md-raised md-primary">Get
+                            class="button button-large button-shield mat-raised mat-primary">Get
       Started</a></div>
   </div>
 </article>

aio/src/styles/_typography-theme.scss

@@ -10,16 +10,16 @@
   .docs-component-viewer-tabbed-content,
   .docs-guide-content {
        h1 {
-        color: md-color($primary, 800);
-        background: rgba(md-color($foreground, secondary-text), .03);
+        color: mat-color($primary, 800);
+        background: rgba(mat-color($foreground, secondary-text), .03);
       }
 
       h3, h2, h4, h5, p, ol, li{
-        color: md-color($foreground, secondary-text);
+        color: mat-color($foreground, secondary-text);
       }
 
       a {
-        color: md-color($primary);
+        color: mat-color($primary);
       }
 
       table {
@@ -27,17 +27,17 @@
       }
 
       table tbody th{
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
+        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
       }
 
       td {
-        color: md-color($foreground, secondary-text);
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
+        color: mat-color($foreground, secondary-text);
+        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
       }
 
       th {
-        color: md-color($foreground, secondary-text);
-        background: rgba(md-color($foreground, secondary-text), .03);
+        color: mat-color($foreground, secondary-text);
+        background: rgba(mat-color($foreground, secondary-text), .03);
       }
   }
 }

aio/src/styles/_typography.scss

@@ -23,7 +23,7 @@
       font-size: 16px;
     }
 
-    .md-tab-body-wrapper h2 {
+    .mat-tab-body-wrapper h2 {
       margin-top: 0px;
     }
 

aio/src/styles/main.scss

@@ -4,15 +4,15 @@
 
 
 // Include material core styles.
-@include md-core();
+@include mat-core();
 @include docs-site-typography();
 
 
 // Define the light theme.
-$primary: md-palette($md-cyan);
-$accent:  md-palette($md-amber, A200, A100, A400);
+$primary: mat-palette($mat-cyan);
+$accent:  mat-palette($mat-amber, A200, A100, A400);
 
-$theme: md-light-theme($primary, $accent);
+$theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);
 
 body {
@@ -20,7 +20,7 @@ body {
   margin: 0;
 }
 
-[md-button], [md-raised-button] {
+[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
   text-transform: uppercase;
 }
 

aio/src/styles/ng-io-theme.scss

@@ -3,20 +3,20 @@
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-@include md-core();
+@include mat-core();
 
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$ng-io-primary: md-palette($md-indigo);
-$ng-io-accent:  md-palette($md-pink, A200, A100, A400);
+$ng-io-primary: mat-palette($mat-indigo);
+$ng-io-accent:  mat-palette($mat-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$ng-io-warn:    md-palette($md-red);
+$ng-io-warn:    mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$ng-io-theme: md-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
+$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component