Fix contrast of some elements with new brand colors (#18691)
parent
7b5100aaed
commit
0391b2a603
|
@ -4,19 +4,17 @@ $black: #000000;
|
||||||
$classic-base-color: #282c37;
|
$classic-base-color: #282c37;
|
||||||
$classic-primary-color: #9baec8;
|
$classic-primary-color: #9baec8;
|
||||||
$classic-secondary-color: #d9e1e8;
|
$classic-secondary-color: #d9e1e8;
|
||||||
$classic-highlight-color: #2b90d9;
|
$classic-highlight-color: #6364ff;
|
||||||
|
|
||||||
$ui-base-color: $classic-base-color !default;
|
$ui-base-color: $classic-base-color !default;
|
||||||
$ui-primary-color: $classic-primary-color !default;
|
$ui-primary-color: $classic-primary-color !default;
|
||||||
$ui-secondary-color: $classic-secondary-color !default;
|
$ui-secondary-color: $classic-secondary-color !default;
|
||||||
|
$ui-highlight-color: $classic-highlight-color !default;
|
||||||
// Differences
|
|
||||||
$ui-highlight-color: #2b5fd9;
|
|
||||||
|
|
||||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||||
$highlight-text-color: $classic-highlight-color !default;
|
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
||||||
$action-button-color: #8d9ac2;
|
$action-button-color: #8d9ac2;
|
||||||
|
|
||||||
$inverted-text-color: $black !default;
|
$inverted-text-color: $black !default;
|
||||||
|
|
|
@ -5,7 +5,7 @@ $white: #ffffff;
|
||||||
$classic-base-color: #282c37;
|
$classic-base-color: #282c37;
|
||||||
$classic-primary-color: #9baec8;
|
$classic-primary-color: #9baec8;
|
||||||
$classic-secondary-color: #d9e1e8;
|
$classic-secondary-color: #d9e1e8;
|
||||||
$classic-highlight-color: #2b90d9;
|
$classic-highlight-color: #6364ff;
|
||||||
|
|
||||||
// Differences
|
// Differences
|
||||||
$success-green: lighten(#3c754d, 8%);
|
$success-green: lighten(#3c754d, 8%);
|
||||||
|
@ -17,10 +17,11 @@ $ui-base-color: $classic-secondary-color !default;
|
||||||
$ui-base-lighter-color: #b0c0cf;
|
$ui-base-lighter-color: #b0c0cf;
|
||||||
$ui-primary-color: #9bcbed;
|
$ui-primary-color: #9bcbed;
|
||||||
$ui-secondary-color: $classic-base-color !default;
|
$ui-secondary-color: $classic-base-color !default;
|
||||||
$ui-highlight-color: #2b90d9;
|
$ui-highlight-color: $classic-highlight-color !default;
|
||||||
|
|
||||||
$primary-text-color: $black !default;
|
$primary-text-color: $black !default;
|
||||||
$darker-text-color: $classic-base-color !default;
|
$darker-text-color: $classic-base-color !default;
|
||||||
|
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||||
$dark-text-color: #444b5d;
|
$dark-text-color: #444b5d;
|
||||||
$action-button-color: #606984;
|
$action-button-color: #606984;
|
||||||
|
|
||||||
|
|
|
@ -133,12 +133,12 @@ $content-width: 840px;
|
||||||
|
|
||||||
.simple-navigation-active-leaf a {
|
.simple-navigation-active-leaf a {
|
||||||
color: $primary-text-color;
|
color: $primary-text-color;
|
||||||
background-color: $ui-highlight-color;
|
background-color: darken($ui-highlight-color, 2%);
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($ui-highlight-color, 5%);
|
background-color: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -885,7 +885,7 @@ a.name-tag,
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl:first-child .verified {
|
dl:first-child .verified {
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background-color: $ui-highlight-color;
|
background-color: darken($ui-highlight-color, 2%);
|
||||||
border: 10px none;
|
border: 10px none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -60,20 +60,16 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
transition: all 100ms ease-in;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($ui-highlight-color, 10%);
|
background-color: $ui-highlight-color;
|
||||||
transition: all 200ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--destructive {
|
&--destructive {
|
||||||
transition: none;
|
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -829,7 +825,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a.unhandled-link {
|
a.unhandled-link {
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__content__spoiler-link {
|
.status__content__spoiler-link {
|
||||||
|
@ -899,7 +895,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.unhandled-link {
|
&.unhandled-link {
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -912,7 +908,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2437,7 +2433,7 @@ a.account__display-name {
|
||||||
height: 3.9375rem;
|
height: 3.9375rem;
|
||||||
bottom: 1.3125rem;
|
bottom: 1.3125rem;
|
||||||
right: 1.3125rem;
|
right: 1.3125rem;
|
||||||
background: darken($ui-highlight-color, 3%);
|
background: darken($ui-highlight-color, 2%);
|
||||||
color: $white;
|
color: $white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
@ -2448,7 +2444,7 @@ a.account__display-name {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
background: lighten($ui-highlight-color, 7%);
|
background: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2881,11 +2877,11 @@ a.account__display-name {
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-toggle--checked .react-toggle-track {
|
.react-toggle--checked .react-toggle-track {
|
||||||
background-color: $ui-highlight-color;
|
background-color: darken($ui-highlight-color, 2%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
|
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
|
||||||
background-color: lighten($ui-highlight-color, 10%);
|
background-color: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-toggle-track-check {
|
.react-toggle-track-check {
|
||||||
|
@ -2974,7 +2970,7 @@ a.account__display-name {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $ui-highlight-color;
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3407,14 +3403,14 @@ a.status-card.compact:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: lighten($ui-highlight-color, 12%);
|
color: lighten($highlight-text-color, 4%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6427,8 +6423,8 @@ a.status-card.compact:hover {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&.checked {
|
&.checked {
|
||||||
border-color: lighten($ui-highlight-color, 8%);
|
border-color: lighten($ui-highlight-color, 4%);
|
||||||
background: lighten($ui-highlight-color, 8%);
|
background: lighten($ui-highlight-color, 4%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -791,7 +791,7 @@
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lighten($ui-highlight-color, 8%);
|
color: $highlight-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl:first-child .verified {
|
dl:first-child .verified {
|
||||||
|
|
|
@ -82,7 +82,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: $ui-highlight-color;
|
background: darken($ui-highlight-color, 2%);
|
||||||
color: $primary-text-color;
|
color: $primary-text-color;
|
||||||
transition: all 100ms ease-in;
|
transition: all 100ms ease-in;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -95,7 +95,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($ui-highlight-color, 10%);
|
background-color: $ui-highlight-color;
|
||||||
transition: all 200ms ease-out;
|
transition: all 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -463,14 +463,14 @@ code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: $ui-highlight-color;
|
background: darken($ui-highlight-color, 2%);
|
||||||
color: $primary-text-color;
|
color: $primary-text-color;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-transform: uppercase;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -483,13 +483,10 @@ code {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: lighten($ui-highlight-color, 5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus,
|
||||||
background-color: darken($ui-highlight-color, 5%);
|
&:hover {
|
||||||
|
background-color: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled:hover {
|
&:disabled:hover {
|
||||||
|
|
|
@ -80,7 +80,7 @@
|
||||||
.button.logo-button {
|
.button.logo-button {
|
||||||
flex: 0 auto;
|
flex: 0 auto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: $ui-highlight-color;
|
background: darken($ui-highlight-color, 2%);
|
||||||
color: $primary-text-color;
|
color: $primary-text-color;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
@ -104,7 +104,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten($ui-highlight-color, 10%);
|
background: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
|
|
|
@ -34,7 +34,7 @@ $primary-text-color: $white !default;
|
||||||
$darker-text-color: $ui-primary-color !default;
|
$darker-text-color: $ui-primary-color !default;
|
||||||
$dark-text-color: $ui-base-lighter-color !default;
|
$dark-text-color: $ui-base-lighter-color !default;
|
||||||
$secondary-text-color: $ui-secondary-color !default;
|
$secondary-text-color: $ui-secondary-color !default;
|
||||||
$highlight-text-color: $ui-highlight-color !default;
|
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
||||||
$action-button-color: $ui-base-lighter-color !default;
|
$action-button-color: $ui-base-lighter-color !default;
|
||||||
$passive-text-color: $gold-star !default;
|
$passive-text-color: $gold-star !default;
|
||||||
$active-passive-text-color: $success-green !default;
|
$active-passive-text-color: $success-green !default;
|
||||||
|
|
Reference in New Issue