Make minor adjustments in all themes

catarak · catarak · commit 451a05f5465b · 2020-04-27T16:48:55.000-04:00
diff --git a/client/styles/abstracts/_placeholders.scss b/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;
diff --git a/client/styles/abstracts/_variables.scss b/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;
-$console-error-color: #ff5f52;
-
-$toast-background-color: #4A4A4A;
+$toast-background-color: $medium-dark;
 $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);
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
@@ -39,12 +39,8 @@
   // padding: #{8 / $base-font-size}rem 0;
 }
 
-.collection-metadata__name .editable-input__label span {
-  padding: 0.83333rem 0;
-
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-  }
+.collection-metadata__name .editable-input__label {
+  padding: 0.83333rem #{7 / $base-font-size}rem;
 }
 
 .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 {
diff --git a/client/styles/components/_editable-input.scss b/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');
-      & .editable-input__icon path {
-        fill: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable('logo-color');
+      & path {
+        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;
 }
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
@@ -173,13 +173,19 @@
 }
 .svg__logo g > path {
   @include themify() {
-      fill: getThemifyVariable('logo-color');
-    }
+    fill: getThemifyVariable('logo-color');
+  }
 }
 .svg__logo g g:first-of-type path {
   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;
diff --git a/client/styles/components/_preferences.scss b/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;
diff --git a/client/styles/components/_sidebar.scss b/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 {
diff --git a/client/styles/components/_toolbar.scss b/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');
 		}
 	}
 }
diff --git a/client/styles/components/_uploader.scss b/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%;

Original file line number	Diff line number	Diff line change
`@@ -39,12 +39,8 @@`
`39`	`39`	`// padding: #{8 / $base-font-size}rem 0;`
`40`	`40`	`}`
`41`	`41`
`42`		`-.collection-metadata__name .editable-input__label span {`
`43`		`- padding: 0.83333rem 0;`
`44`		`-`
`45`		`- @include themify() {`
`46`		`- color: getThemifyVariable('primary-text-color');`
`47`		`- }`
	`42`	`+.collection-metadata__name .editable-input__label {`
	`43`	`+ padding: 0.83333rem #{7 / $base-font-size}rem;`
`48`	`44`	`}`
`49`	`45`
`50`	`46`	`.collection-metadata__name,`
`@@ -63,9 +59,9 @@`
`63`	`59`	`}`
`64`	`60`
`65`	`61`	`.collection-metadata__description {`
`66`		`- margin-top: #{8 / $base-font-size}rem;`
	`62`	`+ padding-top: #{8 / $base-font-size}rem;`
`67`	`63`	`text-align: left;`
`68`		`- font-size: 14px;`
	`64`	`+ font-size: #{14 / $base-font-size}rem;`
`69`	`65`	`}`
`70`	`66`
`71`	`67`	`.collection-metadata__description .editable-input__label {`
Original file line number	Diff line number	Diff line change
`@@ -99,9 +99,9 @@`
`99`	`99`
`100`	`100`	`.preference__label {`
`101`	`101`	`@include themify() {`
`102`		`- color: getThemifyVariable("inactive-text-color");`
	`102`	`+ color: getThemifyVariable("secondary-text-color");`
`103`	`103`	`&:hover {`
`104`		`- color: getThemifyVariable("primary-text-color");`
	`104`	`+ color: getThemifyVariable("heavy-text-color");`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`	`margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;`
Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@`
`235`	`235`	`margin-right: #{5 / $base-font-size}rem;`
`236`	`236`	`& g {`
`237`	`237`	`@include themify() {`
`238`		`- fill: getThemifyVariable('icon-color');`
	`238`	`+ fill: getThemifyVariable('secondary-text-color');`
`239`	`239`	`}`
`240`	`240`	`}`
`241`	`241`	`& svg {`
Original file line number	Diff line number	Diff line change
`@@ -109,11 +109,11 @@`
`109`	`109`
`110`	`110`	`.toolbar__project-name {`
`111`	`111`	`@include themify() {`
`112`		`- color: getThemifyVariable('logo-color');`
	`112`	`+ color: getThemifyVariable('secondary-text-color');`
`113`	`113`	`&:hover {`
`114`		`- color: getThemifyVariable('primary-text-color');`
	`114`	`+ color: getThemifyVariable('logo-color');`
`115`	`115`	`& .toolbar__edit-name-button path {`
`116`		`- fill: getThemifyVariable('primary-text-color');`
	`116`	`+ fill: getThemifyVariable('logo-color');`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`	`}`
`@@ -159,7 +159,7 @@`
`159`	`159`	`}`
`160`	`160`	`@include themify() {`
`161`	`161`	`& path {`
`162`		`- fill: getThemifyVariable('logo-color');`
	`162`	`+ fill: getThemifyVariable('secondary-text-color');`
`163`	`163`	`}`
`164`	`164`	`}`
`165`	`165`	`}`