Update card grey border color to #dbdbdb

Migrate CSS variable gray-100 to $gray-50

app/assets/javascripts/ci_variable_list/components/ci_key_field.vue

@@ -154,7 +154,7 @@ export default {
               v-for="(result, i) in results"
               :key="i"
               role="option"
-              :class="{ 'gl-bg-gray-100': i === arrowCounter }"
+              :class="{ 'gl-bg-gray-50': i === arrowCounter }"
               :aria-selected="i === arrowCounter"
             >
               <gl-button tabindex="-1" class="btn-transparent pl-2" @click="selectToken(result)">{{

app/assets/stylesheets/bootstrap_migration.scss

@@ -111,7 +111,7 @@ kbd {
 code {
   padding: 2px 4px;
   color: $code-color;
-  background-color: $gray-100;
+  background-color: $gray-50;
   border-radius: $border-radius-default;
 
   .code > & {

app/assets/stylesheets/components/dashboard_skeleton.scss

@@ -67,10 +67,10 @@
       background-repeat: no-repeat;
       background-size: cover;
       background-image: linear-gradient(to right,
-      $gray-100 0%,
+      $gray-50 0%,
       $gray-10 20%,
-      $gray-100 40%,
-      $gray-100 100%);
+      $gray-50 40%,
+      $gray-50 100%);
       border-radius: $gl-padding;
       height: $gl-padding;
       margin-top: -$gl-padding-8;

app/assets/stylesheets/framework/animations.scss

@@ -177,7 +177,7 @@ a {
 
   [class^='skeleton-line-'] {
     position: relative;
-    background-color: $gray-100;
+    background-color: $gray-50;
     height: 10px;
     overflow: hidden;
 
@@ -192,10 +192,10 @@ a {
       background-repeat: no-repeat;
       background-size: cover;
       background-image: linear-gradient(to right,
-      $gray-100 0%,
+      $gray-50 0%,
       $gray-10 20%,
-      $gray-100 40%,
-      $gray-100 100%);
+      $gray-50 40%,
+      $gray-50 100%);
       height: 10px;
     }
   }

app/assets/stylesheets/framework/common.scss

@@ -602,7 +602,7 @@ img.emoji {
   bottom: 40px;
   right: 40px;
   font-size: $gl-font-size-small;
-  background: $gray-100;
+  background: $gray-50;
   width: 200px;
   border-radius: 24px;
   box-shadow: 0 2px 4px $issue-boards-card-shadow;

app/assets/stylesheets/framework/dropdowns.scss

@@ -940,7 +940,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       position: absolute;
       top: 13px;
       right: 25px;
-      color: $gray-100;
+      color: $gray-50;
     }
   }
 
@@ -979,7 +979,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 
   &:hover {
     .frequent-items-item-avatar-container .avatar {
-      border-color: $gray-100;
+      border-color: $gray-50;
     }
   }
 

app/assets/stylesheets/framework/files.scss

@@ -480,7 +480,7 @@ span.idiff {
     padding-bottom: $gl-padding;
 
     .discussion-reply-holder {
-      border-bottom: 1px solid $gray-100;
+      border-bottom: 1px solid $gray-50;
       border-radius: 0;
     }
   }

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -314,12 +314,12 @@ body {
       $gray-800,
       $gray-700,
       $gray-700,
-      $gray-100,
+      $gray-50,
       $gray-700
     );
 
     .navbar-gitlab {
-      background-color: $gray-100;
+      background-color: $gray-50;
       box-shadow: 0 1px 0 0 $border-color;
 
       .logo-text svg {

app/assets/stylesheets/framework/markdown_area.scss

@@ -123,7 +123,7 @@
 .markdown-area {
   border-radius: 0;
   background: $white;
-  border: 1px solid $gray-100;
+  border: 1px solid $gray-50;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;

app/assets/stylesheets/framework/tables.scss

@@ -47,7 +47,7 @@ table {
       }
 
       th {
-        @include gl-bg-gray-100;
+        @include gl-bg-gray-50;
         border-bottom: 0;
 
         &.wide {

app/assets/stylesheets/framework/variables.scss

@@ -165,7 +165,7 @@ $red-950: #4b140b;
 
 $gray-10: #fafafa;
 $gray-50: #f0f0f0;
-$gray-100: #f2f2f2;
+$gray-100: #dbdbdb;
 $gray-200: #dfdfdf;
 $gray-300: #ccc;
 $gray-400: #bababa;

app/assets/stylesheets/page_bundles/ide.scss

@@ -386,7 +386,7 @@ $ide-commit-header-height: 48px;
 
   &:hover,
   &:focus {
-    background: var(--ide-background, $gray-100);
+    background: var(--ide-background, $gray-50);
 
     outline: 0;
   }
@@ -558,7 +558,7 @@ $ide-commit-header-height: 48px;
 
   &:hover {
     color: var(--ide-text-color, $gl-text-color);
-    background-color: var(--ide-background-hover, $gray-100);
+    background-color: var(--ide-background-hover, $gray-50);
   }
 
   &:focus {
@@ -1043,7 +1043,7 @@ $ide-commit-header-height: 48px;
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
   color: var(--ide-text-color, $gl-text-color);
-  background-color: var(--ide-background, $gray-100);
+  background-color: var(--ide-background, $gray-50);
 
   &:hover {
     background-color: var(--ide-file-row-btn-hover-background, $gray-200);
@@ -1144,12 +1144,12 @@ $ide-commit-header-height: 48px;
 }
 
 .file-row.is-active {
-  background: var(--ide-background, $gray-100);
+  background: var(--ide-background, $gray-50);
 }
 
 .file-row:hover,
 .file-row:focus {
-  background: var(--ide-background, $gray-100);
+  background: var(--ide-background, $gray-50);
 
   .ide-new-btn {
     display: block;

app/assets/stylesheets/pages/labels.scss

@@ -86,7 +86,7 @@
     justify-content: space-between;
     padding: $gl-padding;
     border-radius: $border-radius-default;
-    border: 1px solid $gray-100;
+    border: 1px solid $gray-50;
 
     &:last-child {
       margin-bottom: 0;
@@ -276,7 +276,7 @@
 }
 
 .label-badge-gray {
-  background-color: $gray-100;
+  background-color: $gray-50;
 }
 
 .label-links {

app/assets/stylesheets/pages/note_form.scss

@@ -253,11 +253,11 @@ table {
     background-color: $gray-light;
     border-radius: 0 0 3px 3px;
     padding: $gl-padding;
-    border-top: 1px solid $gray-100;
+    border-top: 1px solid $gray-50;
 
     + .new-note {
       background-color: $gray-light;
-      border-top: 1px solid $gray-100;
+      border-top: 1px solid $gray-50;
     }
 
     &.is-replying {

app/assets/stylesheets/pages/notes.scss

@@ -5,7 +5,7 @@ $note-form-margin-left: 72px;
 @mixin vertical-line($left) {
   &::before {
     content: '';
-    border-left: 2px solid $gray-100;
+    border-left: 2px solid $gray-50;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -83,8 +83,8 @@ $note-form-margin-left: 72px;
   .replies-toggle {
     background-color: $gray-light;
     padding: $gl-padding-8 $gl-padding;
-    border-top: 1px solid $gray-100;
-    border-bottom: 1px solid $gray-100;
+    border-top: 1px solid $gray-50;
+    border-bottom: 1px solid $gray-50;
 
     .collapse-replies-btn:hover {
       color: $blue-600;

app/assets/stylesheets/pages/projects.scss

@@ -396,7 +396,7 @@
     margin-right: $gl-padding-4;
     margin-bottom: $gl-padding-4;
     color: $gl-text-color-secondary;
-    background-color: $gray-100;
+    background-color: $gray-50;
     line-height: $gl-btn-line-height;
 
     &:hover {

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -255,7 +255,7 @@ html.group-epics-roadmap-html {
   &:hover {
     .epic-details-cell,
     .epic-timeline-cell {
-      background-color: $gray-100;
+      background-color: $gray-50;
     }
   }