use mui theme for colors

index.js

@@ -8,6 +8,17 @@ import jss from 'jss';
 import preset from 'jss-preset-default';
 import normalize from 'normalize-jss';
 import queryString from 'query-string';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import { blue400, blue500, blue700 } from 'material-ui/styles/colors';
+
+const muiTheme = getMuiTheme({
+  palette: {
+    primary1Color: blue500,
+    primary2Color: blue700,
+    primary3Color: blue400,
+    accent1Color: blue500,
+  }
+});
 
 injectTapEventPlugin();
 
@@ -25,7 +36,7 @@ jss.createStyleSheet({
 const { file } = queryString.parse(location.search);
 
 render((
-  <MuiThemeProvider>
+  <MuiThemeProvider muiTheme={muiTheme}>
     <Interface file={file} name="doodle"/>
   </MuiThemeProvider>
 ), document.getElementById('app'));

src/interface/FormComponents.js

@@ -4,11 +4,11 @@ import _ from 'lodash';
 import injectSheet from 'react-jss';
 import MaterialUISelectField from 'material-ui/SelectField'
 import MaterialUICheckbox from 'material-ui/Checkbox';
-import { blue500, grey500 } from 'material-ui/styles/colors';
 import TextFieldIcon from 'material-ui-textfield-icon';
 import RefreshIcon from 'material-ui-icons/Refresh';
+import muiThemeable from 'material-ui/styles/muiThemeable';
 
-const contextTypes = {
+export const contextTypes = {
   settings: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
@@ -18,64 +18,69 @@ const contextTypes = {
   activePrinter: PropTypes.string
 };
 const propTypes = {
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
+  muiTheme: PropTypes.object.isRequired
 };
 
-export const SelectField = (props, context) => (
+export const _SelectField = ({ name, muiTheme, ...props }, context) => (
   <MaterialUISelectField
     {...props}
     disabled={context.disabled}
-    value={_.get(context, props.name)}
-    onChange={(event, index, value) => context.onChange(props.name, value)}
+    value={_.get(context, name)}
+    onChange={(event, index, value) => context.onChange(name, value)}
   />
 );
-SelectField.contextTypes = contextTypes;
-SelectField.propTypes = propTypes;
+_SelectField.contextTypes = contextTypes;
+_SelectField.propTypes = propTypes;
+export const SelectField = muiThemeable()(_SelectField);
 
-export const TextField = (props, context) => (
+const _TextField = ({ name, muiTheme, ...props }, context) => (
   <TextFieldIcon
     {...props}
-    icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
-    floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
+    icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
+    floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
     disabled={context.disabled}
-    value={_.get(context, props.name)}
-    onChange={(event, value) => context.onChange(props.name, value)}
+    value={_.get(context, name)}
+    onChange={(event, value) => context.onChange(name, value)}
   />
 );
-TextField.contextTypes = contextTypes;
-TextField.propTypes = propTypes;
+_TextField.contextTypes = contextTypes;
+_TextField.propTypes = propTypes;
+export const TextField = muiThemeable()(_TextField);
 
-export const NumberField = (props, context) => (
+const _NumberField = ({ name, min, max, muiTheme, ...props }, context) => (
   <TextFieldIcon
     {...props}
     type="number"
-    icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
-    floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
+    icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
+    floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
     disabled={context.disabled}
-    value={_.get(context, props.name.toString())}
+    value={_.get(context, name.toString())}
     onChange={(event, value) => {
       value = parseFloat(value);
-      if (props.min) value = Math.max(value, props.min);
-      if (props.max) value = Math.min(value, props.max);
-      context.onChange(props.name, value);
+      if (min) value = Math.max(value, min);
+      if (max) value = Math.min(value, max);
+      context.onChange(name, value);
     }}
   />
 );
-NumberField.contextTypes = contextTypes;
-NumberField.propTypes = propTypes;
+_NumberField.contextTypes = contextTypes;
+_NumberField.propTypes = propTypes;
+export const NumberField = muiThemeable()(_NumberField);
 
-export const Checkbox = (props, context) => (
+export const _Checkbox = ({ name, muiTheme, ...props }, context) => (
   <span style={{ display: 'flex', position: 'relative' }}>
     <MaterialUICheckbox
       {...props}
       style={{ display: 'block' }}
-      iconStyle={{ fill: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
+      iconStyle={{ fill: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
       disabled={context.disabled}
-      checked={_.get(context, props.name)}
-      onCheck={(event, value) => context.onChange(props.name, value)}
+      checked={_.get(context, name)}
+      onCheck={(event, value) => context.onChange(name, value)}
     />
-    {context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
+    {context.advancedFields.includes(name) && <RefreshIcon onTouchTap={() => context.onChange(name, null)} />}
   </span>
 );
-Checkbox.contextTypes = contextTypes;
-Checkbox.propTypes = propTypes;
+_Checkbox.contextTypes = contextTypes;
+_Checkbox.propTypes = propTypes;
+export const Checkbox = muiThemeable()(_Checkbox);

src/interface/Settings.js

@@ -5,7 +5,7 @@ import { Tabs, Tab } from 'material-ui/Tabs';
 import MenuItem from 'material-ui/MenuItem';
 import injectSheet from 'react-jss';
 import { SelectField, TextField, NumberField, Checkbox } from './FormComponents.js';
-import { grey800, cyan500, red500 } from 'material-ui/styles/colors';
+import { grey800, red500 } from 'material-ui/styles/colors';
 import Divider from 'material-ui/Divider';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
@@ -319,7 +319,7 @@ class Settings extends React.Component {
           </SelectField>
           {localStorage.active && <SettingsIcon
             onTouchTap={this.openManagePrinterDialog}
-            style={{ margin: '0 10px', cursor: 'pointer' }}
+            style={{ fill: grey800, marginLeft: '10px', cursor: 'pointer' }}
           />}
         </div>
         <SelectField name="settings.material" floatingLabelText="Material" fullWidth>
@@ -328,7 +328,7 @@ class Settings extends React.Component {
           ))}
         </SelectField>
         <h3>Printer Setup</h3>
-        <Tabs inkBarStyle={{ backgroundColor: cyan500 }}>
+        <Tabs>
           <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Basic">
             <div>
               <SelectField name="settings.quality" floatingLabelText="Quality" fullWidth>

src/interface/index.js

@@ -22,6 +22,7 @@ import JSONToSketchData from 'doodle3d-core/shape/JSONToSketchData';
 import createSceneData from 'doodle3d-core/d3/createSceneData.js';
 import { generateExportMesh } from 'doodle3d-core/utils/exportUtils.js';
 import { Matrix4 } from 'three/src/math/Matrix4.js';
+import muiThemeable from 'material-ui/styles/muiThemeable';
 
 const MAX_FULLSCREEN_WIDTH = 720;
 
@@ -96,7 +97,8 @@ class Interface extends React.Component {
     classes: PropTypes.objectOf(PropTypes.string),
     pixelRatio: PropTypes.number.isRequired,
     onCancel: PropTypes.func,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    muiTheme: PropTypes.object.isRequired
   };
 
   static defaultProps = {
@@ -383,4 +385,4 @@ class Interface extends React.Component {
   }
 }
 
-export default injectSheet(styles)(Interface);
+export default muiThemeable()(injectSheet(styles)(Interface));

src/interface/utils.js

@@ -17,6 +17,7 @@ import printerSettings from '../settings/printer.yml';
 import materialSettings from '../settings/material.yml';
 import qualitySettings from '../settings/quality.yml';
 import { sliceGeometry } from '../slicer.js';
+import { grey800, red500 } from 'material-ui/styles/colors';
 import React from 'react';
 import PropTypes from 'prop-types';
 import fileSaver from 'file-saver';
@@ -35,7 +36,7 @@ export function centerGeometry(mesh) {
   mesh.geometry.applyMatrix(new Matrix4().makeTranslation(-center.x, -center.y, -center.z));
 }
 
-export function createScene({ pixelRatio }) {
+export function createScene({ pixelRatio, muiTheme }) {
   const scene = new Scene();
 
   const camera = new PerspectiveCamera(50, 1, 1, 10000);
@@ -53,11 +54,11 @@ export function createScene({ pixelRatio }) {
   const light = new AmbientLight(0x656565);
   scene.add(light);
 
-  const material = new MeshPhongMaterial({ color: 0x2194ce, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 });
+  const material = new MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 });
   const mesh = new Mesh(new THREE.Geometry(), material);
   scene.add(mesh);
 
-  const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), 0x72bcd4);
+  const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), muiTheme.palette.primary3Color);
   scene.add(box);
 
   let renderer = new WebGLRenderer({ alpha: true, antialias: true });