Merge branch 'scss-variables-2' into 'master'

Remove scss variables, part 2

See merge request gitlab-org/gitlab-ce!21169

27 files changed, 65 insertions, 74 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 056d4b7207a..e8e707cf90c 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -85,7 +85,7 @@ strong {
 }
 
 a {
-  color: $gl-link-color;
+  color: $blue-600;
 }
 
 hr {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ea4798fcefd..0dc7aa4ef68 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -434,7 +434,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: $gl-link-color;
+      color: $blue-600;
       text-decoration: none;
     }
   }
@@ -445,7 +445,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: $gl-link-color;
+      color: $blue-600;
       text-decoration: none;
     }
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index af17210f341..268e68dbb15 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -114,7 +114,7 @@ hr {
 .item-title { font-weight: $gl-font-weight-bold; }
 
 .author-link {
-  color: $gl-link-color;
+  color: $blue-600;
 }
 
 .back-link {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 00eac1688f2..54882633fea 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -286,19 +286,19 @@ span.idiff {
 
   .new-file {
     a {
-      color: $gl-text-green;
+      color: $green-600;
     }
   }
 
   .renamed-file {
     a {
-      color: $gl-text-orange;
+      color: $orange-600;
     }
   }
 
   .deleted-file {
     a {
-      color: $gl-text-red;
+      color: $red-500;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index e4bcb92876d..7a4c3914fb0 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -16,10 +16,10 @@
       color: $gl-text-color;
 
       a {
-        color: $gl-link-color;
+        color: $blue-600;
 
         &:hover {
-          color: $gl-link-hover-color;
+          color: $blue-800;
           text-decoration: none;
         }
       }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 437fcff5c62..a70eece8f68 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -170,7 +170,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $placeholder-text-color;
+  color: $gl-text-color-tertiary;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 7290a174668..d8391b59a8c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -179,7 +179,7 @@
   &:hover,
   &:focus {
     svg {
-      fill: $gl-link-color;
+      fill: $blue-600;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 473ca408c04..eccc814b747 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -180,7 +180,7 @@
   }
 
   a > code {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 
   dd {
@@ -423,25 +423,25 @@ h4 {
 input,
 textarea {
   &::-webkit-input-placeholder {
-    color: $placeholder-text-color;
+    color: $gl-text-color-tertiary;
   }
 
   // support firefox 19+ vendor prefix
   &::-moz-placeholder {
-    color: $placeholder-text-color;
+    color: $gl-text-color-tertiary;
     opacity: 1; // FF defaults to 0.54
   }
 
   // scss-lint:disable PseudoElement
   // support Edge vendor prefix
   &::-ms-input-placeholder {
-    color: $placeholder-text-color;
+    color: $gl-text-color-tertiary;
   }
 
   // scss-lint:disable PseudoElement
   // support IE vendor prefix
   &:-ms-input-placeholder {
-    color: $placeholder-text-color;
+    color: $gl-text-color-tertiary;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d2ea314f176..866cb88ba5b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -195,19 +195,10 @@ $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: rgba(255, 255, 255, 1);
 $gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
 $gl-text-color-disabled: #919191;
-$gl-text-green: $green-600;
-$gl-text-green-hover: $green-700;
-$gl-text-red: $red-500;
-$gl-text-orange: $orange-600;
-$gl-link-color: $blue-600;
-$gl-link-hover-color: $blue-800;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
 $gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
-$gl-header-nav-hover-color: #434343;
-$placeholder-text-color: $gl-text-color-tertiary;
 
 /*
  * Lists
@@ -226,7 +217,7 @@ $list-warning-row-color: $orange-700;
 /*
  * Markdown
  */
-$md-link-color: $gl-link-color;
+$md-link-color: $blue-600;
 $md-area-border: #ddd;
 
 /*
@@ -583,8 +574,8 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0);
 $common-gray: $gl-text-color;
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
-$common-red: $gl-text-red;
-$common-green: $gl-text-green;
+$common-red: $red-500;
+$common-green: $green-600;
 
 /*
 * Editor
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index dbd3144b9b4..f2d296fb875 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -44,7 +44,7 @@
   color: $gl-text-color-secondary;
 
   &:hover {
-    color: $gl-link-color;
+    color: $blue-600;
     text-decoration: none;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 2b8163b8c68..af91497d0ea 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1158,7 +1158,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   }
 
   a {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index a68b47b1d02..91f470ca709 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -225,7 +225,7 @@
   outline: 0;
 
   &:hover {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index e8158cd7f6b..1696d18584d 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -221,7 +221,7 @@
       color: $gl-text-color;
 
       &:hover {
-        color: $gl-link-color;
+        color: $blue-600;
         text-decoration: none;
       }
     }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index bce83bf0dd0..10764e0f3df 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -279,7 +279,7 @@
     }
 
     &.autodevops-link {
-      color: $gl-link-color;
+      color: $blue-600;
     }
   }
 
@@ -321,7 +321,7 @@
   }
 
   .commit-sha {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 
   .commit-row-message {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index e2c0a7a6225..bba9f38d3dd 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -360,7 +360,7 @@
       }
 
       .commit-sha {
-        color: $gl-link-color;
+        color: $blue-600;
         line-height: 1.3;
         vertical-align: top;
         font-weight: $gl-font-weight-normal;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 591e21243ed..47778110bae 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -511,13 +511,13 @@
   padding: 0;
   background-color: transparent;
   border: 0;
-  color: $gl-link-color;
+  color: $blue-600;
   font-weight: $gl-font-weight-bold;
 
   &:hover,
   &:focus {
     outline: none;
-    color: $gl-link-hover-color;
+    color: $blue-800;
   }
 
   .caret-icon {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 8a074017344..179c0964567 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -479,10 +479,10 @@
 
     .deploy-info-text-link {
       font-family: $monospace-font;
-      fill: $gl-link-color;
+      fill: $blue-600;
 
       &:hover {
-        fill: $gl-link-hover-color;
+        fill: $blue-800;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 49d8a5d959b..22fce893fd7 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -24,11 +24,11 @@
   }
 
   .graph-additions {
-    color: $gl-text-green;
+    color: $green-600;
   }
 
   .graph-deletions {
-    color: $gl-text-red;
+    color: $red-500;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 8e78d9f65eb..d16a63d009a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -141,7 +141,7 @@
     color: inherit;
 
     &:hover {
-      color: $gl-link-hover-color;
+      color: $blue-800;
 
       .avatar {
         border-color: rgba($avatar-border, .2);
@@ -241,7 +241,7 @@
 
       &:hover {
         text-decoration: underline;
-        color: $gl-link-hover-color;
+        color: $blue-800;
       }
     }
   }
@@ -329,7 +329,7 @@
     }
 
     .btn-secondary-hover-link:hover {
-      color: $gl-link-color;
+      color: $blue-600;
     }
 
     .sidebar-collapsed-icon {
@@ -448,8 +448,8 @@
       }
 
       .todo-undone {
-        color: $gl-link-color;
-        fill: $gl-link-color;
+        color: $blue-600;
+        fill: $blue-600;
       }
 
       .author {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 212e5979273..0f95fb911e1 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -157,7 +157,7 @@ ul.related-merge-requests > li {
 
 .issuable-email-modal-btn {
   padding: 0;
-  color: $gl-link-color;
+  color: $blue-600;
   background-color: transparent;
   border: 0;
   outline: 0;
@@ -190,7 +190,7 @@ ul.related-merge-requests > li {
 
 .create-mr-dropdown-wrap {
   .ref::selection {
-    color: $placeholder-text-color;
+    color: $gl-text-color-tertiary;
   }
 
   .dropdown {
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index b25dc4f419a..d32943fceec 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -114,7 +114,7 @@
     }
 
     &:hover {
-      color: $gl-link-color;
+      color: $blue-600;
 
       &.remove-row {
         color: $gl-danger;
@@ -343,10 +343,10 @@
 
     &.remove-row {
       &:hover {
-        color: $gl-text-red;
+        color: $red-500;
 
         svg {
-          fill: $gl-text-red;
+          fill: $red-500;
         }
       }
     }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 46437ce5841..1e92582d6d9 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -30,7 +30,7 @@
 
     .milestone-progress {
       a {
-        color: $gl-link-color;
+        color: $blue-600;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 8acd64ca1a1..4f861d43f55 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -306,7 +306,7 @@
 
   &:hover,
   &:focus {
-    color: $gl-link-color;
+    color: $blue-600;
     outline: 0;
   }
 
@@ -424,7 +424,7 @@
 
 .uploading-error-icon,
 .uploading-error-message {
-  color: $gl-text-red;
+  color: $red-500;
 }
 
 .uploading-error-message {
@@ -443,7 +443,7 @@
 .attach-new-file,
 .button-attach-file,
 .retry-uploading-link {
-  color: $gl-link-color;
+  color: $blue-600;
   padding: 0;
   background: none;
   border: 0;
@@ -452,5 +452,5 @@
 }
 
 .markdown-selector {
-  color: $gl-link-color;
+  color: $blue-600;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index c369d89d63c..8d28daac750 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -210,7 +210,7 @@ ul.notes {
       }
 
       a {
-        color: $gl-link-color;
+        color: $blue-600;
       }
 
       p {
@@ -253,14 +253,14 @@ ul.notes {
       overflow: hidden;
 
       .system-note-commit-list-toggler {
-        color: $gl-link-color;
+        color: $blue-600;
         padding: 10px 0 0;
         cursor: pointer;
         position: relative;
         z-index: 2;
 
         &:hover {
-          color: $gl-link-color;
+          color: $blue-600;
           text-decoration: underline;
         }
       }
@@ -390,7 +390,7 @@ ul.notes {
     color: inherit;
 
     &:hover {
-      color: $gl-link-color;
+      color: $blue-600;
     }
 
     &:focus,
@@ -451,7 +451,7 @@ ul.notes {
 
 .discussion-headline-light {
   a {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 }
 
@@ -560,12 +560,12 @@ ul.notes {
   &:hover,
   &.is-active {
     .danger-highlight {
-      color: $gl-text-red;
+      color: $red-500;
     }
 
     .link-highlight {
-      color: $gl-link-color;
-      fill: $gl-link-color;
+      color: $blue-600;
+      fill: $blue-600;
     }
 
     .award-control-icon-neutral {
@@ -597,13 +597,13 @@ ul.notes {
   transition: color 0.1s linear;
 
   &:hover {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 
   &:focus {
     text-decoration: underline;
     outline: none;
-    color: $gl-link-color;
+    color: $blue-600;
   }
 
   .fa {
@@ -673,7 +673,7 @@ ul.notes {
   }
 
   a {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 }
 
@@ -759,16 +759,16 @@ ul.notes {
   &:not(.is-disabled) {
     &:hover,
     &:focus {
-      color: $gl-text-green;
+      color: $green-600;
     }
   }
 
   &.is-active {
-    color: $gl-text-green;
+    color: $green-600;
 
     &:hover,
     &:focus {
-      color: $gl-text-green-hover;
+      color: $green-700;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b68c89c25d8..ad057ed3c83 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -175,7 +175,7 @@
     }
 
     .commit-sha {
-      color: $gl-link-color;
+      color: $blue-600;
     }
 
     .badge {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 6d9f415e869..fffb440027c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -388,7 +388,7 @@
     line-height: $gl-btn-line-height;
 
     &:hover {
-      color: $gl-link-color;
+      color: $blue-600;
     }
   }
 }
@@ -961,7 +961,7 @@ pre.light-well {
   margin-left: 5px;
 
   &.is-done {
-    color: $gl-text-green;
+    color: $green-600;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index c9405004c38..5b3a468cd1c 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -259,6 +259,6 @@ input[type='checkbox']:hover {
 
   &:hover,
   &:focus {
-    color: $gl-link-color;
+    color: $blue-600;
   }
 }