25701 standardize text colors25701-standardize-text-colors

21 files changed, 64 insertions, 78 deletions

diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index e9d7cda0647..47a8f44c709 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -4,8 +4,3 @@
   color: $badge-color;
   vertical-align: baseline;
 }
-
-.badge-dark {
-  background-color: $badge-bg-dark;
-  color: $badge-color-dark;
-}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index e9aadffc73c..407c800feb7 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,13 +1,13 @@
 .centered-light-block {
   text-align: center;
-  color: $gl-gray;
+  color: $gl-text-color;
   margin: 20px;
 }
 
 .nothing-here-block {
   text-align: center;
   padding: 20px;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-weight: normal;
   font-size: 14px;
   line-height: 36px;
@@ -29,7 +29,7 @@
   margin-bottom: 0;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
-  color: $gl-gray;
+  color: $gl-text-color;
 
   &.oneline-block {
     line-height: 42px;
@@ -135,11 +135,11 @@
   }
 
   .cover-title {
-    color: $gl-header-color;
+    color: $gl-text-color;
     font-size: 23px;
 
     h1 {
-      color: $gl-gray-dark;
+      color: $gl-text-color;
       margin-bottom: 6px;
       font-size: 23px;
     }
@@ -153,7 +153,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: $gl-text-color-dark;
+      color: $gl-text-color;
     }
   }
 
@@ -211,7 +211,7 @@
       display: inline;
       font-weight: normal;
       font-size: 24px;
-      color: $gl-title-color;
+      color: $gl-text-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a11f1cd7735..e04a87a7327 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -88,7 +88,7 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-white {
@@ -242,7 +242,7 @@
 }
 
 .btn-transparent {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   background-color: transparent;
   border: 0;
 
@@ -338,7 +338,7 @@
   margin-left: 10px;
 
   i {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 67b5aa37ae7..0ce94a26a7f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -412,7 +412,7 @@ table {
     padding: 0 10px;
     clip: auto;
     text-decoration: none;
-    color: $gl-title-color;
+    color: $gl-text-color;
     background: $gray-light;
     z-index: 1;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 889366d6ddf..755eddefa42 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -201,7 +201,7 @@
     }
 
     .icon-play {
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
       margin-right: 6px;
       height: 12px;
       width: 11px;
@@ -209,7 +209,7 @@
   }
 
   .dropdown-header {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
     font-size: 13px;
     line-height: 22px;
     padding: 0 10px;
@@ -222,7 +222,7 @@
   .unclickable {
     cursor: not-allowed;
     padding: 5px 8px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -592,7 +592,7 @@
     }
 
     .ui-datepicker-title {
-      color: $gl-gray;
+      color: $gl-text-color;
       font-size: 14px;
       line-height: 1;
       font-weight: normal;
@@ -614,17 +614,17 @@
 
 .dropdown-menu-inner-title {
   display: block;
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 8726a69867b..25d6fbe465a 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -153,7 +153,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 971940773f7..72b3fe2016c 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -45,7 +45,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: $gl-gray-light;
+        color: $gl-text-color-secondary;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -63,7 +63,7 @@ header {
         &:focus,
         &:active {
           background-color: $gray-light;
-          color: darken($gl-gray-light, 30%);
+          color: darken($gl-text-color-secondary, 30%);
 
           .todos-pending-count {
             background: darken($todo-alert-blue, 10%);
@@ -88,7 +88,7 @@ header {
         }
 
         &.active {
-          color: $gl-gray-light;
+          color: $gl-text-color-secondary;
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 8624a25c052..dccf5177e35 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -34,10 +34,10 @@
 .ci-status-icon-canceled,
 .ci-status-icon-disabled,
 .ci-status-icon-not-found {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   svg {
-    fill: $gl-gray;
+    fill: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 298913108ee..46632f15f35 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -41,6 +41,6 @@
   }
 
   &.status-box-upcoming {
-    background: $gl-gray-light;
+    background: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index bffd0e6f0cd..771dfaec46e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -128,7 +128,7 @@ ul.content-list {
     }
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     .member-group-link {
@@ -230,7 +230,7 @@ ul.content-list {
   }
 
   .label-default {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index e30d81d09f0..5bff694658c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -73,7 +73,7 @@
 }
 
 .referenced-users {
-  color: $gl-header-color;
+  color: $gl-text-color;
   padding-top: 10px;
 }
 
@@ -135,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   background: transparent;
   border: 0;
   outline: 0;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 4f2ac77f228..1acd06122a3 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -46,7 +46,7 @@
 
     &.light {
       a {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5abda13a963..a292e7686f9 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -51,7 +51,7 @@
       margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
 
       &:hover,
@@ -315,7 +315,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .dropdown {
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 625bea96aaa..4decee2c525 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -14,7 +14,7 @@
 
   .header-action-buttons {
     i {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
       font-size: 13px;
       margin-right: 3px;
     }
@@ -42,7 +42,7 @@
 
   .commit-committer-link,
   .commit-author-link {
-    color: $gl-gray;
+    color: $gl-text-color;
     font-weight: bold;
   }
 
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 6078505807e..ff185cd8767 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -7,7 +7,7 @@
   .timeline-entry {
     padding: $gl-padding $gl-btn-padding 11px;
     border-color: $white-normal;
-    color: $gl-gray;
+    color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
 
     &:target {
@@ -32,7 +32,7 @@
 
   .system-note {
     .note-text {
-      color: $gl-gray !important;
+      color: $gl-text-color !important;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 28cbae9a449..12d56359d7d 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -98,7 +98,7 @@
 
   &.label-gray {
     background-color: $label-gray-bg;
-    color: $gl-gray;
+    color: $gl-text-color;
     text-shadow: none;
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 876adf7f712..0fc89d5976a 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -65,11 +65,11 @@ $legend-color: $text-color;
 //
 //##
 
-$pagination-color: $gl-gray;
+$pagination-color: $gl-text-color;
 $pagination-bg: $white-light;
 $pagination-border: $border-color;
 
-$pagination-hover-color: $gl-gray;
+$pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
@@ -121,6 +121,9 @@ $panel-default-heading-bg: $gray-light;
 $panel-footer-bg: $gray-light;
 $panel-inner-border: $border-color;
 
+$badge-bg: $badge-bg;
+$badge-color: $badge-color;
+
 //== Wells
 //
 //##
@@ -154,7 +157,7 @@ $nav-link-padding: 13px $gl-padding;
 //
 //##
 $pre-bg: $gray-light !default;
-$pre-color: $gl-gray !default;
+$pre-color: $gl-text-color !default;
 $pre-border-color: $border-color;
 
 $table-bg-accent: $gray-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d906d26bba9..bd58a26f429 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
 @mixin md-typography {
-  color: $md-text-color;
+  color: $gl-text-color;
   word-wrap: break-word;
 
   a {
@@ -50,14 +50,14 @@
     margin: 16px 0 10px;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
     margin: 16px 0 10px;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h3 {
@@ -100,7 +100,7 @@
   }
 
   p {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
     margin: 6px 0 0;
   }
 
@@ -108,7 +108,7 @@
     @extend .table;
     @extend .table-bordered;
     margin: 12px 0;
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
 
     th {
       background: $label-gray-bg;
@@ -230,7 +230,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
@@ -292,7 +292,7 @@ h2,
 h3,
 h4 {
   small {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc211fc55a7..6595010d221 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -94,29 +94,22 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
-$gl-title-color: #333;
-$gl-text-color: #5c5c5c;
-$gl-text-color-dark: #5c5d5e;
-$gl-text-color-light: #8c8c8c;
+$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-secondary: rgba(0, 0, 0, .55);
+$gl-text-color-disabled: rgba(0, 0, 0, .35);
 $gl-text-green: #4a2;
 $gl-text-red: #d12f19;
 $gl-text-orange: #d90;
 $gl-link-color: #3777b0;
-$gl-diff-text-color: #555;
-$gl-dark-link-color: #333;
-$gl-gray-light: #8f8f8f;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray: $gl-text-color;
-$gl-gray-dark: #313236;
-$gl-header-color: #4c4e54;
 
 /*
  * Lists
  */
 $list-font-size: $gl-font-size;
-$list-title-color: $gl-title-color;
+$list-title-color: $gl-text-color;
 $list-text-color: $gl-text-color;
-$list-text-disabled-color: #888;
+$list-text-disabled-color: $gl-text-color-disabled;
 $list-border-light: #eee;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
@@ -127,7 +120,6 @@ $list-warning-row-color: #8a6d3b;
 /*
  * Markdown
  */
-$md-text-color: $gl-text-color;
 $md-link-color: $gl-link-color;
 $md-area-border: #ddd;
 
@@ -168,9 +160,7 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 $issue-status-expired: #cea61b;
-$issuable-sidebar-color: #999;
-$issuable-avatar-hover-border: #999;
-$issuable-clipboard-color: #999;
+$issuable-sidebar-color: $gl-text-color-secondary;
 $show-aside-bg: #eee;
 $show-aside-color: #777;
 $show-aside-shadow: #ddd;
@@ -282,10 +272,8 @@ $btn-active-gray-light: e4e7ed;
 /*
 * Badges
 */
-$badge-bg: #f3f3f3;
-$badge-bg-dark: #eee;
-$badge-color: #929292;
-$badge-color-dark: #8f8f8f;
+$badge-bg: #eee;
+$badge-color: $gl-text-color-secondary;
 
 /*
  *  Award emoji
@@ -304,8 +292,8 @@ $location-icon-color: #e7e9ed;
 /*
  *  Notes
  */
-$notes-light-color: #8e8e8e;
-$notes-role-color: #8e8e8e;
+$notes-light-color: $gl-text-color-secondary;
+$notes-role-color: $gl-text-color-secondary;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
@@ -330,7 +318,7 @@ $calendar-user-contrib-text: #959494;
 $cycle-analytics-box-padding: 30px;
 $cycle-analytics-box-text-color: #8c8c8c;
 $cycle-analytics-big-font: 19px;
-$cycle-analytics-dark-text: $gl-title-color;
+$cycle-analytics-dark-text: $gl-text-color;
 $cycle-analytics-light-gray: #bfbfbf;
 $cycle-analytics-dismiss-icon-color: #b2b2b2;
 
@@ -382,7 +370,7 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
 /*
 * Common
 */
-$common-gray: $gl-gray;
+$common-gray: $gl-text-color;
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
 $common-red: $gl-text-red;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index f9c850ebdc8..32eb750180f 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -1,6 +1,6 @@
 .info-well {
   background: $gray-light;
-  color: $gl-gray;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 84b639fabf5..97ade638db6 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,7 +40,7 @@
 }
 
 .zen-control-full {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 
   &:hover {
     color: $gl-link-color;