Rename highlight-color variables

src/styles/annotator/highlights.scss

@@ -10,7 +10,7 @@
 // of the annotated document when highlights are enabled/disabled.
 .hypothesis-highlights-always-on {
   .hypothesis-svg-highlight {
-    fill: var.$highlight-color;
+    fill: var.$color-highlight;
 
     &.is-opaque {
       fill: yellow;
@@ -18,7 +18,7 @@
   }
 
   .hypothesis-highlight {
-    background-color: var.$highlight-color;
+    background-color: var.$color-highlight;
 
     // For PDFs, we still create highlight elements to wrap the text but the
     // highlight effect is created by another element.
@@ -44,7 +44,7 @@
 
     // Give a highlight inside a larger highlight a different color to stand out.
     & .hypothesis-highlight {
-      background-color: var.$highlight-color-second;
+      background-color: var.$color-highlight-second;
       &.is-transparent {
         background-color: transparent;
       }
@@ -66,7 +66,7 @@
     // When an annotation card is hovered in the sidebar, the corresponding
     // highlights are shown with a "focused" color.
     &.hypothesis-highlight-focused {
-      background-color: var.$highlight-color-focus !important;
+      background-color: var.$color-highlight-focused !important;
 
       .hypothesis-highlight {
         background-color: transparent !important;

src/styles/variables.scss

@@ -45,11 +45,15 @@ $color-notice: #fbc168;
 $color-error: #d93c3f;
 
 $color-brand: #bd1c2b;
-$color-highlight: #58cef4;
+$color-quote: #58cef4;
 
 $color-focus-outline: #51a7e8;
 $color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
 
+$color-highlight: rgba(255, 255, 60, 0.4);
+$color-highlight-second: rgba(206, 206, 60, 0.4);
+$color-highlight-focused: rgba(156, 230, 255, 0.5);
+
 // Scaffolding
 // -------------------------
 $color-background: $white;
@@ -98,9 +102,6 @@ $zindex-tooltip: 20;
 // Other Variables
 // -------------------------
 $bucket-bar-width: 22px;
-$highlight-color: rgba(255, 255, 60, 0.4);
-$highlight-color-second: rgba(206, 206, 60, 0.4);
-$highlight-color-focus: rgba(156, 230, 255, 0.5);
 $top-bar-height: 40px;
 $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);