Add canvasColor to theme palette

docs/src/app/components/code-example/code-example.jsx

@@ -58,11 +58,11 @@ const CodeExample = React.createClass({
 
     let palette = this.state.muiTheme.rawTheme.palette;
     let borderColor = palette.borderColor;
-    let alternateTextColor = palette.alternateTextColor;
+    let canvasColor = palette.canvasColor;
 
     let styles = {
       root: {
-        backgroundColor: alternateTextColor,
+        backgroundColor: canvasColor,
         marginBottom: 32,
         overflow: 'hidden'
       },

docs/src/app/components/pages/customization/themes.jsx

@@ -69,7 +69,7 @@ const ThemesPage = React.createClass({
   },
 
   getStyles() {
-    let alternateTextColor = this.state.muiTheme.rawTheme.palette.alternateTextColor;
+    let canvasColor = this.state.muiTheme.rawTheme.palette.canvasColor;
     let borderColor = this.state.muiTheme.rawTheme.palette.borderColor;
     let styles = {
       group: {
@@ -105,7 +105,7 @@ const ThemesPage = React.createClass({
         marginBottom: '0px'
       },
       codeExample: {
-        backgroundColor: alternateTextColor,
+        backgroundColor: canvasColor,
         marginBottom: '32px'
       },
       title: {
@@ -118,7 +118,7 @@ const ThemesPage = React.createClass({
         color: Typography.textDarkBlack
       },
       liveExamplePaper: {
-        backgroundColor: alternateTextColor,
+        backgroundColor: canvasColor,
         marginBottom: 32,
         overflow: 'hidden'
       },
@@ -157,7 +157,7 @@ const ThemesPage = React.createClass({
 
   render() {
 
-    let lightRawTheme = 
+    let lightRawTheme =
       'let Colors = require(\'material-ui/lib/styles/colors\');\n' +
       'let ColorManipulator = require(\'material-ui/lib/utils/color-manipulator\');\n' +
       'let Spacing = require(\'material-ui/lib/styles/spacing\');\n\n' +
@@ -173,6 +173,7 @@ const ThemesPage = React.createClass({
       '    accent3Color: Colors.grey500,\n' +
       '    textColor: Colors.darkBlack,\n' +
       '    alternateTextColor: Colors.white,\n' +
+      '    canvasColor: Colors.white,\n' +
       '    borderColor: Colors.grey300,\n' +
       '    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),\n' +
       '  },\n' +
@@ -191,7 +192,7 @@ const ThemesPage = React.createClass({
       '  //the key passed through context must be called \"muiTheme\"\n' +
       '  childContextTypes : {\n' +
       '    muiTheme: React.PropTypes.object,\n' +
-      '  },\n\n' + 
+      '  },\n\n' +
 
       '  getChildContext() {\n' +
       '    return {\n' +
@@ -242,7 +243,7 @@ const ThemesPage = React.createClass({
 
       'module.exports = MySampleAppComponent;\n';
 
-    let receiveThemeInContextCode = 
+    let receiveThemeInContextCode =
       'const SpecificPageInApp = React.createClass({\n\n' +
 
       '...\n\n' +
@@ -326,7 +327,7 @@ const ThemesPage = React.createClass({
 
         <div style={styles.bottomBorderWrapper}>
           <p>
-            We changed how themes work in v0.12.0 (check out <a href="https://github.com/callemall/material-ui/releases/tag/v0.12.0">release log</a> for more details). 
+            We changed how themes work in v0.12.0 (check out <a href="https://github.com/callemall/material-ui/releases/tag/v0.12.0">release log</a> for more details).
             There are now two kinds of themes in Material-UI: <b>raw theme</b> and <b>mui theme</b>.
             The raw theme is a plain JS object containing three keys: spacing, palette and fontFamily.
             The mui theme, on the other hand, is a much bigger object. It contains a key for every material-ui
@@ -343,7 +344,7 @@ const ThemesPage = React.createClass({
             Before we discuss how to apply custom themes to an application, let&#39;s look at the functions provided by ThemeManager.
           </p>
         </div>
-        
+
         <div style={styles.bottomBorderWrapper}>
           <ComponentDoc
             name=""
@@ -360,11 +361,11 @@ const ThemesPage = React.createClass({
           Internally, Material-UI components use React&#39;s <a href="https://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html#context">
           context</a> feature to implement theming. Context is a way to pass down values through the component
           hierarchy without having to use props at every level. In fact, context is very convenient for concepts like theming,
-          which are usually implemented in a hierarchical manner. 
+          which are usually implemented in a hierarchical manner.
         </p>
 
         <p>
-          There are two recommended ways to apply custom themes: using React lifecycle methods with the context feature, <b>or</b>, 
+          There are two recommended ways to apply custom themes: using React lifecycle methods with the context feature, <b>or</b>,
           using an ES7-style decorator. To start off, define your own raw theme in a JS file like so:
         </p>
 
@@ -402,7 +403,7 @@ const ThemesPage = React.createClass({
         <p>
           Once you have obtained the calculated mui theme in your app component, you can easily
           override specific attributes for particular components. These overrides can be performed at any level
-          in the hierarchy and will only apply from that point downward. 
+          in the hierarchy and will only apply from that point downward.
         </p>
 
         <p>
@@ -415,7 +416,7 @@ const ThemesPage = React.createClass({
         </Paper>
 
         <p>
-          We recommend that you use state for intermediary storage of the theme, and always access the theme 
+          We recommend that you use state for intermediary storage of the theme, and always access the theme
           using <code style={styles.inlineCode}>this.state</code>. Then, to modify the theme,
           use <code style={styles.inlineCode}>this.setState()</code> in an appropriate React lifecycle method. This is good practice because
           React componenets re-render every time the state of the component is updated.
@@ -436,7 +437,7 @@ const ThemesPage = React.createClass({
         </p>
 
         <p>
-          The mui theme object also contains a key called <code style={styles.inlineCode}>static</code> that is set to <code style={styles.inlineCode}>true</code> by 
+          The mui theme object also contains a key called <code style={styles.inlineCode}>static</code> that is set to <code style={styles.inlineCode}>true</code> by
           default. This allows for some optimization when rendering Material-UI components. Change this to <code style={styles.inlineCode}>false</code> iff
           the <code style={styles.inlineCode}>muiTheme</code> object in your app can change during runtime.
         </p>

docs/src/app/components/pages/get-started/installation.jsx

@@ -57,7 +57,7 @@ const Installation = React.createClass({
         color: Typography.textDarkBlack
       },
       codeExample: {
-        backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
+        backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
         marginBottom: '32px'
       },
       inlineCode: {
@@ -95,18 +95,18 @@ const Installation = React.createClass({
         '//https://github.com/zilverline/react-tap-event-plugin\n' +
         'injectTapEventPlugin();\n',
 
-      noticeCode1 = 
+      noticeCode1 =
         'const RaisedButton = require(\'material-ui/lib/raised-button\');\n',
 
-      noticeCode2 = 
+      noticeCode2 =
         'const Mui = require(\'material-ui\');\n' +
         'const RaisedButton = Mui.RaisedButton;\n';
 
     let styles = this.getStyles();
 
     return (
       <div>
-        
+
         <h2 style={styles.headline}>Installation</h2>
         <p>
           Material-UI is available as an <a href="https://www.npmjs.org/package/material-ui">npm package</a>.
@@ -157,7 +157,7 @@ const Installation = React.createClass({
         </p>
 
         <h2 style={styles.headline}>Customization</h2>
-        <p>We have implemented a default theme to render all Material-UI components. Styling components to your liking is simple and hassle-free. 
+        <p>We have implemented a default theme to render all Material-UI components. Styling components to your liking is simple and hassle-free.
         This can be achieved in the following two ways:</p>
         <li><a href="#/customization/themes">Use a custom theme to style components</a></li>
         <li><a href="#/customization/inline-styles">Override individual component styles via the style prop</a></li>

docs/src/app/components/pages/get-started/prerequisites.jsx

@@ -57,7 +57,7 @@ const Prerequisites = React.createClass({
         color: Typography.textDarkBlack
       },
       codeExample: {
-        backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
+        backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
         marginBottom: '32px'
       },
       inlineCode: {
@@ -82,45 +82,45 @@ const Prerequisites = React.createClass({
 
           <p>
             If you&#39;re already familiar with single page applications (SPAs) and Node, feel free to skip the prerequisites
-            and head straight to the <a href="#/get-started/installation">installation and usage</a> part. 
+            and head straight to the <a href="#/get-started/installation">installation and usage</a> part.
           </p>
 
           <p>
-            Otherwise, what follows is a quick and brief introduction to SPAs and Node. You&#39;ll find this helpful, 
+            Otherwise, what follows is a quick and brief introduction to SPAs and Node. You&#39;ll find this helpful,
             especially if you have limited prior experience with web development, or if your experience only consists
             of &quot;traditional&quot; websites built using HTML, CSS and some JavaScript.
           </p>
-          
+
           <h3 style={styles.title}>Single Page Applications (SPAs)</h3>
           <p>
-            A long(?) time ago, websites were built using static pages in HTML, with CSS used for styling, and JavaScript 
-            used to support user interactions or for animations. Most client interactions, especially those that acted on data, involved 
-            complete server round-trips: data from the client was sent to the server where it was processed, and then the result 
-            was sent back to the client. Moreover, most of this communication was &quot;blocking.&quot; That is, during these round-trips, 
+            A long(?) time ago, websites were built using static pages in HTML, with CSS used for styling, and JavaScript
+            used to support user interactions or for animations. Most client interactions, especially those that acted on data, involved
+            complete server round-trips: data from the client was sent to the server where it was processed, and then the result
+            was sent back to the client. Moreover, most of this communication was &quot;blocking.&quot; That is, during these round-trips,
             the client was busy and could not be interacted with.
           </p>
 
           <p>
-            With the advent of asynchronous server calls (AJAX), the client could now do other things while it sent data to the 
-            server and awaited a response. However, most client interactions still needed server round-trips, and websites just didn’t 
+            With the advent of asynchronous server calls (AJAX), the client could now do other things while it sent data to the
+            server and awaited a response. However, most client interactions still needed server round-trips, and websites just didn’t
             feel as fluid and responsive as, say, native desktop apps. That&#39;s why SPAs came into being.
           </p>
 
           <p>
-            An SPA is a &quot;website&quot; that essentially consists of a single page. 
-            That is, the whole website lives in a single file (usually a JavaScript file) that is sent from the server to the client once. 
-            Most of the logic to handle 
-            client interactions lives in that single file. Hence, everything that&#39;s necessary to provide a fluid, responsive, and fast web 
-            experience is present in the browser’s memory. This web programming architecture has gained tremendous 
-            traction in the last decade, with many popular JavaScript presentation frameworks geared towards SPAs 
+            An SPA is a &quot;website&quot; that essentially consists of a single page.
+            That is, the whole website lives in a single file (usually a JavaScript file) that is sent from the server to the client once.
+            Most of the logic to handle
+            client interactions lives in that single file. Hence, everything that&#39;s necessary to provide a fluid, responsive, and fast web
+            experience is present in the browser’s memory. This web programming architecture has gained tremendous
+            traction in the last decade, with many popular JavaScript presentation frameworks geared towards SPAs
             (<a href="https://angularjs.org">Angular</a>, <a href="http://emberjs.com/">Ember</a>
             , <a href="http://backbonejs.org">Backbone</a>, <a href="http://facebook.github.io/react/">React</a>, etc.).
           </p>
 
           <p>
-            Including all of the code for a website in a single file creates significant code organization challenges. Thankfully, there 
-            are several tools that allow us to break up 
-            our code into smaller modules (similar to breaking down an object-oriented application into different classes and interfaces) 
+            Including all of the code for a website in a single file creates significant code organization challenges. Thankfully, there
+            are several tools that allow us to break up
+            our code into smaller modules (similar to breaking down an object-oriented application into different classes and interfaces)
             that can be bundled together later. This is where Node comes into play.
           </p>
 
@@ -132,21 +132,21 @@ const Prerequisites = React.createClass({
           </p>
 
           <p>
-            When it was first created, Node was primarily targeted towards developing web servers in JavaScript. This was somewhat radical since JavaScript has traditionally been 
-            restricted to the client. However, over time, web developers recognized the benefits of using Node for tooling and dependency management, and created projects 
+            When it was first created, Node was primarily targeted towards developing web servers in JavaScript. This was somewhat radical since JavaScript has traditionally been
+            restricted to the client. However, over time, web developers recognized the benefits of using Node for tooling and dependency management, and created projects
             like <a href="http://gruntjs.com/">grunt</a>, <a href="http://gulpjs.com/">gulp</a>, <a href="http://browserify.org">Browserify</a>, and <a href="http://webpack.github.io">Webpack</a>.
           </p>
 
           <p>
-            As Node became popular, independent developers and organizations wrote scripts (that ran using Node) to do almost everything web apps-related. Of course, the whole community 
-            could benefit from these “custom Node scripts.” This called for some kind of package repository where anybody could upload their Node scripts, and other developers 
-            could use these scripts in their own projects. <a href="https://www.npmjs.com/">Node Package Manager</a>, better known as “npm,” does exactly that. NPM is a command line tool that, among other 
-            things, can be used to incorporate external JavaScript into one&#39;s own project. Material-UI, for instance, is available as a package through npm. This means that you can 
+            As Node became popular, independent developers and organizations wrote scripts (that ran using Node) to do almost everything web apps-related. Of course, the whole community
+            could benefit from these “custom Node scripts.” This called for some kind of package repository where anybody could upload their Node scripts, and other developers
+            could use these scripts in their own projects. <a href="https://www.npmjs.com/">Node Package Manager</a>, better known as “npm,” does exactly that. NPM is a command line tool that, among other
+            things, can be used to incorporate external JavaScript into one&#39;s own project. Material-UI, for instance, is available as a package through npm. This means that you can
             include material-ui in your project by simply running <code style={styles.inlineCode}>npm install material-ui</code> from your project’s directory, and then using the components of material-ui that you need.
           </p>
 
           <p>
-            That&#39;s it for a quick introduction! If you feel like you need more of Node, we recommend that you consult some quick tutorials online before 
+            That&#39;s it for a quick introduction! If you feel like you need more of Node, we recommend that you consult some quick tutorials online before
             jumping into material-ui. This <a href="http://openmymind.net/2012/2/3/Node-Require-and-Exports/">blog post</a> and <a href="https://www.youtube.com/watch?v=pU9Q6oiQNd0">video</a> are good starting points.
           </p>
 

src/app-canvas.jsx

@@ -38,7 +38,7 @@ const AppCanvas = React.createClass({
   render() {
     let styles = {
       height: '100%',
-      backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
+      backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
       WebkitFontSmoothing: 'antialiased',
     };
 

src/dialog.jsx

@@ -212,7 +212,7 @@ let Dialog = React.createClass({
       main: this.mergeAndPrefix(main, this.props.style),
       content: this.mergeAndPrefix(content, this.props.contentStyle),
       paper: {
-        background: this.state.muiTheme.rawTheme.palette.alternateTextColor,
+        background: this.state.muiTheme.rawTheme.palette.canvasColor,
       },
       body: this.mergeStyles(body, this.props.bodyStyle),
       title: this.mergeStyles(title, this.props.titleStyle),

src/styles/raw-themes/dark-raw-theme.js

@@ -14,6 +14,7 @@ module.exports = {
     accent3Color: Colors.pinkA100,
     textColor: Colors.fullWhite,
     alternateTextColor: '#303030',
+    canvasColor: '#303030',
     borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3),
     disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3),
   },

src/styles/raw-themes/light-raw-theme.js

@@ -20,6 +20,7 @@ module.exports = {
     accent3Color: Colors.grey500,
     textColor: Colors.darkBlack,
     alternateTextColor: Colors.white,
+    canvasColor: Colors.white,
     borderColor: Colors.grey300,
     disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
   },

src/styles/theme-manager.js

@@ -4,7 +4,7 @@ const Extend = require('../utils/extend');
 const update = require('react/lib/update');
 
 module.exports = {
-  
+
   //get the MUI theme corresponding to a raw theme
   getMuiTheme: function (rawTheme) {
     let returnObj = {
@@ -59,14 +59,14 @@ module.exports = {
       },
       leftNav: {
         width: rawTheme.spacing.desktopKeylineIncrement * 4,
-        color: rawTheme.palette.alternateTextColor,
+        color: rawTheme.palette.canvasColor,
       },
       listItem: {
         nestedLevelDepth: 18,
       },
       menu: {
-        backgroundColor: rawTheme.palette.alternateTextColor,
-        containerBackgroundColor: rawTheme.palette.alternateTextColor,
+        backgroundColor: rawTheme.palette.canvasColor,
+        containerBackgroundColor: rawTheme.palette.canvasColor,
       },
       menuItem: {
         dataHeight: 32,
@@ -81,7 +81,7 @@ module.exports = {
         textColor: rawTheme.palette.primary1Color,
       },
       paper: {
-        backgroundColor: rawTheme.palette.alternateTextColor,
+        backgroundColor: rawTheme.palette.canvasColor,
       },
       radioButton: {
         borderColor:  rawTheme.palette.textColor,
@@ -123,7 +123,7 @@ module.exports = {
         actionColor: rawTheme.palette.accent1Color,
       },
       table: {
-        backgroundColor: rawTheme.palette.alternateTextColor,
+        backgroundColor: rawTheme.palette.canvasColor,
       },
       tableHeader: {
         borderColor: rawTheme.palette.borderColor,