From 81ab62c72a5aa67b15dcaaaafccfffe73e24be5e Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 28 Jul 2020 13:33:31 -0400
Subject: [PATCH] DEV: Refactor `blend-primary-secondary()` usage in SCSS

---
 app/assets/stylesheets/common/base/discourse.scss         | 2 +-
 app/assets/stylesheets/common/base/menu-panel.scss        | 2 +-
 app/assets/stylesheets/common/base/onebox.scss            | 8 ++++----
 app/assets/stylesheets/common/base/topic-post.scss        | 7 ++-----
 app/assets/stylesheets/common/components/badges.scss      | 2 +-
 .../common/foundation/color_transformations.scss          | 3 +++
 app/assets/stylesheets/common/foundation/mixins.scss      | 2 +-
 .../common/select-kit/notifications-filter.scss           | 2 +-
 app/assets/stylesheets/desktop/topic-post.scss            | 4 ++--
 app/assets/stylesheets/mobile/topic-list.scss             | 2 +-
 app/assets/stylesheets/mobile/topic-post.scss             | 4 ++--
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 1dcb5e858fd..5360b1137dd 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -507,7 +507,7 @@ table {
   animation: rotate-forever 1s infinite linear;
   height: 30px;
   width: 30px;
-  border: 4px solid blend-primary-secondary(50%);
+  border: 4px solid $primary-low-mid;
   border-right-color: transparent;
   border-radius: 50%;
 
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 77150d7856b..357bade50fb 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -252,7 +252,7 @@
       align-items: center;
       min-height: 30px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       &:hover {
         color: $primary;
         background: $primary-low;
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index de7b3845f5f..359ad303381 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -131,12 +131,12 @@ aside.onebox {
     }
 
     a[href] {
-      color: dark-light-choose($tertiary, $tertiary);
+      color: $tertiary;
       text-decoration: none;
     }
 
     a[href]:visited {
-      color: dark-light-choose($tertiary, $tertiary);
+      color: $tertiary;
     }
 
     img {
@@ -304,7 +304,7 @@ aside.onebox {
 
 // Google Calendar Placeholder
 .gdocs-onebox-splash {
-  background-color: blend-primary-secondary(30%);
+  background-color: $primary-low-mid;
   color: $primary;
   border: 1px inset $primary;
   .gdocs-onebox-logo {
@@ -351,7 +351,7 @@ pre.onebox code ol {
   line-height: $line-height-large;
 }
 pre.onebox code {
-  background-color: dark-light-choose(#fff, #000);
+  background-color: $primary-very-low;
 }
 pre.onebox code li {
   padding-left: 5px;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 6510ec42bf1..ced3bf85b7f 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -303,10 +303,7 @@ blockquote {
   position: absolute;
   z-index: z("dropdown");
   opacity: 0.9;
-  background-color: dark-light-choose(
-    blend-primary-secondary(60%),
-    blend-primary-secondary(30%)
-  );
+  background-color: $secondary-high;
 
   &.visible {
     display: inline-flex;
@@ -668,7 +665,7 @@ pre {
     display: block;
     padding: 0.5em;
     color: $primary;
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     max-height: 500px;
   }
 }
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 20ed535931d..2e60a6509ea 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -183,7 +183,7 @@
   &.new-posts,
   &.unread-posts {
     background-color: dark-light-choose($tertiary-medium, $tertiary);
-    color: dark-light-choose($secondary, $secondary);
+    color: $secondary;
     font-weight: dark-light-choose(normal, bold);
   }
 
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index e6768af8881..cfce171ee22 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -81,3 +81,6 @@ $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
 
 //wiki
 $wiki: green !default;
+
+//blended variants
+$blend-primary-secondary-5: blend-primary-secondary(5%) !default;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 2f39ff443b9..edf76e104a6 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -90,7 +90,7 @@ $breakpoints: (
 // Stuff we repeat
 @mixin post-aside {
   border-left: 5px solid $primary-low;
-  background-color: blend-primary-secondary(5%);
+  background-color: $blend-primary-secondary-5;
 }
 
 // We still need -webkit for latest iPhone and Safari
diff --git a/app/assets/stylesheets/common/select-kit/notifications-filter.scss b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
index c1c970d77ea..45e90fd1677 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-filter.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
@@ -23,7 +23,7 @@
         }
 
         .header-text {
-          color: dark-light-choose($tertiary, $tertiary);
+          color: $tertiary;
           cursor: pointer;
           margin-bottom: 0;
         }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 0e6ec1b4380..da748d94dee 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -395,7 +395,7 @@ pre.copy-codeblocks:hover .copy-cmd {
       border: 0;
       padding: 0 23px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       border-left: 1px solid $primary-low;
       border-top: 1px solid transparent;
       &:hover {
@@ -414,7 +414,7 @@ pre.copy-codeblocks:hover .copy-cmd {
   }
   .link-summary .btn {
     color: dark-light-choose($primary-medium, $secondary-high);
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     width: 100%;
     &:hover {
       color: $primary;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 5683d5cfd0c..b0400c41c24 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -183,7 +183,7 @@
   .category-topic-link td.num .badge-notification {
     &.new-posts,
     &.unread-posts {
-      color: dark-light-choose($secondary, $secondary);
+      color: $secondary;
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 1d66bde24f8..758f8925d06 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -193,7 +193,7 @@ a.reply-to-tab {
       border: 0;
       padding: 0 15px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       border-left: 1px solid $primary-low;
       .fa {
         margin: 0;
@@ -204,7 +204,7 @@ a.reply-to-tab {
   }
   .link-summary .btn {
     color: dark-light-choose($primary-medium, $secondary-high);
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     width: 100%;
   }
 }