Make minor adjustments in all themes

client/styles/abstracts/_placeholders.scss

@@ -172,7 +172,7 @@
 %link {
 	@include themify() {
 		text-decoration: none;
-		color: getThemifyVariable('secondary-text-color');
+		color: getThemifyVariable('inactive-text-color');
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;

client/styles/abstracts/_variables.scss

@@ -37,6 +37,7 @@ $darkest: #000;
 $themes: (
   light: (
     logo-color: $p5js-pink,
+    logo-background-color: $lightest,
     heavy-text-color: $darker,
     primary-text-color: $dark,
     secondary-text-color: $medium-dark,
@@ -75,6 +76,7 @@ $themes: (
     file-selected-color: $medium-light,
     input-text-color: $dark,
     input-background-color: $lightest,
+    input-secondary-background-color: $lightest,
     input-border-color: $middle-light,
     search-background-color: $lightest,
     search-clear-background-color: $light,
@@ -109,6 +111,7 @@ $themes: (
   ),
   dark: (
     logo-color: $p5js-pink,
+    logo-background-color: $lightest,
     heavy-text-color: $lightest,
     primary-text-color: $lightest,
     dropzone-text-color: $black,
@@ -147,6 +150,7 @@ $themes: (
     file-selected-color: $medium-dark,
     input-text-color: $lightest,
     input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
     input-border-color: $middle-dark,
     search-background-color: $lightest,
     search-clear-background-color: $medium-dark,
@@ -179,6 +183,7 @@ $themes: (
   ),
   contrast: (
     logo-color: $yellow,
+    logo-background-color: $darker,
     heavy-text-color: $yellow,
     primary-text-color: $lightest,
     dropzone-text-color: $black,
@@ -217,6 +222,7 @@ $themes: (
     file-selected-color: $medium-dark,
     input-text-color: $lightest,
     input-background-color: $dark,
+    input-secondary-background-color: $medium-dark,
     input-border-color: $middle-dark,
     search-background-color: $white,
     search-clear-background-color: $medium-dark,
@@ -226,7 +232,7 @@ $themes: (
     nav-hover-color: $yellow,
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
-    table-row-stripe-color: dark,
+    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),
 
@@ -249,11 +255,16 @@ $themes: (
   )
 );
 
-$console-warn-color: #ffbe05;
+$toast-background-color: $medium-dark;
-$console-error-color: #ff5f52;
-
-$toast-background-color: #4A4A4A;
 $toast-text-color: $lightest;
 
+$light-console-error-color: #D11518;
+$light-console-warn-color: #FAAF00;
+$light-console-debug-color: #007BBB;
+
+$dark-console-error-color: #DF3A3D;
+$dark-console-warn-color: #F5BC38;
+$dark-console-debug-color: #0C99E2;
+
 $about-play-background-color: rgba(255, 255, 255, 0.7);
 $about-button-border-color: rgba(151, 151, 151, 0.7);

client/styles/components/_collection.scss

@@ -39,12 +39,8 @@
   // padding: #{8 / $base-font-size}rem 0;
 }
 
-.collection-metadata__name .editable-input__label span {
+.collection-metadata__name .editable-input__label {
-  padding: 0.83333rem 0;
+  padding: 0.83333rem #{7 / $base-font-size}rem;
-
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-  }
 }
 
 .collection-metadata__name,
@@ -63,9 +59,9 @@
 }
 
 .collection-metadata__description {
-  margin-top: #{8 / $base-font-size}rem;
+  padding-top: #{8 / $base-font-size}rem;
   text-align: left;
-  font-size: 14px;
+  font-size: #{14 / $base-font-size}rem;
 }
 
 .collection-metadata__description .editable-input__label {

client/styles/components/_editable-input.scss

@@ -4,15 +4,18 @@
   align-items: center;
 }
 
-.editable-input__label {
+button.editable-input__label {
   display: flex;
 
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
+    & path {
+      fill: getThemifyVariable('inactive-text-color');
+    }
     &:hover {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable('logo-color');
-      & .editable-input__icon path {
+      & path {
-        fill: getThemifyVariable('primary-text-color');
+        fill: getThemifyVariable('logo-color');
       }
     }
   }
@@ -23,23 +26,13 @@
   font-weight: unset;
 }
 
+.editable-input__input {
+  width: 100%;
+}
+
 .editable-input__icon svg {
   width: 1.5rem;
   height: 1.5rem;
-
-  @include themify() {
-    path {
-      fill: getThemifyVariable('inactive-text-color');
-    }
-  }
-}
-
-.editable-input:hover {
-  @include themify() {
-    .editable-input__icon path {
-      fill: getThemifyVariable('primary-text-color');
-    }
-  }
 }
 
 .editable-input--is-not-editing .editable-input__input,
@@ -49,5 +42,5 @@
 
 .editable-input--is-editing .editable-input__input,
 .editable-input--is-not-editing .editable-input__label {
-  display: block;
+  display: flex;
 }

client/styles/components/_nav.scss

@@ -180,6 +180,12 @@
   fill: none;
 }
 
+.svg__logo g g:first-of-type use {
+  @include themify() {
+    fill: getThemifyVariable('logo-background-color');
+  }
+}
+
 .nav__keyboard-shortcut {
   font-size: #{12 / $base-font-size}rem;
   font-family: Inconsololata, monospace;

client/styles/components/_preferences.scss

@@ -99,9 +99,9 @@
 
 .preference__label {
   @include themify() {
-    color: getThemifyVariable("inactive-text-color");
+    color: getThemifyVariable("secondary-text-color");
     &:hover {
-      color: getThemifyVariable("primary-text-color");
+      color: getThemifyVariable("heavy-text-color");
     }
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;

client/styles/components/_sidebar.scss

@@ -235,7 +235,7 @@
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
-      fill: getThemifyVariable('icon-color');
+      fill: getThemifyVariable('secondary-text-color');
     }
   }
   & svg {

client/styles/components/_toolbar.scss

@@ -109,11 +109,11 @@
 
 .toolbar__project-name {
 	@include themify() {
-		color: getThemifyVariable('logo-color');
+		color: getThemifyVariable('secondary-text-color');
 		&:hover {
-		color: getThemifyVariable('primary-text-color');
+		color: getThemifyVariable('logo-color');
 		  & .toolbar__edit-name-button path {
-		  	fill: getThemifyVariable('primary-text-color');
+		  	fill: getThemifyVariable('logo-color');
 		  }
 		}
 	}
@@ -159,7 +159,7 @@
 	}
 	@include themify() {
 		& path {
-			fill: getThemifyVariable('logo-color');
+			fill: getThemifyVariable('secondary-text-color');
 		}
 	}
 }

client/styles/components/_uploader.scss

@@ -1,9 +1,14 @@
 .dropzone {
   @include themify() {
-    color: getThemifyVariable('dropzone-text-color');
+    background-color: getThemifyVariable('input-secondary-background-color');
+    color: getThemifyVariable('input-text-color');
   }
 }
 
+.dropzone .dz-preview.dz-image-preview {
+  background-color: transparent;
+}
+
 .uploader {
   min-height: #{200 / $base-font-size}rem;
   width: 100%;