Introduce interim `$grey-semi` SASS color for migration purposes.

Migrate usages of `$gray-light` to `$grey-semi`

src/styles/annotator/adder.scss

@@ -98,11 +98,11 @@ $adder-transition-duration: 80ms;
 }
 
 .annotator-adder-actions:hover .annotator-adder-actions__button {
-  color: var.$gray-light !important;
+  color: var.$grey-semi !important;
 }
 
 .annotator-adder-actions:hover .annotator-adder-actions__label {
-  color: var.$gray-light !important;
+  color: var.$grey-semi !important;
 }
 
 .annotator-adder-actions__button {

src/styles/annotator/annotator.scss

@@ -117,7 +117,7 @@ var.$base-font-size: 14px;
     background: var.$white;
     border: solid 1px var.$grey-3;
     border-radius: 4px;
-    color: var.$gray-light;
+    color: var.$grey-semi;
     text-decoration: none;
     height: 30px;
     width: 30px;
@@ -126,7 +126,7 @@ var.$base-font-size: 14px;
     margin-bottom: 5px;
 
     &:active {
-      background-color: var.$gray-light;
+      background-color: var.$grey-semi;
     }
 
     &:focus,

src/styles/mixins/forms.scss

@@ -67,7 +67,7 @@
   color: var.$button-text-color;
   text-shadow: 0 1px 0 #fff;
   border-radius: 2px;
-  border: 1px solid var.$gray-light;
+  border: 1px solid var.$grey-semi;
   padding: 0.5em 0.9em;
 }
 
@@ -91,7 +91,7 @@
   cursor: default;
   background: #f0f0f0;
   border-color: #cecece;
-  color: var.$gray-light;
+  color: var.$grey-semi;
 }
 
 @mixin primary-action-btn {
@@ -108,7 +108,7 @@
   padding-right: 12px;
 
   &:disabled {
-    color: var.$gray-light;
+    color: var.$grey-semi;
   }
 
   &:hover:enabled {

src/styles/sidebar/components/annotation.scss

@@ -117,7 +117,7 @@
 }
 
 .annotation-citation-domain {
-  color: var.$gray-light;
+  color: var.$grey-semi;
   font-size: var.$body1-font-size;
 }
 

src/styles/sidebar/components/menu-section.scss

@@ -5,7 +5,7 @@
 }
 
 .menu-section__heading {
-  color: var.$gray-light;
+  color: var.$grey-semi;
   font-size: var.$body1-font-size;
   line-height: 1;
   margin: 1px 1px 0;

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

@@ -37,7 +37,7 @@
 
   &:disabled {
     background: none;
-    color: var.$gray-light;
+    color: var.$grey-semi;
   }
 
   // Expand the search input when focused (triggered by clicking

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

@@ -60,7 +60,7 @@
   @include buttons.reset-native-btn-styles;
 
   height: 100%;
-  color: var.$gray-light;
+  color: var.$grey-semi;
   display: inline-block;
   cursor: pointer;
   padding: 1px 3px 0 3px;

src/styles/variables.scss

@@ -11,7 +11,10 @@ $grey-3: #dbdbdb;
 
 $grey-4: #a6a6a6;
 
-$gray-light: #969696 !default;
+// Interim color variable for migration purposes, as the step between `$grey-4`
+// and `$grey-5` is large. Represents `base-semi` in proposed future palette,
+// minus blue tint.
+$grey-semi: #9c9c9c;
 
 $grey-5: #7a7a7a;