Fix calls to `govuk-functional-colour` not being executed by romaricpascal · Pull Request #7072 · alphagov/govuk-frontend

romaricpascal · 2026-05-19T15:11:21Z

Due to the helpers/colour module not being included, Sass was not executing the govuk-functional-colour calls in settings/colour-functional and helpers/typography. Instead it was leaving the govuk-functional-colour calls as is in the output.

Fixes #7062
Fixes #7063

github-actions · 2026-05-19T15:13:47Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
index 25a3d9013..feb676b09 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
@@ -14,6 +14,7 @@
 @use "../tools/font-url" as *;
 @use "../tools/px-to-rem" as *;
 @use "../tools/if" as *;
+@use "colour" as *;
 @use "font-faces--internal";
 @use "typography--internal";
 @use "media-queries" as *;
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
index 28c0e12f5..024b61419 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
@@ -163,187 +163,3 @@ $govuk-functional-colours: _govuk-define-functional-colours(
   $defaults: $govuk-default-functional-colours
 );
 
-// =============================================================================
-// Legacy variables
-//
-// To help migrate to `govuk-functional-colour`, we're keeping the variables
-// which were previously storing the functional colours. This should reduce
-// breakage as teams upgrade
-// =============================================================================
-
-/// Brand colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(brand)`.
-$govuk-brand-colour: govuk-functional-colour(brand);
-
-/// Text colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(text)`.
-$govuk-text-colour: govuk-functional-colour(text);
-
-/// Template background colour
-///
-/// Used by components that want to give the illusion of extending
-/// the template background (such as the footer and cookie banner).
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(template-background)`.
-$govuk-template-background-colour: govuk-functional-colour(template-background);
-
-/// Body background colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(body-background)`.
-$govuk-body-background-colour: govuk-functional-colour(body-background);
-
-/// Text colour for print media
-///
-/// Use 'true black' to avoid printers using colour ink to print body text
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(print-text)`.
-$govuk-print-text-colour: govuk-functional-colour(print-text);
-
-/// Secondary text colour
-///
-/// Used in for example 'muted' text and help text.
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(secondary-text)`.
-$govuk-secondary-text-colour: govuk-functional-colour(secondary-text);
-
-/// Focus colour
-///
-/// Used for outline (and background, where appropriate) when interactive
-/// elements (links, form controls) have keyboard focus.
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(focus)`.
-$govuk-focus-colour: govuk-functional-colour(focus);
-
-/// Focused text colour
-///
-/// Ensure that the contrast between the text and background colour passes
-/// WCAG Level AA contrast requirements.
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(focus-text)`.
-$govuk-focus-text-colour: govuk-functional-colour(focus-text);
-
-/// Error colour
-///
-/// Used to highlight error messages and form controls in an error state
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(error)`.
-$govuk-error-colour: govuk-functional-colour(error);
-
-/// Success colour
-///
-/// Used to highlight success messages and banners
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(error)`.
-$govuk-success-colour: govuk-functional-colour(success);
-
-/// Border colour
-///
-/// Used in for example borders, separators, rules and keylines.
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(border)`.
-$govuk-border-colour: govuk-functional-colour(border);
-
-/// Input border colour
-///
-/// Used for form inputs and controls
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(input-border)`.
-$govuk-input-border-colour: govuk-functional-colour(input-border);
-
-/// Input hover colour
-///
-/// Used for hover states on form controls
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(hover)`.
-$govuk-hover-colour: govuk-functional-colour(hover);
-
-/// Link colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(link)`.
-$govuk-link-colour: govuk-functional-colour(link);
-
-/// Visited link colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(link-visited)`.
-$govuk-link-visited-colour: govuk-functional-colour(link-visited);
-
-/// Link hover colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(link-hover)`.
-$govuk-link-hover-colour: govuk-functional-colour(link-hover);
-
-/// Active link colour
-///
-/// @type Colour
-/// @access public
-/// @deprecated
-///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
-///   function instead: `govuk-functional-colour(link-active)`.
-$govuk-link-active-colour: govuk-functional-colour(link-active);
-
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.import.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.import.scss
new file mode 100644
index 000000000..3cc927570
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.import.scss
@@ -0,0 +1,2 @@
+@forward "colours-legacy-functional";
+
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.scss
new file mode 100644
index 000000000..8ee96da38
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-legacy-functional.scss
@@ -0,0 +1,188 @@
+////
+/// @group settings/colours
+////
+@use "../helpers/colour" as *;
+// =============================================================================
+// Legacy variables
+//
+// To help migrate to `govuk-functional-colour`, we're keeping the variables
+// which were previously storing the functional colours. This should reduce
+// breakage as teams upgrade
+// =============================================================================
+
+/// Brand colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(brand)`.
+$govuk-brand-colour: govuk-functional-colour(brand);
+
+/// Text colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(text)`.
+$govuk-text-colour: govuk-functional-colour(text);
+
+/// Template background colour
+///
+/// Used by components that want to give the illusion of extending
+/// the template background (such as the footer and cookie banner).
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(template-background)`.
+$govuk-template-background-colour: govuk-functional-colour(template-background);
+
+/// Body background colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(body-background)`.
+$govuk-body-background-colour: govuk-functional-colour(body-background);
+
+/// Text colour for print media
+///
+/// Use 'true black' to avoid printers using colour ink to print body text
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(print-text)`.
+$govuk-print-text-colour: govuk-functional-colour(print-text);
+
+/// Secondary text colour
+///
+/// Used in for example 'muted' text and help text.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(secondary-text)`.
+$govuk-secondary-text-colour: govuk-functional-colour(secondary-text);
+
+/// Focus colour
+///
+/// Used for outline (and background, where appropriate) when interactive
+/// elements (links, form controls) have keyboard focus.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(focus)`.
+$govuk-focus-colour: govuk-functional-colour(focus);
+
+/// Focused text colour
+///
+/// Ensure that the contrast between the text and background colour passes
+/// WCAG Level AA contrast requirements.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(focus-text)`.
+$govuk-focus-text-colour: govuk-functional-colour(focus-text);
+
+/// Error colour
+///
+/// Used to highlight error messages and form controls in an error state
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(error)`.
+$govuk-error-colour: govuk-functional-colour(error);
+
+/// Success colour
+///
+/// Used to highlight success messages and banners
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(error)`.
+$govuk-success-colour: govuk-functional-colour(success);
+
+/// Border colour
+///
+/// Used in for example borders, separators, rules and keylines.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(border)`.
+$govuk-border-colour: govuk-functional-colour(border);
+
+/// Input border colour
+///
+/// Used for form inputs and controls
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(input-border)`.
+$govuk-input-border-colour: govuk-functional-colour(input-border);
+
+/// Input hover colour
+///
+/// Used for hover states on form controls
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(hover)`.
+$govuk-hover-colour: govuk-functional-colour(hover);
+
+/// Link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link)`.
+$govuk-link-colour: govuk-functional-colour(link);
+
+/// Visited link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-visited)`.
+$govuk-link-visited-colour: govuk-functional-colour(link-visited);
+
+/// Link hover colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-hover)`.
+$govuk-link-hover-colour: govuk-functional-colour(link-hover);
+
+/// Active link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-active)`.
+$govuk-link-active-colour: govuk-functional-colour(link-active);
+
diff --git a/packages/govuk-frontend/dist/govuk/settings/_index.import.scss b/packages/govuk-frontend/dist/govuk/settings/_index.import.scss
index 374999dae..88e2a5989 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_index.import.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_index.import.scss
@@ -12,6 +12,7 @@
 
 @import "colours-organisations";
 @import "colours-functional";
+@import "colours-legacy-functional";
 
 @import "spacing";
 @import "measurements";
diff --git a/packages/govuk-frontend/dist/govuk/settings/_index.scss b/packages/govuk-frontend/dist/govuk/settings/_index.scss
index 0f42904d9..16e79382a 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_index.scss
@@ -12,6 +12,7 @@
 
 @forward "colours-organisations";
 @forward "colours-functional";
+@forward "colours-legacy-functional";
 
 @forward "spacing";
 @forward "measurements";

Action run for 951c4a9

github-actions · 2026-05-19T15:14:38Z

📋 Stats

No changes to any distributed file sizes!

Action run for 951c4a9

36degrees · 2026-05-19T15:55:49Z

+        @use "helpers/colour" as *;
+
+        :root {
+          result: $govuk-${functionalColourName}-colour == govuk-functional-colour(${functionalColourName});


Am I right in thinking that this previously passed because we made the same mistake in the implementation and the test, by not importing helpers/colour?

And therefore the test was passing because e.g. $govuk-brand-colour equalled the string 'govuk-functional-colour(brand)'?

It'd be good to improve the test so that the same thing couldn't re-occur. Could we perhaps output an expected value and a result and compare the two in the test itself? And also test that govuk-functional-colour does not appear in the output?

Am I right in thinking that this previously passed because we made the same mistake in the implementation and the test, by not importing helpers/colour?

And therefore the test was passing because e.g. $govuk-brand-colour equalled the string 'govuk-functional-colour(brand)'?

Yup, that's exactly it. I'll update the tests to compile something like:

:root { --${functionalColourName}: $govuk-${functionalColourName}-colour }

And checking for the presence of --${functionalColourName}: var(--govuk-${functionalColourName}-colour in the output which will ensure both that the value is right and the function was exectued 😊

@36degrees updated the tests. We didn't really need to output the name in the test as each variable is tested independently with .each. So I left the rule to:

--result: $govuk-${functionalColourName}-colour

The stylesheet being compiled for the test needs to `@use` the `helpers/colour` module so that `govuk-functional-colour` can be run. The test now correctly spots that the `settings/colours-functional` module does not run `govuk-functional-colour`, leaving the function calls in the output.

36degrees

Nice work! I've verified that the tests for settings/colours fail in e7db441, and that the tests for helpers/typography fail in 4b7b4f1 with the corresponding change commented out.

Prettier isn't happy, but otherwise this LGTM 👍🏻

Because `helpers/colour` `@use`s `settings/colour-functional`, `settings/colour-functional` cannot `@use` `helpers/colour` as well, forcing us to split the variables for legacy functional colours to a separate module.

Its module was not loading the `colour` module, which led Sass to leave the `govuk-functional-colour` calls in the output rather than execute them.

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-7072 May 19, 2026 15:11 Inactive

romaricpascal force-pushed the fix-govuk-functional-colour-calls branch from b8bbfa5 to 6b8fe31 Compare May 19, 2026 15:25

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-7072 May 19, 2026 15:25 Inactive

36degrees reviewed May 19, 2026

View reviewed changes

romaricpascal force-pushed the fix-govuk-functional-colour-calls branch from 6b8fe31 to 4b7b4f1 Compare May 21, 2026 09:46

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-7072 May 21, 2026 09:46 Inactive

romaricpascal requested a review from 36degrees May 21, 2026 09:47

36degrees approved these changes May 21, 2026

View reviewed changes

romaricpascal added 2 commits May 21, 2026 11:15

Move legacy variables for functional colours in their own file

ddce588

Because `helpers/colour` `@use`s `settings/colour-functional`, `settings/colour-functional` cannot `@use` `helpers/colour` as well, forcing us to split the variables for legacy functional colours to a separate module.

Ensure govuk-text-colour mixin executes govuk-functional-colour

951c4a9

Its module was not loading the `colour` module, which led Sass to leave the `govuk-functional-colour` calls in the output rather than execute them.

romaricpascal force-pushed the fix-govuk-functional-colour-calls branch from 4b7b4f1 to 951c4a9 Compare May 21, 2026 10:15

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-7072 May 21, 2026 10:15 Inactive

romaricpascal merged commit 22d7357 into main May 21, 2026
49 checks passed

romaricpascal deleted the fix-govuk-functional-colour-calls branch May 21, 2026 10:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix calls to `govuk-functional-colour` not being executed#7072

Fix calls to `govuk-functional-colour` not being executed#7072
romaricpascal merged 3 commits into
mainfrom
fix-govuk-functional-colour-calls

romaricpascal commented May 19, 2026

Uh oh!

github-actions Bot commented May 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 19, 2026 •

edited

Loading

Uh oh!

36degrees May 19, 2026

Uh oh!

romaricpascal May 21, 2026 •

edited

Loading

Uh oh!

romaricpascal May 21, 2026

Uh oh!

Uh oh!

36degrees left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

romaricpascal commented May 19, 2026

Uh oh!

github-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other changes to npm package

Uh oh!

github-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Stats

Uh oh!

36degrees May 19, 2026

Choose a reason for hiding this comment

Uh oh!

romaricpascal May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

romaricpascal May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

36degrees left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented May 19, 2026 •

edited

Loading

github-actions Bot commented May 19, 2026 •

edited

Loading

romaricpascal May 21, 2026 •

edited

Loading