refactor: correct colors in dark mode [ACC-61] (#13675)

* refactor: correct colors in dark mode acc-61

* remove fade on css var

* add css variable to mixins

Author: V-Gira

src/style/common/mixins.less

@@ -41,7 +41,7 @@
   .setVariables(foreground background);
   .setColorFade(foreground, @foreground);
   .setColorFade(background, @background);
-  .setVariables(app-bg sidebar-bg sidebar-border-color main-color border-color app-bg-secondary conversation-list-bg-opacity);
+  .setVariables(app-bg sidebar-bg input-bar-bg sidebar-border-color main-color border-color app-bg-secondary conversation-list-bg-opacity);
   .setVariables(group-video-bg group-video-tile-bg inactive-call-button-bg inactive-call-button-border inactive-call-button-hover-bg inactive-call-button-hover-border disabled-call-button-bg disabled-call-button-border disabled-call-button-svg button-group-left-hover button-group-right-hover toggle-button-unselected-hover-border toggle-button-unselected-hover-bg);
   .setVariables(modal-bg modal-border-color);
   .setVariables(preference-account-input-bg);

src/style/content/conversation/input-bar.less

@@ -29,7 +29,7 @@
     z-index: 10;
     display: flex;
     padding-right: 8px;
-    background-color: var(--app-bg-secondary);
+    background-color: var(--input-bar-bg);
 
     &--editing {
       background-color: var(--text-input-editing);

src/style/foundation/themes.less

@@ -37,6 +37,7 @@ body.theme-default {
   @conversation-list-bg-opacity: fade(#000, 64%);
   @sidebar-box-shadow: #eee;
   @sidebar-box-shadow-lg: rgba(0, 0, 0, 0.12);
+  @input-bar-bg: var(--white);
 
   // ----------------------------------------------------------------------------
   // Calling
@@ -130,6 +131,7 @@ body.theme-dark {
   @border-color: var(--gray-90);
   @app-bg-secondary: var(--black);
   @conversation-list-bg-opacity: fade(#000, 78%);
+  @input-bar-bg: var(--gray-100);
 
   // ----------------------------------------------------------------------------
   // Calling

src/style/foundation/warnings.less

@@ -43,13 +43,13 @@
   width: 100%;
   justify-content: center;
   background-color: var(--accent-color);
-  color: #fff;
+  color: var(--app-bg-secondary);
 
   a {
-    color: @w-white;
+    color: var(--app-bg-secondary);
     &:hover,
     &:focus {
-      color: fade(@w-white, 80%);
+      color: var(--app-bg);
     }
   }
 }