Add latest changes from gitlab-org/gitlab@master

31 files changed, 98 insertions, 98 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 7760c48cb92..0eab86ff7ea 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -17,7 +17,7 @@
   z-index: 300;
   width: $award-emoji-width;
   font-size: 14px;
-  background-color: $white-light;
+  background-color: $white;
   border: 1px solid $border-white-light;
   border-radius: $border-radius-base;
   box-shadow: 0 6px 12px $award-emoji-menu-shadow;
@@ -135,7 +135,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: $white-light;
+      background-color: $white;
       border-color: $border-color;
       box-shadow: none;
     }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f922d8bcaab..f42e500efa8 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -40,7 +40,7 @@
   }
 
   &.white {
-    background-color: $white-light;
+    background-color: $white;
   }
 
   &.top-block {
@@ -73,7 +73,7 @@
 
   &.content-component-block {
     padding: 11px 0;
-    background-color: $white-light;
+    background-color: $white;
   }
 
   .title {
@@ -96,13 +96,13 @@
   }
 
   &.build-content {
-    background-color: $white-light;
+    background-color: $white;
     border-top: 0;
   }
 }
 
 .sub-header-block {
-  background-color: $white-light;
+  background-color: $white;
   border-bottom: 1px solid $white-dark;
   padding: 11px 0;
   margin-bottom: 11px;
@@ -176,7 +176,7 @@
   }
 
   &.groups-cover-block {
-    background: $white-light;
+    background: $white;
     border-bottom: 1px solid $border-color;
     text-align: left;
     padding: 24px 0;
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index 359f4681938..9903d10d27c 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -31,7 +31,7 @@
   right: $gl-padding;
   max-width: 300px;
   width: auto;
-  background: $white-light;
+  background: $white;
   border: 1px solid $gray-200;
   box-shadow: 0 1px 2px 0 rgba($black, 0.1);
   border-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ecbc5fa9351..38cef3de777 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,6 +1,6 @@
 @mixin btn-comment-icon {
   border-radius: 50%;
-  background: $white-light;
+  background: $white;
   padding: 1px;
   font-size: 12px;
   color: $blue-500;
@@ -12,7 +12,7 @@
   &.inverted {
     background: $blue-500;
     border-color: $blue-600;
-    color: $white-light;
+    color: $white;
   }
 
   &:active {
@@ -104,23 +104,23 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
+  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
+  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
+  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white);
 }
 
 @mixin btn-red {
-  @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
+  @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white);
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
+  @include btn-color($white, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
@@ -173,21 +173,21 @@
 
   &.btn-inverted {
     &.btn-success {
-      @include btn-outline($white-light, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
+      @include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
     }
 
     &.btn-remove,
     &.btn-danger {
-      @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
+      @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
     }
 
     &.btn-warning {
-      @include btn-outline($white-light, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
+      @include btn-outline($white, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
     }
 
     &.btn-primary,
     &.btn-info {
-      @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
+      @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
     }
   }
 
@@ -202,11 +202,11 @@
 
   &.btn-close,
   &.btn-close-color {
-    @include btn-outline($white-light, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
+    @include btn-outline($white, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
+    @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
   }
 
   &.btn-danger,
@@ -249,7 +249,7 @@
     padding: 6px 16px;
     border-color: $border-color;
     color: $gray-darkest;
-    background-color: $white-light;
+    background-color: $white;
 
     &:hover,
     &:active,
@@ -409,13 +409,13 @@
   cursor: default;
 
   &:active {
-    box-shadow: inset 0 0 0 $white-light;
+    box-shadow: inset 0 0 0 $white;
   }
 }
 
 .btn-inverted {
   &-secondary {
-    @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
+    @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
   }
 }
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 9638fee6078..de767ac3fe0 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -83,7 +83,7 @@
 
   .pika-day {
     border-radius: 0;
-    background-color: $white-light;
+    background-color: $white;
     text-align: center;
   }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 0aae2f20671..211e1e30161 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -5,7 +5,7 @@
 .cgreen { color: $green-600; }
 .cdark { color: $common-gray-dark; }
 
-.fwhite { fill: $white-light; }
+.fwhite { fill: $white; }
 .fgray { fill: $gray-700; }
 
 .text-plain,
@@ -207,10 +207,10 @@ li.note {
   padding: 10px;
   background: $red-400;
   margin: 0;
-  color: $white-light;
+  color: $white;
 
   a {
-    color: $white-light;
+    color: $white;
     text-decoration: underline;
   }
 }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 0e29b0b7dda..11064f18418 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -48,7 +48,7 @@
 
   .avatar-container {
     flex: 0 0 40px;
-    background-color: $white-light;
+    background-color: $white;
   }
 
   .sidebar-context-title {
@@ -63,7 +63,7 @@
 }
 
 .settings-avatar {
-  background-color: $white-light;
+  background-color: $white;
 
   svg {
     fill: $gl-text-color-secondary;
@@ -282,7 +282,7 @@
           min-width: 150px;
           margin-top: -1px;
           padding: 4px 1px;
-          background-color: $white-light;
+          background-color: $white;
           box-shadow: 2px 1px 3px $dropdown-shadow-color;
           border: 1px solid $gray-darker;
           border-left: 0;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 1804f70b37c..a56505ee6e2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -66,7 +66,7 @@
 .dropdown-toggle,
 .confidential-merge-request-fork-group .dropdown-toggle {
   padding: 6px 8px 6px 10px;
-  background-color: $white-light;
+  background-color: $white;
   color: $gl-text-color;
   font-size: 14px;
   text-align: left;
@@ -183,7 +183,7 @@
   }
 
   .avatar {
-    border-color: $white-light;
+    border-color: $white;
   }
 }
 
@@ -258,7 +258,7 @@
   font-size: 14px;
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
-  background-color: $white-light;
+  background-color: $white;
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
@@ -1009,7 +1009,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: 100%;
     position: absolute;
     bottom: 0;
-    background: linear-gradient(to top, $white-light 0, rgba($white-light, 0));
+    background: linear-gradient(to top, $white 0, rgba($white, 0));
     transition: opacity $fade-mask-transition-duration $fade-mask-transition-curve;
     content: '';
     pointer-events: none;
@@ -1024,7 +1024,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
   .labels-select-dropdown-contents {
     min-height: $dropdown-min-height;
     max-height: 330px;
-    background-color: $white-light;
+    background-color: $white;
     border: 1px solid $border-color;
     box-shadow: 0 2px 4px $dropdown-shadow-color;
     z-index: 2;
@@ -1038,7 +1038,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     top: 0;
     left: 0;
     opacity: 0.5;
-    background-color: $white-light;
+    background-color: $white;
     z-index: 1;
   }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 9d21b67c95e..7ee3e68ceea 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -105,7 +105,7 @@
   }
 
   .file-content {
-    background: $white-light;
+    background: $white;
 
     &.image_file,
     &.audio,
@@ -131,7 +131,7 @@
 
     &.blob-no-preview {
       background: $gray-darker;
-      text-shadow: 0 1px 2px $white-light;
+      text-shadow: 0 1px 2px $white;
       padding: 100px 0;
     }
 
@@ -227,7 +227,7 @@
         padding: 10px 0;
         border-left: 1px solid $border-color;
         margin-bottom: 0;
-        background: $white-light;
+        background: $white;
 
         li {
           color: $logs-li-color;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e151fff7eb3..9a473876fa0 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -190,7 +190,7 @@
   width: 100%;
   min-width: 0;
   border: 1px solid $border-color;
-  background-color: $white-light;
+  background-color: $white;
   border-radius: $border-radius-default 0 0 $border-radius-default;
 
   @include media-breakpoint-down(sm) {
@@ -244,7 +244,7 @@
 
   .clear-search {
     width: 35px;
-    background-color: $white-light;
+    background-color: $white;
     border: 0;
     outline: none;
     z-index: 1;
@@ -361,7 +361,7 @@
   .issues-details-filters {
     padding-top: 0;
     padding-bottom: 0;
-    background-color: $white-light;
+    background-color: $white;
     border-top: 0;
   }
 
@@ -409,7 +409,7 @@
     }
 
     .dropdown-label-box {
-      border-color: $white-light;
+      border-color: $white;
       border-style: solid;
       border-width: 1px;
       width: 17px;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 69ef116043a..44c8ace9040 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -9,7 +9,7 @@ input {
 input[type='text'].danger {
   background: $input-danger-bg !important;
   border-color: $red-400;
-  text-shadow: 0 1px 1px $white-light;
+  text-shadow: 0 1px 1px $white;
 }
 
 .datetime-controls {
@@ -81,7 +81,7 @@ label {
 
   .form-control {
     height: 29px;
-    background: $white-light;
+    background: $white;
     font-family: $monospace-font;
   }
 
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index 6943bfbc3d0..fbafb22cf37 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -30,7 +30,7 @@
 
   width: $chip-size;
   height: $chip-size;
-  background: $white-light;
+  background: $white;
   background-image: linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%),
     linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%);
   background-size: $bg-size $bg-size;
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index d0c3de59937..6a2f36d2509 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -77,7 +77,7 @@
           &:focus:hover,
           &:focus {
             &.header-user-dropdown-toggle .header-user-notification-dot {
-              border-color: $white-light;
+              border-color: $white;
             }
           }
 
@@ -152,7 +152,7 @@
 
     &.search-active {
       form {
-        background-color: $white-light;
+        background-color: $white;
       }
 
       .search-input-wrap {
@@ -216,7 +216,7 @@ body {
       $indigo-700,
       $indigo-800,
       $indigo-900,
-      $white-light
+      $white
     );
   }
 
@@ -227,7 +227,7 @@ body {
       $indigo-500,
       $indigo-700,
       $indigo-700,
-      $white-light
+      $white
     );
   }
 
@@ -238,7 +238,7 @@ body {
       $theme-blue-700,
       $theme-blue-800,
       $theme-blue-900,
-      $white-light
+      $white
     );
   }
 
@@ -249,7 +249,7 @@ body {
       $theme-light-blue-500,
       $theme-light-blue-700,
       $theme-light-blue-700,
-      $white-light
+      $white
     );
   }
 
@@ -260,7 +260,7 @@ body {
       $theme-green-700,
       $theme-green-800,
       $theme-green-900,
-      $white-light
+      $white
     );
   }
 
@@ -271,7 +271,7 @@ body {
       $theme-green-500,
       $theme-light-green-700,
       $theme-light-green-700,
-      $white-light
+      $white
     );
   }
 
@@ -282,7 +282,7 @@ body {
       $theme-red-700,
       $theme-red-800,
       $theme-red-900,
-      $white-light
+      $white
     );
   }
 
@@ -293,7 +293,7 @@ body {
       $theme-light-red-500,
       $theme-light-red-700,
       $theme-light-red-700,
-      $white-light
+      $white
     );
   }
 
@@ -304,7 +304,7 @@ body {
       $gray-700,
       $gray-800,
       $gray-900,
-      $white-light
+      $white
     );
   }
 
@@ -338,7 +338,7 @@ body {
           &.active > a,
           &.active > a:hover,
           &.active > button {
-            color: $white-light;
+            color: $white;
           }
         }
       }
@@ -354,11 +354,11 @@ body {
 
     .search {
       form {
-        background-color: $white-light;
+        background-color: $white;
         box-shadow: inset 0 0 0 1px $border-color;
 
         &:hover {
-          background-color: $white-light;
+          background-color: $white;
           box-shadow: inset 0 0 0 1px $blue-200;
         }
       }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0e507fd0988..3792e6cb0a6 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -18,7 +18,7 @@
       width: 55px;
       height: 14px;
       margin: 0;
-      fill: $white-light;
+      fill: $white;
     }
   }
 
@@ -95,7 +95,7 @@
 
     .dropdown.open {
       > a {
-        border-bottom-color: $white-light;
+        border-bottom-color: $white;
       }
     }
 
@@ -209,10 +209,10 @@
           text-decoration: none;
           outline: 0;
           opacity: 1;
-          color: $white-light;
+          color: $white;
 
           &.header-user-dropdown-toggle .header-user-avatar {
-            border-color: $white-light;
+            border-color: $white;
           }
         }
       }
@@ -224,14 +224,14 @@
       .impersonated-user,
       .impersonated-user:hover {
         margin-right: 1px;
-        background-color: $white-light;
+        background-color: $white;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
 
       .impersonation-btn,
       .impersonation-btn:hover {
-        background-color: $white-light;
+        background-color: $white;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
 
@@ -264,7 +264,7 @@
       &:focus {
         text-decoration: none;
         outline: 0;
-        color: $white-light;
+        color: $white;
       }
     }
 
@@ -441,7 +441,7 @@
   margin: 4px 0 4px 2px;
 
   &:hover {
-    background-color: $white-light;
+    background-color: $white;
   }
 }
 
@@ -452,7 +452,7 @@
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;
     font-size: 11px;
-    color: $white-light;
+    color: $white;
     padding: 0 5px;
     line-height: 12px;
     border-radius: 7px;
@@ -583,7 +583,7 @@
 .navbar-empty {
   justify-content: center;
   height: $header-height;
-  background: $white-light;
+  background: $white;
   border-bottom: 1px solid $white-normal;
 
   .tanuki-logo,
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 1a38f3ccce4..385b29f8bbe 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: $gl-padding-8;
-  color: $white-light;
+  color: $white;
   font-size: $gl-font-size;
   line-height: $gl-line-height-24;
 
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index fefc51bf1f7..1a26c0283e5 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -34,7 +34,7 @@
 
 .collapsible-line {
   &:hover {
-    background-color: rgba($white-light, 0.2);
+    background-color: rgba($white, 0.2);
   }
 
   .arrow {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 8038a367fb9..cac3695e1a1 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -12,7 +12,7 @@ body {
   text-decoration-skip: ink;
   // scss-lint:enable PropertySpelling
   &.navless {
-    background-color: $white-light !important;
+    background-color: $white !important;
   }
 
   &.board-card-content {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 0bf911eec0a..97698fefbee 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -122,7 +122,7 @@
 
 .markdown-area {
   border-radius: 0;
-  background: $white-light;
+  background: $white;
   border: 1px solid $gray-100;
   min-height: 140px;
   max-height: 500px;
diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss
index 06e1ebe41be..b0bfc4f47ff 100644
--- a/app/assets/stylesheets/framework/memory_graph.scss
+++ b/app/assets/stylesheets/framework/memory_graph.scss
@@ -1,4 +1,4 @@
 .memory-graph-container {
-  background: $white-light;
+  background: $white;
   border: 1px solid $gray-200;
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 621a4eddc34..76b12b2405f 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -302,7 +302,7 @@
     margin: auto auto 12px;
     border-radius: 50%;
     animation: blinking-dot 1s linear infinite;
-    background: $white-light;
+    background: $white;
 
     &:nth-child(2) {
       animation-delay: 0.33s;
@@ -393,7 +393,7 @@
 
 @mixin avatar-counter($border-radius: 1em) {
   background-color: $gray-darkest;
-  color: $white-light;
+  color: $white;
   border: 1px solid $gray-normal;
   border-radius: $border-radius;
   font-family: $regular-font;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 7e15e5c8bfd..d4ee59790e9 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -305,7 +305,7 @@
 
 .inner-page-scroll-tabs {
   .fade-right {
-    @include fade(left, $white-light);
+    @include fade(left, $white);
     right: 0;
     text-align: right;
 
@@ -315,7 +315,7 @@
   }
 
   .fade-left {
-    @include fade(right, $white-light);
+    @include fade(right, $white);
     left: 0;
     text-align: left;
 
@@ -345,7 +345,7 @@
     @include scrolling-links();
 
     .fade-right {
-      @include fade(left, $white-light);
+      @include fade(left, $white);
       right: -5px;
 
       .fa {
@@ -354,7 +354,7 @@
     }
 
     .fade-left {
-      @include fade(right, $white-light);
+      @include fade(right, $white);
       left: -5px;
 
       .fa {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index a8244219b10..3c428cc352f 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -11,7 +11,7 @@
 .select2-container,
 .select2-container.select2-drop-above {
   .select2-choice {
-    background: $white-light;
+    background: $white;
     border-color: $input-border;
     height: 34px;
     padding: $gl-vert-padding $gl-input-padding;
@@ -166,7 +166,7 @@
 
   input {
     padding: $grid-size;
-    background: $white-light image-url('select2.png');
+    background: $white image-url('select2.png');
     background-clip: content-box;
     background-origin: content-box;
     background-repeat: no-repeat;
@@ -181,7 +181,7 @@
     }
 
     &.select2-active {
-      background-color: $white-light;
+      background-color: $white;
       background-image: image-url('select2-spinner.gif') !important;
       background-origin: content-box;
       background-repeat: no-repeat;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 36f8bdbe611..ddda2de38cb 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -23,7 +23,7 @@
 
   &:hover,
   &:focus {
-    color: $white-light;
+    color: $white;
     text-decoration: none;
   }
 }
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index 2255d3be75b..0a57a74eafc 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -14,7 +14,7 @@
     padding: 0 5px;
     font-size: $tooltip-font-size;
     font-weight: normal;
-    color: $white-light;
+    color: $white;
     line-height: 16px;
 
     &:hover {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index ba406bac50b..514bd090e28 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -15,11 +15,11 @@ table {
     .warning,
     .danger,
     .info {
-      color: $white-light;
+      color: $white;
 
       a:not(.btn) {
         text-decoration: underline;
-        color: $white-light;
+        color: $white;
       }
     }
 
@@ -53,7 +53,7 @@ table {
 
     .thead-white {
       th {
-        background-color: $white-light;
+        background-color: $white;
         color: $gl-text-color-secondary;
         border-top: 0;
       }
diff --git a/app/assets/stylesheets/framework/tabs.scss b/app/assets/stylesheets/framework/tabs.scss
index 6b60149fbbb..ad83fc03e71 100644
--- a/app/assets/stylesheets/framework/tabs.scss
+++ b/app/assets/stylesheets/framework/tabs.scss
@@ -11,7 +11,7 @@
     }
 
     &.active {
-      background: $white-light;
+      background: $white;
     }
 
     a {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 42a739e88f7..ff6ac87db76 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -27,7 +27,7 @@
 
 .timeline-entry {
   color: $gl-text-color;
-  background-color: $white-light;
+  background-color: $white;
 
   .timeline-entry-inner {
     position: relative;
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 5f8ac3b7e37..8b131f59cfc 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -76,7 +76,7 @@
   .loading-icon {
     display: none;
     font-size: 12px;
-    color: $white-light;
+    color: $white;
     position: absolute;
     top: 50%;
     left: 50%;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d61a32d2d95..b2bbc09664c 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -178,7 +178,7 @@
     overflow-x: auto;
 
     tbody {
-      background-color: $white-light;
+      background-color: $white;
 
       td {
         border-color: $gray-200;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 86b65ea34f3..b4ed6587fca 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -81,7 +81,7 @@ $darken-dark-factor: 10%;
 $darken-border-factor: 5%;
 $darken-border-dashed-factor: 25%;
 
-$white-light: #fff;
+$white: #fff;
 $white-normal: #f0f0f0;
 $white-dark: #eaeaea;
 $white-transparent: rgba(255, 255, 255, 0.8);
@@ -323,7 +323,7 @@ $theme-light-red-500: #c24b38;
 $theme-light-red-600: #b03927;
 $theme-light-red-700: #a62e21;
 
-$border-white-light: darken($white-light, $darken-border-factor);
+$border-white-light: darken($white, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);
 
 $border-gray-light: darken($gray-light, $darken-border-factor);
@@ -824,7 +824,7 @@ $perf-bar-production: #222;
 $perf-bar-staging: #291430;
 $perf-bar-development: #4c1210;
 $perf-bar-bucket-bg: #111;
-$perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
+$perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
 $perf-bar-canary-text: $orange-400;
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index a4fbd9c073f..dd5b99be57e 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,6 +1,6 @@
 .zen-backdrop {
   &.fullscreen {
-    background-color: $white-light;
+    background-color: $white;
     position: fixed;
     top: 0;
     bottom: 0;