Add latest changes from gitlab-org/gitlab@master

36 files changed, 71 insertions, 129 deletions

diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
index 909ae2980d2..8f9c181258f 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget.vue
@@ -236,7 +236,7 @@ export default {
     >
       <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
-        <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
+        <span class="text-truncate gl-pl-2">
           <gl-sprintf
             :message="
               hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index 15c220a554d..11fb2b18e9d 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -69,9 +69,7 @@ export default {
     >
       <ci-icon :status="group.status" />
 
-      <span
-        class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
-      >
+      <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
         {{ group.name }}
       </span>
 
diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
index 74a261f35d7..30ba243077e 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
@@ -27,9 +27,7 @@ export default {
 <template>
   <span class="ci-job-name-component mw-100">
     <ci-icon :status="status" />
-    <span
-      class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
-    >
+    <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
       {{ name }}
     </span>
   </span>
diff --git a/app/assets/javascripts/releases/components/evidence_block.vue b/app/assets/javascripts/releases/components/evidence_block.vue
index 6468e2ded62..3724162f6d5 100644
--- a/app/assets/javascripts/releases/components/evidence_block.vue
+++ b/app/assets/javascripts/releases/components/evidence_block.vue
@@ -80,9 +80,7 @@ export default {
             <span class="js-short monospace">{{ shortSha(index) }}</span>
           </template>
           <template #expanded>
-            <span class="js-expanded monospace gl-pl-1-deprecated-no-really-do-not-use-me">{{
-              sha(index)
-            }}</span>
+            <span class="js-expanded monospace gl-pl-2">{{ sha(index) }}</span>
           </template>
         </expand-button>
         <clipboard-button
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 3b6b0a91e97..e1e79232a60 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -228,15 +228,15 @@ export default {
         <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
       </template>
 
-      <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
+      <div class="d-flex justify-content-between gl-p-2">
         <gl-form-group
           v-if="customEnabled"
           :label="customLabel"
           label-for="custom-from-time"
-          label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
-          class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
+          label-class="gl-pb-2"
+          class="custom-time-range-form-group col-md-7 gl-pl-2 gl-pr-0 m-0"
         >
-          <div class="gl-pt-2-deprecated-no-really-do-not-use-me">
+          <div class="gl-pt-3">
             <date-time-picker-input
               id="custom-time-from"
               v-model="startInput"
@@ -264,12 +264,9 @@ export default {
             </gl-button>
           </gl-form-group>
         </gl-form-group>
-        <gl-form-group
-          label-for="group-id-dropdown"
-          class="col-md-5 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-1-deprecated-no-really-do-not-use-me m-0"
-        >
+        <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-px-2 m-0">
           <template #label>
-            <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
+            <span class="gl-pl-7">{{ __('Quick range') }}</span>
           </template>
 
           <gl-deprecated-dropdown-item
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
index ade1bb2099d..b1189137d59 100644
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -6,7 +6,7 @@
 
   // Toolbar buttons
   .tui-editor-defaultUI-toolbar .toolbar-button {
-    color: $gl-gray-600;
+    color: $gray-500;
     border: 0;
 
     &:hover,
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 893a494d240..bc241ba3143 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -229,7 +229,7 @@
   }
 
   &.btn-icon {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .fa-caret-down,
@@ -394,7 +394,7 @@
 }
 
 .clone-dropdown-btn a {
-  color: $gl-gray-700;
+  color: $gray-700;
 
   &:hover {
     text-decoration: none;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 00679cf20fa..925f4f02faf 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -74,7 +74,7 @@
 
 .hint {
   font-style: italic;
-  color: $gl-gray-200;
+  color: $gray-200;
 }
 
 .light { color: $gl-text-color; }
@@ -162,13 +162,13 @@ table {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: $gl-gray-700;
+  color: $gray-700;
   font-size: 32px;
   text-align: center;
 }
 
 p.time {
-  color: $gl-gray-200;
+  color: $gray-200;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -246,7 +246,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: $gl-gray-350;
+    color: $gray-300;
     margin-right: 30px;
   }
 }
@@ -454,35 +454,6 @@ img.emoji {
   }
 }
 
-/** COMMON SPACING CLASSES **/
-/**
-  🚨 Do not use these classes — they are deprecated and being removed. 🚨
-  See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
-
-  Instead, if you need a spacing class, please use one from Gitlab UI —
-  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
-    $gl-spacing-scale-0: 0;
-    $gl-spacing-scale-1: 2px;
-    $gl-spacing-scale-2: 4px;
-    $gl-spacing-scale-3: 8px;
-    $gl-spacing-scale-4: 12px;
-    $gl-spacing-scale-5: 16px;
-    $gl-spacing-scale-6: 24px;
-    $gl-spacing-scale-7: 32px;
-    $gl-spacing-scale-8: 40px;
-    $gl-spacing-scale-9: 48px;
-    $gl-spacing-scale-10: 56px;
-    $gl-spacing-scale-11: 64px;
-    $gl-spacing-scale-12: 80px;
-    $gl-spacing-scale-13: 96px;
-**/
-@each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
-  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
-}
 
 /**
  * Removes browser specific clear icon from input fields in
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6b742853f8f..d15cd64f415 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -410,7 +410,7 @@
       flex-direction: column;
 
       .reference {
-        color: $gl-gray-400;
+        color: $gray-300;
         margin-top: $gl-padding-4;
       }
     }
@@ -666,25 +666,25 @@
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
-  color: $gl-gray-700;
+  color: $gray-700;
   line-height: 30px;
   border: 1px solid $dropdown-divider-bg;
   border-radius: 2px;
   outline: 0;
 
   &:focus {
-    color: $gl-gray-700;
+    color: $gray-700;
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
     ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
     }
   }
 
   &:hover {
     ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
     }
   }
 }
@@ -1070,7 +1070,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       color: $dropdown-title-btn-color;
 
       &:hover {
-        color: $gl-gray-400;
+        color: $gray-300;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index ef7d39a5e7e..bcdc493f6cd 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -183,7 +183,7 @@
 
         &.line-numbers {
           float: none;
-          border-left: 1px solid $gl-gray-100;
+          border-left: 1px solid $gray-100;
 
           i {
             float: none;
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index 2448be1bca3..d48a5116677 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -17,7 +17,7 @@
 }
 
 .line-number {
-  color: $gl-gray-500;
+  color: $gray-500;
   padding: 0 $gl-padding-8;
   min-width: $job-line-number-width;
   margin-left: -$job-line-number-margin;
@@ -28,7 +28,7 @@
   &:active,
   &:visited {
     text-decoration: underline;
-    color: $gl-gray-500;
+    color: $gray-500;
   }
 }
 
@@ -43,7 +43,7 @@
 }
 
 .log-duration-badge {
-  background: $gl-gray-400;
+  background: $gray-300;
 }
 
 .loader-animation {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index e81ecfb43d5..86a5aa1a16e 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -300,7 +300,7 @@
   }
 
   .group-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
 
@@ -310,7 +310,7 @@
   }
 
   .project-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
 
@@ -332,7 +332,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: $gl-gray-350;
+    color: $gray-300;
     font-weight: $gl-font-weight-normal;
   }
 
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index a3037549881..37283db8b71 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -37,7 +37,7 @@
 
   .status-neutral {
     background-color: $gray-100;
-    color: $gl-gray-dark;
+    color: $gray-900;
 
     &:hover {
       background-color: $gray-200;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8758fe15870..8b5fa6c1b6c 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -84,7 +84,7 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: $gl-gray-700;
+    color: $gray-700;
     vertical-align: middle;
     background-color: $gray-10;
     border-width: 1px;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 69e00f9b2c4..6daa77daa59 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default;
 $t-gray-a-06: rgba($black, 0.06) !default;
 $t-gray-a-08: rgba($black, 0.08) !default;
 
-$gl-gray-100: #ddd !default;
-$gl-gray-200: #ccc !default;
-$gl-gray-350: #aaa !default;
-$gl-gray-400: #999 !default;
-$gl-gray-500: #777 !default;
-$gl-gray-600: #666 !default;
-$gl-gray-700: #555 !default;
-$gl-gray-800: #333 !default;
-
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -357,8 +348,6 @@ $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
 $gl-text-color-disabled: $gray-400;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray-dark: #313236;
-$gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 $gl-font-size-12: 12px;
 $gl-font-size-14: 14px;
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index dd5b99be57e..62abf4a7683 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -35,7 +35,7 @@
 
 .zen-control {
   padding: 0;
-  color: $gl-gray-700;
+  color: $gray-700;
   background: none;
   border: 0;
 }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index 6320c10fb51..d281f62c370 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -7,12 +7,12 @@ img {
 
 p.details {
   font-style: italic;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 
 .footer > p {
   font-size: small;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 
 pre.commit-message {
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 36587ecde3d..71e74297ee8 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gl-gray-light);
+  color: var(--ide-text-color-secondary, $gray-600);
 
   &:first-child {
     margin-left: 0;
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 3c49cc54ac4..d34d309eea3 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -23,7 +23,7 @@
 
     .bar {
       height: 4px;
-      background-color: $gl-gray-100;
+      background-color: $gray-100;
     }
 
     .count {
@@ -34,7 +34,7 @@
   .graph-separator {
     width: $graph-separator-width;
     height: 18px;
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 29422c1f7fa..08f0568161c 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -124,7 +124,7 @@
       background-color: none;
       border: 0;
       font-weight: bold;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index a7b93c9eab7..3c36a5a207b 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -102,7 +102,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
 
     .suppressed-container {
@@ -181,7 +181,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-right: 1px solid $gl-gray-400;
+        border-right: 1px solid $gray-300;
         position: absolute;
         display: block;
         top: 13px;
@@ -190,7 +190,7 @@
         &.left-oriented {
           /* only for commit view (different swipe viewer) */
           border-right: 0;
-          border-left: 1px solid $gl-gray-400;
+          border-left: 1px solid $gray-300;
         }
       }
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index ef7b56ac210..5ce500dad1d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -83,7 +83,7 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $gl-gray-350;
+  stroke: $gray-300;
 }
 
 .label-x-axis-line,
@@ -93,7 +93,7 @@
 
 .y-axis {
   line {
-    stroke: $gl-gray-350;
+    stroke: $gray-300;
     stroke-width: 1;
   }
 }
@@ -117,7 +117,7 @@
 }
 
 .selected-metric-line {
-  stroke: $gl-gray-dark;
+  stroke: $gray-900;
   stroke-width: 1;
 }
 
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 500f5816d38..5738cbb4b31 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -94,7 +94,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $gl-gray-500;
+        color: $gray-500;
         overflow: hidden;
       }
 
@@ -111,7 +111,7 @@
     }
 
     .event-note-icon {
-      color: $gl-gray-500;
+      color: $gray-500;
       float: left;
       font-size: $gl-font-size;
       margin-right: 5px;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index c4b6cdd703d..bca4d50973a 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -43,7 +43,7 @@
 
   .y-axis-label {
     line {
-      stroke: $gl-gray-350;
+      stroke: $gray-300;
     }
 
     text {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index c309c8d157a..69fd094f83b 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -52,7 +52,7 @@
 .save-group-loader {
   margin-top: $gl-padding-50;
   margin-bottom: $gl-padding-50;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .group-nav-container .nav-controls {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index ab281bc7f23..540060d60de 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -1,6 +1,6 @@
 .shortcut-mappings {
   font-size: 12px;
-  color: $gl-gray-700;
+  color: $gray-700;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -22,7 +22,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: $gl-gray-400;
+    color: $gray-300;
     text-align: right;
     white-space: nowrap;
   }
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index 00ca3cc73e0..316066694a8 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -108,7 +108,7 @@
     border-bottom-width: 0;
 
     .gl-tab-nav-item {
-      color: $gl-gray-600;
+      color: $gray-500;
 
       > .gl-tab-counter-badge {
         color: inherit;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a6d1fc11c3f..d4ee63f2cdd 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
   background-color: $gray-light;
 
   &.clickable:hover {
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
     cursor: pointer;
   }
 }
@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px;
 
     .bold {
       font-weight: $gl-font-weight-bold;
-      color: $gl-gray-light;
+      color: $gray-600;
       margin-left: 10px;
     }
 
@@ -980,7 +980,7 @@ $mr-widget-min-height: 69px;
     opacity: 0.65;
 
     &:hover {
-      color: $gl-gray-500;
+      color: $gray-500;
       text-decoration: none;
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e4e54501627..c144fb13322 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
       padding: $gl-padding;
 
       .dummy-avatar {
-        background-color: $gl-gray-100;
-        border: 1px solid darken($gl-gray-100, 25%);
+        background-color: $gray-100;
+        border: 1px solid darken($gray-100, 25%);
       }
 
       .note-headline-light,
@@ -835,7 +835,7 @@ $note-form-margin-left: 72px;
   &[disabled] {
     background: $white;
     border-color: $gray-200;
-    color: $gl-gray-400;
+    color: $gray-300;
     cursor: not-allowed;
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d4d6583312c..104b2c74ac9 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -353,7 +353,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .transfer-project .select2-container {
@@ -429,7 +429,7 @@
 
   > li + li::before {
     padding: 0 3px;
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 
   a {
@@ -1444,7 +1444,7 @@ pre.light-well {
 
 .project-filters {
   .btn svg {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .button-filter-group {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index b82c638a5b7..10e7fcc8792 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -301,7 +301,7 @@
   }
 
   .loading-metrics .metrics-load-spinner {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .metrics-list {
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index c6f104a024b..4a5a1478686 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -127,7 +127,7 @@
       border: 0;
       background: $gray-light;
       border-radius: 0;
-      color: $gl-gray-500;
+      color: $gray-500;
       margin: 0 20px;
       overflow: hidden;
     }
@@ -191,7 +191,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid $gl-gray-100;
+      border-left: 2px solid $gray-100;
       padding-left: 10px;
     }
   }
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 7744fd814d0..288da4da5c3 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -6,7 +6,7 @@
 
   .example {
     padding: 15px;
-    border: 1px dashed $gl-gray-100;
+    border: 1px dashed $gray-100;
     margin-bottom: 15px;
 
     &::before {
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index daeab80d373..dc127cd2554 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -11,15 +11,15 @@
   height: $performance-bar-height;
   background: $black;
   line-height: $performance-bar-height;
-  color: $gl-gray-400;
+  color: $gray-300;
 
   select {
-    color: $gl-gray-400;
+    color: $gray-300;
     width: 200px;
   }
 
   input {
-    color: $gl-gray-400;
+    color: $gray-300;
     width: $input-short-width - 60px;
   }
 
@@ -61,7 +61,7 @@
     padding: 4px 6px;
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
-    color: $gl-gray-100;
+    color: $gray-100;
     border-radius: 3px;
     box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
       inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index e2b4d6b8e7a..6ff2cba325c 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -11,15 +11,6 @@ $gray-800: #f2f2f2;
 $gray-900: #fafafa;
 $gray-950: #fff;
 
-$gl-gray-100: #333;
-$gl-gray-200: #555;
-$gl-gray-350: #666;
-$gl-gray-400: #777;
-$gl-gray-500: #999;
-$gl-gray-600: #aaa;
-$gl-gray-700: #ccc;
-$gl-gray-800: #ddd;
-
 $green-50: #072b15;
 $green-100: #0a4020;
 $green-200: #0e5a2d;
diff --git a/app/assets/stylesheets/vendors/tribute.scss b/app/assets/stylesheets/vendors/tribute.scss
index 309cdf7245c..65f3d1b6199 100644
--- a/app/assets/stylesheets/vendors/tribute.scss
+++ b/app/assets/stylesheets/vendors/tribute.scss
@@ -1,6 +1,6 @@
 .tribute-container {
   background: $white;
-  border: 1px solid $gl-gray-100;
+  border: 1px solid $gray-100;
   border-radius: $border-radius-base;
   box-shadow: 0 0 5px $issue-boards-card-shadow;
   color: $black;
@@ -22,7 +22,7 @@
     white-space: nowrap;
 
     small {
-      color: $gl-gray-500;
+      color: $gray-500;
     }
 
     &.highlight {