From 42d8f9924986c936948334fe4be1e4b1915e5195 Mon Sep 17 00:00:00 2001
From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Date: Wed, 12 Jan 2022 04:12:30 -0800
Subject: [PATCH] aligned dark theme variables to the new WV dark theme (#2241)

* aligned dark theme variables to the new WV dark theme

* Update plugins.scss

updated toast close button color

* Run prettier on plugins.scss

Co-authored-by: Daniel James Smith <djsmith@web.de>
---
 src/popup/scss/plugins.scss   |  6 +++
 src/popup/scss/variables.scss | 86 ++++++++++++++++++-----------------
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss
index 3825735205..4bb805ec90 100644
--- a/src/popup/scss/plugins.scss
+++ b/src/popup/scss/plugins.scss
@@ -10,11 +10,17 @@ $fa-font-path: "~font-awesome/fonts";
 
 .toast-container {
   .toast-close-button {
+    @include themify($themes) {
+      color: themed("toastTextColor");
+    }
     font-size: 18px;
     margin-right: 4px;
   }
 
   .ngx-toastr {
+    @include themify($themes) {
+      color: themed("toastTextColor");
+    }
     align-items: center;
     background-image: none !important;
     border-radius: $border-radius;
diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
index 915e190c43..65134d4c93 100644
--- a/src/popup/scss/variables.scss
+++ b/src/popup/scss/variables.scss
@@ -103,55 +103,57 @@ $themes: (
     passwordSpecialColor: #c40800,
     calloutBorderColor: $border-color-dark,
     calloutBackgroundColor: $box-background-color,
+    toastTextColor: #ffffff,
   ),
   dark: (
     textColor: #ffffff,
-    borderColor: #111111,
-    backgroundColor: #222222,
-    backgroundColorAlt: #3d3d3d,
-    scrollbarColor: #4d4d4d,
-    scrollbarHoverColor: #5f5f5f,
-    boxBackgroundColor: #363636,
-    boxBackgroundHoverColor: #3f3f3f,
-    boxBorderColor: #2f2f2f,
-    tabBackgroundColor: #363636,
-    tabBackgroundHoverColor: #3f3f3f,
+    borderColor: #161c26,
+    backgroundColor: #161c26,
+    backgroundColorAlt: #2f343d,
+    scrollbarColor: #6e788a,
+    scrollbarHoverColor: #8d94a5,
+    boxBackgroundColor: #2f343d,
+    boxBackgroundHoverColor: #3c424e,
+    boxBorderColor: #4c525f,
+    tabBackgroundColor: #2f343d,
+    tabBackgroundHoverColor: #3c424e,
     headerColor: #ffffff,
-    headerBackgroundColor: #363636,
-    headerBackgroundHoverColor: #3f3f3f,
-    headerBorderColor: #111111,
-    headerInputBackgroundColor: #222222,
-    headerInputBackgroundFocusColor: #1d1d1d,
+    headerBackgroundColor: #2f343d,
+    headerBackgroundHoverColor: #3c424e,
+    headerBorderColor: #161c26,
+    headerInputBackgroundColor: #3c424e,
+    headerInputBackgroundFocusColor: #4c525f,
     headerInputColor: #ffffff,
-    headerInputPlaceholderColor: #707070,
-    listItemBackgroundHoverColor: #3c3c3c,
-    disabledIconColor: #cacaca,
+    headerInputPlaceholderColor: #bac0ce,
+    listItemBackgroundHoverColor: #3c424e,
+    disabledIconColor: #bac0ce,
     disabledBoxOpacity: 0.5,
-    headingColor: #a3a3a3,
-    labelColor: #a3a3a3,
-    mutedColor: #a3a3a3,
-    totpStrokeColor: #cacaca,
-    boxRowButtonColor: #cacaca,
+    headingColor: #bac0ce,
+    labelColor: #bac0ce,
+    mutedColor: #bac0ce,
+    totpStrokeColor: #4c525f,
+    boxRowButtonColor: #bac0ce,
     boxRowButtonHoverColor: #ffffff,
-    inputBorderColor: #222222,
-    inputBackgroundColor: #363636,
-    inputPlaceholderColor: #707070,
-    buttonBackgroundColor: #363636,
-    buttonBorderColor: #1f1f1f,
-    buttonColor: #e0e0e0,
-    buttonPrimaryColor: #46ace7,
-    buttonDangerColor: #ff3e24,
-    primaryColor: #52bdfb,
-    primaryAccentColor: #3ea1da,
-    dangerColor: #ff3e24,
-    successColor: $brand-success,
-    infoColor: $brand-info,
-    warningColor: $brand-warning,
+    inputBorderColor: #4c525f,
+    inputBackgroundColor: #2f343d,
+    inputPlaceholderColor: #bac0ce,
+    buttonBackgroundColor: #3c424e,
+    buttonBorderColor: #4c525f,
+    buttonColor: #bac0ce,
+    buttonPrimaryColor: #6f9df1,
+    buttonDangerColor: #ff8d85,
+    primaryColor: #6f9df1,
+    primaryAccentColor: #6f9df1,
+    dangerColor: #ff8d85,
+    successColor: #52e07c,
+    infoColor: #a4b0c6,
+    warningColor: #ffeb66,
     logoSuffix: "white",
-    passwordNumberColor: #52bdfb,
-    passwordSpecialColor: #ff7c70,
-    calloutBorderColor: #111111,
-    calloutBackgroundColor: #3d3d3d,
+    passwordNumberColor: #6f9df1,
+    passwordSpecialColor: #ff8d85,
+    calloutBorderColor: #4c525f,
+    calloutBackgroundColor: #3c424e,
+    toastTextColor: #1f242e,
   ),
   nord: (
     textColor: $nord5,
@@ -201,6 +203,7 @@ $themes: (
     passwordSpecialColor: $nord12,
     calloutBorderColor: $nord0,
     calloutBackgroundColor: $nord2,
+    toastTextColor: #ffffff,
   ),
   solarizedDark: (
     textColor: $solarizedDarkBase2,
@@ -250,6 +253,7 @@ $themes: (
     passwordSpecialColor: $solarizedDarkYellow,
     calloutBorderColor: $solarizedDarkBase03,
     calloutBackgroundColor: $solarizedDarkBase01,
+    toastTextColor: #ffffff,
   ),
 );