From c14f2c5171893d430e34b00368a035fbd05f6cc4 Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Fri, 4 Aug 2023 09:43:21 +0100
Subject: [PATCH] Add ability to customise inverse button colours

---
 CHANGELOG.md                                  | 33 +++++++++++++++++++
 .../src/govuk/components/button/_index.scss   | 18 ++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e3a58c595..1fee33a4df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,6 +55,24 @@ These styles can be used in your own code by including the `govuk-focused-box` S
 
 This change was made in [pull request #3819: Add linked image focus style](https://github.com/alphagov/govuk-frontend/pull/3819).
 
+#### Customise inverse button colours
+
+For non-GOV.UK branded websites, you can now change the colours of inverse buttons — buttons intended for use on dark backgrounds.
+
+To change the inverse button's background colour, set the `$govuk-inverse-button-background-colour` Sass variable.
+
+To change the inverse button's text colour, set the `$govuk-inverse-button-text-colour` Sass variable.
+
+```scss
+@import "node_modules/govuk-frontend/govuk/base";
+
+$govuk-inverse-button-background-colour: govuk-colour("yellow");
+$govuk-inverse-button-text-colour: govuk-colour("black");
+@import "node_modules/govuk-frontend/govuk/components/button/index";
+```
+
+This change was made in [pull request #4043: Add ability to customise inverse button colours](https://github.com/alphagov/govuk-frontend/pull/4043).
+
 ### Breaking changes
 
 You must make the following changes when you migrate to this release, or your service might break.
@@ -312,6 +330,21 @@ These changes were introduced in:
 - [pull request #3570: Remove IE8-10 JavaScript polyfills, helpers, config](https://github.com/alphagov/govuk-frontend/pull/3570)
 - [pull request #3720: Remove IE11 vendor polyfills](https://github.com/alphagov/govuk-frontend/pull/3720)
 
+#### Check that inverse buttons still look as expected
+
+Inverse button components now use the `$govuk-brand-colour` setting to determine the button's text colour and the button's background tint when hovered or activated. The button will only look different if `$govuk-brand-colour` has been changed from the default.
+
+You can restore the previous blue colour by setting `$govuk-inverse-button-text-colour` before importing the button component's Sass.
+
+```scss
+@import "node_modules/govuk-frontend/govuk/base";
+
+$govuk-inverse-button-text-colour: govuk-colour("blue");
+@import "node_modules/govuk-frontend/govuk/components/button/index";
+```
+
+This change was made in [pull request #4043: Add ability to customise inverse button colours](https://github.com/alphagov/govuk-frontend/pull/4043).
+
 ### Suggested changes
 
 #### Update the Pagination component's default `aria-label`
diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss
index 4e9801352a..dc1b137c0c 100644
--- a/packages/govuk-frontend/src/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/button/_index.scss
@@ -16,6 +16,20 @@ $govuk-button-background-colour: govuk-colour("green") !default;
 
 $govuk-button-text-colour: govuk-colour("white") !default;
 
+/// Inverted button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-background-colour: govuk-colour("white") !default;
+
+/// Inverted button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-text-colour: $govuk-brand-colour !default;
+
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
   $govuk-button-text-colour: $govuk-button-text-colour;
@@ -35,8 +49,8 @@ $govuk-button-text-colour: govuk-colour("white") !default;
   $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
 
   // Inverse button variables
-  $govuk-inverse-button-colour: govuk-colour("white");
-  $govuk-inverse-button-text-colour: govuk-colour("blue");
+  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
+  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
   $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
   $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);