Improve scss color variables (#2912)

- Updates scss variables file to use better-named variables for black/white/etc
- Arranges the "mastodon classic" colors into variables
- Remove all references to `$color-*` naming, replacing with new

This does not in itself introduce "theme" support, but:

- It would probably be easier to start working on theme support after this
  change and others
- Even without the goal of themes, these changes make it more clear how the
  colors are being used.

There is almost definitely some edge case in here where I've guessed the
intent/context of some color usage incorrectly, but it still seems like a net
improvement.
This commit is contained in:
Matt Jankowski 2017-05-08 09:57:49 -04:00 committed by Eugen Rochko
parent cbd673601c
commit b85dec2b97
15 changed files with 479 additions and 461 deletions

View file

@ -2,7 +2,7 @@
.wrapper {
max-width: 600px;
margin: 0 auto;
color: $color3;
color: $ui-primary-color;
padding-top: 50px;
padding-bottom: 50px;
@ -15,7 +15,7 @@
font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
font-weight: 600;
margin-bottom: 20px;
color: $color4;
color: $ui-highlight-color;
padding: 20px 0;
img {
@ -32,7 +32,7 @@
line-height: 28px;
font-weight: 400;
margin-bottom: 20px;
color: $color5;
color: $primary-text-color;
}
h3 {
@ -41,7 +41,7 @@
line-height: 28px;
font-weight: 400;
margin-bottom: 20px;
color: $color2;
color: $ui-secondary-color;
}
ul,
@ -70,7 +70,7 @@
margin-bottom: 12px;
a {
color: $color4;
color: $ui-highlight-color;
text-decoration: underline;
}
}
@ -79,14 +79,14 @@
display: inline-block;
padding: 7px 7px 5px;
margin: 0 2px;
background: $color3;
color: $color1;
background: $ui-primary-color;
color: $ui-base-color;
font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
font-weight: 300;
}
.screenshot {
box-shadow: 0 0 15px rgba($color8, 0.4);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
margin-bottom: 26px;
img {
@ -106,7 +106,7 @@
line-height: 36px;
a {
color: $color3;
color: $ui-primary-color;
text-decoration: underline;
}
}
@ -127,8 +127,8 @@
margin: 20px 0;
display: flex;
justify-content: space-between;
border-top: 1px solid lighten($color1, 10%);
border-bottom: 1px solid lighten($color1, 10%);
border-top: 1px solid lighten($ui-base-color, 10%);
border-bottom: 1px solid lighten($ui-base-color, 10%);
padding-right: 14px;
.section {
@ -146,7 +146,7 @@
font-size: 16px;
&:last-child {
color: $color2;
color: $ui-secondary-color;
font-size: 14px;
}
}
@ -155,7 +155,7 @@
font-weight: 500;
font-size: 32px;
line-height: 48px;
color: $color5;
color: $primary-text-color;
}
}
@ -190,7 +190,7 @@
a {
display: block;
color: $color5;
color: $primary-text-color;
text-decoration: none;
&:hover {
@ -202,7 +202,7 @@
.username {
display: block;
color: $color3;
color: $ui-primary-color;
}
}
}
@ -213,7 +213,7 @@
strong {
display: block;
color: $color5;
color: $primary-text-color;
word-break: break-word;
}
}
@ -231,14 +231,14 @@
}
.sidebar {
border-left: 1px solid lighten($color1, 10%);
border-left: 1px solid lighten($ui-base-color, 10%);
width: 200px;
flex: 0 0 auto;
}
.panel {
.panel-header {
background: lighten($color1, 10%);
background: lighten($ui-base-color, 10%);
padding: 7px 14px;
text-transform: uppercase;
font-size: 12px;
@ -263,7 +263,7 @@
a {
display: block;
padding: 7px 14px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
transition: all 200ms linear;
@ -272,17 +272,17 @@
}
&:hover {
color: $color5;
background-color: darken($color1, 5%);
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
}
&.selected {
color: $color5;
background-color: $color4;
color: $primary-text-color;
background-color: $ui-highlight-color;
&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}
}
}
@ -295,7 +295,7 @@
flex-direction: column;
.sidebar {
border: 1px solid lighten($color1, 10%);
border: 1px solid lighten($ui-base-color, 10%);
width: auto;
}
}
@ -341,10 +341,10 @@
.closed-registrations-message {
width: 300px;
flex: 0 0 auto;
background: rgba(darken($color1, 7%), 0.5);
background: rgba(darken($ui-base-color, 7%), 0.5);
padding: 14px;
border-radius: 4px;
box-shadow: 0 0 15px rgba($color8, 0.4);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
.actions {
margin-bottom: 0;
@ -354,7 +354,7 @@
text-align: center;
a {
color: $color2;
color: $ui-secondary-color;
}
}
}

View file

@ -1,10 +1,10 @@
.card {
background: $color1;
background: $ui-base-color;
background-size: cover;
padding: 60px 0;
padding-bottom: 0;
border-radius: 4px 4px 0 0;
box-shadow: 0 0 15px rgba($color8, 0.2);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
position: relative;
@ -14,7 +14,7 @@
}
&::after {
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
content: "";
position: absolute;
@ -29,17 +29,17 @@
display: block;
font-size: 20px;
line-height: 18px * 1.5;
color: $color5;
color: $primary-text-color;
font-weight: 500;
text-align: center;
position: relative;
z-index: 2;
text-shadow: 0 0 2px $color8;
text-shadow: 0 0 2px $base-shadow-color;
small {
display: block;
font-size: 14px;
color: $color4;
color: $ui-highlight-color;
font-weight: 400;
}
}
@ -82,10 +82,10 @@
.counter {
width: 80px;
color: $color3;
color: $ui-primary-color;
padding: 5px 10px 0;
margin-bottom: 10px;
border-right: 1px solid $color3;
border-right: 1px solid $ui-primary-color;
cursor: default;
position: relative;
@ -100,14 +100,14 @@
bottom: -10px;
left: 0;
width: 100%;
border-bottom: 4px solid $color3;
border-bottom: 4px solid $ui-primary-color;
opacity: 0.5;
transition: all 0.8s ease;
}
&.active {
&::after {
border-bottom: 4px solid $color4;
border-bottom: 4px solid $ui-highlight-color;
opacity: 1;
}
}
@ -129,13 +129,13 @@
text-transform: uppercase;
display: block;
margin-bottom: 5px;
text-shadow: 0 0 2px $color8;
text-shadow: 0 0 2px $base-shadow-color;
}
.counter-number {
font-weight: 500;
font-size: 18px;
color: $color5;
color: $primary-text-color;
}
}
@ -144,7 +144,7 @@
font-size: 14px;
line-height: 18px;
padding: 5px 10px;
color: $color2;
color: $ui-secondary-color;
order: 1;
}
@ -180,7 +180,7 @@
.page,
.gap {
font-size: 14px;
color: $color5;
color: $primary-text-color;
font-weight: 500;
display: inline-block;
padding: 6px 10px;
@ -188,9 +188,9 @@
}
.current {
background: $color5;
background: $simple-background-color;
border-radius: 100px;
color: $color1;
color: $ui-base-color;
cursor: default;
margin: 0 10px;
}
@ -202,7 +202,7 @@
.prev,
.next {
text-transform: uppercase;
color: $color2;
color: $ui-secondary-color;
}
.prev {
@ -227,7 +227,7 @@
.disabled {
cursor: default;
color: lighten($color1, 10%);
color: lighten($ui-base-color, 10%);
}
@media screen and (max-width: 360px) {
@ -249,8 +249,8 @@
}
.accounts-grid {
box-shadow: 0 0 15px rgba($color8, 0.2);
background: $color5;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
background: $simple-background-color;
border-radius: 0 0 4px 4px;
padding: 20px 10px;
padding-bottom: 10px;
@ -266,9 +266,9 @@
.account-grid-card {
box-sizing: border-box;
width: 335px;
border: 1px solid $color2;
border: 1px solid $ui-secondary-color;
border-radius: 4px;
color: $color1;
color: $ui-base-color;
margin-bottom: 10px;
&:nth-child(odd) {
@ -278,7 +278,7 @@
.account-grid-card__header {
overflow: hidden;
padding: 10px;
border-bottom: 1px solid $color2;
border-bottom: 1px solid $ui-secondary-color;
}
.avatar {
@ -300,7 +300,7 @@
a {
display: block;
color: $color1;
color: $ui-base-color;
text-decoration: none;
&:hover {
@ -317,20 +317,20 @@
}
.username {
color: $color4;
color: $ui-highlight-color;
}
.note {
padding: 10px;
padding-top: 15px;
color: $color3;
color: $ui-primary-color;
word-wrap: break-word;
}
}
}
.nothing-here {
color: $color3;
color: $ui-primary-color;
font-size: 14px;
font-weight: 500;
text-align: center;
@ -341,10 +341,10 @@
.account-card {
padding: 14px 10px;
background: $color5;
background: $simple-background-color;
border-radius: 4px;
text-align: left;
box-shadow: 0 0 15px rgba($color8, 0.2);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
.detailed-status__display-name {
display: block;
@ -377,12 +377,12 @@
strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}
span {
font-size: 14px;
color: $color3;
color: $ui-primary-color;
}
}
@ -397,6 +397,6 @@
.account__header__content {
font-size: 14px;
color: $color1;
color: $ui-base-color;
}
}

View file

@ -6,7 +6,7 @@
.sidebar-wrapper {
flex: 1;
height: 100%;
background: $color1;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
}
@ -33,7 +33,7 @@
a {
display: block;
padding: 15px 25px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
transition: all 200ms linear;
border-radius: 4px 0 0 4px;
@ -43,19 +43,19 @@
}
&:hover {
color: $color5;
background-color: darken($color1, 5%);
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
}
&.selected {
background: darken($color1, 2%);
background: darken($ui-base-color, 2%);
border-radius: 4px 0 0;
}
}
ul {
background: darken($color1, 4%);
background: darken($ui-base-color, 4%);
border-radius: 0 0 0 4px;
margin: 0;
@ -63,13 +63,13 @@
border: 0;
&.selected {
color: $color5;
background-color: $color4;
color: $primary-text-color;
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;
&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}
}
}
@ -89,7 +89,7 @@
padding-left: 25px;
h2 {
color: $color2;
color: $ui-secondary-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
@ -99,11 +99,11 @@
& > p {
font-size: 14px;
line-height: 18px;
color: $color2;
color: $ui-secondary-color;
margin-bottom: 20px;
strong {
color: $color5;
color: $primary-text-color;
font-weight: 500;
}
}
@ -112,7 +112,7 @@
margin: 20px 0;
border: 0;
background: transparent;
border-bottom: 1px solid $color1;
border-bottom: 1px solid $ui-base-color;
}
}
@ -185,21 +185,21 @@
a {
display: inline-block;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid $color1;
border-bottom: 2px solid $ui-base-color;
&:hover {
color: $color5;
border-bottom: 2px solid lighten($color1, 5%);
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
}
&.selected {
color: $color4;
border-bottom: 2px solid $color4;
color: $ui-highlight-color;
border-bottom: 2px solid $ui-highlight-color;
}
}
}
@ -221,7 +221,7 @@
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $color2;
color: $ui-secondary-color;
}
&:first-child {

View file

@ -1,12 +1,12 @@
body {
font-family: 'mastodon-font-sans-serif', sans-serif;
background: $color1 url('../images/background-photo.jpg');
background: $ui-base-color url('../images/background-photo.jpg');
background-size: cover;
background-attachment: fixed;
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: $color5;
color: $primary-text-color;
padding-bottom: 140px;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
@ -17,7 +17,7 @@ body {
width: 100%;
height: 100%;
padding: 0;
background: $color1;
background: $ui-base-color;
}
&.embed {
@ -33,7 +33,7 @@ body {
}
&.admin {
background: darken($color1, 4%);
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;

File diff suppressed because one or more lines are too long

View file

@ -2,7 +2,7 @@
h1 {
font-size: 24px;
line-height: 28px;
color: $color3;
color: $ui-primary-color;
overflow: hidden;
font-weight: 500;
margin-bottom: 20px;
@ -14,7 +14,7 @@
small {
font-weight: 400;
color: $color2;
color: $ui-secondary-color;
}
img {

File diff suppressed because it is too large Load diff

View file

@ -32,7 +32,7 @@
h1 {
display: block;
text-align: center;
color: $color5;
color: $primary-text-color;
font-size: 48px;
font-weight: 500;

View file

@ -2,7 +2,7 @@
text-align: center;
margin-top: 30px;
font-size: 12px;
color: darken($color2, 25%);
color: darken($ui-secondary-color, 25%);
.domain {
font-weight: 500;

View file

@ -16,7 +16,7 @@ code {
span.hint {
display: block;
color: $color3;
color: $ui-primary-color;
font-size: 12px;
margin-top: 4px;
}
@ -51,7 +51,7 @@ code {
label {
font-family: inherit;
font-size: 16px;
color: $color5;
color: $primary-text-color;
display: block;
padding-top: 5px;
}
@ -65,7 +65,7 @@ code {
margin-bottom: 5px;
font-family: inherit;
font-size: 14px;
color: $color5;
color: $primary-text-color;
display: block;
width: auto;
}
@ -76,7 +76,7 @@ code {
label {
font-family: inherit;
font-size: 14px;
color: $color5;
color: $primary-text-color;
display: block;
width: auto;
}
@ -108,11 +108,11 @@ code {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid $color3;
border-bottom: 2px solid $ui-primary-color;
border-radius: 2px 2px 0 0;
padding: 7px 4px;
font-size: 16px;
color: $color5;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
@ -124,35 +124,35 @@ code {
}
&:focus:invalid {
border-bottom-color: $color6;
border-bottom-color: $error-value-color;
}
&:required:valid {
border-bottom-color: $color7;
border-bottom-color: $valid-value-color;
}
&:active,
&:focus {
border-bottom-color: $color4;
background: rgba($color8, 0.1);
border-bottom-color: $ui-highlight-color;
background: rgba($base-overlay-background, 0.1);
}
}
.input.field_with_errors {
label {
color: $color6;
color: $error-value-color;
}
input[type=text],
input[type=email],
input[type=password] {
border-bottom-color: $color6;
border-bottom-color: $error-value-color;
}
.error {
display: block;
font-weight: 500;
color: $color6;
color: $error-value-color;
margin-top: 4px;
}
}
@ -167,8 +167,8 @@ code {
width: 100%;
border: 0;
border-radius: 4px;
background: $color4;
color: $color5;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
padding: 10px;
text-transform: uppercase;
@ -181,26 +181,26 @@ code {
margin-bottom: 10px;
&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}
&:active,
&:focus {
position: relative;
top: 1px;
background-color: darken($color4, 5%);
background-color: darken($ui-highlight-color, 5%);
}
&.negative {
background: $color6;
background: $error-value-color;
&:hover {
background-color: lighten($color6, 5%);
background-color: lighten($error-value-color, 5%);
}
&:active,
&:focus {
background-color: darken($color6, 5%);
background-color: darken($error-value-color, 5%);
}
}
}
@ -211,12 +211,12 @@ code {
}
.flash-message {
background: $color1;
color: $color3;
background: $ui-base-color;
color: $ui-primary-color;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
box-shadow: 0 0 5px rgba($color8, 0.2);
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
text-align: center;
strong {
@ -229,7 +229,7 @@ code {
text-align: center;
a {
color: $color5;
color: $primary-text-color;
text-decoration: none;
&:hover {
@ -242,7 +242,7 @@ code {
.follow-prompt {
margin-bottom: 30px;
text-align: center;
color: $color3;
color: $ui-primary-color;
h2 {
font-size: 16px;
@ -250,7 +250,7 @@ code {
}
strong {
color: $color2;
color: $ui-secondary-color;
font-weight: 500;
}
}
@ -261,10 +261,10 @@ code {
.qr-code {
flex: 0 0 auto;
background: $color5;
background: $simple-background-color;
padding: 4px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba($color8, 0.2);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block;
svg {
@ -275,7 +275,7 @@ code {
.qr-alternative {
margin-left: 10px;
color: $color3;
color: $ui-primary-color;
samp {
display: block;
@ -296,16 +296,16 @@ code {
.warning {
max-width: 400px;
box-sizing: border-box;
background: rgba($color6, 0.5);
color: $color5;
text-shadow: 1px 1px 0 rgba($color8, 0.3);
box-shadow: 0 2px 6px rgba($color8, 0.4);
background: rgba($error-value-color, 0.5);
color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
a {
color: $color5;
color: $primary-text-color;
text-decoration: underline;
&:hover,

View file

@ -1,6 +1,6 @@
.landing-strip {
background: rgba(darken($color1, 7%), 0.8);
color: $color3;
background: rgba(darken($ui-base-color, 7%), 0.8);
color: $ui-primary-color;
font-weight: 400;
padding: 14px;
border-radius: 4px;

View file

@ -59,31 +59,31 @@ table {
}
::-webkit-scrollbar-thumb {
background: lighten($color1, 4%);
border: 0px none $color5;
background: lighten($ui-base-color, 4%);
border: 0px none $base-border-color;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($color1, 6%);
background: lighten($ui-base-color, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($color1, 4%);
background: lighten($ui-base-color, 4%);
}
::-webkit-scrollbar-track {
border: 0px none $color5;
border: 0px none $base-border-color;
border-radius: 0;
background: rgba($color8, 0.1);
background: rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $color1;
background: $ui-base-color;
}
::-webkit-scrollbar-track:active {
background: $color1;
background: $ui-base-color;
}
::-webkit-scrollbar-corner {

View file

@ -1,13 +1,13 @@
.activity-stream {
clear: both;
box-shadow: 0 0 15px rgba($color8, 0.2);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
.entry {
background: $color5;
background: $simple-background-color;
.detailed-status.light,
.status.light {
border-bottom: 1px solid $color2;
border-bottom: 1px solid $ui-secondary-color;
}
&:last-child {
@ -50,7 +50,7 @@
font-size: 14px;
.status__relative-time {
color: $color4;
color: $ui-primary-color;
}
}
}
@ -59,7 +59,7 @@
display: block;
max-width: 100%;
padding-right: 25px;
color: $color1;
color: $ui-base-color;
}
.status__avatar {
@ -89,28 +89,28 @@
strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}
span {
font-size: 14px;
color: $color4;
color: $ui-primary-color;
}
}
.status__content {
color: $color1;
color: $ui-base-color;
a {
color: $color4;
color: $ui-highlight-color;
}
a.status__content__spoiler-link {
color: $color5;
background: $color3;
color: $primary-text-color;
background: $ui-primary-color;
&:hover {
background: lighten($color3, 8%);
background: lighten($ui-primary-color, 8%);
}
}
}
@ -131,7 +131,7 @@
.detailed-status.light {
padding: 14px;
background: $color5;
background: $simple-background-color;
cursor: default;
.detailed-status__display-name {
@ -153,12 +153,12 @@
strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}
span {
font-size: 14px;
color: $color3;
color: $ui-primary-color;
}
}
}
@ -174,25 +174,25 @@
}
.status__content {
color: $color1;
color: $ui-base-color;
a {
color: $color4;
color: $ui-highlight-color;
}
a.status__content__spoiler-link {
color: $color5;
background: $color3;
color: $primary-text-color;
background: $ui-primary-color;
&:hover {
background: lighten($color3, 8%);
background: lighten($ui-primary-color, 8%);
}
}
}
.detailed-status__meta {
margin-top: 15px;
color: $color3;
color: $ui-primary-color;
font-size: 14px;
line-height: 18px;
@ -291,13 +291,13 @@
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 100px;
color: rgba($color5, 0.8);
color: rgba($primary-text-color, 0.8);
z-index: 1;
}
}
.media-spoiler {
background: $color3;
background: $ui-primary-color;
width: 100%;
height: 100%;
cursor: pointer;
@ -313,7 +313,7 @@
z-index: 2;
&:hover {
background: darken($color3, 5%);
background: darken($ui-primary-color, 5%);
}
span {
@ -335,7 +335,7 @@
padding-left: (48px + 14px * 2);
padding-bottom: 0;
margin-bottom: -4px;
color: $color3;
color: $ui-primary-color;
font-size: 14px;
position: relative;
@ -345,7 +345,7 @@
}
.status__display-name.muted strong {
color: $color3;
color: $ui-primary-color;
}
}

View file

@ -10,13 +10,13 @@
padding: 8px;
line-height: 18px;
vertical-align: top;
border-top: 1px solid $color1;
border-top: 1px solid $ui-base-color;
text-align: left;
}
& > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid $color1;
border-bottom: 2px solid $ui-base-color;
border-top: 0;
font-weight: 500;
}
@ -27,11 +27,11 @@
& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
background: $color1;
background: $ui-base-color;
}
a {
color: $color4;
color: $ui-highlight-color;
text-decoration: underline;
&:hover {
@ -53,11 +53,11 @@ a.table-action-link {
display: inline-block;
margin-right: 5px;
padding: 0 10px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
font-weight: 500;
&:hover {
color: $color5;
color: $primary-text-color;
}
i.fa {

View file

@ -1,10 +1,28 @@
$color1: #282c37 !default; // darkest
$color2: #d9e1e8 !default; // lightest
$color3: #9baec8 !default; // lighter
$color4: #2b90d9 !default; // vibrant
$color5: #ffffff !default; // white
$color6: #df405a !default; // error red
$color7: #79bd9a !default; // succ green
$color8: #000000 !default; // black
$color9: #ff5050 !default; // red
$color10: #ca8f04 !default; // dark goldenrod
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a; // Padua
$error-red: #df405a; // Cerise
$warning-red: #ff5050; // Sunset Orange
$gold-star: #ca8f04; // Dark Goldenrod
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black;
$base-overlay-background: $black;
$base-border-color: $white;
$simple-background-color: $white;
$primary-text-color: $white;
$valid-value-color: $success-green;
$error-value-color: $error-red;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; // Vibrant