Open
Conversation
1e897d3 to
fbe248d
Compare
6b17c65 to
ff5276e
Compare
f3edd82 to
5063cbc
Compare
c6c7458 to
8c89f5a
Compare
d15ebd8 to
ce41abb
Compare
8e330cd to
d58d54a
Compare
d58d54a to
c193342
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
^5.4.0→^6.0.0Release Notes
alphagov/govuk-frontend (govuk-frontend)
v6.1.0Compare Source
To install this version with npm, run
npm install govuk-frontend@6.1.0. You can also find more information about how to stay up to date in our documentation.New features
Use Sass functions to configure asset URLs
You can now use Sass functions from
meta.get-functionas well as strings to configure:$govuk-image-url-function$govuk-font-url-functionThis will allow the variables to be configured when loading GOV.UK Frontend as a module once we support
@useand@forward.We made this change in pull request #6767: Use Sass functions to configure asset URLs.
Recommended changes
Use
<COMPONENT_NAME>/_index.scssto import individual componentsWe've deprecated each component's
_<COMPONENT_NAME>.scssfiles, which let you import an individual component’s CSS using a single Sass import. We'll remove the_<COMPONENT_NAME>.scssfiles in the next major release.If you were using the
_<COMPONENT_NAME>.scssfiles, use the component's_index.scssfile instead. For example:We made this change in pull request #6761: Deprecate
_<COMPONENT_NAME>.scssfiles.Use
color: govuk-functional-colour(text)to set the text colourWe've updated how the text colour changes to pure black when printing.
Previously, an additional print media query was included every time you used
@include govuk-text-colour:Now, only one media query is included at the start of the compiled CSS, changing the value of the
--govuk-text-colourcustom property:This change allows you to simplify how the text colour is applied to your CSS rulesets.
Replace any instances of
@include govuk-text-colourwithcolor: govuk-functional-colour(text).We'll remove the
govuk-text-colourmixin in a future breaking release.We made this change in pull request #6427: Use custom properties to switch print text to pure black.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
slash-divSass deprecation - thanks to @colinrotherham for raising the issueif-functionSass deprecationglobal-builtinSass deprecationv6.0.0Compare Source
To install this version with npm, run
npm install govuk-frontend@6.0.0. You can also find more information about how to stay up to date in our documentation.Breaking changes
Use Dart Sass v1.79.0 or later to compile your Sass stylesheets
GOV.UK Frontend no longer supports Ruby Sass, LibSass or versions of Dart Sass older than v1.79.0. Update your project to Dart Sass v1.79.0 or newer before updating to GOV.UK Frontend v6.0.
We made these changes in the following pull requests:
Update to the new type scale
We’ve applied the new type scale that was first introduced in GOV.UK Frontend 5.2.0 as an opt-in feature.
The type scale increases the size of text on small screens, improving legibility and accessibility.
We've also removed size 14 from the type scale. The smallest size in the type scale is now 16.
See the GOV.UK Design System website for an overview of the changes to the type scale.
You should test your service against the new type scale to see if you need to make any adjustments, particularly on small screens.
Stop using size 14 from the type scale
You'll now see an error when compiling your Sass if you pass
$size: 14to thegovuk-font-sizeorgovuk-fontmixins.Update your code to use a different size.
We made this change in pull request #6417: Remove 14 from the type scale.
Stop using the
govuk-body-xsandgovuk-!-font-size-14classesUpdate your service to remove or replace references to the
govuk-body-xsorgovuk-!-font-size-14classes.We've removed these classes from GOV.UK Frontend.
We made this change in pull request #6417: Remove 14 from the type scale.
Remove references to the
$govuk-new-typography-scalefeature flagRemove any references to the
$govuk-new-typography-scalefeature flag from your code. We've now removed this feature flag.We made this change in pull request #6421: Turn the new type scale on by default.
Use GOV.UK brand colours
We’ve updated GOV.UK Frontend to use the GOV.UK web palette from v1.0 of the GOV.UK brand guidelines.
To improve colour contrast and legibility, we’ve also added:
We’ve also made green and its tints and shades slightly darker.
A future version of the brand guidelines will contain these improvements.
Changes to colours in the GOV.UK web palette
The GOV.UK web palette in the brand guidelines reduces the number of named colours but introduces tints and shades for each colour. We've updated GOV.UK Frontend to use the same approach.
We’ve updated these colours:
green#​00703c#​0f7a52red#d4351c#ca3535purple#​4c2c92#​54319fbrown#b58840#​99704apink#d53880magentaand updated to#ca357cturquoise#​28a197tealand updated to#158187We’ve removed these colours:
light-blue#​5694calight-pink#f499be#e59abe)light-green#​85994b#​4b9b7d)dark-blue#003078#​0f385c)light-purple#​6f72af#​7f65b7)bright-purple#​912b88#​98285d)dark-grey#​505a5f#484949)mid-grey#b1b4b6#cecece)light-grey#f3f2f1#f3f3f3)We have not made any changes to
black,white,blue,yellowororange.We made these changes in the following pull requests:
govuk-colourgovuk_palettegovuk_palettegovuk_paletteCheck your service’s colours
If your service uses any custom components, make sure they still work with the GOV.UK web palette in terms of accessibility and design. Where possible, you should use colours from the GOV.UK web palette.
If you’re already using the
govuk-colourfunction in your project, your service will automatically update to use the latest GOV.UK web palette.If you're using a colour that we’ve renamed or that no longer exists, the
govuk-colourfunction will log a warning and automatically return the suggested replacement.Use the
govuk-colourfunction to access tints and shadesThe
govuk-colourfunction now accepts a$variantoption to access tints or shades of a colour.If you do not set a
$variantoption, thegovuk-colourfunction will return the primary variant of the colour.For example:
See the GOV.UK web palette on the GOV.UK Design System website for the list of available colours, tints and shades.
Stop using the
$govuk-coloursvariableWe’ve removed the
$govuk-coloursvariable from GOV.UK Frontend. Use thegovuk-colourfunction to access colours from the GOV.UK web palette.You can no longer override the colour palette in GOV.UK Frontend.
Stop using the
govuk-tintandgovuk-shadefunctionsWe’ve removed the
govuk-tintandgovuk-shadefunctions for applying tints and shades to colours by percentage.Replace them with tints and shades from the GOV.UK web palette that are as close as possible to the colours you were previously using.
We made this change in pull request #6639: Remove
govuk-tintandgovuk-shadefunctions.Update any light blue, turquoise or pink tags
The
govuk-tag--light-bluecolour modifier class for tags no longer exists. If you use tags of this colour, update them to use a different colour.You’ll also need to replace:
govuk-tag--turquoisewithgovuk-tag--tealgovuk-tag--pinkwithgovuk-tag--magentaWe'll remove the
govuk-tag--turquoiseandgovuk-tag--pinkmodifier classes in a future breaking release.We made this change in pull request #6416: Deprecate turquoise and pink tag colour modifiers.
Use the new Sass API and CSS custom properties for functional colours
We’ve improved the way we reference colours for essential page elements in GOV.UK Frontend, renaming 'applied colours' to 'functional colours' and making them available as CSS custom properties.
Functional colours are colours playing a specific role in the user interface. For example, there are functional colours for the page background, text and links.
You can reference the custom properties for functional colours in your own CSS code, but do not assign new values to them.
Use
govuk-functional-colourto access functional coloursThe Sass variables for accessing functional colours are deprecated, and we’ll remove them in a future breaking release.
To make it easier for you to update, the Sass variables for accessing functional colours are still available. However, these variables now return a reference to a custom property, so you’ll get an error message if you have any code that expects a colour.
Update references to these variables to use the
govuk-functional-colourfunction.govuk-functional-colourcall$govuk-brand-colourgovuk-functional-colour(brand)$govuk-text-colourgovuk-functional-colour(text)$govuk-template-background-colourgovuk-functional-colour(template-background)$govuk-body-background-colourgovuk-functional-colour(body-background)$govuk-print-text-colourgovuk-functional-colour(print-text)$govuk-secondary-text-colourgovuk-functional-colour(secondary-text)$govuk-focus-colourgovuk-functional-colour(focus)$govuk-focus-text-colourgovuk-functional-colour(focus-text)$govuk-error-colourgovuk-functional-colour(error)$govuk-success-colourgovuk-functional-colour(success)$govuk-border-colourgovuk-functional-colour(border)$govuk-input-border-colourgovuk-functional-colour(input-border)$govuk-hover-colourgovuk-functional-colour(hover)$govuk-link-colourgovuk-functional-colour(link)$govuk-link-visited-colourgovuk-functional-colour(link-visited)$govuk-link-hover-colourgovuk-functional-colour(link-hover)$govuk-link-active-colourgovuk-functional-colour(link-active)We made these changes in the following pull requests:
Use
$govuk-functional-coloursto redefine functional coloursThe deprecated Sass variables listed in the previous section are now read-only.
If you were customising a functional colour before importing GOV.UK Frontend, you'll now see a warning.
Update your code to assign a map of the colours you want to customise to the
$govuk-functional-coloursvariable instead.Use
$govuk-output-custom-propertiesto control the output of custom properties in your CSSIf your service uses multiple stylesheets, you can use the
$govuk-output-custom-propertiessetting to prevent custom properties (including the new custom properties for functional colours) from being included in your secondary stylesheets.We made this change in pull request #6606: Enable better control over custom property outputting.
Stop using the previous GOV.UK logo and colour palette
You should now only use the refreshed GOV.UK branding and remove any rebrand feature flags.
We’ve made the refreshed (blue-based) GOV.UK branding the default appearance of the GOV.UK header and GOV.UK footer components and removed the previous (mostly black) branding as an option.
We've also updated the colours used in the Service navigation and Cookie banner components.
With these changes, only services on the GOV.UK website should use the GOV.UK header and GOV.UK footer components. Services outside of the GOV.UK proposition should stop using the GOV.UK header and GOV.UK footer components and instead create their own.
If you’re using GOV.UK Frontend's Nunjucks template, you should now remove the
govukRebrandfeature flag.If you’re using GOV.UK Frontend's Nunjucks macros without the template or have overridden the default header and footer components, you should remove the
rebrandparameter from references to thegovukHeaderandgovukFootermacros.If you’re not using the Nunjucks template, remove the
govuk-template--rebrandedclass from the<html>element and update the HTML for the icons, Open Graph image and theme colour to remove references to therebrandfolder.We made these changes in the following pull requests:
Stop using the St. Edward's Crown and
useTudorCrownparameterGOV.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 GOV.UK Frontend 5.2.0, which is when we deprecated the option to switch between crowns.
We've now removed the GOV.UK header component's
useTudorCrownparameter and assets relating to the St. Edward's Crown.We made this change in pull request #6414: Remove
useTudorCrownparameter and St. Edwards crown assets.Remove the
rebrandfeature flag from your prototype configIf you're using the GOV.UK Prototype Kit, remove the
rebrandoption from your prototype'sapp/config.json.Changes to the page template
We’ve updated the options of the page template to provide consistent naming and functionality across the template.
These changes offer more flexibility in the template, with new Nunjucks variables and blocks to customise the
<header>,<footer>and<main>elements. These new options allow you to:Update Nunjucks blocks around the GOV.UK header
We've changed the page structure around the header to separate the header element (
<header>) from the GOV.UK header component. This lets you include other components, such as the Service navigation and Phase banner components, within the header element of each page.You’ll need to follow different instructions to upgrade, depending on how you create the page headers in your service. In all cases, you should make sure your page includes a single
<header>element after you’ve made the changes.If you’re using GOV.UK Frontend's template and are overriding the
govukHeadercomponent, replace references to theheaderNunjucks block to usegovukHeader.If you’re not using GOV.UK Frontend's template but are using the
govukHeadercomponent, update your template to include a<header>element around the component.If you’re not using the
headerNunjucks block at any point, or you're only using the block to remove it, you do not need to change anything.If you’re not using Nunjucks, change the existing GOV.UK header to a
<div>element and wrap it, along with any other header components, with a<header>element.We made this change in pull request #6536: Refactor heading to detach element from component.
Use the
containerblock to replace the width containerWe've reduced the scope of the
mainblock to only replace the<main>element,rather than the whole
<div class="govuk-width-container">element.If you were previously using the
mainblock, use the newcontainerblock instead.We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.
Update Nunjucks blocks around the GOV.UK footer
We've changed the page structure around the footer to separate the
<footer>element from the GOV.UK footer component. This lets you include other components within the footer element (<footer>) of each page.You’ll need to follow different instructions to upgrade, depending on how you create the page footers in your service. In all cases, you should make sure your page includes a single
<footer>element after you’ve made the changes.If you’re using GOV.UK Frontend's template and overriding the
govukFootercomponent, update references to thefooterNunjucks block to usegovukFooterinstead.If you’re not using GOV.UK Frontend's template but are using the
govukFootercomponent, update your template to include a<footer>element around the component.If you’re not using the
footerNunjucks block at any point, or you're only using the block in order to remove it, you do not need to change anything.If you’re not using Nunjucks, change the existing GOV.UK footer to a
<div>element and wrap it with a<footer>element.We made this change in pull request #6537: Refactor footer to detach element from component.
Customise the page template's
<header>elementIf you use Nunjucks, you can customise the appearance and content of the template's
<header>element with new blocks and variables.New variables:
headerClassesapplies custom classes to the elementheaderAttributesapplies custom HTML attributes to the elementNew Nunjucks blocks:
headerStartinserts HTML immediately after the element's opening tag, andheaderEndinserts HTML immediately before the element's closing taggovukHeaderlets you customise thegovukHeadercomponent without affecting other parts of the headerWe made this change in pull request #6536: Refactor heading to detach element from component.
Customise the
<div class="govuk-width-container">elementWe've added new variables and blocks to allow you to further customise the
<div class="govuk-width-container">element.The new
containerAttributesvariable applies custom HTML attributes to the element.The new
containerStartblock inserts HTML immediately after the element's opening tag. The newcontainerEndblock inserts HTML immediately before the element's closing tag.We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.
Use
mainAttributesto add attributes to the<main>elementWe've added a new
mainAttributesvariable to apply custom HTML attributes to the<main>element.We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.
Customise the template's
<footer>elementIf you’re using Nunjucks, you can customise the appearance and content of the template's
<footer>element with new blocks and variables.We’ve introduced the following new variables:
footerClassesapplies custom classes to the elementfooterAttributesapplies custom HTML attributes to the elementWe’ve introduced the following new Nunjucks blocks:
footerStartinserts HTML immediately after the element's opening tagfooterEndinserts HTML immediately before the element's closing taggovukFooterlets you customise thegovukFootercomponent without affecting other parts of the footerWe made this change in pull request #6537: Refactor footer to detach element from component.
We’ve now removed previously deprecated features
We’ve removed previously deprecated features from our Sass
Stop importing GOV.UK Frontend's Sass using
allWe deprecated GOV.UK Frontend's
all.scssfile and partials in GOV.UK Frontend 5.8.0 and replaced them with equivalent Sassindexfiles. We've now removed theall.scssfiles entirely.We made this change in pull request #6412: Remove
all.scssfile and partials.Stop using the
govuk-responsive-typographySass mixinWe renamed the
govuk-responsive-typographySass mixin togovuk-font-sizein 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-typographymixin.We’ve removed previously deprecated features from the GOV.UK header component
Stop including the service name and navigation in the GOV.UK header component
We deprecated including the service name and navigation in the GOV.UK header component in GOV.UK Frontend 5.9.0.
We've now removed this functionality.
You should now use the Service navigation component for service names and service-level navigation.
We made this change in pull request #6423: Remove service name and navigation from Header component.
Update the class on the GOV.UK logo link in the GOV.UK header component
We've updated the value of the
classattribute on the link to the GOV.UK homepage togovuk-header__homepage-link.If you're not using Nunjucks macros, you'll need to update this class manually.
We made this change in pull request #6423: Remove service name and navigation from Header component.
We’ve removed previously deprecated features from our colours
Stop using the
$legacyparameter in thegovuk-colourfunctionWe’ve removed the
$legacyparameter of thegovuk-colourfunction, so you should remove any usage of it.We made this change in pull request #6326: Use brand palette through
govuk-colour.Stop using the
$govuk-canvas-background-colourvariableWe renamed
$govuk-canvas-background-colourto$govuk-template-background-colourin GOV.UK Frontend 5.10.0. We've now removed the previous variable entirely. You should access the colour of the template background usinggovuk-functional-colour(template-background).We made this change in pull request #6413: Remove
$govuk-canvas-background-colour.Update to the latest organisation colour palette
We updated the organisation colour palette in GOV.UK Frontend 5.9.0.
The latest palette was initially opt-in, using the
$govuk-new-organisation-coloursfeature flag. The latest palette is now the only palette available, so you must remove the feature flag from your code.As part of this work, we removed the deprecated
$websafeparameter of thegovuk-organisation-colourfunction. Use the$contrast-safeparameter 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 before 2025.
We made this change in pull request #6426: Remove deprecated organisation colours.
Update references to the
govuk-pagination__item--ellipsesclass in the Pagination componentWe deprecated the
govuk-pagination__item--ellipsesclass 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--ellipsisclass instead.If you're using Nunjucks macros, you do not need to change anything.
We made this change in pull request #6382: Remove deprecated
govuk-pagination__item--ellipsesclass.Stop using the
elementparameter of the Button componentWe deprecated the
elementparameter 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
hrefparameter is set. Otherwise, it's abuttonelement.We made this change in pull request #6383: Remove element parameter from Button component.
We've removed other features we've previously deprecated
Remove references to the
$govuk-show-breakpointsfeature flagThe
$govuk-show-breakpointsfeature flag in GOV.UK Frontend 5.13.0 was only intended for use as a local development aid and not for production services, and we've now removed it.Stop using the
--govuk-frontend-breakpointCSS custom propertiesWe renamed CSS custom properties starting
--govuk-frontend-breakpointto begin with--govuk-breakpointin 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-breakpointCSS properties.Recommended changes
Use the
govukSkipLinkblock instead ofskipLinkWe're deprecating the
skipLinkblock and replacing it with agovukSkipLinkblock so all blocks replacing GOV.UK Frontend elements have the same name as the component's macro.We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.
Use the
containerStartblock instead ofbeforeContentWe're deprecating the
beforeContentblock and replacing it with acontainerStartblock so all blocks adding content at the start of an element are named...Startto make its name better match what it does.We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.
Check that the GOV.UK logo links to the GOV.UK homepage
We've updated the default value of
homepageUrlto 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
homepageUrlto point to GOV.UK homepage.Move any Phase banner components to the
<header>elementWe now recommend placing Phase banner components in the
<header>element of the page.If you're using GOV.UK Frontend's Nunjucks template and macros, create a
headerEndblock and move thegovukPhaseBannermacro into it.If you're not using Nunjucks, move the Phase banner's HTML to before the
</header>closing tag and add thegovuk-width-containerclass to prevent the banner from stretching wider than the page's content.We made this change in pull request #6546: Add
govuk-width-containerclass to Phase banner component.Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
Configuration
📅 Schedule: Branch creation - "after 3pm and before 7pm every weekday" in timezone Europe/London, Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.