Introduce interim `$grey-mid` color for consolidation purposes

Introduce a new color variable, `$grey-mid`, which sits between
`$color-5` and `$color-6` in the current palette scale and fills a
large gap.

Remove `$gray-dark` and `$color-dove-gray` after migrating to `$grey-mid`.

src/styles/annotator/adder.scss

@@ -110,7 +110,7 @@ $adder-transition-duration: 80ms;
   font-family: h;
   font-size: 18px;
   background: transparent !important;
-  color: var.$gray-dark !important;
+  color: var.$grey-mid !important;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,10 +126,10 @@ $adder-transition-duration: 80ms;
 }
 
 .annotator-adder-actions .annotator-adder-actions__button:hover {
-  color: var.$gray-dark !important;
+  color: var.$grey-mid !important;
 
   .annotator-adder-actions__label {
-    color: var.$gray-dark !important;
+    color: var.$grey-mid !important;
   }
 }
 
@@ -137,6 +137,6 @@ $adder-transition-duration: 80ms;
   font-size: 11px;
   margin: 2px 0px;
   font-family: sans-serif;
-  color: var.$gray-dark !important;
+  color: var.$grey-mid !important;
   transition: color $adder-transition-duration;
 }

src/styles/mixins/forms.scss

@@ -96,7 +96,7 @@
 
 @mixin primary-action-btn {
   color: var.$grey-1;
-  background-color: var.$color-dove-gray;
+  background-color: var.$grey-mid;
   height: 35px;
   border: none;
   border-radius: 2px;

src/styles/sidebar/components/annotation-publish-control.scss

@@ -23,7 +23,7 @@
   // of related options to the right
   .annotation-publish-control__btn {
     $text-color: var.$grey-1;
-    $default-background-color: var.$color-dove-gray;
+    $default-background-color: var.$grey-mid;
     $hover-background-color: var.$grey-6;
     $h-padding: 9px;
     $height: 35px;
@@ -70,7 +70,7 @@
       margin-left: 8px;
 
       border: none;
-      background-color: var.$color-dove-gray;
+      background-color: var.$grey-mid;
       border-top-right-radius: $border-radius;
       border-bottom-right-radius: $border-radius;
 
@@ -84,7 +84,7 @@
       button[aria-expanded='true'] &-separator {
         // hide the 1px vertical separator when the dropdown arrow
         // is hovered or menu is open
-        background-color: var.$color-dove-gray;
+        background-color: var.$grey-mid;
       }
 
       // 1px vertical separator between label and dropdown arrow

src/styles/sidebar/components/new-note.scss

 @use "../../variables" as var;
 
 .new-note__create {
-  background-color: var.$color-dove-gray;
+  background-color: var.$grey-mid;
   border: none;
   border-radius: 3px;
   color: #fff;

src/styles/sidebar/components/search-input.scss

@@ -6,7 +6,7 @@
   flex-flow: row nowrap;
 
   position: relative;
-  color: var.$gray-dark;
+  color: var.$grey-mid;
 }
 
 .search-input__icon {

src/styles/sidebar/components/top-bar.scss

@@ -66,11 +66,11 @@
   padding: 1px 3px 0 3px;
 
   &:hover {
-    color: var.$gray-dark;
+    color: var.$grey-mid;
   }
 
   &.is-active {
-    color: var.$gray-dark;
+    color: var.$grey-mid;
   }
 
   &--refresh {

src/styles/variables.scss

@@ -16,8 +16,10 @@ $gray-light: #969696 !default;
 $grey-5: #7a7a7a;
 $gray: #777 !default;
 
-$color-dove-gray: #626262;
-$gray-dark: #585858;
+// Interim color variable for migration purposes, as the step between `$grey-5`
+// and `$grey-6` is large. Represents `base-mid` in proposed future palette,
+// minus blue tint.
+$grey-mid: #595959;
 
 $grey-6: #3f3f3f;
 
@@ -30,7 +32,7 @@ $black: #000 !default;
 $brand: #bd1c2b;
 $highlight: #58cef4;
 
-$button-text-color: $gray-dark !default;
+$button-text-color: $grey-mid !default;
 $button-background-start: $white !default;
 $button-background-end: #f0f0f0 !default;
 $button-background-gradient: to bottom, $button-background-start,
@@ -85,7 +87,7 @@ $success-color: #1cbd41 !default;
 // Scaffolding
 // -------------------------
 $body-background: $white !default;
-$text-color: $gray-dark !default;
+$text-color: $grey-mid !default;
 
 // Links
 // -------------------------