Update code syntax and console colors

Author: catarak

client/styles/components/_console-feed.scss

@@ -17,7 +17,11 @@ $CONSOLE_FEED_LIGHT_STYLES: (
   LOG_DEBUG_COLOR: '#0071AD',
   LOG_DEBUG_BACKGROUND: '#D6F1FF',
   LOG_DEBUG_BORDER: '#C2EBFF',
-  LOG_COLOR: '#4D4D4D'
+  LOG_COLOR: '#4D4D4D',
+  ARROW_COLOR: '#666',
+  OBJECT_VALUE_STRING_COLOR: '#D81B18',
+  OBJECT_VALUE_NULL_COLOR: '#666',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#666',
 );
 
 $CONSOLE_FEED_DARK_STYLES: (
@@ -47,21 +51,22 @@ $CONSOLE_FEED_DARK_STYLES: (
   TABLE_TH_HOVER_COLOR: 'grey',
   TABLE_SORT_ICON_COLOR: 'grey',
   TABLE_DATA_BACKGROUND_IMAGE: 'grey',
-  TABLE_DATA_BACKGROUND_SIZE: 'grey'
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9'
 );
 
 $CONSOLE_FEED_CONTRAST_STYLES: (
   BASE_BACKGROUND_COLOR: '',
   BASE_COLOR: 'white',
   OBJECT_NAME_COLOR: 'white',
-  OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)',
-  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)',
+  OBJECT_VALUE_NULL_COLOR: '#B3BEFF',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#B3BEFF',
+  OBJECT_VALUE_REGEXP_COLOR: '#B3BEFF',
+  OBJECT_VALUE_STRING_COLOR: '#B3BEFF',
+  OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
+  OBJECT_VALUE_NUMBER_COLOR: '#B3BEFF',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#B3BEFF',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#B3BEFF',
   LOG_ERROR_BACKGROUND: '#1F0000',
   LOG_ERROR_COLOR: '#EA7B7D',
   LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
@@ -77,5 +82,6 @@ $CONSOLE_FEED_CONTRAST_STYLES: (
   TABLE_TH_HOVER_COLOR: 'grey',
   TABLE_SORT_ICON_COLOR: 'grey',
   TABLE_DATA_BACKGROUND_IMAGE: 'grey',
-  TABLE_DATA_BACKGROUND_SIZE: 'grey'
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9'
 );

client/styles/components/_editor.scss

@@ -52,7 +52,7 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
-  opacity: 0.3;
+  opacity: 0.2;
   width: #{49 / $base-font-size}rem !important;
   height: 100%;
   left: 49px !important;

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -84,12 +84,12 @@ $p5-contrast-activeline: #999999;
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-background {
-  background-color: #404040;
+  background-color: $dark;
 }
 
 .cm-s-p5-contrast .CodeMirror-activeline-gutter {
-  background-color: #454545;
-  border-right: 1px solid #949494;
+  background-color: $dark;
+  border-right: 1px solid $middle-dark;
 }
 
 .cm-s-p5-contrast .cm-error {

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -89,12 +89,12 @@ $p5-dark-error: #df3a3d;
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-background {
-  background-color: #404040;
+  background-color: $dark;
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-gutter {
-  background-color: #454545;
-  border-right: 1px solid #949494;
+  background-color: $dark;
+  border-right: 1px solid $middle-dark;
 }
 
 .cm-s-p5-dark span.CodeMirror-matchingbracket {

client/styles/components/_p5-light-codemirror-theme.scss

@@ -13,12 +13,12 @@
 $p5-light-lightbrown: #7a5a3a;
 $p5-light-brown: #704F21;
 $p5-light-black: #333333;
-$p5-light-pink: #be3652;
+$p5-light-pink: #CA445F;
 $p5-light-gray: #666;
 $p5-light-lightblue: #007bbb;
 $p5-light-darkblue: #306bb4;
 $p5-light-white: #FDFDFD;
-$p5-light-orange: #EE9900;
+$p5-light-orange: #9E6700;
 $p5-light-lightgray: #E0D7D1;
 $p5-light-darkgray: #666666;
 $p5-light-green: #008007;
@@ -86,11 +86,12 @@ $p5-light-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-light .CodeMirror-activeline-background {
-  background-color: #F3F3F3;
+  background-color: $light;
 }
 
 .cm-s-p5-light .CodeMirror-activeline-gutter {
-  background-color: #ECECEC;
+  background-color: $light;
+  border-right: 1px solid $medium-light;
 }
 
 .cm-s-p5-light .cm-error {