From 3461c9619e96213fd8b34e45e6588174207dc876 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 22 Apr 2020 18:31:04 -0400 Subject: [PATCH] Update dark theme colors --- client/images/triangle-arrow-down-white.svg | 2 +- client/styles/abstracts/_variables.scss | 76 +++++++++---------- client/styles/components/_console.scss | 2 +- .../components/_p5-dark-codemirror-theme.scss | 2 +- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg index a66e9ff6..75fd5567 100644 --- a/client/images/triangle-arrow-down-white.svg +++ b/client/images/triangle-arrow-down-white.svg @@ -3,7 +3,7 @@ Created with Sketch. - + diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b76098d5..3996fc97 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -53,17 +53,17 @@ $themes: ( button-background-hover-color: $p5js-pink, button-background-active-color: $p5js-active-pink, button-nav-inactive-color: $middle-gray, - button-hover-color: $white, - button-active-color: $white, + button-hover-color: $lightest, + button-active-color: $lightest, modal-background-color: $light, preferences-button-background-color: $medium-light, modal-border-color: $middle-light, icon-color: $middle-gray, icon-hover-color: $darker, - icon-toast-hover-color: $white, + icon-toast-hover-color: $lightest, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: $light, - console-color: $white, + console-color: $lightest, console-header-background-color: $medium-light, console-header-color: $darker, console-info-background-color: $lightsteelblue, @@ -92,11 +92,11 @@ $themes: ( primary-button-color: $lightest, primary-button-background-color: $p5js-pink, - table-button-color: $white, + table-button-color: $lightest, table-button-background-color: $middle-gray, - table-button-active-color: $white, + table-button-active-color: $lightest, table-button-background-active-color: #00A1D3, - table-button-hover-color: $white, + table-button-hover-color: $lightest, table-button-background-hover-color: $p5js-pink, progress-bar-background-color: $middle-gray, @@ -107,51 +107,51 @@ $themes: ( form-input-text-color: $dark, form-input-placeholder-text-color: $middle-light, form-border-color: $middle-light, - form-button-background-color: $white, + form-button-background-color: $lightest, form-button-color: $p5js-active-pink, form-button-background-hover-color: $p5js-pink, form-button-background-active-color: $p5js-active-pink, - form-button-hover-color: $white, - form-button-active-color: $white, + form-button-hover-color: $lightest, + form-button-active-color: $lightest, form-navigation-options-color: $middle-dark ), dark: ( logo-color: $p5js-pink, heavy-text-color: $lightest, - primary-text-color: $white, + primary-text-color: $lightest, dropzone-text-color: $black, - modal-button-color: $white, - heading-text-color: $white, - secondary-text-color: #DADADA, - inactive-text-color: #b5b5b5, - background-color: #333, - button-background-color: $white, - button-color: $black, - button-border-color: #979797, + modal-button-color: $lightest, + heading-text-color: $lightest, + secondary-text-color: $medium-light, + inactive-text-color: $middle-light, + background-color: $darker, + button-background-color: $lightest, + button-color: $darkest, + button-border-color: $middle-gray, toolbar-button-color: $p5js-pink, - toolbar-button-background-color: #424242, + toolbar-button-background-color: $medium-dark, button-background-hover-color: $p5js-pink, - button-background-active-color: #f10046, - button-nav-inactive-color: #a0a0a0, - button-hover-color: $white, - button-active-color: $white, - modal-background-color: #444, - preferences-button-background-color: #5f5f5f, - modal-border-color: #949494, - icon-color: #a9a9a9, - icon-hover-color: $white, - icon-toast-hover-color: $white, + button-background-active-color: $p5js-active-pink, + button-nav-inactive-color: $middle-light, + button-hover-color: $lightest, + button-active-color: $lightest, + modal-background-color: $dark, + preferences-button-background-color: $middle-dark, + modal-border-color: $middle-dark, + icon-color: $middle-light, + icon-hover-color: $lightest, + icon-toast-hover-color: $lightest, shadow-color: rgba(0, 0, 0, 0.16), - console-background-color: #4f4f4f, - console-color: $black, - console-header-background-color: #3f3f3f, - console-header-color: #b5b5b5, + console-background-color: $dark, + 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, - ide-border-color: #949494, - editor-gutter-color: #363636, + ide-border-color: $middle-dark, + editor-gutter-color: $darker, file-hover-color: #404040, file-selected-color: #404040, input-text-color: #333, @@ -173,13 +173,13 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: $white, - table-button-background-color: #979797, + table-button-background-color: $middle-gray, table-button-active-color: $white, table-button-background-active-color: #00A1D3, table-button-hover-color: $white, table-button-background-hover-color: $p5js-pink, - progress-bar-background-color: #979797, + progress-bar-background-color: $middle-gray, progress-bar-active-color: #f10046, form-title-color: $white, diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 16999c9e..04374947 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -78,7 +78,7 @@ .preview-console__clear { @include themify() { @extend %link; - color: getThemifyVariable('primary-text-color'); + color: getThemifyVariable('inactive-text-color'); // &:hover { // color: getThemifyVariable('console-header-color'); // } diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index bd073941..6cc3b074 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -12,7 +12,7 @@ $p5-dark-lightbrown: #A67F59; $p5-light-green: #42F48F; -$p5-dark-black: #333; +$p5-dark-black: #1C1C1C; $p5-dark-pink: #D9328F; $p5-dark-gray: #999999; $p5-dark-lightblue: #0F9DD7;