[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

@@ -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,

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",

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

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;
 

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;