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

@ -84,7 +84,7 @@
font-size: 14px;
.status__relative-time {
color: $ui-primary-color;
color: $lighter-text-color;
}
}
}
@ -93,7 +93,7 @@
display: block;
max-width: 100%;
padding-right: 25px;
color: $ui-base-color;
color: $lighter-text-color;
}
.status__avatar {
@ -123,7 +123,7 @@
strong {
font-weight: 500;
color: $ui-base-color;
color: $inverted-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@ -134,15 +134,15 @@
span {
font-size: 14px;
color: $ui-primary-color;
color: $inverted-text-color;
}
}
.status__content {
color: $ui-base-color;
color: $inverted-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
}
a.status__content__spoiler-link {
@ -180,7 +180,7 @@
strong {
font-weight: 500;
color: $ui-base-color;
color: $inverted-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@ -191,7 +191,7 @@
span {
font-size: 14px;
color: $ui-primary-color;
color: $lighter-text-color;
}
}
}
@ -207,10 +207,10 @@
}
.status__content {
color: $ui-base-color;
color: $inverted-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
}
a.status__content__spoiler-link {
@ -225,7 +225,7 @@
.detailed-status__meta {
margin-top: 15px;
color: $ui-primary-color;
color: $lighter-text-color;
font-size: 14px;
line-height: 18px;
@ -243,7 +243,7 @@
.status-card {
border-color: lighten($ui-secondary-color, 4%);
color: darken($ui-primary-color, 4%);
color: $lighter-text-color;
&:hover {
background: lighten($ui-secondary-color, 4%);
@ -252,7 +252,7 @@
.status-card__title,
.status-card__description {
color: $ui-base-color;
color: $inverted-text-color;
}
.status-card__image {
@ -262,7 +262,7 @@
.media-spoiler {
background: $ui-base-color;
color: $ui-primary-color;
color: $darker-text-color;
}
.pre-header {
@ -270,7 +270,7 @@
padding-left: (48px + 14px * 2);
padding-bottom: 0;
margin-bottom: -4px;
color: $ui-primary-color;
color: $lighter-text-color;
font-size: 14px;
position: relative;
@ -280,7 +280,7 @@
}
.status__display-name.muted strong {
color: $ui-primary-color;
color: $lighter-text-color;
}
}