Merge branch 'refactor-variables' into 'master'

Refactor variables

Fixes #13803 and other color inconsistency across application

cc @jschatz1 @skyruler 

See merge request !3304

4 files changed, 64 insertions, 33 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 211ead7319d..d455a3d8e29 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,45 +1,74 @@
-$row-hover: #f4f8fe;
-$gl-text-color: #54565b;
-$gl-text-green: #4a2;
-$gl-text-red: #d12f19;
-$gl-text-orange: #d90;
-$gl-header-color: #323232;
-$gl-link-color: #333c48;
-$md-text-color: #444;
-$md-link-color: #3084bb;
-$progress-color: #c0392b;
-$gl-font-size: 15px;
-$list-font-size: 15px;
+/*
+ * Layout
+ */
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
-$avatar_radius: 50%;
-$code_font_size: 13px;
-$code_line_height: 1.5;
+
+/*
+ * UI elements
+ */
 $border-color: #efeff1;
 $table-border-color: #eef0f2;
 $background-color: #faf9f9;
-$header-height: 58px;
-$fixed-layout-width: 1280px;
-$gl-gray: #5a5a5a;
+
+/*
+ * Text
+ */
+$gl-font-size: 15px;
+$gl-title-color: #333;
+$gl-text-color: #555;
+$gl-placeholder-color: #8f8f8f;
+$gl-text-green: #4a2;
+$gl-text-red: #d12f19;
+$gl-text-orange: #d90;
+$gl-header-color: $gl-title-color;
+$gl-link-color: #333c48;
+$gl-gray: $gl-text-color;
+
+/*
+ * Lists
+ */
+$list-font-size: $gl-font-size;
+$list-title-color: $gl-title-color;
+$list-text-color: $gl-text-color;
+
+/*
+ * Markdown
+ */
+$md-text-color: #444;
+$md-link-color: #3084bb;
+
+/*
+ * Code
+ */
+$code_font_size: 13px;
+$code_line_height: 1.5;
+
+/*
+ * Padding
+ */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
+
+/*
+ * Misc
+ */
+$row-hover: #f4f8fe;
+$progress-color: #c0392b;
+$avatar_radius: 50%;
+$header-height: 58px;
+$fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
-$secondary-text: #7f8fa4;
 $error-exclamation-point: #e62958;
 $border-radius-default: 3px;
-$list-title-color: #333;
-$list-text-color: #555;
-
 $btn-transparent-color: #8f8f8f;
-
 $ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
-
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
 
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index b39a9abf40f..040e1d38678 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -6,7 +6,7 @@
   font-size: $gl-font-size;
   padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
   border-bottom: 1px solid $table-border-color;
-  color: #7f8fa4;
+  color: $list-text-color;
 
   &.event-inline {
     .avatar {
@@ -31,9 +31,10 @@
   .event-title {
     @include str-truncated(calc(100% - 174px));
     font-weight: 600;
+    color: $list-title-color;
 
-    .author_name {
-      color: #333;
+    a {
+      color: $list-title-color;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 7ac4bc468d6..76bd6d9a8a7 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -130,14 +130,14 @@ form.edit-issue {
 }
 
 .issue-closed-by-widget {
-  color: $secondary-text;
+  color: $gl-text-color;
   margin-left: 52px;
 }
 
 .editor-details {
   display: block;
-  
+
   @media (min-width: $screen-sm-min) {
     display: inline-block;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 27970eba159..dbd6585fc31 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -16,7 +16,7 @@
 .todo-item {
   font-size: $gl-font-size;
   padding-left: $gl-avatar-size + $gl-padding-top;
-  color: $secondary-text;
+  color: $gl-text-color;
 
   a {
     color: #4c4e54;
@@ -29,9 +29,10 @@
   .todo-title {
     @include str-truncated(calc(100% - 174px));
     font-weight: 600;
+    color: $list-title-color;
 
-    .author-name {
-      color: #333;
+    a {
+      color: $list-title-color;
     }
   }