Merge pull request #1966 from nhsuk/port-released-v10

Port released v10.5.2 into v11

Author: colinrotherham

CHANGELOG.md

@@ -559,6 +559,51 @@ We've changed the hover and active icon colour for the action link component so
 
 This change was introduced in [pull request #1802: Change action link icon colour on hover and active](https://github.com/nhsuk/nhsuk-frontend/pull/1802).
 
+## 10.5.2 - 8 June 2026
+
+Note: This release was created from the `support/10.x` branch.
+
+### :wastebasket: **Deprecated features**
+
+#### Rename Sass mixins for font weights
+
+We've renamed Sass mixins for font weights. You can still use the previous names but we'll remove them in a future breaking release.
+
+If you use Sass and you've used the following Sass mixins:
+
+- replace `nhsuk-typography-weight-normal` with `nhsuk-font-weight-normal`
+- replace `nhsuk-typography-weight-bold` with `nhsuk-font-weight-bold`
+
+```patch
+  .app-component {
+    display: block;
+-   @include nhsuk-typography-weight-bold;
++   @include nhsuk-font-weight-bold;
+    @include nhsuk-responsive-margin(4, "bottom");
+  }
+```
+
+The previous names are deprecated and will be removed in a future release.
+
+This change was introduced in [pull request #1962: Add code and monospace font utilities](https://github.com/nhsuk/nhsuk-frontend/pull/1962).
+
+### :wrench: **Fixes**
+
+In [pull request #1962: Add code and monospace font utilities](https://github.com/nhsuk/nhsuk-frontend/pull/1962) we've added missing Sass mixins and HTML classes. You can now style codes and sequences (such as NHS numbers) by adding the `nhsuk-u-font-code` HTML class, or by including the Sass mixin for custom components:
+
+```scss
+.app-component__element {
+  @include nhsuk-font-code;
+}
+```
+
+To render text with a monospace font you can add the `nhsuk-u-font-monospace` HTML class, or by including the corresponding `nhsuk-font-monospace` Sass mixin.
+
+We've made fixes to NHS.UK frontend in the following pull requests:
+
+- [#1964: Move details component link appearance to summary text](https://github.com/nhsuk/nhsuk-frontend/pull/1964)
+- [#1965: Make sure icons always use current text colour etc](https://github.com/nhsuk/nhsuk-frontend/pull/1965)
+
 ## 10.5.1 - 3 June 2026
 
 Note: This release was created from the `support/10.x` branch.

packages/nhsuk-frontend-review/src/examples/typography.njk

@@ -115,7 +115,9 @@
 
       <h2>Typography with components</h2>
 
-      <p class="nhsuk-u-font-weight-bold">This is a paragraph using nhsuk-u-font-weight-bold. Nam quis posuere nisl, eget vulputate eros. Duis non mollis mi. Aliquam pulvinar posuere elementum. Fusce tincidunt interdum mauris non pretium.</p>
+      <p>An NHS number is a 10 digit number, like <span class="nhsuk-u-font-code nhsuk-u-nowrap">999 123 4567</span>, using <code>nhsuk-u-font-code</code> and <code>nhsuk-u-nowrap</code>.</p>
+
+      <p class="nhsuk-u-font-weight-bold">This is a paragraph using <code>nhsuk-u-font-weight-bold</code>. Nam quis posuere nisl, eget vulputate eros. Duis non mollis mi. Aliquam pulvinar posuere elementum. Fusce tincidunt interdum mauris non pretium.</p>
 
       <h3>List (Unordered list)</h3>
 

packages/nhsuk-frontend/src/nhsuk/components/action-link/_index.scss

@@ -67,7 +67,7 @@
       fill: nhsuk-colour("green");
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        fill: ButtonText;
       }
     }
   }
@@ -79,7 +79,7 @@
       fill: $nhsuk-reverse-text-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        fill: ButtonText;
       }
     }
   }

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

@@ -144,11 +144,18 @@ $nhsuk-button-search-icon-size-large: 38px;
 
     // Override high-contrast link colours to match buttons
     @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-      color: buttontext;
+      color: ButtonText;
 
       &,
       &::before {
-        border-color: buttonborder;
+        border-color: ButtonBorder;
+      }
+
+      &:not(:focus):not(:active):hover,
+      &:not(:focus):not(:active):hover::before,
+      &:not(:focus):not(:active):hover::after {
+        border-color: Highlight;
+        color: Highlight;
       }
     }
   }

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

@@ -226,7 +226,7 @@ $nhsuk-card-border-hover-colour: $nhsuk-secondary-border-colour;
       fill: $nhsuk-link-hover-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: linktext;
+        fill: LinkText;
       }
     }
 
@@ -243,7 +243,7 @@ $nhsuk-card-border-hover-colour: $nhsuk-secondary-border-colour;
       fill: $nhsuk-link-active-colour;
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: activetext;
+        fill: ActiveText;
       }
     }
   }
@@ -539,7 +539,7 @@ $nhsuk-card-border-hover-colour: $nhsuk-secondary-border-colour;
       @include nhsuk-responsive-spacing(5, "right");
 
       @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-        fill: buttontext;
+        fill: ButtonText;
       }
     }
   }

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

@@ -33,7 +33,7 @@
 
   .nhsuk-code__container,
   .nhsuk-code__content {
-    font-family: $nhsuk-code-font;
+    @include nhsuk-font-monospace;
   }
 
   .nhsuk-code__container {

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

@@ -32,6 +32,6 @@
   }
 
   .nhsuk-contents-list__current {
-    font-weight: $nhsuk-font-weight-bold;
+    @include nhsuk-font-weight-bold;
   }
 }

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

@@ -59,7 +59,7 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
 
     .nhsuk-details__summary-text {
       display: block;
-      font-weight: $nhsuk-font-weight-bold;
+      @include nhsuk-font-weight-bold;
       @include nhsuk-responsive-margin(4, "bottom");
     }
   }
@@ -77,8 +77,11 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
       position: relative; // [2]
       width: fit-content; // [1]
       padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));
+      text-decoration: none;
       cursor: pointer;
-      @include nhsuk-link-style-default;
+
+      @include nhsuk-link-style-focus;
+      @include nhsuk-top-and-bottom;
 
       &::-webkit-details-marker {
         display: none; // [4]
@@ -100,21 +103,60 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
       .nhsuk-details[open] > &::before {
         @include nhsuk-shape-arrow($direction: down, $base: 14px);
       }
+    }
 
-      .nhsuk-details--reverse &:not(:focus),
-      .nhsuk-details--reverse &:not(:focus):hover {
-        color: $nhsuk-reverse-text-colour;
-      }
+    // Style the arrow and summary text to look like a link...
+    .nhsuk-details__summary::before,
+    .nhsuk-details__summary-text {
+      color: $nhsuk-link-colour;
     }
 
     // ...but only underline the text, not the arrow
     .nhsuk-details__summary-text {
       @include nhsuk-link-decoration; // [3]
+      @include nhsuk-responsive-margin(3, "bottom");
     }
 
-    // Remove the underline when focussed to avoid duplicate borders
-    .nhsuk-details__summary:focus .nhsuk-details__summary-text {
-      text-decoration: none;
+    .nhsuk-details__summary-text:only-child {
+      margin-bottom: 0;
+    }
+
+    .nhsuk-details__summary:hover {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-link-hover-colour;
+      }
+
+      & .nhsuk-details__summary-text {
+        @include nhsuk-link-hover-decoration;
+      }
+    }
+
+    .nhsuk-details__summary:active {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-link-active-colour;
+      }
+    }
+
+    .nhsuk-details__summary:focus {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-focus-text-colour;
+      }
+
+      // Remove the underline when focussed to avoid duplicate borders
+      & .nhsuk-details__summary-text {
+        text-decoration: none;
+      }
+    }
+
+    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
+    .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
+      &::before,
+      & .nhsuk-details__summary-text {
+        color: $nhsuk-reverse-text-colour;
+      }
     }
 
     .nhsuk-details__text {
@@ -128,6 +170,32 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
         border-left-color: $nhsuk-reverse-border-colour;
       }
     }
+
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      .nhsuk-details__summary,
+      .nhsuk-details__summary:hover {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: LinkText;
+        }
+      }
+
+      .nhsuk-details__summary:active {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: ActiveText;
+        }
+      }
+
+      .nhsuk-details__summary:focus,
+      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus),
+      .nhsuk-details--reverse .nhsuk-details__summary:not(:focus):hover {
+        &::before,
+        & .nhsuk-details__summary-text {
+          color: LinkText;
+        }
+      }
+    }
   }
 
   // Expander variant
@@ -182,8 +250,7 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
 
       .nhsuk-details__summary-text {
         display: block;
-        font-weight: $nhsuk-font-weight-bold;
-        @include nhsuk-font-size(26);
+        @include nhsuk-font(26, $weight: bold);
         @include nhsuk-responsive-margin(4, "bottom");
       }
     }
@@ -209,27 +276,18 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
       }
 
       .nhsuk-details__summary:focus {
+        outline: none;
         box-shadow: none;
       }
 
       .nhsuk-details__summary-text {
         display: inline-block;
-
         position: relative;
-
         padding: nhsuk-spacing(1);
         padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);
-
-        color: $nhsuk-link-colour;
-
         cursor: pointer;
       }
 
-      .nhsuk-details__summary:hover .nhsuk-details__summary-text {
-        color: $nhsuk-link-hover-colour;
-        @include nhsuk-link-hover-decoration;
-      }
-
       .nhsuk-details__summary:focus .nhsuk-details__summary-text {
         @include nhsuk-focused-text;
       }
@@ -250,7 +308,7 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
           "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z"
         ); // Plus icon
 
-        background-color: currentcolor;
+        background-color: ButtonText;
       }
 
       &[open] {
@@ -272,8 +330,10 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
 
         .nhsuk-details__summary-text::before {
           top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));
+
           width: nhsuk-px-to-rem($nhsuk-expander-icon-size);
           height: nhsuk-px-to-rem($nhsuk-expander-icon-size);
+
           clip-path: shape(
             from 50% 3.7%,
             arc by 0% 92.6% of 46.3% 46.3% large cw,
@@ -301,6 +361,10 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
             curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
             close
           ); // Plus icon, scalable
+
+          background-color: currentcolor;
+
+          forced-color-adjust: none;
         }
 
         &[open] .nhsuk-details__summary-text::before {
@@ -318,6 +382,12 @@ $nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
           ); // Minus icon, scalable
         }
       }
+
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        .nhsuk-details__summary:not(:focus):not(:hover):not(:active) .nhsuk-details__summary-text::before {
+          background-color: ButtonText;
+        }
+      }
     }
   }
 

packages/nhsuk-frontend/src/nhsuk/components/error-summary/_index.scss

@@ -56,7 +56,7 @@
   }
 
   .nhsuk-error-summary__list a {
-    @include nhsuk-typography-weight-bold;
+    @include nhsuk-font-weight-bold;
     @include nhsuk-link-style-error;
   }
 }

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

@@ -50,7 +50,7 @@
   .nhsuk-fieldset__legend--l,
   .nhsuk-fieldset__legend--m {
     margin-bottom: nhsuk-spacing(3);
-    @include nhsuk-typography-weight-bold;
+    @include nhsuk-font-weight-bold;
   }
 
   .nhsuk-fieldset__legend--xl {
@@ -66,7 +66,7 @@
   }
 
   .nhsuk-fieldset__legend--s {
-    @include nhsuk-typography-weight-bold;
+    @include nhsuk-font-weight-bold;
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from