design_system 0.10.0 → 0.12.0

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

@@ -7,22 +7,15 @@
 /// @group styles
 ////
 
-///
-/// Headings
-///
-/// The % (silent class) allows code to be extended (@extend) to other elements
-/// without bloating the code.
-///
-/// @example scss
-///   .foo {
-///     @extend %nhsuk-heading-xl;
-///   }
-////
+// Headings
+//
+// The % (silent class) allows code to be extended (@extend) to other elements
+// without bloating the code.
 
 %nhsuk-heading-xl {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(48);
   @include nhsuk-responsive-margin(7, "bottom");
@@ -35,8 +28,8 @@ h1,
 
 %nhsuk-heading-l {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(36);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -49,8 +42,8 @@ h2,
 
 %nhsuk-heading-m {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(26);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -63,8 +56,8 @@ h3,
 
 %nhsuk-heading-s {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(22);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -77,8 +70,8 @@ h4,
 
 %nhsuk-heading-xs {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(19);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -91,8 +84,8 @@ h5,
 
 %nhsuk-heading-xxs {
   display: block;
-  font-weight: $nhsuk-font-bold;
   margin-top: 0;
+  font-weight: $nhsuk-font-weight-bold;
 
   @include nhsuk-font-size(19);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -103,43 +96,43 @@ h6,
   @extend %nhsuk-heading-xxs;
 }
 
-/// Captions to be used inside headings
+// Captions to be used inside headings
 
 .nhsuk-caption-xl {
-  color: $nhsuk-secondary-text-color;
   display: block;
   margin-bottom: nhsuk-spacing(1);
+  color: $nhsuk-secondary-text-colour;
 
   @include nhsuk-font(26);
 }
 
 .nhsuk-caption-l {
-  color: $nhsuk-secondary-text-color;
   display: block;
   margin-bottom: nhsuk-spacing(1);
+  color: $nhsuk-secondary-text-colour;
 
   @include nhsuk-font(22);
 }
 
 .nhsuk-caption-m {
-  color: $nhsuk-secondary-text-color;
   display: block;
+  color: $nhsuk-secondary-text-colour;
 
   @include nhsuk-font(19);
 }
 
 .nhsuk-caption--bottom {
-  margin-bottom: nhsuk-spacing(0);
   margin-top: nhsuk-spacing(1);
+  margin-bottom: nhsuk-spacing(0);
 }
 
-/// Body (paragraphs)
+// Body (paragraphs)
 
 %nhsuk-body-l {
   display: block;
   margin-top: 0;
 
-  @include nhsuk-font-size(26);
+  @include nhsuk-font(26);
   @include nhsuk-responsive-margin(5, "bottom");
 }
 
@@ -151,11 +144,12 @@ h6,
   display: block;
   margin-top: 0;
 
-  @include nhsuk-font-size(19);
+  @include nhsuk-font(19);
   @include nhsuk-responsive-margin(4, "bottom");
 }
 
 p,
+.nhsuk-body,
 .nhsuk-body-m {
   @extend %nhsuk-body-m;
   color: inherit;
@@ -165,7 +159,7 @@ p,
   display: block;
   margin-top: 0;
 
-  @include nhsuk-font-size(16);
+  @include nhsuk-font(16);
   @include nhsuk-responsive-margin(4, "bottom");
 }
 
@@ -179,10 +173,10 @@ address {
   font-style: normal;
 }
 
-/// Lede text
-///
-/// 1. Apply lede text styling to p and ul within the lede element
-/// 2. Reduces the spacing between the page heading and the lede text
+// Lede text
+//
+// 1. Apply lede text styling to p and ul within the lede element
+// 2. Reduces the spacing between the page heading and the lede text
 
 .nhsuk-lede-text {
   @include nhsuk-font(26);
@@ -206,13 +200,11 @@ h1 + .nhsuk-lede-text--small {
   margin-top: -(nhsuk-spacing(2));
 }
 
-/// Contextual adjustments
-///
-/// Add top padding to headings that appear directly after paragraphs.
-///
-/// 1. Removes the padding-top because of the lede-text's increased margin-bottom
-///
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+// Contextual adjustments
+//
+// Add top padding to headings that appear directly after paragraphs.
+//
+// 1. Removes the padding-top because of the lede-text's increased margin-bottom
 
 %nhsuk-body-l + %nhsuk-heading-l {
   padding-top: nhsuk-spacing(1);
@@ -243,11 +235,11 @@ h1 + .nhsuk-lede-text--small {
   padding-top: 0;
 }
 
-/// Font weight for <strong> and <b>
+// Font weight for <strong> and <b>
 
 strong,
 b {
-  font-weight: $nhsuk-font-bold;
+  font-weight: $nhsuk-font-weight-bold;
 }
 
 @include nhsuk-media-query($media-type: print) {
@@ -273,6 +265,7 @@ b {
   p,
   .nhsuk-body-m,
   .nhsuk-body-s,
+  .nhsuk-body,
   address,
   ol,
   ul,
@@ -295,3 +288,5 @@ b {
     padding-top: 0.45em;
   }
 }
+
+/*# sourceMappingURL=_typography.scss.map */

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

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

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_buttons.scss

@@ -0,0 +1,85 @@
+@use "sass:math";
+@use "../settings" as *;
+@use "./functions" as *;
+
+////
+/// Buttons
+///
+/// @group tools
+////
+
+/// Button styling with colour overrides
+///
+/// @param {Colour} $button-colour [$nhsuk-button-colour] - Button background colour
+/// @param {Colour} $button-hover-colour [$nhsuk-button-hover-colour - Button hover background colour
+/// @param {Colour} $button-text-colour [$nhsuk-button-text-colour] - Button text colour
+/// @param {Colour} $button-shadow-colour [$nhsuk-button-shadow-colour] - Button shadow colour
+/// @param {Colour} $button-border-colour - Button border colour (optional, e.g. secondary button)
+///
+
+@mixin nhsuk-button-style(
+  $button-colour: $nhsuk-button-colour,
+  $button-hover-colour: $nhsuk-button-hover-colour,
+  $button-active-colour: $nhsuk-button-active-colour,
+  $button-text-colour: $nhsuk-button-text-colour,
+  $button-shadow-colour: $nhsuk-button-shadow-colour,
+  $button-border-colour: null
+) {
+  background-color: $button-colour;
+  box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;
+
+  &,
+  &:visited,
+  &:hover,
+  &:hover:visited,
+  &:active,
+  &:active:visited {
+    color: $button-text-colour;
+  }
+
+  &:hover {
+    background-color: $button-hover-colour;
+  }
+
+  &:active,
+  &:active:focus {
+    background-color: $button-active-colour;
+  }
+
+  // Handle shadow on both the button and the pseudo element. The button shadow
+  // remains in place to prevent any pixel gaps due to browser rounding
+  @if $button-border-colour {
+    &,
+    &::after {
+      box-shadow: 0 $nhsuk-button-shadow-size 0 $button-shadow-colour;
+    }
+
+    &:active,
+    &:active:focus {
+      border-color: $button-border-colour;
+    }
+
+    // Set border on click area for default and hover states which allows the
+    // border to render underneath the shadow and hide pixel artifacts, but
+    // ensuring the active "pressed" and focus states have priority
+    &:not(:focus):not(:active)::before {
+      border-color: $button-border-colour;
+    }
+
+    // Inset the pseudo element shadow away from the edges, to restore lost
+    // border radius (and its shadow) previously hidden by the 2px border
+    &:not(:focus)::after {
+      right: 0;
+      left: 0;
+      border-radius: nhsuk-px-to-rem(math.div($nhsuk-button-border-radius, 2));
+    }
+
+    // Remove the pseudo element shadow when focused or pressed
+    &:focus::after,
+    &:active::after {
+      box-shadow: none;
+    }
+  }
+}
+
+/*# sourceMappingURL=_buttons.scss.map */

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

@@ -34,14 +34,4 @@ $imported-modules: () !default;
   // found in the list and so nothing will be outputted.
 }
 
-/// Export module (deprecated)
-///
-/// @alias nhsuk-exports
-/// @deprecated To be removed in v10.0, replaced by nhsuk-exports
-
-@mixin govuk-exports($args...) {
-  @include nhsuk-warning("govuk-exports", "govuk-exports is deprecated. Use nhsuk-exports instead.");
-  @include nhsuk-exports($args...) {
-    @content;
-  }
-}
+/*# sourceMappingURL=_exports.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_focused.scss

@@ -0,0 +1,134 @@
+@use "../settings" as *;
+
+////
+/// Focused
+///
+/// @group tools
+/// @link https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+////
+
+/// Focused text
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for interactive text-based elements.
+
+@mixin nhsuk-focused-text {
+  // When colours are overridden, for example when users have a dark mode,
+  // backgrounds and box-shadows disappear, so we need to ensure there's a
+  // transparent outline which will be set to a visible colour.
+  outline: $nhsuk-focus-width solid transparent;
+  background-color: $nhsuk-focus-colour;
+  box-shadow:
+    0 -2px $nhsuk-focus-colour,
+    0 $nhsuk-focus-width $nhsuk-focus-text-colour;
+
+  // When link is focussed, hide the default underline since the
+  // box shadow adds the "underline"
+  text-decoration: none;
+
+  &,
+  .nhsuk-icon {
+    color: $nhsuk-focus-text-colour;
+    fill: $nhsuk-focus-text-colour;
+  }
+}
+
+/// Focused input (form elements)
+///
+/// Provides an additional outline and border to clearly indicate when
+/// the target element has focus. Used for interactive input-based elements such
+/// as text inputs.
+
+@mixin nhsuk-focused-input {
+  border: $nhsuk-border-width-form-element solid $nhsuk-focus-text-colour;
+  outline: $nhsuk-focus-width solid $nhsuk-focus-colour;
+  // Ensure outline appears outside of the element
+  outline-offset: 0;
+  // Double the border by adding its width again. Use `box-shadow` to do
+  // this instead of changing `border-width` (which changes element size)
+  // and since `outline` is already used for the yellow focus state.
+  box-shadow: inset 0 0 0 $nhsuk-border-width-form-element $nhsuk-focus-text-colour;
+}
+
+/// Focused radio input (form element)
+///
+/// Provides an additional outline and border to clearly indicate when
+/// the target element has focus. Used by radios.
+///
+/// @param {Number} $focus-width [$nhsuk-focus-width + 1px] - Focus width
+
+@mixin nhsuk-focused-radio($focus-width: $nhsuk-focus-width + 1px) {
+  border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;
+
+  // When colours are overridden, the yellow box-shadow becomes invisible
+  // which means the focus state is less obvious. By adding a transparent
+  // outline, which becomes solid (text-coloured) in that context, we ensure
+  // the focus remains clearly visible.
+  outline: $nhsuk-focus-width solid transparent;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 $focus-width $nhsuk-focus-colour;
+
+  // When in an explicit forced-color mode, we can use the Highlight system
+  // color for the outline to better match focus states of native controls
+  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+    outline-color: Highlight;
+  }
+}
+
+/// Focused checkbox input (form element)
+///
+/// Provides an additional outline and border to clearly indicate when
+/// the target element has focus. Used by checkbox.
+
+@mixin nhsuk-focused-checkbox {
+  border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;
+
+  // When colours are overridden, the yellow box-shadow becomes invisible
+  // which means the focus state is less obvious. By adding a transparent
+  // outline, which becomes solid (text-coloured) in that context, we ensure
+  // the focus remains clearly visible.
+  outline: $nhsuk-focus-width solid transparent;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;
+
+  // When in an explicit forced-color mode, we can use the Highlight system
+  // color for the outline to better match focus states of native controls
+  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+    outline-color: Highlight;
+  }
+}
+
+/// Focused button
+///
+/// Provides an additional outline and background to clearly indicate when
+/// the target element has focus. Used for buttons.
+
+@mixin nhsuk-focused-button {
+  outline: $nhsuk-focus-width solid transparent;
+  outline-offset: $nhsuk-focus-width;
+  color: $nhsuk-focus-text-colour;
+  background-color: $nhsuk-focus-colour;
+  box-shadow: 0 $nhsuk-focus-width 0 0 $nhsuk-focus-text-colour;
+
+  &,
+  .nhsuk-icon {
+    color: $nhsuk-focus-text-colour;
+    fill: $nhsuk-focus-text-colour;
+  }
+}
+
+/// Focused box
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Unlike nhsuk-focused-text, which only draws an underline below the element,
+/// nhsuk-focused-box draws an outline around all sides of the element.
+/// Best used for non-text content contained within links.
+
+@mixin nhsuk-focused-box {
+  outline: $nhsuk-focus-width solid transparent;
+  box-shadow:
+    0 0 0 4px $nhsuk-focus-colour,
+    0 0 0 8px $nhsuk-focus-text-colour;
+}
+
+/*# sourceMappingURL=_focused.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_functions.scss

@@ -0,0 +1,81 @@
+@use "sass:math";
+@use "../settings" as *;
+
+////
+/// Functions
+///
+/// @group tools
+////
+
+/// Convert pixels to em
+///
+/// @param {Number} $value - Length in pixels
+/// @param {Number} $context-font-size [$nhsuk-root-font-size] - Font size of element
+/// @return {Number} Length in ems
+///
+/// @example scss
+///   nhsuk-em(20px, $nhsuk-root-font-size);
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+
+@function nhsuk-em($value, $context-font-size: $nhsuk-root-font-size) {
+  @if math.is-unitless($value) {
+    $value: $value * 1px;
+  }
+
+  @if math.is-unitless($context-font-size) {
+    $context-font-size: $context-font-size * 1px;
+  }
+
+  @if math.compatible($value, 1rem) {
+    $value: math.div($value, 1rem) * $nhsuk-root-font-size;
+  }
+
+  @return math.div($value, $context-font-size) * 1em;
+}
+
+/// Convert pixels to rem
+///
+/// The $nhsuk-root-font-size (defined in settings/_globals.scss)
+/// must be configured to match the font-size of your root (html) element
+///
+/// @param {Number} $value - Length in pixels
+/// @return {Number} Length in rems
+///
+/// @example scss
+///   nhsuk-px-to-rem(20px);
+///
+
+@function nhsuk-px-to-rem($value) {
+  @if math.is-unitless($value) {
+    $value: $value * 1px;
+  }
+
+  @if math.compatible($value, 1rem) {
+    @return $value;
+  }
+
+  @return math.div($value, $nhsuk-root-font-size) * 1rem;
+}
+
+/// Get the size (△↕) of chevron, from base to tip, given a certain font size
+///
+/// @param {Number} $font-size [$nhsuk-root-font-size] - Font size to base chevron size on
+/// @return {String} Height of chevron in rems
+
+@function nhsuk-chevron-size($font-size: $nhsuk-root-font-size) {
+  @if math.is-unitless($font-size) {
+    $font-size: $font-size * 1px;
+  }
+
+  // Get unitless chevron border width
+  $border: math.div($nhsuk-chevron-border, 1px);
+
+  // Get unitless length of one side of the chevron, minus the border
+  $box-size: math.div($font-size, 2px) - $border;
+
+  // Calculate width (△↕) of the chevron, from base to tip
+  @return math.sqrt(math.pow($box-size, 2) + math.pow($box-size, 2)) * 0.5;
+}
+
+/*# sourceMappingURL=_functions.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_grid.scss

@@ -0,0 +1,74 @@
+@use "sass:map";
+@use "sass:math";
+@use "../settings" as *;
+@use "mixins" as *;
+@use "sass-mq" as *;
+
+////
+/// Grid
+///
+/// @group tools
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+////
+
+/// Grid width percentage
+///
+/// @param {String} $key - Name of grid width (e.g. two-thirds)
+/// @return {Number} Percentage width
+/// @throw if `$key` is not a valid grid width
+
+@function nhsuk-grid-width($key) {
+  @if map.has-key($nhsuk-grid-widths, $key) {
+    @return map.get($nhsuk-grid-widths, $key);
+  }
+
+  @error "Unknown grid width `#{$key}`";
+}
+
+/// Generate grid column styles
+///
+/// Creates a grid column with standard gutter between the columns.
+///
+/// Grid widths are defined in the `$nhsuk-grid-widths` map.
+///
+/// By default the column width changes from 100% to specified width at the
+/// 'desktop' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths
+/// @param {String} $float [left] left | right
+/// @param {String} $at [desktop] - mobile | tablet | desktop | any custom breakpoint
+///
+/// @example scss - Default
+///   .nhsuk-grid-column-two-thirds {
+///     @include nhsuk-grid-column(two-thirds)
+///   }
+///
+/// @example scss - Customising the breakpoint where width percentage is applied
+///   .nhsuk-grid-column-one-half-at-tablet {
+///     @include nhsuk-grid-column(one-half, $at: tablet);
+///   }
+///
+/// @example scss - Customising the float direction
+///   .nhsuk-grid-column-one-half-right {
+///     @include nhsuk-grid-column(two-thirds, $float: right);
+///   }
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+
+@mixin nhsuk-grid-column($width: full, $float: left, $at: desktop) {
+  box-sizing: border-box;
+
+  @if $at != tablet {
+    width: 100%;
+  }
+
+  padding: 0 $nhsuk-gutter-half;
+
+  @include nhsuk-media-query($from: $at) {
+    width: nhsuk-grid-width($width);
+    float: $float;
+  }
+}
+
+/*# sourceMappingURL=_grid.scss.map */

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

@@ -2,14 +2,18 @@
 /// Tools
 ////
 
+@forward "buttons";
 @forward "exports";
 @forward "functions";
 @forward "shape-arrow";
+@forward "shape-chevron";
+@forward "shape-dash";
 @forward "spacing";
 @forward "sass-mq";
 @forward "typography";
 @forward "links";
 @forward "mixins";
-@forward "ifff";
 @forward "grid";
 @forward "focused";
+
+/*# sourceMappingURL=_index.scss.map */