From 4af7471ead2375e4346fc9509dfd2505845e1f52 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 2 Jan 2019 17:54:22 -0500
Subject: [PATCH] Better contrast ratio match between dark and light themes

---
 app/assets/stylesheets/common/base/emoji.scss             | 8 ++++----
 app/assets/stylesheets/common/foundation/variables.scss   | 6 +++---
 app/assets/stylesheets/common/select-kit/combo-box.scss   | 4 ++--
 .../common/select-kit/dropdown-select-box.scss            | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index df07721f59a..d931856bfe9 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -20,7 +20,7 @@ sup img.emoji {
   height: 300px;
   color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
   background-color: $secondary;
-  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border: 1px solid $primary-low;
 }
 
 .emoji-picker .categories-column {
@@ -29,7 +29,7 @@ sup img.emoji {
   flex: 1 0 0;
   align-items: center;
   justify-content: space-between;
-  border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-right: 1px solid $primary-low;
   min-width: 36px;
 }
 
@@ -102,7 +102,7 @@ sup img.emoji {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-top: 1px solid $primary-low;
 }
 
 .emoji-picker .info {
@@ -202,7 +202,7 @@ sup img.emoji {
 
 .emoji-picker .filter {
   background-color: none;
-  border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  border-bottom: 1px solid $primary-low;
   padding: 5px;
   display: flex;
   position: relative;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 114811ef583..e0da4fcdaf3 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -195,14 +195,14 @@ $box-shadow: (
 // standard color transformations, use these if possible, and add any new dark-light-diffs here
 
 //primary
-$primary-very-low: dark-light-diff($primary, $secondary, 97%, -80%);
-$primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
+$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
+$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
 $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
 $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
 $primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
 
 //header_primary
-$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%);
+$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -78%);
 $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -35%);
 $header_primary-high: dark-light-diff(
   $header_primary,
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index 102a6da1dbe..8b6b4d731ec 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -19,8 +19,8 @@
 
     .select-kit-filter {
       padding: $input-padding;
-      border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border-top: 1px solid $primary-low;
+      border-bottom: 1px solid $primary-low;
 
       .spinner {
         flex: 0 0 auto;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 6c148f67fbf..53c37d640c1 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -14,7 +14,7 @@
     }
 
     .select-kit-body {
-      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px solid $primary-low;
       background-clip: padding-box;
       box-shadow: shadow("dropdown");
       max-width: 300px;