diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2268e269c..eebdfb8e06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,28 @@ For advice on how to use these release notes see [our guidance on staying up to
### New features
+#### We've updated the list of organisations and brand colours included in Frontend
+
+We've overhauled the list of organisations and organisation brand colours that are shipped with GOV.UK Frontend.
+
+The previous list was outdated and had not kept up with changes to the machinery of government. We have updated the list to:
+
+- add all current government departments and their brand colours
+- add variants of brand colours that meet a 4.5:1 contrast ratio against white, where required
+- provide warnings if defunct organisations are still being referenced in your Sass code
+
+To enable these changes, set the feature flag variable `$govuk-new-organisation-colours` to `true` before you import GOV.UK Frontend in your Sass files:
+
+```scss
+// application.scss
+$govuk-new-organisation-colours: true;
+@import "govuk-frontend/all";
+```
+
+You can also silence warnings about defunct organisations by adding `organisation-colours` to the [`$govuk-suppressed-warnings`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-suppressed-warnings) setting.
+
+This change was introduced in [pull request #3407: Update organisation colours](https://github.com/alphagov/govuk-frontend/pull/3407).
+
#### Stop long words breaking out of components with `govuk-!-text-break-word`
We've added a new override class to help display long or unpredictable words on narrow screens, such as an email address entered by a user.
@@ -20,6 +42,18 @@ Sass users can also use the `govuk-text-break-word` mixin.
This change was introduced in [pull request #5159: Add break-word typography helper](https://github.com/alphagov/govuk-frontend/pull/5159).
+### Recommended changes
+
+#### Update the `$websafe` parameter on the `govuk-organisation-colour` function
+
+The `govuk-organisation-colour` Sass function's `$websafe` parameter on has been renamed to `$contrast-safe`.
+
+This is to more accurately describe the functionality of the parameter.
+
+The old parameter name will stop working in the next major version of GOV.UK Frontend.
+
+This change was introduced in [pull request #3407: Update organisation colours](https://github.com/alphagov/govuk-frontend/pull/3407).
+
### Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
diff --git a/packages/govuk-frontend-review/src/stylesheets/app.scss b/packages/govuk-frontend-review/src/stylesheets/app.scss
index 55f0f644ce..b0493b2c10 100644
--- a/packages/govuk-frontend-review/src/stylesheets/app.scss
+++ b/packages/govuk-frontend-review/src/stylesheets/app.scss
@@ -1,8 +1,12 @@
$govuk-show-breakpoints: true;
$govuk-new-typography-scale: true;
+$govuk-new-organisation-colours: true;
+
+$govuk-suppressed-warnings: ("organisation-colours");
@import "govuk/all";
@import "partials/app";
@import "partials/code";
@import "partials/banner";
+@import "partials/organisation-swatch";
@import "partials/prose";
diff --git a/packages/govuk-frontend-review/src/stylesheets/partials/_organisation-swatch.scss b/packages/govuk-frontend-review/src/stylesheets/partials/_organisation-swatch.scss
new file mode 100644
index 0000000000..8bcbdb0cda
--- /dev/null
+++ b/packages/govuk-frontend-review/src/stylesheets/partials/_organisation-swatch.scss
@@ -0,0 +1,18 @@
+.app-organisation-swatch {
+ padding-left: govuk-spacing(3);
+ border-left: 6px solid #777777;
+
+ h2 {
+ color: #777777;
+ }
+}
+
+@each $key, $map in $govuk-colours-organisations {
+ .app-organisation-swatch--#{$key} {
+ border-left-color: govuk-organisation-colour($key, $contrast-safe: false);
+
+ h2 {
+ color: govuk-organisation-colour($key);
+ }
+ }
+}
diff --git a/packages/govuk-frontend-review/src/views/examples/organisation-colours/index.njk b/packages/govuk-frontend-review/src/views/examples/organisation-colours/index.njk
new file mode 100644
index 0000000000..530467d362
--- /dev/null
+++ b/packages/govuk-frontend-review/src/views/examples/organisation-colours/index.njk
@@ -0,0 +1,210 @@
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{% extends "layouts/examples.njk" %}
+
+{% block beforeContent %}
+ {{ govukBackLink({
+ href: "/"
+ }) }}
+{% endblock %}
+
+{% set organisations = {
+ "attorney-generals-office": {
+ "name": "Attorney General's Office",
+ "start": 1315
+ },
+ "cabinet-office": {
+ "name": "Cabinet Office",
+ "start": 1916
+ },
+ "civil-service": {
+ "name": "Civil Service"
+ },
+ "department-for-business-trade": {
+ "name": "Department for Business and Trade",
+ "start": 2023
+ },
+ "department-for-business-energy-industrial-strategy": {
+ "name": "Department for Business, Energy and Industrial Strategy",
+ "start": 2016,
+ "end": 2023
+ },
+ "department-for-business-innovation-skills": {
+ "name": "Department for Business, Innovation and Skills",
+ "start": 2009,
+ "end": 2016
+ },
+ "department-for-communities-local-government": {
+ "name": "Department for Communities and Local Government",
+ "start": 2006,
+ "end": 2018
+ },
+ "department-for-culture-media-sport": {
+ "name": "Department for Culture, Media and Sport",
+ "start": 1997
+ },
+ "department-for-digital-culture-media-sport": {
+ "name": "Department for Digital, Culture, Media and Sport",
+ "start": 2017,
+ "end": 2023
+ },
+ "department-for-education": {
+ "name": "Department for Education",
+ "start": 2010
+ },
+ "department-for-energy-security-net-zero": {
+ "name": "Department for Energy Security and Net Zero",
+ "start": 2023
+ },
+ "department-for-environment-food-rural-affairs": {
+ "name": "Department for Environment, Food and Rural Affairs",
+ "start": 2001
+ },
+ "department-for-exiting-the-european-union": {
+ "name": "Department for Exiting the European Union",
+ "start": 2016,
+ "end": 2020
+ },
+ "department-for-international-development": {
+ "name": "Department for International Development",
+ "start": 1997,
+ "end": 2020
+ },
+ "department-for-international-trade": {
+ "name": "Department for International Trade",
+ "start": 2016,
+ "end": 2023
+ },
+ "department-for-levelling-up-housing-communities": {
+ "name": "Department for Levelling Up, Housing and Communities",
+ "start": 2021,
+ "end": 2024
+ },
+ "department-for-science-innovation-technology": {
+ "name": "Department for Science, Innovation and Technology",
+ "start": 2023
+ },
+ "department-for-transport": {
+ "name": "Department for Transport",
+ "start": 2002
+ },
+ "department-for-work-pensions": {
+ "name": "Department for Work and Pensions",
+ "start": 2001
+ },
+ "department-of-energy-climate-change": {
+ "name": "Department of Energy and Climate Change",
+ "start": 2008,
+ "end": 2016
+ },
+ "department-of-health": {
+ "name": "Department of Health",
+ "start": 1988,
+ "end": 2018
+ },
+ "department-of-health-social-care": {
+ "name": "Department of Health and Social Care",
+ "start": 2018
+ },
+ "foreign-commonwealth-office": {
+ "name": "Foreign and Commonwealth Office",
+ "start": 1968,
+ "end": 2020
+ },
+ "foreign-commonwealth-development-office": {
+ "name": "Foreign, Commonwealth and Development Office",
+ "start": 2020
+ },
+ "hm-government": {
+ "name": "HM Government",
+ "start": 1707
+ },
+ "hm-revenue-customs": {
+ "name": "HM Revenue and Customs",
+ "start": 2005
+ },
+ "hm-treasury": {
+ "name": "HM Treasury"
+ },
+ "home-office": {
+ "name": "Home Office",
+ "start": 1782
+ },
+ "ministry-of-defence": {
+ "name": "Ministry of Defence",
+ "start": 1964
+ },
+ "ministry-of-housing-communities-local-government": {
+ "name": "Ministry of Housing, Communities and Local Government",
+ "start": 2018
+ },
+ "ministry-of-justice": {
+ "name": "Ministry of Justice",
+ "start": 2007
+ },
+ "northern-ireland-office": {
+ "name": "Northern Ireland Office",
+ "start": 1972
+ },
+ "office-of-the-advocate-general-for-scotland": {
+ "name": "Office of the Advocate General for Scotland",
+ "start": 1999
+ },
+ "office-of-the-leader-of-the-house-of-commons": {
+ "name": "Office of the Leader of the House of Commons",
+ "start": 1721
+ },
+ "office-of-the-leader-of-the-house-of-lords": {
+ "name": "Office of the Leader of the House of Lords",
+ "start": 1721
+ },
+ "office-of-the-secretary-of-state-for-scotland": {
+ "name": "Office of the Secretary of State for Scotland",
+ "start": 2018
+ },
+ "office-of-the-secretary-of-state-for-wales": {
+ "name": "Office of the Secretary of State for Wales",
+ "start": 2018
+ },
+ "prime-ministers-office-10-downing-street": {
+ "name": "Prime Minister's Office, 10 Downing Street",
+ "start": 2022
+ },
+ "scotland-office": {
+ "name": "Scotland Office",
+ "start": 1999,
+ "end": 2018
+ },
+ "uk-export-finance": {
+ "name": "UK Export Finance",
+ "start": 1919
+ },
+ "uk-trade-investment": {
+ "name": "UK Trade and Investment",
+ "start": 2003,
+ "end": 2016
+ },
+ "wales-office": {
+ "name": "Wales Office",
+ "start": 1999,
+ "end": 2018
+ }
+} %}
+
+{% block content %}
+
+
+
+ Organisation colours
+
+
Only includes organisations and departments that existed from 2010 onwards.
+
+ {%- for key, data in organisations %}
+
+
{{ data.name }}
+
{{ data.start | default("????") }}–{{ data.end }}
+
+ {%- endfor %}
+
+
+{% endblock %}
diff --git a/packages/govuk-frontend/src/govuk/helpers/_colour.scss b/packages/govuk-frontend/src/govuk/helpers/_colour.scss
index 5672b84b29..fc17e9fa9b 100644
--- a/packages/govuk-frontend/src/govuk/helpers/_colour.scss
+++ b/packages/govuk-frontend/src/govuk/helpers/_colour.scss
@@ -42,25 +42,61 @@
/// Get the colour for a government organisation
///
/// @param {String} $organisation - Organisation name, lowercase, hyphenated
-/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
-/// colour will be returned which meets contrast requirements . If you want to
-/// use the non-websafe version you can set this to `false` but your should
-/// ensure that you still meets contrast requirements for accessibility - for
-/// example, do not use the non-websafe version for text.
+/// @param {Boolean} $websafe - Deprecated. Use $contrast-safe instead.
+/// @param {Boolean} $contrast-safe [true] - By default a version of the colour
+/// will be returned which has a minimum 4.5:1 contrast ratio when used with
+/// white, as per the WCAG 2.1 Level AA guidelines. If you want to use the
+/// non-contrast safe version you can set this to `false` but your should
+/// ensure that you still meets contrast requirements for accessibility -
+/// for example, do not use the non-contrast safe version for text.
///
/// @return {Colour} Representation of colour for organisation
/// @throw if `$organisation` is not a known organisation
/// @access public
-@function govuk-organisation-colour($organisation, $websafe: true) {
+@function govuk-organisation-colour($organisation, $websafe: null, $contrast-safe: true) {
+ // Check if the $organisation exists in the aliases map. If so, change the
+ // value of $organisation to the aliased value.
+ @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {
+ $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);
+ }
+
+ // Check to see if the organisation exists
@if not map-has-key($govuk-colours-organisations, $organisation) {
@error "Unknown organisation `#{$organisation}`";
}
+ // Output a warning if $websafe is set.
+ @if $websafe and not index($govuk-suppressed-warnings, "organisation-colour-websafe-param") {
+ @warn _warning-text("organisation-colour-websafe-param",
+ "The `$websafe` parameter of `govuk-organisation-colour` has been " +
+ "renamed to `$contrast-safe`. The old parameter name will be removed in " +
+ "the next major version."
+ );
+ }
+
$org-colour: map-get($govuk-colours-organisations, $organisation);
- @if $websafe and map-has-key($org-colour, colour-websafe) {
- @return map-get($org-colour, colour-websafe);
+ @if map-has-key($org-colour, deprecation-message) and not index($govuk-suppressed-warnings, "organisation-colours") {
+ @warn _warning-text(
+ "organisation-colours",
+ map-get($org-colour, deprecation-message)
+ );
+ }
+
+ // If the $websafe parameter is being used (it has been explicitly set as true
+ // or false), assume the user hasn't updated to use $contrast-safe yet and map
+ // the old parameter's value onto the new parameter.
+ @if type-of($websafe) != "null" {
+ $contrast-safe: $websafe;
+ }
+
+ // Determine the contrast-safe key to use depending on whether it's the new
+ // palette or the legacy palette
+ $safe-key: if($govuk-new-organisation-colours, "contrast-safe", "colour-websafe");
+
+ @if $contrast-safe and map-has-key($org-colour, $safe-key) {
+ @return map-get($org-colour, $safe-key);
} @else {
@return map-get($org-colour, colour);
}
diff --git a/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js b/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js
index a1fac2e1a1..beaefdf3ca 100644
--- a/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js
+++ b/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js
@@ -103,20 +103,25 @@ describe('@function govuk-colour', () => {
describe('@function govuk-organisation-colour', () => {
const sassBootstrap = `
+ $govuk-new-organisation-colours: true;
$govuk-colours-organisations: (
'floo-network-authority': (
colour: #EC22FF,
- colour-websafe: #9A00A8
+ contrast-safe: #9A00A8
),
'broom-regulatory-control': (
colour: #A81223
+ ),
+ 'house-elf-equalities-office': (
+ colour: #786999,
+ deprecation-message: 'The House Elf Equalities Office was disbanded in 2007.'
)
);
@import "helpers/colour";
`
- it('returns the websafe colour for a given organisation by default', async () => {
+ it('returns the contrast-safe colour for a given organisation by default', async () => {
const sass = `
${sassBootstrap}
@@ -134,7 +139,7 @@ describe('@function govuk-organisation-colour', () => {
})
})
- it('falls back to the default colour if a websafe colour is not explicitly defined', async () => {
+ it('falls back to the default colour if a contrast-safe colour is not explicitly defined', async () => {
const sass = `
${sassBootstrap}
@@ -152,7 +157,25 @@ describe('@function govuk-organisation-colour', () => {
})
})
- it('can be overridden to return the non-websafe colour', async () => {
+ it('can be overridden to return the non-contrast-safe colour ($contrast-safe parameter)', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ border-color: govuk-organisation-colour('floo-network-authority', $contrast-safe: false);
+ }
+ `
+
+ await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
+ css: outdent`
+ .foo {
+ border-color: #EC22FF;
+ }
+ `
+ })
+ })
+
+ it('can be overridden to return the non-contrast-safe colour (deprecated $websafe parameter)', async () => {
const sass = `
${sassBootstrap}
@@ -170,6 +193,26 @@ describe('@function govuk-organisation-colour', () => {
})
})
+ it('outputs a warning if the organisation has been deprecated', async () => {
+ const sass = `
+ ${sassBootstrap}
+
+ .foo {
+ color: govuk-organisation-colour('house-elf-equalities-office');
+ }
+ `
+
+ await compileSassString(sass, sassConfig)
+
+ // Expect our mocked @warn function to have been called once with a single
+ // argument, which should be the deprecation notice
+ expect(mockWarnFunction.mock.calls[0]).toEqual(
+ expect.arrayContaining([
+ 'The House Elf Equalities Office was disbanded in 2007. To silence this warning, update $govuk-suppressed-warnings with key: "organisation-colours"'
+ ])
+ )
+ })
+
it('throws an error if a non-existent organisation is requested', async () => {
const sass = `
${sassBootstrap}
@@ -183,4 +226,98 @@ describe('@function govuk-organisation-colour', () => {
'Unknown organisation `muggle-born-registration-commission`'
)
})
+
+ it('aliases renamed organisation keys to the equivalent key', async () => {
+ const sass = `
+ $govuk-colours-organisations: (
+ 'department-for-business-trade': (
+ colour: #e52d13
+ )
+ );
+
+ @import "helpers/colour";
+
+ .foo {
+ color: govuk-organisation-colour('department-for-business-and-trade');
+ }
+ `
+
+ await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
+ css: outdent`
+ .foo {
+ color: #e52d13;
+ }
+ `
+ })
+ })
+
+ describe('legacy palette', () => {
+ const sassBootstrapLegacy = `
+ $govuk-colours-organisations: (
+ 'floo-network-authority': (
+ colour: #EC22FF,
+ colour-websafe: #9A00A8
+ ),
+ 'broom-regulatory-control': (
+ colour: #A81223
+ )
+ );
+
+ @import "helpers/colour";
+ `
+
+ it('returns the contrast-safe colour for a given organisation by default', async () => {
+ const sass = `
+ ${sassBootstrapLegacy}
+
+ .foo {
+ color: govuk-organisation-colour('floo-network-authority');
+ }
+ `
+
+ await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
+ css: outdent`
+ .foo {
+ color: #9A00A8;
+ }
+ `
+ })
+ })
+
+ it('falls back to the default colour if a contrast-safe colour is not explicitly defined', async () => {
+ const sass = `
+ ${sassBootstrapLegacy}
+
+ .foo {
+ color: govuk-organisation-colour('broom-regulatory-control');
+ }
+ `
+
+ await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
+ css: outdent`
+ .foo {
+ color: #A81223;
+ }
+ `
+ })
+ })
+
+ it('can be overridden to return the non-contrast-safe colour ($websafe parameter)', async () => {
+ const sass = `
+ ${sassBootstrapLegacy}
+
+ .foo {
+ border-color: govuk-organisation-colour('floo-network-authority', $websafe: false);
+ }
+ `
+
+ await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
+ css: outdent`
+ .foo {
+ border-color: #EC22FF;
+ }
+ `
+ })
+ })
+ })
})
diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss b/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss
index cf3193a7bc..779f671409 100644
--- a/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss
+++ b/packages/govuk-frontend/src/govuk/settings/_colours-organisations.scss
@@ -2,19 +2,213 @@
/// @group settings/colours
////
-/// Organisation colours
+/// Feature flag for updated organisation list and colours
+///
+/// When set to true, $govuk-colours-organisations will use the new
+/// organisation list and colour selection.
+///
+/// Should be removed in 6.0.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-new-organisation-colours: false !default;
+
+/// Current organisation colours
///
/// @type Map
///
/// @prop $organisation.colour - Colour for the given `$organisation`
-/// @prop $organisation.colour-websafe - Websafe colour for the given
-/// `$organisation`. We use `websafe` to mean strong enough contrast against
-/// white to be used for copy and meet the AAA (large text) and AA (smaller
+/// @prop $organisation.contrast-safe - 'Contrast safe' colour for the given
+/// `$organisation`. This colour has at least a 4.5:1 contrast against
+/// white, to be used for copy and meet the AAA (large text) and AA (smaller
/// copy) WCAG guidelines.
+/// @prop $organisation.deprecation-message - Marks this organisation as
+/// deprecated (usually because it has ceased to exist). Value is the
+/// deprecation message output to the terminal when compiling.
///
-/// @access public
+/// @access private
-$govuk-colours-organisations: (
+$_govuk-organisation-colours: (
+ "attorney-generals-office": (
+ colour: #a91c8e
+ ),
+ "cabinet-office": (
+ colour: #0056b8
+ ),
+ "civil-service": (
+ colour: #b2292e
+ ),
+ "department-for-business-trade": (
+ colour: #e52d13,
+ contrast-safe: #e02c13
+ ),
+ "department-for-business-energy-industrial-strategy": (
+ colour: #003479,
+ deprecation-message:
+ "`department-for-business-energy-industrial-strategy` was dissolved in 2023. It was replaced by `department-for-business-trade`, `department-for-energy-security-net-zero` and `department-science-innovation-technology`."
+ ),
+ "department-for-business-innovation-skills": (
+ colour: #003479,
+ deprecation-message:
+ "`department-for-business-innovation-skills` became `department-for-business-energy-industrial-strategy` in 2016. As of 2023, it is equivalent to `department-for-business-trade` or `department-science-innovation-technology`."
+ ),
+ "department-for-communities-local-government": (
+ colour: #009999,
+ contrast-safe: #008080,
+ deprecation-message:
+ "`department-for-communities-local-government` became `ministry-of-housing-communities-local-government` in 2018."
+ ),
+ "department-for-culture-media-sport": (
+ colour: #d6006e
+ ),
+ "department-for-digital-culture-media-sport": (
+ colour: #d40072,
+ deprecation-message:
+ "`department-for-digital-culture-media-sport` became `department-for-culture-media-sport` in 2023."
+ ),
+ "department-for-education": (
+ colour: #003764
+ ),
+ "department-for-energy-security-net-zero": (
+ colour: #00a33b,
+ contrast-safe: #00852f
+ ),
+ "department-for-environment-food-rural-affairs": (
+ colour: #00af43,
+ contrast-safe: #008733
+ ),
+ "department-for-exiting-the-european-union": (
+ colour: #009fe3,
+ contrast-safe: #007db6,
+ deprecation-message: "`department-for-exiting-the-european-union` was dissolved in 2020."
+ ),
+ "department-for-international-development": (
+ colour: #002878,
+ deprecation-message:
+ "`department-for-international-development` was merged into `foreign-commonwealth-development-office` in 2020."
+ ),
+ "department-for-international-trade": (
+ colour: #cf102d,
+ deprecation-message: "`department-for-international-trade` was merged into `department-for-business-trade` in 2023."
+ ),
+ "department-for-levelling-up-housing-communities": (
+ colour: #012169,
+ deprecation-message:
+ "`department-for-levelling-up-housing-communities` was renamed to `ministry-of-housing-communities-local-government` in 2024."
+ ),
+ "department-for-science-innovation-technology": (
+ colour: #00f9f8,
+ contrast-safe: #008180
+ ),
+ "department-for-transport": (
+ colour: #006853
+ ),
+ "department-for-work-pensions": (
+ colour: #00bcb5,
+ contrast-safe: #00857e
+ ),
+ "department-of-energy-climate-change": (
+ colour: #009ddb,
+ contrast-safe: #007db3,
+ deprecation-message:
+ "`department-of-energy-climate-change` was merged into `department-for-business-energy-industrial-strategy` in 2016. As of 2023, it is equivalent to `department-for-energy-security-net-zero`."
+ ),
+ "department-of-health": (
+ colour: #00ad93,
+ contrast-safe: #008573,
+ deprecation-message: "`department-of-health` became `department-of-health-social-care` in 2018."
+ ),
+ "department-of-health-social-care": (
+ colour: #00a990,
+ contrast-safe: #008674
+ ),
+ "foreign-commonwealth-office": (
+ colour: #003e74,
+ deprecation-message: "`foreign-commonwealth-office` became `foreign-commonwealth-development-office` in 2018."
+ ),
+ "foreign-commonwealth-development-office": (
+ colour: #002269
+ ),
+ "government-equalities-office": (
+ colour: #0056b8,
+ deprecation-message: "`government-equalities-office` is deprecated. Use `cabinet-office` instead."
+ ),
+ "hm-government": (
+ colour: #266ebc
+ ),
+ "hm-revenue-customs": (
+ colour: #008476
+ ),
+ "hm-treasury": (
+ colour: #b2292e
+ ),
+ "home-office": (
+ colour: #732282
+ ),
+ "ministry-of-defence": (
+ colour: #532a45
+ ),
+ "ministry-of-housing-communities-local-government": (
+ colour: #00625e
+ ),
+ "ministry-of-justice": (
+ colour: #000000
+ ),
+ "northern-ireland-office": (
+ colour: #00205c
+ ),
+ "office-of-the-advocate-general-for-scotland": (
+ colour: #00205c
+ ),
+ "office-of-the-leader-of-the-house-of-commons": (
+ colour: #497629
+ ),
+ "office-of-the-leader-of-the-house-of-lords": (
+ colour: #9c182f
+ ),
+ "office-of-the-secretary-of-state-for-scotland": (
+ colour: #00205c
+ ),
+ "office-of-the-secretary-of-state-for-wales": (
+ colour: #a8353a
+ ),
+ "prime-ministers-office-10-downing-street": (
+ colour: #0b0c0c
+ ),
+ "scotland-office": (
+ colour: #002663,
+ deprecation-message: "`scotland-office` became `office-of-the-secretary-of-state-for-scotland` in 2018."
+ ),
+ "uk-export-finance": (
+ colour: #cf102d
+ ),
+ "uk-trade-investment": (
+ colour: #c80651,
+ deprecation-message:
+ "`uk-trade-investment` became `department-for-international-trade` in 2016. As of 2023, it is equivalent to `department-for-business-trade`."
+ ),
+ "wales-office": (
+ colour: #a33038,
+ deprecation-message: "`wales-office` became `office-of-the-secretary-of-state-for-wales` in 2018."
+ )
+);
+
+/// Legacy organisation colours
+///
+/// These are the colours included with Frontend prior to 5.3.0. They will be
+/// removed in a future major version of Frontend.
+///
+/// @type Map
+///
+/// @prop $organisation.colour - Colour for the given `$organisation`
+/// @prop $organisation.colour-websafe - Optional alternative shade of the
+/// organisation colour. Despite the name, is not guaranteed to be websafe
+/// nor provide better contrast than the base colour.
+///
+/// @access private
+
+$_govuk-legacy-organisation-colours: (
"attorney-generals-office": (
colour: #9f1888,
colour-websafe: #a03a88
@@ -30,7 +224,7 @@ $govuk-colours-organisations: (
colour: #003479,
colour-websafe: #347da4
),
- "department-for-communities-and-local-government": (
+ "department-for-communities-local-government": (
colour: #009999,
colour-websafe: #37836e
),
@@ -54,11 +248,11 @@ $govuk-colours-organisations: (
colour: #cf102d,
colour-websafe: #005ea5
),
- "department-for-business-and-trade": (
+ "department-for-business-trade": (
colour: #cf102d,
colour-websafe: #005ea5
),
- "department-for-levelling-up-housing-and-communities": (
+ "department-for-levelling-up-housing-communities": (
colour: #012169
),
"department-for-transport": (
@@ -143,4 +337,36 @@ $govuk-colours-organisations: (
colour: #a33038,
colour-websafe: #7a242a
)
+);
+
+/// Set public organisation colours variable to one of the two maps.
+/// Users can also pass their own map to this to override it entirely.
+///
+/// @type Map
+/// @access public
+
+$govuk-colours-organisations: if(
+ $govuk-new-organisation-colours,
+ $_govuk-organisation-colours,
+ $_govuk-legacy-organisation-colours
) !default;
+
+/// Organisation colour aliases
+///
+/// Some organisations have been renamed within our code over time. Here we
+/// map the prior key to the new equivalent key.
+///
+/// Note: This is for internal renames only. If a department has changed name
+/// or brand colour in a machinery of government change, it should be added to
+/// $govuk-colours-organisations as a new entry with any superseded
+/// organisations marked deprecated.
+///
+/// @type Map
+///
+/// @access private
+
+$_govuk-colours-organisations-aliases: (
+ "department-for-business-and-trade": "department-for-business-trade",
+ "department-for-communities-and-local-government": "department-for-communities-local-government",
+ "department-for-levelling-up-housing-and-communities": "department-for-levelling-up-housing-communities"
+);
diff --git a/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js b/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js
index 5bcf9e2407..b3ae3c4979 100644
--- a/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js
+++ b/packages/govuk-frontend/src/govuk/settings/colours.unit.test.js
@@ -1,7 +1,36 @@
const { compileSassString } = require('@govuk-frontend/helpers/tests')
describe('Organisation colours', () => {
- it('should define websafe colours that meet contrast requirements', async () => {
+ it('should define contrast-safe colours that meet contrast requirements', async () => {
+ const sass = `
+ $govuk-new-organisation-colours: true;
+
+ @import "settings/colours-palette";
+ @import "settings/colours-organisations";
+ @import "settings/colours-applied";
+ @import "helpers/colour";
+
+ @import "sass-color-helpers/stylesheets/color-helpers";
+
+ $minimum-contrast: 4.5;
+
+ @each $organisation in map-keys($govuk-colours-organisations) {
+
+ $colour: govuk-organisation-colour($organisation);
+ $contrast: ch-color-contrast($govuk-body-background-colour, $colour);
+
+ @if ($contrast < $minimum-contrast) {
+ @error "Contrast ratio for #{$organisation} too low."
+ + " #{$colour} on #{$govuk-body-background-colour} has a contrast of: #{$contrast}."
+ + " Must be higher than #{$minimum-contrast} for WCAG AA support.";
+ }
+ }
+ `
+
+ await expect(compileSassString(sass)).resolves
+ })
+
+ it('should define websafe colours that meet contrast requirements (legacy colours)', async () => {
const sass = `
@import "settings/colours-palette";
@import "settings/colours-organisations";