From 436f6c78534c67bc860f67d0e136612187daf381 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 27 Apr 2020 17:30:55 -0400 Subject: [PATCH] Update console colors for light and dark themes --- client/images/console-debug-light.svg | 2 +- client/images/console-info-dark.svg | 2 +- client/images/console-info-light.svg | 2 +- client/images/console-warn-light.svg | 2 +- client/styles/abstracts/_variables.scss | 18 ++++++++-------- client/styles/components/_console-feed.scss | 24 +++++++++++++-------- client/styles/components/_console.scss | 8 +++---- 7 files changed, 32 insertions(+), 26 deletions(-) diff --git a/client/images/console-debug-light.svg b/client/images/console-debug-light.svg index 8bdc7ae3..0e039342 100644 --- a/client/images/console-debug-light.svg +++ b/client/images/console-debug-light.svg @@ -50,5 +50,5 @@ + fill="#0071AD" /> diff --git a/client/images/console-info-dark.svg b/client/images/console-info-dark.svg index c116d093..869795c5 100644 --- a/client/images/console-info-dark.svg +++ b/client/images/console-info-dark.svg @@ -50,5 +50,5 @@ + fill="#D9D9D9" /> diff --git a/client/images/console-info-light.svg b/client/images/console-info-light.svg index 24b74263..eaf8be4d 100644 --- a/client/images/console-info-light.svg +++ b/client/images/console-info-light.svg @@ -50,5 +50,5 @@ + fill="#4D4D4D" /> diff --git a/client/images/console-warn-light.svg b/client/images/console-warn-light.svg index 6e76d14a..548ee946 100644 --- a/client/images/console-warn-light.svg +++ b/client/images/console-warn-light.svg @@ -50,5 +50,5 @@ + fill="#996B00" /> diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 8d3bd60f..da4e8f18 100644 --- 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 index 597f9e97..c2344044 100644 --- 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 index 411406eb..109b069f 100644 --- 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;