TD-6277 Colour changes

Phil-NHS · Phil-NHS · commit 9e6ceaf2672c · 2025-09-25T15:03:02.000+01:00
diff --git a/DigitalLearningSolutions.Web/Styles/frameworks/comments.scss b/DigitalLearningSolutions.Web/Styles/frameworks/comments.scss
@@ -5,11 +5,11 @@
 }
 
 .nhsuk-card.comment.comment-mine {
-  border-color: $color_nhsuk-green;
+  border-color: nhsuk-colour("green");
 }
 
 .nhsuk-card.comment.comment-other {
-  border-color: $color_nhsuk-blue;
+  border-color: nhsuk-colour("blue");
 }
 
 .heading-xxs {
@@ -18,7 +18,7 @@
 
 .heading-light {
   font-weight: 200;
-  color: $color_nhsuk-grey-1;
+  color: nhsuk-colour("grey-1");
 }
 
 .grid-column-ninety {
diff --git a/DigitalLearningSolutions.Web/Styles/frameworks/frameworksShared.scss b/DigitalLearningSolutions.Web/Styles/frameworks/frameworksShared.scss
@@ -144,7 +144,7 @@ ol.hee-fwservice--framework-progress-bar {
     width: 150px; // hacky way to make the line the right size
     .hee-fwservice--framework-progress-marker {
       position: relative;
-      border: 2px solid $color_nhsuk-blue;
+      border: 2px solid nhsuk-colour("blue");
       border-radius: 50%;
       width: 2rem;
       height: 2rem;
@@ -154,7 +154,7 @@ ol.hee-fwservice--framework-progress-bar {
       .hee-fwservice--framework-progress-marker::before {
         content: '';
         width: 120px;
-        border-top: 1px solid $color_nhsuk-blue;
+        border-top: 1px solid nhsuk-colour("blue");
         position: absolute;
         top: 50%;
         left: 100%;
@@ -171,8 +171,8 @@ ol.hee-fwservice--framework-progress-bar {
 
     .hee-fwservice--framework-progress-marker {
       font-weight: normal;
-      color: $color_nhsuk-white;
-      background-color: $color_nhsuk-blue;
+      color: nhsuk-colour("white");
+      background-color: nhsuk-colour("blue");
     }
   }
 }
@@ -182,7 +182,7 @@ ul.no-decs {
 }
 
 .hee-fwservice--framework-structure {
-  background-color: $color_nhsuk-white;
+  background-color: nhsuk-colour("white");
   display: block;
   padding: 24px;
   margin-bottom: 24px;
diff --git a/DigitalLearningSolutions.Web/Styles/home/learningContent.scss b/DigitalLearningSolutions.Web/Styles/home/learningContent.scss
@@ -47,7 +47,7 @@
 
 .learning-content-item__image-box {
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
-  background: $color_nhsuk-white;
+  background: nhsuk-colour("white");
   border-radius: 4px;
   padding: 8px;
   height: fit-content;
diff --git a/DigitalLearningSolutions.Web/Styles/home/welcome.scss b/DigitalLearningSolutions.Web/Styles/home/welcome.scss
@@ -26,9 +26,9 @@
 }
 
 .auth-button--blue {
-    background-color: $color_nhsuk-blue;
+    background-color: nhsuk-colour("blue");
 }
 
 .auth-button--blue:hover {
-    background-color: darken($color_nhsuk-blue, 5%);
+    background-color: darken(nhsuk-colour("blue"), 5%);
 }
diff --git a/DigitalLearningSolutions.Web/Styles/index.scss b/DigitalLearningSolutions.Web/Styles/index.scss
@@ -219,7 +219,7 @@ ul.no-bullets {
 
 .side-nav__heading {
   @extend .nhsuk-u-font-weight-bold;
-  color: $color_nhsuk-grey-1;
+  color: nhsuk-colour("grey-1");
   @include nhsuk-responsive-margin(3, "bottom");
   @include nhsuk-responsive-padding(1, "top");
   @extend .nhsuk-u-font-size-19;
@@ -266,7 +266,7 @@ ul.no-bullets {
   ul {
     display: table;
     list-style-type: none;
-    border-bottom: 1px solid $color_nhsuk-grey-1;
+    border-bottom: 1px solid nhsuk-colour("grey-1");
     table-layout: fixed;
     width: 100%;
     text-align: center;
@@ -283,7 +283,7 @@ ul.no-bullets {
       }
 
       &.active {
-        border-bottom: 3px solid $color_nhsuk-blue;
+        border-bottom: 3px solid nhsuk-colour("blue");
         font-weight: bold;
         background-color: white;
       }
diff --git a/DigitalLearningSolutions.Web/Styles/layout.scss b/DigitalLearningSolutions.Web/Styles/layout.scss
@@ -247,7 +247,7 @@ footer {
   text-transform: uppercase;
 
   &.header-beta--dark {
-    color: $color_nhsuk-dark-pink;
+    color: nhsuk-colour("dark-pink");
   }
 }
 
@@ -261,7 +261,7 @@ footer {
 }
 
 .dls-alert-banner {
-  background-color: $color_nhsuk-dark-pink;
+  background-color: nhsuk-colour("dark-pink");
   padding-bottom: 0.1px;
   color: #FFFFFF;
 
@@ -280,8 +280,8 @@ footer {
 
 .feedback-tag {
   align-items: center;
-  background-color: $color_nhsuk-blue;
-  color: $color_nhsuk-white;
+  background-color: nhsuk-colour("blue");
+  color: nhsuk-colour("white");
   display: inline-flex;
   font-family: "Frutiger W01", Arial, sans-serif;
   font-size: 19px;
@@ -302,8 +302,8 @@ footer {
 }
 
 .feedback-bar {
-  background-color: $color_nhsuk-grey-5;
-  border-bottom: 1px solid $color_nhsuk-grey-4;
+  background-color: nhsuk-colour("grey-5");
+  border-bottom: 1px solid nhsuk-colour("grey-4");
 }
 
 .validation-summary-valid {
diff --git a/DigitalLearningSolutions.Web/Styles/learningMenu/index.scss b/DigitalLearningSolutions.Web/Styles/learningMenu/index.scss
@@ -63,7 +63,7 @@ hr.thick {
 }
 
 .passed-text {
-  color: $color_nhsuk-green;
+  color: nhsuk-colour("green");
 }
 
 .not-passed-text {
diff --git a/DigitalLearningSolutions.Web/Styles/learningPortal/_inputrange.scss b/DigitalLearningSolutions.Web/Styles/learningPortal/_inputrange.scss
@@ -6,8 +6,8 @@
 // MIT License
 @use "nhsuk-frontend/dist/nhsuk/core/settings/" as *;
 
-$track-color: $color_nhsuk-grey-3 !default;
-$thumb-color: $color_nhsuk-grey-2 !default;
+$track-color: nhsuk-colour("grey-3") !default;
+$thumb-color: nhsuk-colour("grey-2") !default;
 
 $thumb-radius: 2px !default;
 $thumb-height: 24px !default;
@@ -18,7 +18,7 @@ $thumb-border-color: #eceff1 !default;
 $track-width: 100% !default;
 $track-height: 24px !default;
 $track-border-width: 2px !default;
-$track-border-color: $color_nhsuk-grey-3 !default;
+$track-border-color: nhsuk-colour("grey-3") !default;
 $focus-track-border-width: 4px !default;
 
 $track-radius: 5px !default;
@@ -55,7 +55,7 @@ $track-radius: 5px !default;
   }
 
   &:focus {
-    border: $focus-track-border-width solid $color_nhsuk-black;
+    border: $focus-track-border-width solid nhsuk-colour("black");
     box-shadow: 0 0 0 4px $nhsuk-focus-color;
 
     &::-webkit-slider-runnable-track {
@@ -68,7 +68,7 @@ $track-radius: 5px !default;
     }
 
     &::-moz-range-progress {
-      background-color: $color_nhsuk-blue;
+      background-color: nhsuk-colour("blue");
       height: $track-height - ( 2 * $focus-track-border-width);
       border-radius: 3px;
     }
@@ -128,7 +128,7 @@ $track-radius: 5px !default;
     border: $track-border-width solid $track-border-color;
     border-radius: $track-radius;
     box-sizing: content-box;
-    background: $color_nhsuk-blue;
+    background: nhsuk-colour("blue");
   }
 
   &::-ms-fill-upper {
@@ -139,7 +139,7 @@ $track-radius: 5px !default;
   }
 
   &::-moz-range-progress {
-    background-color: $color_nhsuk-blue;
+    background-color: nhsuk-colour("blue");
     height: $track-height - ( 2 * $track-border-width);
     border-radius: 3px;
   }
@@ -148,7 +148,7 @@ $track-radius: 5px !default;
     overflow-x: hidden;
 
     &::-webkit-slider-thumb {
-      box-shadow: -800px 0 0 800px $color_nhsuk-blue;
+      box-shadow: -800px 0 0 800px nhsuk-colour("blue");
     }
 
     .js-enabled & {
diff --git a/DigitalLearningSolutions.Web/Styles/learningPortal/current.scss b/DigitalLearningSolutions.Web/Styles/learningPortal/current.scss
@@ -4,35 +4,35 @@
 .searchable-element {
   &.overdue {
     background-color: #fff;
-    border-left: 6px solid $color_nhsuk-red;
+    border-left: 6px solid nhsuk-colour("red");
   }
 
   &.due-soon {
     background-color: #fff;
-    border-left: 6px solid $color_nhsuk-yellow;
+    border-left: 6px solid nhsuk-colour("yellow");
   }
 }
 
 a.delete-button {
-  background-color: $color_nhsuk-red;
-  box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%);
+  background-color: nhsuk-colour("red");
+  box-shadow: 0 4px 0 shade(nhsuk-colour("red"), 50%);
   margin-bottom: 16px !important;
 
   &:hover {
-    background-color: shade($color_nhsuk-red, 20%);
+    background-color: shade(nhsuk-colour("red"), 20%);
   }
 
   &:active {
-    background-color: shade($color_nhsuk-red, 50%);
+    background-color: shade(nhsuk-colour("red"), 50%);
   }
 }
 
 .overdue {
-  background-color: tint($color_nhsuk-red, 80);
+  background-color: tint(nhsuk-colour("red"), 80);
 }
 
 .due-soon {
-  background-color: $color_nhsuk-yellow;
+  background-color: nhsuk-colour("yellow");
 }
 
 h3.course-title {
diff --git a/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss b/DigitalLearningSolutions.Web/Styles/learningPortal/selfAssessment.scss
@@ -56,7 +56,7 @@ details.nhsuk-details {
 
 .score {
   margin-left: 48px;
-  color: $color_nhsuk-black;
+  color: nhsuk-colour("black");
   font-size: 1.25rem;
   font-weight: 600;
   display: inline-block;
@@ -97,7 +97,7 @@ details.nhsuk-details {
   padding-right: 32px;
   margin-top: 20px;
   margin-bottom: 20px;
-  background-color: $color_nhsuk-grey-5;
+  background-color: nhsuk-colour("grey-5");
   box-sizing: border-box;
 }
 
diff --git a/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss b/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss
@@ -9,7 +9,7 @@
 }
 
 .preference-row {
-  border-bottom: 1px solid $color_nhsuk-grey-4;
+  border-bottom: 1px solid nhsuk-colour("grey-4");
   margin-top: 24px;
 }
 
diff --git a/DigitalLearningSolutions.Web/Styles/nhsuk.scss b/DigitalLearningSolutions.Web/Styles/nhsuk.scss
@@ -85,16 +85,16 @@ nav, .nhsuk-header__navigation, #header-navigation {
 }
 
 .nhsuk-button--danger {
-  background-color: $color_nhsuk-red;
-  box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%);
+  background-color: nhsuk-colour("red");
+  box-shadow: 0 4px 0 shade(nhsuk-colour("red"), 50%);
   margin-bottom: 16px !important;
 
   &:hover {
-    background-color: shade($color_nhsuk-red, 20%);
+    background-color: shade(nhsuk-colour("red"), 20%);
   }
 
   &:active {
-    background-color: shade($color_nhsuk-red, 50%);
+    background-color: shade(nhsuk-colour("red"), 50%);
   }
 }
 
diff --git a/DigitalLearningSolutions.Web/Styles/shared/searchableElements/filter.scss b/DigitalLearningSolutions.Web/Styles/shared/searchableElements/filter.scss
@@ -102,7 +102,7 @@
   @extend .inline-button;
   width: 20%;
   border-radius: 4px;
-  background-color: $color_nhsuk-red;
+  background-color: nhsuk-colour("red");
 
   @include mq($until: tablet) {
     margin-top: nhsuk-spacing(2);
diff --git a/DigitalLearningSolutions.Web/Styles/shared/searchableElements/search.scss b/DigitalLearningSolutions.Web/Styles/shared/searchableElements/search.scss
@@ -25,7 +25,7 @@
   .nhsuk-icon__search {
     height: 27px;
     width: 27px;
-    fill: $color_nhsuk-white;
+    fill: nhsuk-colour("white");
   }
 
   &:focus:not(:active) .nhsuk-icon__search {
diff --git a/DigitalLearningSolutions.Web/Styles/trackingSystem/centreRanking.scss b/DigitalLearningSolutions.Web/Styles/trackingSystem/centreRanking.scss
@@ -1,7 +1,7 @@
 ﻿@use "nhsuk-frontend/dist/nhsuk/core/all" as *;
 @use "../shared/searchableElements/searchableElements";
 
-$current-centre-highlight: $color_nhsuk-pale-yellow;
+$current-centre-highlight: nhsuk-colour("pale-yellow");
 
 .current-centre {
   background-color: $current-centre-highlight;
diff --git a/DigitalLearningSolutions.Web/Styles/trackingSystem/contractDetails.scss b/DigitalLearningSolutions.Web/Styles/trackingSystem/contractDetails.scss
@@ -4,22 +4,22 @@
 // defined in DisplayColourHelper
 .coloured-card-number {
   &--blue {
-    color: $color_nhsuk-blue;
+    color: nhsuk-colour("blue");
   }
 
   &--green {
-    color: $color_nhsuk-green;
+    color: nhsuk-colour("green");
   }
 
   &--yellow {
     color: #d97f00;
   }
 
   &--red {
-    color: $color_nhsuk-red;
+    color: nhsuk-colour("red");
   }
 
   &--grey {
-    color: $color_nhsuk-grey-1;
+    color: nhsuk-colour("grey-1");
   }
 }
diff --git a/DigitalLearningSolutions.Web/Styles/trackingSystem/courseSetup.scss b/DigitalLearningSolutions.Web/Styles/trackingSystem/courseSetup.scss
@@ -8,9 +8,9 @@
 }
 
 .status-inactive {
-  border-left: 6px solid tint($color_nhsuk-red, 80);
+  border-left: 6px solid tint(nhsuk-colour("red"), 80);
 }
 
 .status-archived {
-  border-left: 6px solid $color_nhsuk-grey-2;
+  border-left: 6px solid nhsuk-colour("grey-2");
 }
diff --git a/DigitalLearningSolutions.Web/Styles/trackingSystem/viewDelegate.scss b/DigitalLearningSolutions.Web/Styles/trackingSystem/viewDelegate.scss
diff --git a/DigitalLearningSolutions.Web/Styles/userFeedback/userFeedback.scss b/DigitalLearningSolutions.Web/Styles/userFeedback/userFeedback.scss
diff --git a/DigitalLearningSolutions.Web/Views/Shared/Components/Checkboxes/Default.cshtml b/DigitalLearningSolutions.Web/Views/Shared/Components/Checkboxes/Default.cshtml
diff --git a/DigitalLearningSolutions.Web/Views/Shared/_CheckboxItem.cshtml b/DigitalLearningSolutions.Web/Views/Shared/_CheckboxItem.cshtml

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.nhsuk-card.comment.comment-mine {`
`8`		`- border-color: $color_nhsuk-green;`
	`8`	`+ border-color: nhsuk-colour("green");`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.nhsuk-card.comment.comment-other {`
`12`		`- border-color: $color_nhsuk-blue;`
	`12`	`+ border-color: nhsuk-colour("blue");`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.heading-xxs {`
`@@ -18,7 +18,7 @@`
`18`	`18`
`19`	`19`	`.heading-light {`
`20`	`20`	`font-weight: 200;`
`21`		`- color: $color_nhsuk-grey-1;`
	`21`	`+ color: nhsuk-colour("grey-1");`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.grid-column-ninety {`
Original file line number	Diff line number	Diff line change
`@@ -26,9 +26,9 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.auth-button--blue {`
`29`		`- background-color: $color_nhsuk-blue;`
	`29`	`+ background-color: nhsuk-colour("blue");`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.auth-button--blue:hover {`
`33`		`- background-color: darken($color_nhsuk-blue, 5%);`
	`33`	`+ background-color: darken(nhsuk-colour("blue"), 5%);`
`34`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ hr.thick {`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`.passed-text {`
`66`		`- color: $color_nhsuk-green;`
	`66`	`+ color: nhsuk-colour("green");`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`.not-passed-text {`
Original file line number	Diff line number	Diff line change
`@@ -4,35 +4,35 @@`
`4`	`4`	`.searchable-element {`
`5`	`5`	`&.overdue {`
`6`	`6`	`background-color: #fff;`
`7`		`- border-left: 6px solid $color_nhsuk-red;`
	`7`	`+ border-left: 6px solid nhsuk-colour("red");`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`&.due-soon {`
`11`	`11`	`background-color: #fff;`
`12`		`- border-left: 6px solid $color_nhsuk-yellow;`
	`12`	`+ border-left: 6px solid nhsuk-colour("yellow");`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`a.delete-button {`
`17`		`- background-color: $color_nhsuk-red;`
`18`		`- box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%);`
	`17`	`+ background-color: nhsuk-colour("red");`
	`18`	`+ box-shadow: 0 4px 0 shade(nhsuk-colour("red"), 50%);`
`19`	`19`	`margin-bottom: 16px !important;`
`20`	`20`
`21`	`21`	`&:hover {`
`22`		`- background-color: shade($color_nhsuk-red, 20%);`
	`22`	`+ background-color: shade(nhsuk-colour("red"), 20%);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&:active {`
`26`		`- background-color: shade($color_nhsuk-red, 50%);`
	`26`	`+ background-color: shade(nhsuk-colour("red"), 50%);`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.overdue {`
`31`		`- background-color: tint($color_nhsuk-red, 80);`
	`31`	`+ background-color: tint(nhsuk-colour("red"), 80);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.due-soon {`
`35`		`- background-color: $color_nhsuk-yellow;`
	`35`	`+ background-color: nhsuk-colour("yellow");`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`h3.course-title {`