$background-color: #131a22; $text-color: #e0e0e0; $primary-color: #2e4c80; $secondary-color: #434f69; $danger-color: #672a21; $warning-color: #684f2c; $success-color: #25603e; $information-color: #205861; $purple-color: #561e5e; $upvote-color: #5b9b26; $downvote-color: #da3412; $fave-color: #a18e27; $comment-color: #b099dd; $hide-color: #da3412; $tag-default-color: #1b3c21; $tag-error-color: #4f181d; $tag-rating-color: #113456; $tag-origin-color: #1d1858; $tag-character-color: #193f47; $tag-oc-color: #451f47; $tag-species-color: #362118; $tag-body-type-color: #393939; $tag-content-fanmade-color: #622c4e; $tag-content-official-color: #4b491c; $tag-spoiler-color: #4f3811; $spoiler-color: #0f0f0f; @mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) { --tag-#{$tagname}-color: #{$color}; --tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)}; --tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)}; } @mixin type-color($type, $color) { --#{$type}-color: #{$color}; --#{$type}-border-color: #{lighten(desaturate($color, 20%), 10%)}; --#{$type}-dark-color: #{darken(desaturate($color, 25%), 12%)}; --#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)}; } :root { --background-color: #{$background-color}; --text-color: #{$text-color}; --link-color: #{lighten(saturate($primary-color, 7%), 35%)}; --link-hover-color: #{$text-color}; --primary-color: #{$primary-color}; --primary-border-color: #{lighten(desaturate($primary-color, 20%), 10%)}; --primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)}; --primary-dark-color: #{darken(desaturate($primary-color, 15%), 20%)}; --secondary-color: #{$secondary-color}; --secondary-border-color: #{lighten($secondary-color, 10%)}; --secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)}; --secondary-dark-color: #{darken($secondary-color, 15%)}; --secondary-link-color: #{lighten($secondary-color, 55%)}; --upvote-color: #{$upvote-color}; --downvote-color: #{$downvote-color}; --fave-color: #{$fave-color}; --comment-color: #{$comment-color}; --hide-color: #{$hide-color}; --spoiler-color: #{$spoiler-color}; --spoiler-revealed-color: #{lighten($spoiler-color, 20%)}; @include type-color(success, $success-color); @include type-color(warning, $warning-color); @include type-color(danger, $danger-color); @include type-color(information, $information-color); @include type-color(purple, $purple-color); @include tag-color(default, $tag-default-color); @include tag-color(error, $tag-error-color, 37%); @include tag-color(rating, $tag-rating-color, 37%); @include tag-color(origin, $tag-origin-color, 42%); @include tag-color(character, $tag-character-color); @include tag-color(oc, $tag-oc-color, 40%); @include tag-color(species, $tag-species-color, 37%); @include tag-color(body-type, $tag-body-type-color, 45%, 12%); @include tag-color(content-fanmade, $tag-content-fanmade-color, 40%); @include tag-color(content-official, $tag-content-official-color); @include tag-color(spoiler, $tag-spoiler-color); /* Exceptions to mixin colors */ --tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)}; }