design_system 0.10.0 → 0.12.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/objects/_main-wrapper.scss

@@ -0,0 +1,66 @@
+@use "../tools" as *;
+
+////
+/// Page wrapper for the grid system
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+///
+/// @example html - Example usage with Breadcrumbs, phase banners, back links
+///   <div class="nhsuk-width-container">
+///     <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+///     <div class="nhsuk-main-wrapper">
+///       <!-- Wrapper for the main content of your page which applies padding
+///         to the top / bottom -->
+///     </div>
+///   </div>
+///
+/// @example html - Example usage without Breadcrumbs, phase banners, back links
+///   <div class="nhsuk-width-container">
+///     <div class="nhsuk-main-wrapper nhsuk-main-wrapper--l">
+///       <!-- Wrapper for the main content of your page which applies padding
+///         to the top / bottom -->
+///     </div>
+///   </div>
+///
+/// @group objects/layout
+////
+
+@include nhsuk-exports("nhsuk/core/objects/main-wrapper") {
+  .nhsuk-main-wrapper {
+    // In IE11 the `main` element can be used, but is not recognized  –
+    // meaning it's not defined in IE's default style sheet,
+    // so it uses CSS initial value, which is inline.
+    display: block;
+    padding-top: nhsuk-spacing(4);
+    padding-bottom: nhsuk-spacing(4);
+    @include nhsuk-top-and-bottom;
+
+    @include nhsuk-media-query($from: tablet) {
+      padding-top: nhsuk-spacing(7);
+      padding-bottom: nhsuk-spacing(7);
+    }
+  }
+
+  .nhsuk-main-wrapper--l {
+    padding-top: nhsuk-spacing(6);
+    padding-bottom: nhsuk-spacing(6);
+
+    @include nhsuk-media-query($from: tablet) {
+      padding-top: nhsuk-spacing(8);
+      padding-bottom: nhsuk-spacing(8);
+    }
+  }
+
+  .nhsuk-main-wrapper--s {
+    padding-top: nhsuk-spacing(3);
+    padding-bottom: nhsuk-spacing(3);
+
+    @include nhsuk-media-query($from: tablet) {
+      padding-top: nhsuk-spacing(4);
+      padding-bottom: nhsuk-spacing(4);
+    }
+  }
+}
+
+/*# sourceMappingURL=_main-wrapper.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/objects/_width-container.scss

@@ -0,0 +1,98 @@
+@use "sass:string";
+@use "../settings" as *;
+@use "../tools" as *;
+
+////
+/// @group objects/layout
+////
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$nhsuk-page-width] - Width in pixels
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @example scss - Creating a 1200px wide container class
+///   .app-width-container--wide {
+///     @include nhsuk-width-container(1200px);
+///   }
+
+@mixin nhsuk-width-container($width: $nhsuk-page-width) {
+  // By default, limit the width of the container to the page width
+  max-width: $width;
+
+  // On mobile, add half width gutters
+  margin-right: $nhsuk-gutter-half;
+  margin-left: $nhsuk-gutter-half;
+
+  // Respect 'display cutout' safe area (avoids notches and rounded corners)
+  @supports (margin: string.unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-left));
+
+    // Use max() to pick largest margin, default or with safe area
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: string.unquote("max(#{$nhsuk-gutter-half}, #{$gutter-safe-area-right})");
+    margin-left: string.unquote("max(#{$nhsuk-gutter-half}, #{$gutter-safe-area-left})");
+  }
+
+  // On desktop, add full width gutters
+  @include nhsuk-media-query($from: desktop) {
+    margin-right: $nhsuk-gutter;
+    margin-left: $nhsuk-gutter;
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: calc(#{$nhsuk-gutter-half} + env(safe-area-inset-left));
+
+      // Use max() to pick largest margin, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: string.unquote("max(#{$nhsuk-gutter}, #{$gutter-safe-area-right})");
+      margin-left: string.unquote("max(#{$nhsuk-gutter}, #{$gutter-safe-area-left})");
+    }
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @include nhsuk-media-query($and: "(min-width: #{($width + $nhsuk-gutter * 2)})") {
+    margin-right: auto;
+    margin-left: auto;
+
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}
+
+@mixin nhsuk-width-container-fluid {
+  // Full width container, spanning the entire width of the viewport
+  max-width: 100%;
+
+  // On mobile, add half width gutters
+  margin-right: $nhsuk-gutter-half;
+  margin-left: $nhsuk-gutter-half;
+
+  // On desktop, add full width gutters
+  @include nhsuk-media-query($from: desktop) {
+    margin-right: $nhsuk-gutter;
+    margin-left: $nhsuk-gutter;
+  }
+}
+
+@include nhsuk-exports("nhsuk/core/objects/width-container") {
+  .nhsuk-width-container {
+    @include nhsuk-width-container;
+  }
+
+  .nhsuk-width-container-fluid {
+    @include nhsuk-width-container-fluid;
+  }
+}
+
+/*# sourceMappingURL=_width-container.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/settings/_all.scss

@@ -1,4 +1,4 @@
-@use "warnings" as *;
+@use "../settings" as *;
 @forward ".";
 
 @include nhsuk-warning(
@@ -6,3 +6,5 @@
   "Importing using 'core/settings/all' is deprecated. Update your import statement to import 'core/settings'.",
   $silence-further-warnings: false
 );
+
+/*# sourceMappingURL=_all.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/settings/_breakpoints.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+@use "sass:meta";
+
+////
+/// @group settings/layout
+////
+
+/// Breakpoint definitions
+///
+/// @type Map
+
+$nhsuk-breakpoints: (
+  mobile: 320px,
+  tablet: 641px,
+  desktop: 769px,
+  large-desktop: 990px
+) !default;
+
+/// Show active breakpoint in top-right corner.
+///
+/// Only use this during local development.
+///
+/// @type List
+
+$nhsuk-show-breakpoints: () !default;
+
+@if meta.type-of($nhsuk-show-breakpoints) == "bool" {
+  @if $nhsuk-show-breakpoints {
+    $nhsuk-show-breakpoints: map.keys($nhsuk-breakpoints);
+  } @else {
+    $nhsuk-show-breakpoints: ();
+  }
+}
+
+/*# sourceMappingURL=_breakpoints.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/settings/_colours-applied.scss

@@ -0,0 +1,326 @@
+@use "../helpers/colour" as *;
+
+////
+/// NHS colour variables
+///
+/// @group settings/colours
+///
+
+// =========================================================
+// Generic
+// =========================================================
+
+/// Brand colour
+///
+/// @type Colour
+
+$nhsuk-brand-colour: nhsuk-colour("blue") !default;
+
+/// Text colour
+///
+/// @type Colour
+
+$nhsuk-text-colour: nhsuk-colour("black") !default;
+
+/// Text colour (reverse)
+///
+/// @type Colour
+
+$nhsuk-reverse-text-colour: nhsuk-colour("white") !default;
+
+/// Template background colour
+///
+/// Used by components that want to give the illusion of extending
+/// the template background (such as the footer).
+///
+/// @type Colour
+
+$nhsuk-template-background-colour: nhsuk-colour("grey-4") !default;
+
+/// Body background colour
+///
+/// @type Colour
+
+$nhsuk-body-background-colour: nhsuk-colour("grey-5") !default;
+
+/// Card background colour
+///
+/// @type Colour
+
+$nhsuk-card-background-colour: nhsuk-colour("white") !default;
+
+/// Text colour for print media
+///
+/// Use 'true black' to avoid printers using colour ink to print body text
+///
+/// @type Colour
+
+$nhsuk-print-text-colour: #000000 !default;
+
+/// Secondary text colour
+///
+/// Used in for example 'muted' text and help text.
+///
+/// @type Colour
+
+$nhsuk-secondary-text-colour: nhsuk-colour("grey-1") !default;
+
+/// Focus colour
+///
+/// Used for outline (and background, where appropriate) when interactive
+/// elements (links, form controls) have keyboard focus.
+///
+/// @type Colour
+
+$nhsuk-focus-colour: nhsuk-colour("yellow") !default;
+
+/// Focused text colour
+///
+/// Ensure that the contrast between the text and background colour passes
+/// WCAG Level AA contrast requirements.
+///
+/// @type Colour
+
+$nhsuk-focus-text-colour: nhsuk-colour("black") !default;
+
+/// Error colour
+///
+/// Used to highlight error messages and form controls in an error state
+///
+/// @type Colour
+
+$nhsuk-error-colour: nhsuk-colour("red") !default;
+
+/// Success colour
+///
+/// Used to highlight success messages and banners
+///
+/// @type Colour
+
+$nhsuk-success-colour: nhsuk-colour("green") !default;
+
+/// Border colour
+///
+/// Used in for example borders, separators, rules and keylines.
+///
+/// @type Colour
+
+$nhsuk-border-colour: nhsuk-colour("grey-4") !default;
+
+/// Border hover colour
+///
+/// @type Colour
+
+$nhsuk-border-hover-colour: nhsuk-colour("grey-3") !default;
+
+/// Secondary border colour
+///
+/// @type Colour
+
+$nhsuk-secondary-border-colour: rgba(nhsuk-colour("white"), 0.2) !default;
+
+/// Form border colour
+///
+/// Used for form inputs and controls
+///
+/// @type Colour
+
+$nhsuk-input-border-colour: nhsuk-colour("grey-1") !default;
+
+/// Input hover colour
+///
+/// Used for hover states on form controls
+///
+/// @type Colour
+
+$nhsuk-hover-colour: nhsuk-colour("grey-3") !default;
+
+/// Form element background colour
+///
+/// @type Colour
+
+$nhsuk-input-background-colour: nhsuk-colour("white") !default;
+
+// =============================================================================
+// Links
+// =============================================================================
+
+/// Link colour
+///
+/// @type Colour
+
+$nhsuk-link-colour: nhsuk-colour("blue") !default;
+
+/// Visited link colour
+///
+/// @type Colour
+
+$nhsuk-link-visited-colour: nhsuk-colour("purple") !default;
+
+/// Link hover colour
+///
+/// @type Colour
+
+$nhsuk-link-hover-colour: nhsuk-colour("dark-pink") !default;
+
+/// Active link colour
+///
+/// @type Colour
+
+$nhsuk-link-active-colour: nhsuk-shade($nhsuk-link-colour, 50%) !default;
+
+// =============================================================================
+// Buttons
+// =============================================================================
+
+/// Button background colour
+///
+/// @type Colour
+
+$nhsuk-button-colour: nhsuk-colour("green") !default;
+
+/// Button text colour
+///
+/// @type Colour
+
+$nhsuk-button-text-colour: nhsuk-colour("white") !default;
+
+/// Button background colour (hover)
+///
+/// @type Colour
+
+$nhsuk-button-hover-colour: nhsuk-shade($nhsuk-button-colour, 20%) !default;
+
+/// Button background colour (active)
+///
+/// @type Colour
+
+$nhsuk-button-active-colour: nhsuk-shade($nhsuk-button-colour, 50%) !default;
+
+/// Button shadow colour
+///
+/// @type Colour
+
+$nhsuk-button-shadow-colour: nhsuk-shade($nhsuk-button-colour, 50%) !default;
+
+/// Secondary button background colour
+///
+/// @type Colour
+
+$nhsuk-secondary-button-colour: transparent !default;
+
+/// Secondary button (solid background) background colour
+///
+/// @type Colour
+
+$nhsuk-secondary-button-solid-background-colour: nhsuk-colour("white") !default;
+
+/// Secondary button border colour
+///
+/// @type Colour
+
+$nhsuk-secondary-button-border-colour: $nhsuk-brand-colour !default;
+
+/// Secondary button text colour
+///
+/// @type Colour
+
+$nhsuk-secondary-button-text-colour: $nhsuk-brand-colour !default;
+
+/// Secondary button background colour (hover)
+///
+/// @type Colour
+
+$nhsuk-secondary-button-hover-colour: nhsuk-tint($nhsuk-secondary-button-border-colour, 85%) !default;
+
+/// Secondary button background colour (active)
+///
+/// @type Colour
+
+$nhsuk-secondary-button-active-colour: nhsuk-tint($nhsuk-secondary-button-border-colour, 78%) !default;
+
+/// Secondary button shadow colour
+///
+/// @type Colour
+
+$nhsuk-secondary-button-shadow-colour: $nhsuk-secondary-button-border-colour !default;
+
+/// Reverse button background colour
+///
+/// @type Colour
+
+$nhsuk-reverse-button-colour: nhsuk-colour("white") !default;
+
+/// Reverse button text colour
+///
+/// @type Colour
+
+$nhsuk-reverse-button-text-colour: nhsuk-colour("black") !default;
+
+/// Reverse button background colour (hover)
+///
+/// @type Colour
+
+$nhsuk-reverse-button-hover-colour: nhsuk-shade($nhsuk-reverse-button-colour, 15%) !default;
+
+/// Reverse button background colour (active)
+///
+/// @type Colour
+
+$nhsuk-reverse-button-active-colour: nhsuk-shade($nhsuk-reverse-button-colour, 30%) !default;
+
+/// Reverse button shadow colour
+///
+/// @type Colour
+
+$nhsuk-reverse-button-shadow-colour: nhsuk-shade($nhsuk-reverse-button-colour, 30%) !default;
+
+/// Warning button background colour
+///
+/// @type Colour
+
+$nhsuk-warning-button-colour: nhsuk-colour("red") !default;
+
+/// Warning button background colour (hover)
+///
+/// @type Colour
+
+$nhsuk-warning-button-hover-colour: nhsuk-shade($nhsuk-warning-button-colour, 20%) !default;
+
+/// Warning button background colour (active)
+///
+/// @type Colour
+
+$nhsuk-warning-button-active-colour: nhsuk-shade($nhsuk-warning-button-colour, 50%) !default;
+
+/// Warning button shadow colour
+///
+/// @type Colour
+
+$nhsuk-warning-button-shadow-colour: nhsuk-shade($nhsuk-warning-button-colour, 50%) !default;
+
+/// Login button background colour
+///
+/// @type Colour
+
+$nhsuk-login-button-colour: $nhsuk-brand-colour !default;
+
+/// Login button background colour (hover)
+///
+/// @type Colour
+
+$nhsuk-login-button-hover-colour: nhsuk-shade($nhsuk-login-button-colour, 20%) !default;
+
+/// Login button background colour (active)
+///
+/// @type Colour
+
+$nhsuk-login-button-active-colour: nhsuk-shade($nhsuk-login-button-colour, 50%) !default;
+
+/// Login button shadow colour
+///
+/// @type Colour
+
+$nhsuk-login-button-shadow-colour: nhsuk-shade($nhsuk-login-button-colour, 50%) !default;
+
+/*# sourceMappingURL=_colours-applied.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/settings/_colours-deprecated.scss

@@ -0,0 +1,116 @@
+// stylelint-disable scss/dollar-variable-pattern
+
+@use "../helpers/colour" as *;
+@use "colours-applied" as *;
+
+////
+/// NHS colour variables (deprecated)
+///
+/// @group settings/colours
+///
+
+// Primary colours
+// @deprecated To be removed in v11.0
+$color_nhsuk-blue: nhsuk-colour("blue");
+$color_nhsuk-white: nhsuk-colour("white");
+$color_nhsuk-black: nhsuk-colour("black");
+$color_nhsuk-green: nhsuk-colour("green");
+$color_nhsuk-purple: nhsuk-colour("purple");
+$color_nhsuk-dark-pink: nhsuk-colour("dark-pink");
+$color_nhsuk-red: nhsuk-colour("red");
+$color_nhsuk-yellow: nhsuk-colour("yellow");
+
+// Secondary colours
+// @deprecated To be removed in v11.0
+$color_nhsuk-dark-blue: nhsuk-colour("dark-blue");
+$color_nhsuk-pale-yellow: nhsuk-colour("pale-yellow");
+$color_nhsuk-warm-yellow: nhsuk-colour("warm-yellow");
+$color_nhsuk-orange: nhsuk-colour("orange");
+$color_nhsuk-aqua-green: nhsuk-colour("aqua-green");
+$color_nhsuk-pink: nhsuk-colour("pink");
+
+// Greyscale
+// @deprecated To be removed in v11.0
+$color_nhsuk-grey-1: nhsuk-colour("grey-1");
+$color_nhsuk-grey-2: nhsuk-colour("grey-2");
+$color_nhsuk-grey-3: nhsuk-colour("grey-3");
+$color_nhsuk-grey-4: nhsuk-colour("grey-4");
+$color_nhsuk-grey-5: nhsuk-colour("grey-5");
+
+// Text (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-text-color: $nhsuk-text-colour;
+$nhsuk-reverse-text-color: $nhsuk-reverse-text-colour;
+$nhsuk-print-text-color: $nhsuk-print-text-colour;
+$nhsuk-secondary-text-color: $nhsuk-secondary-text-colour;
+
+// Focus (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-focus-color: $nhsuk-focus-colour;
+$nhsuk-focus-text-color: $nhsuk-focus-text-colour;
+
+// Error, Success (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-error-color: $nhsuk-error-colour;
+$nhsuk-success-color: $nhsuk-success-colour;
+
+// Border (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-border-color: $nhsuk-border-colour;
+$nhsuk-secondary-border-color: $nhsuk-secondary-border-colour;
+
+// Forms (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-form-border-color: $nhsuk-input-border-colour;
+$nhsuk-form-border-colour: $nhsuk-input-border-colour;
+$nhsuk-form-element-background-color: $nhsuk-input-background-colour;
+$nhsuk-form-element-background-colour: $nhsuk-input-background-colour;
+
+// Links (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-link-color: $nhsuk-link-colour;
+$nhsuk-link-visited-color: $nhsuk-link-visited-colour;
+$nhsuk-link-hover-color: $nhsuk-link-hover-colour;
+$nhsuk-link-active-color: $nhsuk-link-active-colour;
+
+// Buttons (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-button-color: $nhsuk-button-colour;
+$nhsuk-button-text-color: $nhsuk-button-text-colour;
+$nhsuk-button-hover-color: $nhsuk-button-hover-colour;
+$nhsuk-button-active-color: $nhsuk-button-active-colour;
+$nhsuk-button-shadow-color: $nhsuk-button-shadow-colour;
+
+// Secondary buttons (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-secondary-button-color: $nhsuk-secondary-button-colour;
+$nhsuk-secondary-button-solid-background-color: $nhsuk-secondary-button-solid-background-colour;
+$nhsuk-secondary-button-border-color: $nhsuk-secondary-button-border-colour;
+$nhsuk-secondary-button-text-color: $nhsuk-secondary-button-text-colour;
+$nhsuk-secondary-button-hover-color: $nhsuk-secondary-button-hover-colour;
+$nhsuk-secondary-button-active-color: $nhsuk-secondary-button-active-colour;
+$nhsuk-secondary-button-shadow-color: $nhsuk-secondary-button-shadow-colour;
+
+// Reverse buttons (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-reverse-button-color: $nhsuk-reverse-button-colour;
+$nhsuk-reverse-button-text-color: $nhsuk-reverse-button-text-colour;
+$nhsuk-reverse-button-hover-color: $nhsuk-reverse-button-hover-colour;
+$nhsuk-reverse-button-active-color: $nhsuk-reverse-button-active-colour;
+$nhsuk-reverse-button-shadow-color: $nhsuk-reverse-button-shadow-colour;
+
+// Warning buttons (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-warning-button-color: $nhsuk-warning-button-colour;
+$nhsuk-warning-button-hover-color: $nhsuk-warning-button-hover-colour;
+$nhsuk-warning-button-active-color: $nhsuk-warning-button-active-colour;
+$nhsuk-warning-button-shadow-color: $nhsuk-warning-button-shadow-colour;
+
+// Login buttons (legacy spelling)
+// @deprecated To be removed in v11.0
+$nhsuk-login-button-color: $nhsuk-login-button-colour;
+$nhsuk-login-button-hover-color: $nhsuk-login-button-hover-colour;
+$nhsuk-login-button-active-color: $nhsuk-login-button-active-colour;
+$nhsuk-login-button-shadow-color: $nhsuk-login-button-shadow-colour;
+
+/*# sourceMappingURL=_colours-deprecated.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/settings/_colours-palette.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+
+////
+/// @group settings/colours
+////
+
+/// NHS colour palette
+///
+/// @type Map
+///
+/// @prop $colour - Representation for the given $colour, where $colour is the
+///   friendly name for the colour (e.g. "red": #ff0000);
+
+$nhsuk-colours: (
+  // Primary
+  "blue": #005eb8,
+  "white": #ffffff,
+  "black": #212b32,
+  "green": #007f3b,
+  "purple": #330072,
+  "dark-pink": #7c2855,
+  "red": #d5281b,
+  "yellow": #ffeb3b,
+
+  // Secondary
+  "dark-blue": #003087,
+  "pale-yellow": #fff9c4,
+  "warm-yellow": #ffb81c,
+  "orange": #ed8b00,
+  "aqua-green": #00a499,
+  "pink": #ae2573,
+
+  // Greyscale
+  "grey-1": #4c6272,
+  "grey-2": #768692,
+  "grey-3": #aeb7bd,
+  "grey-4": #d8dde0,
+  "grey-5": #f0f4f5
+) !default;
+
+/*# sourceMappingURL=_colours-palette.scss.map */