Merge branch 'no-white-light' into 'master'

Rename '$white-light` variable to `$white` See merge request gitlab-org/gitlab!28254

Merge branch 'no-white-light' into 'master'
Rename '$white-light` variable to `$white` See merge request gitlab-org/gitlab!28254
dc27484e · Denys Mishunov · 7596dd3d · d3330950 · dc27484e · dc27484e
Commit dc27484e authored Mar 30, 2020 by Denys Mishunov
84 changed files
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -8,7 +8,7 @@ $brand-danger: $red-500;

 $border-radius-base: 3px !default;

-$modal-body-bg: $white-light;
+$modal-body-bg: $white;
 $input-border: $border-color;

 $padding-base-vertical: $gl-vert-padding;
@@ -168,7 +168,7 @@ table {
 .bg-danger,
 .bg-warning {
  .card-header {
-    color: $white-light;
+    color: $white;
  }
 }

@@ -310,11 +310,11 @@ pre code {
 .alert-info,
 .alert-warning,
 .alert-danger {
-  color: $white-light;
+  color: $white;

  h4,
  .alert-link {
-    color: $white-light;
+    color: $white;
  }
 }


--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
@@ -12,7 +12,7 @@
    border-color: $blue-600;

    .popover-body {
-      color: $white-light;
+      color: $white;
    }

    &.bs-popover-bottom {
@@ -65,7 +65,7 @@
  }

  > .popover-header::before {
-    border-color: $white-light;
+    border-color: $white;
  }
 }

@@ -78,7 +78,7 @@
 }

 .popover-header {
-  background-color: $white-light;
+  background-color: $white;
  font-size: $gl-font-size-small;
 }

@@ -116,7 +116,7 @@

  .accept-mr-label {
    background-color: $accepting-mr-label-color;
-    color: $white-light;
+    color: $white;
  }
 }


--- 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;
    }

--- 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;

--- 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;

--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
 @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);
  }
 }


--- 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;
  }


--- 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;
  }
 }

--- 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;

--- 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;
  }


--- 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;

--- 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;

--- 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;
  }


--- 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;

--- 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;
        }
      }

--- 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,

--- 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;


--- 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 {

--- 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 {

--- 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;

--- a/app/assets/stylesheets/framework/memory_graph.scss
+++ b/app/assets/stylesheets/framework/memory_graph.scss
 .memory-graph-container {
-  background: $white-light;
+  background: $white;
  border: 1px solid $gray-200;
 }
--- 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;

--- 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 {

--- 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;

--- 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;
  }
 }

--- 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 {

--- 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;
      }

--- 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 {

--- 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;

--- 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%;

--- 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;

--- 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;


--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
 .zen-backdrop {
  &.fullscreen {
-    background-color: $white-light;
+    background-color: $white;
    position: fixed;
    top: 0;
    bottom: 0;

--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -30,7 +30,7 @@
  &,
  pre.code,
  .line_holder .line_content {
-    background-color: $white-light;
+    background-color: $white;
    color: $gl-text-color;
  }

@@ -84,7 +84,7 @@
      }

      &.hll:not(.empty-cell) {
-        background-color: $white-light;
+        background-color: $white;
        border-color: $white-normal;
      }
    }
@@ -160,25 +160,25 @@
    text-decoration: underline;
  }

-  .hll { background-color: $white-light; }
+  .hll { background-color: $white; }

  .gd {
    color: $gl-text-color;
-    background-color: $white-light;
+    background-color: $white;

    .x {
      color: $gl-text-color;
-      background-color: $white-light;
+      background-color: $white;
    }
  }

  .gi {
    color: $gl-text-color;
-    background-color: $white-light;
+    background-color: $white;

    .x {
      color: $gl-text-color;
-      background-color: $white-light;
+      background-color: $white;
    }
  }


--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -97,7 +97,7 @@ pre.code,
 &,
 pre.code,
 .line_holder .line_content {
-  background-color: $white-light;
+  background-color: $white;
  color: $white-code-color;
 }


--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -75,7 +75,7 @@ $highlighted-gc: #999;
 $highlighted-gc-bg: #eaf2f5;

 .code {
-  background-color: $white-light;
+  background-color: $white;
  font-family: monospace;
  font-size: $code-font-size;
  -premailer-cellpadding: 0;

--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -32,7 +32,7 @@ pre.commit-message {
 }

 .gl-label-text-light {
-  color: $white-light;
+  color: $white;
 }

 .gl-label-text-dark {

--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -80,7 +80,7 @@
    }

    .diffOverview {
-      background-color: $white-light;
+      background-color: $white;
      border-left: 1px solid $white-dark;
      cursor: ns-resize;
    }
@@ -112,7 +112,7 @@
    }

    .margin {
-      background-color: $white-light;
+      background-color: $white;
      border-right: 1px solid $gray-100;

      .line-insert {

--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -84,8 +84,8 @@ $ide-commit-header-height: 48px;
    border-bottom: 1px solid $white-dark;

    &.active {
-      background-color: $white-light;
-      border-bottom-color: $white-light;
+      background-color: $white;
+      border-bottom-color: $white;
    }

    &:not(.disabled) {
@@ -138,7 +138,7 @@ $ide-commit-header-height: 48px;

  &:not([disabled]):focus {
    background-color: $blue-500;
-    color: $white-light;
+    color: $white;
    outline: 0;

    svg {
@@ -205,7 +205,7 @@ $ide-commit-header-height: 48px;
 .ide-status-bar {
  border-top: 1px solid $white-dark;
  padding: 2px $gl-padding-8 0;
-  background: $white-light;
+  background: $white;
  display: flex;
  justify-content: space-between;
  height: $ide-statusbar-height;
@@ -306,7 +306,7 @@ $ide-commit-header-height: 48px;
    display: flex;
    flex: 1;
    flex-direction: column;
-    background-color: $white-light;
+    background-color: $white;
    border-left: 1px solid $white-dark;
    border-top: 1px solid $white-dark;
    border-top-left-radius: $border-radius-small;
@@ -418,7 +418,7 @@ $ide-commit-header-height: 48px;

 .multi-file-commit-form {
  position: relative;
-  background-color: $white-light;
+  background-color: $white;
  border-left: 1px solid $white-dark;
  transition: all 0.3s ease;

@@ -575,7 +575,7 @@ $ide-commit-header-height: 48px;
    // extend width over border of sidebar section
    width: calc(100% + 1px);
    padding-right: $gl-padding + 1px;
-    background-color: $white-light;
+    background-color: $white;
    border-top-color: $white-dark;
    border-bottom-color: $white-dark;

@@ -586,7 +586,7 @@ $ide-commit-header-height: 48px;
      top: 0;
      bottom: 0;
      width: 1px;
-      background: $white-light;
+      background: $white;
    }

    &.is-right {
@@ -609,7 +609,7 @@ $ide-commit-header-height: 48px;

 .ide-commit-message-field {
  height: 200px;
-  background-color: $white-light;
+  background-color: $white;

  .md-area {
    display: flex;
@@ -819,7 +819,7 @@ $ide-commit-header-height: 48px;
  bottom: 0;
  right: 0;
  z-index: 10;
-  background: $white-light;
+  background: $white;
  overflow: auto;
  display: flex;
  flex-direction: column;
@@ -889,7 +889,7 @@ $ide-commit-header-height: 48px;
  .multi-file-commit-panel-inner {
    width: 350px;
    padding: $grid-size $gl-padding;
-    background-color: $white-light;
+    background-color: $white;
    border-left: 1px solid $white-dark;
  }


--- a/app/assets/stylesheets/page_bundles/xterm.scss
+++ b/app/assets/stylesheets/page_bundles/xterm.scss
@@ -39,7 +39,7 @@
  $xterm-fg-12: #00f;
  $xterm-fg-13: #f0f;
  $xterm-fg-14: #0ff;
-  $xterm-fg-15: $white-light;
+  $xterm-fg-15: $white;
  $xterm-fg-16: $black;
  $xterm-fg-17: #00005f;
  $xterm-fg-18: #000087;
@@ -255,7 +255,7 @@
  $xterm-fg-228: #ffff87;
  $xterm-fg-229: #ffffaf;
  $xterm-fg-230: #ffffd7;
-  $xterm-fg-231: $white-light;
+  $xterm-fg-231: $white;
  $xterm-fg-232: #080808;
  $xterm-fg-233: #121212;
  $xterm-fg-234: #1c1c1c;
@@ -490,7 +490,7 @@
  }

  .xterm-fg-15 {
-    color: $white-light;
+    color: $white;
  }

  .xterm-fg-16 {

--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -211,7 +211,7 @@

 .board-blank-state,
 .board-promotion-state {
-  background-color: $white-light;
+  background-color: $white;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
@@ -245,7 +245,7 @@
 }

 .board-card {
-  background: $white-light;
+  background: $white;
  border: 1px solid $gray-200;
  box-shadow: 0 1px 2px $issue-boards-card-shadow;
  line-height: $gl-padding;
@@ -426,7 +426,7 @@
  max-width: 1100px;
  min-height: 500px;
  padding: 25px 15px 0;
-  background-color: $white-light;
+  background-color: $white;
  box-shadow: 0 2px 12px rgba($black, 0.5);

  .empty-state {
@@ -501,7 +501,7 @@
  top: -3px;
  width: 17px;
  background-color: $blue-500;
-  color: $white-light;
+  color: $white;
  border: 1px solid $blue-600;
  font-size: 9px;
  line-height: 15px;

--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -253,7 +253,7 @@
      color: $blue-500;

      &:hover {
-        color: $white-light;
+        color: $white;
      }
    }
  }
@@ -267,7 +267,7 @@
  }

  .builds-container {
-    background-color: $white-light;
+    background-color: $white;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    max-height: 300px;

--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
 .edit-cluster-form {
  .clipboard-addon {
-    background-color: $white-light;
+    background-color: $white;
  }
 }

@@ -35,11 +35,11 @@
 }

 .cluster-application-logo {
-  border: 3px solid $white-light;
+  border: 3px solid $white;
  box-shadow: 0 0 0 1px $gray-normal;

  &.avatar:hover {
-    border-color: $white-light;
+    border-color: $white;
  }
 }


--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -88,7 +88,7 @@
    font-family: inherit;
    left: $left;
    height: 100%;
-    border-right: 1px solid mix($input-border, $white-light);
+    border-right: 1px solid mix($input-border, $white);
    position: absolute;
    z-index: 1;
  }
@@ -127,7 +127,7 @@

 .text-expander {
  display: inline-flex;
-  background: $white-light;
+  background: $white;
  color: $gl-text-color-secondary;
  padding: 1px $gl-padding-4;
  cursor: pointer;
@@ -260,7 +260,7 @@
    color: $gl-text-color;

    &.autodevops-badge {
-      color: $white-light;
+      color: $white;
    }
  }


--- a/app/assets/stylesheets/pages/dev_ops_score.scss
+++ b/app/assets/stylesheets/pages/dev_ops_score.scss
@@ -199,7 +199,7 @@ $space-between-cards: 8px;
  flex-direction: column;
  align-items: center;
  border: solid 1px $border-color;
-  background: $white-light;
+  background: $white;
  transform: translate(-50%, -50%);
  color: $gl-text-color-secondary;
  fill: $gl-text-color-secondary;

--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -30,7 +30,7 @@
        left: -11px;
        width: 10px;
        height: calc(100% + 1px);
-        background: $white-light;
+        background: $white;
        pointer-events: none;
      }

@@ -92,7 +92,7 @@
  }

  .diff-content {
-    background: $white-light;
+    background: $white;
    color: $gl-text-color;
    border-radius: 0 0 3px 3px;

@@ -133,11 +133,11 @@

    .frame {
      display: inline-block;
-      background-color: $white-light;
+      background-color: $white;
      line-height: 0;

      img {
-        border: 1px solid $white-light;
+        border: 1px solid $white;
        background-image: linear-gradient(45deg,
        $border-color 25%,
        transparent 25%,
@@ -692,7 +692,7 @@ table.code {
  position: absolute;
  left: 0;
  margin-right: 0;
-  border-color: $white-light;
+  border-color: $white;
  cursor: pointer;
  transition: all 0.1s ease-out;
  @include code-icon-size();
@@ -742,7 +742,7 @@ table.code {

  .collapse-icon,
  path {
-    fill: $white-light;
+    fill: $white;
  }

  &:focus {
@@ -760,7 +760,7 @@ table.code {
    @include media-breakpoint-up(sm) {
      margin-left: -$gl-padding;
      padding-left: $gl-padding;
-      background-color: $white-light;
+      background-color: $white;
    }
  }

@@ -768,7 +768,7 @@ table.code {
    position: -webkit-sticky;
    position: sticky;
    top: $header-height;
-    background-color: $white-light;
+    background-color: $white;
    z-index: 200;

    .with-performance-bar & {
@@ -872,27 +872,27 @@ table.code {
    display: block;
    width: 100%;
    height: 10px;
-    background-color: $white-light;
+    background-color: $white;
    background-image: linear-gradient(45deg,
    transparent,
    transparent 73%,
    $diff-jagged-border-gradient-color 75%,
-    $white-light 80%),
+    $white 80%),
      linear-gradient(225deg,
    transparent,
    transparent 73%,
    $diff-jagged-border-gradient-color 75%,
-    $white-light 80%),
+    $white 80%),
      linear-gradient(135deg,
    transparent,
    transparent 73%,
    $diff-jagged-border-gradient-color 75%,
-    $white-light 80%),
+    $white 80%),
      linear-gradient(-45deg,
    transparent,
    transparent 73%,
    $diff-jagged-border-gradient-color 75%,
-    $white-light 80%);
+    $white 80%);
    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
    background-size: 10px 10px;
    background-repeat: repeat;
@@ -981,8 +981,8 @@ table.code {
 .notes > .badge.badge-pill {
  position: absolute;
  background-color: $blue-400;
-  color: $white-light;
-  border: $white-light 1px solid;
+  color: $white;
+  border: $white 1px solid;
  min-height: $gl-padding;
  padding: 5px 8px;
  border-radius: 12px;
@@ -1037,7 +1037,7 @@ table.code {
  }

  &.collapsed {
-    background-color: $white-light;
+    background-color: $white;

    .diff-notes-collapse,
    .note,

--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -112,13 +112,13 @@


 .rect-text-metric {
-  fill: $white-light;
+  fill: $white;
  stroke-width: 1;
  stroke: $gray-darkest;
 }

 .rect-axis-text {
-  fill: $white-light;
+  fill: $white;
 }

 .text-metric {

--- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
+++ b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
@@ -8,7 +8,7 @@
  }

  .signup-box {
-    background-color: $white-light;
+    background-color: $white;
    box-shadow: 0 0 0 1px $border-color;
    border-radius: $border-radius;
  }
@@ -16,7 +16,7 @@
  .form-control {
    &:active,
    &:focus {
-      background-color: $white-light;
+      background-color: $white;
    }
  }


--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -10,7 +10,7 @@
  }

  .network-graph {
-    background: $white-light;
+    background: $white;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;

--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -374,7 +374,7 @@ table.pipeline-project-metrics tr td {
      }

      &:last-child::before {
-        background: $white-light;
+        background: $white;
        height: auto;
        top: 30px;
        bottom: 0;

--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -137,7 +137,7 @@
    position: absolute;
    bottom: 0;
    right: 0;
-    text-shadow: -1px -1px 0 $white-light, 1px -1px 0 $white-light, -1px 1px 0 $white-light, 1px 1px 0 $white-light;
+    text-shadow: -1px -1px 0 $white, 1px -1px 0 $white, -1px 1px 0 $white, 1px 1px 0 $white;
  }
 }

@@ -914,7 +914,7 @@
  }

  .time-tracking-help-state {
-    background: $white-light;
+    background: $white;
    margin: 16px -20px -20px;
    padding: 16px 20px;
    border-top: 1px solid $border-gray-light;

--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -5,7 +5,7 @@
    padding: $gl-padding-8;

    .issue {
-      background-color: $white-light;
+      background-color: $white;
      margin-bottom: $gl-padding-8;
      border-radius: $border-radius-default;
      border: 1px solid $gray-100;
@@ -160,7 +160,7 @@ ul.related-merge-requests > li {
  margin-bottom: 10px;

  .form-control {
-    background-color: $white-light;
+    background-color: $white;
  }

  .btn {

--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -65,14 +65,14 @@
  padding: 0 $grid-size;
  line-height: 16px;
  border-radius: $label-border-radius;
-  color: $white-light;
+  color: $white;
 }

 .dropdown-labels-error {
  padding: 5px 10px;
  margin-bottom: 10px;
  background-color: $red-500;
-  color: $white-light;
+  color: $white;
 }

 .manage-labels-list {
@@ -80,7 +80,7 @@
  margin-bottom: 0;

  > li:not(.empty-message):not(.no-border) {
-    background-color: $white-light;
+    background-color: $white;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;

--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -175,7 +175,7 @@
  .form-control {
    &:active,
    &:focus {
-      background-color: $white-light;
+      background-color: $white;
    }
  }

@@ -236,7 +236,7 @@
      left: 0;
      right: 0;
      height: 40px;
-      background: $white-light;
+      background: $white;
    }

    .login-page-broadcast {

--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -240,14 +240,14 @@ $colors: (
      right: 10px;
      padding: 0;
      outline: none;
-      color: $white-light;
+      color: $white;
      width: 75px; // static width to make 2 buttons have same width
      height: 19px;
    }
  }

  .btn-success .fa-spinner {
-    color: $white-light;
+    color: $white;
  }

  .editor-wrap {

--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -714,7 +714,7 @@ $mr-widget-min-height: 69px;
 .table-holder {
  .ci-table {
    th {
-      background-color: $white-light;
+      background-color: $white;
      color: $gl-text-color-secondary;
    }
  }
@@ -729,7 +729,7 @@ $mr-widget-min-height: 69px;
 .mr-version-controls {
  position: relative;
  z-index: 203;
-  background: $white-light;
+  background: $white;
  color: $gl-text-color;
  margin-top: -1px;

@@ -806,7 +806,7 @@ $mr-widget-min-height: 69px;
 .epic-tabs-holder {
  top: $header-height;
  z-index: 250;
-  background-color: $white-light;
+  background-color: $white;
  border-bottom: 1px solid $border-color;

  @include media-breakpoint-up(sm) {
@@ -857,7 +857,7 @@ $mr-widget-min-height: 69px;
    margin-right: auto;

    .inner-page-scroll-tabs {
-      background-color: $white-light;
+      background-color: $white;
      margin-left: -$gl-padding;
      padding-left: $gl-padding;
    }

--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -14,7 +14,7 @@ $status-box-line-height: 26px;
    border: 0;
    padding: $gl-padding-top $gl-padding;
    border-radius: $border-radius-default;
-    background-color: $white-light;
+    background-color: $white;

    &:not(:last-child) {
      margin-bottom: $gl-padding-4;
@@ -238,7 +238,7 @@ $status-box-line-height: 26px;
 }

 .issuable-row {
-  background-color: $white-light;
+  background-color: $white;
 }

 .milestone-popover-instructions-list {

--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -59,7 +59,7 @@
    border-radius: $border-radius-base;
    transition: border-color ease-in-out 0.15s,
      box-shadow ease-in-out 0.15s;
-    background-color: $white-light;
+    background-color: $white;

    &.is-focused {
      @extend .form-control:focus;
@@ -173,7 +173,7 @@
 }

 .discussion-form {
-  background-color: $white-light;
+  background-color: $white;

  @include media-breakpoint-down(xs) {
    .user-avatar-link {
@@ -217,7 +217,7 @@ table {
  font-size: 14px;

  .md-area {
-    background-color: $white-light;
+    background-color: $white;
  }
 }

@@ -235,7 +235,7 @@ table {

  &.alert-dismissable {
    .close {
-      color: $white-light;
+      color: $white;
      opacity: 0.85;
      font-weight: $gl-font-weight-normal;

@@ -416,7 +416,7 @@ table {
    float: right;

    i {
-      color: $white-light;
+      color: $white;
      padding-right: 2px;
      margin-top: 2px;
    }

--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -364,7 +364,7 @@ $note-form-margin-left: 72px;
            left: $gl-padding-24;
            right: 0;
            bottom: 0;
-            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
+            background: linear-gradient(rgba($white, 0.1) -100px, $white 100%);
          }
        }
      }
@@ -380,7 +380,7 @@ $note-form-margin-left: 72px;
    .timeline-icon {
      display: flex;
      align-items: center;
-      background-color: $white-light;
+      background-color: $white;
      width: $system-note-icon-size;
      height: $system-note-icon-size;
      border: 1px solid $border-color;
@@ -470,7 +470,7 @@ $note-form-margin-left: 72px;
    }

    .system-note {
-      background-color: $white-light;
+      background-color: $white;
      padding: $gl-padding;
    }
  }
@@ -506,7 +506,7 @@ $note-form-margin-left: 72px;
        // Fixes subpixel rounding issue https://gitlab.com/gitlab-org/gitlab-foss/issues/53973
        // background-color is needed for dark code preference
        padding-bottom: 1px;
-        background-color: $white-light;
+        background-color: $white;

        &.parallel {
          border-width: 1px;
@@ -517,7 +517,7 @@ $note-form-margin-left: 72px;
        }

        .notes {
-          background-color: $white-light;
+          background-color: $white;
        }

        a code {
@@ -561,7 +561,7 @@ $note-form-margin-left: 72px;

 .code-commit .notes-content,
 .diff-viewer > .image ~ .note-container {
-  background-color: $white-light;
+  background-color: $white;

  .avatar-note-form-holder {
    .user-avatar-link img {
@@ -827,7 +827,7 @@ $note-form-margin-left: 72px;

  &.discussion-locked {
    border: 0;
-    background-color: $white-light;
+    background-color: $white;
  }

  a:not(.learn-more) {

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -16,7 +16,7 @@
  width: 100%;
  border: 1px solid $border-color;
  border-radius: $border-radius;
-  background-color: $white-light;
+  background-color: $white;

  &:hover {
    background-color: $gray-darker;
@@ -675,7 +675,7 @@
    &.ci-action-icon-wrapper {
      height: 30px;
      width: 30px;
-      background: $white-light;
+      background: $white;
      border: 1px solid $border-color;
      border-radius: 100%;
      display: block;
@@ -768,7 +768,7 @@

 @mixin mini-pipeline-item() {
  border-radius: 100px;
-  background-color: $white-light;
+  background-color: $white;
  border-width: 1px;
  border-style: solid;
  width: $ci-action-icon-size;
@@ -852,7 +852,7 @@ button.mini-pipeline-graph-dropdown-toggle {
      height: $ci-action-dropdown-button-size;
      width: $ci-action-dropdown-button-size;

-      background: $white-light;
+      background: $white;
      border: 1px solid $border-color;
      border-radius: 50%;
      display: block;
@@ -977,7 +977,7 @@ button.mini-pipeline-graph-dropdown-toggle {
  &::after {
    left: -5px;
    border-width: 10px 7px 10px 0;
-    border-right-color: $white-light;
+    border-right-color: $white;
  }
 }

@@ -1012,7 +1012,7 @@ button.mini-pipeline-graph-dropdown-toggle {

  &::after {
    margin-top: 1px;
-    border-bottom-color: $white-light;
+    border-bottom-color: $white;
  }

  /**

--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -428,7 +428,7 @@ table.u2f-registrations {
 }

 .gitlab-slack-well {
-  background-color: $white-light;
+  background-color: $white;
  box-shadow: none;
  max-width: $add-to-slack-well-max-width;
 }

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -542,7 +542,7 @@

    .input-group-text {
      width: 100%;
-      background-color: $white-light;
+      background-color: $white;
    }

    .selected-icon {
@@ -655,7 +655,7 @@
      z-index: 10;
      padding: $gl-padding-8 0;
      text-align: center;
-      background-color: $white-light;
+      background-color: $white;
      color: $gl-text-color-tertiary;
      transform: translateY(-50%);
      font-size: 12px;
@@ -821,7 +821,7 @@
 .repository-languages-bar {
  height: 8px;
  margin-bottom: $gl-padding-8;
-  background-color: $white-light;
+  background-color: $white;
  border-radius: $border-radius-default;

  .progress-bar {
@@ -1150,7 +1150,7 @@ pre.light-well {

  .form-control {
    @extend .monospace;
-    background-color: $white-light;
+    background-color: $white;
    border-color: $border-color;
    font-size: 14px;
    margin-left: -1px;
@@ -1181,7 +1181,7 @@ pre.light-well {
  }

  i:nth-child(2) {
-    color: $white-light;
+    color: $white;
  }
 }

@@ -1385,7 +1385,7 @@ pre.light-well {
  padding: 32px;
  margin: 32px;
  border-radius: 3px;
-  background-color: $white-light;
+  background-color: $white;

  h3 {
    margin-top: 0;

--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -31,7 +31,7 @@
  }

  &.sortable-chosen .draggable-panel {
-    background: $white-light;
+    background: $white;
    box-shadow: 0 0 4px $gray-500;
  }

@@ -41,7 +41,7 @@
    .draggable-remove-link {
      cursor: pointer;
      color: $gray-600;
-      background-color: $white-light;
+      background-color: $white;
    }
  }
 }

--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
 .runner-state {
  padding: 6px 12px;
  margin-right: 10px;
-  color: $white-light;
+  color: $white;

  &.runner-state-shared {
    background: $green-400;

--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -63,7 +63,7 @@ input[type='checkbox']:hover {
    margin-left: 5px;
    line-height: 25px;
    width: 98%;
-    color: $white-light;
+    color: $white;
    background: none;
    transition: color ease-in-out $default-transition-duration;
  }

--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -261,7 +261,7 @@
    }

    .card-header .label-count {
-      color: $white-light;
+      color: $white;
      background: $common-gray-dark;
    }

@@ -325,7 +325,7 @@

 .saml-settings.info-well {
  .form-control[readonly] {
-    background: $white-light;
+    background: $white;
  }
 }

@@ -340,7 +340,7 @@

  a {
    font-weight: $gl-font-weight-bold;
-    color: $white-light;
+    color: $white;
  }
 }

@@ -355,7 +355,7 @@
  }

  .btn-clipboard {
-    background-color: $white-light;
+    background-color: $white;
    border: 1px solid $gray-200;
  }

@@ -368,7 +368,7 @@
 .mirror-error-badge {
  background-color: $red-400;
  border-radius: $border-radius-default;
-  color: $white-light;
+  color: $white;
 }

 .push-pull-table {

--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -44,7 +44,7 @@
  }

  &.todo-pending.done-reversible {
-    background-color: $white-light;
+    background-color: $white;

    &:hover {
      border-color: $white-normal;

--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -101,7 +101,7 @@
      border-top: 1px solid $white-normal;

      &:last-of-type {
-        border-bottom-color: $white-light;
+        border-bottom-color: $white;
      }

      td,

--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -80,7 +80,7 @@
  }

  strong {
-    color: $white-light;
+    color: $white;
  }

  table {

--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -28,7 +28,7 @@
  }

  .blob-viewer {
-    background-color: $white-light;
+    background-color: $white;
    text-align: left;
  }

@@ -131,7 +131,7 @@

  .btn-group {
    a.btn {
-      background-color: $white-light;
+      background-color: $white;
      text-decoration: none;
      padding: 8px 9px;
      border: $border-style;

--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -32,7 +32,7 @@
  .cur {
    .avatar {
      @include disable-all-animation;
-      border: 1px solid $white-light;
+      border: 1px solid $white;
    }
  }


--- a/app/assets/stylesheets/vendors/tribute.scss
+++ b/app/assets/stylesheets/vendors/tribute.scss
 .tribute-container {
-  background: $white-light;
+  background: $white;
  border: 1px solid $gl-gray-100;
  border-radius: $border-radius-base;
  box-shadow: 0 0 5px $issue-boards-card-shadow;
@@ -30,7 +30,7 @@

      .avatar {
        @include disable-all-animation;
-        border: 1px solid $white-light;
+        border: 1px solid $white;
      }

      small {

--- a/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
+++ b/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
@@ -47,7 +47,7 @@ button[disabled] {

 .draft-pending-label {
  background: $orange-600;
-  color: $white-light;
+  color: $white;
  vertical-align: text-top;
 }


--- a/ee/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/ee/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -3,7 +3,7 @@
  bottom: 0;
  left: 0;
  width: 100%;
-  background: $white-light;
+  background: $white;
  z-index: 300;
  padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
  border-top: 1px solid $border-color;

--- a/ee/app/assets/stylesheets/components/deployment_instance.scss
+++ b/ee/app/assets/stylesheets/components/deployment_instance.scss
@@ -32,8 +32,8 @@

    &::before {
      content: '';
-      border: 1px solid $white-light;
-      background: $white-light;
+      border: 1px solid $white;
+      background: $white;
      transform: rotate(45deg);
      position: absolute;
      border-radius: 1px;
@@ -58,11 +58,11 @@
  }

  &-unknown {
-    background-color: $white-light;
+    background-color: $white;
    border-color: $gray-700;

    &.link:hover {
-      background-color: $white-light;
+      background-color: $white;
      border-color: $gray-900;
    }
  }
@@ -71,7 +71,7 @@
    &::after {
      width: 7px;
      height: 7px;
-      border: 1px solid $white-light;
+      border: 1px solid $white;
      background-color: $orange-300;
      border-radius: 50%;
      content: '';

--- a/ee/app/assets/stylesheets/components/design_management/design.scss
+++ b/ee/app/assets/stylesheets/components/design_management/design.scss
@@ -28,7 +28,7 @@
  overflow-y: scroll;
  padding: 0 $gl-padding;
  padding-top: 50px;
-  background-color: $white-light;
+  background-color: $white;
  flex-shrink: 0;
  min-width: 400px;
  flex-basis: 28%;
@@ -36,8 +36,8 @@
  .badge.badge-pill {
    margin-left: $gl-padding;
    background-color: $blue-400;
-    color: $white-light;
-    border: $white-light 1px solid;
+    color: $white;
+    border: $white 1px solid;
    min-height: 28px;
    padding: 7px 10px;
    border-radius: $gl-padding;

--- a/ee/app/assets/stylesheets/pages/boards.scss
+++ b/ee/app/assets/stylesheets/pages/boards.scss
@@ -20,7 +20,7 @@

      &:focus,
      &.active {
-        background-color: $white-light;
+        background-color: $white;
      }

      &.active {
@@ -90,7 +90,7 @@
  height: 100%;
  top: 0;
  left: 0;
-  background: $white-light;
+  background: $white;
  z-index: 9000;

  @include media-breakpoint-down(sm) {

--- a/ee/app/assets/stylesheets/pages/feature_flags.scss
+++ b/ee/app/assets/stylesheets/pages/feature_flags.scss
 $label-blue: #428bca;

 .badge-active {
-  color: $white-light;
+  color: $white;
  background-color: $label-blue;
 }

 .badge-inactive {
-  color: $white-light;
+  color: $white;
  background-color: $gray-500;
 }


--- a/ee/app/assets/stylesheets/pages/milestone.scss
+++ b/ee/app/assets/stylesheets/pages/milestone.scss
@@ -116,7 +116,7 @@

  .focus {
    circle {
-      fill: $white-light;
+      fill: $white;
      stroke: $green-500;
      stroke-width: 2px;
    }
@@ -125,7 +125,7 @@
  .chart-tooltip {
    text {
      font-size: 12px;
-      fill: $white-light;
+      fill: $white;
    }

    rect {

--- a/ee/app/assets/stylesheets/pages/pipelines.scss
+++ b/ee/app/assets/stylesheets/pages/pipelines.scss
@@ -65,7 +65,7 @@
    margin-left: -15px;
    border-radius: 2em;
    background: $gray-darkest;
-    color: $white-light;
+    color: $white;
    z-index: 96;
    text-decoration: none;


--- a/ee/app/assets/stylesheets/pages/projects.scss
+++ b/ee/app/assets/stylesheets/pages/projects.scss
 .protected-branch-push-access-list,
 .protected-branch-merge-access-list {
  a {
-    color: $white-light;
+    color: $white;
  }
 }


--- a/ee/app/assets/stylesheets/pages/promotions.scss
+++ b/ee/app/assets/stylesheets/pages/promotions.scss
@@ -18,7 +18,7 @@
  .bordered-box {
    padding: 20px;
    border-color: $border-color;
-    background-color: $white-light;
+    background-color: $white;
    align-items: flex-start;

    .close {

--- a/ee/app/assets/stylesheets/pages/roadmap.scss
+++ b/ee/app/assets/stylesheets/pages/roadmap.scss
@@ -15,7 +15,7 @@ $column-right-gradient: linear-gradient(to right, $roadmap-gradient-dark-gray 0%
  }

  to {
-    background-color: $white-light;
+    background-color: $white;
  }
 }

@@ -170,7 +170,7 @@ html.group-epics-roadmap-html {
    float: left;
    height: $header-item-height;
    border-bottom: $border-style;
-    background-color: $white-light;
+    background-color: $white;
  }

  .timeline-header-blank {
@@ -243,7 +243,7 @@ html.group-epics-roadmap-html {
    position: absolute;
    left: 0;
    bottom: -$grid-size;
-    border-top: 1px solid $white-light;
+    border-top: 1px solid $white;
    background: $scroll-top-gradient;
  }
 }
@@ -266,7 +266,7 @@ html.group-epics-roadmap-html {
    &:hover {
      .epic-details-cell,
      .epic-timeline-cell {
-        background-color: $white-light;
+        background-color: $white;
      }
    }

@@ -299,7 +299,7 @@ html.group-epics-roadmap-html {
  width: $details-cell-width;
  padding: $gl-padding-8 $gl-padding;
  font-size: $code-font-size;
-  background-color: $white-light;
+  background-color: $white;
  z-index: 10;

  &::after {
@@ -373,14 +373,14 @@ html.group-epics-roadmap-html {
  position: -webkit-sticky;
  left: $details-cell-width;
  padding: $gl-padding-8;
-  color: $white-light;
+  color: $white;
 }

 .epic-bar-progress {
  background-color: $blue-300;

  .progress-bar {
-    background-color: $white-light;
+    background-color: $white;
  }
 }

@@ -525,7 +525,7 @@ html.group-epics-roadmap-html {
        width: 8px;
        border: 2px solid $gray-700;
        border-radius: 4px;
-        background-color: $white-light;
+        background-color: $white;
      }
    }
  }
@@ -535,7 +535,7 @@ html.group-epics-roadmap-html {
    left: 0;
    width: $details-cell-width;
    font-size: $code-font-size;
-    background-color: $white-light;
+    background-color: $white;
    z-index: 2;

    &::after {

--- a/ee/app/assets/stylesheets/pages/subscriptions.scss
+++ b/ee/app/assets/stylesheets/pages/subscriptions.scss
@@ -141,7 +141,7 @@ $subscriptions-full-width-lg: 541px;
    }

    iframe {
-      background-color: $white-light;
+      background-color: $white;
      margin: -4px;
      width: 100% !important;
    }