feat(theming): add initial version for user-facing theming

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">

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">

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);
+}

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);
+  }
+}

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"

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;

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;

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);
   }
 }
+
+

src/lib/button/button.scss

@@ -33,8 +33,6 @@
 }
 
 [md-icon-button] {
-  @extend %md-button-base;
-
   min-width: 0;
   padding: 0;
 

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);
+  }
+}

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