Skeleton on Svelte Sirens
Core contributor Chris Simmons recently had the privilege to showcase Skeleton on an episode of the Svelte Siren livestream hosted by the wonderful Brittney Postma. This covers the past, present, and future of the project. There's a ton of useful info here, so give it a watch!
A Deep Dive into Styling Skeleton
We've also launched an in-depth tutorial post on our blog exploring customizing and styling for Skeleton. If you wish to learn tips and techniques for creating a theme, customizing elements, or using component style props, then this post is for you!
Today's update focuses on a major overhaul to the theme system, includes several new features, and of course extends support to the recently launched SvelteKit v1.0. We also include a variety of minor improvements, bugfixes, and updates to our documentation. As well as discuss changes to support in regards to Vite and Astro projects. This update include several breaking changes, so we recommend reading the post in full.
- 🎨 Theme System Overhaul
- 🍞 New Toast Presets
- 📢 Expanded Component Events
- 🎉 Support for SvelteKit v1.0
- 🐞 A slew of minor updates and fixes
We've implemented a massive overhaul to themes, the theme generator, preset themes, and the theme picker on our documentation site. This includes several breaking changes so it's advised you read the notes and migration guide provided below.
- Expanded the color palette to support
secondaryto match the surrounding primary/tertiary color properties.
- Expanded themes to provide a text/fill color per each color row.
- Expanded all design tokens to support the new color values.
- Updated existing components to utilize the new tokens and color values.
Theme Generator Updates
- A complete rewrite of the generator and redesign of the UI and UX flow.
- Removed canned Tailwind colors in favor of a hex-based color system.
- Dramatically improved the quality and accuracy of hex-based colors (we now have full control over this)
- Implemented a "Randomize Colors" option for the hex-based system
- Improved the preview/edit mode toggle to make it more intuitive
- Added preview elements (buttons, progress bars, etc) for a quick visual reference
- Implemented a native color picker per each color row (NOTE: this input differs per OS/browser)
- Expanded support for text/fill colors for each color row
- Every preset theme has been updated to take advantage of the expanded color palette
- Colors have been balanced and fine tuned for a better aesthetic
- Each theme has been updated to include additional options (backgrounds, etc) via the
- The Guides > Theme section details the use of
data-themeand provides more accurate previews.
- Fixed a number of issues in existing themes - such as mislabeled properties.
Theme Picker (Doc Site)
- Now loads only the active themes, via a new async/await system. This improves the initial load time of the site.
⚠️ Migration Guide
We recommend following each step below to migrate to the new theme system:
- If you use a preset theme, you'll receive the updates immediately. No change needed. Though we do recommend reviewing the
data-themeattribute in Guides > Themes.
- If you use a custom theme, we highly recommend regenerating it using the new Theme Generator
- Use the find/replace feature in your text editor of choice to replace any instance of
-secondary. This should ensure any Tailwind utility classes or design tokens are updated to the new name format.
- Finally, do a manual audit of your app and review for visual issues or discrepancies.
Toast Preset Options
Toasts can now accept a
preset setting that automatically sets the background and text color, utilizing any of the new expanded color palette options. For example, you can provide
preset: 'error' to quickly create an error toast message as shown above.
Expanded Component Events
Various missing or undocumented component events have now been dispatched or forwarded. These provide new ways for you to hook into the event cycles per each component. See the "Events" tab under each component to review each new or updated event.
Support for SvelteKit v1.0
The Skeleton library and CLI have been updated to fully support the Skeleton v1.0. We advised updating your projects to SvelteKit v1.0 as soon as you can. It should provide more stability long term.
⚠️ End of Support for Astro and Vite
Skeleton will be ending our official support of Astro and Vite going forward, instead shifting our full focus to SvelteKit. This aligns with the official stance of Svelte, and we think this provides the best experience for users going forward. If you are curious to learn more about this change, please see the full announcement linked below:
- Modals now support a
metakey to pass arbitrary data through the event bus:
- Modals have been expanded to support more customization to button text/styles:
- Paginator has been updated with a
disabledprop disable all navigation on load:
- Paginator props have been expanded to provide more customization to button text/styles:
- Replaced a hardcoded lock emoji with an SVG in the stepper component:
- Updated the Local Storage Store to v.0.3.2
- Data Tables sorting now supports BigInt:
- Placement of
mainelement resolved in AppShell:
- Resolved an issue where Menu utilities would not open on the first click:
- File Button component now has
- The modal prompt input now requires a value to submit:
- The Listbox item focus is now inset to prevent overlap:
- Fixed a typo in the AppShell docs related to
- Improvements to the Home, Why Skeleton, and other pages:
- Fixed a bug preventing the use of the letter "K" in the search field:
- Fixed a mobile responsive issue for the app bar on small screens:
- Various typos and text copy fixes: