Remove last style configs in JS

src/components/AppLayout.jsx

@@ -1,10 +1,6 @@
 import React from 'react'
 import ScrollContainer from './ScrollContainer'
 
-import theme from '../config/theme'
-import colors from '../config/colors'
-import { fontSizes } from '../config/scales'
-
 class AppLayout extends React.Component {
   static propTypes = {
     toolbar: React.PropTypes.element.isRequired,
@@ -20,7 +16,7 @@ class AppLayout extends React.Component {
 
   getChildContext() {
     return {
-      reactIconBase: { size: fontSizes[3] }
+      reactIconBase: { size: 14 }
     }
   }
 

src/components/Button.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import classnames from 'classnames'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
 
 class Button extends React.Component {
   static propTypes = {

src/components/Heading.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { fontSizes, margins } from '../config/scales'
-
-class Heading extends React.Component {
-  static propTypes = {
-    level: React.PropTypes.number.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const headingProps = {
-      style: {
-        fontWeight: 400,
-        fontSize: fontSizes[this.props.level - 1],
-        marginBottom: margins[1],
-        ...this.props.style
-      }
-    }
-
-    switch(this.props.level) {
-      case 1: return <h1 {...headingProps}>{this.props.children}</h1>
-      case 2: return <h2 {...headingProps}>{this.props.children}</h2>
-      case 3: return <h3 {...headingProps}>{this.props.children}</h3>
-      case 4: return <h4 {...headingProps}>{this.props.children}</h4>
-      case 5: return <h5 {...headingProps}>{this.props.children}</h5>
-      default: return <h6 {...headingProps}>{this.props.children}</h6>
-    }
-  }
-}
-
-
-export default Heading

src/components/MessagePanel.jsx

@@ -1,7 +1,4 @@
 import React from 'react'
-import Paragraph from './Paragraph'
-import colors from '../config/colors'
-import { fontSizes, margins } from '../config/scales'
 
 class MessagePanel extends React.Component {
   static propTypes = {
@@ -10,30 +7,15 @@ class MessagePanel extends React.Component {
   }
 
   render() {
-    const paragraphStyle = {
-      margin: 0,
-      lineHeight: 1.2,
-    }
-
     const errors = this.props.errors.map((m, i) => {
-      return <Paragraph key={i}
+      return <p className="maputnik-message-panel-error">{m}</p>
-        style={{
-          ...paragraphStyle,
-          color: colors.red,
-        }}>{m}</Paragraph>
     })
 
     const infos = this.props.infos.map((m, i) => {
-      return <Paragraph key={i}
+      return <p key={i}>{m}</p>
-        style={{
-          ...paragraphStyle,
-          color: colors.lowgray,
-        }}>{m}</Paragraph>
     })
 
-    return <div style={{
+    return <div className="maputnik-message-panel">
-      padding: margins[1],
-    }}>
       {errors}
       {infos}
     </div>

src/components/Paragraph.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
-
-const Paragraph = (props) => <p style={{
-  color: colors.lowgray,
-  fontSize: fontSizes[5],
-  ...props.style
-}}>
-  {props.children}
-</p>
-
-export default Paragraph

src/components/fields/PropertyGroup.jsx

@@ -1,9 +1,6 @@
 import React from 'react'
 
 import ZoomSpecField from './ZoomSpecField'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 /** Extract field spec by {@fieldName} from the {@layerType} in the

src/components/inputs/ArrayInput.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 
-import { margins } from '../../config/scales.js'
-
 class ArrayInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.array,

src/components/layers/JSONEditor.jsx

@@ -5,9 +5,6 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/lib/codemirror.css'
 import '../../codemirror-maputnik.css'

src/components/layers/LayerList.jsx

@@ -4,8 +4,6 @@ import cloneDeep from 'lodash.clonedeep'
 import LayerListItem from './LayerListItem'
 
 import style from '../../libs/style.js'
-import { margins } from '../../config/scales.js'
-
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
 
 const layerListPropTypes = {

src/components/layers/LayerListItem.jsx

@@ -11,10 +11,6 @@ import LayerIcon from '../icons/LayerIcon'
 import LayerEditor from './LayerEditor'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
-import colors from '../../config/colors.js'
-import { fontSizes, margins } from '../../config/scales.js'
-
-
 @SortableHandle
 class LayerTypeDragHandle extends React.Component {
   static propTypes = LayerIcon.propTypes
@@ -24,9 +20,9 @@ class LayerTypeDragHandle extends React.Component {
       {...this.props}
       style={{
         cursor: 'move',
-        width: fontSizes[4],
+        width: 14,
-        height: fontSizes[4],
+        height: 14,
-        paddingRight: margins[0],
+        paddingRight: 3,
       }}
     />
   }
@@ -90,7 +86,7 @@ class LayerListItem extends React.Component {
 
   getChildContext() {
     return {
-      reactIconBase: { size: fontSizes[4] }
+      reactIconBase: { size: 14 }
     }
   }
 

src/components/map/MapboxGlMap.jsx

@@ -5,7 +5,6 @@ import MapboxInspect from 'mapbox-gl-inspect'
 import FeatureLayerPopup from './FeatureLayerPopup'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-import colors from '../../config/colors'
 import style from '../../libs/style.js'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
@@ -28,7 +27,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
     "id": "background",
     "type": "background",
     "paint": {
-      "background-color": colors.black,
+      "background-color": '#1c1f24',
     }
   }
 

src/components/modals/AddModal.jsx

@@ -5,7 +5,6 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import Modal from './Modal'
-import colors from '../../config/colors'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
 import LayerIdBlock from '../layers/LayerIdBlock'

src/components/modals/OpenModal.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import Modal from './Modal'
-import Heading from '../Heading'
 import Button from '../Button'
-import Paragraph from '../Paragraph'
 import FileReaderInput from 'react-file-reader-input'
 import request from 'request'
 

src/components/modals/SourcesModal.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import Modal from './Modal'
 import Button from '../Button'
-import Paragraph from '../Paragraph'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/config/colors.js

@@ -1,29 +0,0 @@
-const baseColors = {
-  black: '#1c1f24',
-  gray: '#26282e',
-  midgray: '#36383e',
-  lowgray: '#8e8e8e',
-
-  white: '#f0f0f0',
-  blue: '#00d9f7',
-  green: '#B4C7AD',
-  orange: '#fb3',
-  red: '#cf4a4a',
-}
-
-const themeColors = {
-  primary: baseColors.gray,
-  secondary: baseColors.midgray,
-  default: baseColors.gray,
-  info: baseColors.blue,
-  success: baseColors.green,
-  warning: baseColors.orange,
-  error: baseColors.red
-}
-
-const colors = {
-  ...baseColors,
-  ...themeColors
-}
-
-export default colors

src/config/scales.js

@@ -1,2 +0,0 @@
-export const margins = [3, 5, 10, 30, 40]
-export const fontSizes = [24, 20, 18, 16, 14, 12]

src/config/theme.js

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

src/styles/_components.scss

@@ -115,3 +115,12 @@
 .maputnik-space {
 	flex-grow: 1;
 }
+
+// MESSAGE PANEL
+.maputnik-message-panel {
+  padding: $margin-2;
+
+  &-error  {
+    color: $color-red;
+  }
+}

src/styles/index.scss

@@ -3,6 +3,7 @@ $color-gray: #26282e;
 $color-midgray: #36383e;
 $color-lowgray: #8e8e8e;
 $color-white: #f0f0f0;
+$color-red: #cf4a4a;
 $margin-1: 3px;
 $margin-2: 5px;
 $margin-3: 10px;