v0.56.2 - Release Notes

[endigo9740]

Release: https://github.com/Brain-Bones/skeleton/releases/tag/0.56.2

Summary

• 🪙 New design token system introduced
• 📗 Documentation overhauls
• 📚 Guides for SvelteKit, Vite, and Astro added
• 🍞 Toast and Menu state handlers added
• 🐞 Many bugfixes and small improvements

See a list of prior release here:
https://github.com/Brain-Bones/skeleton/releases

Hey everyone, a new version of Skeleton has just been released. This includes a new Design Token system, which implements global styles controlled by your theme. As well as a major overhaul to documentation page layouts, making it easier to find the information you're looking for. Likewise this includes a slew of bugfixes and smaller updates.

Community Contest - Submit Your Themes!

As part of this update we're launching our first community contest. Create a theme, submit it, and the top three entries will win prizes! You can view the rules and learn how to enter below:

• Skeleton Community - Theme Contest! #401

Major Updates

A Brand New Domain

We've migrated to a new domain for the documentation site. Please update your bookmarks to the following: https://skeleton.dev/

Design Token System - #301

This update introduces a new way to control global styles via your theme settings, including font styles, border radius, and more. Design tokens refer to special utility classes that adapt to your themes unique CSS properties. You'll note that many components have been updated to use these classes as default settings. This allows you to quickly and easily tweak your application's appearance at a global level.

Please be aware that preset themes will receive these updates updates automatically. However, if you use a custom generated theme we advise you recreate this using the updated theme generator. This will ensure the new CSS properties are present.
https://www.skeleton.dev/guides/themes/generator

The new theme format allows you to set Google Fonts for headers and body independently. See how we handled this in each of our preset themes:
https://github.com/Brain-Bones/skeleton/blob/master/src/lib/themes/

If your project uses the all.css stylesheet, the new tokens.css stylesheet will be included automatically. However, if you import stylesheets individually, please view the "Select Styles" for import instructions:
https://www.skeleton.dev/guides/styling

Learn more:

• Read the new "Design Tokens" section
• Review how the new design token classes are generated
• Watch the video that inspired this new feature

Documentation Page Overhaul -#302

Documentation pages have been updated with a new standardized structure. This provides a ton of information at a glance, allowing you quickly copy the import statements, review required stylesheets, view dependencies, and more. Information is now sorted under tabs for: Usage, Props/Params, Classes, Events, and Accessibility. This should make it much easier to navigate and find what you're looking for!

Minor Updates

Framework Guides - #305

New guides have been added for SvelteKit, Vite, and Astro. These walk you through the process of setting up a simple example application using Skeleton. As well as providing a deep dive into using Skeleton with Astro's unique island architecture. If you're new to Skeleton these should help you dive right in!
https://www.skeleton.dev/guides/frameworks

Menu/Toast State Handler - #334

Menu and Toast utilities have been updated to allow you to track the open or closed state of each.

Update AppShell Usage Instruction - #349

Just a heads up, if you use the App Shell component, we no longer recommend removing the wrapping div element for app.html in SvelteKit projects. Please ensure you you revert this change in your existing projects per these guidelines:
https://www.skeleton.dev/components/app-shell

Bugfixes and Small Updates

• Bugfix: fixed an issue where the background gradient would sometimes appear when it was not suppose to:
  Background gradient issue between theme selector and theme generator #378
• Bugfix: Dropzone and File Buttons now support all valid input attributes, such as required:
  Dropzone should support required attribute #387
• Bugfix: the typography.css KBD styles now adapt to theme colors:
  Typography KBD styles have a hardcoded color #331
• Bugfix: the LightSwitch component would sometimes show the wrong icon color:
  Lightswitch first render issues #362
• Typography.css updated to support <ins> and <del> styles:
  Use the <ins> and <del> elements in Codeblocks #358
• A helpful SVG Filter generator has been added to the Filter action documentation:
  SVG Color Matrix Mixer #319
• Small navigation fix for the documentation AppBar:
  https://github.com/Brain-Bones/skeleton/pull/365/files
• CodeBlock indentation has been fixed for Contribution > Style Guide:
  Codeblock formatting issue on Contributions > Style Guide #369
• Various documentation examples have been fixed:
  Added comma to make example work #384
  Progress radial fix, skill update and formatting #391
• Various typos have been fixed in the documentation:
  Removed unnecessary 'header' from AppShell Property descriptions #347
  Changed App.html to index.html #348
  Just a typo in docs #352
  Fix typo #386