0
0
Fork 0

Add color variables of texts for better accesibility (#7125)

* Add variables for text colors

* Change variables in sass files

* Apply text color variables for recently added colors

* Fix text colors of emoji mart anchors

* Fix text colors of search__input

* Fix text colors of text area of compose-form

* Fix icon colors of privacy dropdown and modal

* Inverted icon colors by classname

* Change variables in boost.scss

* Change action-button-color

* Fix text colors of pre-header
This commit is contained in:
Lynx Kotoura 2018-04-18 23:52:15 +09:00 committed by Eugen Rochko
parent 0ba49eca8b
commit 74dae9458d
16 changed files with 285 additions and 340 deletions

View file

@ -33,7 +33,7 @@
a {
display: block;
padding: 15px;
color: rgba($primary-text-color, 0.7);
color: $darker-text-color;
text-decoration: none;
transition: all 200ms linear;
border-radius: 4px 0 0 4px;
@ -90,7 +90,7 @@
padding-left: 25px;
h2 {
color: $ui-secondary-color;
color: $primary-text-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
@ -98,7 +98,7 @@
}
h3 {
color: $ui-secondary-color;
color: $primary-text-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
@ -109,7 +109,7 @@
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
color: $ui-primary-color;
color: $primary-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -117,7 +117,7 @@
h6 {
font-size: 16px;
color: $ui-secondary-color;
color: $primary-text-color;
line-height: 28px;
font-weight: 400;
}
@ -125,7 +125,7 @@
& > p {
font-size: 14px;
line-height: 18px;
color: $ui-secondary-color;
color: $darker-text-color;
margin-bottom: 20px;
strong {
@ -153,10 +153,10 @@
}
.muted-hint {
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
}
}
@ -253,7 +253,7 @@
a {
display: inline-block;
color: rgba($primary-text-color, 0.7);
color: $darker-text-color;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
@ -266,7 +266,7 @@
}
&.selected {
color: $ui-highlight-color;
color: $highlight-text-color;
border-bottom: 2px solid $ui-highlight-color;
}
}
@ -291,7 +291,7 @@
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $ui-secondary-color;
color: $primary-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@ -348,7 +348,7 @@
padding: 7px 4px;
margin-bottom: 10px;
font-size: 16px;
color: $ui-base-color;
color: $inverted-text-color;
display: block;
width: 100%;
outline: 0;
@ -402,7 +402,7 @@
font-size: 14px;
a {
color: $classic-highlight-color;
color: $highlight-text-color;
text-decoration: none;
&:hover {
@ -425,7 +425,7 @@
align-items: center;
padding: 10px;
background: $ui-base-color;
color: $ui-primary-color;
color: $darker-text-color;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
@ -452,14 +452,14 @@
}
&__timestamp {
color: lighten($ui-base-color, 34%);
color: $darker-text-color;
}
&__extras {
background: lighten($ui-base-color, 6%);
border-radius: 0 0 4px 4px;
padding: 10px;
color: $ui-primary-color;
color: $darker-text-color;
font-family: 'mastodon-font-monospace', monospace;
font-size: 12px;
word-wrap: break-word;
@ -469,7 +469,7 @@
&__icon {
font-size: 28px;
margin-right: 10px;
color: lighten($ui-base-color, 34%);
color: $darker-text-color;
}
&__icon__overlay {
@ -485,7 +485,7 @@
}
&.negative {
background: $error-red;
background: lighten($error-red, 12%);
}
&.neutral {
@ -496,17 +496,17 @@
a,
.username,
.target {
color: $ui-secondary-color;
color: $primary-text-color;
text-decoration: none;
font-weight: 500;
}
.diff-old {
color: $error-red;
color: lighten($error-red, 12%);
}
.diff-neutral {
color: $ui-secondary-color;
color: $darker-text-color;
}
.diff-new {