chore(deps): update dependency vanilla-framework to v4.8.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
vanilla-framework (source)	4.7.0 -> 4.8.0

---

Release Notes

canonical/vanilla-framework (vanilla-framework)

v4.8.0

Compare Source

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.

🙋 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

• Update strip component to new theming system by @​bartaz (#​4996)
• Add theme support for table component by @​britneywwc (#​5000)
• Update links to use new theming by @​bartaz (#​4997)
• Add theme support for muted text by @​britneywwc (#​4994)
• Update core icons to support new theming system by @​bartaz (#​4993)
• Add more hero suru variants by @​bartaz (#​4989)
• Add dark theme support to notifications by @​chillkang (#​4971)
• Update chips with new theming support by @​chillkang (#​4986)
• Update Suru to support hero sections with 25/75 and 50/50 main suru backgrounds by @​bartaz (#​4985)
• Add theme support for form validation by @​britneywwc (#​4981)
• Add theme support for search box by @​britneywwc (#​4987)
• Add theme support for forms tick elements by @​britneywwc (#​4977)
• Add theme support for forms password toggle by @​britneywwc (#​4976)
• Add theme support for forms help text by @​britneywwc (#​4975)
• Add new theme support for base forms by @​britneywwc (#​4974)
• Hero section by @​bartaz (#​4973)
• [Feature branch] Dark theme implemented as CSS variables by @​bartaz (#​4969)

🐛 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

• Fix typo by @​britneywwc (#​4999)
• Rename color variables for consistency by @​chillkang (#​4982)
• Export status color variables as CSS custom properties by @​chillkang (#​4979)
• Fix typo in release file by @​britneywwc (#​4980)

Getting Vanilla Framework

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

New Contributors

• @​chillkang made their first contribution in https://github.com/canonical/vanilla-framework/pull/4979

Full Changelog: canonical/vanilla-framework@v4.7.0...v4.8.0

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[webteam-app]

Demo starting at https://lxd-ui-655.demos.haus

[mas-who]

• updated info icon in navigation to have dark theme colors, keep it as blue everywhere else.
• Note this vanilla update changed most dark grey icons to black, not going to change this styling to keep things consistent with vanilla.

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

[lorumic]

• Note this vanilla update changed most dark grey icons to black, not going to change this styling to keep things consistent with vanilla.

I think in this case the consistency check should rather be on the opposite side - i.e. checking if we assigned the mid-dark colour to any custom icon in the project, and if so, changing the style there to match the current Vanilla one, which uses black. Otherwise, we'd end up with the custom icons having the old mid-dark colour, and every other icon having the black colour.

[mas-who]

• Note this vanilla update changed most dark grey icons to black, not going to change this styling to keep things consistent with vanilla.

I think in this case the consistency check should rather be on the opposite side - i.e. checking if we assigned the mid-dark colour to any custom icon in the project, and if so, changing the style there to match the current Vanilla one, which uses black. Otherwise, we'd end up with the custom icons having the old mid-dark colour, and every other icon having the black colour.

Thanks @lorumic I did a double check and no other custom icons have $color-mid-dark applied, so I think it's okay now for lxd.

[lorumic]

I see there are a few usages of the information icon where, unlike the header's case, the icon is not used for a link (NetworkDevicesForm, CreateInstanceSnapshotForm, ProjectDetailsForm). I think in these cases the colour should be black for consistency with the other icons, and to better match what we had before there. At least this was my reasoning for Anbox. Only in the header's case, at most, the bluish icon can work, since it represents a link.

Anyhow, this is a decision that should be discussed and taken by our designers, @piperdeck and @acarege.

[mas-who]

I see there are a few usages of the information icon where, unlike the header's case, the icon is not used for a link (NetworkDevicesForm, CreateInstanceSnapshotForm, ProjectDetailsForm). I think in these cases the colour should be black for consistency with the other icons, and to better match what we had before there. At least this was my reasoning for Anbox. Only in the header's case, at most, the bluish icon can work, since it represents a link.

Anyhow, this is a decision that should be discussed and taken by our designers, @piperdeck and @acarege.

Yeah that is true, I think maybe we can discuss this tomorrow in the work together session since both @piperdeck and @acarege will be there. In any case, I don't have a preference as long as it is consistent across the different projects :)

[acarege]

It took me a minute to understand who @mas-who is 😆

I will be happy to chime in tomorrow during working together, but as it's for LXD it's @piperdeck 's call to make.

[lorumic]

I will be happy to chime in tomorrow during working together, but as it's for LXD it's @piperdeck 's call to make.

Actually this would touch also ACD, as I've made the assumptions there that the previous style should be kept - so no bluish info icons whatsoever.

Let's discuss and verify whether this is what we want, so that we keep the choice consistent across projects :)

[mas-who]

@lorumic I have updated the info icon to be black everywhere except for the side navigation panel and within notifications