Merge pull request #6335 from alphagov/bk-buttons-colours

Update button colours to use govuk_palette

Author: domoscargin

packages/govuk-frontend/src/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