Add theme colors to toast

[mrand]

Proposed change

Add theme colors to toast provided by mwc-snackbar.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes A way to customize the toast / snackbar notification? #20427

I'm unclear if "warning" is the correct theme variable to use here, but it seemed close. Please feel free to adjust that, or anything else, as necessary, or I can.

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

[MindFreeze]

I don't think these are the correct variables for this

[mrand]

I don't think these are the correct variables for this

Thanks for the quick feedback, but if not these, than which?

[MindFreeze]

Don't really know. We might need new ones. @wendevlin what do you think?

[wendevlin]

Why is this PR changing the way it looks today? 🤔

I agree it should use ha theme colors, but look and feel should be the same as today in the default theme.

I don't think we have semantic colors that fits that. So we would need to add new ones.

Moreover the ha-toast element itself should add special component specific vars to fulfill the wish of the users.

e.g.: background-color: var(--ha-toast-background-color, var(--ha-color-on-surface-default)); so the theme designer can make specific definitions for toasts only.

@marcinbauer85 can you please jump in here and give us semantic colors to use for the toast messages?

[marcinbauer85]

Thanks for contributing, but the ha-toast needs to be migrated to Web Awesome, so adding new token variables to this now will cause theme issues at least twice for users - now and once it's migrated.