From edb5187e03b1cf5c52d8e536572abe732d950beb Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Fri, 24 Apr 2020 18:34:26 -0400
Subject: [PATCH] Update high contrast theme

---
 client/components/PreviewNav.jsx              |  2 +-
 client/styles/abstracts/_variables.scss       | 83 +++++++++----------
 client/styles/components/_api-key.scss        |  9 --
 client/styles/components/_nav.scss            | 16 ++--
 .../_p5-contrast-codemirror-theme.scss        |  2 +-
 client/styles/components/_preferences.scss    | 22 -----
 client/styles/components/_searchbar.scss      |  2 +-
 client/styles/components/_sidebar.scss        |  2 +-
 8 files changed, 52 insertions(+), 86 deletions(-)

diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index 7169621d..8afdcb9d 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <InlineSVG src={logoUrl} alt="p5.js logo" />
+        <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
       <p className="toolbar__project-owner">by</p>
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 272be3f3..7348178b 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -43,7 +43,6 @@ $themes: (
     inactive-text-color: $middle-dark,
     dropzone-text-color: $dark,
     modal-button-color: $dark,
-    heading-text-color: $dark,
     background-color: $lighter,
     button-background-color: $light,
     button-color: $black,
@@ -70,7 +69,7 @@ $themes: (
     console-warn-background-color: $orange,
     console-debug-background-color: $dodgerblue,
     console-error-background-color: $red,
-    ide-border-color: $light,
+    ide-border-color: $medium-light,
     editor-gutter-color: $lighter,
     file-hover-color: $light,
     file-selected-color: $medium-light,
@@ -114,7 +113,6 @@ $themes: (
     primary-text-color: $lightest,
     dropzone-text-color: $black,
     modal-button-color: $lightest,
-    heading-text-color: $lightest,
     secondary-text-color: $medium-light,
     inactive-text-color: $middle-light,
     background-color: $darker,
@@ -182,73 +180,72 @@ $themes: (
   contrast: (
     logo-color: $yellow,
     heavy-text-color: $yellow,
-    primary-text-color: $yellow,
+    primary-text-color: $lightest,
     dropzone-text-color: $black,
-    modal-button-color: #333,
-    heading-text-color: #e1e1e1,
-    secondary-text-color: #e1e1e1,
-    inactive-text-color: #f2f2f2,
+    modal-button-color: $dark,
+    secondary-text-color: $lighter,
+    inactive-text-color: $light,
     background-color: $darker,
     button-background-color: $white,
     button-color: $black,
-    button-border-color: #979797,
-    toolbar-button-color: #333333,
-    toolbar-button-background-color: #C1C1C1,
+    button-border-color: $middle-gray,
+    toolbar-button-color: $dark,
+    toolbar-button-background-color: $medium-light,
     button-background-hover-color: $yellow,
     button-background-active-color: $yellow,
-    button-nav-inactive-color: #a0a0a0,
-    button-hover-color: #333333,
-    button-active-color: #333333,
-    modal-background-color: #444,
-    preferences-button-background-color: #C1C1C1,
-    modal-border-color: #949494,
-    icon-color: #d9d9d9,
+    button-nav-inactive-color: $light,
+    button-hover-color: $dark,
+    button-active-color: $dark,
+    modal-background-color: $dark,
+    preferences-button-background-color: $medium-light,
+    modal-border-color: $middle-dark,
+    icon-color: $medium-light,
     icon-hover-color: $yellow,
     icon-toast-hover-color: $yellow,
     shadow-color: rgba(0, 0, 0, 0.16),
-    console-background-color: #4f4f4f,
+    console-background-color: $dark,
     console-color: $black,
-    console-header-background-color: #3f3f3f,
-    console-header-color: #d9d9d9,
+    console-header-background-color: $medium-dark,
+    console-header-color: $lightest,
     console-info-background-color: $lightsteelblue,
     console-warn-background-color: $orange,
     console-debug-background-color: $dodgerblue,
     console-error-background-color: $red,
-    ide-border-color: #949494,
-    editor-gutter-color: #454545,
-    file-hover-color: #404040,
-    file-selected-color: #404040,
-    input-text-color: #333,
-    input-background-color: $lightest,
-    input-border-color: #b5b5b5,
+    ide-border-color: $middle-dark,
+    editor-gutter-color: $darker,
+    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: $white,
-    search-clear-background-color: #444,
-    search-hover-text-color: $black,
+    search-clear-background-color: $medium-dark,
+    search-hover-text-color: $dark,
     search-hover-background-color: $yellow,
-    keyboard-shortcut-color: #e1e1e1,
+    keyboard-shortcut-color: $middle-light,
     nav-hover-color: $yellow,
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-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: #333,
-    table-button-background-color: #C1C1C1,
-    table-button-active-color: #333,
+    table-button-color: $dark,
+    table-button-background-color: $middle-gray,
+    table-button-active-color: $dark,
     table-button-background-active-color: #00FFFF,
-    table-button-hover-color: #333,
+    table-button-hover-color: $dark,
     table-button-background-hover-color: $yellow,
 
-    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: $white,
-    form-secondary-title-color: #b5b5b5,
-    form-navigation-options-color: #999999
+    form-title-color: $lightest,
+    form-secondary-title-color: $medium-light,
+    form-navigation-options-color: $middle-light
   )
 );
 
@@ -256,7 +253,7 @@ $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;
 
 $toast-background-color: #4A4A4A;
-$toast-text-color: $white;
+$toast-text-color: $lightest;
 
 $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/_api-key.scss b/client/styles/components/_api-key.scss
index a0986d4e..ed519aea 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -1,8 +1,5 @@
 .api-key-form__summary {
   padding-top: #{25 / $base-font-size}rem;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__section {
@@ -13,9 +10,6 @@
   padding: #{15 / $base-font-size}rem 0;
   font-size: #{21 / $base-font-size}rem;
   font-weight: bold;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__create-button {
@@ -99,9 +93,6 @@
   margin-bottom: #{10 / $base-font-size}rem;
   font-size: #{18 / $base-font-size}rem;
   font-weight: bold;
-  @include themify() {
-    color: getThemifyVariable('heading-text-color');
-  }
 }
 
 .api-key-form__new-token__info {
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index f63ef9ad..23397bb8 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -23,14 +23,14 @@
   align-items: center;
 }
 
-.nav__items-left,
-.nav__items-right {
-  & button, & a {
-    @include themify() {
-      color: getThemifyVariable('primary-text-color');
-    }
-  }
-}
+// .nav__items-left,
+// .nav__items-right {
+//   & button, & a {
+//     @include themify() {
+//       color: getThemifyVariable('primary-text-color');
+//     }
+//   }
+// }
 
 .nav__item {
   position: relative;
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index 0ad29dc3..4e75bec6 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -10,7 +10,7 @@
 //light gray: #f4f4f4
 //dark gray: #b5b5b5
 
-$p5-contrast-black: #333;
+$p5-contrast-black: #1C1C1C;
 $p5-contrast-gray: #A0A0A0;
 $p5-contrast-white: #FDFDFD;
 $p5-contrast-darkgray: #333333;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 6cc218fe..aedd43e4 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -33,25 +33,6 @@
   }
 }
 
-.serve__over__https {
-  text-align: center;
-  margin-left: #{9 / $base-font-size}rem;
-  font-width: #{108 / $base-font-size}rem;
-  font-height: #{15 / $base-font-size}rem;
-  font-family: Montserrat;
-  font-size: #{12 / $base-font-size}rem;
-  margin-top: #{2 / $base-font-size}rem;
-}
-
-.preferences__heading {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  @include themify() {
-    color: getThemifyVariable("heading-text-color");
-  }
-}
-
 .preferences__title {
   width: #{90 / $base-font-size}rem;
   height: #{25 / $base-font-size}rem;
@@ -86,9 +67,6 @@
   font-size: #{16 / $base-font-size}rem;
   margin-top: #{13 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
-  @include themify() {
-    color: getThemifyVariable("heading-text-color");
-  }
 }
 
 .preference__subtitle {
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 7076f75c..de70b31c 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -11,7 +11,7 @@
   padding-right: #{38 / $base-font-size}rem;
   @include themify() {
     border-color: getThemifyVariable('input-border-color');
-    background-color: getThemifyVariable('search-background-color');
+    background-color: getThemifyVariable('input-background-color');
   }
 }
 
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 3ea29059..cfa3be2d 100644
--- 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('inactive-text-color');
+      fill: getThemifyVariable('icon-color');
     }
   }
   & svg {