Initial $gray-200 updates

Changed $gray-200 hex and started replacing instances of $gray-200
with $gray-100.

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -204,7 +204,7 @@ export default {
       :class="{ 'pr-sm-8': sidebarStatus }"
     >
       <div
-        class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid flex-column flex-sm-row"
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid flex-column flex-sm-row"
       >
         <div
           data-testid="alert-header"

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -148,7 +148,10 @@ export default {
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700">
+    <div
+      v-if="glFeatures.multilineComments"
+      class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
+    >
       <multiline-comment-form
         v-model="commentLineStart"
         :line="line"

app/assets/javascripts/issue_show/components/app.vue

@@ -420,7 +420,7 @@ export default {
         <transition name="issuable-header-slide">
           <div
             v-if="shouldShowStickyHeader"
-            class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-200 gl-py-3"
+            class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-100 gl-py-3"
             data-testid="issue-sticky-header"
           >
             <div

app/assets/javascripts/notes/components/noteable_note.vue

@@ -340,7 +340,7 @@ export default {
         :line="line"
         :comment-line-options="commentLineOptions"
         :line-range="note.position.line_range"
-        class="gl-mb-3 gl-text-gray-700"
+        class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
       />
       <div
         v-else

app/assets/javascripts/registry/explorer/components/list_item.vue

@@ -40,7 +40,7 @@ export default {
         'gl-border-b-1': !this.last,
         'gl-border-b-2': this.last,
         'disabled-content': this.disabled,
-        'gl-border-gray-200': !this.selected,
+        'gl-border-gray-100': !this.selected,
         'gl-bg-blue-50 gl-border-blue-200': this.selected,
       };
     },
@@ -109,14 +109,14 @@ export default {
       <div class="gl-w-7"></div>
       <div
         v-if="isDetailsShown"
-        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-200 gl-mb-3"
+        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
       >
         <div
           v-for="(row, detailIndex) in detailsSlots"
           :key="detailIndex"
           class="gl-px-5 gl-py-2"
           :class="{
-            'gl-border-gray-200 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
+            'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
           }"
         >
           <slot :name="row"></slot>

app/assets/stylesheets/components/design_management/design.scss

@@ -98,7 +98,7 @@
     &::before {
       content: '';
-      border-left: 1px solid $gray-200;
+      border-left: 1px solid $gray-100;
       position: absolute;
       left: 28px;
       top: -18px;
@@ -146,7 +146,7 @@
 }
 .design-dropzone-border {
-  border: 2px dashed $gray-200;
+  border: 2px dashed $gray-100;
 }
 .design-dropzone-card {

app/assets/stylesheets/components/popover.scss

 .popover {
   max-width: $popover-max-width;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   box-shadow: $popover-box-shadow;
   font-size: $gl-font-size-small;
@@ -50,7 +50,7 @@
   *  due to the box-shadow include in our custom styles.
   */
   > .arrow::before {
-    border-top-color: $gray-200;
+    border-top-color: $gray-100;
     bottom: 1px;
   }
@@ -61,7 +61,7 @@
 .bs-popover-bottom {
   > .arrow::before {
-    border-bottom-color: $gray-200;
+    border-bottom-color: $gray-100;
   }
   > .popover-header::before {
@@ -70,11 +70,11 @@
 }
 .bs-popover-right > .arrow::before {
-  border-right-color: $gray-200;
+  border-right-color: $gray-100;
 }
 .bs-popover-left > .arrow::before {
-  border-left-color: $gray-200;
+  border-left-color: $gray-100;
 }
 .popover-header {

app/assets/stylesheets/framework/awards.scss

@@ -179,7 +179,7 @@
   &.user-authored {
     cursor: default;
     background-color: $gray-light;
-    border-color: $gray-200;
+    border-color: $gray-100;
     color: $gl-text-color-disabled;
     gl-emoji {

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -28,7 +28,7 @@
   max-width: 300px;
   width: auto;
   background: $white;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   box-shadow: 0 1px 2px 0 rgba($black, 0.1);
   border-radius: $border-radius-default;
   z-index: 999;

app/assets/stylesheets/framework/buttons.scss

@@ -502,7 +502,7 @@
 // All disabled buttons, regardless of color, type, etc
 %disabled {
   background-color: $gray-light;
-  border-color: $gray-200;
+  border-color: $gray-100;
   color: $gl-text-color-disabled;
   opacity: 1;
   text-decoration: none;

app/assets/stylesheets/framework/dropdowns.scss

@@ -1087,7 +1087,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
   .color-input-container {
     .dropdown-label-color-preview {
-      border: 1px solid $gray-200;
+      border: 1px solid $gray-100;
       border-right: 0;
     }
   }

app/assets/stylesheets/framework/filters.scss

@@ -158,7 +158,7 @@
 .filtered-search-token .selected,
 .filtered-search-term .selected {
   .name {
-    background-color: $gray-200;
+    background-color: $gray-100;
   }
   .operator {

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -342,7 +342,7 @@ body {
         .navbar-toggler,
         .navbar-toggler:hover {
           color: $gray-700;
-          border-left: 1px solid $gray-200;
+          border-left: 1px solid $gray-100;
         }
       }
     }
@@ -360,7 +360,7 @@ body {
       .search-input-wrap {
         .search-icon {
-          fill: $gray-200;
+          fill: $gray-100;
         }
         .search-input {

app/assets/stylesheets/framework/memory_graph.scss

 .memory-graph-container {
   background: $white;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -214,7 +214,7 @@
 .health-status {
   .dropdown-body {
     .health-divider {
-      border-top-color: $gray-200;
+      border-top-color: $gray-100;
     }
     .dropdown-item:not(.health-dropdown-item) {

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -36,7 +36,7 @@
   }
   .status-neutral {
-    background-color: $gray-200;
+    background-color: $gray-100;
     color: $gl-gray-dark;
     &:hover {

app/assets/stylesheets/framework/typography.scss

@@ -89,7 +89,7 @@
     background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
-    border-color: $gray-200 $gray-200 $gray-400;
+    border-color: $gray-100 $gray-100 $gray-400;
     border-image: none;
     border-radius: 3px;
     box-shadow: 0 -1px 0 $gray-400 inset;
@@ -181,7 +181,7 @@
       background-color: $white;
       td {
-        border-color: $gray-200;
+        border-color: $gray-100;
       }
     }
@@ -611,7 +611,7 @@ pre {
   word-wrap: break-word;
   color: $gl-text-color;
   background-color: $gray-light;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   border-radius: $border-radius-small;
 }

app/assets/stylesheets/framework/variables.scss

@@ -164,7 +164,7 @@ $red-950: #4d0a00 !default;
 $gray-10: #fafafa !default;
 $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
-$gray-200: #dfdfdf !default;
+$gray-200: #bfbfbf !default;
 $gray-300: #ccc !default;
 $gray-400: #bababa !default;
 $gray-500: #a7a7a7 !default;
@@ -333,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 /*
  * UI elements
  */
-$border-color: $gray-200;
+$border-color: $gray-100;
 $shadow-color: $t-gray-a-08;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
@@ -867,7 +867,7 @@ $priority-label-empty-state-width: 114px;
 Popovers
 */
 $popover-max-width: 384px;
-$popover-box-shadow: 0 2px 3px 1px $gray-200;
+$popover-box-shadow: 0 2px 3px 1px $gray-100;
 /*
 Issues Analytics

app/assets/stylesheets/framework/variables_overrides.scss

@@ -5,14 +5,14 @@
 $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
-$input-border-color: $gray-200;
+$input-border-color: $gray-100;
 $input-color: $gl-text-color;
 $input-font-size: $gl-font-size;
 $font-family-sans-serif: $regular-font;
 $font-family-monospace: $monospace-font;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
-$table-border-color: $gray-200;
+$table-border-color: $gray-100;
 $card-border-color: $border-color;
 $card-cap-bg: $gray-light !default;
 $success: $green-500;
@@ -21,7 +21,7 @@ $warning: $orange-500;
 $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
-$dropdown-divider-bg: $gray-200;
+$dropdown-divider-bg: $gray-100;
 $dropdown-item-padding-y: 8px;
 $dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -146,7 +146,7 @@
   }
   pre {
-    border-color: var(--ide-border-color-alt, $gray-200);
+    border-color: var(--ide-border-color-alt, $gray-100);
     code {
       background-color: var(--ide-border-color, inherit);
@@ -216,7 +216,7 @@
     color: var(--ide-text-color, $gl-text-color);
     &:hover {
-      background-color: var(--ide-input-border, $gray-200);
+      background-color: var(--ide-input-border, $gray-100);
     }
   }
@@ -300,8 +300,8 @@
     }
     .divider {
-      background-color: var(--ide-dropdown-hover-background, $gray-200);
-      border-color: var(--ide-dropdown-hover-background, $gray-200);
+      background-color: var(--ide-dropdown-hover-background, $gray-100);
+      border-color: var(--ide-dropdown-hover-background, $gray-100);
     }
     li > a:not(.disable-hover):hover,
@@ -316,7 +316,7 @@
   .dropdown-title,
   .dropdown-input {
-    border-color: var(--ide-dropdown-hover-background, $gray-200) !important;
+    border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
   .btn-primary,
@@ -356,7 +356,7 @@
   .btn[disabled] {
     background-color: var(--ide-btn-default-background, $gray-light) !important;
-    border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important;
+    border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
     color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }