1. Blog
  2. ›
  3. Article

Skeleton v0.86.9

chris
Chris Simmons @SkeletonUI
Skeleton v0.86.9

News

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!

Release Notes

Release: https://github.com/skeletonlabs/skeleton/releases/tag/0.86.9

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

Theme Overhaul

https://github.com/skeletonlabs/skeleton/issues/598

Screen Shot 2022-12-26 at 2 07 33 PM

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.

Theme Updates

  • Expanded the color palette to support success and error colors alongside warning.
  • Renamed accent -> secondary to 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

Preset Themes

  • 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 data-theme attribute
  • The Guides > Theme section details the use of data-theme and 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:

  1. If you use a preset theme, you'll receive the updates immediately. No change needed. Though we do recommend reviewing the data-theme attribute in Guides > Themes.
  2. If you use a custom theme, we highly recommend regenerating it using the new Theme Generator
  3. Use the find/replace feature in your text editor of choice to replace any instance of -accent with -secondary. This should ensure any Tailwind utility classes or design tokens are updated to the new name format.
  4. Finally, do a manual audit of your app and review for visual issues or discrepancies.

Toast Preset Options

https://github.com/skeletonlabs/skeleton/issues/682

Screen Shot 2022-12-26 at 2 14 09 PM

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

https://github.com/skeletonlabs/skeleton/issues/389

Screen Shot 2022-12-26 at 2 15 54 PM

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

https://github.com/skeletonlabs/skeleton/issues/676

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

https://github.com/skeletonlabs/skeleton/pull/723

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:

Minor Improvements

Bugfixes

Documentation