DEV: Refactor `dark-light-diff` usage in stylesheets

DEV: Refactor dark-light-diff usage in stylesheets

  • Adds new $danger-low-mid SCSS variable
  • Removes dark-light-diff outside variables and color transformations
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index b2b2196..77150d7 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 319fe1e..6510ec4 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 56f4b74..22e0551 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 ca6068a..e6768af 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 dbb2c43..0e6ec1b 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 4a3ca7d..1d66bde 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;
   }
 }
 

GitHub sha: 69efbd21

1 Like