From e0726e15bf0fd1696e9bcb53f8d75d25ca815689 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Thu, 15 Sep 2016 14:51:21 -0700
Subject: [PATCH] feat(theming): add initial version for user-facing theming
 (#1239)

---
 src/demo-app/index.html                       |   2 +-
 src/e2e-app/index.html                        |   2 +-
 src/lib/all/_all-theme.scss                   |  44 ++
 .../button-toggle/_button-toggle-theme.scss   |  14 +
 src/lib/button-toggle/button-toggle.html      |   2 +-
 src/lib/button-toggle/button-toggle.scss      |  18 +-
 src/lib/button/_button-base.scss              |  37 +-
 src/lib/button/_button-theme.scss             |  90 ++-
 src/lib/button/button.scss                    |   2 -
 src/lib/card/_card-theme.scss                 |  17 +
 src/lib/card/card.scss                        |  16 +-
 src/lib/checkbox/_checkbox-theme.scss         |  69 ++
 src/lib/checkbox/checkbox.html                |   2 +-
 src/lib/checkbox/checkbox.scss                | 140 +---
 src/lib/core/_core.scss                       |  27 +
 src/lib/core/a11y/_a11y.scss                  |  13 +
 src/lib/core/a11y/live-announcer.scss         |   5 -
 src/lib/core/a11y/live-announcer.spec.ts      |   2 +-
 src/lib/core/a11y/live-announcer.ts           |   2 +-
 src/lib/core/overlay/overlay.scss             | 106 +--
 src/lib/core/ripple/_ripple.scss              | 106 +++
 src/lib/core/style/_button-common.scss        |   7 +
 src/lib/core/style/_button-mixins.scss        |  11 -
 src/lib/core/style/_default-theme.scss        |  13 -
 src/lib/core/style/_elevation.scss            |  85 +--
 .../{_list-shared.scss => _list-common.scss}  |  39 +-
 src/lib/core/style/_mixins.scss               |  76 --
 src/lib/core/style/_ripple.scss               |  62 --
 ...denav-mixins.scss => _sidenav-common.scss} |   4 +-
 src/lib/core/style/_theme-functions.scss      |  62 --
 src/lib/core/style/_variables.scss            |   2 +-
 src/lib/core/style/core.scss                  |  14 -
 src/lib/core/{style => theming}/_palette.scss | 664 +++++++++---------
 src/lib/core/theming/_theming.scss            |  84 +++
 .../theming/prebuilt/deeppurple-amber.scss    |  17 +
 .../core/theming/prebuilt/indigo-pink.scss    |  30 +
 .../core/theming/prebuilt/purple-green.scss   |  17 +
 src/lib/core/typography/_typography.scss      |   6 +
 src/lib/dialog/_dialog-theme.scss             |  11 +
 src/lib/dialog/dialog-container.scss          |  12 +-
 src/lib/dialog/dialog-container.ts            |   5 +-
 src/lib/grid-list/_grid-list-theme.scss       |   6 +
 src/lib/grid-list/grid-list.scss              |  11 +-
 src/lib/icon/_icon-theme.scss                 |   6 +
 src/lib/icon/icon.scss                        |  10 +-
 src/lib/input/_input-theme.scss               |  64 ++
 src/lib/input/input.scss                      | 310 ++++----
 src/lib/input/input.ts                        |   4 +-
 src/lib/list/_list-theme.scss                 |  28 +
 src/lib/list/list.scss                        |  28 +-
 src/lib/menu/_menu-theme.scss                 |  25 +
 src/lib/menu/menu.scss                        |  21 +-
 src/lib/progress-bar/_progress-bar-theme.scss |  78 ++
 src/lib/progress-bar/progress-bar.scss        | 132 +---
 .../_progress-circle-theme.scss               |  23 +
 src/lib/progress-circle/progress-circle.scss  |  33 +-
 src/lib/radio/_radio-theme.scss               |  36 +
 src/lib/radio/radio.html                      |   2 +-
 src/lib/radio/radio.scss                      |  26 +-
 src/lib/sidenav/_sidenav-theme.scss           |  30 +
 src/lib/sidenav/sidenav-transitions.scss      |   6 +-
 src/lib/sidenav/sidenav.scss                  |  48 +-
 src/lib/slide-toggle/_slide-toggle-theme.scss |  77 ++
 src/lib/slide-toggle/slide-toggle.html        |   2 +-
 src/lib/slide-toggle/slide-toggle.scss        |  67 +-
 src/lib/slider/_slider-theme.scss             |  33 +
 src/lib/slider/slider.scss                    |  38 +-
 src/lib/tabs/_tabs-theme.scss                 |  23 +
 src/lib/tabs/tab-group.scss                   |  17 +-
 src/lib/toolbar/_toolbar-theme.scss           |  33 +
 src/lib/toolbar/toolbar.scss                  |  25 +-
 src/lib/tooltip/_tooltip-theme.scss           |   9 +
 src/lib/tooltip/tooltip.scss                  |   7 +-
 stylelint-config.json                         |   1 -
 74 files changed, 1776 insertions(+), 1420 deletions(-)
 create mode 100644 src/lib/all/_all-theme.scss
 create mode 100644 src/lib/button-toggle/_button-toggle-theme.scss
 create mode 100644 src/lib/card/_card-theme.scss
 create mode 100644 src/lib/checkbox/_checkbox-theme.scss
 create mode 100644 src/lib/core/_core.scss
 create mode 100644 src/lib/core/a11y/_a11y.scss
 delete mode 100644 src/lib/core/a11y/live-announcer.scss
 create mode 100644 src/lib/core/ripple/_ripple.scss
 create mode 100644 src/lib/core/style/_button-common.scss
 delete mode 100644 src/lib/core/style/_button-mixins.scss
 delete mode 100644 src/lib/core/style/_default-theme.scss
 rename src/lib/core/style/{_list-shared.scss => _list-common.scss} (66%)
 delete mode 100644 src/lib/core/style/_mixins.scss
 delete mode 100644 src/lib/core/style/_ripple.scss
 rename src/lib/core/style/{_sidenav-mixins.scss => _sidenav-common.scss} (58%)
 delete mode 100644 src/lib/core/style/_theme-functions.scss
 delete mode 100644 src/lib/core/style/core.scss
 rename src/lib/core/{style => theming}/_palette.scss (93%)
 create mode 100644 src/lib/core/theming/_theming.scss
 create mode 100644 src/lib/core/theming/prebuilt/deeppurple-amber.scss
 create mode 100644 src/lib/core/theming/prebuilt/indigo-pink.scss
 create mode 100644 src/lib/core/theming/prebuilt/purple-green.scss
 create mode 100644 src/lib/core/typography/_typography.scss
 create mode 100644 src/lib/dialog/_dialog-theme.scss
 create mode 100644 src/lib/grid-list/_grid-list-theme.scss
 create mode 100644 src/lib/icon/_icon-theme.scss
 create mode 100644 src/lib/input/_input-theme.scss
 create mode 100644 src/lib/list/_list-theme.scss
 create mode 100644 src/lib/menu/_menu-theme.scss
 create mode 100644 src/lib/progress-bar/_progress-bar-theme.scss
 create mode 100644 src/lib/progress-circle/_progress-circle-theme.scss
 create mode 100644 src/lib/radio/_radio-theme.scss
 create mode 100644 src/lib/sidenav/_sidenav-theme.scss
 create mode 100644 src/lib/slide-toggle/_slide-toggle-theme.scss
 create mode 100644 src/lib/slider/_slider-theme.scss
 create mode 100644 src/lib/tabs/_tabs-theme.scss
 create mode 100644 src/lib/toolbar/_toolbar-theme.scss
 create mode 100644 src/lib/tooltip/_tooltip-theme.scss

diff --git a/src/demo-app/index.html b/src/demo-app/index.html
index 02da2647b9d4..45384eb6713f 100644
--- a/src/demo-app/index.html
+++ b/src/demo-app/index.html
@@ -8,7 +8,7 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular2-material/core/style/core.css" rel="stylesheet">
+  <link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
index 6f9605cacd60..60bf8b923f8d 100644
--- a/src/e2e-app/index.html
+++ b/src/e2e-app/index.html
@@ -8,7 +8,7 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular2-material/core/style/core.css" rel="stylesheet">
+  <link href="@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
diff --git a/src/lib/all/_all-theme.scss b/src/lib/all/_all-theme.scss
new file mode 100644
index 000000000000..368e5851f1cb
--- /dev/null
+++ b/src/lib/all/_all-theme.scss
@@ -0,0 +1,44 @@
+@import '../core/core';
+@import '../button/button-theme';
+@import '../button-toggle/button-toggle-theme';
+@import '../card/card-theme';
+@import '../checkbox/checkbox-theme';
+@import '../dialog/dialog-theme';
+@import '../grid-list/grid-list-theme';
+@import '../icon/icon-theme';
+@import '../input/input-theme';
+@import '../list/list-theme';
+@import '../menu/menu-theme';
+@import '../progress-bar/progress-bar-theme';
+@import '../progress-circle/progress-circle-theme';
+@import '../radio/radio-theme';
+@import '../sidenav/sidenav-theme';
+@import '../slide-toggle/slide-toggle-theme';
+@import '../slider/slider-theme';
+@import '../tabs/tabs-theme';
+@import '../toolbar/toolbar-theme';
+@import '../tooltip/tooltip-theme';
+
+
+@mixin angular-material-theme($theme) {
+  @include md-core-theme($theme);
+  @include md-button-theme($theme);
+  @include md-button-toggle-theme($theme);
+  @include md-card-theme($theme);
+  @include md-checkbox-theme($theme);
+  @include md-dialog-theme($theme);
+  @include md-grid-list-theme($theme);
+  @include md-icon-theme($theme);
+  @include md-input-theme($theme);
+  @include md-list-theme($theme);
+  @include md-menu-theme($theme);
+  @include md-progress-bar-theme($theme);
+  @include md-progress-circle-theme($theme);
+  @include md-radio-theme($theme);
+  @include md-sidenav-theme($theme);
+  @include md-slide-toggle-theme($theme);
+  @include md-slider-theme($theme);
+  @include md-tabs-theme($theme);
+  @include md-toolbar-theme($theme);
+  @include md-tooltip-theme($theme);
+}
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
new file mode 100644
index 000000000000..23ede0f16c3b
--- /dev/null
+++ b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -0,0 +1,14 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-button-toggle-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .md-button-toggle-checked .md-button-toggle-label-content {
+    background-color: md-color($md-grey, 300);
+  }
+  .md-button-toggle-disabled .md-button-toggle-label-content {
+    background-color: md-color($foreground, disabled);
+  }
+}
diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index c08e5370c55d..a4945b9ca8c5 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -1,5 +1,5 @@
 <label [attr.for]="inputId" class="md-button-toggle-label">
-  <input #input class="md-button-toggle-input"
+  <input #input class="md-button-toggle-input md-visually-hidden"
          [type]="_type"
          [id]="inputId"
          [checked]="checked"
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index d85806a96053..89e71974f9dd 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -1,7 +1,5 @@
-@import 'elevation';
-@import 'default-theme';
-@import 'palette';
-@import 'mixins';
+@import '../core/style/elevation';
+
 
 $md-button-toggle-padding: 0 16px !default;
 $md-button-toggle-line-height: 36px !default;
@@ -16,24 +14,14 @@ md-button-toggle-group {
   white-space: nowrap;
 }
 
-
-.md-button-toggle-checked .md-button-toggle-label-content {
-  background-color: md-color($md-grey, 300);
-}
-
 .md-button-toggle-disabled .md-button-toggle-label-content {
-  background-color: md-color($md-foreground, disabled);
-  cursor: not-allowed;
+  cursor: default;
 }
 
 md-button-toggle {
   white-space: nowrap;
 }
 
-.md-button-toggle-input {
-  @include md-visually-hidden;
-}
-
 .md-button-toggle-label-content {
   display: inline-block;
   line-height: $md-button-toggle-line-height;
diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index 3d705629f735..316d0a56727d 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -1,11 +1,25 @@
-
-@import 'variables';
-@import 'elevation';
-@import 'button-mixins';
-
-// TODO(jelbourn): This goes away.
-@import 'default-theme';
-@import 'button-theme';
+@import '../core/style/variables';
+@import '../core/style/elevation';
+@import '../core/style/button-common';
+
+
+// Applies a focus style to an md-button element.
+@mixin md-button-focus {
+  &::after {
+    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
+    // black, 12% opacity shade over the normal color (for both light and dark themes).
+    // We do this by placing an :after pseudo-element with the appropriate shade over the button.
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    content: '';
+    background-color: rgba(black, 0.12);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+}
 
 // Flat and raised button standards
 $md-button-padding: 0 16px !default;
@@ -29,8 +43,6 @@ $md-mini-fab-padding: 8px !default;
 
 // Applies base styles to all button types.
 %md-button-base {
-  @include md-button-theme('color');
-
   box-sizing: border-box;
   position: relative;
 
@@ -71,10 +83,7 @@ $md-mini-fab-padding: 8px !default;
   @extend %md-button-base;
 
   @include md-elevation(2);
-  @include md-button-theme('color', default-contrast);
-  @include md-button-theme('background-color');
 
-  background-color: md-color($md-background, background);
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
 
@@ -97,8 +106,6 @@ $md-mini-fab-padding: 8px !default;
 
   min-width: 0;
   border-radius: $md-fab-border-radius;
-  background-color: md-color($md-accent);
-  color: md-color($md-accent, default-contrast);
   width: $size;
   height: $size;
   padding: 0;
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index b9f29887c6fa..8ae3e6322f54 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -1,49 +1,85 @@
-/** Applies a property to an md-button element for each of the supported palettes. */
-@mixin md-button-theme($property, $color: 'default', $opacity: 1) {
+@import '../core/theming/theming';
+
+
+// Applies a focus style to an md-button element for each of the supported palettes.
+@mixin _md-button-focus-color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  &.md-primary::after {
+    background-color: md-color($primary, 0.12);
+  }
+
+  &.md-accent::after {
+    background-color: md-color($accent, 0.12);
+  }
+
+  &.md-warn::after {
+    background-color: md-color($warn, 0.12);
+  }
+}
+
+// Applies a property to an md-button element for each of the supported palettes.
+@mixin _md-button-theme-color($theme, $property, $color: 'default') {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
   &.md-primary {
-    #{$property}: md-color($md-primary, $color, $opacity);
+    #{$property}: md-color($primary, $color);
   }
   &.md-accent {
-    #{$property}: md-color($md-accent, $color, $opacity);
+    #{$property}: md-color($accent, $color);
   }
   &.md-warn {
-    #{$property}: md-color($md-warn, $color, $opacity);
+    #{$property}: md-color($warn, $color);
   }
 
   &.md-primary, &.md-accent, &.md-warn, &[disabled] {
     &[disabled] {
-      $palette: if($property == 'color', $md-foreground, $md-background);
+      $palette: if($property == 'color', $foreground, $background);
       #{$property}: md-color($palette, disabled-button);
     }
   }
 }
 
-/** Applies a focus style to an md-button element for each of the supported palettes. */
-@mixin md-button-focus {
-  &::after {
-    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-    // black, 12% opacity shade over the normal color (for both light and dark themes).
-    // We do this by placing an :after psuedo-element with the appropriate shade over the button.
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    content: '';
-    background-color: rgba(black, 0.12);
-    border-radius: inherit;
-    pointer-events: none;
+@mixin md-button-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] {
+    &.md-button-focus {
+      @include _md-button-focus-color($theme);
+    }
   }
 
-  &.md-primary::after {
-    background-color: md-color($md-primary, 0.12);
+  [md-button], [md-icon-button] {
+    @include _md-button-theme-color($theme, 'color');
+    background: transparent;
+
+    // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
+    // Use the same visual treatment for hover as for focus.
+    &:hover {
+      @include _md-button-focus-color($theme);
+    }
   }
 
-  &.md-accent::after {
-    background-color: md-color($md-accent, 0.12);
+  [md-raised-button], [md-fab], [md-mini-fab] {
+    @include _md-button-theme-color($theme, 'color', default-contrast);
+    @include _md-button-theme-color($theme, 'background-color');
+    background-color: md-color($background, background);
   }
 
-  &.md-warn::after {
-    background-color: md-color($md-warn, 0.12);
+  [md-fab], [md-mini-fab] {
+    background-color: md-color($accent);
+    color: md-color($accent, default-contrast);
   }
 }
+
+
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 0dec470956ab..5f1a78b4755c 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -33,8 +33,6 @@
 }
 
 [md-icon-button] {
-  @extend %md-button-base;
-
   min-width: 0;
   padding: 0;
 
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
new file mode 100644
index 000000000000..d00e76412edd
--- /dev/null
+++ b/src/lib/card/_card-theme.scss
@@ -0,0 +1,17 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-card-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  md-card {
+    background: md-color($background, card);
+    color: md-color($foreground, base);
+  }
+
+  md-card-subtitle {
+    color: md-color($foreground, secondary-text);
+  }
+}
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 6d8683269b80..1bdfbfab6401 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -1,7 +1,6 @@
+@import '../core/style/variables';
+@import '../core/style/elevation';
 
-@import 'variables';
-@import 'elevation';
-@import 'default-theme';   // TODO: Remove this
 
 $md-card-default-padding: 24px !default;
 $md-card-mobile-padding: 24px 16px !default;
@@ -16,8 +15,6 @@ md-card {
   padding: $md-card-default-padding;
   border-radius: $md-card-border-radius;
   font-family: $md-font-family;
-  background: md-color($md-background, card);
-  color: md-color($md-foreground, base);
 }
 
 md-card:hover {
@@ -43,7 +40,6 @@ md-card-title {
 md-card-subtitle {
   @extend %md-card-section-base;
   font-size: $md-body-font-size-base;
-  color: md-color($md-foreground, secondary-text);
 }
 
 md-card-content {
@@ -85,7 +81,7 @@ md-card-actions {
   }
 }
 
-/* HEADER STYLES */
+// HEADER STYLES
 
 md-card-header {
   display: flex;
@@ -109,7 +105,7 @@ md-card-header md-card-title {
   font-size: $md-body-font-size-base;
 }
 
-/* TITLE-GROUP STYLES */
+// TITLE-GROUP STYLES
 
 // images grouped with title in title-group layout
 %md-card-title-img {
@@ -140,7 +136,7 @@ md-card-title-group {
   height: 152px;
 }
 
-/* MEDIA QUERIES */
+// MEDIA QUERIES
 
 @media ($md-xsmall) {
   md-card {
@@ -167,7 +163,7 @@ md-card-title-group {
 
 }
 
-/* FIRST/LAST CHILD ADJUSTMENTS */
+// FIRST/LAST CHILD ADJUSTMENTS
 
 // top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
 // or they'll incorrectly add to card's top padding
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
new file mode 100644
index 000000000000..ba66c87f06a2
--- /dev/null
+++ b/src/lib/checkbox/_checkbox-theme.scss
@@ -0,0 +1,69 @@
+@import '../core/theming/theming';
+
+
+@mixin md-checkbox-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+
+
+  // The color of the checkbox border.
+  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
+
+  // The color of the checkbox's checkmark / mixedmark.
+  $checkbox-mark-color: md-color($background, background);
+
+  // The color that is used as the checkbox background when it is checked.
+  $checkbox-background-color: md-color($accent, 500);
+
+  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
+  // this does not work well with elements layered on top of one another. To get around this we
+  // blend the colors together based on the base color and the theme background.
+  $white-30pct-opacity-on-dark: #686868;
+  $black-26pct-opacity-on-light: #b0b0b0;
+  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
+
+  .md-checkbox-frame {
+    border-color: $checkbox-border-color;
+  }
+
+  .md-checkbox-checkmark {
+    fill: $checkbox-mark-color;
+  }
+
+  .md-checkbox-checkmark-path {
+    // !important is needed here because a stroke must be set as an attribute on the SVG in order
+    // for line animation to work properly.
+    stroke: $checkbox-mark-color !important;
+  }
+
+  .md-checkbox-mixedmark {
+    background-color: $checkbox-mark-color;
+  }
+
+  .md-checkbox-indeterminate, .md-checkbox-checked {
+    .md-checkbox-background {
+      background-color: $checkbox-background-color;
+    }
+  }
+
+  .md-checkbox-disabled {
+    &.md-checkbox-checked, &.md-checkbox-indeterminate {
+      .md-checkbox-background {
+        background-color: $disabled-color;
+      }
+    }
+
+    &:not(.md-checkbox-checked) {
+      .md-checkbox-frame {
+        border-color: $disabled-color;
+      }
+    }
+  }
+
+  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
+  .md-checkbox-focused .md-ink-ripple {
+    background-color: md-color($accent, 0.26);
+  }
+}
diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index 318176d213ee..7921f192adbb 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,6 +1,6 @@
 <label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
-    <input class="md-checkbox-input" type="checkbox"
+    <input class="md-checkbox-input md-visually-hidden" type="checkbox"
            [id]="inputId"
            [checked]="checked"
            [disabled]="disabled"
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 3c1ab171dbb3..4614ee7ddf59 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -1,32 +1,24 @@
-@import 'default-theme';
-@import 'theme-functions';
-@import 'variables';
-@import 'mixins';
+@import '../core/theming/theming';
+@import '../core/style/variables';
+@import '../core/ripple/ripple';
 
-/** The width/height of the checkbox element. */
+
+// The width/height of the checkbox element.
 $md-checkbox-size: $md-toggle-size !default;
-/** The width of the line used to draw the checkmark / mixedmark. */
+// The width of the line used to draw the checkmark / mixedmark.
 $md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;
-/** The width of the checkbox border shown when the checkbox is unchecked. */
+// The width of the checkbox border shown when the checkbox is unchecked.
 $md-checkbox-border-width: 2px;
-/** The color of the checkbox border. */
-$md-checkbox-border-color: if($md-is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
-/** The color of the checkbox's checkmark / mixedmark. */
-$md-checkbox-mark-color: md-color($md-background, background);
-/** The color that is used as the checkbox background when it is checked. */
-$md-checkbox-background-color: md-color($md-accent, 500);
-/** The base duration used for the majority of transitions for the checkbox. */
+// The base duration used for the majority of transitions for the checkbox.
 $md-checkbox-transition-duration: 90ms;
-/** The amount of spacing between the checkbox and its label. */
+// The amount of spacing between the checkbox and its label.
 $md-checkbox-item-spacing: $md-toggle-padding;
 
 // Manual calculation done on SVG
 $_md-checkbox-mark-path-length: 22.910259;
 $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
 
-/**
- * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
- */
+// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
 @keyframes md-checkbox-fade-in-background {
   0% {
     opacity: 0;
@@ -37,9 +29,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
- */
+// Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
 @keyframes md-checkbox-fade-out-background {
   0%, 50% {
     opacity: 1;
@@ -50,9 +40,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
- */
+// "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
 @keyframes md-checkbox-unchecked-checked-checkmark-path {
   0%, 50% {
     stroke-dashoffset: $_md-checkbox-mark-path-length;
@@ -67,9 +55,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
- */
+// Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
 @keyframes md-checkbox-unchecked-indeterminate-mixedmark {
   0%, 68.2% {
     transform: scaleX(0);
@@ -84,9 +70,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * "Erases" the checkmark when the checkbox goes from checked -> unchecked.
- */
+// "Erases" the checkmark when the checkbox goes from checked -> unchecked.
 @keyframes md-checkbox-checked-unchecked-checkmark-path {
   from {
     animation-timing-function: $md-fast-out-linear-in-timing-function;
@@ -98,10 +82,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
- * animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
- */
+
+// Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
+// animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
 @keyframes md-checkbox-checked-indeterminate-checkmark {
   from {
     animation-timing-function: $md-linear-out-slow-in-timing-function;
@@ -115,11 +98,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
- * checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
- * checkmark.
- */
+// Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
+// checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
+// checkmark.
 @keyframes md-checkbox-indeterminate-checked-checkmark {
   from {
     animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
@@ -133,11 +114,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
- * animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
- * of "morphing" from checkmark -> mixedmark.
- */
+// Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
+// animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
+// of "morphing" from checkmark -> mixedmark.
 @keyframes md-checkbox-checked-indeterminate-mixedmark {
   from {
     animation-timing-function: $md-linear-out-slow-in-timing-function;
@@ -151,11 +130,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
- * animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
- * of "morphing" from mixedmark -> checkmark.
- */
+// Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
+// animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
+// of "morphing" from mixedmark -> checkmark.
 @keyframes md-checkbox-indeterminate-checked-mixedmark {
   from {
     animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
@@ -169,10 +146,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
- * unchecked.
- */
+
+// Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
+// unchecked.
 @keyframes md-checkbox-indeterminate-unchecked-mixedmark {
   0% {
     animation-timing-function: linear;
@@ -186,9 +162,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
-/**
- * Applied to elements that cover the checkbox's entire inner container.
- */
+// Applied to elements that cover the checkbox's entire inner container.
 %md-checkbox-cover-element {
   bottom: 0;
   left: 0;
@@ -197,19 +171,15 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   top: 0;
 }
 
-/**
- * Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
- * the mixedmark.
- */
+// Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
+// the mixedmark.
 %md-checkbox-mark {
   $width-padding-inset: 2 * $md-checkbox-border-width;
   width: calc(100% - #{$width-padding-inset});
 }
 
-/**
- * Applied to elements that appear to make up the outer box of the checkmark, such as the frame
- * that contains the border and the actual background element that contains the marks.
- */
+// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
+// that contains the border and the actual background element that contains the marks.
 %md-checkbox-outer-box {
   @extend %md-checkbox-cover-element;
   border-radius: 2px;
@@ -258,7 +228,7 @@ md-checkbox {
   @extend %md-checkbox-outer-box;
 
   background-color: transparent;
-  border: $md-checkbox-border-width solid $md-checkbox-border-color;
+  border: $md-checkbox-border-width solid;
   transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;
   will-change: border-color;
 }
@@ -279,14 +249,10 @@ md-checkbox {
   @extend %md-checkbox-cover-element;
   @extend %md-checkbox-mark;
 
-  fill: $md-checkbox-mark-color;
   width: 100%;
 }
 
 .md-checkbox-checkmark-path {
-  // !important is needed here because a stroke must be set as an attribute on the SVG in order
-  // for line animation to work properly.
-  stroke: $md-checkbox-mark-color !important;
   stroke: {
     dashoffset: $_md-checkbox-mark-path-length;
     dasharray: $_md-checkbox-mark-path-length;
@@ -297,7 +263,6 @@ md-checkbox {
 .md-checkbox-mixedmark {
   @extend %md-checkbox-mark;
 
-  background-color: $md-checkbox-mark-color;
   height: floor($md-checkbox-mark-stroke-size);
   opacity: 0;
   transform: scaleX(0) rotate(0deg);
@@ -332,17 +297,9 @@ md-checkbox {
   .md-checkbox-mixedmark {
     transform: scaleX(1) rotate(-45deg);
   }
-
-  .md-checkbox-background {
-    background-color: $md-checkbox-background-color;
-  }
 }
 
 .md-checkbox-indeterminate {
-  .md-checkbox-background {
-    background-color: $md-checkbox-background-color;
-  }
-
   .md-checkbox-checkmark {
     opacity: 0;
     transform: rotate(45deg);
@@ -366,28 +323,7 @@ md-checkbox {
 }
 
 .md-checkbox-disabled {
-  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
-  // this does not work well with elements layered on top of one another. To get around this we
-  // blend the colors together based on the base color and the theme background.
-  $white-30pct-opacity-on-dark-theme: #686868;
-  $black-26pct-opacity-on-light-theme: #b0b0b0;
-  $disabled-color: if(
-      $md-is-dark-theme, $white-30pct-opacity-on-dark-theme, $black-26pct-opacity-on-light-theme);
-
   cursor: default;
-
-  &.md-checkbox-checked,
-  &.md-checkbox-indeterminate {
-    .md-checkbox-background {
-      background-color: $disabled-color;
-    }
-  }
-
-  &:not(.md-checkbox-checked) {
-    .md-checkbox-frame {
-      border-color: $disabled-color;
-    }
-  }
 }
 
 .md-checkbox-anim {
@@ -466,10 +402,4 @@ md-checkbox {
   }
 }
 
-// Underlying native input element.
-// Visually hidden but still able to respond to focus.
-.md-checkbox-input {
-  @include md-visually-hidden;
-}
-
 @include md-temporary-ink-ripple(checkbox);
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
new file mode 100644
index 000000000000..085bd883aed8
--- /dev/null
+++ b/src/lib/core/_core.scss
@@ -0,0 +1,27 @@
+// Core styles that can be used to apply material design treatments to any element.
+@import 'a11y/a11y';
+@import 'style/elevation';
+@import 'overlay/overlay';
+@import 'ripple/ripple';
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin md-core() {
+  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+  // `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
+  // elevated.
+  @for $zValue from 0 through 24 {
+    .md-elevation-z#{$zValue} {
+      @include md-elevation($zValue);
+    }
+  }
+
+  @include md-ripple();
+  @include md-a11y();
+  @include md-overlay();
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin md-core-theme($theme) {
+  @include md-ripple-theme($theme);
+}
diff --git a/src/lib/core/a11y/_a11y.scss b/src/lib/core/a11y/_a11y.scss
new file mode 100644
index 000000000000..f40820ec9aa9
--- /dev/null
+++ b/src/lib/core/a11y/_a11y.scss
@@ -0,0 +1,13 @@
+@mixin md-a11y {
+  .md-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    text-transform: none;
+    width: 1px;
+  }
+}
diff --git a/src/lib/core/a11y/live-announcer.scss b/src/lib/core/a11y/live-announcer.scss
deleted file mode 100644
index 6ea7cfb6fa52..000000000000
--- a/src/lib/core/a11y/live-announcer.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'mixins';
-
-.md-live-announcer {
-  @include md-visually-hidden();
-}
diff --git a/src/lib/core/a11y/live-announcer.spec.ts b/src/lib/core/a11y/live-announcer.spec.ts
index 12ff20474370..46b789d2ad25 100644
--- a/src/lib/core/a11y/live-announcer.spec.ts
+++ b/src/lib/core/a11y/live-announcer.spec.ts
@@ -92,7 +92,7 @@ describe('MdLiveAnnouncer', () => {
 
 
 function getLiveElement(): Element {
-  return document.body.querySelector('.md-live-announcer');
+  return document.body.querySelector('[aria-live]');
 }
 
 @Component({template: `<button (click)="announceText('Test')">Announce</button>`})
diff --git a/src/lib/core/a11y/live-announcer.ts b/src/lib/core/a11y/live-announcer.ts
index fae1adb6b9b3..b327378d4bfc 100644
--- a/src/lib/core/a11y/live-announcer.ts
+++ b/src/lib/core/a11y/live-announcer.ts
@@ -43,7 +43,7 @@ export class MdLiveAnnouncer {
   private _createLiveElement(): Element {
     let liveEl = document.createElement('div');
 
-    liveEl.classList.add('md-live-announcer');
+    liveEl.classList.add('md-visually-hidden');
     liveEl.setAttribute('aria-atomic', 'true');
     liveEl.setAttribute('aria-live', 'polite');
 
diff --git a/src/lib/core/overlay/overlay.scss b/src/lib/core/overlay/overlay.scss
index 473b7111539d..62be604429c3 100644
--- a/src/lib/core/overlay/overlay.scss
+++ b/src/lib/core/overlay/overlay.scss
@@ -1,53 +1,55 @@
-@import 'variables';
-@import 'palette';
-
-$md-backdrop-color: md-color($md-grey, 900);
-
-// TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
-
-@import 'variables';
-
-/** The overlay-container is an invisible element which contains all individual overlays. */
-.md-overlay-container {
-  position: absolute;
-
-  // Disable events from being captured on the overlay container.
-  pointer-events: none;
-
-  // The container should be the size of the viewport.
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: $md-z-index-overlay-container;
-}
-
-/** A single overlay pane. */
-.md-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-  box-sizing: border-box;
-  z-index: $md-z-index-overlay;
-}
-
-.md-overlay-backdrop {
-  // TODO(jelbourn): reuse sidenav fullscreen mixin.
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  z-index: $md-z-index-overlay-backdrop;
-  pointer-events: auto;
-
-  // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
-  // themes here. Currently using the values from Angular Material 1.
-  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
-  background: $md-backdrop-color;
-  opacity: 0;
-}
-
-.md-overlay-backdrop.md-overlay-backdrop-showing {
-  opacity: 0.48;
+@import '../style/variables';
+@import '../theming/palette';
+@import '../theming/theming';
+
+
+@mixin md-overlay() {
+  $md-backdrop-color: md-color($md-grey, 900);
+
+  // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
+
+  // The overlay-container is an invisible element which contains all individual overlays.
+  .md-overlay-container {
+    position: absolute;
+
+    // Disable events from being captured on the overlay container.
+    pointer-events: none;
+
+    // The container should be the size of the viewport.
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: $md-z-index-overlay-container;
+  }
+
+  // A single overlay pane.
+  .md-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: $md-z-index-overlay;
+  }
+
+  .md-overlay-backdrop {
+    // TODO(jelbourn): reuse sidenav fullscreen mixin.
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    z-index: $md-z-index-overlay-backdrop;
+    pointer-events: auto;
+
+    // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
+    // themes here. Currently using the values from Angular Material 1.
+    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+    background: $md-backdrop-color;
+    opacity: 0;
+  }
+
+  .md-overlay-backdrop.md-overlay-backdrop-showing {
+    opacity: 0.48;
+  }
 }
diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss
new file mode 100644
index 000000000000..d5f520d222b9
--- /dev/null
+++ b/src/lib/core/ripple/_ripple.scss
@@ -0,0 +1,106 @@
+@import '../theming/theming';
+
+
+$md-ripple-focused-opacity: 0.1;
+$md-ripple-background-fade-duration: 300ms;
+$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
+$md-ripple-foreground-initial-opacity: 0.25;
+$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
+
+
+@mixin md-ripple() {
+  // The host element of an md-ripple directive should always have a position of "absolute" or
+  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  [md-ripple] {
+    overflow: hidden;
+  }
+
+  [md-ripple].md-ripple-unbounded {
+    overflow: visible;
+  }
+
+  .md-ripple-background {
+    background-color: $md-ripple-background-default-color;
+    opacity: 0;
+    transition: opacity $md-ripple-background-fade-duration linear;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .md-ripple-unbounded .md-ripple-background {
+    display: none;
+  }
+
+  .md-ripple-background.md-ripple-active {
+    opacity: 1;
+  }
+
+  .md-ripple-focused .md-ripple-background {
+    opacity: 1;
+  }
+
+  .md-ripple-foreground {
+    background-color: $md-ripple-foreground-default-color;
+    border-radius: 50%;
+    pointer-events: none;
+    opacity: $md-ripple-foreground-initial-opacity;
+    position: absolute;
+    // The transition duration is manually set based on the ripple size.
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .md-ripple-foreground.md-ripple-fade-in {
+    opacity: 1;
+  }
+
+  .md-ripple-foreground.md-ripple-fade-out {
+    opacity: 0;
+  }
+}
+
+@mixin md-ripple-theme($theme) {
+  $accent: map-get($theme, accent);
+
+  .md-ripple-focused .md-ripple-background {
+    background-color: md-color($accent, $md-ripple-focused-opacity);
+  }
+}
+
+
+// A mixin, which generates temporary ink ripple on a given component.
+// To be removed once the real ripple is applied to all elements.
+// When $bindToParent is set to true, it will check for the focused class on the same selector as you included
+// that mixin.
+// It is also possible to specify the color palette of the temporary ripple. By default it uses the
+// accent palette for its background.
+@mixin md-temporary-ink-ripple($component, $bindToParent: false) {
+  // TODO(mtlin): Replace when ink ripple component is implemented.
+  // A placeholder ink ripple, shown when keyboard focused.
+  .md-ink-ripple {
+    border-radius: 50%;
+    opacity: 0;
+    height: 48px;
+    left: 50%;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity ease 280ms, background-color ease 280ms;
+    width: 48px;
+  }
+
+  // Fade in when radio focused.
+  #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {
+    opacity: 1;
+  }
+
+  // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into
+  // this state.
+  #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {
+    background-color: #000;
+  }
+}
diff --git a/src/lib/core/style/_button-common.scss b/src/lib/core/style/_button-common.scss
new file mode 100644
index 000000000000..c4cf2dd968df
--- /dev/null
+++ b/src/lib/core/style/_button-common.scss
@@ -0,0 +1,7 @@
+// Mixin overriding default button styles like the gray background, the border, and the outline.
+@mixin md-button-reset {
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border: none;
+}
diff --git a/src/lib/core/style/_button-mixins.scss b/src/lib/core/style/_button-mixins.scss
deleted file mode 100644
index 9c8b5b1d1794..000000000000
--- a/src/lib/core/style/_button-mixins.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * This mixin overrides default button styles like the gray background,
- * the border, and the outline.
- */
-@mixin md-button-reset {
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  border: none;
-}
diff --git a/src/lib/core/style/_default-theme.scss b/src/lib/core/style/_default-theme.scss
deleted file mode 100644
index 34149400a25b..000000000000
--- a/src/lib/core/style/_default-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'theme-functions';
-@import 'palette';
-
-
-// Person creating a theme writes variables like this:
-$md-is-dark-theme: false;
-
-
-$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
-$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);
-$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);
-$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
-$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);
diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss
index c929bb0f1847..7b37fb6d85e4 100644
--- a/src/lib/core/style/_elevation.scss
+++ b/src/lib/core/style/_elevation.scss
@@ -1,25 +1,24 @@
 @import 'variables';
 
-/**
- * A collection of mixins and CSS classes that can be used to apply elevation to a material
- * element.
- * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
- * Examples:
- *
- *
- * .md-foo {
- *   @include $md-elevation(2);
- *
- *   &:active {
- *     @include $md-elevation(8);
- *   }
- * }
- *
- * <div id="external-card" class="md-elevation-z2"><p>Some content</p></div>
- *
- * For an explanation of the design behind how elevation is implemented, see the design doc at
- * https://goo.gl/Kq0k9Z.
- */
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
+// Examples:
+//
+//
+// .md-foo {
+//   @include $md-elevation(2);
+//
+//   &:active {
+//     @include $md-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="md-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
 
 // Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
 // level is created using a set of 3 shadow values, one for umbra (the shadow representing the
@@ -120,23 +119,20 @@ $_ambient-elevation-map: (
   24: '0px 9px 46px 8px #{$_ambient-color}'
 );
 
-/**
- * The css property used for elevation. In most cases this should not be changed. It is exposed
- * as a variable for abstraction / easy use when needing to reference the property directly, for
- * example in a will-change rule.
- */
+
+// The css property used for elevation. In most cases this should not be changed. It is exposed
+// as a variable for abstraction / easy use when needing to reference the property directly, for
+// example in a will-change rule.
 $md-elevation-property: box-shadow !default;
 
-/** The default duration value for elevation transitions. */
+// The default duration value for elevation transitions.
 $md-elevation-transition-duration: 280ms !default;
 
-/** The default easing value for elevation transitions. */
+// The default easing value for elevation transitions.
 $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;
 
-/**
- * Applies the correct css rules to an element to give it the elevation specified by $zValue.
- * The $zValue must be between 0 and 24.
- */
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
 @mixin md-elevation($zValue) {
   @if type-of($zValue) != number or not unitless($zValue) {
     @error '$zValue must be a unitless number';
@@ -150,27 +146,24 @@ $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;
                              #{map-get($_ambient-elevation-map, $zValue)};
 }
 
-/**
- * Returns a string that can be used as the value for a transition property for elevation.
- * Calling this function directly is useful in situations where a component needs to transition
- * more than one property.
- *
- * .foo {
- *   transition: md-elevation-transition-property-value(), opacity 100ms ease;
- *   will-change: $md-elevation-property, opacity;
- * }
- */
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: md-elevation-transition-property-value(), opacity 100ms ease;
+//   will-change: $md-elevation-property, opacity;
+// }
 @function md-elevation-transition-property-value(
     $duration: $md-elevation-transition-duration,
     $easing: $md-elevation-transition-timing-function) {
   @return #{$md-elevation-property} #{$duration} #{$easing};
 }
 
-/**
- * Applies the correct css rules needed to have an element transition between elevations.
- * This mixin should be applied to elements whose elevation values will change depending on their
- * context (e.g. when active or disabled).
- */
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
 // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
 // be used in the same way by clients.
 @mixin md-elevation-transition(
diff --git a/src/lib/core/style/_list-shared.scss b/src/lib/core/style/_list-common.scss
similarity index 66%
rename from src/lib/core/style/_list-shared.scss
rename to src/lib/core/style/_list-common.scss
index aeb7f441deec..2291dd917861 100644
--- a/src/lib/core/style/_list-shared.scss
+++ b/src/lib/core/style/_list-common.scss
@@ -1,17 +1,13 @@
-/**
- * This mixin will ensure that lines that overflow the container will
- * hide the overflow and truncate neatly with an ellipsis.
- */
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
 @mixin md-truncate-line() {
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
-/**
- * This mixin provides all md-line styles, changing secondary font size
- * based on whether the list is in dense mode.
- */
+// Mixin to provide all md-line styles, changing secondary font size based on whether the list
+// is in dense mode.
 @mixin md-line-base($secondary-font-size) {
   [md-line] {
     @include md-truncate-line();
@@ -25,10 +21,17 @@
   }
 }
 
-/**
- * This mixin provides base styles for the wrapper around md-line
- * elements in a list.
- */
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin md-normalize-text() {
+  & > * {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: inherit;
+  }
+}
+
+// This mixin provides base styles for the wrapper around md-line elements in a list.
 @mixin md-line-wrapper-base() {
   @include md-normalize-text();
 
@@ -44,15 +47,3 @@
     display: none;
   }
 }
-
-/**
- * This mixin normalizes default element styles, e.g. font weight for heading text.
- */
-@mixin md-normalize-text() {
-  & > * {
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-    font-size: inherit;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/core/style/_mixins.scss b/src/lib/core/style/_mixins.scss
deleted file mode 100644
index 8839a765f9c9..000000000000
--- a/src/lib/core/style/_mixins.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-
-/**
- * Mixin that creates a new stacking context.
- * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
-@mixin md-stacking-context() {
-  position: relative;
-
-  // Use a transform to create a new stacking context.
-  transform: translate3d(0, 0, 0);
-}
-
-/**
- * This mixin hides an element visually.
- * That means it's still accessible for screen-readers but not visible in view.
- */
-@mixin md-visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  text-transform: none;
-  width: 1px;
-}
-
-/**
- * Forces an element to grow to fit floated contents; used as as an alternative to
- * `overflow: hidden;` because it doesn't cut off contents.
- */
-@mixin md-clearfix {
-  &::before, &::after {
-    content: '';
-    clear: both;
-    display: table;
-  }
-}
-
-/**
- * A mixin, which generates temporary ink ripple on a given component.
- * When $bindToParent is set to true, it will check for the focused class on the same selector as you included
- * that mixin.
- * It is also possible to specify the color palette of the temporary ripple. By default it uses the
- * accent palette for its background.
- */
-@mixin md-temporary-ink-ripple($component, $bindToParent: false, $palette: $md-accent) {
-  // TODO(mtlin): Replace when ink ripple component is implemented.
-  // A placeholder ink ripple, shown when keyboard focused.
-  .md-ink-ripple {
-    border-radius: 50%;
-    opacity: 0;
-    height: 48px;
-    left: 50%;
-    overflow: hidden;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition: opacity ease 280ms, background-color ease 280ms;
-    width: 48px;
-  }
-
-  // Fade in when radio focused.
-  #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {
-    opacity: 1;
-    background-color: md-color($palette, 0.26);
-  }
-
-  // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into
-  // this state.
-  #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {
-    background-color: #000;
-  }
-}
diff --git a/src/lib/core/style/_ripple.scss b/src/lib/core/style/_ripple.scss
deleted file mode 100644
index 61355366f2e7..000000000000
--- a/src/lib/core/style/_ripple.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import 'default-theme';
-@import 'theme-functions';
-
-$md-ripple-focused-opacity: 0.1;
-$md-ripple-background-fade-duration: 300ms;
-$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
-$md-ripple-foreground-initial-opacity: 0.25;
-$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
-
-/**
- * The host element of an md-ripple directive should always have a position of "absolute" or
- * "relative" so that the ripple divs it creates inside itself are correctly positioned.
- */
-[md-ripple] {
-  overflow: hidden;
-}
-
-[md-ripple].md-ripple-unbounded {
-  overflow: visible;
-}
-
-.md-ripple-background {
-  background-color: $md-ripple-background-default-color;
-  opacity: 0;
-  transition: opacity $md-ripple-background-fade-duration linear;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.md-ripple-unbounded .md-ripple-background {
-  display: none;
-}
-
-.md-ripple-background.md-ripple-active {
-  opacity: 1;
-}
-
-.md-ripple-focused .md-ripple-background {
-  background-color: md-color($md-accent, $md-ripple-focused-opacity);
-  opacity: 1;
-}
-
-.md-ripple-foreground {
-  background-color: $md-ripple-foreground-default-color;
-  border-radius: 50%;
-  pointer-events: none;
-  opacity: $md-ripple-foreground-initial-opacity;
-  position: absolute;
-  // The transition duration is manually set based on the ripple size.
-  transition: 'opacity, transform' 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.md-ripple-foreground.md-ripple-fade-in {
-  opacity: 1;
-}
-
-.md-ripple-foreground.md-ripple-fade-out {
-  opacity: 0;
-}
diff --git a/src/lib/core/style/_sidenav-mixins.scss b/src/lib/core/style/_sidenav-common.scss
similarity index 58%
rename from src/lib/core/style/_sidenav-mixins.scss
rename to src/lib/core/style/_sidenav-common.scss
index 3c72c20580a1..1499cfc6bdde 100644
--- a/src/lib/core/style/_sidenav-mixins.scss
+++ b/src/lib/core/style/_sidenav-common.scss
@@ -1,8 +1,8 @@
-/* This mixin ensures an element spans the whole viewport.*/
+// This mixin ensures an element spans the whole viewport.
 @mixin md-fullscreen {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/src/lib/core/style/_theme-functions.scss b/src/lib/core/style/_theme-functions.scss
deleted file mode 100644
index 30c4002b7391..000000000000
--- a/src/lib/core/style/_theme-functions.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// ** Two main functions for users **
-// md-palette: used for defining your theme in terms of Material hues.
-// md-color: apply colors to components from the palette. Consumes the output of md-palette
-
-// Implement the rem unit with SCSS so we don't have to actually set a font-size on
-// the user's body element.
-@function rem($multiplier) {
-  $font-size: 10px;
-  @return $multiplier * $font-size;
-}
-
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-@function md-contrast($color-map, $hue, $contrast-color-map) {
-  @return map-get(map-get($contrast-color-map, $color-map), $hue);
-}
-
-
-// Creates a map of hues to colors for a theme.
-// $color-map
-// $primary
-// $lighter
-// $darker
-@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {
-  $result: map_merge($color-map, (
-    default: map-get($color-map, $primary),
-    lighter: map-get($color-map, $lighter),
-    darker: map-get($color-map, $darker),
-
-    default-contrast: md-contrast($color-map, $primary, $contrast-color-map),
-    lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),
-    darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)
-  ));
-
-  // For each hue in the palette, add a "-contrast" color to the map.
-  @each $hue, $color in $color-map {
-    $result: map_merge($result, (
-      '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map)
-    ));
-  }
-
-  @return $result;
-}
-
-// Gets a color for a material design component.
-// $color-map: a map of {key: color}.
-// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'
-//     If $hue-key is a number between 0 and 1, it will be treated as $opacity.
-// $opacity: the opacity to apply to the color.
-@function md-color($color-map, $hue-key: default, $opacity: 1) {
-  // If hueKey is a number between zero and one, then it actually contains an
-  // opacity value, so recall this function with the default hue and that given opacity.
-  @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {
-    @return md-color($color-map, default, $hue-key);
-  }
-
-  $color: map-get($color-map, $hue-key);
-  $opacity: if(opacity($color) < 1, opacity($color), $opacity);
-
-  @return rgba($color, $opacity);
-}
-
-
diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss
index 818d33755804..b66d335e7abd 100644
--- a/src/lib/core/style/_variables.scss
+++ b/src/lib/core/style/_variables.scss
@@ -1,4 +1,4 @@
-@import 'theme-functions';
+@import '../typography/typography';
 
 
 // Typography
diff --git a/src/lib/core/style/core.scss b/src/lib/core/style/core.scss
deleted file mode 100644
index 856d9eddf53d..000000000000
--- a/src/lib/core/style/core.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Core styles that can be used to apply material design treatments to any element.
-@import '../a11y/live-announcer';
-@import 'elevation';
-@import '../overlay/overlay';
-@import 'ripple';
-
-// Provides external CSS classes for each elevation value. Each CSS class is formatted as
-// `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-// elevated.
-@for $zValue from 0 through 24 {
-  .md-elevation-z#{$zValue} {
-    @include md-elevation($zValue);
-  }
-}
diff --git a/src/lib/core/style/_palette.scss b/src/lib/core/theming/_palette.scss
similarity index 93%
rename from src/lib/core/style/_palette.scss
rename to src/lib/core/theming/_palette.scss
index e64a111a3bae..2df04a13e02a 100644
--- a/src/lib/core/style/_palette.scss
+++ b/src/lib/core/theming/_palette.scss
@@ -1,5 +1,13 @@
 // Color palettes from the Material Design spec.
 // See https://www.google.com/design/spec/style/color.html
+//
+// Contrast colors are hard-coded because it is too difficult (probably impossible) to
+// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
+// While the contrast colors in the spec are not prescriptive, we use them for convenience.
+
+
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
 
 $md-red: (
   50: #ffebee,
@@ -16,6 +24,22 @@ $md-red: (
   A200: #ff5252,
   A400: #ff1744,
   A700: #d50000,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
 );
 
 $md-pink: (
@@ -33,6 +57,22 @@ $md-pink: (
   A200: #ff4081,
   A400: #f50057,
   A700: #c51162,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
 );
 
 $md-purple: (
@@ -50,6 +90,22 @@ $md-purple: (
   A200: #e040fb,
   A400: #d500f9,
   A700: #aa00ff,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
 );
 
 $md-deep-purple: (
@@ -67,6 +123,22 @@ $md-deep-purple: (
   A200: #7c4dff,
   A400: #651fff,
   A700: #6200ea,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: $white-87-opacity,
+    A700: $white-87-opacity,
+  )
 );
 
 $md-indigo: (
@@ -84,6 +156,22 @@ $md-indigo: (
   A200: #536dfe,
   A400: #3d5afe,
   A700: #304ffe,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: $white-87-opacity,
+  )
 );
 
 $md-blue: (
@@ -101,6 +189,22 @@ $md-blue: (
   A200: #448aff,
   A400: #2979ff,
   A700: #2962ff,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
 );
 
 $md-light-blue: (
@@ -118,6 +222,22 @@ $md-light-blue: (
   A200: #40c4ff,
   A400: #00b0ff,
   A700: #0091ea,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: white,
+  )
 );
 
 $md-cyan: (
@@ -135,6 +255,22 @@ $md-cyan: (
   A200: #18ffff,
   A400: #00e5ff,
   A700: #00b8d4,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-teal: (
@@ -152,6 +288,22 @@ $md-teal: (
   A200: #64ffda,
   A400: #1de9b6,
   A700: #00bfa5,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-green: (
@@ -169,6 +321,22 @@ $md-green: (
   A200: #69f0ae,
   A400: #00e676,
   A700: #00c853,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-light-green: (
@@ -186,6 +354,22 @@ $md-light-green: (
   A200: #b2ff59,
   A400: #76ff03,
   A700: #64dd17,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-lime: (
@@ -203,6 +387,22 @@ $md-lime: (
   A200: #eeff41,
   A400: #c6ff00,
   A700: #aeea00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-yellow: (
@@ -220,6 +420,22 @@ $md-yellow: (
   A200: #ffff00,
   A400: #ffea00,
   A700: #ffd600,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: $black-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-amber: (
@@ -237,6 +453,22 @@ $md-amber: (
   A200: #ffd740,
   A400: #ffc400,
   A700: #ffab00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: $black-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
 );
 
 $md-orange: (
@@ -254,6 +486,22 @@ $md-orange: (
   A200: #ffab40,
   A400: #ff9100,
   A700: #ff6d00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: black,
+  )
 );
 
 $md-deep-orange: (
@@ -271,6 +519,22 @@ $md-deep-orange: (
   A200: #ff6e40,
   A400: #ff3d00,
   A700: #dd2c00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: white,
+  )
 );
 
 $md-brown: (
@@ -288,6 +552,22 @@ $md-brown: (
   A200: #bcaaa4,
   A400: #8d6e63,
   A700: #5d4037,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: $white-87-opacity,
+  )
 );
 
 $md-grey: (
@@ -307,23 +587,57 @@ $md-grey: (
   A200: #eeeeee,
   A400: #bdbdbd,
   A700: #616161,
-);
-
-$md-blue-grey: (
-  50: #eceff1,
-  100: #cfd8dc,
-  200: #b0bec5,
-  300: #90a4ae,
-  400: #78909c,
-  500: #607d8b,
-  600: #546e7a,
-  700: #455a64,
-  800: #37474f,
-  900: #263238,
-  A100: #cfd8dc,
-  A200: #b0bec5,
+  contrast: (
+    0: $black-87-opacity,
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    1000: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $white-87-opacity,
+  )
+);
+
+$md-blue-grey: (
+  50: #eceff1,
+  100: #cfd8dc,
+  200: #b0bec5,
+  300: #90a4ae,
+  400: #78909c,
+  500: #607d8b,
+  600: #546e7a,
+  700: #455a64,
+  800: #37474f,
+  900: #263238,
+  A100: #cfd8dc,
+  A200: #b0bec5,
   A400: #78909c,
   A700: #455a64,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: white,
+    500: white,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: $white-87-opacity,
+  )
 );
 
 
@@ -378,323 +692,3 @@ $md-dark-theme-foreground: (
   icons:           white,
   text:            white
 );
-
-
-
-// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground
-// colors are used may have made this obsolete.
-
-// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to
-// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
-// While the contrast colors in the spec are not perscriptive, we will use them for convenience.
-$black-87-opacity: rgba(black, 0.870588);
-$white-87-opacity: rgba(white, 0.870588);
-
-$md-contrast-palettes: (
-  $md-red: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-pink: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-purple: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-deep-purple: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: $white-87-opacity,
-    A700: $white-87-opacity,
-  ),
-  $md-indigo: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-  $md-blue: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: white,
-    A400: white,
-    A700: white,
-  ),
-  $md-light-blue: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: white,
-  ),
-  $md-cyan: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-teal: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-green: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-light-green: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-lime: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-yellow: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: $black-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-amber: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: $black-87-opacity,
-    900: $black-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $black-87-opacity,
-  ),
-  $md-orange: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $black-87-opacity,
-    700: $black-87-opacity,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: black,
-  ),
-  $md-deep-orange: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: white,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: white,
-  ),
-  $md-brown: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: white,
-    400: white,
-    500: $white-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-  $md-grey: (
-    0: $black-87-opacity,
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: $black-87-opacity,
-    500: $black-87-opacity,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    1000: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: $black-87-opacity,
-    A700: $white-87-opacity,
-  ),
-  $md-blue-grey: (
-    50: $black-87-opacity,
-    100: $black-87-opacity,
-    200: $black-87-opacity,
-    300: $black-87-opacity,
-    400: white,
-    500: white,
-    600: $white-87-opacity,
-    700: $white-87-opacity,
-    800: $white-87-opacity,
-    900: $white-87-opacity,
-    A100: $black-87-opacity,
-    A200: $black-87-opacity,
-    A400: white,
-    A700: $white-87-opacity,
-  ),
-);
diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss
new file mode 100644
index 000000000000..a7a0ca1718c4
--- /dev/null
+++ b/src/lib/core/theming/_theming.scss
@@ -0,0 +1,84 @@
+@import 'palette';
+
+
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+// @param $color-map
+// @param $hue
+@function md-contrast($palette, $hue) {
+  @return map-get(map-get($palette, contrast), $hue);
+}
+
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+// @param $color-map
+// @param $primary
+// @param $lighter
+@function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
+  $result: map_merge($base-palette, (
+    default: map-get($base-palette, $default),
+    lighter: map-get($base-palette, $lighter),
+    darker: map-get($base-palette, $darker),
+
+    default-contrast: md-contrast($base-palette, $default),
+    lighter-contrast: md-contrast($base-palette, $lighter),
+    darker-contrast: md-contrast($base-palette, $darker)
+  ));
+
+  // For each hue in the palette, add a "-contrast" color to the map.
+  @each $hue, $color in $base-palette {
+    $result: map_merge($result, (
+      '#{$hue}-contrast': md-contrast($base-palette, $hue)
+    ));
+  }
+
+  @return $result;
+}
+
+
+// Gets a color from a theme palette (the output of md-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of md-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function md-color($palette, $hue: default, $opacity: 1) {
+  // If hueKey is a number between zero and one, then it actually contains an
+  // opacity value, so recall this function with the default hue and that given opacity.
+  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+    @return md-color($palette, default, $hue);
+  }
+
+  $color: map-get($palette, $hue);
+  $opacity: if(opacity($color) < 1, opacity($color), $opacity);
+
+  @return rgba($color, $opacity);
+}
+
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function md-light-theme($primary, $accent, $warn) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+    is-dark: false,
+    foreground: $md-light-theme-foreground,
+    background: $md-light-theme-background,
+  );
+}
+
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function md-dark-theme($primary, $accent, $warn) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+    is-dark: true,
+    foreground: $md-dark-theme-foreground,
+    background: $md-dark-theme-background,
+  );
+}
diff --git a/src/lib/core/theming/prebuilt/deeppurple-amber.scss b/src/lib/core/theming/prebuilt/deeppurple-amber.scss
new file mode 100644
index 000000000000..dac3949f1c19
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/deeppurple-amber.scss
@@ -0,0 +1,17 @@
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-deep-purple);
+$accent:  md-palette($md-amber, A200, A100, A400);
+$warn:    md-palette($md-red);
+
+$theme: md-light-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss
new file mode 100644
index 000000000000..6ef380548323
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/indigo-pink.scss
@@ -0,0 +1,30 @@
+
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-indigo);
+$accent:  md-palette($md-pink, A200, A100, A400);
+$warn:    md-palette($md-red);
+
+$theme: md-light-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
+
+.my-app-dark-theme {
+  $dark-primary: md-palette($md-blue-grey);
+  $dark-accent:  md-palette($md-amber, A200, A100, A400);
+  $dark-warn:    md-palette($md-deep-orange);
+
+  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+  // Include all theme-styles for the components based on the current theme.
+  @include angular-material-theme($dark-theme);
+}
+
diff --git a/src/lib/core/theming/prebuilt/purple-green.scss b/src/lib/core/theming/prebuilt/purple-green.scss
new file mode 100644
index 000000000000..39d0c764ec07
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/purple-green.scss
@@ -0,0 +1,17 @@
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-purple, 700, 500, 800);
+$accent:  md-palette($md-green, A200, A100, A400);
+$warn:    md-palette($md-red);
+
+$theme: md-dark-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss
new file mode 100644
index 000000000000..e8ff4eb9d248
--- /dev/null
+++ b/src/lib/core/typography/_typography.scss
@@ -0,0 +1,6 @@
+// Implement the rem unit with SCSS so we don't have to actually set a font-size on
+// the user's body element.
+@function rem($multiplier) {
+  $font-size: 10px;
+  @return $multiplier * $font-size;
+}
diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss
new file mode 100644
index 000000000000..77b2a9d37e40
--- /dev/null
+++ b/src/lib/dialog/_dialog-theme.scss
@@ -0,0 +1,11 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-dialog-theme($theme) {
+  $background: map-get($theme, background);
+
+  md-dialog-container {
+    background: md-color($background, dialog);
+  }
+}
diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss
index 16d44466db02..aa5b9909200c 100644
--- a/src/lib/dialog/dialog-container.scss
+++ b/src/lib/dialog/dialog-container.scss
@@ -1,14 +1,12 @@
-@import 'elevation';
-@import 'default-theme';
+@import '../core/style/elevation';
+
 
 $md-dialog-padding: 24px !default;
 
-:host {
+md-dialog-container {
+  @include md-elevation(24);
+
   display: block;
   overflow: hidden;
-
   padding: $md-dialog-padding;
-
-  background: md-color($md-background, dialog);
-  @include md-elevation(24);
 }
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 6fe610c702e2..43ec0f390ba5 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -1,4 +1,4 @@
-import {Component, ComponentRef, ViewChild} from '@angular/core';
+import {Component, ComponentRef, ViewChild, ViewEncapsulation} from '@angular/core';
 import {
   BasePortalHost,
   ComponentPortal,
@@ -20,7 +20,8 @@ import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
   host: {
     'class': 'md-dialog-container',
     '[attr.role]': 'dialogConfig?.role'
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdDialogContainer extends BasePortalHost {
   /** The portal host inside of this container into which the dialog content will be loaded. */
diff --git a/src/lib/grid-list/_grid-list-theme.scss b/src/lib/grid-list/_grid-list-theme.scss
new file mode 100644
index 000000000000..0d55720d590c
--- /dev/null
+++ b/src/lib/grid-list/_grid-list-theme.scss
@@ -0,0 +1,6 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin md-grid-list-theme($theme) { }
diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss
index 37dd9b9432b5..13c69dc8bf93 100644
--- a/src/lib/grid-list/grid-list.scss
+++ b/src/lib/grid-list/grid-list.scss
@@ -1,13 +1,14 @@
-@import 'list-shared';
+@import '../core/style/list-common';
 
-/* height of tile header or footer if it has one line */
+
+// height of tile header or footer if it has one line
 $md-grid-list-one-line-height: 48px;
-/* height of tile header or footer if it has two lines */
+// height of tile header or footer if it has two lines
 $md-grid-list-two-line-height: 68px;
-/* side padding for text in tile headers and footers */
+// side padding for text in tile headers and footers
 $md-grid-list-text-padding: 16px;
 
-/* font styles for text in tile headers and footers */
+// font styles for text in tile headers and footers
 $md-grid-list-font-size: 16px;
 $md-grid-list-secondary-font: 12px;
 
diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss
new file mode 100644
index 000000000000..860538e4a6e4
--- /dev/null
+++ b/src/lib/icon/_icon-theme.scss
@@ -0,0 +1,6 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin md-icon-theme($theme) { }
diff --git a/src/lib/icon/icon.scss b/src/lib/icon/icon.scss
index acfe82459986..5dc3e4fe59c7 100644
--- a/src/lib/icon/icon.scss
+++ b/src/lib/icon/icon.scss
@@ -1,13 +1,9 @@
-@import 'variables';
-@import 'default-theme';
+@import '../core/style/variables';
 
-/** The width/height of the icon element. */
+
+// The width/height of the icon element.
 $md-icon-size: 24px !default;
 
-/**
-This works because we're using ViewEncapsulation.None. If we used the default
-encapsulation, the selector would need to be ":host".
-*/
 md-icon {
   background-repeat: no-repeat;
   display: inline-block;
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
new file mode 100644
index 000000000000..4003d089cc2e
--- /dev/null
+++ b/src/lib/input/_input-theme.scss
@@ -0,0 +1,64 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-input-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  
+  // Placeholder colors. Required is used for the `*` star shown in the placeholder.
+  $input-placeholder-color: md-color($foreground, hint-text);
+  $input-floating-placeholder-color: md-color($primary);
+  $input-required-placeholder-color: md-color($accent);
+  
+  // Underline colors.
+  $input-underline-color: md-color($foreground, hint-text);
+  $input-underline-color-accent: md-color($accent);
+  $input-underline-color-warn: md-color($warn);
+  $input-underline-disabled-color: md-color($foreground, hint-text);
+  $input-underline-focused-color: md-color($primary);
+
+  .md-input-placeholder {
+    color: $input-placeholder-color;
+
+    // :focus is applied to the input, but we apply md-focused to the other elements
+    // that need to listen to it.
+    &.md-focused {
+      color: $input-floating-placeholder-color;
+
+      &.md-accent {
+        color: $input-underline-color-accent;
+      }
+      &.md-warn {
+        color: $input-underline-color-warn;
+      }
+    }
+  }
+
+  // See md-input-placeholder-floating mixin in input.scss
+  md-input input:-webkit-autofill + .md-input-placeholder,
+  .md-input-placeholder.md-float:not(.md-empty), &.md-float.md-focused {
+
+    .md-placeholder-required {
+      color: $input-required-placeholder-color;
+    }
+  }
+
+  .md-input-underline {
+    border-color: $input-underline-color;
+
+    .md-input-ripple {
+      background-color: $input-underline-focused-color;
+
+      &.md-accent {
+        background-color: $input-underline-color-accent;
+      }
+      &.md-warn {
+        background-color: $input-underline-color-warn;
+      }
+    }
+  }
+}
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index ac9c6ed996a4..799cacc73828 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -1,48 +1,21 @@
-@import 'default-theme';
-@import 'mixins';
-@import 'variables';
+@import '../core/style/variables';
 
-$md-input-floating-placeholder-scale-factor: 0.75 !default;
-
-// Placeholder colors. Required is used for the `*` star shown in the placeholder.
-$md-input-placeholder-color: md-color($md-foreground, hint-text);
-$md-input-floating-placeholder-color: md-color($md-primary);
-$md-input-required-placeholder-color: md-color($md-accent);
 
-// Underline colors.
-$md-input-underline-color: md-color($md-foreground, hint-text);
-$md-input-underline-color-accent: md-color($md-accent);
-$md-input-underline-color-warn: md-color($md-warn);
-$md-input-underline-disabled-color: md-color($md-foreground, hint-text);
-$md-input-underline-focused-color: md-color($md-primary);
+$md-input-floating-placeholder-scale-factor: 0.75 !default;
 
 // Gradient for showing the dashed line when the input is disabled.
-$md-input-underline-disabled-background-image: linear-gradient(to right,
-        rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-
-/**
- * Undo the red box-shadow glow added by Firefox on invalid inputs.
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
- */
-:-moz-ui-invalid {
-  box-shadow: none;
-}
+$md-input-underline-disabled-background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
 
-/**
- * Applies a floating placeholder above the input itself.
- */
+// Applies a floating placeholder above the input itself.
 @mixin md-input-placeholder-floating {
   display: block;
   padding-bottom: 5px;
   transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor);
   width: 100% / $md-input-floating-placeholder-scale-factor;
-
-  .md-placeholder-required {
-    color: $md-input-required-placeholder-color;
-  }
 }
 
-:host {
+md-input {
   display: inline-block;
   position: relative;
   font-family: $md-font-family;
@@ -50,102 +23,63 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
   // To avoid problems with text-align.
   text-align: left;
 
-  // Global wrapper. We need to apply margin to the element for spacing, but
-  // cannot apply it to the host element directly.
-  .md-input-wrapper {
-    margin: 16px 0;
-  }
-
-  // We use a table layout to baseline align the prefix and suffix classes.
-  // The underline is outside of it so it can cover all of the elements under
-  // this table.
-  // Flex does not respect the baseline. What we really want is akin to a table
-  // as want an inline-block where elements don't wrap.
-  .md-input-table {
-    display: inline-table;
-    flex-flow: column;
-    vertical-align: bottom;
-    width: 100%;
-
-    & > * {
-      display: table-cell;
-    }
+  [dir='rtl'] & {
+    text-align: right;
   }
+}
 
-  // The Input element proper.
-  .md-input-element {
-    // Font needs to be inherited, because by default <input> has a system font.
-    font: inherit;
-
-    // The Material input should match whatever background it is above.
-    background: transparent;
-
-    // By default, <input> has a padding, border, outline and a default width.
-    border: none;
-    outline: none;
-    padding: 0;
-    width: 100%;
-
-    &.md-end {
-      text-align: right;
-    }
-  }
+// Global wrapper. We need to apply margin to the element for spacing, but
+// cannot apply it to the host element directly.
+.md-input-wrapper {
+  margin: 16px 0;
+}
 
-  .md-input-infix {
-    position: relative;
+// We use a table layout to baseline align the prefix and suffix classes.
+// The underline is outside of it so it can cover all of the elements under
+// this table.
+// Flex does not respect the baseline. What we really want is akin to a table
+// as want an inline-block where elements don't wrap.
+.md-input-table {
+  display: inline-table;
+  flex-flow: column;
+  vertical-align: bottom;
+  width: 100%;
+
+  & > * {
+    display: table-cell;
   }
+}
 
-  // The placeholder label. This is invisible unless it is. The logic to show it is
-  // basically `empty || (float && (!empty || focused))`. Float is dependent on the
-  // `floatingPlaceholder` input.
-  .md-input-placeholder {
-    // The placeholder is after the <input>, but needs to be aligned top-left of the
-    // infix <div>.
-    position: absolute;
-    left: 0;
-    top: 0;
+.md-input-infix {
+  position: relative;
+}
 
-    font-size: 100%;
-    pointer-events: none;  // We shouldn't catch mouse events (let them through).
-    color: $md-input-placeholder-color;
-    z-index: 1;
+// The Input element proper.
+.md-input-element {
+  // Font needs to be inherited, because by default <input> has a system font.
+  font: inherit;
 
-    // Put ellipsis text overflow.
-    width: 100%;
-    display: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
+  // The Material input should match whatever background it is above.
+  background: transparent;
 
-    transform: translateY(0);
-    transform-origin: bottom left;
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-                scale $swift-ease-out-duration $swift-ease-out-timing-function,
-                color $swift-ease-out-duration $swift-ease-out-timing-function,
-                width $swift-ease-out-duration $swift-ease-out-timing-function;
+  // By default, <input> has a padding, border, outline and a default width.
+  border: none;
+  outline: none;
+  padding: 0;
+  width: 100%;
 
-    &.md-empty {
-      display: block;
-      cursor: text;
-    }
+  &.md-end {
+    text-align: right;
 
-    // Show the placeholder above the input when it's not empty, or focused.
-    &.md-float:not(.md-empty), &.md-float.md-focused {
-      @include md-input-placeholder-floating;
+    [dir='rtl'] & {
+      text-align: left;
     }
+  }
 
-    // :focus is applied to the input, but we apply md-focused to the other elements
-    // that need to listen to it.
-    &.md-focused {
-      color: $md-input-floating-placeholder-color;
-
-      &.md-accent {
-        color: $md-input-underline-color-accent;
-      }
-      &.md-warn {
-        color: $md-input-underline-color-warn;
-      }
-    }
+  // Undo the red box-shadow glow added by Firefox on invalid inputs.
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
+  &:-moz-ui-invalid {
+    box-shadow: none;
   }
 
   // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to
@@ -153,81 +87,103 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
   // fire any events when a form auto-fill is occurring.
   // Once the autofill is committed, a change event happen and the regular md-input
   // classes take over to fulfill this behaviour.
-  input:-webkit-autofill + .md-input-placeholder {
+  &:-webkit-autofill + .md-input-placeholder {
     @include md-input-placeholder-floating;
   }
+}
 
-  // The underline is what's shown under the input, its prefix and its suffix.
-  // The ripple is the blue animation coming on top of it.
-  .md-input-underline {
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    margin-top: 4px;
-    border-top: 1px solid $md-input-underline-color;
-
-    &.md-disabled {
-      border-top: 0;
-      background-image: $md-input-underline-disabled-background-image;
-      background-position: 0;
-      background-size: 4px 1px;
-      background-repeat: repeat-x;
-    }
-
-    .md-input-ripple {
-      position: absolute;
-      height: 2px;
-      z-index: 1;
-      background-color: $md-input-underline-focused-color;
-      top: -1px;
-      width: 100%;
-      transform-origin: top;
-      opacity: 0;
-      transform: scaleY(0);
-      transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-                  opacity $swift-ease-out-duration $swift-ease-out-timing-function;
-
-      &.md-accent {
-        background-color: $md-input-underline-color-accent;
-      }
-      &.md-warn {
-        background-color: $md-input-underline-color-warn;
-      }
-
-      &.md-focused {
-        opacity: 1;
-        transform: scaleY(1);
-      }
-    }
+// The placeholder label. This is invisible unless it is. The logic to show it is
+// basically `empty || (float && (!empty || focused))`. Float is dependent on the
+// `floatingPlaceholder` input.
+.md-input-placeholder {
+  // The placeholder is after the <input>, but needs to be aligned top-left of the
+  // infix <div>.
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  font-size: 100%;
+  pointer-events: none;  // We shouldn't catch mouse events (let them through).
+  z-index: 1;
+
+  // Put ellipsis text overflow.
+  width: 100%;
+  display: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+
+  transform: translateY(0);
+  transform-origin: bottom left;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              scale $swift-ease-out-duration $swift-ease-out-timing-function,
+              color $swift-ease-out-duration $swift-ease-out-timing-function,
+              width $swift-ease-out-duration $swift-ease-out-timing-function;
+
+  &.md-empty {
+    display: block;
+    cursor: text;
   }
 
-  // The hint is shown below the underline. There can be more than one; one at the start
-  // and one at the end.
-  .md-hint {
-    position: absolute;
-    font-size: 75%;
-    bottom: -0.5em;
+  // Show the placeholder above the input when it's not empty, or focused.
+  &.md-float:not(.md-empty), &.md-float.md-focused {
+    @include md-input-placeholder-floating;
+  }
 
-    &.md-right {
-      right: 0;
-    }
+  [dir='rtl'] & {
+    transform-origin: bottom right;
   }
 }
 
+// The underline is what's shown under the input, its prefix and its suffix.
+// The ripple is the blue animation coming on top of it.
+.md-input-underline {
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  margin-top: 4px;
+  border-top-width: 1px;
+  border-top-style: solid;
+
+  &.md-disabled {
+    border-top: 0;
+    background-image: $md-input-underline-disabled-background-image;
+    background-position: 0;
+    background-size: 4px 1px;
+    background-repeat: repeat-x;
+  }
 
-// RTL support.
-:host-context([dir='rtl']) {
-  text-align: right;
+  .md-input-ripple {
+    position: absolute;
+    height: 2px;
+    z-index: 1;
+    top: -1px;
+    width: 100%;
+    transform-origin: top;
+    opacity: 0;
+    transform: scaleY(0);
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 
-  .md-input-placeholder {
-    transform-origin: bottom right;
+    &.md-focused {
+      opacity: 1;
+      transform: scaleY(1);
+    }
   }
+}
+
+// The hint is shown below the underline. There can be more than one; one at the start
+// and one at the end.
+.md-hint {
+  position: absolute;
+  font-size: 75%;
+  bottom: -0.5em;
 
-  .md-input-element.md-end {
-    text-align: left;
+  &.md-right {
+    right: 0;
   }
 
-  .md-hint {
+  [dir='rtl'] & {
     right: 0;
     left: auto;
 
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 5ca3e1665ca2..e90a76d64d00 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -16,6 +16,7 @@ import {
   Output,
   NgModule,
   ModuleWithProviders,
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
@@ -100,7 +101,8 @@ export class MdHint {
   templateUrl: 'input.html',
   styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
-  host: {'(click)' : 'focus()'}
+  host: {'(click)' : 'focus()'},
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {
   private _focused: boolean = false;
diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
new file mode 100644
index 000000000000..0aee643510cb
--- /dev/null
+++ b/src/lib/list/_list-theme.scss
@@ -0,0 +1,28 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-list-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  md-list, md-nav-list {
+    md-list-item, a[md-list-item] {
+      color: md-color($foreground, base);
+    }
+
+    [md-subheader] {
+      color: md-color($foreground, secondary-text);
+    }
+  }
+
+  md-divider {
+    border-top-color: md-color($foreground, divider);
+  }
+
+  md-nav-list .md-list-item {
+    &:hover, &.md-list-item-focus {
+      background: md-color($background, 'hover');
+    }
+  }
+}
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 3c001d6f5136..ac7190559c98 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -1,12 +1,12 @@
-@import 'variables';
-@import 'default-theme';
-@import 'list-shared';
+@import '../core/style/variables';
+@import '../core/style/list-common';
+
 
 $md-list-side-padding: 16px;
 $md-list-avatar-size: 40px;
 $md-list-icon-size: 24px;
 
-/*  Normal list variables */
+// Normal list variables
 $md-list-top-padding: 8px;
 $md-list-font-size: 16px;
 $md-list-secondary-font: 14px;
@@ -18,7 +18,7 @@ $md-list-avatar-height: 56px;
 $md-list-two-line-height: 72px;
 $md-list-three-line-height: 88px;
 
-/* Dense list variables */
+// Dense list variables
 $md-dense-top-padding: 4px;
 $md-dense-font-size: 13px;
 $md-dense-base-height: 40px;
@@ -26,10 +26,8 @@ $md-dense-avatar-height: 48px;
 $md-dense-two-line-height: 60px;
 $md-dense-three-line-height: 76px;
 
-/*
-This mixin provides all list-item styles, changing font size and height
-based on whether the list is in dense mode.
-*/
+// This mixin provides all list-item styles, changing font size and height
+// based on whether the list is in dense mode.
 @mixin md-list-item-base($font-size, $base-height, $avatar-height,
   $two-line-height, $three-line-height) {
 
@@ -42,7 +40,6 @@ based on whether the list is in dense mode.
     font-size: $font-size;
     height: $base-height;
     padding: 0 $md-list-side-padding;
-    color: md-color($md-foreground, base);
   }
 
   &.md-list-avatar .md-list-item {
@@ -80,10 +77,8 @@ based on whether the list is in dense mode.
   }
 }
 
-/*
-This mixin provides all subheader styles, adjusting heights and padding
-based on whether the list is in dense mode.
-*/
+// This mixin provides all subheader styles, adjusting heights and padding
+// based on whether the list is in dense mode.
 @mixin md-subheader-base($top-padding, $secondary-size, $base-height) {
   display: block;
   box-sizing: border-box;
@@ -93,7 +88,6 @@ based on whether the list is in dense mode.
 
   font-size: $secondary-size;
   font-weight: 500;
-  color: md-color($md-foreground, secondary-text);
 
   &:first-child {
     margin-top: -$top-padding;
@@ -150,12 +144,11 @@ md-list[dense], md-nav-list[dense] {
 
     @include md-line-base($md-dense-font-size);
   }
-
 }
 
 md-divider {
   display: block;
-  border-top: 1px solid md-color($md-foreground, divider);
+  border-top: 1px solid;
   margin: 0;
 }
 
@@ -170,7 +163,6 @@ md-nav-list {
 
     &:hover, &.md-list-item-focus {
       outline: none;
-      background: md-color($md-background, 'hover');
     }
   }
 }
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
new file mode 100644
index 000000000000..feb32dc56fe0
--- /dev/null
+++ b/src/lib/menu/_menu-theme.scss
@@ -0,0 +1,25 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-menu-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .md-menu {
+    background: md-color($background, 'card');
+  }
+
+  [md-menu-item] {
+    background: transparent;
+    color: md-color($foreground, 'text');
+
+    &[disabled] {
+      color: md-color($foreground, 'disabled');
+    }
+
+    &:hover:not([disabled]), &:focus:not([disabled]) {
+      background: md-color($background, 'hover');
+    }
+  }
+}
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index c5c35b8221e5..a1eaca0fdaa1 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -1,11 +1,11 @@
 // TODO(kara): update vars for desktop when MD team responds
 // TODO(kara): animation for menu opening
-@import 'variables';
-@import 'elevation';
-@import 'default-theme';
-@import 'button-mixins';
-@import 'sidenav-mixins';
-@import 'list-shared';
+@import '../core/style/variables';
+@import '../core/style/elevation';
+@import '../core/style/button-common';
+@import '../core/style/sidenav-common';
+@import '../core/style/list-common';
+
 
 // menu width must be a multiple of 56px
 $md-menu-overlay-min-width: 112px !default;   // 56 * 2
@@ -26,7 +26,6 @@ $md-menu-vertical-padding: 8px !default;
   overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
-  background: md-color($md-background, 'card');
   padding-top: $md-menu-vertical-padding;
   padding-bottom: $md-menu-vertical-padding;
 }
@@ -45,16 +44,10 @@ $md-menu-vertical-padding: 8px !default;
   font-family: $md-font-family;
   text-align: start;
   text-decoration: none;   // necessary to reset anchor tags
-  color: md-color($md-foreground, 'text');
 
   &[disabled] {
-    color: md-color($md-foreground, 'disabled');
     cursor: default;
   }
-
-  &:hover:not([disabled]), &:focus:not([disabled]) {
-    background: md-color($md-background, 'hover');
-  }
 }
 
 button[md-menu-item] {
@@ -63,4 +56,4 @@ button[md-menu-item] {
 
 .md-menu-click-catcher {
   @include md-fullscreen();
-}
\ No newline at end of file
+}
diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
new file mode 100644
index 000000000000..5e6e01c74e70
--- /dev/null
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -0,0 +1,78 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-progress-bar-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  // TODO(josephperrott): Find better way to inline svgs.
+  // In buffer mode a repeated SVG object is used as a background.
+  //  Each of the following defines the SVG object for each of the class defined colors.
+  //
+  //  Each string is a URL encoded version of:
+  //
+  //  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  //       version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
+  //       xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
+  //    <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
+  //  </svg>
+  //
+  $buffer-bubbles-primary-url: url(
+    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+    '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+    'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+    '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+    md-color($primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+  $buffer-bubbles-accent-url: url(
+    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+    '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+    'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+    '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+    md-color($accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+  $buffer-bubbles-warn-url: url(
+    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+    '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+    'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+    '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+    md-color($warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+
+  .md-progress-bar-background {
+    background: $buffer-bubbles-primary-url;
+  }
+  
+  .md-progress-bar-buffer {
+    background-color: md-color($primary, 100);
+  }
+  
+  md-progress-bar[color='accent'] {
+    .md-progress-bar-background {
+      background: $buffer-bubbles-accent-url;
+    }
+    
+    .md-progress-bar-buffer {
+      background-color: md-color($accent, 100);
+    }
+    .md-progress-bar-fill::after {
+      background-color: md-color($accent, 600);
+    }
+  }
+  
+  md-progress-bar[color='warn'] {
+    .md-progress-bar-background {
+      background: $buffer-bubbles-warn-url;
+    }
+    
+    .md-progress-bar-buffer {
+      background-color: md-color($warn, 100);
+    }
+    .md-progress-bar-fill::after {
+      background-color: md-color($warn, 600);
+    }
+  }
+
+  .md-progress-bar-fill::after {
+    background-color: md-color($primary, 600);
+  }
+}
diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index bfc052fa2745..81bdaa48ff57 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/src/lib/progress-bar/progress-bar.scss
@@ -1,41 +1,10 @@
-@import 'variables';
-@import 'default-theme';
+@import '../core/style/variables';
+
 
 $md-progress-bar-height: 5px !default;
 $md-progress-bar-full-animation-duration: 2000ms !default;
 $md-progress-bar-piece-animation-duration: 250ms !default;
 
-// TODO(josephperrott): Find better way to inline svgs.
-/** In buffer mode a repeated SVG object is used as a background.  Each of the following defines the SVG object for each
-    of the class defined colors.
-
-    Each string is a URL encoded version of:
-
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-         version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
-         xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
-      <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
-    </svg>
-
-    */
-$md-buffer-bubbles-primary-url: url(
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
-  '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
-  'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
-  '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
-  md-color($md-primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
-$md-buffer-bubbles-accent-url: url(
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
-  '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
-  'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
-  '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
-  md-color($md-accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
-$md-buffer-bubbles-warn-url: url(
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
-  '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
-  'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
-  '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
-  md-color($md-warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
 
 :host {
   display: block;
@@ -48,9 +17,9 @@ $md-buffer-bubbles-warn-url: url(
   transition: opacity $md-progress-bar-piece-animation-duration linear;
   width: 100%;
 
-  // The progress bar background is used to show the bubble animation scrolling behind a buffering progress bar.
+  // The progress bar background is used to show the bubble animation scrolling behind a
+  // buffering progress bar.
   .md-progress-bar-background {
-    background: $md-buffer-bubbles-primary-url;
     background-repeat: repeat-x;
     background-size: 10px 4px;
     height: 100%;
@@ -59,12 +28,9 @@ $md-buffer-bubbles-warn-url: url(
     width: 100%;
   }
 
-  /**
-   * The progress bar buffer is the bar indicator showing the buffer value and is only visible beyond the current value
-   * of the primary progress bar.
-   */
+  // The progress bar buffer is the bar indicator showing the buffer value and is only visible
+  // beyond the current value of the primary progress bar.
   .md-progress-bar-buffer {
-    background-color: md-color($md-primary, 100);
     height: 100%;
     position: absolute;
     transform-origin: top left;
@@ -72,16 +38,13 @@ $md-buffer-bubbles-warn-url: url(
     width: 100%;
   }
 
-  /**
-   * The secondary progress bar is only used in the indeterminate animation, because of this it is hidden in other uses.
-   */
+   // The secondary progress bar is only used in the indeterminate animation, because of this it
+   // is hidden in other uses.
   .md-progress-bar-secondary {
     visibility: hidden;
   }
 
-  /**
-  * The progress bar fill fills the progress bar with the indicator color.
-  */
+  // The progress bar fill fills the progress bar with the indicator color.
   .md-progress-bar-fill {
     animation: none;
     height: 100%;
@@ -91,12 +54,9 @@ $md-buffer-bubbles-warn-url: url(
     width: 100%;
   }
 
-  /**
-  * A pseudo element is created for each progress bar bar that fills with the indicator color.
-  */
+  // A pseudo element is created for each progress bar bar that fills with the indicator color.
   .md-progress-bar-fill::after {
     animation: none;
-    background-color: md-color($md-primary, 600);
     content: '';
     display: inline-block;
     height: 100%;
@@ -104,34 +64,6 @@ $md-buffer-bubbles-warn-url: url(
     width: 100%;
   }
 
-  &[color='accent'] {
-    .md-progress-bar-background {
-      background: $md-buffer-bubbles-accent-url;
-      background-repeat: repeat-x;
-      background-size: 10px 4px;
-    }
-    .md-progress-bar-buffer {
-      background-color: md-color($md-accent, 100);
-    }
-    .md-progress-bar-fill::after {
-      background-color: md-color($md-accent, 600);
-    }
-  }
-
-  &[color='warn'] {
-    .md-progress-bar-background {
-      background: $md-buffer-bubbles-warn-url;
-      background-repeat: repeat-x;
-      background-size: 10px 4px;
-    }
-    .md-progress-bar-buffer {
-      background-color: md-color($md-warn, 100);
-    }
-    .md-progress-bar-fill::after {
-      background-color: md-color($md-warn, 600);
-    }
-  }
-
   &[mode='query'] {
     transform: rotateZ(180deg);
   }
@@ -172,27 +104,25 @@ $md-buffer-bubbles-warn-url: url(
   transform: rotateY(180deg);
 }
 
+// The values used for animations in md-progress-bar, both timing and transformation, can be
+// considered magic values. They are sourced from the Material Design example spec and duplicate
+// the values of the original designers definitions.
+//
+// The indeterminate state is essentially made up of two progress bars, one primary (the one that
+// is shown in both the determinate and indeterminate states) and one secondary, which essentially
+// mirrors the primary progress bar in appearance but is only shown to assist with the
+// indeterminate animations.
+
+// KEYFRAME BLOCK	                   DESCRIPTION
+// primary-indeterminate-translate     Translation of the primary progressbar across the screen
+// primary-indeterminate-scale         Scaling of the primary bar as it's being translated across the screen
+// secondary-indeterminate-translate   Translation of the secondary bar across the screen
+// secondary-indeterminate-scale       Scaling of the secondary bar as it's being translated across the screen
+//
+// Because two different transform animations need to be applied at once, the translation is
+// applied to the outer element and the scaling is applied to the inner element, which provides the
+// illusion necessary to make the animation work.
 
-/** The values used for animations in md-progress-bar, both timing and transformation, can be considered magic values.
-    They are sourced from the Material Design example spec and duplicate the values of the original designers
-    definitions.
-
-
-    The indeterminate state is essentially made up of two progress bars, one primary (the one that is shown in both the
-    determinate and indeterminate states) and one secondary, which essentially mirrors the primary progress bar in
-    appearance but is only shown to assist with the indeterminate animations.
-
-
-    KEYFRAME BLOCK	                    DESCRIPTION
-    primary-indeterminate-translate     Translation of the primary progressbar across the screen
-    primary-indeterminate-scale         Scaling of the primary progressbar as it's being translated across the screen
-    secondary-indeterminate-translate   Translation of the secondary progressbar across the screen
-    secondary-indeterminate-scale       Scaling of the secondary progressbar as it's being translated across the screen
-
-    Because two different transform animations need to be applied at once, the translation is applied to the outer
-    element and the scaling is applied to the inner element, which provides the illusion necessary to make the animation
-    work.
-*/
 
 // Progress Bar Timing functions:
 // $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
@@ -215,7 +145,9 @@ $md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.2
 $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
 // $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function
 
-/** Animations for indeterminate and query mode. */
+
+// Animations for indeterminate and query mode.
+
 // Primary indicator.
 @keyframes md-progress-bar-primary-indeterminate-translate {
   0% {
@@ -289,7 +221,7 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.62703
   }
 }
 
-/** Animation for buffer mode. */
+// Animation for buffer mode.
 @keyframes md-progress-bar-background-scroll {
   to {
     transform: translateX(-10px);
diff --git a/src/lib/progress-circle/_progress-circle-theme.scss b/src/lib/progress-circle/_progress-circle-theme.scss
new file mode 100644
index 000000000000..c29e59f74ba8
--- /dev/null
+++ b/src/lib/progress-circle/_progress-circle-theme.scss
@@ -0,0 +1,23 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-progress-circle-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  md-progress-circle {
+    path {
+      stroke: md-color($primary, 600);
+    }
+
+    &[color='accent'] path {
+      stroke: md-color($accent, 600);
+    }
+
+    &[color='warn'] path {
+      stroke: md-color($warn, 600);
+    }
+  }
+}
diff --git a/src/lib/progress-circle/progress-circle.scss b/src/lib/progress-circle/progress-circle.scss
index 2fa7a4f588d8..a96798678f3f 100644
--- a/src/lib/progress-circle/progress-circle.scss
+++ b/src/lib/progress-circle/progress-circle.scss
@@ -1,13 +1,12 @@
-@import 'variables';
+@import '../core/style/variables';
 
-@import 'default-theme';
 
-/* Animation Durations */
+// Animation Durations 
 $md-progress-circle-duration: 5250ms !default;
 $md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
 $md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;
 
-/** Component sizing */
+// Component sizing 
 $md-progress-circle-stroke-width: 10px !default;
 // Height and weight of the viewport for md-progress-circle.
 $md-progress-circle-viewport-size: 100px !default;
@@ -15,15 +14,14 @@ $md-progress-circle-viewport-size: 100px !default;
 
 :host {
   display: block;
-  /** Height and width are provided for md-progress-circle to act as a default.
-      The height and width are expected to be overwritten by application css. */
+  // Height and width are provided for md-progress-circle to act as a default.
+  // The height and width are expected to be overwritten by application css.
   height: $md-progress-circle-viewport-size;
   width: $md-progress-circle-viewport-size;
 
-  /** SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
-      based on a 100px by 100px box.  Additionally all SVG sizes and locations are in reference to
-      this viewBox.
-  */
+  // SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
+  // based on a 100px by 100px box.  Additionally all SVG sizes and locations are in reference to
+  // this viewBox.
   svg {
     height: 100%;
     width: 100%;
@@ -33,18 +31,9 @@ $md-progress-circle-viewport-size: 100px !default;
 
   path {
     fill: transparent;
-    stroke: md-color($md-primary, 600);
-    /** Stroke width of 10px defines stroke as 10% of the viewBox */
-    stroke-width: $md-progress-circle-stroke-width;
-  }
-
-  &[color='accent'] path {
-    stroke: md-color($md-accent, 600);
-  }
-
 
-  &[color='warn'] path {
-    stroke: md-color($md-warn, 600);
+    // Stroke width of 10px defines stroke as 10% of the viewBox.
+    stroke-width: $md-progress-circle-stroke-width;
   }
 
 
@@ -61,7 +50,7 @@ $md-progress-circle-viewport-size: 100px !default;
 }
 
 
-/** Animations for indeterminate mode */
+// Animations for indeterminate mode 
 @keyframes md-progress-circle-linear-rotate {
   0%       { transform: rotate(0deg); }
   100%     { transform: rotate(360deg); }
diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
new file mode 100644
index 000000000000..a6e2229a7a29
--- /dev/null
+++ b/src/lib/radio/_radio-theme.scss
@@ -0,0 +1,36 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-radio-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .md-radio-outer-circle {
+    border-color: md-color($foreground, secondary-text);
+
+    .md-radio-checked & {
+      border-color: md-color($accent);
+    }
+
+    .md-radio-disabled & {
+      border-color: md-color($foreground, disabled);
+    }
+  }
+
+  .md-radio-inner-circle {
+    background-color: md-color($accent);
+
+    .md-radio-disabled & {
+      background-color: md-color($foreground, disabled);
+    }
+  }
+
+  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
+  .md-radio-focused .md-ink-ripple {
+    background-color: md-color($accent, 0.26);
+  }
+}
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index fd1aa756c2b7..aa0c80a4657f 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -8,7 +8,7 @@
     <div class="md-ink-ripple"></div>
   </div>
 
-  <input #input class="md-radio-input" type="radio"
+  <input #input class="md-radio-input md-visually-hidden" type="radio"
           [id]="inputId"
           [checked]="checked"
           [disabled]="disabled"
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 5dd61c20d649..2d92d7cc49b5 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -1,6 +1,6 @@
-@import 'default-theme';
-@import 'variables';
-@import 'mixins';
+@import '../core/style/variables';
+@import '../core/ripple/ripple';
+
 
 $md-radio-size: $md-toggle-size !default;
 
@@ -30,7 +30,6 @@ md-radio-button {
 
 // The outer circle for the radio, always present.
 .md-radio-outer-circle {
-  border-color: md-color($md-foreground, secondary-text);
   border: solid 2px;
   border-radius: 50%;
   box-sizing: border-box;
@@ -40,19 +39,10 @@ md-radio-button {
   top: 0;
   transition: border-color ease 280ms;
   width: $md-radio-size;
-
-  .md-radio-checked & {
-    border-color: md-color($md-accent);
-  }
-
-  .md-radio-disabled & {
-    border-color: md-color($md-foreground, disabled);
-  }
 }
 
 // The inner circle for the radio, shown when checked.
 .md-radio-inner-circle {
-  background-color: md-color($md-accent);
   border-radius: 50%;
   box-sizing: border-box;
   height: $md-radio-size;
@@ -66,10 +56,6 @@ md-radio-button {
   .md-radio-checked & {
     transform: scale(0.5);
   }
-
-  .md-radio-disabled & {
-    background-color: md-color($md-foreground, disabled);
-  }
 }
 
 // Text label next to radio.
@@ -98,12 +84,6 @@ md-radio-button {
   }
 }
 
-// Underlying native input element.
-// Visually hidden but still able to respond to focus.
-.md-radio-input {
-  @include md-visually-hidden;
-}
-
 // Basic disabled state.
 .md-radio-disabled, .md-radio-disabled .md-radio-label {
   cursor: default;
diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss
new file mode 100644
index 000000000000..c06036feeabe
--- /dev/null
+++ b/src/lib/sidenav/_sidenav-theme.scss
@@ -0,0 +1,30 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-sidenav-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  // We use invert() here to have the darken the background color expected to be used. If the
+  // background is light, we use a dark backdrop. If the background is dark, 
+  // we use a light backdrop.
+  $sidenav-backdrop-color: invert(md-color($background, card, 0.6)) !default;
+  $sidenav-background-color: md-color($background, dialog) !default;
+  $sidenav-push-background-color: md-color($background, dialog) !default;
+
+  md-sidenav {
+    background-color: $sidenav-background-color;
+
+    &.md-sidenav-push {
+      background-color: $sidenav-push-background-color;
+    }
+  }
+
+  .md-sidenav-backdrop.md-sidenav-shown {
+    background-color: $sidenav-backdrop-color;
+  }
+}
diff --git a/src/lib/sidenav/sidenav-transitions.scss b/src/lib/sidenav/sidenav-transitions.scss
index 0d5e1e7ac700..ad445bff3b38 100644
--- a/src/lib/sidenav/sidenav-transitions.scss
+++ b/src/lib/sidenav/sidenav-transitions.scss
@@ -1,7 +1,5 @@
-/**
- * We separate transitions to be able to disable them in unit tests, by simply not loading this file.
- */
-@import 'variables';
+// Separate transitions to be able to disable them in unit tests by omitting this file.
+@import '../core/style/variables';
 
 md-sidenav {
   transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 4baa30963961..3bfcdde54d61 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -1,21 +1,11 @@
-@import 'default-theme';
-@import 'mixins';
-@import 'variables';
-@import 'elevation';
-@import 'sidenav-mixins';
-
-// We use invert() here to have the darken the background color expected to be used. If the
-// background is light, we use a dark backdrop. If the background is dark, we use a light backdrop.
-$md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default;
-$md-sidenav-background-color: md-color($md-background, dialog) !default;
-$md-sidenav-push-background-color: md-color($md-background, dialog) !default;
-
-
-/**
- * Mixin to help with defining LTR/RTL 'transform: translate3d()' values.
- * @param $open The translation value when the sidenav is opened.
- * @param $close The translation value when the sidenav is closed.
- */
+@import '../core/style/variables';
+@import '../core/style/elevation';
+@import '../core/style/sidenav-common';
+
+
+// Mixin to help with defining LTR/RTL 'transform: translate3d()' values.
+// @param $open The translation value when the sidenav is opened.
+// @param $close The translation value when the sidenav is closed.
 @mixin md-sidenav-transition($open, $close) {
   transform: translate3d($close, 0, 0);
 
@@ -42,12 +32,21 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   }
 }
 
+// Mixin that creates a new stacking context.
+// see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+@mixin md-sidenav-stacking-context() {
+  position: relative;
+
+  // Use a transform to create a new stacking context.
+  transform: translate3d(0, 0, 0);
+}
+
 md-sidenav-layout {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
   // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
   // We create another stacking context in the '.md-sidenav-content' and in each sidenav so that
   // the application content does not get messed up with our own CSS.
-  @include md-stacking-context();
+  @include md-sidenav-stacking-context();
 
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
@@ -85,12 +84,11 @@ md-sidenav-layout {
 
   &.md-sidenav-shown {
     visibility: visible;
-    background-color: $md-sidenav-backdrop-color;
   }
 }
 
 .md-sidenav-content {
-  @include md-stacking-context();
+  @include md-sidenav-stacking-context();
 
   display: block;
   height: 100%;
@@ -98,7 +96,7 @@ md-sidenav-layout {
 }
 
 md-sidenav {
-  @include md-stacking-context();
+  @include md-sidenav-stacking-context();
 
   display: block;
   position: absolute;
@@ -110,14 +108,8 @@ md-sidenav {
   // TODO(kara): revisit scrolling behavior for sidenavs
   overflow-y: auto;
 
-  background-color: $md-sidenav-background-color;
-
   @include md-sidenav-transition(0, -100%);
 
-  &.md-sidenav-push {
-    background-color: $md-sidenav-push-background-color;
-  }
-
   &.md-sidenav-side {
     z-index: 1;
   }
diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss
new file mode 100644
index 000000000000..338dfb691164
--- /dev/null
+++ b/src/lib/slide-toggle/_slide-toggle-theme.scss
@@ -0,0 +1,77 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin _md-slide-toggle-checked($palette) {
+  &.md-checked {
+    .md-slide-toggle-thumb {
+      background-color: md-color($palette);
+    }
+
+    .md-slide-toggle-bar {
+      background-color: md-color($palette, 0.5);
+    }
+  }
+}
+
+// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle.
+@mixin _md-slide-toggle-ripple($palette, $foreground) {
+  &.md-slide-toggle-focused {
+    &:not(.md-checked) .md-ink-ripple {
+      // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity
+      // of black in light themes and 12% of white in dark themes.
+      background-color: md-color($foreground, divider);
+    }
+  }
+
+  &.md-slide-toggle-focused .md-ink-ripple {
+    background-color: md-color($palette, 0.26);
+  }
+}
+
+@mixin md-slide-toggle-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  md-slide-toggle {
+    @include _md-slide-toggle-checked($accent);
+    @include _md-slide-toggle-ripple($accent, $foreground);
+    
+
+    &.md-primary {
+      @include _md-slide-toggle-checked($primary);
+      @include _md-slide-toggle-ripple($primary, $foreground);
+    }
+  
+    &.md-warn {
+      @include _md-slide-toggle-checked($warn);
+      @include _md-slide-toggle-ripple($warn, $foreground);
+    }
+
+  }
+
+  .md-disabled {
+    .md-slide-toggle-thumb {
+      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes.
+      // Since this is very specific to the slide-toggle component, we're not providing
+      // it in the background palette.
+      background-color: md-color($md-grey, 400);
+    }
+    .md-slide-toggle-bar {
+      background-color: md-color($foreground, divider);
+    }
+  }
+
+  .md-slide-toggle-thumb {
+    background-color: md-color($background, background);
+  }
+
+  .md-slide-toggle-bar {
+    // The slide-toggle bar always uses grey-500 for both dark and light themes.
+    // Since this is very specific to slide-toggle, it's not part of the common background palette.
+    background-color: md-color($md-grey, 500);
+  }
+}
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index 6e8edf040de0..48d7115f30dd 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/src/lib/slide-toggle/slide-toggle.html
@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <input #input class="md-slide-toggle-checkbox" type="checkbox"
+    <input #input class="md-slide-toggle-checkbox md-visually-hidden" type="checkbox"
            [id]="getInputId()"
            [tabIndex]="tabIndex"
            [checked]="checked"
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index a0c4f0133384..33b83ef72452 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -1,9 +1,7 @@
-@import 'variables';
-@import 'mixins';
-@import 'elevation';
+@import '../core/style/variables';
+@import '../core/ripple/ripple';
+@import '../core/style/elevation';
 
-//TODO(): remove the default theme.
-@import 'default-theme';
 
 $md-slide-toggle-width: 36px !default;
 $md-slide-toggle-height: 24px !default;
@@ -11,30 +9,11 @@ $md-slide-toggle-bar-height: 14px !default;
 $md-slide-toggle-thumb-size: 20px !default;
 $md-slide-toggle-margin: 16px !default;
 
-@mixin md-switch-checked($palette) {
-  &.md-checked {
-    .md-slide-toggle-thumb {
-      background-color: md-color($palette);
-    }
-
-    .md-slide-toggle-bar {
-      background-color: md-color($palette, 0.5);
-    }
-  }
-}
 
-@mixin md-switch-ripple($palette) {
+@mixin md-switch-ripple() {
   // Temporary ripple effect for the thumb of the slide-toggle.
   // Bind to the parent selector and specify the current palette.
-  @include md-temporary-ink-ripple(slide-toggle, true, $palette);
-
-  &.md-slide-toggle-focused {
-    &:not(.md-checked) .md-ink-ripple {
-      // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity
-      // of black in light themes and 12% of white in dark themes.
-      background-color: md-color($md-foreground, divider);
-    }
-  }
+  @include md-temporary-ink-ripple(slide-toggle, true);
 }
 
 :host {
@@ -55,34 +34,13 @@ $md-slide-toggle-margin: 16px !default;
     }
   }
 
-  @include md-switch-checked($md-accent);
-  @include md-switch-ripple($md-accent);
-
-  &.md-primary {
-    @include md-switch-checked($md-primary);
-    @include md-switch-ripple($md-primary);
-  }
-
-  &.md-warn {
-    @include md-switch-checked($md-warn);
-    @include md-switch-ripple($md-warn);
-  }
+  @include md-switch-ripple();
 
   &.md-disabled {
 
     .md-slide-toggle-label, .md-slide-toggle-container {
       cursor: default;
     }
-
-    .md-slide-toggle-thumb {
-      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes.
-      // Since this is very specific to the slide-toggle component, we're not providing
-      // it in the background palette.
-      background-color: md-color($md-grey, 400);
-    }
-    .md-slide-toggle-bar {
-      background-color: md-color($md-foreground, divider);
-    }
   }
 }
 
@@ -149,7 +107,6 @@ $md-slide-toggle-margin: 16px !default;
   width: $md-slide-toggle-thumb-size;
   border-radius: 50%;
 
-  background-color: md-color($md-background, background);
   @include md-elevation(1);
 }
 
@@ -163,21 +120,9 @@ $md-slide-toggle-margin: 16px !default;
   width: $md-slide-toggle-width - 2px;
   height: $md-slide-toggle-bar-height;
 
-  // The bar of the slide-toggle always uses the hue 500 of the grey palette in dark or light themes.
-  // Since this is very specific to the slide-toggle component, we're not providing
-  // it in the background palette.
-  background-color: md-color($md-grey, 500);
-
   border-radius: 8px;
 }
 
-// The slide toggle shows a visually hidden checkbox inside of the component.
-// This checkbox allows us to take advantage of the browsers support.
-// Like accessibility and keyboard interaction.
-.md-slide-toggle-checkbox {
-  @include md-visually-hidden();
-}
-
 .md-slide-toggle-bar,
 .md-slide-toggle-thumb {
   transition: $swift-linear;
diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss
new file mode 100644
index 000000000000..28f67927e7b3
--- /dev/null
+++ b/src/lib/slider/_slider-theme.scss
@@ -0,0 +1,33 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-slider-theme($theme) {
+  $accent: map-get($theme, accent);
+
+  // TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
+  $md-slider-off-color: rgba(black, 0.26);
+  $md-slider-focused-color: rgba(black, 0.38);
+  $md-slider-disabled-color: rgba(black, 0.26);
+
+  .md-slider-track {
+    background-color: $md-slider-off-color;
+  }
+
+  .md-slider-track-fill {
+    background-color: md-color($accent);
+  }
+
+  .md-slider-thumb::after {
+    background-color: md-color($accent);
+    border-color: md-color($accent);
+  }
+
+  .md-slider-thumb-label {
+    background-color: md-color($accent);
+  }
+
+  .md-slider-thumb-label-text {
+    color: md-color($accent, default-contrast);
+  }
+}
diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss
index d69743f875a0..04243e0775df 100644
--- a/src/lib/slider/slider.scss
+++ b/src/lib/slider/slider.scss
@@ -1,5 +1,5 @@
-@import 'default-theme';
-@import '_variables';
+@import '../core/style/variables';
+
 
 // This refers to the thickness of the slider. On a horizontal slider this is the height, on a
 // vertical slider this is the width.
@@ -13,11 +13,6 @@ $md-slider-thumb-size: 20px !default;
 $md-slider-thumb-default-scale: 0.7 !default;
 $md-slider-thumb-focus-scale: 1 !default;
 
-// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
-$md-slider-off-color: rgba(black, 0.26);
-$md-slider-focused-color: rgba(black, 0.38);
-$md-slider-disabled-color: rgba(black, 0.26);
-
 $md-slider-thumb-arrow-height: 16px !default;
 $md-slider-thumb-arrow-width: 28px !default;
 
@@ -28,16 +23,12 @@ $md-slider-thumb-label-top: ($md-slider-thickness / 2) -
     ($md-slider-thumb-default-scale * $md-slider-thumb-size / 2) - $md-slider-thumb-label-size -
     $md-slider-thumb-arrow-height + 10px !default;
 
-/**
- * Uses a container height and an item height to center an item vertically within the container.
- */
+// Uses a container height and an item height to center an item vertically within the container.
 @function center-vertically($containerHeight, $itemHeight) {
   @return ($containerHeight / 2) - ($itemHeight / 2);
 }
 
-/**
- * Positions the thumb based on its width and height.
- */
+// Positions the thumb based on its width and height.
 @mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {
   position: absolute;
   top: center-vertically($md-slider-thickness, $height);
@@ -64,10 +55,8 @@ md-slider *::after {
   box-sizing: border-box;
 }
 
-/**
- * Exists in order to pad the slider and keep everything positioned correctly.
- * Cannot be merged with the .md-slider-container.
- */
+// Exists in order to pad the slider and keep everything positioned correctly.
+// Cannot be merged with the .md-slider-container.
 .md-slider-wrapper {
   width: 100%;
   height: 100%;
@@ -75,10 +64,9 @@ md-slider *::after {
   padding-right: $md-slider-padding;
 }
 
-/**
- * Holds the isActive and isSliding classes as well as helps with positioning the children.
- * Cannot be merged with .md-slider-wrapper.
- */
+
+// Holds the isActive and isSliding classes as well as helps with positioning the children.
+// Cannot be merged with .md-slider-wrapper.
 .md-slider-container {
   position: relative;
 }
@@ -95,14 +83,12 @@ md-slider *::after {
   left: 0;
   right: 0;
   height: 100%;
-  background-color: $md-slider-off-color;
 }
 
 .md-slider-track-fill {
   transition-duration: $swift-ease-out-duration;
   transition-timing-function: $swift-ease-out-timing-function;
   transition-property: width, height;
-  background-color: md-color($md-accent);
 }
 
 .md-slider-tick-container, .md-slider-last-tick-container {
@@ -140,11 +126,10 @@ md-slider *::after {
   width: $md-slider-thumb-size;
   height: $md-slider-thumb-size;
   border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);
+  // Separate border properties because, if you combine them into "border", it defaults to 'black'.
   border-width: 3px;
   border-style: solid;
   transition: inherit;
-  background-color: md-color($md-accent);
-  border-color: md-color($md-accent);
 }
 
 .md-slider-thumb-label {
@@ -162,8 +147,6 @@ md-slider *::after {
   transform: scale(0.4) translate3d(0, (-$md-slider-thumb-label-top + 10) / 0.4, 0) rotate(45deg);
   transition: 300ms $swift-ease-in-out-timing-function;
   transition-property: transform, border-radius;
-
-  background-color: md-color($md-accent);
 }
 
 .md-slider-thumb-label-text {
@@ -173,7 +156,6 @@ md-slider *::after {
   opacity: 0;
   transform: rotate(-45deg);
   transition: opacity 300ms $swift-ease-in-out-timing-function;
-  color: white;
 }
 
 .md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label {
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
new file mode 100644
index 000000000000..abb5ceeb4d5a
--- /dev/null
+++ b/src/lib/tabs/_tabs-theme.scss
@@ -0,0 +1,23 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-tabs-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  
+  .md-tab-header {
+    border-bottom: 1px solid md-color($background, status-bar);
+  }
+  
+  .md-tab-label:focus {
+    background-color: md-color($primary, 100, 0.3);
+  }
+  
+  md-ink-bar {
+    background-color: md-color($primary, 500);
+  }
+}
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index a009c1d2e7aa..df95a145a858 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'default-theme';
+@import '../core/style/variables';
+
 
 $md-tab-bar-height: 48px !default;
 
@@ -9,17 +9,16 @@ $md-tab-bar-height: 48px !default;
   font-family: $md-font-family;
 }
 
-/** The top section of the view; contains the tab labels */
+// The top section of the view; contains the tab labels
 .md-tab-header {
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid md-color($md-background, status-bar);
   flex-shrink: 0;
 }
 
-/** Wraps each tab label */
+// Wraps each tab label 
 .md-tab-label {
   line-height: $md-tab-bar-height;
   height: $md-tab-bar-height;
@@ -36,7 +35,6 @@ $md-tab-bar-height: 48px !default;
   &:focus {
     outline: none;
     opacity: 1;
-    background-color: md-color($md-primary, 100, 0.3);
   }
 }
 
@@ -45,7 +43,7 @@ $md-tab-bar-height: 48px !default;
   pointer-events: none;
 }
 
-/** The bottom section of the view; contains the tab bodies */
+// The bottom section of the view; contains the tab bodies 
 .md-tab-body-wrapper {
   position: relative;
   overflow: hidden;
@@ -53,7 +51,7 @@ $md-tab-bar-height: 48px !default;
   display: flex;
 }
 
-/** Wraps each tab body */
+// Wraps each tab body 
 .md-tab-body {
   display: none;
   overflow: auto;
@@ -65,11 +63,10 @@ $md-tab-bar-height: 48px !default;
   }
 }
 
-/** The colored bar that underlines the active tab */
+// The colored bar that underlines the active tab 
 md-ink-bar {
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: md-color($md-primary, 500);
   transition: 350ms ease-out;
 }
diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss
new file mode 100644
index 000000000000..6320b51dd5f9
--- /dev/null
+++ b/src/lib/toolbar/_toolbar-theme.scss
@@ -0,0 +1,33 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin _md-toolbar-color($palette) {
+  background: md-color($palette);
+  color: md-color($palette, default-contrast);
+}
+
+@mixin md-toolbar-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  md-toolbar {
+    background: md-color($background, app-bar);
+    color: md-color($foreground, text);
+
+    &.md-primary {
+      @include _md-toolbar-color($primary);
+    }
+
+    &.md-accent {
+      @include _md-toolbar-color($accent);
+    }
+
+    &.md-warn {
+      @include _md-toolbar-color($warn);
+    }
+  }
+}
diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss
index 28bda539d58a..82e981b1f0d0 100644
--- a/src/lib/toolbar/toolbar.scss
+++ b/src/lib/toolbar/toolbar.scss
@@ -1,15 +1,10 @@
-@import 'variables';
-@import 'mixins';
-@import 'default-theme'; //TODO: remove that soon.
+@import '../core/style/variables';
+
 
 $md-toolbar-min-height: 64px !default;
 $md-toolbar-font-size: 20px !default;
 $md-toolbar-padding: 16px !default;
 
-@mixin toolbar-theme($palette) {
-  background: md-color($palette);
-  color: md-color($palette, default-contrast);
-}
 
 md-toolbar {
   display: flex;
@@ -27,21 +22,6 @@ md-toolbar {
 
   flex-direction: column;
 
-  background: md-color($md-background, app-bar);
-  color: md-color($md-foreground, text);
-
-  &.md-primary {
-    @include toolbar-theme($md-primary);
-  }
-
-  &.md-accent {
-    @include toolbar-theme($md-accent);
-  }
-
-  &.md-warn {
-    @include toolbar-theme($md-warn);
-  }
-
   md-toolbar-row {
     display: flex;
     box-sizing: border-box;
@@ -53,5 +33,4 @@ md-toolbar {
     flex-direction: row;
     align-items: center;
   }
-
 }
diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss
new file mode 100644
index 000000000000..aaa6516ad9b0
--- /dev/null
+++ b/src/lib/tooltip/_tooltip-theme.scss
@@ -0,0 +1,9 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-tooltip-theme($theme) {
+  .md-tooltip {
+    background: md-color($md-grey, 700, 0.9);
+  }
+}
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index 8b32906046e4..f8578a8f7a19 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -1,6 +1,5 @@
-@import 'variables';
-@import 'theme-functions';
-@import 'palette';
+@import '../core/style/variables';
+
 
 $md-tooltip-height: 22px;
 $md-tooltip-margin: 14px;
@@ -9,8 +8,8 @@ $md-tooltip-padding: 8px;
 :host {
   pointer-events: none;
 }
+
 .md-tooltip {
-  background: md-color($md-grey, 700, 0.9);
   color: white;
   padding: 0 $md-tooltip-padding;
   border-radius: 2px;
diff --git a/stylelint-config.json b/stylelint-config.json
index e05233c03219..15d672bee014 100644
--- a/stylelint-config.json
+++ b/stylelint-config.json
@@ -39,7 +39,6 @@
 
     "block-closing-brace-newline-after": "always",
     "block-closing-brace-newline-before": "always-multi-line",
-    "block-no-empty": true,
     "block-opening-brace-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always-multi-line",