Update input hover and add reverse and target hover, apply to pagination and task list

Author: anandamaryon1

packages/nhsuk-frontend/src/nhsuk/components/pagination/_index.scss

@@ -167,7 +167,7 @@
     @include nhsuk-font-size(19);
 
     &:not(:focus):hover {
-      background-color: nhsuk-colour("grey-4");
+      background-color: $nhsuk-target-hover-colour;
     }
   }
 

packages/nhsuk-frontend/src/nhsuk/components/task-list/_index.scss

@@ -12,7 +12,7 @@
 
 // NHS pages have a grey background, so we need a slightly darker colour for the hover
 // This produces 1.1:1 contrast, the same as GOV.UK’s
-$nhsuk-task-list-hover-colour: nhsuk-colour-compatible(color.adjust(nhsuk-colour("grey-5"), $lightness: -6%));
+$nhsuk-task-list-hover-colour: $nhsuk-target-hover-colour;
 
 // @deprecated To be removed in v11.0
 $nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;

packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss

@@ -141,7 +141,32 @@ $nhsuk-input-border-colour: nhsuk-colour("grey-1") !default;
 ///
 /// @type Colour
 
-$nhsuk-hover-colour: nhsuk-colour("grey-3") !default;
+$nhsuk-hover-colour: rgba(nhsuk-colour("grey-3"), 0.5) !default;
+
+/// Reverse input hover colour
+///
+/// Used for hover states on form controls, on reverse backgrounds
+///
+/// @type Colour
+
+$nhsuk-reverse-hover-colour: nhsuk-shade($nhsuk-brand-colour, 20%) !default;
+
+/// Target area hover colour
+///
+/// Used for hover states on transparent areas used to expand target areas
+///
+/// @type Colour
+
+$nhsuk-target-hover-colour: rgba(nhsuk-colour("grey-3"), 0.25) !default;
+
+/// Reverse target area hover colour
+///
+/// Used for hover states on transparent areas used to expand target areas, 
+/// on reverse backgrounds
+///
+/// @type Colour
+
+$nhsuk-reverse-target-hover-colour: nhsuk-shade($nhsuk-brand-colour, 20%) !default;
 
 /// Form element background colour
 ///