fix(toast): default to neutral colors

Author: brandyscarney

core/src/components/toast/test/hue/index.html

@@ -64,10 +64,12 @@
           const color = toast.color || 'default';
           toast.message = `This is a ${hue} ${color} toast.`;
 
-          toast.buttons = [{
-            text: 'Action',
-            role: 'cancel'
-          }];
+          toast.buttons = [
+            {
+              text: 'Action',
+              role: 'cancel',
+            },
+          ];
 
           // Set dynamic position for each toast to ensure they don't overlap
           toast.style.position = 'absolute';
@@ -81,22 +83,22 @@
           toastOffset += 60;
         });
 
-        document.getElementById("backdrop").style.display = "block";
+        document.getElementById('backdrop').style.display = 'block';
       }
 
       // Dismiss all toasts when backdrop is clicked
       function dismissAllToasts() {
         const toasts = document.querySelectorAll('ion-toast');
-        toasts.forEach(toast => toast.dismiss());
+        toasts.forEach((toast) => toast.dismiss());
 
-        document.getElementById("backdrop").style.display = "none";
+        document.getElementById('backdrop').style.display = 'none';
       }
 
-      document.addEventListener("DOMContentLoaded", function () {
-        document.getElementById("show-subtle-toasts").addEventListener("click", () => openAllToasts(false));
-        document.getElementById("show-bold-toasts").addEventListener("click", () => openAllToasts(true));
+      document.addEventListener('DOMContentLoaded', function () {
+        document.getElementById('show-subtle-toasts').addEventListener('click', () => openAllToasts(false));
+        document.getElementById('show-bold-toasts').addEventListener('click', () => openAllToasts(true));
 
-        document.getElementById("backdrop").addEventListener("click", dismissAllToasts);
+        document.getElementById('backdrop').addEventListener('click', dismissAllToasts);
       });
     </script>
 

core/src/components/toast/toast.ionic.scss

@@ -134,26 +134,25 @@
 // --------------------------------------------------
 
 :host(.toast-hue-bold) {
-  --background: #{globals.ion-color(secondary, base)};
-  --background-activated: #{globals.ion-color(secondary, shade)};
-  --color: #{globals.ion-color(secondary, contrast)};
-  --button-color: #{globals.ion-color(secondary, contrast)};
+  --background: #{globals.$ion-bg-neutral-boldest-default};
+  --background-activated: #{globals.$ion-bg-neutral-boldest-press};
+  --color: #{globals.$ion-text-inverse};
+  --button-color: #{globals.$ion-text-inverse};
 }
 
 :host(.toast-hue-bold.ion-color) .toast-wrapper {
   background: globals.current-color(base);
   color: globals.current-color(contrast);
 }
 
-
 // Subtle Toast
 // --------------------------------------------------
 
 :host(.toast-hue-subtle) {
-  --background: #{globals.ion-color(secondary, base, $subtle: true)};
-  --background-activated: #{globals.ion-color(secondary, shade, $subtle: true)};
-  --color: #{globals.ion-color(secondary, contrast, $subtle: true)};
-  --button-color: #{globals.ion-color(secondary, contrast, $subtle: true)};
+  --background: #{globals.$ion-bg-neutral-subtlest-default};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --color: #{globals.$ion-text-default};
+  --button-color: #{globals.$ion-text-link-default};
 }
 
 :host(.toast-hue-subtle.ion-color) .toast-wrapper {