From e8c3587b41f285ace0a23b6dbe018d05862eec9b Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 22 Apr 2020 17:45:48 -0400
Subject: [PATCH] Move all light theme variables to new design grayscale

---
 client/styles/abstracts/_placeholders.scss    |  4 ++--
 client/styles/abstracts/_variables.scss       | 19 ++++++++++---------
 client/styles/components/_asset-list.scss     |  2 +-
 .../components/_collection-popover.scss       |  2 +-
 client/styles/components/_sketch-list.scss    |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 2694b3ed..fb8131ce 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -186,7 +186,7 @@
     background-color: map-get($theme-map, 'modal-background-color');
     border: 1px solid map-get($theme-map, 'modal-border-color');
     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-    color: getThemifyVariable('dropdown-color');
+    color: getThemifyVariable('primary-text-color');
 	}
 	text-align: left;
 	width: #{180 / $base-font-size}rem;
@@ -207,7 +207,7 @@
 		& button,
 		& a {
 			@include themify() {
-				color: getThemifyVariable('dropdown-color');
+				color: getThemifyVariable('primary-text-color');
 			}
 			width: 100%;
 			text-align: left;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index a8a58df7..b76098d5 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -3,6 +3,7 @@ $base-font-size: 12;
 //colors
 $p5js-pink: #ed225d;
 $processing-blue: #007BBB;
+$p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
@@ -50,7 +51,7 @@ $themes: (
     toolbar-button-color: $p5js-pink,
     toolbar-button-background-color: $medium-light,
     button-background-hover-color: $p5js-pink,
-    button-background-active-color: #f10046,
+    button-background-active-color: $p5js-active-pink,
     button-nav-inactive-color: $middle-gray,
     button-hover-color: $white,
     button-active-color: $white,
@@ -79,12 +80,12 @@ $themes: (
     search-clear-background-color: $light,
     search-hover-text-color: $lightest,
     search-hover-background-color: $medium-dark,
-    dropdown-color: #414141,
+    dropdown-color: $dark,
     keyboard-shortcut-color: $middle-gray,
     nav-hover-color: $p5js-pink,
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
-    table-row-stripe-color: #d6d6d6,
+    table-row-stripe-color: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg),
 
@@ -92,24 +93,24 @@ $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-active-color: #f10046,
+    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $p5js-active-pink,
 
     form-title-color: rgba(51, 51, 51, 0.87),
     form-secondary-title-color: $middle-dark,
     form-input-text-color: $dark,
     form-input-placeholder-text-color: $middle-light,
-    form-border-color: #b5b5b5,
+    form-border-color: $middle-light,
     form-button-background-color: $white,
-    form-button-color: #f10046,
+    form-button-color: $p5js-active-pink,
     form-button-background-hover-color: $p5js-pink,
-    form-button-background-active-color: #f10046,
+    form-button-background-active-color: $p5js-active-pink,
     form-button-hover-color: $white,
     form-button-active-color: $white,
     form-navigation-options-color: $middle-dark
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 335fc7bf..c0cd524d 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -83,7 +83,7 @@
 
   @include themify() {
     & polygon {
-      fill: getThemifyVariable('dropdown-color');
+      fill: getThemifyVariable('inactive-text-color');
     }
   }
 }
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
index 2d5db110..a9176c9e 100644
--- a/client/styles/components/_collection-popover.scss
+++ b/client/styles/components/_collection-popover.scss
@@ -16,7 +16,7 @@
     background-color: map-get($theme-map, 'modal-background-color');
     border: 1px solid map-get($theme-map, 'modal-border-color');
     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-    color: getThemifyVariable('dropdown-color');
+    color: getThemifyVariable('primary-text-color');
   }
   
 	text-align: left;
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 87162305..bc3c0724 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -96,7 +96,7 @@
   height:#{25 / $base-font-size}rem;
   @include themify() {
       & polygon {
-        fill: getThemifyVariable('dropdown-color');
+        fill: getThemifyVariable('inactive-text-color');
       }
   }
 }