Update button colours to use govuk_palette

[domoscargin]

Maps all colours in the button component to one of the colours or colour variants in the new _govuk-palette, based on the mapping document.

Closes #6328

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 6f82854c0..d50977fb6 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -1895,7 +1895,7 @@
     border-radius: 0;
     color: #fff;
     background-color: #11875a;
-    box-shadow: 0 2px 0 #073624;
+    box-shadow: 0 2px 0 #09442d;
     text-align: center;
     vertical-align: top;
     cursor: pointer;
@@ -1943,7 +1943,7 @@
 }
 
 .govuk-button:hover {
-    background-color: #0e6c48
+    background-color: #0d6544
 }
 
 .govuk-button:active {
@@ -1989,12 +1989,12 @@
 
 .govuk-button[disabled]:active {
     top: 0;
-    box-shadow: 0 2px 0 #073624
+    box-shadow: 0 2px 0 #09442d
 }
 
 .govuk-button--secondary {
     background-color: #f3f3f3;
-    box-shadow: 0 2px 0 #929292
+    box-shadow: 0 2px 0 #858686
 }
 
 .govuk-button--secondary,
@@ -2006,7 +2006,7 @@
 }
 
 .govuk-button--secondary:hover {
-    background-color: #dbdbdb
+    background-color: #cecece
 }
 
 .govuk-button--secondary:hover[disabled] {
@@ -2015,7 +2015,7 @@
 
 .govuk-button--warning {
     background-color: #ca3535;
-    box-shadow: 0 2px 0 #511515
+    box-shadow: 0 2px 0 #651b1b
 }
 
 .govuk-button--warning,
@@ -2027,7 +2027,7 @@
 }
 
 .govuk-button--warning:hover {
-    background-color: #a22a2a
+    background-color: #982828
 }
 
 .govuk-button--warning:hover[disabled] {
@@ -2036,7 +2036,7 @@
 
 .govuk-button--inverse {
     background-color: #fff;
-    box-shadow: 0 2px 0 #144e81
+    box-shadow: 0 2px 0 #0f385c
 }
 
 .govuk-button--inverse,
@@ -2048,7 +2048,7 @@
 }
 
 .govuk-button--inverse:hover {
-    background-color: #e8f1f8
+    background-color: #f4f8fb
 }
 
 .govuk-button--inverse:hover[disabled] {

---

Action run for 91d412d

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 671c7ba12..57965e0da 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -33,26 +33,26 @@ $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;
-  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
-  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
+  $govuk-button-hover-colour: govuk-colour("green", $variant: "shade-25");
+  $govuk-button-shadow-colour: govuk-colour("green", $variant: "shade-50");
 
   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("black", $variant: "tint-95");
   $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-hover-colour: govuk-colour("black", $variant: "tint-80");
+  $govuk-secondary-button-shadow-colour: govuk-colour("black", $variant: "tint-50");
 
   // 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-hover-colour: govuk-colour("red", $variant: "shade-25");
+  $govuk-warning-button-shadow-colour: govuk-colour("red", $variant: "shade-50");
 
   // Inverse button variables
   $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%);
+  $govuk-inverse-button-hover-colour: govuk-colour("blue", $variant: "tint-95");
+  $govuk-inverse-button-shadow-colour: govuk-colour("blue", $variant: "shade-50");
 
   // 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

---

Action run for 91d412d

[github-actions]

📋 Stats

No changes to any distributed file sizes!

---

Action run for 91d412d

[owenatgov]

Code looks grand. Worth getting a designer to conform it's all good to be belt and braces.

[domoscargin]

Percy changes look fine to me, but I'll let somebody else approve.

[owenatgov]

Ah whoops! Approved. A bit weird that it flagged box shadow but not anything else.

[domoscargin]

It's because we're not checking any button states with Percy (we used to, but we got rid of 'em when we cleaned up the review app examples).

I wonder if we should add another "states" page and test that? (similar to the form control states example: https://govuk-frontend-review.herokuapp.com/examples/form-controls-states)

[mia-allers-gds]

Button colours look correct. Green and red buttons are borderline in terms of visual legibility, could we add a shadow to the text to increase contrast?

[owenatgov]

We chatted about this off-github and made a separate issue to cover @mia-allers-gds's point on button legibility #6343