feat(toast): use gray tokens

Author: thetaPC

core/src/components/toast/toast.ios.vars.scss

@@ -9,7 +9,7 @@
 $toast-ios-max-height: 478px;
 
 /// @prop - Background Color of the toast wrapper
-$toast-ios-background-color: $background-color-step-50;
+$toast-ios-background-color: var(--ion-color-gray-50);
 
 /// @prop - Background Color alpha of the toast wrapper when translucent
 $toast-ios-translucent-background-color-alpha: 0.8;
@@ -21,7 +21,7 @@ $toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios-
 $toast-ios-border-radius: 14px;
 
 /// @prop - Color of the toast title
-$toast-ios-title-color: $text-color-step-150;
+$toast-ios-title-color: var(--ion-color-gray-850);
 
 /// @prop - Font size of the toast title
 $toast-ios-header-font-weight: 500;

core/src/components/toast/toast.md.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Background of the toast
-$toast-md-background: $background-color-step-800;
+$toast-md-background: var(--ion-color-gray-800);
 
 /// @prop - Box shadow of the toast
 $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
@@ -14,7 +14,7 @@ $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0,
 $toast-md-font-size: dynamic-font(14px);
 
 /// @prop - Color of the toast
-$toast-md-color: $text-color-step-950;
+$toast-md-color: var(--ion-color-gray-50);
 
 /// @prop - Border radius of the toast wrapper
 $toast-md-border-radius: 4px;
@@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08;
 $toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover);
 
 /// @prop - Text color of the cancel toast button
-$toast-md-button-cancel-text-color: $text-color-step-900;
+$toast-md-button-cancel-text-color: var(--ion-color-gray-100);
 
 /// @prop - Background color of the cancel toast button on hover
 $toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover);