From 69efbd213bb791937e3bc1f9c83b9950b3dcbe85 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 28 Jul 2020 11:00:24 -0400
Subject: [PATCH] DEV: Refactor `dark-light-diff` usage in stylesheets

- Adds new `$danger-low-mid` SCSS variable
- Removes `dark-light-diff` outside variables and color transformations
---
 app/assets/stylesheets/common/base/menu-panel.scss       | 2 +-
 app/assets/stylesheets/common/base/topic-post.scss       | 7 +------
 .../stylesheets/common/components/user-stream-item.scss  | 8 +-------
 .../common/foundation/color_transformations.scss         | 6 ++++++
 app/assets/stylesheets/desktop/topic-post.scss           | 9 ++-------
 app/assets/stylesheets/mobile/topic-post.scss            | 7 +------
 6 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index b2b219603e0..77150d7856b 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -255,7 +255,7 @@
       background: blend-primary-secondary(5%);
       &:hover {
         color: $primary;
-        background: dark-light-diff($primary, $secondary, 90%, -80%);
+        background: $primary-low;
       }
     }
     /* as a big ol' click target, don't let text inside be selected */
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 319fe1ee46e..6510ec42bf1 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -789,12 +789,7 @@ blockquote > *:last-child {
   }
 
   .small-action.deleted {
-    background-color: dark-light-diff(
-      rgba($danger, 0.7),
-      $secondary,
-      50%,
-      -60%
-    );
+    background-color: $danger-low-mid;
   }
 
   .small-action-desc.timegap {
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index 56f4b745328..22e055117f8 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -16,13 +16,7 @@
     }
 
     &.deleted {
-      opacity: 0.8;
-      background-color: dark-light-diff(
-        rgba($danger, 0.7),
-        $secondary,
-        50%,
-        -10%
-      );
+      background-color: $danger-low-mid;
     }
 
     &.hidden {
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index ca6068a774d..e6768af8881 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -64,6 +64,12 @@ $highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%) !default;
 
 //danger
 $danger-low: dark-light-diff($danger, $secondary, 85%, -64%) !default;
+$danger-low-mid: dark-light-diff(
+  rgba($danger, 0.7),
+  $secondary,
+  50%,
+  -60%
+) !default;
 $danger-medium: dark-light-diff($danger, $secondary, 30%, -35%) !default;
 
 //success
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index dbb2c430c94..0e6ec1b4380 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -418,7 +418,7 @@ pre.copy-codeblocks:hover .copy-cmd {
     width: 100%;
     &:hover {
       color: $primary;
-      background: dark-light-diff($primary, $secondary, 90%, -80%);
+      background: $primary-low;
     }
   }
 }
@@ -512,12 +512,7 @@ video {
 
 .deleted {
   .topic-body {
-    background-color: dark-light-diff(
-      rgba($danger, 0.7),
-      $secondary,
-      50%,
-      -60%
-    );
+    background-color: $danger-low-mid;
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 4a3ca7d968d..1d66bde24f8 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -312,12 +312,7 @@ button.select-post {
 
 .deleted {
   .topic-body {
-    background-color: dark-light-diff(
-      rgba($danger, 0.7),
-      $secondary,
-      50%,
-      -60%
-    );
+    background-color: $danger-low-mid;
   }
 }