replaced colors

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -30,10 +30,10 @@
   text-transform: uppercase;
 
   &.open {
-    color: $color_danger;
+    color: $color_offline;
   }
 
   &.closed {
-    color: $green;
+    color: $color_online;
   }
 }

src/components/common/LoadingProgress/styles.module.scss

@@ -20,7 +20,7 @@
   z-index: 100;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
+  background: $global_loader_gradient;
   animation: spin infinite 1s linear;
 }
 

src/components/containers/Zone/styles.module.scss

@@ -18,7 +18,7 @@ $pad_usual: $content_bg_lightest;
     text-transform: uppercase;
 
     .danger & {
-      background: $color_danger_slate;
+      background: $content_bg_danger;
     }
   }
 }
@@ -30,7 +30,7 @@ $pad_usual: $content_bg_lightest;
   position: relative;
 
   &.danger {
-    box-shadow: inset $color_danger_slate 0 0 0 2px;
+    box-shadow: inset $content_bg_danger 0 0 0 2px;
   }
 
   &.with_title {

src/components/flow/FlowRecentItem/styles.module.scss

@@ -40,7 +40,7 @@
 
   &.lab {
     &::after {
-      background: $blue;
+      background: $color_lab;
     }
   }
 }

src/components/input/Button/styles.module.scss

@@ -234,7 +234,7 @@
 
 .primary {
   @include outer_shadow;
-  background: $color_primary_gradient;
+  background: $primary_gradient;
 }
 
 .danger {
@@ -248,7 +248,7 @@
 }
 
 .lab {
-  background: $blue;
+  background: $color_lab;
 }
 
 .flat {

src/components/input/InputWrapper/styles.module.scss

@@ -17,7 +17,7 @@
   }
 
   &.has_error {
-    box-shadow: inset $color_danger 0 0 0 1px;
+    box-shadow: inset $content_bg_danger 0 0 0 1px;
   }
 }
 
@@ -38,7 +38,7 @@
   padding: 0 $gap * 0.5;
   border-radius: 4px;
   color: white;
-  background-color: $color_danger;
+  background-color: $content_bg_danger;
   bottom: 0;
   right: $gap * 0.5;
   transform: translate(0, 50%);
@@ -66,6 +66,6 @@
   .focused.has_error &,
   .not_empty.has_error & {
     color: white;
-    background-color: $color_danger;
+    background-color: $content_bg_danger;
   }
 }

src/components/input/Toggle/styles.module.scss

@@ -53,7 +53,7 @@
     }
 
     &.lab {
-      background-color: $blue;
+      background-color: $color_lab;
     }
 
     &.danger {

src/components/media/AudioPlayer/styles.module.scss

@@ -100,7 +100,7 @@
 }
 
 .bar {
-  background: $color_primary_gradient;
+  background: $primary_gradient;
   position: absolute;
   height: 10px;
   left: 0;

src/components/media/ImagePreloader/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 img.image {
   position: absolute;
@@ -47,14 +47,14 @@ img.image {
   right: 30px;
   bottom: 40px;
   opacity: 0.4;
-  color: $orange;
+  color: $color_offline;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 
   svg {
-    fill: $orange;
+    fill: currentColor;
   }
 
   &__text {

src/components/menu/HorizontalMenu/styles.module.scss

@@ -46,7 +46,7 @@
     color: white;
 
     &.green {
-      background: $color_primary_gradient;
+      background: $primary_gradient;
     }
 
     &.orange {

src/components/tags/TagWrapper/styles.module.scss

@@ -54,7 +54,7 @@ $big: 1.2;
   }
 
   &:global(.green) {
-    background: $color_primary_gradient;
+    background: $primary_gradient;
   }
 
   &:global(.black) {

src/containers/main/Header/styles.module.scss

@@ -123,7 +123,7 @@
   }
 
   &.lab::after {
-    background: lighten($blue, 10%);
+    background: lighten($color_lab, 10%);
   }
 
   &.boris::after {

src/styles/_colors.scss

@@ -4,18 +4,18 @@ $dark_blue: #592071;
 $blue: #582cd0;
 $green: #00d2b9;
 $wisegreen: #007962;
-$olive: #8bc12a;
+$olive: #6cb337;
 $red: #ff3344;
 $orange: #ff7549;
-$color_primary: #007962;
 $lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
 $soft_blue: #3c75ff;
-$color_danger_slate: mix(#ff3344, #23201f, 60%);
+$brown: #23201f;
 
 // main definitions (move to --vars)
 $color_primary: $wisegreen;
 $color_danger: $red;
 $color_online: $olive;
+$color_offline: $red;
 $color_link: $red;
 $color_flow: $red;
 $color_lab: $blue;
@@ -24,20 +24,30 @@ $color_lab: $blue;
 $danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
 $info_gradient: linear-gradient(170deg, $blue, $dark_blue);
 $warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
-$color_primary_gradient: linear-gradient(
+$primary_gradient: linear-gradient(
   170deg,
   $lightgreen -50%,
   $color_primary 150%
 );
 $magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
+$global_loader_gradient: linear-gradient(
+  90deg,
+  $dark_blue,
+  $soft_blue,
+  $dark_blue
+);
 
 // backgrounds (move to --vars)
-$content_bg: #23201f;
-$content_bg_dark: darken($content_bg, 2%);
-$content_bg_darker: darken($content_bg, 4%);
-$content_bg_light: lighten($content_bg, 2%);
-$content_bg_lighter: lighten($content_bg, 4%);
-$content_bg_lightest: lighten($content_bg, 6%);
+$content_bg: $brown;
+$content_bg_dark: darken($brown, 2%);
+$content_bg_darker: darken($brown, 4%);
+$content_bg_light: lighten($brown, 2%);
+$content_bg_lighter: lighten($brown, 4%);
+$content_bg_lightest: lighten($brown, 6%);
+
+$content_bg_success: mix($brown, $blue, 90%);
+$content_bg_info: mix($brown, $wisegreen, 90%);
+$content_bg_danger: mix($red, $brown, 50%);
 
 // white shades (move to --vars)
 $white: white;

src/styles/common/markdown.module.scss

@@ -23,7 +23,7 @@ $margin: 1em;
   }
 
   pre {
-    background-color: transparentize($blue, 0.9);
+    background-color: $content_bg_lighter;
     font-family: monospace;
     font-size: 0.8em;
     border-radius: 2px;
@@ -43,7 +43,7 @@ $margin: 1em;
   p,
   li {
     code {
-      background-color: transparentize($blue, 0.9);
+      background-color: transparentize($color_primary, 0.9);
       padding: 2px 4px;
       border-radius: 0.3em;
       color: transparentize($color_primary, 0.1);

src/utils/toast/styles.module.scss

@@ -15,7 +15,7 @@ div.toast.error {
 }
 
 div.toast.success {
-  background: $color_primary_gradient;
+  background: $primary_gradient;
 }
 
 div.toast.info {