Remove Darken and Ligthen SCSS

Updated all the places in the SCSS where we use Darken and Lighten properties.

These properties have been problematic in the past and caused some state issues, e.g. New message(s) hightlight (which was fixed seperately from this issue)

src/_colors.scss

@@ -5,6 +5,7 @@ $ui-blue-10percent: hsla(215, 100, 65, .1);
 $ui-blue-25percent:  hsla(215, 100, 65, .25);
 
 $ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary
+$ui-orange-10percent: hsla(35, 90, 55, .1);
 $ui-orange-25percent: hsla(35, 90, 55, .25);
 
 $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
@@ -39,6 +40,7 @@ $overlay-gray: hsla(0, 0, 0, .75);
 /* Typography Colors */
 $header-gray: hsla(225, 15, 40, 1); //#575E75
 $type-gray: hsla(225, 15, 40, 1); //#575E75
+$type-gray-75percent: hsla(225, 15, 40, .75);
 $type-white: hsla(0, 100, 100, 1); //#FFF
 
 $link-blue: $ui-blue;

src/components/forms/charcount.scss

@@ -2,7 +2,7 @@
 
 .char-count {
     letter-spacing: 1px;
-    color: lighten($type-gray, 30%);
+    color: $type-gray-75percent;
     font-weight: 500;
 
     &.overmax {

src/components/forms/input.scss

@@ -2,7 +2,6 @@
 @import "../../frameless";
 
 $base-bg: $ui-light-gray;
-$pass-bg: lighten($ui-aqua, 35%);
 
 .row {
     label {
@@ -32,8 +31,7 @@ $pass-bg: lighten($ui-aqua, 35%);
     }
 
     &.pass {
-        border: 1px solid $active-dark-gray;
-        background-color: $pass-bg;
+        border: 1px solid $ui-aqua;
     }
 
     /* IE10/11-specific style resets */

src/components/social-message/social-message.scss

@@ -41,7 +41,7 @@ a.social-messages-profile-link {
     color: $type-gray;
 
     &:hover {
-        color: darken($type-gray, 10);
+        color: $link-blue;
     }
 }
 

src/components/spinner/spinner.scss

@@ -18,13 +18,13 @@
             animation: circleFadeDelay 1.2s infinite ease-in-out both;
             margin: 0 auto;
             border-radius: 100%;
-            background-color: darken($ui-white, 8%);
+            background-color: $ui-gray;
             width: 15%;
             height: 15%;
             content: "";
 
             .white & {
-                background-color: $ui-blue-dark    
+                background-color: $ui-blue-dark
             }
         }
     }
@@ -37,7 +37,7 @@
             transform: rotate($rotation);
 
             &:before {
-                animation-delay: $delay; 
+                animation-delay: $delay;
             }
         }
 
@@ -54,5 +54,5 @@
 
     40% {
         opacity: 1;
-    } 
+    }
 }

src/components/ttt-tile/ttt-tile.scss

@@ -106,7 +106,7 @@
     font-weight: 500;
 
     &:hover {
-        background-color: lighten($link-blue, 40%);
+        background-color: $ui-blue-10percent;
     }
 }
 

src/main.scss

@@ -74,7 +74,7 @@ p {
         padding: 1.25em;
 
         &.orange {
-            background-color: lighten($ui-orange, 30);
+            background-color: $ui-orange-10percent;
         }
     }
 
@@ -138,7 +138,7 @@ p {
 }
 
 ::selection {
-    background-color: lighten($ui-blue, 30);
+    background-color: $ui-blue-25percent;
 }
 
 ol,

src/views/conference/2016/schedule/schedule.scss

@@ -67,7 +67,7 @@
                 display: block;
 
                 &:hover {
-                    background-color: lighten($ui-blue, 40);
+                    background-color: $ui-blue-25percent;
                 }
             }
         }

src/views/conference/2017/index/index.scss

@@ -27,7 +27,7 @@
 }
 
 .conf2017-title-band {
-    background-color: lighten($ui-blue, 10%);
+    background-color: $ui-blue-10percent;
     padding: 1.5rem;
     text-align: center;
     color: $type-white;

src/views/messages/messages.scss

@@ -54,9 +54,9 @@
 }
 
 .admin-message {
-    border: 1px solid darken($ui-gray, 10);
+    border: 1px solid $active-dark-gray;
     border-radius: 5px;
-    background-color: lighten($ui-blue, 40);
+    background-color: $ui-blue-25percent;
     padding: 1rem;
 }
 

src/views/tips/tips.scss

@@ -31,25 +31,23 @@ $base-bg: $ui-white;
     max-width: calc(100% - 2rem);
 }
 
-$darken-button: rgba(0, 0, 0, .1);
-
 .tips-button {
     margin-right: .75rem;
     background-color: $ui-blue;
     color: $ui-white;
     font-size: 1rem;
-    
+
     &.getting-started-button {
         margin-right: 0;
-        background-color: $darken-button;
+        background-color: $ui-aqua;
     }
-    
+
     img {
         margin-right: 1rem;
         height: 1.25rem;
         vertical-align: middle;
     }
-    
+
     a {
         color: $ui-white;
     }
@@ -95,26 +93,26 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
-        
+
         p {
             max-width: $cols4;
         }
     }
-    
+
     //put the image first if in 4-column
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
-        
+
         &.tips-illustration {
             order: -1;
             img {
                 width: $cols4;
             }
         }
-        
+
         .button {
             width: 100%;
         }
@@ -131,13 +129,13 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols6;
         }
     }
-    
+
     .tips-info-body.tips-illustration {
         order: -1;
         img {
@@ -163,27 +161,27 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols6;
         }
     }
-    
+
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;
         }
     }
-    
+
     .tips-info-body {
         max-width: $cols4;
     }
-    
+
     .tips-button {
         width: 100%;
     }
-    
+
     img.mod-flow-left {
         transform: translate(-1*$cols2);
     }
@@ -200,19 +198,19 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols8;
         }
     }
-    
+
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;
         }
     }
-    
+
     .tips-info-body {
         max-width: $cols6;
         &.mod-narrow {