Continue to update dark theme, remove many unused theme variables

Author: catarak

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
   )
 );

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');
 	}
 }

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');
 		// }

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');
   }
 }
 

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%;