Organize styles and use custom theme for code mirror

ui/src/style/chronograf.scss

@@ -11,11 +11,13 @@
 @import 'theme/bootstrap-theme';
 @import 'theme/reset';
 
-// External
+// Vendor
 @import 'external/react-grid-layout';
 @import 'external/fixed-data-table-base';
 @import 'external/fixed-data-table-style';
 @import 'external/fixed-data-table';
+@import "external/codemirror";
+@import "../../node_modules/codemirror/theme/material.css";
 
 // Layout
 @import 'layout/page';
@@ -27,6 +29,7 @@
 // Components
 @import 'components/ceo-display-options';
 @import 'components/confirm-buttons';
+@import 'components/code-mirror-theme';
 @import 'components/custom-time-range';
 @import 'components/dygraphs';
 @import 'components/fancy-scrollbars';
@@ -59,7 +62,3 @@
 
 // TODO
 @import 'unsorted';
-
-// Vendor
-@import "external/codemirror";
-@import "../../node_modules/codemirror/theme/material.css";

ui/src/style/components/code-mirror-theme.scss

@@ -0,0 +1,124 @@
+/*
+
+    Name:       CHRONOGRAF YO
+    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
+
+    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
+
+*/
+
+$tickscript-console-height: 120px;
+
+.tickscript-console,
+.tickscript-editor {
+  padding-left: $page-wrapper-padding;
+  padding-right: $page-wrapper-padding;
+  margin: 0 auto;
+  max-width: $page-wrapper-max-width;
+  position: relative;
+}
+.tickscript-console {
+  height: $tickscript-console-height;
+  padding-top: 30px;
+}
+.tickscript-console--output {
+  padding: 0 60px;
+  font-family: $code-font;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  background-color: $g3-castle;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border-radius: $radius $radius 0 0;
+
+  > p {
+    margin: 0;
+  }
+}
+.tickscript-console--default {
+  color: $g10-wolf;
+  font-style: italic;
+}
+.tickscript-editor {
+  margin: 0 auto;
+  padding-bottom: 30px;
+  height: calc(100% - #{$tickscript-console-height});
+}
+.ReactCodeMirror {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.cm-s-material.CodeMirror {
+  border-radius: 0 0 $radius $radius;
+  font-family: $code-font;
+  background-color: $g2-kevlar;
+  color: $c-neutrino;
+  font-weight: 600;
+  height: 100%;
+}
+.CodeMirror-vscrollbar {
+  @include custom-scrollbar-round($g2-kevlar,$g6-smoke);
+}
+.cm-s-material .CodeMirror-gutters {
+  background-color: fade-out($g4-onyx, 0.5);
+  border: none;
+}
+.CodeMirror-gutter.CodeMirror-linenumbers {
+  width: 60px;
+}
+.cm-s-material.CodeMirror .CodeMirror-sizer {
+  margin-left: 60px;
+}
+.cm-s-material.CodeMirror .CodeMirror-linenumber.CodeMirror-gutter-elt {
+  padding-right: 9px;
+  width: 46px;
+  color: $g8-storm;
+}
+.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
+.cm-s-material .CodeMirror-cursor {
+  width: 2px;
+  border: 0;
+  background-color: $g20-white;
+  box-shadow:
+    0 0 3px $c-laser,
+    0 0 6px $c-ocean,
+    0 0 11px $c-amethyst;
+}
+.cm-s-material div.CodeMirror-selected,
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+  background-color: fade-out($g8-storm,0.7);
+}
+.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+
+.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
+.cm-s-material .cm-keyword { color: $c-comet; }
+.cm-s-material .cm-operator { color: $c-dreamsicle; }
+.cm-s-material .cm-variable-2 { color: #80CBC4; }
+.cm-s-material .cm-variable-3, .cm-s-material .cm-type { color: $c-laser; }
+.cm-s-material .cm-builtin { color: #DECB6B; }
+.cm-s-material .cm-atom { color: $c-viridian; }
+.cm-s-material .cm-number { color: $c-daisy; }
+.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
+.cm-s-material .cm-string { color: $c-krypton; }
+.cm-s-material .cm-string-2 { color: #80CBC4; }
+.cm-s-material .cm-comment { color: $g10-wolf; }
+.cm-s-material .cm-variable { color: $c-laser; }
+.cm-s-material .cm-tag { color: #80CBC4; }
+.cm-s-material .cm-meta { color: #80CBC4; }
+.cm-s-material .cm-attribute { color: #FFCB6B; }
+.cm-s-material .cm-property { color: #80CBAE; }
+.cm-s-material .cm-qualifier { color: #DECB6B; }
+.cm-s-material .cm-variable-3, .cm-s-material .cm-type { color: #DECB6B; }
+.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
+.cm-s-material .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #EC5F67;
+}
+.cm-s-material .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}