Rollup release 2.5.0-beta.5

The usage of design token information has been improved with many components now fully using the token for typography colours. Additionally, we have improved the accessibility of the main text colour to be an off-black. Previously it was an over-contrasted solid #000 black.

We've also made small fixes and documentation improvements to vf-hero, the ELIXIR banner and the vf-profile.

For our next beta we aim to continue documentation polish and some foundational work on navigation patterns during a sprint the week of 19 July. With those done we hope to release rollup 2.5.0 by mid-August.

Read on for more.

This releases 2.5.0-beta.5 to the CDN

https://assets.emblstatic.net/vf/v2.5.0-beta.5/css/styles.css
https://assets.emblstatic.net/vf/v2.5.0-beta.5/scripts/scripts.js

As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, you can find a guide here.

Refinements

vf-profile 1.4.0 npm git diff

• Links of .vf-profile__link use inline-link mixin.
• Remove need for .vf-u-last-item on last phone number.
• https://github.com/visual-framework/vf-core/pull/1612

vf-component-library 1.1.11 npm git diff

• Add ELIXIR banner to example EMBL-EBI page.
• https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
• https://github.com/visual-framework/vf-core/pull/1615

vf-hero 3.3.0 npm git diff

• Updates the default hero spacing to be equivalent to 1200 (was: 800). This better matches the actual default usage in practice and is based off design feedback for consistency.
• Hides 1600 variant that has gone unused.
• Readme updated to note that most uses will want a background image at 3000 by 1000 pixels.
• https://github.com/visual-framework/vf-core/pull/1614

Notable improvements

vf-design-tokens 3.6.0 npm git diff

• Accessibility: Set primary text to off-black.
• Developer tools: add sassFunction and sassMap information to token meta information.
• Reduce text-body--1 to 28px (was 32px) in size based on design input and feedback.
• https://github.com/visual-framework/vf-core/issues/1587

vf-card 2.6.0 npm git diff

• Use design tokens for text colours.
• Requires at least @visual-framework@vf-sass-config@2.6.1.
• https://github.com/visual-framework/vf-core/pull/1606

vf-code-example 1.3.0 npm git diff

• Darken comment colour.
• Use neutral colours from tokens.
• Requires at least @visual-framework@vf-sass-config@2.6.1
• https://github.com/visual-framework/vf-core/pull/1606

vf-link-list 1.4.0 npm git diff

• Use design tokens for colors, by using mixins for text-color and link-color.
• Requires at least @visual-framework@vf-sass-config@2.6.1.
• https://github.com/visual-framework/vf-core/pull/1606

vf-sass-config 2.6.1 npm git diff

• Improve reliability of mixin for link-color and brand-color when using the default color.
• Mixin for inline-link now uses link-color mixin.
• Mixin for set-type now sets a colour depending on font sizes (opt-out by passing $color: ignore).
• https://github.com/visual-framework/vf-core/pull/1606

Bug fixes

vf-button 2.0.0-alpha.1 npm git diff

• Ensure no colour is set with revised set-type mixin.
• Requires at least @visual-framework@vf-sass-config@2.6.1.
• https://github.com/visual-framework/vf-core/pull/1606

vf-footer 1.2.0 npm git diff

• Specify the footer link colours.
• Requires at least @visual-framework@vf-sass-config@2.6.1.
• https://github.com/visual-framework/vf-core/pull/1606