design_system 0.10.0 → 0.12.0

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

@@ -0,0 +1,12 @@
+@use "../settings" as *;
+@forward "colours-palette";
+@forward "colours-applied";
+@forward "colours-deprecated";
+
+@include nhsuk-warning(
+  "import-using-settings-colours",
+  "Importing using 'core/settings/colours' is deprecated. Update your import statement to import 'core/settings/colours-palette', 'core/settings/colours-applied' and 'core/settings/colours-deprecated'.",
+  $silence-further-warnings: false
+);
+
+/*# sourceMappingURL=_colours.scss.map */

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

@@ -0,0 +1,214 @@
+@use "sass:list";
+@use "sass:math";
+
+////
+/// Globals
+///
+/// @group settings/globals
+////
+
+// =========================================================
+// Font families
+// =========================================================
+
+// @deprecated To be removed in v11.0
+$nhsuk-font: "Frutiger W01" !default;
+
+// @deprecated To be removed in v11.0
+$nhsuk-font-fallback: arial, sans-serif !default;
+
+// @deprecated To be removed in v11.0
+$nhsuk-include-font-face: true !default;
+
+/// Font families to use for all typography on screen media
+///
+/// @type List
+
+$nhsuk-font-family: $nhsuk-font, $nhsuk-font-fallback !default;
+
+/// Font families to use for print media
+///
+/// We recommend that you use system fonts when printing. This will avoid issues
+/// with some printer drivers and operating systems.
+///
+/// @type List
+
+$nhsuk-font-family-print: sans-serif !default;
+
+/// Path or URL to the fonts folder, with trailing slash.
+///
+/// @type String
+
+$nhsuk-fonts-path: "https://assets.nhs.uk/fonts/" !default;
+
+/// Include the default @font-face declarations
+///
+/// Defaults to true if "Frutiger W01" appears in the $nhsuk-font-family
+/// setting.
+///
+/// @type Boolean
+
+$nhsuk-include-default-font-face: $nhsuk-include-font-face !default;
+
+@if not list.index($nhsuk-font-family, "Frutiger W01") {
+  $nhsuk-include-default-font-face: false;
+}
+
+// =========================================================
+// Font weights
+// =========================================================
+
+// @deprecated To be removed in v11.0
+$nhsuk-font-normal: 400 !default;
+
+// @deprecated To be removed in v11.0
+$nhsuk-font-bold: 600 !default;
+
+/// Font weight for normal typography
+///
+/// @type Number
+
+$nhsuk-font-weight-normal: $nhsuk-font-normal !default;
+
+/// Font weight for bold typography
+///
+/// @type Number
+
+$nhsuk-font-weight-bold: $nhsuk-font-bold !default;
+
+/// Feature flag for Apple Dynamic Type
+///
+/// When set to true, $nhsuk-include-dynamic-type will automatically apply the
+/// user's preferred text size on iOS and iPadOS devices.
+///
+/// Note: This flag adjusts `$nhsuk-root-font-size` from 16px to 17px when set.
+/// Please review all custom sizes not calculated relative to the root font
+/// size as they will not scale dynamically.
+///
+/// @type Boolean
+///
+/// @link https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type
+
+$nhsuk-include-dynamic-type: false !default;
+
+/// Root font size
+///
+/// This is used to calculate rem sizes for the typography, and should match the
+/// _effective_ font-size of your root (or html) element.
+///
+/// Ideally you should not be setting the font-size on the html or root element
+/// in order to allow it to scale with user-preference, in which case this
+/// should be set to 16px.
+///
+/// @type Number
+
+$nhsuk-root-font-size: 16px !default;
+
+@if $nhsuk-include-dynamic-type {
+  $nhsuk-root-font-size: 17px;
+}
+
+// =========================================================
+// Icon sizes
+// =========================================================
+
+$nhsuk-icon-size: 24px !default;
+$nhsuk-icon-size-large: 32px !default;
+
+// =========================================================
+// Page layout
+// =========================================================
+
+/// Width of main container
+///
+/// @type Number
+
+$nhsuk-page-width: 960px !default;
+
+/// Map of grid column widths
+///
+/// @type Map
+
+$nhsuk-grid-widths: (
+  one-quarter: math.percentage(math.div(1, 4)),
+  one-third: math.percentage(math.div(1, 3)),
+  one-half: math.percentage(math.div(1, 2)),
+  two-thirds: math.percentage(math.div(2, 3)),
+  three-quarters: math.percentage(math.div(3, 4)),
+  full: 100%
+) !default;
+
+/// Width of gutter between grid columns
+///
+/// @type Number
+
+$nhsuk-gutter: 32px !default;
+
+/// Width of half the gutter between grid columns
+///
+/// @type Number
+
+$nhsuk-gutter-half: math.div($nhsuk-gutter, 2);
+
+// =========================================================
+// Borders
+// =========================================================
+
+$nhsuk-border-width-inset-text: 8px !default;
+$nhsuk-chevron-border: 2px !default;
+$nhsuk-hero-border: 1px !default;
+$nhsuk-border-table-header-width: 2px !default;
+$nhsuk-border-table-cell-width: 1px !default;
+$nhsuk-border-radius: 4px !default;
+
+/// Standard border width
+///
+/// @type Number
+
+$nhsuk-border-width: 4px !default;
+
+/// Form control border width
+///
+/// @type Number
+
+$nhsuk-border-width-form-element: 2px !default;
+
+/// Form group border width when in error state
+///
+/// @type Number
+
+$nhsuk-border-width-form-group-error: $nhsuk-border-width !default;
+
+/// Border width of focus outline
+///
+/// @type Number
+
+$nhsuk-focus-width: 4px !default;
+
+/// Hover width for form controls with a hover state
+///
+/// @type Number
+
+$nhsuk-hover-width: 10px !default;
+
+/// Button border radius
+///
+/// @type Number
+
+$nhsuk-button-border-radius: 4px !default;
+
+/// Button shadow size
+///
+/// @type Number
+
+$nhsuk-button-shadow-size: 4px !default;
+
+/// Globals (deprecated)
+///
+
+// @deprecated To be removed in v11.0
+$nhsuk-base-font-size: $nhsuk-root-font-size;
+$nhsuk-border-width-form-element-error: $nhsuk-border-width-form-element;
+$nhsuk-border-width-mobile: $nhsuk-border-width;
+
+/*# sourceMappingURL=_globals.scss.map */

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

@@ -3,8 +3,12 @@
 ////
 
 @forward "breakpoints";
-@forward "colours";
+@forward "colours-palette";
+@forward "colours-applied";
+@forward "colours-deprecated";
 @forward "globals";
 @forward "spacing";
 @forward "typography";
 @forward "warnings";
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -1,7 +1,5 @@
 ////
-/// Spacing
-///
-/// @group settings
+/// @group settings/spacing
 ////
 
 /// Single point spacing variables
@@ -77,3 +75,5 @@ $nhsuk-spacing-responsive-scale: (
     tablet: 64px
   )
 ) !default;
+
+/*# sourceMappingURL=_spacing.scss.map */

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

@@ -1,9 +1,9 @@
-@forward "globals" show $nhsuk-font-normal, $nhsuk-font-bold;
+@forward "globals" show $nhsuk-font-normal, $nhsuk-font-bold, $nhsuk-font-weight-normal, $nhsuk-font-weight-bold;
 
 ////
 /// Typography
 ///
-/// @group settings
+/// @group settings/typography
 ////
 
 /// Responsive typography font map
@@ -85,38 +85,6 @@ $nhsuk-typography-scale: (
       line-height: 1.25
     )
   ),
-  24: (
-    null: (
-      font-size: 20px,
-      line-height: 28px
-    ),
-    tablet: (
-      font-size: 24px,
-      line-height: 31px
-    ),
-    print: (
-      font-size: 16pt,
-      line-height: 1.25
-    ),
-    deprecation: (
-      key: "nhsuk-typography-scale-24",
-      message: "24 on the typography scale is deprecated and will be removed in the next major version."
-    )
-  ),
-  _24: (
-    null: (
-      font-size: 20px,
-      line-height: 28px
-    ),
-    tablet: (
-      font-size: 24px,
-      line-height: 31px
-    ),
-    print: (
-      font-size: 16pt,
-      line-height: 1.25
-    )
-  ),
   22: (
     null: (
       font-size: 19px,
@@ -174,3 +142,16 @@ $nhsuk-typography-scale: (
     )
   )
 ) !default;
+
+/// System monospace font stack
+///
+/// Android typically avoids the "Courier" based monospace
+/// default but we need to specify fallbacks for others:
+///
+/// * Menlo - Font for older macOS, OS X versions
+/// * Cascadia Mono, Segoe UI Mono, Consolas - Fonts for Windows 11, 10, 8
+/// * Consolas - Font for older Windows versions
+/// * Liberation Mono - Font for Linux used by GitHub
+$nhsuk-code-font: menlo, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
+
+/*# sourceMappingURL=_typography.scss.map */

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

@@ -3,7 +3,7 @@
 ////
 /// Warnings
 ///
-/// @group settings
+/// @group settings/warnings
 ////
 
 /// Suppressed warnings map
@@ -17,11 +17,11 @@
 /// You can add to this map and define which warnings to suppress by appending to
 /// it using the warning key, found in the warning message. For example:
 ///
-/// @example scss:
+/// @example scss
 ///   // warning message:
 ///   //  $foobar is no longer supported. To silence this warning, update
-///   //  $govuk-suppressed-warnings with key: "foobar"
-///   $govuk-suppressed-warnings: (
+///   //  $nhsuk-suppressed-warnings with key: "foobar"
+///   $nhsuk-suppressed-warnings: (
 ///     foobar
 ///   );
 ///
@@ -42,7 +42,7 @@ $nhsuk-suppressed-warnings: () !default;
 /// `$nhsuk-suppressed-warnings` after `@warn` is called to ensure it only runs
 /// once per sass compilation
 ///
-/// @param {String} $key - The key to be checked against `$govuk-suppressed-warnings`
+/// @param {String} $key - The key to be checked against `$nhsuk-suppressed-warnings`
 /// and then passed to it to prevent multiple of the same warning.
 /// @param {String} $message - The message to use when calling `@warn`
 /// @param {Boolean} $silence-further-warnings - Whether to silence future
@@ -65,6 +65,8 @@ $nhsuk-suppressed-warnings: () !default;
 /// @param {String} $key - The key to be checked against `$nhsuk-suppressed-warnings`.
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @access private
 
 @function _should-warn($key) {
   @return list.index($nhsuk-suppressed-warnings, $key) == null;
@@ -76,7 +78,11 @@ $nhsuk-suppressed-warnings: () !default;
 /// @param {String} $message - The warning text.
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @access private
 
 @function _warning-text($key, $message) {
   @return $message + " To silence this warning, update $nhsuk-suppressed-warnings " + 'with key: "#{$key}"';
 }
+
+/*# sourceMappingURL=_warnings.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/styles/_icons.scss

@@ -0,0 +1,45 @@
+@use "sass:math";
+@use "../settings" as *;
+@use "../tools" as *;
+
+////
+/// Icons
+///
+/// @group styles
+////
+
+// Default icon styles
+
+.nhsuk-icon {
+  width: nhsuk-px-to-rem($nhsuk-icon-size);
+  height: nhsuk-px-to-rem($nhsuk-icon-size);
+  fill: currentcolor;
+
+  @include nhsuk-media-query($from: tablet) {
+    width: nhsuk-px-to-rem($nhsuk-icon-size-large);
+    height: nhsuk-px-to-rem($nhsuk-icon-size-large);
+  }
+}
+
+/// Icon size adjustments
+///
+/// @access private
+
+$_icon-sizes: (25%, 50%, 75%, 100%);
+
+@each $size in $_icon-sizes {
+  $ratio: math.div(100% + $size, 100%); // 25% adjustment = 1.25
+  $name: "size-#{math.div($size, 1%)}"; // 25% adjustment = "size-25"
+
+  .nhsuk-icon--#{$name} {
+    width: nhsuk-px-to-rem($nhsuk-icon-size * $ratio);
+    height: nhsuk-px-to-rem($nhsuk-icon-size * $ratio);
+
+    @include nhsuk-media-query($from: tablet) {
+      width: nhsuk-px-to-rem($nhsuk-icon-size-large * $ratio);
+      height: nhsuk-px-to-rem($nhsuk-icon-size-large * $ratio);
+    }
+  }
+}
+
+/*# sourceMappingURL=_icons.scss.map */

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

@@ -2,3 +2,5 @@
 @forward "lists";
 @forward "section-break";
 @forward "typography";
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -1,3 +1,4 @@
+@use "../settings" as *;
 @use "../tools" as *;
 
 ////
@@ -8,7 +9,7 @@
 ///
 /// 1. 'Random number' used to align ul and ol left with content.
 /// 2. 'Random number' used to give sufficient spacing between text and icon.
-/// 3. 'Random number' used to align icon and text.
+/// 3. Align icon and text.
 ///
 /// @group styles
 ///
@@ -19,9 +20,9 @@
 ////
 
 %nhsuk-list {
-  list-style-type: none;
   margin-top: 0;
   padding-left: 0;
+  list-style-type: none;
 
   @include nhsuk-font-size(19);
   @include nhsuk-responsive-margin(4, "bottom");
@@ -42,8 +43,8 @@
 }
 
 %nhsuk-list--bullet {
+  padding-left: nhsuk-px-to-rem(20px); // [1]
   list-style-type: disc;
-  padding-left: 20px; // [1]
 }
 
 .nhsuk-list--bullet {
@@ -51,8 +52,8 @@
 }
 
 %nhsuk-list--number {
+  padding-left: nhsuk-px-to-rem(20px); // [1]
   list-style-type: decimal;
-  padding-left: 20px; // [1]
 }
 
 %nhsuk-list + h2,
@@ -102,14 +103,18 @@ ol {
 
 .nhsuk-list--tick,
 .nhsuk-list--cross {
-  list-style: none;
-  margin-top: 0;
-  padding-left: 40px; // [2]
   position: relative;
+  margin-top: 0;
+  padding-left: nhsuk-px-to-rem($nhsuk-icon-size-large + nhsuk-spacing(1)); // [3]
+  list-style: none;
 
-  svg {
-    left: -4px; // [3]
-    margin-top: -5px; // [3]
+  .nhsuk-icon {
     position: absolute;
+    left: nhsuk-px-to-rem(-4px); // [3]
+    width: nhsuk-px-to-rem($nhsuk-icon-size-large);
+    height: nhsuk-px-to-rem($nhsuk-icon-size-large);
+    margin-top: nhsuk-px-to-rem(-4px); // [3]
   }
 }
+
+/*# sourceMappingURL=_lists.scss.map */

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

@@ -20,8 +20,8 @@
 ////
 
 %nhsuk-section-break {
-  border: 0;
   margin: 0;
+  border: 0;
 }
 
 .nhsuk-section-break {
@@ -56,7 +56,7 @@
 }
 
 %nhsuk-section-break--visible {
-  border-bottom: 1px solid $nhsuk-border-color;
+  border-bottom: 1px solid $nhsuk-border-colour;
 }
 
 .nhsuk-section-break--visible {
@@ -69,3 +69,5 @@ hr {
   @extend %nhsuk-section-break--l;
   @extend %nhsuk-section-break--visible;
 }
+
+/*# sourceMappingURL=_section-break.scss.map */