feat(theming): add theming

closes #442, thanks @skeemer

docs/app/css/style.css

@@ -5,6 +5,10 @@ body {
   max-height: 100%;
 }
 
+a {
+  color: #3f51b5;
+}
+
 md-toolbar.md-medium-tall {
   height: 88px;
 }
@@ -158,13 +162,16 @@ pre > code.highlight {
   -moz-flex: 1;
   -ms-flex: 1;
   flex: 1;
+}
+
+.demo-content > div[layout-fill] {
   min-height: 448px;
 }
 
 md-toolbar.demo-toolbar,
 .demo-source-tabs md-tab,
 .demo-source-tabs .tabs-header {
-  background: #00BCD4;
+  background: #00BCD4 !important;
   color: white;
 }
 md-toolbar.demo-toolbar md-tab-label {

docs/app/partials/home.tmpl.html

@@ -1,7 +1,7 @@
 <div ng-controller="HomeCtrl" layout="vertical">
   <md-content flex>
     <p>
-      <a href="http://www.google.com/design/spec/materal-design/">Material Design</a> is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
+      <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
     </p>
     <p>
       The material design project for Angular is a complementary effort to the <a href="http://www.polymer-project.org/">Polymer</a> project's <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">paper elements</a> collection. Our goal is to provide a set of AngularJS-native UI elements that implement the material design system.

docs/config/template/index.template.html

@@ -19,7 +19,7 @@
     component-id="left"
     is-locked-open="$media('md')">
 
-    <md-toolbar class="md-theme-light md-medium-tall">
+    <md-toolbar class="md-medium-tall">
       <h1 class="md-toolbar-tools" style="padding-top:25px;">
         <a href="#/" ng-click="goHome()">Angular<br/>Material Design</a>
       </h1>
@@ -50,7 +50,7 @@ <h1 class="md-toolbar-tools" style="padding-top:25px;">
   </md-sidenav>
 
   <div layout="vertical" layout-fill tabIndex="-1" role="main">
-    <md-toolbar class="md-theme-dark md-medium-tall app-toolbar">
+    <md-toolbar md-theme="indigo" class="md-medium-tall app-toolbar">
 
       <div class="md-toolbar-tools" ng-click="openMenu()">
         <button class="menu-icon" hide-md aria-label="Toggle Menu">

docs/gulpfile.js

@@ -118,10 +118,10 @@ module.exports = function(gulp, IS_RELEASE_BUILD) {
   gulp.task('docs-css', ['docs-app', 'build'], function() {
     return gulp.src([
       'dist/angular-material.css',
+      'dist/themes/*.css',
       'docs/app/css/highlightjs-github.css',
       'docs/app/css/layout-demo.css',
-      'docs/app/css/style.css',
-      'dist/themes/default-theme.css'
+      'docs/app/css/style.css'
     ])
       .pipe(concat('docs.css'))
       .pipe(gulp.dest('dist/docs'));

gulpfile.js

@@ -9,6 +9,7 @@ var gulp = require('gulp');
 var karma = require('karma').server;
 var pkg = require('./package.json');
 var exec = require('child_process').exec;
+var mergeStream = require('merge-stream');
 
 var argv = require('minimist')(process.argv.slice(2));
 
@@ -109,8 +110,8 @@ var config = {
     ' * v' + pkg.version + '\n' +
     ' */\n',
   jsBaseFiles: ['src/core/core.js', 'src/core/util/*.js'],
-  themeBaseFiles: ['src/core/style/variables.scss', 'src/core/style/mixins.scss'],
-  scssBaseFiles: ['src/core/style/variables.scss', 'src/core/style/mixins.scss', 'src/core/style/{structure,layout,table}.scss'],
+  themeBaseFiles: ['src/core/style/color-palette.scss', 'src/core/style/variables.scss', 'src/core/style/mixins.scss'],
+  scssBaseFiles: ['src/core/style/color-palette.scss', 'src/core/style/variables.scss', 'src/core/style/mixins.scss', 'src/core/style/{structure,layout,table}.scss'],
   paths: 'src/{components,services}/**',
   outputDir: 'dist/'
 };
@@ -121,7 +122,7 @@ var config = {
  * Project wide build related tasks
  */
 
-gulp.task('build', ['build-theme', 'build-scss', 'build-js'], function() {
+gulp.task('build', ['build-themes', 'build-scss', 'build-js'], function() {
 });
 
 gulp.task('watch', ['build'], function() {
@@ -162,13 +163,27 @@ gulp.task('build-default-theme', function() {
 gulp.task('build-theme', ['build-default-theme'], function() {
   var theme = argv.theme || argv.t || 'default';
   theme = theme.replace(/-theme$/, '');
+  return buildTheme(theme);
+});
+
+gulp.task('build-themes', ['build-default-theme'], function() {
+  var stream = mergeStream();
+  var themes = glob('themes/*.scss', { cwd: __dirname });
+  themes.forEach(function(themeFile) {
+    var name = themeFile.match(/((\w|-)+)-theme\.scss/)[1];
+    stream.add(buildTheme(name));
+  });
+  return stream;
+});
+
+function buildTheme(theme) {
   gutil.log("Building theme " + theme + "...");
-  return gulp.src(['themes/default-theme.scss', 'themes/' + theme + '-theme.scss'])
+  return gulp.src(['src/core/style/color-palette.scss', 'themes/' + theme + '-theme.scss', 'themes/default-theme.scss'])
     .pipe(concat(theme + '-theme.scss'))
     .pipe(utils.hoistScssVariables())
     .pipe(sass())
     .pipe(gulp.dest(config.outputDir + 'themes/'));
-});
+}
 
 gulp.task('build-scss', function() {
   var scssGlob = path.join(config.paths, '*.scss');
@@ -249,7 +264,11 @@ gulp.task('build-demo', function() {
 });
 
 function buildModuleStyles(name) {
-  var baseStyles = glob(config.themeBaseFiles, { cwd: __dirname }).map(function(fileName) {
+  var files = [];
+  config.themeBaseFiles.forEach(function(fileGlob) {
+    files = files.concat(glob(fileGlob, { cwd: __dirname }));
+  });
+  var baseStyles = files.map(function(fileName) {
     return fs.readFileSync(fileName, 'utf8').toString();
   }).join('\n');
   return lazypipe()

package.json

@@ -8,6 +8,8 @@
     "batch": "^0.5.1",
     "canonical-path": "0.0.2",
     "conventional-changelog": "0.0.9",
+    "dgeni": "^0.4.1",
+    "dgeni-packages": "^0.10.3",
     "esprima": "^1.2.2",
     "event-stream": "^3.1.5",
     "glob": "~4.0.2",
@@ -21,14 +23,16 @@
     "gulp-insert": "^0.4.0",
     "gulp-jshint": "^1.5.5",
     "gulp-minify-css": "^0.3.4",
+    "gulp-minify-html": "^0.1.6",
     "gulp-ng-html2js": "^0.1.8",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.3.0",
-    "gulp-sass": "^0.7.1",
+    "gulp-sass": "1.2.0",
     "gulp-strip-debug": "^0.3.0",
     "gulp-uglify": "^0.3.0",
     "gulp-uncss": "^0.4.5",
     "gulp-util": "^3.0.1",
+    "gulp-webserver": "^0.8.3",
     "jshint-summary": "^0.3.0",
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
@@ -39,14 +43,10 @@
     "karma-sauce-launcher": "^0.2.10",
     "lazypipe": "^0.2.2",
     "lodash": "^2.4.1",
+    "merge-stream": "^0.1.6",
     "minimist": "^0.1.0",
-    "node-sass": "^0.9.5-rc1",
-    "dgeni": "^0.4.1",
-    "dgeni-packages": "^0.10.3",
-    "through2": "^0.6.3",
-    "gulp-minify-html": "^0.1.6",
     "mkdirp": "^0.5.0",
-    "gulp-webserver": "^0.8.3",
-    "q": "^1.0.1"
+    "q": "^1.0.1",
+    "through2": "^0.6.3"
   }
 }

scripts/gulp-utils.js

@@ -154,13 +154,20 @@ exports.hoistScssVariables = function() {
     var contents = file.contents.toString().split('\n');
     var lastVariableLine = -1;
 
+    var openCount = 0;
+    var closeCount = 0;
+    var openBlock = false;
+
     for( var currentLine = 0; currentLine < contents.length; ++currentLine) {
       var line = contents[currentLine];
-      if (/^\s*\$/.test(line)) {
-        if (currentLine != lastVariableLine + 1) {
-          var variable = contents.splice(currentLine, 1)[0];
-          contents.splice(++lastVariableLine, 0, variable);
-        }
+
+      if (openBlock || /^\s*\$/.test(line)) {
+        if (openBlock) debugger;
+        openCount += (line.match(/\(/g) || []).length;
+        closeCount += (line.match(/\)/g) || []).length;
+        openBlock = openCount != closeCount;
+        var variable = contents.splice(currentLine, 1)[0];
+        contents.splice(++lastVariableLine, 0, variable);
       }
     }
     file.contents = new Buffer(contents.join('\n'));

src/components/animate/_effects.scss

@@ -1,10 +1,3 @@
-md-tabs-ink-bar {
-  height: 2px;
-  background: #ffff85;
-  position: absolute;
-  margin-top: -2px;
-}
-
 // Button ripple: keep same opacity, but expand to 0.75 scale.
 // Then, fade out and expand to 2.0 scale.
 @keyframes inkRippleButton {

src/components/backdrop/_backdrop.js

@@ -0,0 +1,29 @@
+/*
+ * @ngdoc module
+ * @name material.components.backdrop
+ * @description Backdrop
+ */
+
+/**
+ * @ngdoc directive
+ * @name mdBackdrop
+ * @module material.components.backdrop
+ *
+ * @restrict E
+ *
+ * @description
+ * `<md-backdrop>` is a backdrop element used by other coponents, such as dialog and bottom sheet.
+ * Apply class `opaque` to make the backdrop use the theme backdrop color.
+ *
+ */
+angular.module('material.components.backdrop', [
+  'material.services.theming'
+])
+.directive('mdBackdrop', [
+  '$mdTheming',
+  BackdropDirective
+]);
+
+function BackdropDirective($mdTheming) {
+  return $mdTheming;
+}

src/components/backdrop/_backdrop.scss

@@ -8,10 +8,6 @@ md-backdrop {
   right: 0;
   bottom: 0;
 
-  &.opaque {
-    background-color: rgba(0,0,0,0.3);
-  }
-
   transition: all 0.2s ease-out;
 
   &.ng-enter {

src/components/backdrop/backdrop-theme.scss

@@ -0,0 +1,5 @@
+$backdrop-color: rgba(0,0,0,0.3);
+
+md-backdrop.opaque.md-#{$theme-name}-theme {
+  background-color: $backdrop-color;
+}

src/components/bottomSheet/_bottomSheet.scss

@@ -1,3 +1,11 @@
+$bottom-sheet-horizontal-padding: 2 * $baseline-grid;
+$bottom-sheet-vertical-padding: 1 * $baseline-grid;
+$bottom-sheet-icon-after-margin: 4 * $baseline-grid;
+$bottom-sheet-list-item-height: 6 * $baseline-grid;
+$bottom-sheet-hidden-bottom-padding: 80px;
+$bottom-sheet-header-height: 7 * $baseline-grid;
+$bottom-sheet-grid-font-weight: 300;
+
 md-bottom-sheet {
   position: fixed;
   left: 0;
@@ -6,8 +14,7 @@ md-bottom-sheet {
   padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
   z-index: $z-index-bottom-sheet;
 
-  background-color: $bottom-sheet-background-color;
-  border-top: 1px solid $bottom-sheet-border-top-color;
+  border-top: 1px solid;
 
   transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
   transition: 0.2s linear;
@@ -36,7 +43,6 @@ md-bottom-sheet {
   h2.md-subheader {
     background-color: transparent;
     font-family: $font-family;
-    color: $text-medium;
     line-height: $bottom-sheet-header-height;
     padding: 0;
     white-space: nowrap;
@@ -62,7 +68,6 @@ md-bottom-sheet {
     md-item {
       align-items: center;
       height: $bottom-sheet-list-item-height;
-      color: $text-medium;
 
       div.md-icon-container {
         display: inline-block;
@@ -155,6 +160,3 @@ md-bottom-sheet {
     }
   }
 }
-
-
-

src/components/bottomSheet/bottomSheet-theme.scss

@@ -0,0 +1,24 @@
+$bottom-sheet-color-palette: $background-color-palette !default;
+$bottom-sheet-background-color: map-get($bottom-sheet-color-palette, '50') !default;
+$bottom-sheet-border-top-color: map-get($bottom-sheet-color-palette, '400') !default;
+$bottom-sheet-header-color: $foreground-secondary-color !default;
+$bottom-sheet-list-color: $foreground-secondary-color !default;
+
+md-bottom-sheet.md-#{$theme-name}-theme {
+  background-color: $bottom-sheet-background-color;
+  border-top-color: $bottom-sheet-border-top-color;
+
+  &.list {
+    md-item {
+      color: $bottom-sheet-list-color;
+    }
+  }
+
+  .md-subheader {
+    background-color: $bottom-sheet-background-color;
+  }
+
+  .md-subheader {
+    color: $bottom-sheet-header-color;
+  }
+}

src/components/bottomSheet/bottomSheet.js

@@ -16,6 +16,7 @@ angular.module('material.components.bottomSheet', [
   '$mdEffects',
   '$timeout',
   '$$rAF',
+  '$compile',
   MdBottomSheet
 ]);
 
@@ -111,19 +112,20 @@ function MdBottomSheetDirective() {
  *
  */
 
-function MdBottomSheet($$interimElement, $animate, $mdEffects, $timeout, $$rAF) {
+function MdBottomSheet($$interimElement, $animate, $mdEffects, $timeout, $$rAF, $compile) {
   var backdrop;
 
   var $mdBottomSheet;
   return $mdBottomSheet = $$interimElement({
+    themable: true,
     targetEvent: null,
     onShow: onShow,
     onRemove: onRemove,
   });
 
   function onShow(scope, element, options) {
     // Add a backdrop that will close on click
-    backdrop = angular.element('<md-backdrop class="opaque ng-enter">');
+    backdrop = $compile('<md-backdrop class="opaque ng-enter">')(scope);
     backdrop.on('click touchstart', function() {
       $timeout($mdBottomSheet.cancel);
     });

src/components/bottomSheet/demoBasicUsage/index.html

@@ -3,11 +3,11 @@
     Bottom sheet can be dismissed with the service or a swipe down.
   </p>
   <div class="bottom-sheet-demo inset" layout="vertical" layout-sm="horizontal" layout-align="center">
-    <md-button class="md-button-colored" ng-click="showListBottomSheet($event)">
+    <md-button class="md-primary" ng-click="showListBottomSheet($event)">
       Show as List
     </md-button>
     <div style="width:50px;"></div>
-    <md-button class="md-button-colored" ng-click="showGridBottomSheet($event)">
+    <md-button class="md-primary" ng-click="showGridBottomSheet($event)">
       Show as Grid
     </md-button>
   </div>