v0.86.9 Release Notes

[endigo9740]

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!

• View the VOD on YouTube

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!

• View the Tutorial Post

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 - #598

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 - #682

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 - #389

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 - #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 - #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:

• View the Announcement

Minor Improvements

• Modals now support a meta key to pass arbitrary data through the event bus:
  Modals allow any type of property #693
• Modals have been expanded to support more customization to button text/styles:
  Modals: allow per instance override of button text (ex: Confirm yes/no) #683
• Paginator has been updated with a disabled prop disable all navigation on load:
  Support disabled prop for Patinator #704
• Paginator props have been expanded to provide more customization to button text/styles:
  Support "Next" and "Previous" button labels in Paginator #710
• Replaced a hardcoded lock emoji with an SVG in the stepper component:
  Stepper component has hard coded lock glyph #672
• Updated the Local Storage Store to v.0.3.2
  Update LocalStorageStore to lastest upstream release #677
• Data Tables sorting now supports BigInt:
  Fix DataTable sorting with BigInts #703

Bugfixes

• Placement of main element resolved in AppShell:
  changed AppShell wrapper to a div and put the main tag around the pag… #725
• Resolved an issue where Menu utilities would not open on the first click:
  Fix bug where menu wouldn't open on the first click after a page reload #690
• File Button component now has type="button" set:
  FileButton component submits the form prematurely #700
• The modal prompt input now requires a value to submit:
  required attribute not working in prompt modals #699
• The Listbox item focus is now inset to prevent overlap:
  Fixed listbox item focus offset #717

Documentation

• Fixed a typo in the AppShell docs related to display="contents"
  AppShell: display: content is not a real value? #670
• Improvements to the Home, Why Skeleton, and other pages:
  Update "Why Skeleton" with Sirens Stream #701
• Fixed a bug preventing the use of the letter "K" in the search field:
  Update keydown function that opens the search field #686
• Fixed a mobile responsive issue for the app bar on small screens:
  Docs appbar lacks a bit of padding #709
• Various typos and text copy fixes:
  docs(toasts): fix missing comma #698
  docs: fix typos #719

[treeforest]

收到了，谢谢~~

[endigo9740]

You're welcome!