From 7cf45dab01f8ec2a7f56db61ead4eff005ebb6b0 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Tue, 28 Jul 2020 17:21:53 -0500
Subject: [PATCH] Remove darken & lighten functions from scss (#10330)

---
 .../stylesheets/common/base/compose.scss      |  2 +-
 app/assets/stylesheets/common/base/emoji.scss |  2 +-
 .../common/base/topic-admin-menu.scss         |  7 +---
 .../common/components/buttons.scss            | 37 ++++++-------------
 .../foundation/color_transformations.scss     |  3 ++
 .../common/foundation/variables.scss          |  6 +++
 .../future-date-input-selector.scss           |  2 +-
 app/assets/stylesheets/desktop/user.scss      |  2 +-
 app/assets/stylesheets/embed.scss             |  4 +-
 9 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 94ab5db59b..d6efd3e306 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -349,7 +349,7 @@
 
     li {
       .d-icon-users {
-        color: lighten($primary, 40%);
+        color: $primary-medium;
         padding: 0 2px;
       }
 
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index 541da31e91..15269fecbe 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -209,7 +209,7 @@ sup img.emoji {
   display: inline-block;
   vertical-align: top;
   border-radius: 2px;
-  background-color: lighten($tertiary, 40%);
+  background-color: $tertiary-low;
 }
 
 .emoji-picker-modal.fadeIn {
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index d96719d5ec..2de57e93de 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -119,16 +119,13 @@
         background: $tertiary-high;
       }
       &:active {
-        @include linear-gradient(
-          darken($tertiary, 18%),
-          darken($tertiary, 12%)
-        );
+        @include linear-gradient($tertiary-hover, $tertiary);
         color: $secondary;
       }
     }
     &[disabled] {
       text-shadow: 0 1px 0 rgba($primary, 0.2);
-      @include linear-gradient($tertiary, darken($tertiary, 20%));
+      @include linear-gradient($tertiary, $tertiary-hover);
       box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
     }
   }
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 643975ec50..612e4e6ca4 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -50,10 +50,7 @@
   }
   &:active,
   &.btn-active {
-    @include linear-gradient(
-      scale-color($bg-color, $lightness: -20%),
-      $bg-color
-    );
+    @include linear-gradient($hover-bg-color 0%, $bg-color 100%);
   }
   &[disabled],
   &.disabled {
@@ -113,7 +110,7 @@
     $text-color: $secondary,
     $bg-color: $tertiary,
     $icon-color: $secondary,
-    $hover-bg-color: darken($tertiary, 10%),
+    $hover-bg-color: $tertiary-hover,
     $hover-icon-color: $secondary
   );
 }
@@ -126,11 +123,7 @@
     $text-color: $secondary,
     $bg-color: $danger,
     $icon-color: $danger-low,
-    $hover-bg-color:
-      dark-light-choose(
-        scale-color($danger, $lightness: -20%),
-        scale-color($danger, $lightness: 20%)
-      ),
+    $hover-bg-color: $danger-hover,
     $hover-icon-color: $danger-low
   );
 }
@@ -143,11 +136,7 @@
     $text-color: $secondary,
     $bg-color: $danger,
     $icon-color: $secondary,
-    $hover-bg-color:
-      dark-light-choose(
-        scale-color($danger, $lightness: -20%),
-        scale-color($danger, $lightness: 20%)
-      ),
+    $hover-bg-color: $danger-hover,
     $hover-icon-color: $secondary
   );
 }
@@ -157,11 +146,7 @@
     $text-color: $secondary,
     $bg-color: $success,
     $icon-color: $secondary,
-    $hover-bg-color:
-      dark-light-choose(
-        scale-color($success, $lightness: -20%),
-        scale-color($success, $lightness: 20%)
-      ),
+    $hover-bg-color: $success-hover,
     $hover-icon-color: $secondary
   );
 }
@@ -195,19 +180,19 @@
     }
     &:hover {
       color: currentColor;
-      background: darken($google, 5%);
+      background: $google-hover;
     }
   }
   &.instagram {
     background: $instagram;
     &:hover {
-      background: darken($instagram, 15%);
+      background: $instagram-hover;
     }
   }
   &.facebook {
     background: $facebook;
     &:hover {
-      background: darken($facebook, 15%);
+      background: $facebook-hover;
     }
   }
   &.cas {
@@ -216,19 +201,19 @@
   &.twitter {
     background: $twitter;
     &:hover {
-      background: darken($twitter, 10%);
+      background: $twitter-hover;
     }
   }
   &.github {
     background: $github;
     &:hover {
-      background: lighten($github, 20%);
+      background: $github-hover;
     }
   }
   &.discord {
     background: $discord;
     &:hover {
-      background: darken($discord, 10%);
+      background: $discord-hover;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index cfce171ee2..f6ca4f4562 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -53,6 +53,7 @@ $secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default;
 $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
 $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;
 $tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
+$tertiary-hover: dark-light-diff($tertiary, $secondary, -25%, -25%) !default;
 
 //quaternary
 $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
@@ -71,10 +72,12 @@ $danger-low-mid: dark-light-diff(
   -60%
 ) !default;
 $danger-medium: dark-light-diff($danger, $secondary, 30%, -35%) !default;
+$danger-hover: dark-light-diff($danger, $secondary, -20%, -20%) !default;
 
 //success
 $success-low: dark-light-diff($success, $secondary, 80%, -60%) !default;
 $success-medium: dark-light-diff($success, $secondary, 50%, -40%) !default;
+$success-hover: dark-light-diff($success, $secondary, -20%, -20%) !default;
 
 //love
 $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index c5d1fab33a..c80a5b6d38 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -18,12 +18,18 @@ $topic-avatar-width: 45px;
 // --------------------------------------------------
 
 $google: #ffffff !default;
+$google-hover: darken($google, 5%) !default;
 $instagram: #e1306c !default;
+$instagram-hover: darken($instagram, 15%) !default;
 $facebook: #4267b2 !default;
+$facebook-hover: darken($facebook, 15%) !default;
 $cas: #70ba61 !default;
 $twitter: #1da1f2 !default;
+$twitter-hover: darken($twitter, 10%) !default;
 $github: #100e0f !default;
+$github-hover: lighten($github, 20%) !default;
 $discord: #7289da !default;
+$discord-hover: darken($discord, 10%) !default;
 
 // Badge color variables
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index a047c910f7..1d92da56b1 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -30,7 +30,7 @@
 
       .future-date-input-selector-row {
         .future-date-input-selector-icons {
-          color: lighten($primary, 40%);
+          color: $primary-medium;
         }
       }
     }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index f2e6445f0d..9a398bcfe8 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -111,7 +111,7 @@
       .details {
         padding: 15px 0;
         margin: 0;
-        color: dark-light-choose(lighten($primary, 10%), $secondary);
+        color: $secondary;
       }
     }
 
diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index 0e70d09ca9..2b0f33228b 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -18,7 +18,7 @@ article.post {
   }
 
   .quote .title {
-    border-left: 5px solid darken($primary-low, 5%);
+    border-left: 5px solid $primary-very-low;
     padding: 10px 10px 0 12px;
     .avatar {
       margin-right: 7px;
@@ -33,7 +33,7 @@ article.post {
   blockquote {
     padding: 10px 8px 10px 13px;
     margin: 0 0 10px 0;
-    border-left: 5px solid darken($primary-low, 5%);
+    border-left: 5px solid $primary-very-low;
     p {
       margin: 0 0 10px 0;
     }