Skip to content

C
coopwire-hypothesis
Unverified Commit 0d15ec5d authored by Lyza Gardner's avatar Lyza Gardner Committed by GitHub
Browse files
Options

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

Standardize text colors
parents 612a583e 0c0bb54c
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 60 deletions
src/annotator/components/adder-toolbar.js
View file @ 0d15ec5d
...@@ -17,7 +17,9 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) { ...@@ -17,7 +17,9 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
aria-label={title} aria-label={title}
title={title} title={title}
> >
{icon && <SvgIcon name={icon} />} {icon && (
<SvgIcon name={icon} className="annotator-adder-actions__icon" />
)}
{typeof badgeCount === 'number' && ( {typeof badgeCount === 'number' && (
<span className="annotator-adder-actions__badge">{badgeCount}</span> <span className="annotator-adder-actions__badge">{badgeCount}</span>
)} )}
......
src/styles/annotator/adder.scss
View file @ 0d15ec5d
...@@ -103,7 +103,7 @@ $adder-transition-duration: 80ms; ...@@ -103,7 +103,7 @@ $adder-transition-duration: 80ms;
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
color: var.$grey-mid; color: var.$color-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -118,6 +118,10 @@ $adder-transition-duration: 80ms; ...@@ -118,6 +118,10 @@ $adder-transition-duration: 80ms;
transition: color $adder-transition-duration; transition: color $adder-transition-duration;
} }
.annotator-adder-actions__button {
color: var.$grey-mid;
}
.annotator-adder-actions__separator { .annotator-adder-actions__separator {
margin: 5px 5px; margin: 5px 5px;
border-right: 1px solid var.$grey-4; border-right: 1px solid var.$grey-4;
......
src/styles/annotator/bucket-bar.scss
View file @ 0d15ec5d
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
@include reset.reset-box-model; @include reset.reset-box-model;
@include reset.reset-font; @include reset.reset-font;
background: none; background: none;
color: var.$text-color; color: var.$color-text-light;
font-weight: bold; font-weight: bold;
font-family: var.$sans-font-family; font-family: var.$sans-font-family;
font-size: 10px; font-size: 10px;
......
src/styles/mixins/forms.scss
View file @ 0d15ec5d
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
@include focus-outline; @include focus-outline;
@include placeholder { @include placeholder {
color: var.$grey-5; color: var.$color-text-light;
} }
} }
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
border-radius: 2px; border-radius: 2px;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
font-weight: normal; font-weight: normal;
color: var.$grey-5; color: var.$color-text-light;
background-color: var.$grey-0; background-color: var.$grey-0;
&:focus { &:focus {
......
src/styles/mixins/panel.scss
View file @ 0d15ec5d
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
border-bottom: 1px solid var.$grey-3; border-bottom: 1px solid var.$grey-3;
font-size: 1.25em; font-size: 1.25em;
font-weight: 500; font-weight: 500;
color: var.$grey-5; color: var.$color-text-light;
} }
&__title { &__title {
......
src/styles/sidebar/components/annotation-body.scss
View file @ 0d15ec5d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.annotation-body { .annotation-body {
@include var.font-normal; @include var.font-normal;
color: var.$grey-7; color: var.$color-text;
margin: 1em 0; margin: 1em 0;
} }
......
src/styles/sidebar/components/annotation-document-info.scss
View file @ 0d15ec5d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.annotation-document-info { .annotation-document-info {
font-size: 13px; font-size: 13px;
color: var.$grey-5; color: var.$color-text-light;
display: flex; display: flex;
&__title { &__title {
......
src/styles/sidebar/components/annotation-header.scss
View file @ 0d15ec5d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@use "../../variables" as var; @use "../../variables" as var;
.annotation-header { .annotation-header {
color: var.$grey-6; color: var.$color-text;
&__row { &__row {
display: flex; display: flex;
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
margin-right: 5px; margin-right: 5px;
width: 10px; width: 10px;
height: 10px; height: 10px;
color: var.$grey-6; color: var.$color-text;
} }
&__reply-toggle.button { &__reply-toggle.button {
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
&__timestamp-edited { &__timestamp-edited {
@include var.font-small; @include var.font-small;
font-style: italic; font-style: italic;
color: var.$grey-5; color: var.$color-text-light;
} }
&__timestamp-created-link { &__timestamp-created-link {
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
} }
&__timestamp-created-link { &__timestamp-created-link {
color: var.$grey-6; color: var.$color-text-light;
} }
&__highlight { &__highlight {
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
} }
&__highlight-icon { &__highlight-icon {
color: var.$grey-5;
width: 12px; width: 12px;
height: 12px; height: 12px;
/* bring down the baseline a little */ /* bring down the baseline a little */
......
src/styles/sidebar/components/annotation-license.scss
View file @ 0d15ec5d
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&__link { &__link {
display: flex; display: flex;
color: var.$grey-5; color: var.$color-text-light;
} }
&__icon { &__icon {
......
src/styles/sidebar/components/annotation-publish-control.scss
View file @ 0d15ec5d
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// A split button with a primary submit on the left and a drop-down menu // A split button with a primary submit on the left and a drop-down menu
// of related options to the right // of related options to the right
.annotation-publish-control__btn { .annotation-publish-control__btn {
$text-color: var.$grey-1; $text-color: var.$color-text-inverted;
$default-background-color: var.$grey-mid; $default-background-color: var.$grey-mid;
$hover-background-color: var.$grey-6; $hover-background-color: var.$grey-6;
$h-padding: 9px; $h-padding: 9px;
......
src/styles/sidebar/components/annotation-quote.scss
View file @ 0d15ec5d
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
@include var.font-normal; @include var.font-normal;
border-left: 3px solid var.$grey-3; border-left: 3px solid var.$grey-3;
color: var.$grey-5; color: var.$color-text-light;
font-family: sans-serif; font-family: sans-serif;
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
......
src/styles/sidebar/components/annotation-share-info.scss
View file @ 0d15ec5d
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
display: flex; display: flex;
align-items: baseline; align-items: baseline;
font-size: var.$body1-font-size; font-size: var.$body1-font-size;
color: var.$grey-5; color: var.$color-text-light;
} }
&__group-info { &__group-info {
......
src/styles/sidebar/components/annotation-user.scss
View file @ 0d15ec5d
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
.annotation-user { .annotation-user {
&__user-name { &__user-name {
@include var.font-normal; @include var.font-normal;
color: var.$grey-7; color: var.$color-text;
font-weight: bold; font-weight: bold;
.is-dimmed & { .is-dimmed & {
color: var.$grey-5; color: var.$color-text-light;
} }
.is-highlighted & { .is-highlighted & {
color: var.$grey-7; color: var.$color-text;
} }
} }
} }
src/styles/sidebar/components/annotation.scss
View file @ 0d15ec5d
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
// When hovering a top-level annotation, show the footer in a hovered state. // 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 // 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. // a hovered state and also the footer of the top-level annotation.
// TODO: Make these work again or remove
.thread-list__card:hover > .annotation, .thread-list__card:hover > .annotation,
.annotation:hover { .annotation:hover {
.annotation-replies__link, .annotation-replies__link,
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
// make them stand out next to others, which will have the `is-dimmed` state // make them stand out next to others, which will have the `is-dimmed` state
// set // set
.annotation-body { .annotation-body {
color: var.$grey-7; color: var.$color-text;
} }
} }
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
// Lighten the bodies of dimmed annotations to make other // Lighten the bodies of dimmed annotations to make other
// annotations which are not dimmed stand out // annotations which are not dimmed stand out
.annotation-body { .annotation-body {
color: var.$grey-5; color: var.$color-text-light;
} }
} }
...@@ -63,7 +64,7 @@ ...@@ -63,7 +64,7 @@
&__footer { &__footer {
@include var.font-normal; @include var.font-normal;
color: var.$grey-5; color: var.$color-text-light;
margin-top: 1em; margin-top: 1em;
} }
} }
......
src/styles/sidebar/components/excerpt.scss
View file @ 0d15ec5d
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.excerpt__toggle-link > a { .excerpt__toggle-link > a {
color: var.$text-color; color: var.$color-text;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
......
src/styles/sidebar/components/group-list.scss
View file @ 0d15ec5d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.group-list__menu-label { .group-list__menu-label {
align-items: center; align-items: center;
color: var.$grey-6; color: var.$color-text;
display: flex; display: flex;
// Prevent label from wrapping if top bar is too narrow to fit all of its // Prevent label from wrapping if top bar is too narrow to fit all of its
......
src/styles/sidebar/components/help-panel.scss
View file @ 0d15ec5d
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
border-right: 1px solid var.$grey-3; border-right: 1px solid var.$grey-3;
text-align: center; text-align: center;
font-size: 1.25em; font-size: 1.25em;
color: var.$grey-5; color: var.$color-text-light;
&:last-of-type { &:last-of-type {
border-right: none; border-right: none;
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
} }
&__link { &__link {
color: var.$grey-5; color: var.$color-text-light;
} }
&__icon { &__icon {
......
src/styles/sidebar/components/logged-out-message.scss
View file @ 0d15ec5d
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
margin: 25px auto; margin: 25px auto;
width: 70%; width: 70%;
text-align: center; text-align: center;
color: var.$grey-mid; color: var.$color-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
.logged-out-message__link { .logged-out-message__link {
padding: 0; padding: 0;
display: inline; display: inline;
color: var.$grey-mid; color: var.$color-text;
background-color: transparent; background-color: transparent;
text-decoration: underline; text-decoration: underline;
font-weight: 400; font-weight: 400;
&:hover { &:hover {
color: var.$grey-7; color: var.$color-text;
text-decoration: none; text-decoration: none;
} }
} }
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
.logged-out-message__logo-icon { .logged-out-message__logo-icon {
font-size: 30px; font-size: 30px;
color: var.$grey-4; color: var.$grey-mid;
&:hover { &:hover {
color: var.$grey-7; color: var.$grey-7;
......
src/styles/sidebar/components/menu-item.scss
View file @ 0d15ec5d
...@@ -22,7 +22,7 @@ a.menu-item:hover { ...@@ -22,7 +22,7 @@ a.menu-item:hover {
appearance: none; appearance: none;
align-items: center; align-items: center;
padding-left: $menu-item-padding; padding-left: $menu-item-padding;
color: var.$grey-6; color: var.$color-text;
border: none; border: none;
padding-right: 0; padding-right: 0;
font-weight: 500; font-weight: 500;
...@@ -45,7 +45,7 @@ a.menu-item:hover { ...@@ -45,7 +45,7 @@ a.menu-item:hover {
&.is-submenu { &.is-submenu {
min-height: $item-height - 10px; min-height: $item-height - 10px;
background: var.$grey-1; background: var.$grey-1;
color: color.mix(var.$grey-5, var.$grey-6, $weight: 50%); color: var.$color-text;
font-weight: normal; font-weight: normal;
&:hover { &:hover {
background-color: var.$grey-3; background-color: var.$grey-3;
...@@ -60,7 +60,7 @@ a.menu-item:hover { ...@@ -60,7 +60,7 @@ a.menu-item:hover {
&.is-expanded { &.is-expanded {
background-color: var.$grey-1; background-color: var.$grey-1;
color: var.$grey-6; color: var.$color-text;
border-bottom: solid 1px var.$grey-3; border-bottom: solid 1px var.$grey-3;
&:hover { &:hover {
background-color: var.$grey-3; background-color: var.$grey-3;
...@@ -72,7 +72,7 @@ a.menu-item:hover { ...@@ -72,7 +72,7 @@ a.menu-item:hover {
} }
} }
&.is-disabled { &.is-disabled {
color: var.$grey-4; color: var.$color-text-light;
} }
} }
.menu-item__icon { .menu-item__icon {
......
src/styles/sidebar/components/menu-section.scss
View file @ 0d15ec5d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.menu-section__heading { .menu-section__heading {
color: var.$grey-5; color: var.$color-text-light;
font-size: var.$body1-font-size; font-size: var.$body1-font-size;
line-height: 1; line-height: 1;
margin: 1px 1px 0; margin: 1px 1px 0;
......
src/styles/sidebar/components/menu.scss
View file @ 0d15ec5d
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
align-items: center; align-items: center;
&:hover { &:hover {
transition: 0.2s ease-out; transition: 0.2s ease-out;
color: var.$grey-7; color: var.$color-text;
} }
} }
......
src/styles/sidebar/components/search-input.scss
View file @ 0d15ec5d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
flex-flow: row nowrap; flex-flow: row nowrap;
position: relative; position: relative;
color: var.$grey-mid; color: var.$color-text;
} }
.search-input__icon-button { .search-input__icon-button {
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
&:disabled { &:disabled {
background: none; background: none;
color: var.$grey-semi; color: var.$color-text-light;
} }
// Expand the search input when focused (triggered by clicking // Expand the search input when focused (triggered by clicking
......
src/styles/sidebar/components/selection-tabs.scss
View file @ 0d15ec5d
...@@ -5,16 +5,21 @@ ...@@ -5,16 +5,21 @@
.selection-tabs { .selection-tabs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: var.$grey-5; color: var.$color-text-light;
@include var.font-normal; @include var.font-normal;
&:hover { &:hover {
color: var.$grey-6; color: var.$color-text;
} }
padding-bottom: 10px; padding-bottom: 10px;
} }
.selection-tabs__icon {
color: var.$grey-mid;
margin: 0 0.25em;
}
.selection-tabs--theme-clean { .selection-tabs--theme-clean {
margin-left: 15px; margin-left: 15px;
} }
...@@ -23,7 +28,7 @@ ...@@ -23,7 +28,7 @@
@include buttons.reset-native-btn-styles; @include buttons.reset-native-btn-styles;
@include focus.outline-on-keyboard-focus; @include focus.outline-on-keyboard-focus;
color: var.$grey-6; color: var.$color-text;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
min-width: 85px; min-width: 85px;
...@@ -56,15 +61,8 @@ ...@@ -56,15 +61,8 @@
} }
.selection-tabs__message { .selection-tabs__message {
color: var.$color-text;
border: 1px solid var.$grey-3; border: 1px solid var.$grey-3;
padding: 3em; padding: 2em;
text-align: center; 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
View file @ 0d15ec5d
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
@use "../../mixins/links"; @use "../../mixins/links";
.share-annotations-panel { .share-annotations-panel {
color: var.$grey-5; color: var.$color-text-light;
&__intro { &__intro {
color: var.$grey-7; color: var.$color-text;
font-weight: 500; font-weight: 500;
} }
......
src/styles/sidebar/components/tag-editor.scss
View file @ 0d15ec5d
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
} }
&__edit { &__edit {
color: var.$grey-6; color: var.$color-text;
background: var.$grey-1; background: var.$grey-1;
border: 1px solid var.$grey-3; border: 1px solid var.$grey-3;
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
......
src/styles/sidebar/components/tag-list.scss
View file @ 0d15ec5d
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
margin: 0.25em 0.5em 0.25em 0; margin: 0.25em 0.5em 0.25em 0;
padding: 0 0.5em; padding: 0 0.5em;
line-height: var.$base-line-height; line-height: var.$base-line-height;
background: var.$grey-1; background: var.$grey-0;
border: 1px solid var.$grey-3; border: 1px solid var.$grey-3;
border-radius: 2px; border-radius: 2px;
} }
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
&__link, &__link,
&__text { &__text {
text-decoration: none; text-decoration: none;
color: var.$grey-6; color: var.$color-text-light;
} }
&__link { &__link {
......
src/styles/sidebar/components/top-bar.scss
View file @ 0d15ec5d
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
&__icon-button, &__icon-button,
&__menu-icon { &__menu-icon {
color: var.$grey-mid;
&.is-active { &.is-active {
color: var.$grey-7; color: var.$grey-7;
......
src/styles/sidebar/components/version-info.scss
View file @ 0d15ec5d
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
line-height: 1.25em; line-height: 1.25em;
text-align: right; text-align: right;
font-weight: 500; font-weight: 500;
color: var.$grey-6; color: var.$color-text;
} }
&__value { &__value {
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 8em; margin-left: 8em;
overflow-wrap: break-word; // Keep really long userids from overflowing overflow-wrap: break-word; // Keep really long userids from overflowing
color: var.$grey-6; color: var.$color-text-light;
} }
&__actions { &__actions {
......
src/styles/sidebar/sidebar.scss
View file @ 0d15ec5d
...@@ -69,7 +69,7 @@ body { ...@@ -69,7 +69,7 @@ body {
height: 100%; height: 100%;
background-color: var.$body-background; background-color: var.$body-background;
color: var.$text-color; color: var.$color-text;
font-family: var.$sans-font-family; font-family: var.$sans-font-family;
font-size: var.$base-font-size; font-size: var.$base-font-size;
font-weight: normal; font-weight: normal;
......
src/styles/sidebar/styled-text.scss
View file @ 0d15ec5d
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
@include var.font-normal; @include var.font-normal;
border-left: 3px solid var.$grey-3; border-left: 3px solid var.$grey-3;
color: var.$grey-4; color: var.$color-text-light;
font-family: sans-serif; font-family: sans-serif;
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
......
src/styles/variables.scss
View file @ 0d15ec5d
...@@ -35,6 +35,11 @@ $grey-6: #3f3f3f; ...@@ -35,6 +35,11 @@ $grey-6: #3f3f3f;
$grey-7: #202020; $grey-7: #202020;
// Colors // 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-success: #00a36d;
$color-notice: #fbc168; $color-notice: #fbc168;
$color-error: #d93c3f; $color-error: #d93c3f;
...@@ -91,7 +96,6 @@ $color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%); ...@@ -91,7 +96,6 @@ $color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-background: $white !default; $body-background: $white !default;
$text-color: $grey-mid !default;
// Links // Links
// ------------------------- // -------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment