Convert an additional set Svelte Components to Element styles

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

None of these components contain logic, which makes them prime candidates to convert to Elements. That being CSS styles like buttons, badges, cards, etc rather than Svelte components. This greatly simplified the easy of use (no import needed).

• Alerts
• Breadcrumbs
• Dividers
• Gradient Headings

The first three would be a similar conversion to buttons, badges, cards, etc. But Gradient Headings would be a bit different. In most cases we would recommend folks generate their own @apply styles that are dropped into a reusable class in their global stylesheet. Something like this:

For now I'm opening this to feedback and questions, but plan to jump on this in the next few days.

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

No response

[endigo9740]

I'm working up a new PR for this. Currently the gradient heading will be slated for deprecation without replacement. I've provide a code snippet for how users can replicate this in their own project going forward.

[endigo9740]

Likewise the Divider component has received an deprecation warning, this will now point folks to the core.css documentation, which has been expanded to replicate all variations and styles.

[endigo9740]

Breadcrumbs are ready as well. These are nearly indistinguishable from the component and have a comparable amount of markup to implement.

[endigo9740]

Finally, Alerts elements have been created. I've also migrated all existing use of the Alerts component to use these. Including the messages shown in the screenshots in the prior posts above.

[endigo9740]

This is now ready to test:

• Dividers: https://skeleton-docs-git-feature-additional-elements-skeleton-labs.vercel.app/elements/core
• Alerts: https://skeleton-docs-git-feature-additional-elements-skeleton-labs.vercel.app/elements/alerts
• Breadcrumbs: https://skeleton-docs-git-feature-additional-elements-skeleton-labs.vercel.app/elements/breadcrumbs

I've also provided a migration recommendation for Gradient Heading styles:
https://skeleton-docs-git-feature-additional-elements-skeleton-labs.vercel.app/components/gradient-headings