All important stuff is in CSS now

src/components/inputs/CheckboxInput.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import input from '../../config/input.js'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
 
 class CheckboxInput extends React.Component {
   static propTypes = {
@@ -11,59 +9,16 @@ class CheckboxInput extends React.Component {
   }
 
   render() {
-    const styles = {
-      root: {
-        ...input.base,
-        lineHeight: 0.7,
-        padding: 0,
-        position: 'relative',
-        textAlign: 'center ',
-        verticalAlign: 'middle',
-        cursor: 'pointer'
-      },
-      input: {
-        position: 'absolute',
-        zIndex: -1,
-        opacity: 0
-      },
-      box: {
-        display: 'inline-block',
-        textAlign: 'center ',
-        height: 15,
-        width: 15,
-        marginRight: margins[1],
-        marginBottom: null,
-        backgroundColor: colors.gray,
-        borderRadius: 2,
-        borderStyle: 'solid',
-        borderWidth: 2,
-        borderColor: colors.gray,
-        transition: 'background-color .1s ease-out'
-      },
-      icon: {
-        display: this.props.value ? null : 'none',
-        width: '75%',
-        height: '75%',
-        marginTop: 1,
-        fill: colors.lowgray
-      }
-    }
-
-    return <label style={styles.root}>
+    return <label className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
-        style={{
-          ...styles.input,
-          ...this.props.style,
-        }}
+        style={this.props.style}
         onChange={e => this.props.onChange(!this.props.value)}
         checked={this.props.value}
       />
-      <div style={styles.box}>
-        <svg
-          viewBox='0 0 32 32'
-          style={styles.icon}>
+      <div className="maputnik-checkbox-box">
+        <svg className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>

src/components/inputs/InputBlock.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
-import { margins } from '../../config/scales'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
@@ -29,9 +28,7 @@ class InputBlock extends React.Component {
   }
 
   render() {
-    return <div style={{
-      ...this.props.style,
-    }}
+    return <div style={this.props.style}
       className="maputnik-input-block"
       >
       {this.props.doc &&
@@ -44,11 +41,7 @@ class InputBlock extends React.Component {
       />
       }
       {!this.props.doc &&
-      <label
-        style={{
-          ...input.label,
-          width: '50%',
-      }}>
+      <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
       }

src/components/inputs/SelectInput.jsx

@@ -18,10 +18,7 @@ class SelectInput extends React.Component {
 
     return <select
       className="maputnik-select"
-      style={{
-        ...input.select,
-        ...this.props.style
-      }}
+      style={this.props.style}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >