Merge pull request #1589 from hypothesis/remove-gray-lighter

Migrate `$gray-lighter` SASS color to `$grey-3`

src/styles/annotator/annotator.scss

@@ -115,7 +115,7 @@ var.$base-font-size: 14px;
     transition: background-color 0.25s;
     @include shadow.smallshadow;
     background: var.$white;
-    border: solid 1px var.$gray-lighter;
+    border: solid 1px var.$grey-3;
     border-radius: 4px;
     color: var.$gray-light;
     text-decoration: none;

src/styles/annotator/bucket-bar.scss

@@ -17,7 +17,7 @@
   .annotator-bucket-indicator {
     box-sizing: border-box;
     background: var.$white;
-    border: solid 1px var.$gray-lighter;
+    border: solid 1px var.$grey-3;
     border-radius: 2px 4px 4px 2px;
     right: 0;
     pointer-events: all;
@@ -57,7 +57,7 @@
 
     &:before {
       border-width: 8px;
-      border-right: 5px solid var.$gray-lighter;
+      border-right: 5px solid var.$grey-3;
       margin-top: -8px;
     }
 
@@ -93,7 +93,7 @@
 
       &:before {
         border-width: 13px;
-        border-bottom: 6px solid var.$gray-lighter;
+        border-bottom: 6px solid var.$grey-3;
         margin-left: -13px;
       }
 
@@ -115,7 +115,7 @@
 
       &:before {
         border-width: 13px;
-        border-top: 6px solid var.$gray-lighter;
+        border-top: 6px solid var.$grey-3;
         margin-left: -13px;
       }
 

src/styles/mixins/forms.scss

@@ -30,7 +30,7 @@
 
 @mixin form-input {
   @include var.font-normal;
-  border: 1px solid var.$gray-lighter;
+  border: 1px solid var.$grey-3;
   border-radius: 2px;
   padding: 0.5em 0.75em;
   font-weight: normal;

src/styles/sidebar/common.scss

@@ -58,46 +58,3 @@ html {
     // margin-top: .75em;
   }
 }
-
-//TABS////////////////////////////////
-.nav-tabs {
-  margin-bottom: 0.7em;
-
-  & > li {
-    display: inline-block;
-    line-height: 1;
-
-    a {
-      font-family: var.$sans-font-family;
-      font-weight: bold;
-      color: var.$gray-dark;
-      cursor: pointer;
-      border-bottom: 3px solid transparent;
-      padding-left: 0.153em;
-      padding-right: 0.153em;
-      padding-bottom: 0.076em;
-    }
-
-    &:active a {
-      position: relative;
-      top: 0.076em;
-    }
-
-    &.active:active a {
-      top: 0;
-    }
-
-    &.active a {
-      border-color: var.$gray-lighter;
-    }
-
-    &:before {
-      content: '/';
-      margin: 0 0.75em;
-    }
-
-    &:first-child:before {
-      content: none;
-    }
-  }
-}

src/styles/sidebar/components/annotation-quote.scss

@@ -16,7 +16,7 @@
 .annotation-quote__quote {
   @include var.font-normal;
 
-  border-left: 3px solid var.$gray-lighter;
+  border-left: 3px solid var.$grey-3;
   color: var.$grey-4;
   font-family: sans-serif;
   font-size: 12px;

src/styles/sidebar/sidebar.scss

@@ -119,7 +119,7 @@ hypothesis-app {
 // ---------------------------------------
 
 .sheet {
-  border: solid 1px var.$gray-lighter;
+  border: solid 1px var.$grey-3;
   border-radius: 2px;
   font-family: var.$sans-font-family;
   font-weight: 300;
@@ -128,15 +128,6 @@ hypothesis-app {
   position: relative;
   background-color: var.$body-background;
 
-  .nav-tabs {
-    border: 1px none var.$gray-lighter;
-    border-bottom-style: solid;
-    padding: 0 0 1.1em;
-    li a {
-      padding-bottom: 0.231em;
-    }
-  }
-
   .close {
     position: absolute;
     right: 1em;
@@ -159,7 +150,7 @@ hypothesis-app {
 .annotation-unavailable-message {
   display: flex;
   flex-direction: column;
-  border: 1px solid var.$gray-lighter;
+  border: 1px solid var.$grey-3;
   padding-top: 30px;
   padding-bottom: 30px;
   border-radius: 3px;

src/styles/variables.scss

 @use "sass:color";
-// Colors and shades of gray
-// Names courtesy of http://chir.ag/projects/name-that-color
+
+// Greys
 
 $white: #fff !default;
-$black: #000 !default;
 
-// Grays
-// ---------------------
+$grey-1: #f2f2f2;
+$grey-2: #ececec;
+
+$grey-3: #dbdbdb;
+
+$grey-4: #a6a6a6;
+
+$gray-light: #969696 !default;
+$color-gray: #818181;
+
+$grey-5: #7a7a7a;
 $gray: #777 !default;
+
+$color-dove-gray: #626262;
 $gray-dark: #585858;
-$gray-light: #969696 !default;
-$gray-lighter: #d3d3d3 !default;
 
+$grey-6: #3f3f3f;
 $color-mine-shaft: #3a3a3a;
-$color-dove-gray: #626262;
-$color-gray: #818181;
+
+$grey-7: #202020;
+
+$black: #000 !default;
+
 // Colors
-// ---------------------
+
+$brand: #bd1c2b;
+$highlight: #58cef4;
 
 $button-text-color: $gray-dark !default;
 $button-background-start: $white !default;
@@ -27,19 +41,6 @@ $button-background-gradient: to bottom, $button-background-start,
 $error-color: #f0480c !default;
 $success-color: #1cbd41 !default;
 
-// Variables for the new color palette
-// ------------------------------------
-$grey-1: #f2f2f2;
-$grey-2: #ececec;
-$grey-3: #dbdbdb;
-$grey-4: #a6a6a6;
-$grey-5: #7a7a7a;
-$grey-6: #3f3f3f;
-$grey-7: #202020;
-
-$brand: #bd1c2b;
-$highlight: #58cef4;
-
 // Tint and shade functions from
 // https://css-tricks.com/snippets/sass/tint-shade-functions
 @function tint($color, $percent) {