Use Sass modules

paulrobertlloyd · paulrobertlloyd · commit e3a4714fedf3 · 2025-07-16T14:55:00.000+01:00
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,62 +1,10 @@
 @use "sass:color";
 
-// Configure and import GOV.UK Frontend
-$govuk-font-family: "Frutiger W01", Arial, sans-serif;
-$govuk-border-colour: #d8dde0;
-$govuk-brand-colour: #005eb8;
-$govuk-error-colour: #d5281b;
-$govuk-success-colour: #007f3b;
-$govuk-global-styles: false;
-$govuk-new-organisation-colours: true;
-$govuk-assets-path: "/";
+// NHS.UK frontend components
+@forward "vendor/nhsuk-frontend";
 
-@import "vendor/govuk-frontend";
-
-// Configure and import NHS.UK frontend
-$nhsuk-fonts-path: "/";
-$nhsuk-grid-widths: (
-  one-quarter: 25%,
-  one-third: 33.3333%,
-  one-half: 50%,
-  two-thirds: 66.6666%,
-  three-quarters: 75%,
-  full: 100%,
-  filters: 30%,
-  results: 70%,
-);
-
-@import "vendor/nhsuk-frontend";
-
-// App options
-$app-page-width: 1100px;
-$color_app-dark-orange: color.scale(
-  color.mix($color_nhsuk-red, $color_nhsuk-warm-yellow, 55%),
-  $lightness: -10%
-);
-
-// Import GOV.UK Frontend components (updated to use NHS.UK frontend styles)
-@import "vendor/govuk-frontend/components/file-upload";
-@import "vendor/govuk-frontend/components/password-input";
+// GOV.UK Frontend components
+@forward "vendor/govuk-frontend";
 
 // App-specific components
-@import "core";
-@import "components";
-
-// `$nhsuk-page-width` isn’t globally editable, so need to apply manually
-.app-signed-in {
-  .nhsuk-width-container,
-  .nhsuk-header__container,
-  .nhsuk-navigation {
-    max-width: $app-page-width;
-
-    @include nhsuk-media-query($from: desktop) {
-      margin: 0 $nhsuk-gutter;
-    }
-
-    @include nhsuk-media-query(
-      $and: "(min-width: #{($app-page-width + $nhsuk-gutter * 2)})"
-    ) {
-      margin: 0 auto;
-    }
-  }
-}
+@forward "components";
diff --git a/app/assets/stylesheets/components/_action-list.scss b/app/assets/stylesheets/components/_action-list.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-action-list {
   display: flex;
   padding: 0;
diff --git a/app/assets/stylesheets/components/_add-another.scss b/app/assets/stylesheets/components/_add-another.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 $_counter-size: 2rem;
 
 .app-add-another {
diff --git a/app/assets/stylesheets/components/_autocomplete.scss b/app/assets/stylesheets/components/_autocomplete.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-autocomplete__wrapper {
   position: relative;
 }
diff --git a/app/assets/stylesheets/components/_button-group.scss b/app/assets/stylesheets/components/_button-group.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-button-group {
   align-items: center;
   display: flex;
diff --git a/app/assets/stylesheets/components/_button.scss b/app/assets/stylesheets/components/_button.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 $_button-shadow-size: $nhsuk-border-width-form-element * 2;
 $_secondary-warning-button-hover-color: color.change(
diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss
@@ -1,3 +1,6 @@
+@use "../vendor/nhsuk-frontend" as *;
+@use "../core" as app;
+
 .app-card {
   &--aqua-green {
     .nhsuk-card__heading--feature {
@@ -7,7 +10,7 @@
 
   &--dark-orange {
     .nhsuk-card__heading--feature {
-      background-color: $color_app-dark-orange;
+      background-color: app.$color_dark-orange;
     }
   }
 
diff --git a/app/assets/stylesheets/components/_count.scss b/app/assets/stylesheets/components/_count.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 .app-count {
   background-color: color.scale(
diff --git a/app/assets/stylesheets/components/_dev-tools.scss b/app/assets/stylesheets/components/_dev-tools.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-dev-tools {
   background-color: $color_nhsuk-pale-yellow;
   background-image: linear-gradient(
diff --git a/app/assets/stylesheets/components/_environment.scss b/app/assets/stylesheets/components/_environment.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-environment {
   @include nhsuk-font-size(14);
   @include nhsuk-responsive-padding(2, bottom);
diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 .app-filters {
   &.nhsuk-card {
diff --git a/app/assets/stylesheets/components/_header.scss b/app/assets/stylesheets/components/_header.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 .app-header__content {
   display: flex;
diff --git a/app/assets/stylesheets/components/_heading-group.scss b/app/assets/stylesheets/components/_heading-group.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-heading-group {
   display: flex;
   flex-direction: column;
diff --git a/app/assets/stylesheets/components/_highlight.scss b/app/assets/stylesheets/components/_highlight.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 .app-highlight {
   background-color: color.mix(
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
@@ -1,18 +1,19 @@
-@import "action-list";
-@import "add-another";
-@import "autocomplete";
-@import "button-group";
-@import "button";
-@import "card";
-@import "count";
-@import "environment";
-@import "filters";
-@import "header";
-@import "heading-group";
-@import "highlight";
-@import "search-input";
-@import "secondary-navigation";
-@import "status";
-@import "summary-list";
-@import "tables";
-@import "tag";
+@forward "action-list";
+@forward "add-another";
+@forward "autocomplete";
+@forward "button-group";
+@forward "button";
+@forward "card";
+@forward "count";
+@forward "environment";
+@forward "filters";
+@forward "header";
+@forward "heading-group";
+@forward "highlight";
+@forward "search-input";
+@forward "secondary-navigation";
+@forward "signed-in";
+@forward "status";
+@forward "summary-list";
+@forward "tables";
+@forward "tag";
diff --git a/app/assets/stylesheets/components/_search-input.scss b/app/assets/stylesheets/components/_search-input.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 $_button-shadow-size: $nhsuk-border-width-form-element * 2;
 
 .app-search-input {
diff --git a/app/assets/stylesheets/components/_secondary-navigation.scss b/app/assets/stylesheets/components/_secondary-navigation.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-secondary-navigation {
   margin-left: #{$nhsuk-gutter-half * -1};
   margin-right: #{$nhsuk-gutter-half * -1};
diff --git a/app/assets/stylesheets/components/_signed-in.scss b/app/assets/stylesheets/components/_signed-in.scss
@@ -0,0 +1,20 @@
+@use "../vendor/nhsuk-frontend" as *;
+@use "../core" as app;
+
+.app-signed-in {
+  .nhsuk-width-container,
+  .nhsuk-header__container,
+  .nhsuk-navigation {
+    max-width: app.$page-width;
+
+    @include nhsuk-media-query($from: desktop) {
+      margin: 0 $nhsuk-gutter;
+    }
+
+    @include nhsuk-media-query(
+      $and: "(min-width: #{(app.$page-width + $nhsuk-gutter * 2)})"
+    ) {
+      margin: 0 auto;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_status.scss b/app/assets/stylesheets/components/_status.scss
@@ -1,3 +1,6 @@
+@use "../vendor/nhsuk-frontend" as *;
+@use "../core" as app;
+
 .app-status {
   align-items: start;
   display: flex;
@@ -18,7 +21,7 @@
   }
 
   &--dark-orange {
-    color: $color_app-dark-orange;
+    color: app.$color_dark-orange;
   }
 
   &--green {
diff --git a/app/assets/stylesheets/components/_summary-list.scss b/app/assets/stylesheets/components/_summary-list.scss
@@ -1,4 +1,5 @@
-// Full width summary list
+@use "../vendor/nhsuk-frontend" as *;
+
 .app-summary-list--full-width {
   .nhsuk-summary-list__row {
     display: block;
diff --git a/app/assets/stylesheets/components/_tables.scss b/app/assets/stylesheets/components/_tables.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "../vendor/nhsuk-frontend" as *;
 
 .app-table--csv {
   th,
diff --git a/app/assets/stylesheets/components/_tag.scss b/app/assets/stylesheets/components/_tag.scss
@@ -1,8 +1,11 @@
+@use "../vendor/nhsuk-frontend" as *;
+@use "../core" as app;
+
 .nhsuk-tag {
   &--dark-orange {
-    background-color: nhsuk-tint($color_app-dark-orange, 80%);
-    border-color: nhsuk-shade($color_app-dark-orange, 50%);
-    color: nhsuk-shade($color_app-dark-orange, 50%);
+    background-color: nhsuk-tint(app.$color_dark-orange, 80%);
+    border-color: nhsuk-shade(app.$color_dark-orange, 50%);
+    color: nhsuk-shade(app.$color_dark-orange, 50%);
   }
 
   &--transparent {
diff --git a/app/assets/stylesheets/core/_index.scss b/app/assets/stylesheets/core/_index.scss
@@ -1,3 +1,4 @@
-@import "elements";
-@import "objects";
-@import "utilities";
+@forward "elements";
+@forward "objects";
+@forward "settings";
+@forward "utilities";
diff --git a/app/assets/stylesheets/core/elements/_index.scss b/app/assets/stylesheets/core/elements/_index.scss
@@ -1,3 +1,5 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
 blockquote {
   border-left: $nhsuk-border-width solid $nhsuk-border-color;
   margin-left: 0;
diff --git a/app/assets/stylesheets/core/objects/_grid.scss b/app/assets/stylesheets/core/objects/_grid.scss
@@ -1,3 +1,5 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
 // Patient session and record
 .app-grid-column-patient-session {
   @include nhsuk-grid-column(
diff --git a/app/assets/stylesheets/core/objects/_index.scss b/app/assets/stylesheets/core/objects/_index.scss
@@ -1 +1 @@
-@import "grid";
+@forward "grid";
diff --git a/app/assets/stylesheets/core/settings/_index.scss b/app/assets/stylesheets/core/settings/_index.scss
@@ -0,0 +1,9 @@
+@use "sass:color";
+@use "../../vendor/nhsuk-frontend" as *;
+
+$page-width: 1100px;
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$color_dark-orange: color.scale(
+  color.mix($color_nhsuk-red, $color_nhsuk-yellow, 60%),
+  $lightness: -10%
+);
diff --git a/app/assets/stylesheets/core/utilities/_index.scss b/app/assets/stylesheets/core/utilities/_index.scss
@@ -1 +1 @@
-@import "typography";
+@forward "typography";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/_index.scss
@@ -1,3 +1,3 @@
-@import "base";
-@import "components";
-@import "utilities";
+@use "base" as *;
+
+@forward "components";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/base/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/base/_index.scss
@@ -1 +1,39 @@
-@import "pkg:govuk-frontend/dist/govuk/base";
+@use "../../../vendor/nhsuk-frontend" as nhsuk;
+
+// Configure GOV.UK Frontend to use NHS.UK frontend variables
+@forward "pkg:govuk-frontend/dist/govuk/base" with (
+  $govuk-text-colour: nhsuk.$nhsuk-text-color,
+  $govuk-secondary-text-colour: nhsuk.$nhsuk-secondary-text-color,
+  $govuk-body-background-colour: nhsuk.$color_nhsuk-grey-5,
+  $govuk-border-colour: nhsuk.$nhsuk-border-color,
+  $govuk-border-width: nhsuk.$nhsuk-border-width,
+  $govuk-focus-colour: nhsuk.$nhsuk-focus-color,
+  $govuk-focus-text-colour: nhsuk.$nhsuk-focus-text-color,
+  $govuk-focus-width: nhsuk.$nhsuk-focus-width,
+  $govuk-font-family: nhsuk.$nhsuk-font,
+  $govuk-global-styles: false,
+  $govuk-input-border-colour: nhsuk.$nhsuk-form-border-color,
+  $govuk-new-organisation-colours: true,
+  $govuk-colours: (
+    "red": nhsuk.$color_nhsuk-red,
+    "yellow": nhsuk.$color_nhsuk-yellow,
+    "green": nhsuk.$color_nhsuk-green,
+    "blue": nhsuk.$color_nhsuk-blue,
+    "dark-blue": #003087,
+    "light-blue": #41b6e6,
+    "purple": nhsuk.$color_nhsuk-purple,
+    "black": nhsuk.$color_nhsuk-black,
+    "dark-grey": nhsuk.$color_nhsuk-grey-1,
+    "mid-grey": nhsuk.$color_nhsuk-grey-3,
+    "light-grey": nhsuk.$color_nhsuk-grey-5,
+    "white": nhsuk.$color_nhsuk-white,
+    "light-purple": #6f72af,
+    "bright-purple": #912b88,
+    "pink": nhsuk.$color_nhsuk-pink,
+    "light-pink": #f499be,
+    "orange": nhsuk.$color_nhsuk-orange,
+    "brown": #b58840,
+    "light-green": #78be20,
+    "turquoise": nhsuk.$color_nhsuk-aqua-green
+  )
+);
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/_index.scss
@@ -1,3 +1,4 @@
-@import "pkg:govuk-frontend/dist/govuk/components/file-upload";
-@import "pkg:govuk-frontend/dist/govuk/components/notification-banner";
-@import "pkg:govuk-frontend/dist/govuk/components/pagination";
+@forward "file-upload";
+@forward "notification-banner";
+@forward "pagination";
+@forward "password-input";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/file-upload/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/file-upload/_index.scss
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/notification-banner/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/notification-banner/_index.scss
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/pagination/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/pagination/_index.scss
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/password-input/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/password-input/_index.scss
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/utilities/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/utilities/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/components/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/components/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/utilities/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/utilities/_index.scss

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`.app-action-list {`
`2`	`4`	`display: flex;`
`3`	`5`	`padding: 0;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`$_counter-size: 2rem;`
`2`	`4`
`3`	`5`	`.app-add-another {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`.app-autocomplete__wrapper {`
`2`	`4`	`position: relative;`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`.app-button-group {`
`2`	`4`	`align-items: center;`
`3`	`5`	`display: flex;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@use "sass:color";`
	`2`	`+@use "../vendor/nhsuk-frontend" as *;`
`2`	`3`
`3`	`4`	`$_button-shadow-size: $nhsuk-border-width-form-element * 2;`
`4`	`5`	`$_secondary-warning-button-hover-color: color.change(`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+@use "../core" as app;`
	`3`	`+`
`1`	`4`	`.app-card {`
`2`	`5`	`&--aqua-green {`
`3`	`6`	`.nhsuk-card__heading--feature {`
`@@ -7,7 +10,7 @@`
`7`	`10`
`8`	`11`	`&--dark-orange {`
`9`	`12`	`.nhsuk-card__heading--feature {`
`10`		`- background-color: $color_app-dark-orange;`
	`13`	`+ background-color: app.$color_dark-orange;`
`11`	`14`	`}`
`12`	`15`	`}`
`13`	`16`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`.app-dev-tools {`
`2`	`4`	`background-color: $color_nhsuk-pale-yellow;`
`3`	`5`	`background-image: linear-gradient(`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend" as *;`
	`2`	`+`
`1`	`3`	`.app-environment {`
`2`	`4`	`@include nhsuk-font-size(14);`
`3`	`5`	`@include nhsuk-responsive-padding(2, bottom);`