Remove JS input config

src/components/fields/ColorField.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 
-import input from '../../config/input.js'
-
 function formatColor(color) {
   const rgb = color.rgb
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`

src/components/fields/DocLabel.jsx

@@ -1,7 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins, fontSizes } from '../../config/scales.js'
 
 export default class DocLabel extends React.Component {
   static propTypes = {
@@ -10,45 +7,16 @@ export default class DocLabel extends React.Component {
       React.PropTypes.string
     ]).isRequired,
     doc: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object,
-    cursorTargetStyle: React.PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { showDoc: false }
   }
 
   render() {
-    return <label
-      style={{
-        ...this.props.style
-      }}
-      className="maputnik-doc-wrapper"
-    >
-      <span
-        onMouseOver={e => this.setState({showDoc: true})}
-        onMouseOut={e => this.setState({showDoc: false})}
-        className="maputnik-doc-target"
-        style={this.props.cursorTargetStyle}
-      >
-        {this.props.label}
-      </span>
-      <div style={{
-        backgroundColor: colors.gray,
-        padding: margins[1],
-        fontSize: 10,
-        position: 'absolute',
-        top: 20,
-        left: 0,
-        width: 120,
-        display: this.state.showDoc ? null : 'none',
-        zIndex: 3,
-      }}
-        className="maputnik-doc-popup"
-      >
-        {this.props.doc}
-      </div>
+    return <label className="maputnik-doc-wrapper">
+      <div className="maputnik-doc-target">
+        <span>{this.props.label}</span>
+        <div className="maputnik-doc-popup">
+          {this.props.doc}
+        </div>
+      </div >
     </label>
   }
 }

src/components/fields/SpecField.jsx

@@ -14,8 +14,6 @@ import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
-import input from '../../config/input.js'
-
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
   if(label.length > 0) {

src/components/fields/ZoomSpecField.jsx

@@ -12,8 +12,6 @@ import DeleteIcon from 'react-icons/lib/md/delete'
 import FunctionIcon from 'react-icons/lib/md/functions'
 
 import capitalize from 'lodash.capitalize'
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
 
 function isZoomField(value) {
   return typeof value === 'object' && value.stops

src/components/inputs/ArrayInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 

src/components/inputs/AutocompleteInput.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
+import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+
 
 class AutocompleteInput extends React.Component {
   static propTypes = {
@@ -17,20 +16,15 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
+
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={props.items} />
+
     return <Autocomplete
       wrapperProps={{
         className: "maputnik-autocomplete",
         style: null
       }}
-      menuStyle={{
-        border: 'none',
-        padding: '2px 0',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%',
-        background: colors.gray,
-        zIndex: 3,
-      }}
+      renderMenu={AutocompleteMenu}
       inputProps={{
         className: "maputnik-string"
       }}
@@ -42,15 +36,10 @@ class AutocompleteInput extends React.Component {
       renderItem={(item, isHighlighted) => (
         <div
           key={item[0]}
-          style={{
-            userSelect: 'none',
-            color: colors.lowgray,
-            cursor: 'default',
-            background: isHighlighted ? colors.midgray : colors.gray,
-            padding: margins[0],
-            fontSize: fontSizes[5],
-            zIndex: 3,
-          }}
+          className={classnames({
+            "maputnik-autocomplete-menu-item": true,
+            "maputnik-autocomplete-menu-item-selected": isHighlighted,
+          })}
         >
          {item[1]}
         </div>

src/components/inputs/CheckboxInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class CheckboxInput extends React.Component {
   static propTypes = {

src/components/inputs/FontInput.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 //TODO: Query available font stack dynamically
 import fontStacks from '../../config/fontstacks.json'
@@ -35,17 +33,10 @@ class FontInput extends React.Component {
         value={value}
         options={this.props.fonts.map(f => [f, f])}
         onChange={this.changeFont.bind(this, i)}
-        wrapperStyle={{
-          display: 'block',
-          marginBottom: i == this.values.length - 1 ? 0 : margins[2],
-        }}
       />
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style
-    }}>
+    return <div className="maputnik-font">
       {inputs}
     </div>
   }

src/components/inputs/IconInput.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 
 class IconInput extends React.Component {

src/components/inputs/InputBlock.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import classnames from 'classnames'
-import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */

src/components/inputs/MultiButtonInput.jsx

@@ -1,16 +1,11 @@
-
 import React from 'react'
+import classnames from 'classnames'
 import Button from '../Button'
 
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-import input from '../../config/input.js'
-
 class MultiButtonInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string.isRequired,
     options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,
   }
 
@@ -25,21 +20,13 @@ class MultiButtonInput extends React.Component {
       return <Button
         key={val}
         onClick={e => this.props.onChange(val)}
-        style={{
-          marginRight: margins[0],
-          backgroundColor: val === selectedValue ? colors.midgray : colors.gray,
-        }}
+        className={classnames({"maputnik-button-selected": val === selectedValue})}
       >
         {label}
       </Button>
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style,
-    }}
-      className="maputnik-multibutton"
-    >
+    return <div className="maputnik-multibutton">
       {buttons}
     </div>
   }

src/components/inputs/NumberInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class NumberInput extends React.Component {
   static propTypes = {

src/components/inputs/SelectInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class SelectInput extends React.Component {
   static propTypes = {

src/components/inputs/StringInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class StringInput extends React.Component {
   static propTypes = {