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:
parent
0ba49eca8b
commit
74dae9458d
16 changed files with 285 additions and 340 deletions
|
@ -7,7 +7,7 @@
|
|||
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
|
||||
.emoji-mart-emoji {
|
||||
padding: 6px;
|
||||
|
@ -36,7 +36,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
@ -50,15 +50,15 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: darken($ui-primary-color, 4%);
|
||||
color: opacify($lighter-text-color, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-selected {
|
||||
color: darken($ui-highlight-color, 3%);
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($ui-highlight-color, 3%);
|
||||
color: darken($highlight-text-color, 4%);
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
|
@ -72,7 +72,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: darken($ui-highlight-color, 3%);
|
||||
background-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
|
@ -115,7 +115,7 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
background: rgba($ui-secondary-color, 0.3);
|
||||
color: $ui-primary-color;
|
||||
color: $inverted-text-color;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
border-radius: 4px;
|
||||
|
||||
|
@ -184,7 +184,7 @@
|
|||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
|
||||
.emoji-mart-category-label {
|
||||
display: none;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue