Skip to content

GOV.UK Frontend v6.0.0-beta.1

Pre-release
Pre-release

Choose a tag to compare

View all tags
@github-actions github-actions released this 17 Nov 15:23
· 327 commits to main since this release
v6.0.0-beta.1
9e1d2fb
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Breaking changes

Use the govuk-functional-colour function to access functional (formerly applied) colours in Sass

We've renamed and restructured our applied colours in Sass, and we've changed how you access them in your own code. They are now called functional colours.

If you were using the value of one of the variables in settings/_colours-applied.scss, use the new govuk-functional-colour function to output a var() call referencing the colour.

.a-component {
  // color: $govuk-text-colour
  color: govuk-functional-colour(text);
}
Removed Sass variable govuk-functional-colour call
$govuk-brand-colour govuk-functional-colour(brand)
$govuk-text-colour govuk-functional-colour(text)
$govuk-template-background-colour govuk-functional-colour(template-background)
$govuk-body-background-colour govuk-functional-colour(body-background)
$govuk-print-text-colour govuk-functional-colour(print-text)
$govuk-secondary-text-colour govuk-functional-colour(secondary-text)
$govuk-focus-colour govuk-functional-colour(focus)
$govuk-focus-text-colour govuk-functional-colour(focus-text)
$govuk-error-colour govuk-functional-colour(error)
$govuk-success-colour govuk-functional-colour(success)
$govuk-border-colour govuk-functional-colour(border)
$govuk-input-border-colour govuk-functional-colour(input-border)
$govuk-hover-colour govuk-functional-colour(hover)
$govuk-link-colour govuk-functional-colour(link)
$govuk-link-visited-colour govuk-functional-colour(link-visited)
$govuk-link-hover-colour govuk-functional-colour(link-hover)
$govuk-link-active-colour govuk-functional-colour(link-active)

Although we've now deprecated the Sass variables, they're still available to make your migration easier.
However, if your code was using the Sass variables to do computations using the Sass colour API, a compilation error will occur. This is because the variables now store a Sass string with a var() call, rather than a Sass colour.

Use $govuk-functional-colours to redefine functional (formerly applied) colours

We've restructured our applied colours in Sass. They are now called functional colours, and we've changed the way you redefine them.

If you were redefining a custom value for the functional colour before importing GOV.UK Frontend, you can still do this by assigning a map of the colours you want to change to the $govuk-functional-colours variable.

// This will be merged with the default functional colours of GOV.UK Frontend
// redefining the 'brand' colour to `rebeccapurple`
$govuk-functional-colour: (
  brand: rebeccapurple
);
@import "node_modules/govuk-frontend/dist/govuk/index";

Note that you can only redefine existing functional colours, not add new functional colours. This is to make sure there's a clear separation between colours from GOV.UK Frontend and colours from your own project.

We've ended support for Ruby Sass and LibSass

GOV.UK Frontend no longer supports Ruby Sass or LibSass. You must update your project to Dart Sass to continue using GOV.UK Frontend.

Support for Ruby Sass ended in 2019, and LibSass was deprecated in 2020. A number of Sass implementations, including Node Sass, SassC and sass-rs, are dependent upon LibSass. GOV.UK Frontend no longer supports these implementations.

The Sass developers have provided guides for:

We made this change in pull request #6311: Remove support for Ruby Sass and LibSass.

We've set our minimum Dart Sass version to 1.79

GOV.UK Frontend will no longer support services using Dart Sass versions earlier than 1.79. If you're using an earlier version of Dart Sass, your service's Sass may break, as GOV.UK Frontend may use features in Dart Sass that are not available in earlier versions.

If you're using an earlier version of Dart Sass than 1.79, see the Dart Sass releases and follow their release notes to upgrade to version 1.79 or later to continue using GOV.UK Frontend.

We made this change in pull request #6366: Update Dart Sass tests minimum version to 1.79.0.

Update references to govuk-pagination__item--ellipses class from the HTML for the Pagination component

We deprecated the govuk-pagination__item--ellipses class in GOV.UK Frontend 5.13.0, and we've now removed it.

If you're not using Nunjucks macros, you should update instances of this class to use the govuk-pagination__item--ellipsis class instead.

If you're using Nunjucks macros, you don't need to change anything.

We made this change in pull request #6382: Remove deprecated govuk-pagination__item--ellipses class.

Update the class on the GOV.UK logo link in the Header component

We've updated the value of the class attribute on the link to the GOV.UK homepage to govuk-header__homepage-link.

If you're not using Nunjucks macros, you'll need to update this class manually.

<!-- Before -->
<a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
  [...]
</a>

<!-- After -->
<a href="//gov.uk" class="govuk-header__homepage-link">
  [...]
</a>

We made this change in pull request #6423: Remove service name and navigation from Header component.

Stop including the service name and navigation items in the Header component

We deprecated including the service name and navigation in the Header in GOV.UK Frontend 5.9.0.

We've now removed this functionality.

Service names and service-level navigation should now use the Service navigation component.

We made this change in pull request #6423: Remove service name and navigation from Header component.

Stop importing GOV.UK Frontend's Sass using all

We deprecated GOV.UK Frontend's all.scss file and partials in GOV.UK Frontend 5.8.0 and replaced them with equivalent Sass index files. We've now removed the all.scss files entirely.

With the move to Dart Sass, you can now simplify how you import Sass from GOV.UK Frontend.

// Before
@import "govuk/all";
@import "govuk/components/all"

// After
@import "govuk";
@import "govuk/components"

We made this change in pull request #6412: Remove all.scss file and partials.

Update to the new organisation colour palette

We updated the organisation colour palette in GOV.UK Frontend 5.9.0.

The new palette was initially opt-in using the $govuk-new-organisation-colours feature flag. The updated palette is now the only palette available, so you can remove the feature flag from your code.

As part of this work, we removed the deprecated $websafe parameter of the govuk-organisation-colour function. Use the $contrast-safe parameter when calling the function instead.

We made this change in pull request #6390: Remove legacy organisation colour palette.

Update references to deprecated organisations in the organisation colour palette

We've removed deprecated organisations from the organisation colour palette. These organisations had ceased to exist or had been renamed prior to the start of 2025.

We made this change in pull request #6426: Remove deprecated organisation colours.

Stop using the govuk-responsive-typography Sass mixin

We renamed the govuk-responsive-typography Sass mixin to govuk-font-size in GOV.UK Frontend 5.1.0. We've now removed the previous name entirely.

We made this change in pull request #6387: Remove govuk-responsive-typography mixin.

Stop using the --govuk-frontend-breakpoint CSS custom properties

We renamed CSS custom properties starting --govuk-frontend-breakpoint to begin with --govuk-breakpoint in GOV.UK Frontend 5.11.0. We've now removed the previous names for these properties.

We made this change in pull request #6385: Remove --govuk-frontend-breakpoint CSS properties.

Remove references to the $govuk-show-breakpoints feature flag

The $govuk-show-breakpoints feature flag was deprecated and rendered non-operational by the media query changes introduced in GOV.UK Frontend 5.13.0.

This flag was only intended for use as a local development aid and not for production services, and we've now removed it.

We made this change in pull request #6384: Remove $govuk-show-breakpoints feature flag.

Stop using the element parameter of the Button component

We deprecated the element parameter of the Button component Nunjucks macro in GOV.UK Frontend 5.1.0, and we've now removed it.

The component is now output as a link if the href parameter is set. Otherwise, it's a button element.

This means it's no longer possible to use input elements for buttons. Buttons using input are less flexible than button elements in terms of styling and content allowed within them, so we want to avoid using them.

We made this change in pull request #6383: Remove element parameter from Button component.

Stop using $govuk-canvas-background-colour

We renamed $govuk-canvas-background-colour to $govuk-template-background-colour in GOV.UK Frontend 5.10.0. We've now removed the previous variable entirely.

We made this change in pull request #6413: Remove $govuk-canvas-background-colour.

Stop using St. Edward's Crown and the useTudorCrown parameter

GOV.UK updated its logo to replace the St. Edward's Crown with the Tudor Crown in GOV.UK Frontend 5.1.0. The Tudor Crown became the default in 5.2.0, which is when we deprecated the option to switch between crowns.

We've now removed the Header component's useTudorCrown parameter and assets relating to the St. Edward's Crown.

We made this change in pull request #6414: Remove useTudorCrown parameter and St. Edwards crown assets.

Stop using govuk-body-xs, govuk-!-font-size-14 and '14' as a possible font size in govuk-font

We deprecated 14 as a point on our type scale in GOV.UK Frontend 5.1.0. We've now removed it as an option, along with the typography classes that used it:

  • govuk-body-xs
  • govuk-!-font-size-14

We made this change in pull request #6417: Remove 14 from the type scale.

We've updated our responsive type scale

We updated our responsive type scale behind the feature flag $govuk-new-typography-scale in GOV.UK Frontend 5.2.0.

These type scale changes are now on by default, and we've removed the $govuk-new-typography-scale feature flag.

We made this change in pull request #6421: Turn the new type scale on by default.

Recommended changes

Rename turquoise and pink coloured tags

We've renamed 2 of the Tag component's colour modifier classes to be in line with GOV.UK Frontend's new colour palette:

  • govuk-tag--turquoise is now govuk-tag--teal
  • govuk-tag--pink is now govuk-tag--magenta

Rename your tags to reflect these changes, as we'll be removing govuk-tag--turquoise and govuk-tag--pink in a future breaking release.

We made this change in pull request #6416: Deprecate turquoise and pink tag colour modifiers.

Check that the GOV.UK logo links to the GOV.UK homepage

We've updated the default value of homepageUrl to point to the GOV.UK homepage.

The previous default value pointed at the root of the current domain. On services, this caused the GOV.UK logo to link to the homepage of the service, rather than the GOV.UK homepage.

Unless you operate a GOV.UK branded product, the GOV.UK logo should always link to the homepage of GOV.UK. Use the Service navigation component to provide a link to a local homepage.

We made this change in pull request #6418: Update default homepageUrl to point to GOV.UK homepage.

New features

The GOV.UK footer component now allows the removal of OGL Content Licence information

If your service does not provide information under the Open Government Licence (OGL), you can now remove it from the GOV.UK footer.

If you're using Nunjucks, set the contentLicence parameter to false:

{{ govukFooter({
  contentLicence: false
}) }}

We made this change in #6191: Allow removal of Content Licence information in the GOV.UK footer component. Thanks to @NickColley for making this change.

Fixes

Tags now have borders for improved legibility

We've reviewed the design of the tag component in response to changes from the new GOV.UK brand colour palette.

Tags now have a 1px border, with the colour based on the background colour of the tag. This makes tags easier to distinguish against white backgrounds.

We made this change in pull request #6379: Add borders to tags.

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

Contributors

NickColley, NikhilNanjappa, and lewis-softwire
Assets 3
Loading