Restructure and rename components

src/config/colors.js

@@ -0,0 +1,29 @@
+const baseColors = {
+  black: '#1c1f24',
+  gray: '#26282e',
+  midgray: '#36383e',
+  lowgray: '#8e8e8e',
+
+  white: '#fff',
+  blue: '#00d9f7',
+  green: '#B4C7AD',
+  orange: '#fb3',
+  red: '#f04',
+}
+
+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/input.js

@@ -0,0 +1,50 @@
+import theme from './rebass.js'
+
+const base = {
+  display: 'inline-block',
+  fontSize: theme.fontSizes[5],
+  lineHeight: 2,
+  paddingLeft: 5,
+  paddingRight: 5,
+}
+
+const label = {
+  ...base,
+  width: '40%',
+  color: theme.colors.lowgray,
+  userSelect: 'none',
+}
+
+const property = {
+  marginTop: theme.scale[2],
+  marginBottom: theme.scale[2],
+}
+
+const input = {
+  ...base,
+  border: 'none',
+  width: '47%',
+  backgroundColor: theme.colors.gray,
+  color: theme.colors.lowgray,
+}
+
+const checkbox = {
+  ...base,
+  border: '1px solid rgb(36, 36, 36)',
+  backgroundColor: theme.colors.gray,
+  color: theme.colors.lowgray,
+}
+
+const select = {
+  ...input,
+  width: '51%',
+  height: '2.3em',
+}
+
+export default {
+  label,
+  select,
+  input,
+  property,
+  checkbox,
+}

src/config/layout.json

@@ -0,0 +1,116 @@
+{
+    "line": {
+      "groups": [
+        {
+          "title": "Paint",
+          "fields": [
+            "line-opacity",
+            "line-color",
+            "line-width",
+            "line-offset",
+            "line-blur",
+            "line-pattern"
+          ]
+        },
+        {
+          "title": "Secondary",
+          "fields": [
+            "line-translate",
+            "line-translate-anchor",
+            "line-cap",
+            "line-join",
+            "line-miter-limit",
+            "line-round-limit",
+            "line-dasharray",
+            "line-gap-width"
+          ]
+        }
+      ]
+    },
+    "background": {
+      "groups": [
+        {
+          "title": "primary",
+          "fields": [
+            "background-color",
+            "background-pattern",
+            "background-opacity"
+          ]
+        }
+      ]
+    },
+    "fill": {
+      "groups": [
+        {
+          "title": "primary",
+          "fields": [
+            "fill-opacity",
+            "fill-color",
+            "fill-antialias",
+            "fill-outline-color",
+            "fill-pattern",
+            "fill-translate",
+            "fill-translate-anchor"
+          ]
+        }
+      ]
+    },
+    "symbol": {
+      "groups": [
+        {
+          "title": "primary",
+          "fields": [
+            "text-field",
+            "text-font",
+            "text-size",
+            "text-line-height"
+          ]
+        },
+        {
+          "title": "placement",
+          "fields": [
+            "symbol-placement",
+            "symbol-spacing",
+            "symbol-avoid-edges",
+            "text-padding",
+            "text-allow-overlap",
+            "text-ignore-placement"
+          ]
+        },
+        {
+          "title": "layout",
+          "fields": [
+            "text-pitch-alignment",
+            "text-rotation-alignment",
+            "text-max-width",
+            "text-letter-spacing",
+            "text-justify",
+            "text-anchor",
+            "text-max-angle",
+            "text-rotate",
+            "text-keep-upright",
+            "text-transform",
+            "text-offset",
+            "text-optional"
+          ]
+        },
+        {
+          "title": "icon",
+          "fields": [
+            "icon-allow-overlap",
+            "icon-ignore-placement",
+            "icon-optional",
+            "icon-rotation-alignment",
+            "icon-size",
+            "icon-text-fit",
+            "icon-text-fit-padding",
+            "icon-image",
+            "icon-rotate",
+            "icon-padding",
+            "icon-keep-upright",
+            "icon-offset"
+          ]
+        }
+      ]
+    }
+}

src/config/rebass.js

@@ -0,0 +1,66 @@
+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/scales.js

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

src/config/tilesets.json

@@ -0,0 +1,9 @@
+[
+  {
+    "id": "mapbox-streets",
+    "type": "vector",
+    "url": "mapbox://mapbox.mapbox-streets-v7",
+    "title": "Mapbox Streets",
+    "description": "Mapbox Streets provides a vector tileset for complex general-purpose maps."
+  }
+]