Upgrade Sass to 1.80.6 (and fix as many deprecations as possible)

package.json

@@ -61,7 +61,7 @@
     "nunjucks": "^3.2.4",
     "prettier": "3.3.3",
     "puppeteer": "^22.12.1",
-    "sass": "^1.77.6",
+    "sass": "^1.80.6",
     "start-server-and-test": "^2.0.4",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.5",

packages/components/button/_button.scss

@@ -117,7 +117,7 @@ $button-shadow-size: 4px;
   box-shadow: 0 $button-shadow-size 0 $nhsuk-secondary-button-shadow-color;
 
   &:hover {
-    background-color: darken($nhsuk-secondary-button-color, 10%);
+    background-color: $nhsuk-secondary-button-hover-color;
   }
 
   &:focus {
@@ -145,7 +145,7 @@ $button-shadow-size: 4px;
   color: $nhsuk-reverse-button-text-color;
 
   &:hover {
-    background-color: darken($nhsuk-reverse-button-color, 5%);
+    background-color: $nhsuk-reverse-button-hover-color;
     color: $nhsuk-reverse-button-text-color;
   }
 
@@ -185,7 +185,7 @@ $button-shadow-size: 4px;
   box-shadow: 0 $button-shadow-size 0 $nhsuk-warning-button-shadow-color;
 
   &:hover {
-    background-color: darken($nhsuk-warning-button-color, 10%);
+    background-color: $nhsuk-warning-button-hover-color;
   }
 
   &:focus {

packages/components/task-list/_task-list.scss

@@ -3,9 +3,11 @@
  * https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
  */
 
+@use 'sass:color';
+
 // NHS pages have a grey background, so we need a slightly daker colour for the hover
 // This produces 1.1:1 contrast, the same as GOV.UK’s
-$nhsuk-task-list-hover-color: darken($color_nhsuk-grey-5, 6%);
+$nhsuk-task-list-hover-color: color.adjust($color_nhsuk-grey-5,  $lightness: -6%);
 
 .nhsuk-task-list {
   @include nhsuk-font($size: 19);

packages/core/elements/_page.scss

@@ -20,7 +20,9 @@ html {
 
   @if $nhsuk-include-font-face {
     @include _nhsuk-font-face-frutiger;
-    font-family: $nhsuk-font, $nhsuk-font-fallback;
+    & {
+      font-family: $nhsuk-font, $nhsuk-font-fallback;
+    }
   }
 }
 

packages/core/settings/_colours.scss

@@ -2,6 +2,8 @@
 // SETTINGS / #COLOURS
 // ==========================================================================
 
+@use "sass:color";
+
 //
 // NHS colour palette
 //
@@ -65,11 +67,11 @@ $alpha-transparency-50: 0.5;
 //
 
 @function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
+  @return color.mix(white, $color, $percentage);
 }
 
 @function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
+  @return color.mix(black, $color, $percentage);
 }
 
 //

packages/core/tools/_exports.scss

@@ -2,6 +2,8 @@
 // TOOLS / #EXPORTS
 // ==========================================================================
 
+@use "sass:list";
+
 //
 // Exports are used to ensure that the modules of CSS we define throughout Frontend
 // are only included in the generated CSS once, no matter how many times they
@@ -22,9 +24,9 @@
 $imported-modules: () !default; // [1] //
 
 @mixin govuk-exports($name, $warn: true) {
-  @if (index($imported-modules, $name) == null) {
+  @if (list.index($imported-modules, $name) == null) {
     // [2] //
-    $imported-modules: append($imported-modules, $name) !global; // [3] //
+    $imported-modules: list.append($imported-modules, $name) !global; // [3] //
     @content; // [4] //
   } // [5] //
 }

packages/core/tools/_functions.scss

@@ -16,10 +16,10 @@
 @use "sass:math";
 
 @function nhsuk-em($value, $context-font-size) {
-  @if (unitless($value)) {
+  @if (math.is-unitless($value)) {
     $value: $value * 1px;
   }
-  @if (unitless($context-font-size)) {
+  @if (math.is-unitless($context-font-size)) {
     $context-font-size: $context-font-size * 1px;
   }
   @return math.div($value, $context-font-size) * 1em;
@@ -37,7 +37,7 @@
 //
 
 @function nhsuk-px-to-rem($value) {
-  @if (unitless($value)) {
+  @if (math.is-unitless($value)) {
     $value: $value * 1px;
   }
 

packages/core/tools/_grid.scss

@@ -2,6 +2,8 @@
 // TOOLS / #GRID
 // ==========================================================================
 
+@use "sass:map";
+
 //
 // Original code taken from GDS (Government Digital Service)
 // https://github.com/alphagov/govuk-frontend
@@ -30,8 +32,8 @@ $_nhsuk-grid-widths: (
 //
 
 @function grid-width($key) {
-  @if map-has-key($_nhsuk-grid-widths, $key) {
-    @return map-get($_nhsuk-grid-widths, $key);
+  @if map.has-key($_nhsuk-grid-widths, $key) {
+    @return map.get($_nhsuk-grid-widths, $key);
   }
 
   @error "Unknown grid width `#{$key}`";

packages/core/tools/_spacing.scss

@@ -2,6 +2,9 @@
 // TOOLS - #SPACING
 // ==========================================================================
 
+@use "sass:map";
+@use "sass:meta";
+
 // Single point spacing
 // ==========================================================================
 
@@ -23,17 +26,17 @@
 //
 
 @function nhsuk-spacing($spacing-point) {
-  $actual-input-type: type-of($spacing-point);
+  $actual-input-type: meta.type-of($spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a "
     + "#{$actual-input-type}."; /* stylelint-disable-line indentation */
   }
 
-  @if not map-has-key($nhsuk-spacing-points, $spacing-point) {
+  @if not map.has-key($nhsuk-spacing-points, $spacing-point) {
     @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
   }
 
-  @return map-get($nhsuk-spacing-points, $spacing-point);
+  @return map.get($nhsuk-spacing-points, $spacing-point);
 }
 
 // Responsive spacing
@@ -76,18 +79,18 @@
   $important: false,
   $adjustment: false
 ) {
-  $actual-input-type: type-of($responsive-spacing-point);
+  $actual-input-type: meta.type-of($responsive-spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
   }
 
-  @if not map-has-key($nhsuk-spacing-responsive-scale, $responsive-spacing-point) {
+  @if not map.has-key($nhsuk-spacing-responsive-scale, $responsive-spacing-point) {
     @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
     + "responsive spacing scale in `_settings/spacing.scss`."; /* stylelint-disable-line indentation */
   }
 
-  $scale-map: map-get($nhsuk-spacing-responsive-scale, $responsive-spacing-point); // [1] //
-  $actual-map-type: type-of($scale-map);
+  $scale-map: map.get($nhsuk-spacing-responsive-scale, $responsive-spacing-point); // [1] //
+  $actual-map-type: meta.type-of($scale-map);
   @if $actual-map-type != "map" {
     @error "Expected a number (integer), but got a "
     + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)"; /* stylelint-disable-line indentation */

packages/core/tools/_typography.scss

@@ -8,6 +8,7 @@
 //
 
 @use "sass:math";
+@use "sass:map";
 
 // Text colour
 // ==========================================================================
@@ -65,7 +66,7 @@
 //
 
 @function _nhsuk-line-height($line-height, $font-size) {
-  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
+  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
     // Explicitly rounding to 5 decimal places to match the node-sass/libsass default precision.
     // This is expanded to 10 in dart-sass and results in significant line height differences
     // Therefore by rounding it here we achieve consistent rendering across node-sass and dart-sass
@@ -121,18 +122,18 @@
 //
 
 @mixin nhsuk-typography-responsive($size, $override-line-height: false, $important: false) {
-  @if not map-has-key($nhsuk-typography-scale, $size) {
+  @if not map.has-key($nhsuk-typography-scale, $size) {
     @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
   }
 
-  $font-map: map-get($nhsuk-typography-scale, $size);
+  $font-map: map.get($nhsuk-typography-scale, $size);
 
   @each $breakpoint, $breakpoint-map in $font-map {
-    $font-size: map-get($breakpoint-map, "font-size");
+    $font-size: map.get($breakpoint-map, "font-size");
     $font-size-rem: nhsuk-px-to-rem($font-size);
 
     $line-height: _nhsuk-line-height(
-      $line-height: if($override-line-height, $override-line-height, map-get($breakpoint-map, "line-height")),
+      $line-height: if($override-line-height, $override-line-height, map.get($breakpoint-map, "line-height")),
       $font-size: $font-size
     );
 

packages/core/utilities/_grid-widths.scss

@@ -19,27 +19,27 @@
 
 .nhsuk-u-one-half {
   float: left;
-  width: percentage(1 * 0.5) !important;
+  width: math.percentage(1 * 0.5) !important;
 }
 
 .nhsuk-u-one-third {
   float: left;
-  width: percentage(math.div(1, 3)) !important;
+  width: math.percentage(math.div(1, 3)) !important;
 }
 
 .nhsuk-u-two-thirds {
   float: left;
-  width: percentage(math.div(2, 3)) !important;
+  width: math.percentage(math.div(2, 3)) !important;
 }
 
 .nhsuk-u-one-quarter {
   float: left;
-  width: percentage(1 * 0.25) !important;
+  width: math.percentage(1 * 0.25) !important;
 }
 
 .nhsuk-u-three-quarters {
   float: left;
-  width: percentage(3 * 0.25) !important;
+  width: math.percentage(3 * 0.25) !important;
 }
 
 /**
@@ -58,38 +58,38 @@
   width: 100% !important;
   @include mq($from: tablet) {
     float: left;
-    width: percentage(1 * 0.5) !important;
+    width: math.percentage(1 * 0.5) !important;
   }
 }
 
 .nhsuk-u-one-third-tablet {
   width: 100% !important;
   @include mq($from: tablet) {
     float: left;
-    width: percentage(math.div(1, 3)) !important;
+    width: math.percentage(math.div(1, 3)) !important;
   }
 }
 
 .nhsuk-u-two-thirds-tablet {
   width: 100% !important;
   @include mq($from: tablet) {
     float: left;
-    width: percentage(math.div(2, 3)) !important;
+    width: math.percentage(math.div(2, 3)) !important;
   }
 }
 
 .nhsuk-u-one-quarter-tablet {
   width: 100% !important;
   @include mq($from: tablet) {
     float: left;
-    width: percentage(1 * 0.25) !important;
+    width: math.percentage(1 * 0.25) !important;
   }
 }
 
 .nhsuk-u-three-quarters-tablet {
   width: 100% !important;
   @include mq($from: tablet) {
     float: left;
-    width: percentage(3 * 0.25) !important;
+    width: math.percentage(3 * 0.25) !important;
   }
 }

packages/core/utilities/_typography.scss

@@ -5,6 +5,8 @@
 // Utility classes are allowed to use !important;
 // so we disable stylelint for that rule
 
+@use "sass:map";
+
 /**
  * Font size and line height
  *
@@ -15,7 +17,7 @@
  * https://github.com/alphagov/govuk-frontend
  */
 
-@each $size in map-keys($nhsuk-typography-scale) {
+@each $size in map.keys($nhsuk-typography-scale) {
   .nhsuk-u-font-size-#{$size} {
     @include nhsuk-typography-responsive($size, $important: true);
   }