BAU: Bump govuk-frontend from 5.14.0 to 6.1.0

[dependabot]

Bumps govuk-frontend from 5.14.0 to 6.1.0.

Release notes

Sourced from govuk-frontend's releases.

GOV.UK Frontend v6.1.0

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-function in addition to strings to configure:

• $govuk-image-url-function
• $govuk-font-url-function

This will allow the variables to be configured when loading GOV.UK Frontend as a module once we support @use and @forward.

We made this change in [pull request #6767: Use Sass functions to configure asset URLs](alphagov/govuk-frontend#6767).

Recommended changes

Use <COMPONENT_NAME>/_index.scss to import individual components

We've deprecated each component's _<COMPONENT_NAME>.scss files, which let you import an individual component’s CSS using a single Sass import. We'll remove the _<COMPONENT_NAME>.scss files in the next major release.

If you were using the _<COMPONENT_NAME>.scss files, use the component's _index.scss file instead. For example:

// Previously
@import "govuk/components/button/button";
// Now
@​import "govuk/components/button";

We made this change in [pull request #6761: Deprecate _<COMPONENT_NAME>.scss files](alphagov/govuk-frontend#6761).

Use color: govuk-functional-colour(text) to set the text colour

We'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:

.my-element {
  color: var(--govuk-text-colour, #0b0c0c);
}
@​media print {
.my-element {
color: var(--govuk-print-text-colour, #000);
}
</tr></table>

... (truncated)

Changelog

Sourced from govuk-frontend's changelog.

v6.1.0 (Feature release)

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-function as well as strings to configure:

• $govuk-image-url-function
• $govuk-font-url-function

This will allow the variables to be configured when loading GOV.UK Frontend as a module once we support @use and @forward.

We made this change in [pull request #6767: Use Sass functions to configure asset URLs](alphagov/govuk-frontend#6767).

Recommended changes

Use <COMPONENT_NAME>/_index.scss to import individual components

We've deprecated each component's _<COMPONENT_NAME>.scss files, which let you import an individual component’s CSS using a single Sass import. We'll remove the _<COMPONENT_NAME>.scss files in the next major release.

If you were using the _<COMPONENT_NAME>.scss files, use the component's _index.scss file instead. For example:

// Previously
@import "govuk/components/button/button";
// Now
@​import "govuk/components/button";

We made this change in [pull request #6761: Deprecate _<COMPONENT_NAME>.scss files](alphagov/govuk-frontend#6761).

Use color: govuk-functional-colour(text) to set the text colour

We'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:

.my-element {
  color: var(--govuk-text-colour, #0b0c0c);
}
@​media print {
.my-element {
color: var(--govuk-print-text-colour, #000);
}
</tr></table>

... (truncated)

Commits

• 7221035 Release 6.1.0
• f0ef301 Bump the postcss group with 2 updates
• b4df849 Merge pull request #6805 from alphagov/dependabot/npm_and_yarn/govuk-prototyp...
• 087180d Bump puppeteer from 24.37.3 to 24.37.5 in the test group
• 9efe80c Bump govuk-prototype-kit from 13.18.1 to 13.19.0
• 83b5b87 Bump the babel group with 2 updates
• 3a24037 Use focus-text colour for text link focus state
• de10615 Merge pull request #6427 from alphagov/print-text-through-custom-properties
• 8ac4b45 Deprecate the govuk-text-colour mixin
• 8a68684 Use color: govuk-functional-colour(text) instead of the govuk-text-colour...
• Additional commits viewable in compare view

Note
Automatic rebases have been disabled on this pull request as it has been open for over 30 days.