tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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

64
app/javascript/styles/mastodon/about.scss
View File

@ -169,7 +169,7 @@ $small-breakpoint: 960px;
background: $ui-base-color;
font-size: 12px;
font-weight: 500;
color: $ui-primary-color;
color: $darker-text-color;
text-transform: uppercase;
position: relative;
z-index: 1;
@ -186,10 +186,10 @@ $small-breakpoint: 960px;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: underline;
}
}
@ -202,11 +202,11 @@ $small-breakpoint: 960px;
text-align: center;
font-size: 12px;
line-height: 18px;
color: $ui-primary-color;
color: $darker-text-color;
margin-bottom: 0;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: underline;
}
}
@ -225,7 +225,7 @@ $small-breakpoint: 960px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($ui-primary-color, 10%);
color: transparentize($darker-text-color, 0.1);
}
h1 {
@ -234,14 +234,14 @@ $small-breakpoint: 960px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
small {
font-family: 'mastodon-font-sans-serif', sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: $ui-base-lighter-color;
color: opacify($darker-text-color, 0.1);
}
}
@ -251,7 +251,7 @@ $small-breakpoint: 960px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
}
h3 {
@ -260,7 +260,7 @@ $small-breakpoint: 960px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
}
h4 {
@ -269,7 +269,7 @@ $small-breakpoint: 960px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
}
h5 {
@ -278,7 +278,7 @@ $small-breakpoint: 960px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
}
h6 {
@ -287,7 +287,7 @@ $small-breakpoint: 960px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $ui-secondary-color;
color: $primary-text-color;
}
ul,
@ -354,10 +354,10 @@ $small-breakpoint: 960px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: underline;
}
}
@ -405,7 +405,7 @@ $small-breakpoint: 960px;
font-size: 14px;
&:hover {
color: $ui-secondary-color;
color: $darker-text-color;
}
}
@ -478,10 +478,10 @@ $small-breakpoint: 960px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: underline;
}
}
@ -517,7 +517,7 @@ $small-breakpoint: 960px;
span {
&:last-child {
color: $ui-secondary-color;
color: $darker-text-color;
}
}
@ -548,7 +548,7 @@ $small-breakpoint: 960px;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $ui-primary-color;
color: $darker-text-color;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
@ -559,7 +559,7 @@ $small-breakpoint: 960px;
a,
span {
font-weight: 400;
color: darken($ui-primary-color, 10%);
color: opacify($darker-text-color, 0.1);
}
a {
@ -602,7 +602,7 @@ $small-breakpoint: 960px;
.username {
display: block;
color: $ui-primary-color;
color: $darker-text-color;
}
}
}
@ -775,7 +775,7 @@ $small-breakpoint: 960px;
}
p a {
color: $ui-secondary-color;
color: $darker-text-color;
}
h1 {
@ -784,10 +784,10 @@ $small-breakpoint: 960px;
margin-bottom: 0;
small {
color: $ui-primary-color;
color: $darker-text-color;
span {
color: $ui-secondary-color;
color: $darker-text-color;
}
}
}
@ -896,7 +896,7 @@ $small-breakpoint: 960px;
}
a {
color: $ui-secondary-color;
color: $darker-text-color;
text-decoration: none;
}
}
@ -935,7 +935,7 @@ $small-breakpoint: 960px;
.fa {
display: block;
color: $ui-primary-color;
color: $darker-text-color;
font-size: 48px;
}
}
@ -943,7 +943,7 @@ $small-breakpoint: 960px;
.text {
font-size: 16px;
line-height: 30px;
color: $ui-primary-color;
color: $darker-text-color;
h6 {
font-size: inherit;
@ -969,10 +969,10 @@ $small-breakpoint: 960px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $ui-primary-color;
color: $darker-text-color;
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: underline;
}
}
@ -980,7 +980,7 @@ $small-breakpoint: 960px;
.footer-links {
padding-bottom: 50px;
text-align: right;
color: $ui-base-lighter-color;
color: $darker-text-color;
p {
font-size: 14px;
@ -995,7 +995,7 @@ $small-breakpoint: 960px;
&__footer {
margin-top: 10px;
text-align: center;
color: $ui-base-lighter-color;
color: $darker-text-color;
p {
font-size: 14px;