From 3cd5a663c34d21a71e0238f0de14cbd656237e4f Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Wed, 26 Apr 2023 16:35:25 +0100
Subject: [PATCH 1/2] Add inverse button styles

Port the inverse button styles from the GaaP product page repository into Frontend
---
 src/govuk/components/button/_index.scss | 44 +++++++++++++++++++++++--
 src/govuk/components/button/button.yaml | 27 +++++++++++++++
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss
index cf0ea025e5..3bff0d993b 100644
--- a/src/govuk/components/button/_index.scss
+++ b/src/govuk/components/button/_index.scss
@@ -18,21 +18,27 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
+  $govuk-button-text-colour: $govuk-button-text-colour;
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
-  $govuk-button-text-colour: $govuk-button-text-colour;
 
   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
-  $govuk-secondary-button-text-colour: govuk-colour("black");
 
   // Warning button variables
   $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-text-colour: govuk-colour("white");
   $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
   $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
-  $govuk-warning-button-text-colour: govuk-colour("white");
+
+  // Inverse button variables
+  $govuk-inverse-button-colour: govuk-colour("white");
+  $govuk-inverse-button-text-colour: govuk-colour("blue");
+  $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%);
 
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
@@ -251,6 +257,38 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     }
   }
 
+  .govuk-button--inverse {
+    background-color: $govuk-inverse-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-inverse-button-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include _govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-inverse-button-text-colour;
+      }
+    }
+
+    &:hover {
+      background-color: $govuk-inverse-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-inverse-button-colour;
+      }
+    }
+  }
+
   .govuk-button--start {
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
diff --git a/src/govuk/components/button/button.yaml b/src/govuk/components/button/button.yaml
index 55c359e059..8b166bea1e 100644
--- a/src/govuk/components/button/button.yaml
+++ b/src/govuk/components/button/button.yaml
@@ -148,6 +148,33 @@ examples:
       text: Warning button
       href: '/'
       classes: govuk-button--warning
+  - name: Inverse
+    description: A button that appears on dark backgrounds
+    data:
+      name: Inverse
+      text: Inverse button
+      classes: govuk-button--inverse
+  - name: Inverse disabled
+    data:
+      name: Inverse
+      text: Inverse button disabled
+      classes: govuk-button--inverse
+      disabled: true
+  - name: Inverse link
+    description: A link button for actions that appear on dark backgrounds
+    data:
+      name: Inverse
+      text: Inverse button
+      href: '/'
+      classes: govuk-button--inverse
+  - name: Inverse start button
+    description: A start button that appears on dark backgrounds
+    data:
+      name: Inverse
+      text: Inverse start button
+      href: '/'
+      classes: govuk-button--inverse
+      isStartButton: true
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: attributes

From 31cec7c764b30a4a8b8eae7d0ecb7ad69b450baa Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Wed, 26 Apr 2023 16:57:57 +0100
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af38452a0b..4d9f66c7a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### New features
+
+#### Added inverse modifier for buttons on dark backgrounds
+
+You can now style buttons on dark backgrounds to have a white background colour by adding the `govuk-button--inverse` class.
+
+This change was made in [pull request #3556: Add inverse button styles](https://github.com/alphagov/govuk-frontend/pull/3556).
+
 ### Breaking changes
 
 #### Check that disabled buttons work as expected