From 677148e53865e5de07ecbc9dbeee10d07b0e10a1 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Mon, 27 Apr 2020 18:34:53 -0400
Subject: [PATCH] Update code syntax and console colors

---
 client/styles/components/_console-feed.scss   | 28 +++++++++++--------
 client/styles/components/_editor.scss         |  2 +-
 .../_p5-contrast-codemirror-theme.scss        |  6 ++--
 .../components/_p5-dark-codemirror-theme.scss |  6 ++--
 .../_p5-light-codemirror-theme.scss           |  9 +++---
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/client/styles/components/_console-feed.scss b/client/styles/components/_console-feed.scss
index 174fd543..8bd0d4a6 100644
--- a/client/styles/components/_console-feed.scss
+++ b/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'
 );
\ No newline at end of file
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index b5b13c6e..db8c1764 100644
--- a/client/styles/components/_editor.scss
+++ b/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;
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index 4e75bec6..0ec609b8 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/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 {
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index d9091bf8..955cc5e1 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/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 {
diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss
index 1c7b23b4..90a0509d 100644
--- a/client/styles/components/_p5-light-codemirror-theme.scss
+++ b/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 {