PLATUI-4336 DO NOT MERGE: spiking new Sass syntax

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "7.19.0",
+  "version": "7.20.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",
@@ -45,7 +45,7 @@
   "homepage": "https://github.com/hmrc/hmrc-frontend#readme",
   "dependencies": {
     "accessible-autocomplete": "^3.0.1",
-    "govuk-frontend": "^6.1.0"
+    "govuk-frontend": "^6.2.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",

src/_prototype-kit.scss

@@ -7,4 +7,4 @@ $govuk-suppressed-warnings: (
   legacy-colour-param
 );
 
-@import "all";
+@use "all" as *;

src/accessible-autocomplete.scss

@@ -1,9 +1,13 @@
-$govuk-include-default-font-face: false;
-
-@import "../../govuk-frontend/dist/govuk/settings/index";
-@import "../../govuk-frontend/dist/govuk/tools/index";
-@import "../../govuk-frontend/dist/govuk/helpers/index";
-@import "../../accessible-autocomplete/dist/accessible-autocomplete.min";
+@use "../../govuk-frontend/dist/govuk/settings/index" as * with (
+  $govuk-include-default-font-face: false
+);
+@use "../../govuk-frontend/dist/govuk/tools/index" as *;
+@use "../../govuk-frontend/dist/govuk/helpers/index" as * with (
+  $govuk-include-default-font-face: false
+);
+@use "../../accessible-autocomplete/dist/accessible-autocomplete.min" as * with (
+  $govuk-include-default-font-face: false
+);
 
 .autocomplete__wrapper,
 .autocomplete__input,

src/all-govuk-and-hmrc.scss

@@ -1,8 +1,6 @@
-$govuk-global-styles: false;
-$hmrc-assets-path: "";
-$govuk-assets-path: "govuk/";
-$govuk-new-link-styles: true;
-
-@import "../../govuk-frontend/dist/govuk/index";
-@import "components/all";
-@import "hmrc-frontend-print-overrides";
+@use "../../govuk-frontend/dist/govuk/index"  as * with (
+  $govuk-global-styles: false,
+  $govuk-assets-path: "govuk/"
+);
+@use "components/all"  as * ;
+@use "hmrc-frontend-print-overrides"  as *;

src/all.scss

@@ -1,17 +1,7 @@
-$govuk-global-styles: true;
-$govuk-new-link-styles: true !default;
-$govuk-new-organisation-colours: true !default;
-
-/// Path to the assets directory, with trailing slash.
-///
-/// This is the directory where the images and fonts subdirectories live. You
-/// will need to make this directory available via your application – see the
-/// README for details.
-///
-/// @type String
-/// @access public
-
-$hmrc-assets-path: "./" !default;
-$govuk-assets-path: $hmrc-assets-path !default;
-
-@import "components/all";
+@use "components/all" as * with (
+  $govuk-global-styles: true,
+  $govuk-new-link-styles: true !default,
+  $govuk-new-organisation-colours: true !default,
+  $hmrc-assets-path: "./" !default,
+  $govuk-assets-path: $hmrc-assets-path !default
+);

src/components/_all.scss

@@ -1,16 +1,16 @@
-@import "add-to-a-list/add-to-a-list";
-@import "back-link-helper/back-link-helper";
-@import "banner/banner";
-@import "caseworker-banner/caseworker-banner";
-@import "header/header";
-@import "internal-header/internal-header";
-@import "js-visible/js-visible";
-@import "list-with-actions/list-with-actions";
-@import "notification-badge/notification-badge";
-@import "page-heading/page-heading";
-@import "service-navigation-language-select/service-navigation-language-select";
-@import "status-tags-in-task-list-pages/status-tags-in-task-list-pages";
-@import "summary-list/summary-list";
-@import "timeline/timeline";
-@import "timeout-dialog/timeout-dialog";
-@import "user-research-banner/user-research-banner";
+@use "add-to-a-list/add-to-a-list" as *;
+@use "back-link-helper/back-link-helper" as *;
+@use "banner/banner" as *;
+@use "caseworker-banner/caseworker-banner" as *;
+@use "header/header" as *;
+@use "internal-header/internal-header" as *;
+@use "js-visible/js-visible" as *;
+@use "list-with-actions/list-with-actions" as *;
+@use "notification-badge/notification-badge" as *;
+@use "page-heading/page-heading" as *;
+@use "service-navigation-language-select/service-navigation-language-select" as *;
+@use "status-tags-in-task-list-pages/status-tags-in-task-list-pages" as *;
+@use "summary-list/summary-list" as *;
+@use "timeline/timeline" as *;
+@use "timeout-dialog/timeout-dialog" as *;
+@use "user-research-banner/user-research-banner" as *;

src/components/add-to-a-list/_add-to-a-list.scss

@@ -1,6 +1,6 @@
-@import "../../../../govuk-frontend/dist/govuk/settings/index";
-@import "../../../../govuk-frontend/dist/govuk/tools/index";
-@import "../../../../govuk-frontend/dist/govuk/helpers/index";
+@use "../../../../govuk-frontend/dist/govuk/settings/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/tools/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *;
 
 .hmrc-add-to-a-list {
   padding-left: 0;

src/components/header/_header.scss

@@ -1,4 +1,6 @@
 // stylelint-disable max-nesting-depth, number-max-precision -- deferred during move to stylelint-config-gds
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
+
 $govuk-header-link-underline-thickness: 3px;
 
 .hmrc-header.hmrc-header--with-additional-navigation {

src/components/internal-header/_internal-header.scss

@@ -1,3 +1,6 @@
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
+@use "../../../../govuk-frontend/dist/govuk/components/header" as *;
+
 .hmrc-internal-header {
   @include govuk-font($size: 19);
 
@@ -69,8 +72,8 @@
   &:hover,
   &:active {
     // Negate added border
-    margin-bottom: $govuk-header-link-underline-thickness * -1;
-    border-bottom: $govuk-header-link-underline-thickness solid;
+    //margin-bottom: $govuk-header-link-underline-thickness * -1;
+    //border-bottom: $govuk-header-link-underline-thickness solid;
   }
 
   &:focus {
@@ -127,8 +130,8 @@
   &:hover,
   &:active {
     // Negate added border
-    margin-bottom: $govuk-header-link-underline-thickness * -1;
-    border-bottom: $govuk-header-link-underline-thickness solid;
+    //margin-bottom: $govuk-header-link-underline-thickness * -1;
+    //border-bottom: $govuk-header-link-underline-thickness solid;
   }
 
   &:focus {

src/components/list-with-actions/_list-with-actions.scss

@@ -1,6 +1,6 @@
-@import "../../../../govuk-frontend/dist/govuk/settings/index";
-@import "../../../../govuk-frontend/dist/govuk/tools/index";
-@import "../../../../govuk-frontend/dist/govuk/helpers/index";
+@use "../../../../govuk-frontend/dist/govuk/settings/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/tools/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *;
 
 .hmrc-list-with-actions {
   @include govuk-font($size: 19);

src/components/page-heading/_page-heading.scss

@@ -1,3 +1,5 @@
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
+
 .hmrc-page-heading {
   display: table;
   width: 100%;

src/components/service-navigation-language-select/_service-navigation-language-select.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
 
 .hmrc-service-navigation-language-select {
   @include govuk-font($size: 16);

src/components/status-tags-in-task-list-pages/_status-tags-in-task-list-pages.scss

@@ -3,6 +3,8 @@
 
 // Custom styles
 
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
+
 .hmrc-status-tag {
   color: $govuk-text-colour;
   font-family: "GDS Transport", Arial, sans-serif;

src/components/summary-list/_summary-list.scss

@@ -1,3 +1,5 @@
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
+
 @include govuk-media-query($from: tablet) {
   .govuk-summary-list.govuk-summary-list--long-key {
     .govuk-summary-list__row {

src/components/timeline/_timeline.scss

@@ -1,4 +1,5 @@
-@import "../../../../govuk-frontend/dist/govuk/core/typography";
+@use "../../../../govuk-frontend/dist/govuk/core/typography" as *;
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
 
 .hmrc-timeline {
   $border-width: 5px;

src/components/timeout-dialog/_timeout-dialog.scss

@@ -1,9 +1,9 @@
 @use "sass:math";
 
 // stylelint-disable number-max-precision -- deferred during move to stylelint-config-gds
-@import "../../../../govuk-frontend/dist/govuk/settings/index";
-@import "../../../../govuk-frontend/dist/govuk/tools/index";
-@import "../../../../govuk-frontend/dist/govuk/helpers/index";
+@use "../../../../govuk-frontend/dist/govuk/settings/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/tools/index" as *;
+@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *;
 
 .hmrc-timeout-overlay {
   position: fixed;

src/components/user-research-banner/_user-research-banner.scss

@@ -1,6 +1,7 @@
-@import "../../../../govuk-frontend/dist/govuk/helpers/links";
-@import "../../../../govuk-frontend/dist/govuk/helpers/typography";
-@import "../../../../govuk-frontend/dist/govuk/utilities/clearfix";
+@use "../../../../govuk-frontend/dist/govuk/helpers/links" as *;
+@use "../../../../govuk-frontend/dist/govuk/helpers/typography" as *;
+@use "../../../../govuk-frontend/dist/govuk/utilities/clearfix" as *;
+@use "../../../../govuk-frontend/dist/govuk/base" as *;
 
 .hmrc-user-research-banner {
   display: none;

src/govuk-prototype-kit.config.json

@@ -10,7 +10,7 @@
   "pluginDependencies": [
     {
       "packageName": "govuk-frontend",
-      "minVersion": "6.1.0"
+      "minVersion": "6.2.0"
     }
   ],
   "assets": [