finalized toast color refactoring

Author: runningonsideprojects

client/styles/abstracts/_placeholders.scss

@@ -34,15 +34,15 @@
 
 %icon-toast{
 	@include themify() {
-		color: $toast-text-color
+		color: getThemifyVariable('toast-text-color');
 		& g, & path {
-			fill: $toast-text-color
+			fill: getThemifyVariable('toast-text-color');
 		}
 		&:hover {
-			color: getThemifyVariable('icon-toast-hover-color');
+			color: getThemifyVariable('toast-text-color');
 			& g, & path {
 				opacity: 1;
-				fill: getThemifyVariable('icon-toast-hover-color');
+				fill: getThemifyVariable('toast-text-color');
 			}
 		}
 	}

client/styles/abstracts/_variables.scss

@@ -55,7 +55,6 @@ $themes: (
     modal-border-color: $middle-light,
     icon-color: $middle-gray,
     icon-hover-color: $darker,
-    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $light,
     console-input-background-color: $lightest,
@@ -130,6 +129,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #E4F8FF,
     admonition-text: #075769,
+
+    toast-background-color: $medium-dark,
+    toast-text-color: $lightest,
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -156,7 +158,6 @@ $themes: (
     modal-border-color: $middle-dark,
     icon-color: $middle-light,
     icon-hover-color: $lightest,
-    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $dark,
     console-input-background-color: $darker,
@@ -229,6 +230,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #105A7F,
     admonition-text: #FFFFFF,
+
+    toast-background-color: $medium-light,
+    toast-text-color: $dark,
   ),
   contrast: (
     logo-color: $yellow,
@@ -255,7 +259,6 @@ $themes: (
     modal-border-color: $middle-dark,
     icon-color: $medium-light,
     icon-hover-color: $yellow,
-    icon-toast-hover-color: $yellow,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $dark,
     console-input-background-color: $darker,
@@ -328,9 +331,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #000000,
     admonition-text: #ffffff,
-  )
-);
 
-$toast-background-color: $medium-dark;
-$toast-text-color: $lightest;
+    toast-background-color: $medium-light,
+    toast-text-color: $darker,
 
+  )
+);

client/styles/components/_toast.scss

@@ -1,8 +1,10 @@
 @use "sass:math";
 
 .toast {
-  background-color: $toast-background-color;
-  color: $toast-text-color;
+  @include themify() {
+    color: getThemifyVariable('toast-text-color');
+    background-color: getThemifyVariable('toast-background-color');
+  }
   padding: #{math.div(10, $base-font-size)}rem;
   position: fixed;
   top: 0;