From f943ef31ddf1bafc2dd535f20ab96d97566b8f65 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 13 Aug 2022 20:57:24 +0700
Subject: [PATCH] replaced colors

---
 .../BorisStatsGitCard/styles.module.scss      |  4 +--
 .../common/LoadingProgress/styles.module.scss |  2 +-
 .../containers/Zone/styles.module.scss        |  4 +--
 .../flow/FlowRecentItem/styles.module.scss    |  2 +-
 .../input/Button/styles.module.scss           |  4 +--
 .../input/InputWrapper/styles.module.scss     |  6 ++--
 .../input/Toggle/styles.module.scss           |  2 +-
 .../media/AudioPlayer/styles.module.scss      |  2 +-
 .../media/ImagePreloader/styles.module.scss   |  6 ++--
 .../menu/HorizontalMenu/styles.module.scss    |  2 +-
 .../tags/TagWrapper/styles.module.scss        |  2 +-
 src/containers/main/Header/styles.module.scss |  2 +-
 src/styles/_colors.scss                       | 30 ++++++++++++-------
 src/styles/common/markdown.module.scss        |  4 +--
 src/utils/toast/styles.module.scss            |  2 +-
 15 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/boris/BorisStatsGitCard/styles.module.scss b/src/components/boris/BorisStatsGitCard/styles.module.scss
index 895db2ab..cb59e494 100644
--- a/src/components/boris/BorisStatsGitCard/styles.module.scss
+++ b/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;
   }
 }
diff --git a/src/components/common/LoadingProgress/styles.module.scss b/src/components/common/LoadingProgress/styles.module.scss
index e031e48d..61b5a8aa 100644
--- a/src/components/common/LoadingProgress/styles.module.scss
+++ b/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;
 }
 
diff --git a/src/components/containers/Zone/styles.module.scss b/src/components/containers/Zone/styles.module.scss
index a7535d5d..61ce4ad0 100644
--- a/src/components/containers/Zone/styles.module.scss
+++ b/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 {
diff --git a/src/components/flow/FlowRecentItem/styles.module.scss b/src/components/flow/FlowRecentItem/styles.module.scss
index 6e0a778e..32007320 100644
--- a/src/components/flow/FlowRecentItem/styles.module.scss
+++ b/src/components/flow/FlowRecentItem/styles.module.scss
@@ -40,7 +40,7 @@
 
   &.lab {
     &::after {
-      background: $blue;
+      background: $color_lab;
     }
   }
 }
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index 29403fb9..3dc19045 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/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 {
diff --git a/src/components/input/InputWrapper/styles.module.scss b/src/components/input/InputWrapper/styles.module.scss
index b197bf73..b200c3a2 100644
--- a/src/components/input/InputWrapper/styles.module.scss
+++ b/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;
   }
 }
diff --git a/src/components/input/Toggle/styles.module.scss b/src/components/input/Toggle/styles.module.scss
index 032f4c60..52db0036 100644
--- a/src/components/input/Toggle/styles.module.scss
+++ b/src/components/input/Toggle/styles.module.scss
@@ -53,7 +53,7 @@
     }
 
     &.lab {
-      background-color: $blue;
+      background-color: $color_lab;
     }
 
     &.danger {
diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/media/AudioPlayer/styles.module.scss
index 77c5d70f..2e274db9 100644
--- a/src/components/media/AudioPlayer/styles.module.scss
+++ b/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;
diff --git a/src/components/media/ImagePreloader/styles.module.scss b/src/components/media/ImagePreloader/styles.module.scss
index e505ad0f..b1e53091 100644
--- a/src/components/media/ImagePreloader/styles.module.scss
+++ b/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 {
diff --git a/src/components/menu/HorizontalMenu/styles.module.scss b/src/components/menu/HorizontalMenu/styles.module.scss
index d16fc13a..e4ae9935 100644
--- a/src/components/menu/HorizontalMenu/styles.module.scss
+++ b/src/components/menu/HorizontalMenu/styles.module.scss
@@ -46,7 +46,7 @@
     color: white;
 
     &.green {
-      background: $color_primary_gradient;
+      background: $primary_gradient;
     }
 
     &.orange {
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index b6ebab5c..9c3e4a88 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/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) {
diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss
index 7754c11e..7ede6837 100644
--- a/src/containers/main/Header/styles.module.scss
+++ b/src/containers/main/Header/styles.module.scss
@@ -123,7 +123,7 @@
   }
 
   &.lab::after {
-    background: lighten($blue, 10%);
+    background: lighten($color_lab, 10%);
   }
 
   &.boris::after {
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 4e134486..15ede08c 100644
--- a/src/styles/_colors.scss
+++ b/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;
diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss
index 594493ed..e43bae3d 100644
--- a/src/styles/common/markdown.module.scss
+++ b/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);
diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss
index c3b4636e..9e2012d0 100644
--- a/src/utils/toast/styles.module.scss
+++ b/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 {