Skip to content

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

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

Consolidate all grey colors across client application
parents b22c2013 92c65b68
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 37 deletions
src/styles/annotator/adder.scss
View file @ 5be86536
...@@ -98,11 +98,11 @@ $adder-transition-duration: 80ms; ...@@ -98,11 +98,11 @@ $adder-transition-duration: 80ms;
} }
.annotator-adder-actions:hover .annotator-adder-actions__button { .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 { .annotator-adder-actions:hover .annotator-adder-actions__label {
color: var.$gray-light !important; color: var.$grey-semi !important;
} }
.annotator-adder-actions__button { .annotator-adder-actions__button {
...@@ -110,7 +110,7 @@ $adder-transition-duration: 80ms; ...@@ -110,7 +110,7 @@ $adder-transition-duration: 80ms;
font-family: h; font-family: h;
font-size: 18px; font-size: 18px;
background: transparent !important; background: transparent !important;
color: var.$gray-dark !important; color: var.$grey-mid !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -126,10 +126,10 @@ $adder-transition-duration: 80ms; ...@@ -126,10 +126,10 @@ $adder-transition-duration: 80ms;
} }
.annotator-adder-actions .annotator-adder-actions__button:hover { .annotator-adder-actions .annotator-adder-actions__button:hover {
color: var.$gray-dark !important; color: var.$grey-mid !important;
.annotator-adder-actions__label { .annotator-adder-actions__label {
color: var.$gray-dark !important; color: var.$grey-mid !important;
} }
} }
...@@ -137,6 +137,6 @@ $adder-transition-duration: 80ms; ...@@ -137,6 +137,6 @@ $adder-transition-duration: 80ms;
font-size: 11px; font-size: 11px;
margin: 2px 0px; margin: 2px 0px;
font-family: sans-serif; font-family: sans-serif;
color: var.$gray-dark !important; color: var.$grey-mid !important;
transition: color $adder-transition-duration; transition: color $adder-transition-duration;
} }
src/styles/annotator/annotator.scss
View file @ 5be86536
...@@ -117,7 +117,7 @@ var.$base-font-size: 14px; ...@@ -117,7 +117,7 @@ var.$base-font-size: 14px;
background: var.$white; background: var.$white;
border: solid 1px var.$grey-3; border: solid 1px var.$grey-3;
border-radius: 4px; border-radius: 4px;
color: var.$gray-light; color: var.$grey-semi;
text-decoration: none; text-decoration: none;
height: 30px; height: 30px;
width: 30px; width: 30px;
...@@ -126,7 +126,7 @@ var.$base-font-size: 14px; ...@@ -126,7 +126,7 @@ var.$base-font-size: 14px;
margin-bottom: 5px; margin-bottom: 5px;
&:active { &:active {
background-color: var.$gray-light; background-color: var.$grey-semi;
} }
&:focus, &:focus,
......
src/styles/mixins/forms.scss
View file @ 5be86536
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,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.$gray; color: var.$grey-5;
background-color: #fafafa; background-color: #fafafa;
} }
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
@include focus-outline; @include focus-outline;
@include placeholder { @include placeholder {
color: var.$gray; color: var.$grey-5;
} }
} }
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
color: var.$button-text-color; color: var.$button-text-color;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
border-radius: 2px; border-radius: 2px;
border: 1px solid var.$gray-light; border: 1px solid var.$grey-semi;
padding: 0.5em 0.9em; padding: 0.5em 0.9em;
} }
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
cursor: default; cursor: default;
background: #f0f0f0; background: #f0f0f0;
border-color: #cecece; border-color: #cecece;
color: var.$gray-light; color: var.$grey-semi;
} }
@mixin primary-action-btn { @mixin primary-action-btn {
color: var.$grey-1; color: var.$grey-1;
background-color: var.$color-dove-gray; background-color: var.$grey-mid;
height: 35px; height: 35px;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
...@@ -108,10 +108,10 @@ ...@@ -108,10 +108,10 @@
padding-right: 12px; padding-right: 12px;
&:disabled { &:disabled {
color: var.$gray-light; color: var.$grey-semi;
} }
&:hover:enabled { &:hover:enabled {
background-color: var.$color-mine-shaft; background-color: var.$grey-6;
} }
} }
src/styles/sidebar/components/annotation-publish-control.scss
View file @ 5be86536
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
// 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.$grey-1;
$default-background-color: var.$color-dove-gray; $default-background-color: var.$grey-mid;
$hover-background-color: var.$color-mine-shaft; $hover-background-color: var.$grey-6;
$h-padding: 9px; $h-padding: 9px;
$height: 35px; $height: 35px;
$border-radius: 2px; $border-radius: 2px;
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
margin-left: 8px; margin-left: 8px;
border: none; border: none;
background-color: var.$color-dove-gray; background-color: var.$grey-mid;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $border-radius;
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
button[aria-expanded='true'] &-separator { button[aria-expanded='true'] &-separator {
// hide the 1px vertical separator when the dropdown arrow // hide the 1px vertical separator when the dropdown arrow
// is hovered or menu is open // 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 // 1px vertical separator between label and dropdown arrow
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
width: 1px; width: 1px;
height: 15px; height: 15px;
background-color: var.$color-gray; background-color: var.$grey-5;
} }
// the ▼ arrow which reveals the dropdown menu when clicked // the ▼ arrow which reveals the dropdown menu when clicked
......
src/styles/sidebar/components/annotation.scss
View file @ 5be86536
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
} }
.annotation-citation-domain { .annotation-citation-domain {
color: var.$gray-light; color: var.$grey-semi;
font-size: var.$body1-font-size; font-size: var.$body1-font-size;
} }
......
src/styles/sidebar/components/menu-section.scss
View file @ 5be86536
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.menu-section__heading { .menu-section__heading {
color: var.$gray-light; color: var.$grey-semi;
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/new-note.scss
View file @ 5be86536
@use "../../variables" as var; @use "../../variables" as var;
.new-note__create { .new-note__create {
background-color: var.$color-dove-gray; background-color: var.$grey-mid;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
......
src/styles/sidebar/components/search-input.scss
View file @ 5be86536
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
flex-flow: row nowrap; flex-flow: row nowrap;
position: relative; position: relative;
color: var.$gray-dark; color: var.$grey-mid;
} }
.search-input__icon { .search-input__icon {
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
&:disabled { &:disabled {
background: none; background: none;
color: var.$gray-light; color: var.$grey-semi;
} }
// Expand the search input when focused (triggered by clicking // Expand the search input when focused (triggered by clicking
......
src/styles/sidebar/components/tags-input.scss
View file @ 5be86536
...@@ -24,7 +24,7 @@ tags-input { ...@@ -24,7 +24,7 @@ tags-input {
outline: none; outline: none;
border: none !important; border: none !important;
background: none; background: none;
color: var.$gray; color: var.$grey-5;
// Firefox and Webkit render input boxes at different heights. This // Firefox and Webkit render input boxes at different heights. This
// causes issues when the tags (which render consistentely) are inserted // causes issues when the tags (which render consistentely) are inserted
......
src/styles/sidebar/components/top-bar.scss
View file @ 5be86536
...@@ -60,17 +60,17 @@ ...@@ -60,17 +60,17 @@
@include buttons.reset-native-btn-styles; @include buttons.reset-native-btn-styles;
height: 100%; height: 100%;
color: var.$gray-light; color: var.$grey-semi;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding: 1px 3px 0 3px; padding: 1px 3px 0 3px;
&:hover { &:hover {
color: var.$gray-dark; color: var.$grey-mid;
} }
&.is-active { &.is-active {
color: var.$gray-dark; color: var.$grey-mid;
} }
&--refresh { &--refresh {
......
src/styles/variables.scss
View file @ 5be86536
...@@ -11,17 +11,19 @@ $grey-3: #dbdbdb; ...@@ -11,17 +11,19 @@ $grey-3: #dbdbdb;
$grey-4: #a6a6a6; $grey-4: #a6a6a6;
$gray-light: #969696 !default; // Interim color variable for migration purposes, as the step between `$grey-4`
$color-gray: #818181; // and `$grey-5` is large. Represents `base-semi` in proposed future palette,
// minus blue tint.
$grey-semi: #9c9c9c;
$grey-5: #7a7a7a; $grey-5: #7a7a7a;
$gray: #777 !default;
$color-dove-gray: #626262; // Interim color variable for migration purposes, as the step between `$grey-5`
$gray-dark: #585858; // and `$grey-6` is large. Represents `base-mid` in proposed future palette,
// minus blue tint.
$grey-mid: #595959;
$grey-6: #3f3f3f; $grey-6: #3f3f3f;
$color-mine-shaft: #3a3a3a;
$grey-7: #202020; $grey-7: #202020;
...@@ -32,7 +34,7 @@ $black: #000 !default; ...@@ -32,7 +34,7 @@ $black: #000 !default;
$brand: #bd1c2b; $brand: #bd1c2b;
$highlight: #58cef4; $highlight: #58cef4;
$button-text-color: $gray-dark !default; $button-text-color: $grey-mid !default;
$button-background-start: $white !default; $button-background-start: $white !default;
$button-background-end: #f0f0f0 !default; $button-background-end: #f0f0f0 !default;
$button-background-gradient: to bottom, $button-background-start, $button-background-gradient: to bottom, $button-background-start,
...@@ -87,7 +89,7 @@ $success-color: #1cbd41 !default; ...@@ -87,7 +89,7 @@ $success-color: #1cbd41 !default;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-background: $white !default; $body-background: $white !default;
$text-color: $gray-dark !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