govuk_tech_docs 6.1.0 → 6.2.1

data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss

@@ -1,10 +1,15 @@
-@import "../settings/colours-palette";
-@import "../settings/colours-organisations";
-@import "../settings/warnings";
-
 ////
 /// @group helpers/colour
 ////
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
+@import "../settings/colours-functional";
+@import "../settings/colours-palette";
+@import "../settings/colours-organisations";
+@import "../settings/warnings";
 
 /// Get a colour from the palette
 ///
@@ -37,11 +42,11 @@
   // Sass parses unquoted colours as colours, so we need to turn them into
   // strings before looking them up in the colour palette
   // https://sass-lang.com/documentation/values/strings#unquoted
-  @if type-of($colour) != "string" {
+  @if meta.type-of($colour) != "string" {
     $colour: "#{$colour}";
   }
 
-  $colour-variants: map-get($colours, $colour);
+  $colour-variants: map.get($colours, $colour);
 
   @if not $colour-variants {
     // To ease the transition between the brand palette and old GOV.UK Frontend colours
@@ -53,33 +58,33 @@
       }
     }
 
-    @error "Unknown colour `#{$colour}` (available colours: #{map-keys($colours)})";
+    @error "Unknown colour `#{$colour}` (available colours: #{map.keys($colours)})";
   }
 
   // Some colours may not have variants, if that's the case, we can return the colour straight away
-  @if type-of($colour-variants) == "color" {
+  @if meta.type-of($colour-variants) == "color" {
     @return $colour-variants;
   }
 
-  @if type-of($colour-variants) != "map" {
-    @error "Colour `#{$colour}` should either be a `map` or `color`, not a `#{type-of($colour-variants)}`";
+  @if meta.type-of($colour-variants) != "map" {
+    @error "Colour `#{$colour}` should either be a `map` or `color`, not a `#{meta.type-of($colour-variants)}`";
   }
 
-  $result: map-get($colour-variants, $variant);
+  $result: map.get($colour-variants, $variant);
 
   @if not $result {
-    @error "Unknown variant `#{$variant}` for colour `#{$colour}` (available variants: #{map-keys($colour-variants)})";
+    @error "Unknown variant `#{$variant}` for colour `#{$colour}` (available variants: #{map.keys($colour-variants)})";
   }
 
   @return $result;
 }
 
 @function _govuk-corresponding-brand-colour($colour) {
-  $pre-brand-colour: map-get($_govuk-pre-brand-colours, $colour);
+  $pre-brand-colour: map.get($_govuk-pre-brand-colours, $colour);
 
   @if $pre-brand-colour {
-    $corresponding-colour: nth($pre-brand-colour, 1);
-    $corresponding-variant: nth($pre-brand-colour, 2);
+    $corresponding-colour: list.nth($pre-brand-colour, 1);
+    $corresponding-variant: list.nth($pre-brand-colour, 2);
 
     $corresponding-govuk-colour-call: 'govuk-colour("#{$corresponding-colour}", $variant: "#{$corresponding-variant}")';
 
@@ -122,17 +127,17 @@
   // Sass parses unquoted colours as colours, so we need to turn them into
   // strings before looking them up in the colour palette
   // https://sass-lang.com/documentation/values/strings#unquoted
-  @if type-of($colour) != "string" {
+  @if meta.type-of($colour) != "string" {
     $colour: "#{$colour}";
   }
 
-  @if map-has-key($govuk-functional-colours, $colour) {
-    $value: _govuk-resolve-colour(map-get($govuk-functional-colours, $colour));
+  @if map.has-key($govuk-functional-colours, $colour) {
+    $value: _govuk-resolve-colour(map.get($govuk-functional-colours, $colour));
 
     @return var(--govuk-#{$colour}-colour, #{$value});
   }
 
-  @error "Unknown colour `#{$colour}` (available colours: #{map-keys($govuk-functional-colours)})";
+  @error "Unknown colour `#{$colour}` (available colours: #{map.keys($govuk-functional-colours)})";
 }
 
 /// Resolves the given reference to a colour in the palette
@@ -144,22 +149,22 @@
 /// @access private
 @function _govuk-resolve-colour($colour-reference) {
   // If the reference is already a colour, return the colour
-  @if type-of($colour-reference) == "color" {
+  @if meta.type-of($colour-reference) == "color" {
     @return $colour-reference;
   }
 
-  @if not type-of($colour-reference) == "map" {
+  @if not meta.type-of($colour-reference) == "map" {
     @error 'Colour reference should be a Sass colour or a Sass map';
   }
 
-  $name: map-get($colour-reference, "name");
+  $name: map.get($colour-reference, "name");
   @if not $name or $name == "" {
     @error "Colour reference `name` shouldn't be empty.";
   }
 
   $variant: "primary";
-  @if map-has-key($colour-reference, "variant") {
-    $variant: map-get($colour-reference, "variant");
+  @if map.has-key($colour-reference, "variant") {
+    $variant: map.get($colour-reference, "variant");
   }
 
   @if not $variant or $variant == "" {
@@ -169,18 +174,6 @@
   @return govuk-colour($name, $variant: $variant);
 }
 
-@function _govuk-define-functional-colours($colours, $defaults) {
-  $existing-colours: map-keys($defaults);
-
-  @each $colour-name, $colour in $colours {
-    @if not index($existing-colours, $colour-name) {
-      @error 'Unknown colour `#{$colour-name}` (available colours: #{$existing-colours})';
-    }
-  }
-
-  @return map-merge($defaults, $colours);
-}
-
 /// Get the colour for a government organisation
 ///
 /// @param {String} $organisation - Organisation name, lowercase, hyphenated
@@ -198,56 +191,31 @@
 @function govuk-organisation-colour($organisation, $contrast-safe: true) {
   // Check if the $organisation exists in the aliases map. If so, change the
   // value of $organisation to the aliased value.
-  @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {
-    $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);
+  @if map.has-key($_govuk_colours-organisations-aliases, $organisation) {
+    $organisation: map.get($_govuk_colours-organisations-aliases, $organisation);
   }
 
   // Check to see if the organisation exists
-  @if not map-has-key($govuk-colours-organisations, $organisation) {
+  @if not map.has-key($govuk-colours-organisations, $organisation) {
     @error "Unknown organisation `#{$organisation}`";
   }
 
-  $org-colour: map-get($govuk-colours-organisations, $organisation);
+  $org-colour: map.get($govuk-colours-organisations, $organisation);
 
   // If the organisation has a deprecation message associated with it
   // (e.g. it has ceased to exist) then output a warning.
-  @if map-has-key($org-colour, "deprecation-message") and _should-warn("organisation-colours") {
+  @if map.has-key($org-colour, "deprecation-message") and _should-warn("organisation-colours") {
     @warn _warning-text(
       "organisation-colours",
-      map-get($org-colour, "deprecation-message")
+      map.get($org-colour, "deprecation-message")
     );
   }
 
-  @if $contrast-safe and map-has-key($org-colour, "contrast-safe") {
-    @return map-get($org-colour, "contrast-safe");
+  @if $contrast-safe and map.has-key($org-colour, "contrast-safe") {
+    @return map.get($org-colour, "contrast-safe");
   } @else {
-    @return map-get($org-colour, "colour");
+    @return map.get($org-colour, "colour");
   }
 }
 
-/// Converts a colour with potential float values for its RGB channels
-/// into hexadecimal notation
-///
-/// This ensures the colour is rendered properly by Safari < 12
-///
-/// @param {Colour} $colour - The colour to convert
-/// @return {Colour}
-/// @access private
-@function _as-hexadecimal($colour) {
-  @if not function-exists(change-color) {
-    @return $colour;
-  }
-
-  // `red`,`green` and `blue` functions are limited to 'legacy' colour spaces
-  // ensuring we don't get floating computations on them
-  $parts: (
-    "red": red($colour),
-    "green": green($colour),
-    "blue": blue($colour),
-    "alpha": alpha($colour)
-  );
-
-  @return change-color($colour, $parts...);
-}
-
 /*# sourceMappingURL=_colour.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_device-pixels.scss

@@ -27,6 +27,8 @@
 ///
 /// @access public
 
+@use "sass:list";
+
 @mixin govuk-device-pixel-ratio($ratio: 2) {
   @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
     only screen and (min-resolution: #{($ratio * 96)}dpi),

data/node_modules/govuk-frontend/dist/govuk/helpers/_focused.scss

@@ -88,7 +88,7 @@
   // components such as textarea where we avoid changing `border-width` as
   // it will change the element size. Also, `outline` cannot be utilised
   // here as it is already used for the yellow focus state.
-  box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+  box-shadow: inset 0 0 0 $govuk-border-width-form-element govuk-functional-colour(input-border);
 }
 
 /*# sourceMappingURL=_focused.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss

@@ -1,6 +1,7 @@
 ////
 /// @group helpers/layout
 ////
+@use "sass:map";
 
 /// Grid width percentage
 ///
@@ -10,8 +11,8 @@
 /// @access public
 
 @function govuk-grid-width($key) {
-  @if map-has-key($govuk-grid-widths, $key) {
-    @return map-get($govuk-grid-widths, $key);
+  @if map.has-key($govuk-grid-widths, $key) {
+    @return map.get($govuk-grid-widths, $key);
   }
 
   @error "Unknown grid width `#{$key}`";

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss

@@ -224,13 +224,13 @@
 
 @mixin govuk-link-style-text {
   &:link,
-  &:visited {
-    @include govuk-text-colour;
+  &:visited,
+  &:active {
+    color: govuk-functional-colour(text);
   }
 
-  &:active,
   &:focus {
-    @include govuk-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss

@@ -1,6 +1,10 @@
 ////
 /// @group helpers/layout
 ////
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 
 @import "../settings/media-queries";
 @import "../tools/px-to-em";
@@ -41,9 +45,9 @@
 
 @function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {
   // If $value is a number
-  @if type-of($value) == "number" {
+  @if meta.type-of($value) == "number" {
     // If the number is unitless, coerce it into a pixel value
-    @if unitless($value) {
+    @if math.is-unitless($value) {
       $value: $value * 1px;
     }
 
@@ -52,8 +56,8 @@
 
   // If $value is a string and exists as a key in in $breakpoints,
   // look up and use the value of it
-  @if type-of($value) == "string" and map-has-key($breakpoints, $value) {
-    @return map-get($breakpoints, $value);
+  @if meta.type-of($value) == "string" and map.has-key($breakpoints, $value) {
+    @return map.get($breakpoints, $value);
   }
 
   // If we get this far, we can't use the value, so return an error
@@ -97,7 +101,7 @@
 @function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {
   $value: govuk-breakpoint-value($from, $breakpoints);
 
-  @if type-of($value) == "number" and unit($value) == "px" {
+  @if meta.type-of($value) == "number" and math.unit($value) == "px" {
     $value: govuk-em($value);
   }
 
@@ -142,13 +146,13 @@
 @function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {
   $value: govuk-breakpoint-value($until, $breakpoints);
 
-  @if type-of($value) == "number" and unit($value) == "px" {
+  @if meta.type-of($value) == "number" and math.unit($value) == "px" {
     // If it's a pixel value, convert it to ems.
     $value: govuk-em($value);
   }
 
   // If $value derives from a named breakpoint, additionally subtract .01em
-  @if type-of($until) != "number" and unit($value) == "em" {
+  @if meta.type-of($until) != "number" and math.unit($value) == "em" {
     $value: $value - 0.01em;
   }
 
@@ -191,26 +195,24 @@
 
 @mixin govuk-media-query($from: null, $until: null, $and: null, $media-type: "all", $breakpoints: $govuk-breakpoints) {
   $media-query: "";
-  $min-width: if($from, govuk-from-breakpoint($from, $breakpoints), null);
-  $max-width: if($until, govuk-until-breakpoint($until, $breakpoints), null);
 
   // Assemble the media query string
   @if $media-type != "all" {
     $media-query: "#{$media-type}";
   }
-  @if $min-width {
-    $media-query: "#{$media-query} and #{$min-width}";
+  @if $from {
+    $media-query: "#{$media-query} and #{govuk-from-breakpoint($from, $breakpoints)}";
   }
-  @if $max-width {
-    $media-query: "#{$media-query} and #{$max-width}";
+  @if $until {
+    $media-query: "#{$media-query} and #{govuk-until-breakpoint($until, $breakpoints)}";
   }
   @if $and {
     $media-query: "#{$media-query} and #{$and}";
   }
 
   // If $media-query currently begins with an orphaned ' and ', remove it.
-  @if str-index($media-query, " and ") == 1 {
-    $media-query: str-slice($media-query, 6);
+  @if string.index($media-query, " and ") == 1 {
+    $media-query: string.slice($media-query, 6);
   }
 
   @media #{$media-query} {

data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss

@@ -14,7 +14,7 @@
 @function _govuk-equilateral-height($base) {
   $square-root-of-three: 1.732;
 
-  @return ($base / 2) * $square-root-of-three;
+  @return ($base * 0.5) * $square-root-of-three;
 }
 
 /// Arrow mixin
@@ -44,7 +44,7 @@
   border-style: solid;
   border-color: transparent; // 1
 
-  $perpendicular: $base / 2;
+  $perpendicular: $base * 0.5;
 
   @if not $height {
     $height: _govuk-equilateral-height($base);

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss

@@ -1,6 +1,12 @@
 ////
 /// @group helpers/spacing
 ////
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+@import "../tools/if";
+@import "../helpers/media-queries";
 
 /// Single point spacing
 ///
@@ -29,7 +35,7 @@
 /// @access public
 
 @function govuk-spacing($spacing-point) {
-  $actual-input-type: type-of($spacing-point);
+  $actual-input-type: meta.type-of($spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a "
       + "#{$actual-input-type}.";
@@ -38,15 +44,15 @@
   $is-negative: false;
   @if $spacing-point < 0 {
     $is-negative: true;
-    $spacing-point: abs($spacing-point);
+    $spacing-point: math.abs($spacing-point);
   }
 
-  @if not map-has-key($govuk-spacing-points, $spacing-point) {
+  @if not map.has-key($govuk-spacing-points, $spacing-point) {
     @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
   }
 
-  $value: map-get($govuk-spacing-points, $spacing-point);
-  @return if($is-negative, $value * -1, $value);
+  $value: map.get($govuk-spacing-points, $spacing-point);
+  @return govuk-if($is-negative, $value * -1, $value);
 }
 
 /// Responsive spacing
@@ -75,19 +81,19 @@
   $important: false,
   $adjustment: false
 ) {
-  $actual-input-type: type-of($responsive-spacing-point);
+  $actual-input-type: meta.type-of($responsive-spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
   }
 
-  @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+  @if not map.has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
     @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
       + "responsive spacing scale in `_settings/spacing.scss`.";
   }
 
   // Make sure that the return value from `_settings/spacing.scss` is a map.
-  $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
-  $actual-map-type: type-of($scale-map);
+  $scale-map: map.get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+  $actual-map-type: meta.type-of($scale-map);
   @if $actual-map-type != "map" {
     @error "Expected a number (integer), but got a "
       + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
@@ -102,16 +108,16 @@
     // The 'null' breakpoint is for mobile.
     @if not $breakpoint {
       @if $direction == all {
-        #{$property}: $breakpoint-value if($important, !important, null);
+        #{$property}: $breakpoint-value govuk-if($important, !important);
       } @else {
-        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+        #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
       }
     } @else {
       @media #{govuk-from-breakpoint($breakpoint)} {
         @if $direction == all {
-          #{$property}: $breakpoint-value if($important, !important, null);
+          #{$property}: $breakpoint-value govuk-if($important, !important);
         } @else {
-          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+          #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
         }
       }
     }

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss

@@ -1,8 +1,21 @@
 ////
 /// @group helpers/typography
 ////
-
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+
+@import "../settings/assets";
+@import "../settings/colours-functional";
+@import "../settings/spacing";
+@import "../settings/typography-font";
+@import "../settings/warnings";
+@import "../tools/font-url";
 @import "../tools/px-to-rem";
+@import "../tools/if";
+@import "font-faces";
+@import "media-queries";
+@import "spacing";
 
 /// 'Common typography' helper
 ///
@@ -32,14 +45,16 @@
 ///
 /// Sets the text colour, including a suitable override for print.
 ///
+/// @deprecated
 /// @access public
 
 @mixin govuk-text-colour {
-  color: govuk-functional-colour(text);
+  @include _warning(
+    "govuk-text-colour",
+    "The `govuk-text-colour` mixin is deprecated. Use `color: govuk-colour(text)` instead."
+  );
 
-  @media print {
-    color: govuk-functional-colour(print-text);
-  }
+  color: govuk-functional-colour(text);
 }
 
 /// Regular font weight helper
@@ -49,7 +64,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-regular($important: false) {
-  font-weight: $govuk-font-weight-regular if($important, !important, null);
+  font-weight: $govuk-font-weight-regular govuk-if($important, !important);
 }
 
 /// Bold font weight helper
@@ -59,7 +74,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-bold($important: false) {
-  font-weight: $govuk-font-weight-bold if($important, !important, null);
+  font-weight: $govuk-font-weight-bold govuk-if($important, !important);
 }
 
 /// Tabular number helper
@@ -76,7 +91,7 @@
 /// @access public
 
 @mixin govuk-font-tabular-numbers($important: false) {
-  font-variant-numeric: tabular-nums if($important, !important, null);
+  font-variant-numeric: tabular-nums govuk-if($important, !important);
 }
 
 /// Word break helper
@@ -90,10 +105,10 @@
 
 @mixin govuk-text-break-word($important: false) {
   // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
-  word-wrap: break-word if($important, !important, null);
+  word-wrap: break-word govuk-if($important, !important);
 
   // All other browsers support `overflow-wrap`
-  overflow-wrap: break-word if($important, !important, null);
+  overflow-wrap: break-word govuk-if($important, !important);
 }
 
 /// Convert line-heights specified in pixels into a relative value, unless
@@ -107,8 +122,8 @@
 /// @access private
 
 @function _govuk-line-height($line-height, $font-size) {
-  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
-    $line-height: $line-height / $font-size;
+  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
+    $line-height: math.div($line-height, $font-size);
   }
 
   @return $line-height;
@@ -153,21 +168,21 @@
 @mixin govuk-font-size($size, $line-height: false, $important: false) {
   // Flag font sizes that start with underscores so we can suppress warnings on
   // deprecated sizes used internally, for example `govuk-font($size: "_14")`
-  $size-internal-use-only: str-slice(#{$size}, 1, 1) == "_";
+  $size-internal-use-only: string.slice(#{$size}, 1, 1) == "_";
 
   // Remove underscore from font sizes flagged for internal use
   @if $size-internal-use-only {
-    $size: str-slice(#{$size}, 2);
+    $size: string.slice(#{$size}, 2);
   }
 
   // Check for a font map exactly matching the given size
-  $font-map: map-get($govuk-typography-scale, $size);
+  $font-map: map.get($govuk-typography-scale, $size);
 
   // No match? Try with string type (e.g. $size: "16" not 16)
   @if not $font-map {
-    @each $font-size in map-keys($govuk-typography-scale) {
+    @each $font-size in map.keys($govuk-typography-scale) {
       @if not $font-map and "#{$font-size}" == "#{$size}" {
-        $font-map: map-get($govuk-typography-scale, $font-size);
+        $font-map: map.get($govuk-typography-scale, $font-size);
       }
     }
   }
@@ -178,39 +193,46 @@
   }
 
   // Check for a deprecation within the type scale
-  $deprecation: map-get($font-map, "deprecation");
+  $deprecation: map.get($font-map, "deprecation");
 
   @if $deprecation {
     // Warn on deprecated font sizes unless flagged for internal use
     @if not $size-internal-use-only {
-      @include _warning(map-get($deprecation, "key"), map-get($deprecation, "message"));
+      @include _warning(map.get($deprecation, "key"), map.get($deprecation, "message"));
     }
 
     // remove the deprecation map keys so they do not break the breakpoint loop
-    $font-map: map-remove($font-map, "deprecation");
+    $font-map: map.remove($font-map, "deprecation");
   }
 
   @each $breakpoint, $breakpoint-map in $font-map {
-    $font-size: map-get($breakpoint-map, "font-size");
+    $font-size: map.get($breakpoint-map, "font-size");
     $font-size-rem: govuk-px-to-rem($font-size);
 
     // $calculated-line-height is a separate variable from $line-height,
     // as otherwise the value would get redefined with each loop and
     // eventually break _govuk-line-height.
-    //
+    // 1. See if the function was called with a specific line-height
+    $calculated-line-height: $line-height;
+    // 2. Default to the breakpoint-map if no specific value was given
+    @if not $calculated-line-height {
+      $calculated-line-height: map.get($breakpoint-map, "line-height");
+    }
+
+    // 3. Turn the value into a unitless line-height if possible
     // We continue to call the param $line-height to stay consistent with the
     // naming with govuk-font.
     $calculated-line-height: _govuk-line-height(
-      $line-height: if($line-height, $line-height, map-get($breakpoint-map, "line-height")),
+      $line-height: $calculated-line-height,
       $font-size: $font-size
     );
 
     // Mark rules as !important if $important is true - this will result in
     // these variables becoming strings, so this needs to happen *after* they
     // are used in calculations
-    $font-size: $font-size if($important, !important, null);
-    $font-size-rem: $font-size-rem if($important, !important, null);
-    $calculated-line-height: $calculated-line-height if($important, !important, null);
+    $font-size: $font-size govuk-if($important, !important);
+    $font-size-rem: $font-size-rem govuk-if($important, !important);
+    $calculated-line-height: $calculated-line-height govuk-if($important, !important);
 
     @if not $breakpoint {
       font-size: $font-size-rem;