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";