refactor(toast): use the correct step color tokens for background and text

[brandyscarney]

Issue number: internal

---

What is the current behavior?

The toast container background and toast text color were using the following:

/// @prop - Background of the toast
$toast-md-background: $text-color-step-200 !default;

/// @prop - Color of the toast
$toast-md-color: $background-color-step-50 !default;

Which evaluated to:

:host {
  --background: var(--ion-color-step-800, var(--ion-text-color-step-200, #333333));
  --color: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
}

What is the new behavior?

The variables have been updated so that the background variable is used for the background of the toast container and the text variable is used for the text color of the toast:

/// @prop - Background of the toast
$toast-md-background: $background-color-step-800 !default;

/// @prop - Color of the toast
$toast-md-color: $text-color-step-950 !default;

This evaluates to:

:host {
  --background: var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));
  --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));
}

Does this introduce a breaking change?

• Yes
• No

There are no breaking changes as the --ion-color-step-* variables being used are the same, and the --ion-background-color-step-* and --ion-text-color-step-* have not been released yet. The fallback colors when both variables are undefined have also not changed.

Other information

No visual diffs are expected.

[thetaPC]

LGTM