From 6b11adf88b88a8e78121acc7d60122b9d2c9330c Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 23 Apr 2020 20:25:39 -0400 Subject: [PATCH] Continue to update dark theme, remove many unused theme variables --- client/styles/abstracts/_variables.scss | 63 ++++++++-------------- client/styles/base/_base.scss | 1 + client/styles/components/_console.scss | 14 ++++- client/styles/components/_forms.scss | 1 + client/styles/components/_preferences.scss | 3 +- 5 files changed, 38 insertions(+), 44 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 3996fc97..b62b7c8d 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -75,12 +75,12 @@ $themes: ( file-hover-color: $light, file-selected-color: $medium-light, input-text-color: $dark, + input-background-color: $lightest, input-border-color: $middle-light, search-background-color: $lightest, search-clear-background-color: $light, search-hover-text-color: $lightest, search-hover-background-color: $medium-dark, - dropdown-color: $dark, keyboard-shortcut-color: $middle-gray, nav-hover-color: $p5js-pink, nav-border-color: $middle-light, @@ -103,16 +103,9 @@ $themes: ( progress-bar-active-color: $p5js-active-pink, form-title-color: rgba(51, 51, 51, 0.87), - form-secondary-title-color: $middle-dark, + form-secondary-title-color: $medium-dark, form-input-text-color: $dark, form-input-placeholder-text-color: $middle-light, - form-border-color: $middle-light, - 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: $lightest, - form-button-active-color: $lightest, form-navigation-options-color: $middle-dark ), dark: ( @@ -152,46 +145,39 @@ $themes: ( console-error-background-color: $red, ide-border-color: $middle-dark, editor-gutter-color: $darker, - file-hover-color: #404040, - file-selected-color: #404040, - input-text-color: #333, - input-border-color: #b5b5b5, - search-background-color: #ffffff, - search-clear-background-color: #4f4f4f, - search-hover-text-color: #ffffff, + file-hover-color: $dark, + file-selected-color: $medium-dark, + input-text-color: $lightest, + input-background-color: $dark, + input-border-color: $middle-dark, + search-background-color: $lightest, + search-clear-background-color: $medium-dark, + search-hover-text-color: $lightest, search-hover-background-color: $p5js-pink, - dropdown-color: #dadada, - keyboard-shortcut-color: #B5B5B5, + keyboard-shortcut-color: $middle-light, nav-hover-color: $p5js-pink, nav-border-color: $middle-dark, error-color: $p5js-pink, - table-row-stripe-color: #3f3f3f, + table-row-stripe-color: $dark, codefold-icon-open: url(../images/triangle-arrow-down-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg), - primary-button-color: #fff, + 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, - progress-bar-active-color: #f10046, + progress-bar-active-color: $p5js-active-pink, - form-title-color: $white, - form-secondary-title-color: #b5b5b5, - form-border-color: #b5b5b5, - form-button-background-color: $black, - form-button-color: #f10046, - form-button-background-hover-color: $p5js-pink, - form-button-background-active-color: #f10046, - form-button-hover-color: $white, - form-button-active-color: $white, - form-navigation-options-color: #999999 + form-title-color: $lightest, + form-secondary-title-color: $medium-light, + form-navigation-options-color: $middle-light ), contrast: ( logo-color: $yellow, @@ -233,12 +219,12 @@ $themes: ( file-hover-color: #404040, file-selected-color: #404040, input-text-color: #333, + input-background-color: $lightest, input-border-color: #b5b5b5, search-background-color: $white, search-clear-background-color: #444, search-hover-text-color: $black, search-hover-background-color: $yellow, - dropdown-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1, nav-hover-color: $yellow, nav-border-color: $middle-dark, @@ -262,13 +248,6 @@ $themes: ( form-title-color: $white, form-secondary-title-color: #b5b5b5, - form-border-color: #b5b5b5, - form-button-background-color: $black, - form-button-color: #f10046, - form-button-background-hover-color: $p5-contrast-pink, - form-button-background-active-color: #f10046, - form-button-hover-color: $white, - form-button-active-color: $white, form-navigation-options-color: #999999 ) ); diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 7c0a10b1..94b3d55a 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -39,6 +39,7 @@ textarea { padding: #{10 / $base-font-size}rem; @include themify() { color: getThemifyVariable('input-text-color'); + background-color: getThemifyVariable('input-background-color'); border-color: getThemifyVariable('input-border-color'); } } diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 04374947..411406eb 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -56,6 +56,12 @@ .preview-console__collapse { padding-top: #{3 / $base-font-size}rem; @include icon(); + @include themify() { + & g, + & polygon { + fill: getThemifyVariable('secondary-text-color'); + } + } .preview-console--collapsed & { display: none; } @@ -64,6 +70,12 @@ .preview-console__expand { padding-top: #{3 / $base-font-size}rem; @include icon(); + @include themify() { + & g, + & polygon { + fill: getThemifyVariable('secondary-text-color'); + } + } display: none; .preview-console--collapsed & { display: inline-block; @@ -78,7 +90,7 @@ .preview-console__clear { @include themify() { @extend %link; - color: getThemifyVariable('inactive-text-color'); + // color: getThemifyVariable('inactive-text-color'); // &:hover { // color: getThemifyVariable('console-header-color'); // } diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss index 8f3ade0e..a3f28be9 100644 --- a/client/styles/components/_forms.scss +++ b/client/styles/components/_forms.scss @@ -53,6 +53,7 @@ font-size: #{16 / $base-font-size}rem; @include themify() { color: getThemifyVariable('form-input-text-color'); + background-color: getThemifyVariable('input-background-color'); } } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index e65cfa40..6cc218fe 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -104,8 +104,9 @@ @include themify() { border: #{1 / $base-font-size}rem solid getThemifyVariable("button-border-color"); - background-color: getThemifyVariable("button-background-color"); + // background-color: getThemifyVariable("button-background-color"); color: getThemifyVariable("input-text-color"); + background-color: getThemifyVariable('input-background-color'); } text-align: center; border-radius: 0%;