Remove everything left from Rebass

package.json

@@ -37,7 +37,6 @@
     "react-icon-base": "^2.0.4",
     "react-icons": "^2.2.1",
     "react-sortable-hoc": "^0.4.5",
-    "rebass": "^0.3.1",
     "request": "^2.79.0"
   },
   "babel": {

src/components/About.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import theme from './theme.js'
-
-import Heading from 'rebass/dist/Heading'
-import Container from 'rebass/dist/Container'
-import Input from 'rebass/dist/Input'
-import Toolbar from 'rebass/dist/Toolbar'
-import NavItem from 'rebass/dist/NavItem'
-import Space from 'rebass/dist/Space'
-
-/** About page with basic infos and links to github repo */
-export class About extends React.Component {
-	render() {
-		return <div>
-			<Toolbar style={{marginRight: 20}}>
-				<NavItem>
-					<Heading>About</Heading>
-				</NavItem>
-			</Toolbar>
-			<Container>
-				<h3>Maputnik – Visual Map Editor for Mapbox GL</h3>
-			  <p>
-					A free and open visual editor for the Mapbox GL styles targeted at developers and map designers. Creating your own custom map is easy with Maputnik.
-				</p>
-				<p>
-				  The source code is openly licensed and available on <a href="https://github.com/maputnik/editor">GitHub</a>.
-				</p>
-			</Container>
-    </div>
-	}
-}

src/components/Layout.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ScrollContainer from './ScrollContainer'
 
-import theme from '../config/rebass'
+import theme from '../config/theme'
 import colors from '../config/colors'
 
 export default class Layout extends React.Component {
@@ -13,13 +13,11 @@ export default class Layout extends React.Component {
   }
 
   static childContextTypes = {
-    rebass: React.PropTypes.object,
     reactIconBase: React.PropTypes.object
   }
 
   getChildContext() {
     return {
-      rebass: theme,
       reactIconBase: { size: 20 }
     }
   }

src/components/Toolbar.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import FileReaderInput from 'react-file-reader-input'
 
-import Button from 'rebass/dist/Button'
-
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
 import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
@@ -27,6 +25,11 @@ const InlineBlock = props => <div style={{display: "inline-block", ...props.styl
   {props.children}
 </div>
 
+const ToolbarAction = props => <a onClick={props.onClick}
+  style={{ display: "inline-block", ...props.style }}>
+  {props.children}
+</a>
+
 export default class Toolbar extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
@@ -62,10 +65,10 @@ export default class Toolbar extends React.Component {
   saveButton() {
     if(this.props.mapStyle.layers.length > 0) {
       return <InlineBlock>
-        <Button onClick={this.props.onStyleSave} big={true}>
+        <ToolbarAction onClick={this.props.onStyleSave} big={true}>
           <MdSave />
           Save
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
     }
     return null
@@ -73,10 +76,10 @@ export default class Toolbar extends React.Component {
 
   downloadButton() {
     return <InlineBlock>
-      <Button onClick={this.props.onStyleDownload} big={true}>
+      <ToolbarAction onClick={this.props.onStyleDownload} big={true}>
         <MdFileDownload />
         Download
-      </Button>
+      </ToolbarAction>
     </InlineBlock>
   }
 
@@ -111,48 +114,48 @@ export default class Toolbar extends React.Component {
         toggle={() => this.toggleSettings.bind(this)}
       />
       <InlineBlock>
-        <Button style={{
+        <ToolbarAction style={{
           width: 180,
           textAlign: 'left',
           backgroundColor: colors.black
         }}>
           <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
           <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
       <InlineBlock>
         <FileReaderInput onChange={this.onUpload.bind(this)}>
-          <Button big={true}>
+          <ToolbarAction>
             <MdOpenInBrowser />
             Open
-          </Button>
+          </ToolbarAction>
         </FileReaderInput>
       </InlineBlock>
       {this.downloadButton()}
       {this.saveButton()}
       <InlineBlock>
-        <Button big={true} onClick={this.toggleTilesets.bind(this)}>
+        <ToolbarAction onClick={this.toggleTilesets.bind(this)}>
           <MdLayers />
           Tilesets
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
       <InlineBlock>
-        <Button big={true} onClick={this.toggleSettings.bind(this)}>
+        <ToolbarAction onClick={this.toggleSettings.bind(this)}>
           <MdSettings />
           Style Settings
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
       <InlineBlock>
-        <Button big={true} onClick={this.toggleSettings.bind(this)}>
+        <ToolbarAction onClick={this.toggleSettings.bind(this)}>
           <MdFindInPage />
           Inspect
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
       <InlineBlock>
-        <Button big={true} onClick={this.props.onOpenAbout}>
+        <ToolbarAction onClick={this.props.onOpenAbout}>
           <MdHelpOutline />
           Help
-        </Button>
+        </ToolbarAction>
       </InlineBlock>
     </div>
   }

src/components/fields/SpecField.jsx

@@ -9,7 +9,6 @@ import ColorField from './ColorField'
 import StringField from './StringField'
 
 import input from '../../config/input.js'
-import theme from '../../config/rebass.js'
 
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')

src/components/layers/LayerEditor.jsx

@@ -6,7 +6,8 @@ import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
 
 import layout from '../../config/layout.json'
-import theme from '../../config/rebass.js'
+import { margins, fontSizes } from '../../config/scales'
+import colors from '../../config/colors'
 
 class UnsupportedLayer extends React.Component {
   render() {
@@ -62,8 +63,8 @@ export default class LayerEditor extends React.Component {
   getChildContext () {
     return {
       reactIconBase: {
-        size: theme.fontSizes[4],
+        size: fontSizes[4],
-        color: theme.colors.lowgray,
+        color: colors.lowgray,
       }
     }
   }
@@ -142,7 +143,7 @@ export default class LayerEditor extends React.Component {
     }
 
     return <div style={{
-        padding: theme.scale[0],
+        padding: margins[0],
     }}>
       {propertyGroups}
       {dataGroup}

src/components/modals/TilesetsModal.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import Modal from './Modal'
 
 import publicTilesets from '../../config/tilesets.json'
-import theme from '../../config/rebass'
 import colors from '../../config/colors'
+import { margins } from '../../config/scales'
 
 class TilesetsModal extends React.Component {
   static propTypes = {
@@ -20,13 +20,8 @@ class TilesetsModal extends React.Component {
   render() {
     const tilesetOptions = publicTilesets.map(tileset => {
       return <div key={tileset.id} style={{
-        padding: theme.scale[0],
+        padding: margins[0],
         borderBottom: 1,
-        borderTop: 1,
-        borderLeft: 2,
-        borderRight: 0,
-        borderStyle: "solid",
-        borderColor: theme.borderColor,
       }}>
         #{tileset.id}
         <br />

src/components/sources/editor.jsx

@@ -1,97 +0,0 @@
-import React from 'react'
-
-import Input from 'rebass/dist/Input'
-import Toolbar from 'rebass/dist/Toolbar'
-import NavItem from 'rebass/dist/NavItem'
-import Space from 'rebass/dist/Space'
-
-import Collapse from 'react-collapse'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-import theme from '../theme.js'
-
-
-class UnsupportedSource extends React.Component {
-	render() {
-		return <div></div>
-	}
-}
-
-class VectorSource extends React.Component {
-	static propTypes = {
-		source: React.PropTypes.object.isRequired,
-		onSourceChanged: React.PropTypes.func.isRequired,
-  }
-
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	render() {
-		return <div>
-			<Input
-				onChange={e => this.props.onSourceChanged(this.props.source.set('url', e.target.value))}
-				name="url" label="TileJSON url"
-				value={this.props.source.get("url")}
-				/>
-			<Input name="minzoom" label="Minimum zoom level" value={this.props.source.get("minzoom")} />
-			<Input name="maxzoom" label="Maximum zoom level" value={this.props.source.get("maxzoom")} />
-		</div>
-	}
-}
-
-export class SourceEditor extends React.Component {
-	static propTypes = {
-		sourceId: React.PropTypes.string.isRequired,
-		source: React.PropTypes.object.isRequired,
-		onSourceChanged: React.PropTypes.func.isRequired,
-	}
-
-	constructor(props) {
-		super(props);
-			this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-			this.state = {
-				isOpened: false,
-		}
-	}
-
-	toggleLayer() {
-		this.setState({isOpened: !this.state.isOpened})
-	}
-
-	sourceFromType(type) {
-		if (type === "vector") {
-			return <VectorSource
-				onSourceChanged={s => this.props.onSourceChanged(this.props.sourceId, s)}
-				source={this.props.source}
-			/>
-		}
-		return <UnsupportedSource />
-	}
-
-	render() {
-		return <div style={{
-				padding: theme.scale[0],
-				borderBottom: 1,
-				borderTop: 1,
-				borderLeft: 2,
-				borderRight: 0,
-				borderStyle: "solid",
-				borderColor: theme.borderColor,
-			}}>
-			<Toolbar onClick={this.toggleLayer.bind(this)}>
-				<NavItem style={{fontWeight: 400}}>
-					#{this.props.sourceId}
-				</NavItem>
-				<Space auto x={1} />
-			</Toolbar>
-			<Collapse isOpened={this.state.isOpened}>
-				<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-				{this.sourceFromType(this.props.source.get('type'))}
-				</div>
-			</Collapse>
-		</div>
-	}
-}
-

src/components/sources/list.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import Heading from 'rebass/dist/Heading'
-import Toolbar from 'rebass/dist/Toolbar'
-import NavItem from 'rebass/dist/NavItem'
-import Space from 'rebass/dist/Space'
-
-import { SourceEditor } from './editor.jsx'
-import scrollbars from '../scrollbars.scss'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-// List of collapsible layer editors
-export class SourceList extends React.Component {
-	static propTypes = {
-		sources: React.PropTypes.object.isRequired,
-		onSourcesChanged: React.PropTypes.func.isRequired,
-	}
-
-	constructor(props) {
-		super(props)
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	onSourceChanged(sourceId, changedSource) {
-		const changedSources = this.props.sources.set(sourceId, changedSource)
-		this.props.onSourcesChanged(changedSources)
-	}
-
-	render() {
-		const sourceEditors = this.props.sources.map((source, sourceId) => {
-			return <SourceEditor
-				key={sourceId}
-				sourceId={sourceId}
-				source={source}
-				onSourceChanged={this.onSourceChanged.bind(this)}
-			/>
-		}).toIndexedSeq()
-
-		return <div>
-			<Toolbar style={{marginRight: 20}}>
-				<NavItem>
-					<Heading>Sources</Heading>
-				</NavItem>
-				<Space auto x={1} />
-			</Toolbar>
-			{sourceEditors}
-		</div>
-	}
-}

src/config/input.js

@@ -1,8 +1,9 @@
-import theme from './rebass.js'
+import colors from './colors'
+import { margins, fontSizes } from './scales'
 
 const base = {
   display: 'inline-block',
-  fontSize: theme.fontSizes[5],
+  fontSize: fontSizes[5],
   lineHeight: 2,
   paddingLeft: 5,
   paddingRight: 5,
@@ -11,28 +12,28 @@ const base = {
 const label = {
   ...base,
   width: '40%',
-  color: theme.colors.lowgray,
+  color: colors.lowgray,
   userSelect: 'none',
 }
 
 const property = {
-  marginTop: theme.scale[2],
+  marginTop: margins[2],
-  marginBottom: theme.scale[2],
+  marginBottom: margins[2],
 }
 
 const input = {
   ...base,
   border: 'none',
   width: '47%',
-  backgroundColor: theme.colors.gray,
+  backgroundColor: colors.gray,
-  color: theme.colors.lowgray,
+  color: colors.lowgray,
 }
 
 const checkbox = {
   ...base,
   border: '1px solid rgb(36, 36, 36)',
-  backgroundColor: theme.colors.gray,
+  backgroundColor: colors.gray,
-  color: theme.colors.lowgray,
+  color: colors.lowgray,
 }
 
 const select = {

src/config/rebass.js

@@ -1,66 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const border = {
-  borderColor: colors.black,
-  borderRadius: 0,
-}
-
-const dark = {
-  name: 'Dark',
-  color: colors.white,
-  fontFamily: 'Roboto, sans-serif',
-  scale: margins,
-  fontSizes: fontSizes,
-  colors,
-  inverted: colors.midGray,
-  ...border,
-
-  Block: {
-    backgroundColor: colors.gray,
-    ...border,
-    borderLeft: 0,
-    borderRight: 0,
-    marginBottom: 0,
-    paddingBottom: 0,
-  },
-  PanelHeader: {
-    marginRight: -10,
-    marginBottom: 0,
-    fontSize: fontSizes[5],
-    fontWeight: 400,
-    color: colors.white,
-  },
-  Panel: {
-    backgroundColor: colors.gray,
-  },
-  Button: {
-    color: '#00d9f7',
-  },
-  Menu: {
-    color: '#00d9f7',
-    backgroundColor: '#000'
-  },
-  Message: {
-    color: '#111',
-    opacity: 15/16
-  },
-  Header: {
-    fontWeight: 400,
-  },
-  ButtonCircle : {
-  },
-  Toolbar: {
-    fontWeight: 400,
-    minHeight: margins[3]
-  },
-  Label: {
-    fontWeight: 300,
-  },
-  Input: {
-    fontWeight: 300,
-    fontSize: fontSizes[5],
-  }
-}
-
-export default dark

src/config/theme.js

@@ -0,0 +1,9 @@
+import colors from './colors'
+import { margins, fontSizes } from './scales'
+
+const dark = {
+  color: colors.white,
+  fontFamily: 'Roboto, sans-serif',
+}
+
+export default dark

webpack.production.config.js

@@ -40,7 +40,6 @@ module.exports = {
         "react-file-reader-input",
         //TODO: Icons raise multi vendor errors?
         //"react-icons",
-        "rebass",
         // Open Layers
         'openlayers',
         'ol-mapbox-style'