Merge pull request #1590 from hypothesis/remove-more-grays

Consolidate all grey colors across client application

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 {
@@ -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/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

@@ -34,7 +34,7 @@
   border-radius: 2px;
   padding: 0.5em 0.75em;
   font-weight: normal;
-  color: var.$gray;
+  color: var.$grey-5;
   background-color: #fafafa;
 }
 
@@ -44,7 +44,7 @@
 
   @include focus-outline;
   @include placeholder {
-    color: var.$gray;
+    color: var.$grey-5;
   }
 }
 
@@ -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,12 +91,12 @@
   cursor: default;
   background: #f0f0f0;
   border-color: #cecece;
-  color: var.$gray-light;
+  color: var.$grey-semi;
 }
 
 @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;
@@ -108,10 +108,10 @@
   padding-right: 12px;
 
   &:disabled {
-    color: var.$gray-light;
+    color: var.$grey-semi;
   }
 
   &:hover:enabled {
-    background-color: var.$color-mine-shaft;
+    background-color: var.$grey-6;
   }
 }

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

@@ -23,8 +23,8 @@
   // of related options to the right
   .annotation-publish-control__btn {
     $text-color: var.$grey-1;
-    $default-background-color: var.$color-dove-gray;
-    $hover-background-color: var.$color-mine-shaft;
+    $default-background-color: var.$grey-mid;
+    $hover-background-color: var.$grey-6;
     $h-padding: 9px;
     $height: 35px;
     $border-radius: 2px;
@@ -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
@@ -98,7 +98,7 @@
         width: 1px;
         height: 15px;
 
-        background-color: var.$color-gray;
+        background-color: var.$grey-5;
       }
 
       // the ▼ arrow which reveals the dropdown menu when clicked

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/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 {
@@ -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/tags-input.scss

@@ -24,7 +24,7 @@ tags-input {
       outline: none;
       border: none !important;
       background: none;
-      color: var.$gray;
+      color: var.$grey-5;
 
       // Firefox and Webkit render input boxes at different heights. This
       // causes issues when the tags (which render consistentely) are inserted

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

@@ -60,17 +60,17 @@
   @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;
 
   &:hover {
-    color: var.$gray-dark;
+    color: var.$grey-mid;
   }
 
   &.is-active {
-    color: var.$gray-dark;
+    color: var.$grey-mid;
   }
 
   &--refresh {

src/styles/variables.scss

@@ -11,17 +11,19 @@ $grey-3: #dbdbdb;
 
 $grey-4: #a6a6a6;
 
-$gray-light: #969696 !default;
-$color-gray: #818181;
+// 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;
-$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;
-$color-mine-shaft: #3a3a3a;
 
 $grey-7: #202020;
 
@@ -32,7 +34,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,
@@ -87,7 +89,7 @@ $success-color: #1cbd41 !default;
 // Scaffolding
 // -------------------------
 $body-background: $white !default;
-$text-color: $gray-dark !default;
+$text-color: $grey-mid !default;
 
 // Links
 // -------------------------