Merge pull request #2187 from hypothesis/normalize-text-colors

Standardize text colors

src/annotator/components/adder-toolbar.js

@@ -17,7 +17,9 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
       aria-label={title}
       title={title}
     >
-      {icon && <SvgIcon name={icon} />}
+      {icon && (
+        <SvgIcon name={icon} className="annotator-adder-actions__icon" />
+      )}
       {typeof badgeCount === 'number' && (
         <span className="annotator-adder-actions__badge">{badgeCount}</span>
       )}

src/styles/annotator/adder.scss

@@ -103,7 +103,7 @@ $adder-transition-duration: 80ms;
 
   box-shadow: none;
   background: transparent;
-  color: var.$grey-mid;
+  color: var.$color-text;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -118,6 +118,10 @@ $adder-transition-duration: 80ms;
   transition: color $adder-transition-duration;
 }
 
+.annotator-adder-actions__button {
+  color: var.$grey-mid;
+}
+
 .annotator-adder-actions__separator {
   margin: 5px 5px;
   border-right: 1px solid var.$grey-4;

src/styles/annotator/bucket-bar.scss

@@ -34,7 +34,7 @@
       @include reset.reset-box-model;
       @include reset.reset-font;
       background: none;
-      color: var.$text-color;
+      color: var.$color-text-light;
       font-weight: bold;
       font-family: var.$sans-font-family;
       font-size: 10px;

src/styles/mixins/forms.scss

@@ -26,7 +26,7 @@
 
   @include focus-outline;
   @include placeholder {
-    color: var.$grey-5;
+    color: var.$color-text-light;
   }
 }
 
@@ -36,7 +36,7 @@
   border-radius: 2px;
   padding: 0.5em 0.75em;
   font-weight: normal;
-  color: var.$grey-5;
+  color: var.$color-text-light;
   background-color: var.$grey-0;
 
   &:focus {

src/styles/mixins/panel.scss

@@ -31,7 +31,7 @@
     border-bottom: 1px solid var.$grey-3;
     font-size: 1.25em;
     font-weight: 500;
-    color: var.$grey-5;
+    color: var.$color-text-light;
   }
 
   &__title {

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

@@ -2,7 +2,7 @@
 
 .annotation-body {
   @include var.font-normal;
-  color: var.$grey-7;
+  color: var.$color-text;
   margin: 1em 0;
 }
 

src/styles/sidebar/components/annotation-document-info.scss

@@ -2,7 +2,7 @@
 
 .annotation-document-info {
   font-size: 13px;
-  color: var.$grey-5;
+  color: var.$color-text-light;
   display: flex;
 
   &__title {

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

@@ -2,7 +2,7 @@
 @use "../../variables" as var;
 
 .annotation-header {
-  color: var.$grey-6;
+  color: var.$color-text;
 
   &__row {
     display: flex;
@@ -14,7 +14,7 @@
     margin-right: 5px;
     width: 10px;
     height: 10px;
-    color: var.$grey-6;
+    color: var.$color-text;
   }
 
   &__reply-toggle.button {
@@ -35,7 +35,7 @@
   &__timestamp-edited {
     @include var.font-small;
     font-style: italic;
-    color: var.$grey-5;
+    color: var.$color-text-light;
   }
 
   &__timestamp-created-link {
@@ -45,7 +45,7 @@
   }
 
   &__timestamp-created-link {
-    color: var.$grey-6;
+    color: var.$color-text-light;
   }
 
   &__highlight {
@@ -53,6 +53,7 @@
   }
 
   &__highlight-icon {
+    color: var.$grey-5;
     width: 12px;
     height: 12px;
     /* bring down the baseline a little */

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

@@ -8,7 +8,7 @@
 
   &__link {
     display: flex;
-    color: var.$grey-5;
+    color: var.$color-text-light;
   }
 
   &__icon {

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

@@ -7,7 +7,7 @@
   // A split button with a primary submit on the left and a drop-down menu
   // of related options to the right
   .annotation-publish-control__btn {
-    $text-color: var.$grey-1;
+    $text-color: var.$color-text-inverted;
     $default-background-color: var.$grey-mid;
     $hover-background-color: var.$grey-6;
     $h-padding: 9px;

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

@@ -11,7 +11,7 @@
     @include var.font-normal;
 
     border-left: 3px solid var.$grey-3;
-    color: var.$grey-5;
+    color: var.$color-text-light;
     font-family: sans-serif;
     font-size: 12px;
     font-style: italic;

src/styles/sidebar/components/annotation-share-info.scss

@@ -9,7 +9,7 @@
     display: flex;
     align-items: baseline;
     font-size: var.$body1-font-size;
-    color: var.$grey-5;
+    color: var.$color-text-light;
   }
 
   &__group-info {

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

@@ -3,15 +3,15 @@
 .annotation-user {
   &__user-name {
     @include var.font-normal;
-    color: var.$grey-7;
+    color: var.$color-text;
     font-weight: bold;
 
     .is-dimmed & {
-      color: var.$grey-5;
+      color: var.$color-text-light;
     }
 
     .is-highlighted & {
-      color: var.$grey-7;
+      color: var.$color-text;
     }
   }
 }

src/styles/sidebar/components/annotation.scss

@@ -9,6 +9,7 @@
 // When hovering a top-level annotation, show the footer in a hovered state.
 // When hovering a reply (at any level), show the reply's own footer in
 // a hovered state and also the footer of the top-level annotation.
+// TODO: Make these work again or remove
 .thread-list__card:hover > .annotation,
 .annotation:hover {
   .annotation-replies__link,
@@ -24,7 +25,7 @@
     // make them stand out next to others, which will have the `is-dimmed` state
     // set
     .annotation-body {
-      color: var.$grey-7;
+      color: var.$color-text;
     }
   }
 
@@ -32,7 +33,7 @@
     // Lighten the bodies of dimmed annotations to make other
     // annotations which are not dimmed stand out
     .annotation-body {
-      color: var.$grey-5;
+      color: var.$color-text-light;
     }
   }
 
@@ -63,7 +64,7 @@
 
   &__footer {
     @include var.font-normal;
-    color: var.$grey-5;
+    color: var.$color-text-light;
     margin-top: 1em;
   }
 }

src/styles/sidebar/components/excerpt.scss

@@ -44,7 +44,7 @@
   }
 
   .excerpt__toggle-link > a {
-    color: var.$text-color;
+    color: var.$color-text;
     font-style: italic;
     font-weight: normal;
   }

src/styles/sidebar/components/group-list.scss

@@ -6,7 +6,7 @@
 
 .group-list__menu-label {
   align-items: center;
-  color: var.$grey-6;
+  color: var.$color-text;
   display: flex;
 
   // Prevent label from wrapping if top bar is too narrow to fit all of its

src/styles/sidebar/components/help-panel.scss

@@ -57,7 +57,7 @@
       border-right: 1px solid var.$grey-3;
       text-align: center;
       font-size: 1.25em;
-      color: var.$grey-5;
+      color: var.$color-text-light;
 
       &:last-of-type {
         border-right: none;
@@ -65,7 +65,7 @@
     }
 
     &__link {
-      color: var.$grey-5;
+      color: var.$color-text-light;
     }
 
     &__icon {

src/styles/sidebar/components/logged-out-message.scss

@@ -4,7 +4,7 @@
   margin: 25px auto;
   width: 70%;
   text-align: center;
-  color: var.$grey-mid;
+  color: var.$color-text;
   display: flex;
   flex-direction: column;
 }
@@ -12,13 +12,13 @@
 .logged-out-message__link {
   padding: 0;
   display: inline;
-  color: var.$grey-mid;
+  color: var.$color-text;
   background-color: transparent;
   text-decoration: underline;
   font-weight: 400;
 
   &:hover {
-    color: var.$grey-7;
+    color: var.$color-text;
     text-decoration: none;
   }
 }
@@ -31,7 +31,7 @@
 
 .logged-out-message__logo-icon {
   font-size: 30px;
-  color: var.$grey-4;
+  color: var.$grey-mid;
 
   &:hover {
     color: var.$grey-7;

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

@@ -22,7 +22,7 @@ a.menu-item:hover {
   appearance: none;
   align-items: center;
   padding-left: $menu-item-padding;
-  color: var.$grey-6;
+  color: var.$color-text;
   border: none;
   padding-right: 0;
   font-weight: 500;
@@ -45,7 +45,7 @@ a.menu-item:hover {
   &.is-submenu {
     min-height: $item-height - 10px;
     background: var.$grey-1;
-    color: color.mix(var.$grey-5, var.$grey-6, $weight: 50%);
+    color: var.$color-text;
     font-weight: normal;
     &:hover {
       background-color: var.$grey-3;
@@ -60,7 +60,7 @@ a.menu-item:hover {
 
   &.is-expanded {
     background-color: var.$grey-1;
-    color: var.$grey-6;
+    color: var.$color-text;
     border-bottom: solid 1px var.$grey-3;
     &:hover {
       background-color: var.$grey-3;
@@ -72,7 +72,7 @@ a.menu-item:hover {
     }
   }
   &.is-disabled {
-    color: var.$grey-4;
+    color: var.$color-text-light;
   }
 }
 .menu-item__icon {

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

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

src/styles/sidebar/components/menu.scss

@@ -21,7 +21,7 @@
   align-items: center;
   &:hover {
     transition: 0.2s ease-out;
-    color: var.$grey-7;
+    color: var.$color-text;
   }
 }
 

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

@@ -6,7 +6,7 @@
   flex-flow: row nowrap;
 
   position: relative;
-  color: var.$grey-mid;
+  color: var.$color-text;
 }
 
 .search-input__icon-button {
@@ -33,7 +33,7 @@
 
   &:disabled {
     background: none;
-    color: var.$grey-semi;
+    color: var.$color-text-light;
   }
 
   // Expand the search input when focused (triggered by clicking

src/styles/sidebar/components/selection-tabs.scss

@@ -5,16 +5,21 @@
 .selection-tabs {
   display: flex;
   flex-direction: row;
-  color: var.$grey-5;
+  color: var.$color-text-light;
   @include var.font-normal;
 
   &:hover {
-    color: var.$grey-6;
+    color: var.$color-text;
   }
 
   padding-bottom: 10px;
 }
 
+.selection-tabs__icon {
+  color: var.$grey-mid;
+  margin: 0 0.25em;
+}
+
 .selection-tabs--theme-clean {
   margin-left: 15px;
 }
@@ -23,7 +28,7 @@
   @include buttons.reset-native-btn-styles;
   @include focus.outline-on-keyboard-focus;
 
-  color: var.$grey-6;
+  color: var.$color-text;
   margin-right: 20px;
   cursor: pointer;
   min-width: 85px;
@@ -56,15 +61,8 @@
 }
 
 .selection-tabs__message {
+  color: var.$color-text;
   border: 1px solid var.$grey-3;
-  padding: 3em;
+  padding: 2em;
   text-align: center;
 }
-
-.selection-tabs__icon {
-  width: 12px;
-  height: 12px;
-  margin-right: 1px;
-  margin-bottom: -1px; // Pull the icon a little toward the baseline
-  color: var.$grey-5;
-}

src/styles/sidebar/components/share-annotations-panel.scss

@@ -3,10 +3,10 @@
 @use "../../mixins/links";
 
 .share-annotations-panel {
-  color: var.$grey-5;
+  color: var.$color-text-light;
 
   &__intro {
-    color: var.$grey-7;
+    color: var.$color-text;
     font-weight: 500;
   }
 

src/styles/sidebar/components/tag-editor.scss

@@ -23,7 +23,7 @@
   }
 
   &__edit {
-    color: var.$grey-6;
+    color: var.$color-text;
     background: var.$grey-1;
     border: 1px solid var.$grey-3;
     border-radius: 2px 0 0 2px;

src/styles/sidebar/components/tag-list.scss

@@ -9,7 +9,7 @@
     margin: 0.25em 0.5em 0.25em 0;
     padding: 0 0.5em;
     line-height: var.$base-line-height;
-    background: var.$grey-1;
+    background: var.$grey-0;
     border: 1px solid var.$grey-3;
     border-radius: 2px;
   }
@@ -17,7 +17,7 @@
   &__link,
   &__text {
     text-decoration: none;
-    color: var.$grey-6;
+    color: var.$color-text-light;
   }
 
   &__link {

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

@@ -20,6 +20,8 @@
 
   &__icon-button,
   &__menu-icon {
+    color: var.$grey-mid;
+
     &.is-active {
       color: var.$grey-7;
 

src/styles/sidebar/components/version-info.scss

@@ -13,14 +13,14 @@
     line-height: 1.25em;
     text-align: right;
     font-weight: 500;
-    color: var.$grey-6;
+    color: var.$color-text;
   }
 
   &__value {
     margin-bottom: 0.5em;
     margin-left: 8em;
     overflow-wrap: break-word; // Keep really long userids from overflowing
-    color: var.$grey-6;
+    color: var.$color-text-light;
   }
 
   &__actions {

src/styles/sidebar/sidebar.scss

@@ -69,7 +69,7 @@ body {
   height: 100%;
 
   background-color: var.$body-background;
-  color: var.$text-color;
+  color: var.$color-text;
   font-family: var.$sans-font-family;
   font-size: var.$base-font-size;
   font-weight: normal;

src/styles/sidebar/styled-text.scss

@@ -110,7 +110,7 @@
     @include var.font-normal;
 
     border-left: 3px solid var.$grey-3;
-    color: var.$grey-4;
+    color: var.$color-text-light;
     font-family: sans-serif;
     font-size: 12px;
     font-style: italic;

src/styles/variables.scss

@@ -35,6 +35,11 @@ $grey-6: #3f3f3f;
 $grey-7: #202020;
 
 // Colors
+$color-text: $grey-7;
+$color-text-light: $grey-5;
+// Text color when used on a dark background
+$color-text-inverted: $grey-1;
+
 $color-success: #00a36d;
 $color-notice: #fbc168;
 $color-error: #d93c3f;
@@ -91,7 +96,6 @@ $color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
 // Scaffolding
 // -------------------------
 $body-background: $white !default;
-$text-color: $grey-mid !default;
 
 // Links
 // -------------------------