Merge pull request #1912 from nhsuk/revealed-content-border

[v10] Change border colour for details component and conditionally revealed content

Author: colinrotherham

CHANGELOG.md

@@ -54,6 +54,15 @@ This was added in [pull request #1712: Add support for icon buttons](https://git
 
 ### :recycle: **Changes**
 
+#### Change border colour for details component and conditionally revealed content
+
+We've changed the border colour shown to the left of details component and conditionally revealed content.
+
+- Details component border colour changed from grey-4 (`#d8dde0`) to grey-3 (`#aeb7bd`)
+- Conditionally revealed border colour changed from grey-1 (`#4c6272`) to grey-3 (`#aeb7bd`)
+
+This change was introduced in [pull request #1788: Change border colour for details component and conditionally revealed content](https://github.com/nhsuk/nhsuk-frontend/pull/1788).
+
 #### Improve screen reader announcements for header search button
 
 We've updated the HTML for the header search button to improve NVDA screen reader announcements.

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

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "../../core/settings" as *;
 @use "../../core/tools" as *;
+@use "../../core/helpers" as *;
 @forward "../error-message";
 @forward "../fieldset";
 @forward "../hint";
@@ -193,7 +194,7 @@ $nhsuk-checkboxes-offset: $nhsuk-border-width-form-element;
     margin-bottom: $nhsuk-checkboxes-offset;
     margin-left: $conditional-margin-left;
     padding-left: $conditional-padding-left;
-    border-left: $nhsuk-border-width solid $nhsuk-input-border-colour;
+    border-left: $nhsuk-border-width solid nhsuk-colour("grey-3");
 
     .nhsuk-frontend-supported &--hidden {
       display: none;

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

@@ -61,7 +61,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       margin-top: nhsuk-spacing(2);
       padding: nhsuk-spacing(3) 0;
       padding-left: nhsuk-px-to-rem(20px); // [6]
-      border-left: nhsuk-spacing(1) solid $nhsuk-border-colour;
+      border-left: nhsuk-spacing(1) solid nhsuk-colour("grey-3");
     }
 
     .nhsuk-details--reverse {
@@ -142,7 +142,7 @@ $expander-icon-size: $nhsuk-expander-icon-size;
       padding: nhsuk-spacing(3) 0;
       padding-right: 0;
       padding-left: 20px; // [6]
-      border-left: nhsuk-spacing(1) solid $nhsuk-border-colour;
+      border-left: nhsuk-spacing(1) solid nhsuk-colour("grey-3");
 
       .nhsuk-details--reverse & {
         border-left-color: $nhsuk-reverse-border-colour;

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

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "../../core/settings" as *;
 @use "../../core/tools" as *;
+@use "../../core/helpers" as *;
 @forward "../error-message";
 @forward "../fieldset";
 @forward "../hint";
@@ -212,7 +213,7 @@ $nhsuk-radios-offset: $nhsuk-border-width-form-element;
     margin-bottom: $nhsuk-radios-offset;
     margin-left: $conditional-margin-left;
     padding-left: $conditional-padding-left;
-    border-left: $nhsuk-border-width solid $nhsuk-input-border-colour;
+    border-left: $nhsuk-border-width solid nhsuk-colour("grey-3");
 
     .nhsuk-frontend-supported &--hidden {
       display: none;