Move all hex colors in SASS to variables and all variations to darken/lighten

1 files changed, 64 insertions, 64 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 7e61323ab..73d1acccd 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,12 +1,12 @@
 .button {
-  background-color: #2b90d9;
+  background-color: $color4;
   font-family: inherit;
   display: inline-block;
   position: relative;
   box-sizing: border-box;
   text-align: center;
   border: 10px none;
-  color: #fff;
+  color: $color5;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0;
@@ -19,56 +19,56 @@
   text-decoration: none;
 
   &:hover {
-    background-color: #489fde;
+    background-color: lighten($color4, 7%);
   }
 
   &:disabled {
-    background-color: #9baec8;
+    background-color: $color3;
     cursor: default;
   }
 
   &.button-secondary {
-    background-color: #282c37;
+    background-color: $color1;
 
     &:hover {
-      background-color: #282c37;
+      background-color: $color1;
     }
 
     &:disabled {
-      background-color: #9baec8;
+      background-color: $color3;
     }
   }
 }
 
 .icon-button {
-  color: #616b86;
+  color: lighten($color1, 26%);
   border: none;
   background: transparent;
   cursor: pointer;
 
   &:hover {
-    color: #717b98;
+    color: lighten($color1, 33%);
   }
 
   &.disabled {
-    color: #454b5e;
+    color: lighten($color1, 13%);
     cursor: default;
   }
 
   &.active {
-    color: #2b90d9;
+    color: $color4;
   }
 }
 
 .lightbox .icon-button {
-  color: #282c37;
+  color: $color1;
 }
 
 .compose-form__textarea, .follow-form__input {
-  background: #fff;
+  background: $color5;
 
   &:disabled {
-    background: #d9e1e8;
+    background: $color2;
   }
 }
 
@@ -107,7 +107,7 @@
   }
 
   a {
-    color: #d9e1e8;
+    color: $color2;
     text-decoration: none;
 
     &:hover {
@@ -139,11 +139,11 @@
 }
 
 .reply-indicator__content {
-  color: #282c37;
+  color: $color1;
   font-size: 14px;
 
   a {
-    color: #535b72;
+    color: lighten($color1, 20%);
   }
 }
 
@@ -189,7 +189,7 @@
 
 .status__display-name, .account__display-name {
   strong {
-    color: #fff;
+    color: $color5;
   }
 
   &.muted {
@@ -214,7 +214,7 @@
 }
 
 .detailed-status__display-name {
-  color: #d9e1e8;
+  color: $color2;
   line-height: 24px;
 
   strong, span {
@@ -223,17 +223,17 @@
 
   strong {
     font-size: 16px;
-    color: #fff;
+    color: $color5;
   }
 }
 
 .muted {
   .status__content p, .status__content a {
-    color: #616b86;
+    color: lighten($color1, 26%);
   }
 
   .status__display-name strong {
-    color: #616b86;
+    color: lighten($color1, 26%);
   }
 
   .status__avatar {
@@ -246,7 +246,7 @@
   text-decoration: none;
 
   &:hover {
-    color: #fff;
+    color: $color5;
     text-decoration: underline;
   }
 }
@@ -282,17 +282,17 @@
     height: 0;
     border-style: solid;
     border-width: 0 4.5px 7.8px 4.5px;
-    border-color: transparent transparent #d9e1e8 transparent;
+    border-color: transparent transparent $color2 transparent;
     top: -7px;
     left: 8px;
   }
 
   ul {
     list-style: none;
-    background: #d9e1e8;
+    background: $color2;
     padding: 4px 0;
     border-radius: 4px;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0 15px rgba($color8, 0.4);
     min-width: 100px;
   }
 
@@ -302,12 +302,12 @@
     padding: 6px 16px;
     width: 100px;
     text-decoration: none;
-    background: #d9e1e8;
-    color: #282c37;
+    background: $color2;
+    color: $color1;
 
     &:hover {
-      background: #2b90d9;
-      color: #d9e1e8;
+      background: $color4;
+      color: $color2;
     }
   }
 }
@@ -315,7 +315,7 @@
 .static-content {
   padding: 10px;
   padding-top: 20px;
-  color: #616b86;
+  color: lighten($color1, 26%);
 
   h1 {
     font-size: 16px;
@@ -350,13 +350,13 @@
 }
 
 .drawer__inner {
-  background: linear-gradient(rgba(69, 75, 94, 1), rgba(69, 75, 94, 0.65));
+  background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
 }
 
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: darken(#454b5e, 5%);
+  background: lighten($color1, 8%);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
@@ -365,7 +365,7 @@
     transition: all 100ms ease-in;
 
     &:hover {
-      background: darken(#454b5e, 10%);
+      background: lighten($color1, 3%);
       transition: all 200ms ease-out;
     }
   }
@@ -424,22 +424,22 @@
   top: 100%;
   width: 100%;
   z-index: 99;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 15px rgba($color8, 0.4);
 }
 
 .react-autosuggest__section-title {
-  background: #9baec8;
+  background: $color3;
   padding: 4px 10px;
   font-weight: 500;
   cursor: default;
-  color: #282c37;
+  color: $color1;
   text-transform: uppercase;
   font-size: 11px;
 }
 
 .react-autosuggest__suggestions-list {
-  background: #d9e1e8;
-  color: #282c37;
+  background: $color2;
+  color: $color1;
   font-size: 14px;
 }
 
@@ -449,8 +449,8 @@
 }
 
 .react-autosuggest__suggestion--focused {
-  background: #2b90d9;
-  color: #fff;
+  background: $color4;
+  color: $color5;
 }
 
 .scrollable {
@@ -478,7 +478,7 @@
   border: 0;
   padding: 0;
   user-select: none;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba($color8, 0);
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -504,20 +504,20 @@
   height: 24px;
   padding: 0;
   border-radius: 30px;
-  background-color: #282c37;
+  background-color: $color1;
   transition: all 0.2s ease;
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: darken(#282c37, 10%);
+  background-color: darken($color1, 10%);
 }
 
 .react-toggle--checked .react-toggle-track {
-  background-color: #2b90d9;
+  background-color: $color4;
 }
 
 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: lighten(#2b90d9, 10%);
+  background-color: lighten($color4, 10%);
 }
 
 .react-toggle-track-check {
@@ -564,23 +564,23 @@
   left: 1px;
   width: 22px;
   height: 22px;
-  border: 1px solid #282c37;
+  border: 1px solid $color1;
   border-radius: 50%;
-  background-color: #FAFAFA;
+  background-color: darken($color5, 2%);
   box-sizing: border-box;
   transition: all 0.25s ease;
 }
 
 .react-toggle--checked .react-toggle-thumb {
   left: 27px;
-  border-color: #2b90d9;
+  border-color: $color4;
 }
 
 .column-link {
-  background: #373b4a;
+  background: lighten($color1, 6%);
 
   &:hover {
-    background: lighten(#373b4a, 5%);
+    background: lighten($color1, 11%);
   }
 }
 
@@ -594,7 +594,7 @@
   width: 100%;
   height: 100px;
   resize: none;
-  color: #282c37;
+  color: $color1;
   padding: 7px;
   font-family: inherit;
   font-size: 14px;
@@ -605,7 +605,7 @@
   transition: border-color 0.3s ease;
 
   &.file-drop {
-    border-color: #aaa;
+    border-color: darken($color5, 33%);
   }
 }
 
@@ -614,9 +614,9 @@
   top: 100%;
   width: 100%;
   z-index: 99;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-  background: #d9e1e8;
-  color: #282c37;
+  box-shadow: 0 0 15px rgba($color8, 0.4);
+  background: $color2;
+  color: $color1;
   font-size: 14px;
 }
 
@@ -625,12 +625,12 @@
   cursor: pointer;
 
   &:hover {
-    background: darken(#d9e1e8, 10%);
+    background: darken($color2, 10%);
   }
 
   &.selected {
-    background: #2b90d9;
-    color: #fff;
+    background: $color4;
+    color: $color5;
   }
 }
 
@@ -652,14 +652,14 @@
 }
 
 .setting-text {
-  color: #9baec8;
+  color: $color3;
   background: transparent;
   border: none;
-  border-bottom: 2px solid #9baec8;
+  border-bottom: 2px solid $color3;
 
   &:focus, &:active {
-    color: #fff;
-    border-bottom-color: #2b90d9;
+    color: $color5;
+    border-bottom-color: $color4;
   }
 }
 
@@ -683,6 +683,6 @@ button.active i.fa-retweet {
 
 .status-card {
   &:hover {
-    background: #363c4b;
+    background: lighten($color1, 6%);
   }
 }