From c8c314dd35b8e832bab9e36a79ca6f2e411ab5eb Mon Sep 17 00:00:00 2001
From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:42:56 -0700
Subject: [PATCH] [PM-2866] - Update color variables for better contrast
 (#6078)

* Update variables.scss

* update toast text color to have better WCAG contrast

* added toastcolor variables

* Update window.main.ts

* Tweaked styles

* darkened backgroundAlt2 and button background

* lightened button border

* lightened button backgroundColor

* Update window.main.ts

* updated brand colors and added toastTextColor variable

* lightened solarize danger variable

to meet WCAG contrast with dark text

* updated browser solarize variable to match tw-theme.css
---
 apps/browser/src/popup/scss/variables.scss | 10 +++++-----
 apps/desktop/src/scss/variables.scss       |  8 ++++----
 apps/web/src/scss/variables.scss           |  6 +++---
 libs/components/src/tw-theme.css           |  2 +-
 libs/components/src/variables.scss         |  8 ++++----
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 05843a9b351..2cdc49cd9ef 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -24,10 +24,10 @@ $gray-light: #777;
 $text-muted: $gray-light;
 
 $brand-primary: #175ddc;
-$brand-danger: #dd4b39;
-$brand-success: #00a65a;
+$brand-danger: #c83522;
+$brand-success: #017e45;
 $brand-info: #555555;
-$brand-warning: #bf7e16;
+$brand-warning: #8b6609;
 $brand-primary-accent: #1252a3;
 
 $background-color: #f0f0f0;
@@ -237,7 +237,7 @@ $themes: (
     passwordCountText: $nord5,
     calloutBorderColor: $nord0,
     calloutBackgroundColor: $nord2,
-    toastTextColor: #ffffff,
+    toastTextColor: #000000,
     svgSuffix: "-dark.svg",
     transparentColor: rgba(0, 0, 0, 0),
     dateInputColorScheme: dark,
@@ -299,7 +299,7 @@ $themes: (
     passwordCountText: $solarizedDarkBase2,
     calloutBorderColor: $solarizedDarkBase03,
     calloutBackgroundColor: $solarizedDarkBase01,
-    toastTextColor: #ffffff,
+    toastTextColor: #000000,
     svgSuffix: "-solarized.svg",
     transparentColor: rgba(0, 0, 0, 0),
     dateInputColorScheme: dark,
diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss
index b99881134d5..3ad4c0f0754 100644
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -20,10 +20,10 @@ $gray-light: #777;
 $text-muted: $gray-light;
 
 $brand-primary: #175ddc;
-$brand-danger: #dd4b39;
-$brand-success: #00a65a;
+$brand-danger: #c83522;
+$brand-success: #017e45;
 $brand-info: #555555;
-$brand-warning: #bf7e16;
+$brand-warning: #8b6609;
 $brand-primary-accent: #1252a3;
 
 $background-color: white;
@@ -211,7 +211,7 @@ $themes: (
     passwordCountText: $nord5,
     calloutBorderColor: $nord1,
     calloutBackgroundColor: $nord2,
-    toastTextColor: #ffffff,
+    toastTextColor: #000000,
     accountSwitcherBackgroundColor: $nord0,
     accountSwitcherTextColor: $nord5,
     svgSuffix: "-dark.svg",
diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss
index 222c43fed19..719f403e385 100644
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -4,10 +4,10 @@ $primary: #175ddc;
 $primary-accent: #1252a3;
 $secondary: #ced4da;
 $secondary-alt: #1a3b66;
-$success: #00a65a;
+$success: #017e45;
 $info: #555555;
-$warning: #bf7e16;
-$danger: #dd4b39;
+$warning: #8b6609;
+$danger: #c83522;
 $white: #ffffff;
 
 // Bootstrap Variable Overrides
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 420b2cfd483..1ff2064fdbd 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -151,7 +151,7 @@
 
   --color-text-main: 253 246 227;
   --color-text-muted: 147 161 161;
-  --color-text-contrast: 0 43 54;
+  --color-text-contrast: 0 0 0;
   --color-text-alt2: 255 255 255;
   --color-text-code: 240 141 199;
 
diff --git a/libs/components/src/variables.scss b/libs/components/src/variables.scss
index 1abfd645fd2..88e3cba5c3c 100644
--- a/libs/components/src/variables.scss
+++ b/libs/components/src/variables.scss
@@ -4,10 +4,10 @@ $primary: #175ddc;
 $primary-accent: #1252a3;
 $secondary: #ced4da;
 $secondary-alt: #1a3b66;
-$success: #00a65a;
+$success: #017e45;
 $info: #555555;
-$warning: #bf7e16;
-$danger: #dd4b39;
+$warning: #8b6609;
+$danger: #c83522;
 $white: #ffffff;
 
 // Bootstrap Variable Overrides
@@ -85,7 +85,7 @@ $mfaTypes: 0, 2, 3, 4, 6;
 // Theme Variables
 // Light
 
-$lightDangerHover: #c43421;
+$lightDangerHover: #c83522;
 $lightInputColor: #465057;
 $lightInputPlaceholderColor: #b6b8b8;