feat: themed toasts

stylesheets/_session.scss

@@ -183,14 +183,13 @@ label {
   visibility: hidden;
 }
 
-// TODO Theming update
 .Toastify__toast {
-  background: var(--modal-background-content-color);
+  background: var(--toast-background-color);
-  color: var(--modal-text-color);
+  color: var(--toast-text-color);
-  border-left: 4px solid var(--primary-color);
+  border-left: 4px solid var(--toast-color-strip-color);
 
   .Toastify__close-button {
-    color: var(--modal-text-color);
+    color: var(--toast-text-color);
   }
 
   .Toastify__progress-bar {

ts/themes/SessionTheme.tsx

@@ -630,7 +630,10 @@ export const SessionGlobalStyles = createGlobalStyle`
     --modal-drop-shadow: 0px 0px 10px  rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
 
     /* Toasts */
-    --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
+    --toast-background-color: 'var(--background-primary-color)';
+    --toast-text-color: 'var(--text-primary-color)';
+    --toast-color-strip-color: 'var(--primary-color)';
+    --toast-progress-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1);
 
     /* Right Panel Items */
     /* Also used for Session Dropdown */

ts/themes/switchTheme.tsx

@@ -330,9 +330,15 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
 
+  document.documentElement.style.setProperty(
+    '--toast-background-color',
+    'var(--background-primary-color)'
+  );
+  document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
+  document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--toast-progress-color',
-    `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1)`
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
   );
 
   document.documentElement.style.setProperty(
@@ -746,10 +752,15 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
 
-  // TODO Theming - Update
+  document.documentElement.style.setProperty(
+    '--toast-background-color',
+    'var(--background-primary-color)'
+  );
+  document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
+  document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--toast-progress-color',
-    `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR0)}, 0.1)`
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
   );
 
   document.documentElement.style.setProperty(
@@ -1164,9 +1175,15 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
 
+  document.documentElement.style.setProperty(
+    '--toast-background-color',
+    'var(--background-primary-color)'
+  );
+  document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
+  document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--toast-progress-color',
-    `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.1)`
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
   );
 
   document.documentElement.style.setProperty(
@@ -1573,10 +1590,15 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
   document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
   document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
 
-  // TODO Theming - Update
+  document.documentElement.style.setProperty(
+    '--toast-background-color',
+    'var(--background-secondary-color)'
+  );
+  document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
+  document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--toast-progress-color',
-    `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR0)}, 0.1)`
+    `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
   );
 
   document.documentElement.style.setProperty(