From 7db8e5dcb37b0782790a34b56f3ca3fcf4026181 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 18 Feb 2025 18:15:44 +0000 Subject: [PATCH] Migrate to Sass modules --- docs/contributing/coding-standards.md | 8 +- docs/installation/installing-with-npm.md | 18 +++-- .../components/action-link/_action-link.scss | 8 ++ packages/components/back-link/_back-link.scss | 6 ++ .../components/breadcrumb/_breadcrumb.scss | 6 ++ packages/components/button/_button.scss | 6 ++ packages/components/card/card.scss | 6 ++ .../character-count/_character-count.scss | 2 + .../components/checkboxes/_checkboxes.scss | 6 ++ .../contents-list/_contents-list.scss | 5 ++ .../components/date-input/_date-input.scss | 3 + packages/components/details/_details.scss | 9 +++ .../do-dont-list/_do-dont-list.scss | 3 + .../error-message/_error-message.scss | 4 + .../error-summary/_error-summary.scss | 7 ++ packages/components/fieldset/_fieldset.scss | 5 ++ packages/components/footer/_footer.scss | 9 ++- .../header/_header-organisation.scss | 6 ++ .../components/header/_header-service.scss | 6 ++ .../header/_header-transactional.scss | 6 ++ packages/components/header/_header-white.scss | 5 ++ packages/components/header/_header.scss | 10 +++ packages/components/hero/_hero.scss | 6 ++ packages/components/hint/_hint.scss | 4 + packages/components/images/_images.scss | 8 +- packages/components/input/_input.scss | 8 ++ .../components/inset-text/_inset-text.scss | 6 ++ packages/components/label/_label.scss | 4 + .../components/pagination/_pagination.scss | 7 ++ packages/components/panel/_panel.scss | 7 ++ packages/components/radios/_radios.scss | 9 +++ packages/components/select/_select.scss | 6 ++ packages/components/skip-link/_skip-link.scss | 3 + .../summary-list/_summary-list.scss | 5 ++ packages/components/tables/_tables.scss | 7 ++ packages/components/tabs/_tabs.scss | 7 ++ packages/components/tag/_tag.scss | 4 + packages/components/task-list/_task-list.scss | 4 + packages/components/textarea/_textarea.scss | 6 ++ .../warning-callout/_warning-callout.scss | 3 + packages/core/all.scss | 56 ++++++------- packages/core/elements/_links.scss | 4 + packages/core/elements/_page.scss | 5 ++ packages/core/elements/_table.scss | 7 ++ packages/core/generic/_font-face.scss | 3 + packages/core/objects/_form-group.scss | 4 + packages/core/objects/_grid.scss | 3 + packages/core/objects/_main-wrapper.scss | 5 ++ packages/core/objects/_width-container.scss | 4 + packages/core/settings/_all.scss | 10 +-- packages/core/settings/_colours.scss | 4 +- packages/core/settings/_typography.scss | 12 +-- packages/core/styles/_icons.scss | 3 + packages/core/styles/_lists.scss | 3 + packages/core/styles/_section-break.scss | 3 + packages/core/styles/_typography.scss | 6 ++ packages/core/tools/_all.scss | 22 +++--- packages/core/tools/_exports.scss | 4 +- packages/core/tools/_focused.scss | 3 + packages/core/tools/_functions.scss | 5 +- packages/core/tools/_grid.scss | 9 ++- packages/core/tools/_links.scss | 4 + packages/core/tools/_mixins.scss | 6 ++ packages/core/tools/_sass-mq.scss | 16 ++-- packages/core/tools/_spacing.scss | 9 ++- packages/core/tools/_typography.scss | 11 ++- packages/core/utilities/_clearfix.scss | 2 + packages/core/utilities/_grid-widths.scss | 5 +- packages/core/utilities/_link-nowrap.scss | 2 + packages/core/utilities/_list-border.scss | 2 + packages/core/utilities/_reading-width.scss | 2 + packages/core/utilities/_spacing.scss | 4 + packages/core/utilities/_typography.scss | 7 +- packages/core/utilities/_visually-hidden.scss | 2 + packages/core/utilities/_widths.scss | 5 +- packages/nhsuk.scss | 78 +++++++++---------- 76 files changed, 443 insertions(+), 135 deletions(-) diff --git a/docs/contributing/coding-standards.md b/docs/contributing/coding-standards.md index 17abe1037..9d87b7a34 100755 --- a/docs/contributing/coding-standards.md +++ b/docs/contributing/coding-standards.md @@ -133,10 +133,12 @@ Create separate selectors rather using an `&` in the middle of a selector. This enables the NHSUK styles to be used inside other applications, where, for example, an ID is being used to isolate a section of a page to style separately from the rest of an application; e.g. ```scss +@use "sass:meta"; + div#nhsuk-ers { -// ... -@import "node_modules/nhsuk-frontend/packages/core/all"; -// ... + // ... + @include meta.load-css("node_modules/nhsuk-frontend/packages/core/all"); + // ... } ``` diff --git a/docs/installation/installing-with-npm.md b/docs/installation/installing-with-npm.md index 81dfbc4bd..9ed53529e 100644 --- a/docs/installation/installing-with-npm.md +++ b/docs/installation/installing-with-npm.md @@ -36,20 +36,28 @@ You will need to import a couple of things into your project before you can star To build the stylesheet you will need a pipeline set up to compile [Sass](https://sass-lang.com/) files to CSS. We recommend using [gulp](https://gulpjs.com/) and [gulp-sass](https://www.npmjs.com/package/gulp-sass) however you can use any tools that you are familiar with. -You need to import the NHS.UK frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass imports). +You need to include the NHS.UK frontend styles into the main Sass file in your project. You should place the below code before your own Sass rules (or Sass `@use`). ```scss -@import "node_modules/nhsuk-frontend/packages/nhsuk"; +@use "node_modules/nhsuk-frontend/packages/nhsuk" as *; ``` -Alternatively you can import each of the individual components separately, meaning you can import just the components that you are using. +Alternatively you can use NHS.UK frontend styles with custom configuration: + +```scss +@use "node_modules/nhsuk-frontend/packages/nhsuk" as * with ( + $nhsuk-include-font-face: false +); +``` + +Or to use only the minimum components necessary: ```scss // Core (required) -@import "node_modules/nhsuk-frontend/packages/core/all"; +@use "node_modules/nhsuk-frontend/packages/core/all" as *; // Individual component (optional) -@import "node_modules/nhsuk-frontend/packages/components/action-link/action-link"; +@use "node_modules/nhsuk-frontend/packages/components/action-link/action-link" as *; ``` ## Importing JavaScript diff --git a/packages/components/action-link/_action-link.scss b/packages/components/action-link/_action-link.scss index 1b0abca02..fd2671de1 100644 --- a/packages/components/action-link/_action-link.scss +++ b/packages/components/action-link/_action-link.scss @@ -1,3 +1,11 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/typography" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Action link component /// diff --git a/packages/components/back-link/_back-link.scss b/packages/components/back-link/_back-link.scss index 1e1da4d10..d20ad4f3d 100644 --- a/packages/components/back-link/_back-link.scss +++ b/packages/components/back-link/_back-link.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/links" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Back link component /// diff --git a/packages/components/breadcrumb/_breadcrumb.scss b/packages/components/breadcrumb/_breadcrumb.scss index 10e9ad7c9..34e0fb588 100644 --- a/packages/components/breadcrumb/_breadcrumb.scss +++ b/packages/components/breadcrumb/_breadcrumb.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Breadcrumb component /// diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss index a1575eb02..5b93d4f08 100644 --- a/packages/components/button/_button.scss +++ b/packages/components/button/_button.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Button component /// diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss index a9622046b..f4999214c 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Card component /// diff --git a/packages/components/character-count/_character-count.scss b/packages/components/character-count/_character-count.scss index d488aeb0d..8475ba2b9 100644 --- a/packages/components/character-count/_character-count.scss +++ b/packages/components/character-count/_character-count.scss @@ -1,3 +1,5 @@ +@use "../../core/tools/spacing" as *; + .nhsuk-character-count { @include nhsuk-responsive-margin(6, "bottom"); diff --git a/packages/components/checkboxes/_checkboxes.scss b/packages/components/checkboxes/_checkboxes.scss index c9818e2f9..51ab81b1e 100644 --- a/packages/components/checkboxes/_checkboxes.scss +++ b/packages/components/checkboxes/_checkboxes.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Checkboxes component /// diff --git a/packages/components/contents-list/_contents-list.scss b/packages/components/contents-list/_contents-list.scss index 9ef030a2f..14e4984d7 100644 --- a/packages/components/contents-list/_contents-list.scss +++ b/packages/components/contents-list/_contents-list.scss @@ -1,3 +1,8 @@ +@use "../../core/settings/typography" as *; +@use "../../core/tools/functions" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; + //// /// Contents list component /// diff --git a/packages/components/date-input/_date-input.scss b/packages/components/date-input/_date-input.scss index 76c71e31f..55363f8d6 100644 --- a/packages/components/date-input/_date-input.scss +++ b/packages/components/date-input/_date-input.scss @@ -1,3 +1,6 @@ +@use "../../core/tools/mixins" as *; +@use "../../core/tools/spacing" as *; + //// /// Date input component /// diff --git a/packages/components/details/_details.scss b/packages/components/details/_details.scss index 5e26d210f..ae3592195 100644 --- a/packages/components/details/_details.scss +++ b/packages/components/details/_details.scss @@ -1,3 +1,12 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/shape-arrow" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Details component /// diff --git a/packages/components/do-dont-list/_do-dont-list.scss b/packages/components/do-dont-list/_do-dont-list.scss index 6148784da..966d67a60 100644 --- a/packages/components/do-dont-list/_do-dont-list.scss +++ b/packages/components/do-dont-list/_do-dont-list.scss @@ -1,3 +1,6 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; + //// /// Do and Don't list component /// diff --git a/packages/components/error-message/_error-message.scss b/packages/components/error-message/_error-message.scss index d37392864..cb6486828 100644 --- a/packages/components/error-message/_error-message.scss +++ b/packages/components/error-message/_error-message.scss @@ -1,3 +1,7 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Error message component /// diff --git a/packages/components/error-summary/_error-summary.scss b/packages/components/error-summary/_error-summary.scss index 14709fd52..0f7138248 100644 --- a/packages/components/error-summary/_error-summary.scss +++ b/packages/components/error-summary/_error-summary.scss @@ -1,3 +1,10 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Error summary component /// diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss index fe71cdf1e..c35e013de 100644 --- a/packages/components/fieldset/_fieldset.scss +++ b/packages/components/fieldset/_fieldset.scss @@ -1,3 +1,8 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Fieldset component /// diff --git a/packages/components/footer/_footer.scss b/packages/components/footer/_footer.scss index c42461eb8..838ac0169 100644 --- a/packages/components/footer/_footer.scss +++ b/packages/components/footer/_footer.scss @@ -1,11 +1,16 @@ +@use "sass:math"; +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Footer component /// /// @group components //// -@use "sass:math"; - .nhsuk-footer-container { @include clearfix; @include print-hide; diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss index 72133c309..508dad00f 100644 --- a/packages/components/header/_header-organisation.scss +++ b/packages/components/header/_header-organisation.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; + /// These are the styles for the organisation header variants. .nhsuk-header--organisation { diff --git a/packages/components/header/_header-service.scss b/packages/components/header/_header-service.scss index f9a5cf304..08bd9d9ac 100644 --- a/packages/components/header/_header-service.scss +++ b/packages/components/header/_header-service.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + /// These are the styles for the service header variants. .nhsuk-header__link--service { diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss index 8616307d3..6ebb5fbce 100644 --- a/packages/components/header/_header-transactional.scss +++ b/packages/components/header/_header-transactional.scss @@ -1,3 +1,9 @@ +@use "../../core/tools/links" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + /// These are the styles for the transactional header variants. .nhsuk-header__transactional-service-name { diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss index d06a1b13b..1c3e275e9 100644 --- a/packages/components/header/_header-white.scss +++ b/packages/components/header/_header-white.scss @@ -1,3 +1,8 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; + /// These are the styles for the white header variants. .nhsuk-header--white { diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 7712af774..0426ea96e 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -1,3 +1,13 @@ +@use "../../core/objects/width-container" as *; +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/links" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Header component /// diff --git a/packages/components/hero/_hero.scss b/packages/components/hero/_hero.scss index 6860a9e13..32a4217bc 100644 --- a/packages/components/hero/_hero.scss +++ b/packages/components/hero/_hero.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; + //// /// Hero component shared styles /// diff --git a/packages/components/hint/_hint.scss b/packages/components/hint/_hint.scss index 814e4aaa1..1a902351f 100644 --- a/packages/components/hint/_hint.scss +++ b/packages/components/hint/_hint.scss @@ -1,3 +1,7 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Hint component /// diff --git a/packages/components/images/_images.scss b/packages/components/images/_images.scss index 9f0f60029..ee2886e59 100644 --- a/packages/components/images/_images.scss +++ b/packages/components/images/_images.scss @@ -1,3 +1,9 @@ +@use "sass:math"; +@use "../../core/settings/colours" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Image component /// @@ -9,8 +15,6 @@ /// @group components //// -@use "sass:math"; - .nhsuk-image { background-color: $color_nhsuk-white; border-bottom: 1px solid $color_nhsuk-grey-4; diff --git a/packages/components/input/_input.scss b/packages/components/input/_input.scss index 38d33f10c..f50a39f5c 100644 --- a/packages/components/input/_input.scss +++ b/packages/components/input/_input.scss @@ -1,3 +1,11 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/functions" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Input component /// diff --git a/packages/components/inset-text/_inset-text.scss b/packages/components/inset-text/_inset-text.scss index 778019fc2..e58e77631 100644 --- a/packages/components/inset-text/_inset-text.scss +++ b/packages/components/inset-text/_inset-text.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; + //// /// Inset text component /// diff --git a/packages/components/label/_label.scss b/packages/components/label/_label.scss index d6c8b40c0..b73c2ee9d 100644 --- a/packages/components/label/_label.scss +++ b/packages/components/label/_label.scss @@ -1,3 +1,7 @@ +@use "../../core/settings/typography" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Label component /// diff --git a/packages/components/pagination/_pagination.scss b/packages/components/pagination/_pagination.scss index 5d4021aef..f9cb223ce 100644 --- a/packages/components/pagination/_pagination.scss +++ b/packages/components/pagination/_pagination.scss @@ -1,3 +1,10 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Pagination component /// diff --git a/packages/components/panel/_panel.scss b/packages/components/panel/_panel.scss index 05aa6a17a..6d264ec78 100644 --- a/packages/components/panel/_panel.scss +++ b/packages/components/panel/_panel.scss @@ -1,3 +1,10 @@ +@use "../../core/settings/colours" as *; +// @use "../../core/tools/focused" as *; +// @use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Panel component /// diff --git a/packages/components/radios/_radios.scss b/packages/components/radios/_radios.scss index 56513f18a..bdfc043e4 100644 --- a/packages/components/radios/_radios.scss +++ b/packages/components/radios/_radios.scss @@ -1,3 +1,12 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; +@use "../checkboxes/checkboxes" as *; + //// /// Radios component /// diff --git a/packages/components/select/_select.scss b/packages/components/select/_select.scss index f8f8418b3..39dcfc0b6 100644 --- a/packages/components/select/_select.scss +++ b/packages/components/select/_select.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Select component /// diff --git a/packages/components/skip-link/_skip-link.scss b/packages/components/skip-link/_skip-link.scss index e9df162f7..7587896c9 100644 --- a/packages/components/skip-link/_skip-link.scss +++ b/packages/components/skip-link/_skip-link.scss @@ -1,3 +1,6 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/spacing" as *; + //// /// Skip link component /// diff --git a/packages/components/summary-list/_summary-list.scss b/packages/components/summary-list/_summary-list.scss index 8c85e5d73..388d2efcc 100644 --- a/packages/components/summary-list/_summary-list.scss +++ b/packages/components/summary-list/_summary-list.scss @@ -1,3 +1,8 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Summary list component /// diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss index 24741f5d3..9e1c3bd42 100644 --- a/packages/components/tables/_tables.scss +++ b/packages/components/tables/_tables.scss @@ -1,3 +1,10 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/typography" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Table component /// diff --git a/packages/components/tabs/_tabs.scss b/packages/components/tabs/_tabs.scss index ea9c4e551..b7cc8f03f 100644 --- a/packages/components/tabs/_tabs.scss +++ b/packages/components/tabs/_tabs.scss @@ -1,3 +1,10 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/links" as *; +@use "../../core/tools/mixins" as *; +@use "../../core/tools/sass-mq" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + .nhsuk-tabs { @include nhsuk-responsive-margin(1, "top"); @include nhsuk-responsive-margin(6, "bottom"); diff --git a/packages/components/tag/_tag.scss b/packages/components/tag/_tag.scss index 0817fc314..6e5fc7c4f 100644 --- a/packages/components/tag/_tag.scss +++ b/packages/components/tag/_tag.scss @@ -1,3 +1,7 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Footer component /// diff --git a/packages/components/task-list/_task-list.scss b/packages/components/task-list/_task-list.scss index 62248bd05..a227d06de 100644 --- a/packages/components/task-list/_task-list.scss +++ b/packages/components/task-list/_task-list.scss @@ -1,3 +1,7 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Task list component /// diff --git a/packages/components/textarea/_textarea.scss b/packages/components/textarea/_textarea.scss index 9a636cc03..1e20aa934 100644 --- a/packages/components/textarea/_textarea.scss +++ b/packages/components/textarea/_textarea.scss @@ -1,3 +1,9 @@ +@use "../../core/settings/colours" as *; +@use "../../core/settings/globals" as *; +@use "../../core/tools/focused" as *; +@use "../../core/tools/spacing" as *; +@use "../../core/tools/typography" as *; + //// /// Textarea component /// diff --git a/packages/components/warning-callout/_warning-callout.scss b/packages/components/warning-callout/_warning-callout.scss index 6395cb38f..aa9f8f26f 100644 --- a/packages/components/warning-callout/_warning-callout.scss +++ b/packages/components/warning-callout/_warning-callout.scss @@ -1,3 +1,6 @@ +@use "../../core/settings/colours" as *; +@use "../../core/tools/mixins" as *; + //// /// Warning callout component /// diff --git a/packages/core/all.scss b/packages/core/all.scss index 13fc3c92d..23ae71b72 100644 --- a/packages/core/all.scss +++ b/packages/core/all.scss @@ -3,43 +3,43 @@ //// // Settings -@import "settings/all"; +@forward "settings/all"; // Tools -@import "tools/all"; +@forward "tools/all"; // Generic -@import "generic/box-sizing"; -@import "generic/font-face"; +@forward "generic/box-sizing"; +@forward "generic/font-face"; // Elements -@import "elements/forms"; -@import "elements/links"; -@import "elements/page"; -@import "elements/table"; +@forward "elements/forms"; +@forward "elements/links"; +@forward "elements/page"; +@forward "elements/table"; // Objects -@import "objects/form-group"; -@import "objects/grid"; -@import "objects/main-wrapper"; -@import "objects/width-container"; +@forward "objects/form-group"; +@forward "objects/grid"; +@forward "objects/main-wrapper"; +@forward "objects/width-container"; // Styles -@import "styles/icons"; -@import "styles/lists"; -@import "styles/section-break"; -@import "styles/typography"; +@forward "styles/icons"; +@forward "styles/lists"; +@forward "styles/section-break"; +@forward "styles/typography"; // Utilities -@import "utilities/clearfix"; -@import "utilities/display"; -@import "utilities/float"; -@import "utilities/grid-widths"; -@import "utilities/link-nowrap"; -@import "utilities/list-border"; -@import "utilities/reading-width"; -@import "utilities/spacing"; -@import "utilities/text-align"; -@import "utilities/typography"; -@import "utilities/visually-hidden"; -@import "utilities/widths"; +@forward "utilities/clearfix"; +@forward "utilities/display"; +@forward "utilities/float"; +@forward "utilities/grid-widths"; +@forward "utilities/link-nowrap"; +@forward "utilities/list-border"; +@forward "utilities/reading-width"; +@forward "utilities/spacing"; +@forward "utilities/text-align"; +@forward "utilities/typography"; +@forward "utilities/visually-hidden"; +@forward "utilities/widths"; diff --git a/packages/core/elements/_links.scss b/packages/core/elements/_links.scss index adfb4e824..2b556d011 100644 --- a/packages/core/elements/_links.scss +++ b/packages/core/elements/_links.scss @@ -1,3 +1,7 @@ +@use "../settings/colours" as *; +@use "../tools/links" as *; +@use "../tools/sass-mq" as *; + //// /// Links /// diff --git a/packages/core/elements/_page.scss b/packages/core/elements/_page.scss index ca7915f2f..cf69c66a4 100644 --- a/packages/core/elements/_page.scss +++ b/packages/core/elements/_page.scss @@ -1,3 +1,8 @@ +@use "../generic/font-face" as *; +@use "../settings/colours" as *; +@use "../settings/globals" as *; +@use "../tools/typography" as *; + //// /// Page /// diff --git a/packages/core/elements/_table.scss b/packages/core/elements/_table.scss index 0f23b7d23..cca2990f5 100644 --- a/packages/core/elements/_table.scss +++ b/packages/core/elements/_table.scss @@ -1,3 +1,10 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; +@use "../settings/typography" as *; +@use "../tools/sass-mq" as *; +@use "../tools/spacing" as *; +@use "../tools/typography" as *; + //// /// Tables /// diff --git a/packages/core/generic/_font-face.scss b/packages/core/generic/_font-face.scss index 7fc23c202..b7939a5cd 100644 --- a/packages/core/generic/_font-face.scss +++ b/packages/core/generic/_font-face.scss @@ -1,3 +1,6 @@ +@use "../settings/globals" as *; +@use "../settings/typography" as *; + //// /// Font face /// diff --git a/packages/core/objects/_form-group.scss b/packages/core/objects/_form-group.scss index b4245abd0..df1a745ba 100644 --- a/packages/core/objects/_form-group.scss +++ b/packages/core/objects/_form-group.scss @@ -1,3 +1,7 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; +@use "../tools/spacing" as *; + .nhsuk-form-group { @include nhsuk-responsive-margin(4, "bottom"); diff --git a/packages/core/objects/_grid.scss b/packages/core/objects/_grid.scss index 72b518b95..d6c13afba 100644 --- a/packages/core/objects/_grid.scss +++ b/packages/core/objects/_grid.scss @@ -1,3 +1,6 @@ +@use "../tools/exports" as *; +@use "../tools/grid" as *; + //// /// Grid /// diff --git a/packages/core/objects/_main-wrapper.scss b/packages/core/objects/_main-wrapper.scss index 9ee0d10d7..b2a082b92 100644 --- a/packages/core/objects/_main-wrapper.scss +++ b/packages/core/objects/_main-wrapper.scss @@ -1,3 +1,8 @@ +@use "../tools/exports" as *; +@use "../tools/mixins" as *; +@use "../tools/sass-mq" as *; +@use "../tools/spacing" as *; + //// /// Page wrapper for the grid system /// diff --git a/packages/core/objects/_width-container.scss b/packages/core/objects/_width-container.scss index aa5a7e5e0..1473e8537 100644 --- a/packages/core/objects/_width-container.scss +++ b/packages/core/objects/_width-container.scss @@ -1,3 +1,7 @@ +@use "../settings/globals" as *; +@use "../tools/exports" as *; +@use "../tools/sass-mq" as *; + //// /// Page width for the grid system /// diff --git a/packages/core/settings/_all.scss b/packages/core/settings/_all.scss index f7119574d..921bfc627 100644 --- a/packages/core/settings/_all.scss +++ b/packages/core/settings/_all.scss @@ -2,8 +2,8 @@ /// Settings //// -@import "breakpoints"; -@import "colours"; -@import "globals"; -@import "spacing"; -@import "typography"; +@forward "breakpoints"; +@forward "colours"; +@forward "globals"; +@forward "spacing"; +@forward "typography"; diff --git a/packages/core/settings/_colours.scss b/packages/core/settings/_colours.scss index bcee12a1d..cdd160229 100644 --- a/packages/core/settings/_colours.scss +++ b/packages/core/settings/_colours.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + //// /// NHS colour palette /// @@ -12,8 +14,6 @@ /// @group settings //// -@use "sass:color"; - // stylelint-disable color-no-hex $color_nhsuk-blue: #005eb8; diff --git a/packages/core/settings/_typography.scss b/packages/core/settings/_typography.scss index c866cf152..d84c6405e 100644 --- a/packages/core/settings/_typography.scss +++ b/packages/core/settings/_typography.scss @@ -1,3 +1,5 @@ +@forward "globals" show $nhsuk-font-normal, $nhsuk-font-bold; + //// /// Typography /// @@ -154,13 +156,3 @@ $nhsuk-typography-scale: ( ) ) ) !default; - -/// Font weights - -/// Font weight for normal typography - -$nhsuk-font-normal: 400 !default; - -/// Font weight for bold typography - -$nhsuk-font-bold: 600 !default; diff --git a/packages/core/styles/_icons.scss b/packages/core/styles/_icons.scss index 8d2e8a09d..5791ab8b5 100644 --- a/packages/core/styles/_icons.scss +++ b/packages/core/styles/_icons.scss @@ -1,3 +1,6 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; + //// /// Icons /// diff --git a/packages/core/styles/_lists.scss b/packages/core/styles/_lists.scss index 540534e2f..cc49562c0 100644 --- a/packages/core/styles/_lists.scss +++ b/packages/core/styles/_lists.scss @@ -1,3 +1,6 @@ +@use "../tools/spacing" as *; +@use "../tools/typography" as *; + //// /// Lists /// diff --git a/packages/core/styles/_section-break.scss b/packages/core/styles/_section-break.scss index a274a07ea..6e746e052 100644 --- a/packages/core/styles/_section-break.scss +++ b/packages/core/styles/_section-break.scss @@ -1,3 +1,6 @@ +@use "../settings/colours" as *; +@use "../tools/spacing" as *; + //// /// Section break /// diff --git a/packages/core/styles/_typography.scss b/packages/core/styles/_typography.scss index 8bd21b08a..85c25a10d 100644 --- a/packages/core/styles/_typography.scss +++ b/packages/core/styles/_typography.scss @@ -1,3 +1,9 @@ +@use "../settings/colours" as *; +@use "../settings/typography" as *; +@use "../tools/sass-mq" as *; +@use "../tools/spacing" as *; +@use "../tools/typography" as *; + //// /// Typography /// diff --git a/packages/core/tools/_all.scss b/packages/core/tools/_all.scss index 9eef9fb66..3e80560fc 100644 --- a/packages/core/tools/_all.scss +++ b/packages/core/tools/_all.scss @@ -2,14 +2,14 @@ /// Tools //// -@import "exports"; -@import "functions"; -@import "shape-arrow"; -@import "spacing"; -@import "sass-mq"; -@import "typography"; -@import "links"; -@import "mixins"; -@import "ifff"; -@import "grid"; -@import "focused"; +@forward "exports"; +@forward "functions"; +@forward "shape-arrow"; +@forward "spacing"; +@forward "sass-mq"; +@forward "typography"; +@forward "links"; +@forward "mixins"; +@forward "ifff"; +@forward "grid"; +@forward "focused"; diff --git a/packages/core/tools/_exports.scss b/packages/core/tools/_exports.scss index 7bf71acf5..b86b675d7 100644 --- a/packages/core/tools/_exports.scss +++ b/packages/core/tools/_exports.scss @@ -1,3 +1,5 @@ +@use "sass:list"; + //// /// Exports /// @@ -17,8 +19,6 @@ /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service) //// -@use "sass:list"; - $imported-modules: () !default; // [1] @mixin govuk-exports($name, $warn: true) { diff --git a/packages/core/tools/_focused.scss b/packages/core/tools/_focused.scss index 6293383a8..b4c72d1da 100644 --- a/packages/core/tools/_focused.scss +++ b/packages/core/tools/_focused.scss @@ -1,3 +1,6 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; + //// /// Focused /// diff --git a/packages/core/tools/_functions.scss b/packages/core/tools/_functions.scss index 4876d4688..8b14c74e0 100644 --- a/packages/core/tools/_functions.scss +++ b/packages/core/tools/_functions.scss @@ -1,11 +1,12 @@ +@use "sass:math"; +@use "../settings/globals" as *; + //// /// Functions /// /// @group tools //// -@use "sass:math"; - /// Convert pixels to em /// /// A quick way to convert px into em diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss index e98f1e0bb..6f957706c 100644 --- a/packages/core/tools/_grid.scss +++ b/packages/core/tools/_grid.scss @@ -1,3 +1,9 @@ +@use "sass:map"; +@use "sass:math"; +@use "../settings/globals" as *; +@use "mixins" as *; +@use "sass-mq" as *; + //// /// Grid /// @@ -5,9 +11,6 @@ /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service) //// -@use "sass:map"; -@use "sass:math"; - /// Map of grid column widths $_nhsuk-grid-widths: ( diff --git a/packages/core/tools/_links.scss b/packages/core/tools/_links.scss index cad03beb2..167f5cc65 100644 --- a/packages/core/tools/_links.scss +++ b/packages/core/tools/_links.scss @@ -1,3 +1,7 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; +@use "focused" as *; + //// /// Links /// diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss index 7b95dc531..d3dbdc42f 100644 --- a/packages/core/tools/_mixins.scss +++ b/packages/core/tools/_mixins.scss @@ -1,3 +1,9 @@ +@use "../settings/colours" as *; +@use "../settings/globals" as *; +@use "sass-mq" as *; +@use "spacing" as *; +@use "typography" as *; + //// /// Mixins /// diff --git a/packages/core/tools/_sass-mq.scss b/packages/core/tools/_sass-mq.scss index 6b8bc6ca5..f4c207951 100644 --- a/packages/core/tools/_sass-mq.scss +++ b/packages/core/tools/_sass-mq.scss @@ -1,22 +1,20 @@ +@use "../settings/breakpoints" as *; + //// /// Sass MQ /// /// We use sass-mq module for media queries /// -/// 1. Import sass-mq from our vendor dependencies folder opposed to node_modules +/// 1. Forward sass-mq from our vendor dependencies folder opposed to node_modules /// in case node_modules is not installed in the folder relative to the root folder /// /// @group tools -$sass-mq-already-included: false !default; - -@if $sass-mq-already-included { - $mq-show-breakpoints: (); -} - -@import "../vendor/sass-mq"; // [1] +@use "../vendor/sass-mq" as * with ( + $breakpoints: $mq-breakpoints +); // [1] -$sass-mq-already-included: true; +@forward "../vendor/sass-mq"; /// Helpers /// diff --git a/packages/core/tools/_spacing.scss b/packages/core/tools/_spacing.scss index 8447c0de2..6b13e2b2c 100644 --- a/packages/core/tools/_spacing.scss +++ b/packages/core/tools/_spacing.scss @@ -1,12 +1,15 @@ +@use "sass:map"; +@use "sass:meta"; +@use "../settings/spacing" as *; +@use "ifff" as *; +@use "sass-mq" as *; + //// /// Spacing /// /// @group tools //// -@use "sass:map"; -@use "sass:meta"; - /// Single point spacing /// /// Returns measurement corresponding to the spacing point requested. diff --git a/packages/core/tools/_typography.scss b/packages/core/tools/_typography.scss index b8a95fadf..200bed44b 100644 --- a/packages/core/tools/_typography.scss +++ b/packages/core/tools/_typography.scss @@ -1,3 +1,11 @@ +@use "sass:map"; +@use "sass:math"; +@use "../settings/colours" as *; +@use "../settings/typography" as *; +@use "functions" as *; +@use "ifff" as *; +@use "sass-mq" as *; + //// /// Typography /// @@ -7,9 +15,6 @@ /// @group tools //// -@use "sass:map"; -@use "sass:math"; - /// Text colour /// /// Sets the text colour, including a suitable override for print. diff --git a/packages/core/utilities/_clearfix.scss b/packages/core/utilities/_clearfix.scss index e826657c8..dfb47b549 100644 --- a/packages/core/utilities/_clearfix.scss +++ b/packages/core/utilities/_clearfix.scss @@ -1,3 +1,5 @@ +@use "../tools/mixins" as *; + //// /// Clearfix /// diff --git a/packages/core/utilities/_grid-widths.scss b/packages/core/utilities/_grid-widths.scss index 1bf6c27e8..4861afdec 100644 --- a/packages/core/utilities/_grid-widths.scss +++ b/packages/core/utilities/_grid-widths.scss @@ -1,3 +1,6 @@ +@use "sass:math"; +@use "../tools/sass-mq" as *; + //// /// Grid widths /// @@ -13,8 +16,6 @@ ///
//// -@use "sass:math"; - // Utility classes are allowed to use !important; // so we disable stylelint for that rule // stylelint-disable declaration-no-important diff --git a/packages/core/utilities/_link-nowrap.scss b/packages/core/utilities/_link-nowrap.scss index 036c4ff53..d2b9e838c 100644 --- a/packages/core/utilities/_link-nowrap.scss +++ b/packages/core/utilities/_link-nowrap.scss @@ -1,3 +1,5 @@ +@use "../tools/sass-mq" as *; + //// /// Link nowrap /// diff --git a/packages/core/utilities/_list-border.scss b/packages/core/utilities/_list-border.scss index 8b078b0e4..d95fff12c 100644 --- a/packages/core/utilities/_list-border.scss +++ b/packages/core/utilities/_list-border.scss @@ -1,3 +1,5 @@ +@use "../settings/colours" as *; + //// /// List border /// diff --git a/packages/core/utilities/_reading-width.scss b/packages/core/utilities/_reading-width.scss index 59d68c382..c5100530c 100644 --- a/packages/core/utilities/_reading-width.scss +++ b/packages/core/utilities/_reading-width.scss @@ -1,3 +1,5 @@ +@use "../tools/mixins" as *; + //// /// Reading width /// diff --git a/packages/core/utilities/_spacing.scss b/packages/core/utilities/_spacing.scss index 537661fbd..0e4bfdecf 100644 --- a/packages/core/utilities/_spacing.scss +++ b/packages/core/utilities/_spacing.scss @@ -1,3 +1,7 @@ +@use "../settings/spacing" as *; +@use "../tools/exports" as *; +@use "../tools/spacing" as *; + //// /// Spacing /// diff --git a/packages/core/utilities/_typography.scss b/packages/core/utilities/_typography.scss index b071a98b3..6e244b72f 100644 --- a/packages/core/utilities/_typography.scss +++ b/packages/core/utilities/_typography.scss @@ -1,11 +1,14 @@ +@use "sass:map"; +@use "../settings/colours" as *; +@use "../settings/typography" as *; +@use "../tools/typography" as *; + //// /// Typography /// /// @group utilities //// -@use "sass:map"; - // Utility classes are allowed to use !important; // so we disable stylelint for that rule diff --git a/packages/core/utilities/_visually-hidden.scss b/packages/core/utilities/_visually-hidden.scss index 08bf65eee..fa4c9fe89 100644 --- a/packages/core/utilities/_visually-hidden.scss +++ b/packages/core/utilities/_visually-hidden.scss @@ -1,3 +1,5 @@ +@use "../tools/mixins" as *; + //// /// Visually hidden /// diff --git a/packages/core/utilities/_widths.scss b/packages/core/utilities/_widths.scss index bfdc54d18..b87d81676 100644 --- a/packages/core/utilities/_widths.scss +++ b/packages/core/utilities/_widths.scss @@ -1,3 +1,6 @@ +@use "sass:math"; +@use "../tools/sass-mq" as *; + //// /// Widths /// @@ -10,8 +13,6 @@ /// //// -@use "sass:math"; - // Utility classes are allowed to use !important; // so we disable stylelint for that rule // stylelint-disable declaration-no-important diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss index a4a7eb39a..b61f75d94 100644 --- a/packages/nhsuk.scss +++ b/packages/nhsuk.scss @@ -1,42 +1,42 @@ // Core -@import "core/all"; +@forward "core/all"; // Components -@import "components/action-link/action-link"; -@import "components/back-link/back-link"; -@import "components/breadcrumb/breadcrumb"; -@import "components/button/button"; -@import "components/card/card"; -@import "components/contents-list/contents-list"; -@import "components/date-input/date-input"; -@import "components/details/details"; -@import "components/do-dont-list/do-dont-list"; -@import "components/error-message/error-message"; -@import "components/error-summary/error-summary"; -@import "components/fieldset/fieldset"; -@import "components/footer/footer"; -@import "components/header/header"; -@import "components/header/header-organisation"; -@import "components/header/header-service"; -@import "components/header/header-transactional"; -@import "components/header/header-white"; -@import "components/hero/hero"; -@import "components/hint/hint"; -@import "components/images/images"; -@import "components/input/input"; -@import "components/inset-text/inset-text"; -@import "components/label/label"; -@import "components/pagination/pagination"; -@import "components/panel/panel"; -@import "components/checkboxes/checkboxes"; -@import "components/radios/radios"; -@import "components/select/select"; -@import "components/skip-link/skip-link"; -@import "components/summary-list/summary-list"; -@import "components/tables/tables"; -@import "components/tag/tag"; -@import "components/task-list/task-list"; -@import "components/textarea/textarea"; -@import "components/warning-callout/warning-callout"; -@import "components/character-count/character-count"; -@import "components/tabs/tabs"; +@forward "components/action-link/action-link"; +@forward "components/back-link/back-link"; +@forward "components/breadcrumb/breadcrumb"; +@forward "components/button/button"; +@forward "components/card/card"; +@forward "components/contents-list/contents-list"; +@forward "components/date-input/date-input"; +@forward "components/details/details"; +@forward "components/do-dont-list/do-dont-list"; +@forward "components/error-message/error-message"; +@forward "components/error-summary/error-summary"; +@forward "components/fieldset/fieldset"; +@forward "components/footer/footer"; +@forward "components/header/header"; +@forward "components/header/header-organisation"; +@forward "components/header/header-service"; +@forward "components/header/header-transactional"; +@forward "components/header/header-white"; +@forward "components/hero/hero"; +@forward "components/hint/hint"; +@forward "components/images/images"; +@forward "components/input/input"; +@forward "components/inset-text/inset-text"; +@forward "components/label/label"; +@forward "components/pagination/pagination"; +@forward "components/panel/panel"; +@forward "components/checkboxes/checkboxes"; +@forward "components/radios/radios"; +@forward "components/select/select"; +@forward "components/skip-link/skip-link"; +@forward "components/summary-list/summary-list"; +@forward "components/tables/tables"; +@forward "components/tag/tag"; +@forward "components/task-list/task-list"; +@forward "components/textarea/textarea"; +@forward "components/warning-callout/warning-callout"; +@forward "components/character-count/character-count"; +@forward "components/tabs/tabs";