update toast styles to fit latest official styles

[RyanZhiNie]

📑 Description

Update the styles of the toast component to fit the latest official styles

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 2, 2023 6:17am
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 2, 2023 6:17am

[shinokada]

@jjagielka Are you happy with this PR?

[jjagielka]

Not at all. This PR introduce the new colors: info, danger and disables normal color management i.e. 'primary', 'red', 'blue', ...
More over those new colors are now called levels.

However, I must admit that something went wrong with Toast component and currently it doesn't look in accordance with Flowbite.com.

[RyanZhiNie]

My understanding of Colors of the Toast component in Flowbite is not just for colors but for practical meaning, they are used to make the toasts somewhat like alerts.

That's the reason why I remove the color prop and introduce the more practical level prop. However, users can still use their desired colors by setting the level prop none and use explicit tailwind classes.

What's more, the primary, red, blue ... are difficult to define FOR THE TOAST COMPONENT because they are NOT defined by Flowbite.com. For me, I'd rather leave it to users to decide.

[shinokada]

@RyanZhiNie Thank you for your PR and contribution.

The following is the comparison of two versions.

Current Version:

• Simplicity: Fewer props and a simpler structure for easier understanding and use by developers unfamiliar with complex configurations.

PR Version:

• Level Colors: Additional styling options like color levels and customizable classes for versatile design adaptation. Different color levels convey message types or importance levels through visual cues.

[RyanZhiNie]

I have updated this PR to reintroduce the color prop. Users can now easily change the colors either by setting the level prop for practical usage or setting the color prop just for changing colors : )

[jjagielka]

I still don't get why to introduce level. What's the difference between color="red" and level="danger"? They both produce identical code. Why not to stay with color only? Because we lack the orange color? We can add it.

[RyanZhiNie]

Remove the level prop.

[shinokada]

colorPalette should have none with ''.

[RyanZhiNie]

colorPalette should have none with ''.

Done.

[jjagielka]

I have just two comments left for that PR:

• color gray needs dark:bg-gray-700 otherwise it's the same as background
• extraIconClass is an excess, please leave just defaultIconClass, we should not make the API grow too much