Update console colors for light and dark themes

catarak · catarak · commit 436f6c78534c · 2020-04-27T17:30:55.000-04:00
diff --git a/client/images/console-debug-light.svg b/client/images/console-debug-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
      id="path2"
-     fill="#007BBB" />
+     fill="#0071AD" />
 </svg>
diff --git a/client/images/console-info-dark.svg b/client/images/console-info-dark.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
      id="path2"
-     fill="#a3a3a3" />
+     fill="#D9D9D9" />
 </svg>
diff --git a/client/images/console-info-light.svg b/client/images/console-info-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
      id="path2"
-     fill="#7D7D7D" />
+     fill="#4D4D4D" />
 </svg>
diff --git a/client/images/console-warn-light.svg b/client/images/console-warn-light.svg
@@ -50,5 +50,5 @@
   <path
      d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
      id="path2"
-     fill="#FAAF00" />
+     fill="#996B00" />
 </svg>
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
@@ -66,10 +66,10 @@ $themes: (
     console-color: $lightest,
     console-header-background-color: $medium-light,
     console-header-color: $darker,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
+    console-info-background-color: #5276B7,
+    console-warn-background-color: #996B00,
+    console-debug-background-color: #0071AD,
+    console-error-background-color: #D11518,
     ide-border-color: $medium-light,
     editor-gutter-color: $lighter,
     file-hover-color: $light,
@@ -140,10 +140,10 @@ $themes: (
     console-color: $lightest,
     console-header-background-color: $medium-dark,
     console-header-color: $lightest,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
+    console-info-background-color: #5276B7,
+    console-warn-background-color: #966C08,
+    console-error-background-color: #DD3134,
+    console-debug-background-color: #097BB3,
     ide-border-color: $middle-dark,
     editor-gutter-color: $darker,
     file-hover-color: $dark,
@@ -260,7 +260,7 @@ $toast-text-color: $lightest;
 
 $light-console-error-color: #D11518;
 $light-console-warn-color: #FAAF00;
-$light-console-debug-color: #007BBB;
+$light-console-debug-color: #0071AD;
 
 $dark-console-error-color: #DF3A3D;
 $dark-console-warn-color: #F5BC38;
diff --git a/client/styles/components/_console-feed.scss b/client/styles/components/_console-feed.scss
@@ -11,11 +11,13 @@ $CONSOLE_FEED_LIGHT_STYLES: (
   LOG_ERROR_COLOR: '#D11518',
   LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
   LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
-  LOG_WARN_COLOR: '#FAAF00',
+  LOG_WARN_COLOR: '#996B00',
   LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
-  LOG_INFO_COLOR: '#7D7D7D',
-  LOG_DEBUG_COLOR: '#007BBB',
-  LOG_COLOR: 'rgb(128, 128, 128)'
+  LOG_INFO_COLOR: '#4D4D4D',
+  LOG_DEBUG_COLOR: '#0071AD',
+  LOG_DEBUG_BACKGROUND: '#D6F1FF',
+  LOG_DEBUG_BORDER: '#C2EBFF',
+  LOG_COLOR: '#4D4D4D'
 );
 
 $CONSOLE_FEED_DARK_STYLES: (
@@ -30,12 +32,16 @@ $CONSOLE_FEED_DARK_STYLES: (
   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%)',
-  LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 8%)',
-  LOG_ERROR_COLOR: '#df3a3d',
+  LOG_ERROR_BACKGROUND: '#1F0000',
+  LOG_ERROR_COLOR: '#DF3A3D',
   LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
-  LOG_WARN_COLOR: '#f5bc38',
-  LOG_INFO_COLOR: '#a3a3a3',
-  LOG_DEBUG_COLOR: '#0c99e2',
+  LOG_WARN_COLOR: '#F5BC38',
+  LOG_INFO_COLOR: '#D9D9D9',
+  LOG_INFO_BORDER: '#4D4D4D',
+  LOG_COLOR: '#D9D9D9',
+  LOG_DEBUG_COLOR: '#0C99E2',
+  LOG_DEBUG_BACKGROUND: '#05232E',
+  LOG_DEBUG_BORDER: '#0C546E',
   TABLE_BORDER_COLOR: 'grey',
   TABLE_TH_BACKGROUND_COLOR: 'transparent',
   TABLE_TH_HOVER_COLOR: 'grey',
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
@@ -90,10 +90,10 @@
 .preview-console__clear {
 	@include themify() {
 		@extend %link;
-		// color: getThemifyVariable('inactive-text-color');
-		// &:hover {
-		// 	color: getThemifyVariable('console-header-color');
-		// }
+		color: getThemifyVariable('secondary-text-color');
+		&:hover {
+			color: getThemifyVariable('heavy-text-color');
+		}
 	}
 	background: transparent;
 	border: none;
