1. Blog
  2. ›
  3. Article

Skeleton v0.80.8

chris
Chris Simmons @SkeletonUI
Skeleton v0.80.8

Skeleton on Svelte Sirens

We're excited to share that Skeleton will be showcased on this weeks Svelte Siren's livestream Dec. 15th at Noon (US/CST).

As part of the recent Skeleton Labs announcement, you can now support Skeleton directly on Ko-Fi and Patreon.

Release v0.80.7 · skeletonlabs/skeleton
✨ Skeleton CLI for SvelteKit by default♿ Design Token and a11y improvements🗄️ Major Drawer improvements⬆️ Major Data Table updates🐞 A ton of minor updates and fixes View the full release notes
GitHubskeletonlabs

Be sure to review our last update. The migration guide and other items may still be relevant for late arrivals! However, today's release brings the focus back to the Skeleton core, including a slew of new features, improvements, and bug fixes.

  • ✨ Skeleton CLI for SvelteKit by default
  • ♿ Design Token and a11y improvements
  • 🗄️ Major Drawer improvements
  • ⬆️ Major Data Table updates
  • 🐞 A ton of minor updates and fixes

⚠️ Minor Breaking Changes

  • .card-body class has been dropped. Replace it with p-4 or your own preferred padding size!
  • The AppRail and AppRailTile props for accent was renamed active and background renamed to hover.

Skeleton CLI for SvelteKit

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

cli-vhs

The recently launched Skeleton CLI will now be the default recommendation for anyone creating a new Skeleton project for SvelteKit. Our Getting Started docs have been tailored to reflect this. If you've not used the Skeleton CLI, you'll find the experience very similar to the default SvelteKit CLI, just with some extra Skeleton-specific options. This means you get a fresh SvelteKit project with Skeleton pre-configured automatically. This allows you to begin building your new Skeleton projects within seconds!

View blog post for more information

Design Token Expansion

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

Screen Shot 2022-12-12 at 1 55 43 PM

If you're not familiar with design tokens, see our revamped Design Token documentation. Todays release focuses on three primary areas of improvement:

1) Better Defaults

We've greatly expanded the amount of tokens available and have begun implementing these as the defaults for more of our components and features, such as Alerts.

2) Available to you!

Think of these tokens as an arsenal of expanded Skeleton-specific utility classes. Helping you easily adapt your own custom features and components to use your theme styles right away! These token classes are not just available to Skeleton contributors though, they're now officially available to you in your projects.

3) Improved Accessibility

The token updates have now improved visual accessibility as well, introducing four new on-X color values to your theme. These allow you to define your overlapping text and SVG fill color for primary/accent/tertiary/warning colors. The result is a much more accessible design out of the box. Buttons, App Rail Tiles, and other components will now use these values by default! You'll see examples of this throughout the documentation site:

contrast-compare

⚠️ Theme Migration

If you use a preset theme you'll receive these changes automatically. No configuration needed. However, if your project uses a custom theme you'll either want to recreate it, or ensure you manually add the following properties to your theme and define contrasting color values:

/* =~= Theme On-X Colors =~= */
--on-primary: #000;
--on-accent: #fff;
--on-tertiary: #000;
--on-warning: #fff;
NOTE: the surface color is already handled by --theme-font-color-[base|dark]

Drawer Updates

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

Screen Shot 2022-12-12 at 2 02 57 PM

The Drawer utility feature has been updated with several notable improvements:

  1. Drawers now include their own writable store, similar to Modals and Toasts
  2. The custom store features built in open() and close() methods.
  3. Using the open() method you can pass custom settings per drawer instance
  4. You can now control the contents of your store with drawer settings
  5. You can now style each unique drawer instance (per the screenshot above)

⚠️ Drawer Migration

View the updated documentation to learn how to migrate to the new format.

Data Table Updates

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

Screen Shot 2022-12-12 at 2 04 10 PM

Contributor @AdrianGonz97 has stepped in to help improve our recently relaunched data table utilities. Today's release makes it easier to create and update your data model through a custom Svelte Store, greatly improves type safety, as well as fixes a bug limiting search to only the current pagination results. Please be aware we have plans to expand the data table feature set, however this will be an on-going process. Most likely extending beyond the v1.0 release of Skeleton.

As of today we're now moving data tables into an "experimental" status. Meaning they are available to test and use, but it will be subject to potentially frequent breaking changes. They are not advised for production use at this time. However, if you need a production-ready solution, we recommend svelte-headless-tables by @bryanmylee. Don't fret though, you can still pair this with Skeleton's table element styles to adopt your theme styles!

⚠️ Data Table Migration

View the updated documentation to update your existing tables to the new format.

Minor Improvements and Bugfixes

Documentation Improvements

SvelteKit v1.0 Release Incoming

Just a heads up - but Rich Harris has been teasing something all week leading to the Svelte Radio podcast this week. It's highly likely this is the SvelteKit v1.0 release. If so please be aware we may see some breaking changes in Skeleton and the CLI. However, we'll aim to patch these asap!

news