Merge pull request #1996 from nhsuk/target-hover-colours

[v10] Update hover colour for task list and pagination

Author: colinrotherham

CHANGELOG.md

@@ -291,6 +291,7 @@ You can still use `nhsuk-print-colour` and `nhsuk-print-hide` but we'll remove t
 
 - [#1942: Update `nhsuk-spacing()` to add missing `$adjustment` and `$important` params](https://github.com/nhsuk/nhsuk-frontend/pull/1942)
 - [#1986: Update `nhsuk-font-monospace` font size to better match body text](https://github.com/nhsuk/nhsuk-frontend/pull/1986/changes)
+- [#1996: Update hover colour for task list and pagination](https://github.com/nhsuk/nhsuk-frontend/pull/1996)
 - [#1997: Preserve conditionally revealed content margins when JavaScript is not supported](https://github.com/nhsuk/nhsuk-frontend/pull/1997)
 
 ## 10.5.2 - 8 June 2026

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/tables/fixtures.mjs

@@ -9,9 +9,7 @@ import { components } from '#lib'
  */
 export const variants = [
   {
-    options: {
-      layout: 'background-white'
-    }
+    // Regular variant
   },
   {
     description: 'reverse',

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

@@ -10,9 +10,8 @@
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
 ////
 
-// 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;
+$nhsuk-task-list-hover-border-colour: nhsuk-colour("grey-3");
 
 // @deprecated To be removed in v11.0
 $nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;
@@ -42,20 +41,28 @@ $nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;
     padding-top: nhsuk-spacing(2) + 4px;
     padding-bottom: nhsuk-spacing(2) + 4px;
 
-    border-bottom: 1px solid $nhsuk-border-colour;
+    border: 1px solid $nhsuk-border-colour;
+    border-width: 0 0 1px;
   }
 
   .nhsuk-task-list__item:first-child {
-    border-top: 1px solid $nhsuk-border-colour;
+    border-top-width: 1px;
   }
 
   // This class is added to the <li> elements where the task name is a link.
   // The background hover colour is added to help indicate that the whole row is clickable, rather
   // than just the visible link text.
   .nhsuk-task-list__item--with-link:hover {
+    margin-top: -1px;
+    border-width: 1px 0;
+    border-color: $nhsuk-task-list-hover-border-colour;
     background: $nhsuk-task-list-hover-colour;
   }
 
+  .nhsuk-task-list__item--with-link:first-child:hover {
+    margin-top: 0;
+  }
+
   .nhsuk-task-list__name-and-hint {
     display: table-cell;
     color: $nhsuk-text-colour;

packages/nhsuk-frontend/src/nhsuk/core/core.unit.test.mjs

@@ -56,6 +56,9 @@ describe('Core', () => {
         --nhsuk-reverse-border-colour: #337ec6;
         --nhsuk-input-border-colour: #4c6272;
         --nhsuk-hover-colour: #aeb7bd;
+        --nhsuk-reverse-hover-colour: #004b93;
+        --nhsuk-target-hover-colour: #e0e4e6;
+        --nhsuk-reverse-target-hover-colour: #0055a6;
         --nhsuk-input-background-colour: white;
         --nhsuk-code-colour: #d5281b;
         --nhsuk-link-colour: #005eb8;

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

@@ -143,6 +143,31 @@ $nhsuk-input-border-colour: nhsuk-colour("grey-1") !default;
 
 $nhsuk-hover-colour: nhsuk-colour("grey-3") !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: nhsuk-tint(nhsuk-colour("grey-4"), 20%) !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, 10%) !default;
+
 /// Form element background colour
 ///
 /// @type Colour

packages/nhsuk-frontend/src/nhsuk/core/tools/_links.scss

@@ -104,6 +104,22 @@
       color: VisitedText;
     }
   }
+
+  // Work around SVGs not inheriting color from `:visited` links in Safari
+  // (https://bugs.webkit.org/show_bug.cgi?id=244025)
+  &:visited .nhsuk-icon {
+    fill: $link-visited-colour;
+
+    @supports (forced-color-adjust: auto) {
+      fill: currentcolor;
+    }
+  }
+
+  &:focus .nhsuk-icon,
+  &:hover .nhsuk-icon,
+  &:active .nhsuk-icon {
+    fill: currentcolor;
+  }
 }
 
 /// Default link hover only styling

packages/nhsuk-frontend/src/nhsuk/core/tools/_shape-arrow.scss

@@ -60,19 +60,19 @@
   @if $direction == "up" {
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
     border-width: 0 $perpendicular $height;
-    border-bottom-color: inherit; // 2
+    border-bottom-color: currentcolor; // 2
   } @else if $direction == "right" {
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
     border-width: $perpendicular 0 $perpendicular $height;
-    border-left-color: inherit; // 2
+    border-left-color: currentcolor; // 2
   } @else if $direction == "down" {
     clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
     border-width: $height $perpendicular 0 $perpendicular;
-    border-top-color: inherit; // 2
+    border-top-color: currentcolor; // 2
   } @else if $direction == "left" {
     clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
     border-width: $perpendicular $height $perpendicular 0;
-    border-right-color: inherit; // 2
+    border-right-color: currentcolor; // 2
   } @else {
     @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
   }