Unfloyded/Legamunt
0
0
Fork 0
Code Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

39
app/javascript/styles/mastodon/forms.scss
View file

@ -29,14 +29,14 @@ code {
span.hint {
display: block;
color: $ui-primary-color;
color: $darker-text-color;
font-size: 12px;
margin-top: 4px;
}
p.hint {
margin-bottom: 15px;
color: $ui-primary-color;
color: $darker-text-color;
&.subtle-hint {
text-align: center;
@ -44,10 +44,10 @@ code {
line-height: 18px;
margin-top: 15px;
margin-bottom: 0;
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
}
}
}
@ -244,35 +244,35 @@ code {
}
&:focus:invalid {
border-bottom-color: $error-value-color;
border-bottom-color: lighten($error-red, 12%);
}
&:required:valid {
border-bottom-color: $valid-value-color;
border-bottom-color: lighten($error-red, 12%);
}
&:active,
&:focus {
border-bottom-color: $ui-highlight-color;
border-bottom-color: $highlight-text-color;
background: rgba($base-overlay-background, 0.1);
}
}
.input.field_with_errors {
label {
color: $error-value-color;
color: lighten($error-red, 12%);
}
input[type=text],
input[type=email],
input[type=password] {
border-bottom-color: $error-value-color;
border-bottom-color: lighten($error-red, 12%);
}
.error {
display: block;
font-weight: 500;
color: $error-value-color;
color: lighten($error-red, 12%);
margin-top: 4px;
}
}
@ -356,7 +356,7 @@ code {
padding: 7px 4px;
padding-bottom: 9px;
font-size: 16px;
color: $ui-base-lighter-color;
color: $darker-text-color;
font-family: inherit;
pointer-events: none;
cursor: default;
@ -366,7 +366,7 @@ code {
.flash-message {
background: lighten($ui-base-color, 8%);
color: $ui-primary-color;
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
@ -378,7 +378,6 @@ code {
}
.oauth-code {
color: $ui-secondary-color;
outline: 0;
box-sizing: border-box;
display: block;
@ -387,7 +386,7 @@ code {
padding: 10px;
font-family: 'mastodon-font-monospace', monospace;
background: $ui-base-color;
color: $ui-primary-color;
color: $primary-text-color;
font-size: 14px;
margin: 0;
@ -426,7 +425,7 @@ code {
text-align: center;
a {
color: $ui-primary-color;
color: $darker-text-color;
text-decoration: none;
&:hover {
@ -439,7 +438,7 @@ code {
.follow-prompt {
margin-bottom: 30px;
text-align: center;
color: $ui-primary-color;
color: $darker-text-color;
h2 {
font-size: 16px;
@ -447,7 +446,7 @@ code {
}
strong {
color: $ui-secondary-color;
color: $primary-text-color;
font-weight: 500;
@each $lang in $cjk-langs {
@ -484,7 +483,7 @@ code {
.qr-alternative {
margin-bottom: 20px;
color: $ui-secondary-color;
color: $darker-text-color;
flex: 150px;
samp {
@ -569,7 +568,7 @@ code {
.post-follow-actions {
text-align: center;
color: $ui-primary-color;
color: $darker-text-color;
div {
margin-bottom: 4px;
@ -582,7 +581,7 @@ code {
h4 {
font-size: 16px;
color: $ui-base-lighter-color;
color: $primary-text-color;
text-align: center;
margin-bottom: 20px;
border: 0;