Skip to content

v4.8.0
Compare
Choose a tag to compare
@github-actions github-actions released this 16 Feb 16:46
· 145 commits to main since this release
v4.8.0
0596542

New in Vanilla v4.8.0

💅 New theming

This version introduces new theming system to Vanilla. Previous system was based on theme styling being applied on SCSS level on per-component basis. Newly introduced system utilises CSS custom properties to provide colour variables that are inherited through the whole document.

We currently support a light theme (default or via is-light class name) that features white background, paper theme (via is-paper class) that uses new "paper" grey background that is used on most of our new designs, and dark theme (via is-dark class) that is being used more often in recent designs to highlight some significant pages.

🚧 Work in progress

Current release of Vanilla 4.8.0 contains the foundation work of this new theming and includes migration of most commonly used themed components. The work is not complete yet, there are still components that use the old theming system and many components not themed at all. We will continue to migrate remaining parts in upcoming versions.

We tried to make sure to keep this change backwards compatible, so hopefully it should not affect styling of existing components in any significant and unexpected way.

🎨 Default icon colour

As part of the theming we improved consistency of colours we use across themes. As a result of that the default colour of most of Vanilla icons (in default light theme) was changed to be the same as text colour (black #000) instead of previous value of $color-mid-dark (#666). If you are using any custom icons this may cause inconsistencies.

For consistency with Vanilla use built-in icons, or update your icons to use $colors--light-theme--icon (or $colors--dark-theme--icon), depending on the theme.

🏗️ New and deprecated components

Alongside the theming work, we are also providing components to help build page sections in the new branding style, and deprecating some old components to avoid confusion.

New components include the hero section and new Suru sections, that should simplify building of the hero sections on the pages.

We also deprecated a variety of legacy strip variants, reducing the options and updating the strip component to utilise new theming.

For more details check the changelog in our documentation.

💣 Breaking changes

The (now deprecated) inverted link component was updated to support new theming. This may cause an issue that inverted link turns black when used in default "light" theme. Please add is-dark class name for any element that changes background to dark, so that the child components would correctly inherit the theme.

🙋 Guest devs

Vanilla team was joined for a Pulse by wonderful guest developers: @britneywwc @chillkang. This release would not be possible without their contributions. Thanks!

📋 Changelog

🚀 Features

🐛 Bug Fixes

  • Fix overlap issues with sticky app layout panel headers by @bartaz (#4991)
  • Update Twitter/X icon and add support for dark theme to GitHub icon by @bartaz (#4978)

🔨 Maintenance

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://vanillaframework.io/docs

New Contributors

Full Changelog: v4.7.0...v4.8.0

Contributors

bartaz, britneywwc, and chillkang
Assets 2