govuk_publishing_components 67.1.0 → 68.1.0

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

@@ -6,43 +6,184 @@
 /// @group helpers/colour
 ////
 
-/// Get colour
+/// Get a colour from the palette
+///
+/// Before using this function, check if your use case is covered by a
+/// functional colour. For example, use `govuk-functional-colour("link")` for
+/// links rather than `govuk-colour("blue")`.
 ///
 /// @param {String | Colour} $colour - Name of colour from the colour palette
-///   (`$govuk-colours`)
-/// @param {String | Colour | Boolean} $legacy [false] - Deprecated.
-///   The `$legacy` parameter is deprecated and is non-operational, as the
-///   legacy colour palette has been removed. The parameter will be removed in
-///   the next major version.
+///   (`$_govuk-palette`)
+/// @param {String | Colour} $variant - Name of the variant from the colour palette
+///   (`$_govuk-palette`)
 /// @return {Colour} Representation of named colour
 ///
+/// @example scss - Getting the primary variant of a colour
+///   .my-component {
+///     color: govuk-colour("blue");
+///   }
+///
+/// @example scss - Getting a 50% shade of blue
+///   .my-component {
+///     color: govuk-colour("blue", $variant: "shade-50")
+///   }
+///
 /// @throw if `$colour` is not a colour from the colour palette
+/// @throw if `$variant` is not a variant of the `$colour` in the colour palette
+/// @throw if the palette is misformatted and doesn't associate a colour or map to `$colour`
 /// @access public
 
-@function govuk-colour($colour, $legacy: false) {
-  // Output a warning if $legacy is set to anything.
-  @if $legacy and _should-warn("legacy-colour-param") {
-    @warn _warning-text("legacy-colour-param", "The `$legacy` parameter of " +
-    "`govuk-colour` is deprecated and is non-operational. It will be " +
-    "removed in the next major version.");
+@function govuk-colour($colour, $variant: primary, $colours: $_govuk-palette) {
+  // 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" {
+    $colour: "#{$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
+    // we'll automatically convert old colour names into their equivalent in the palette
+    @if $colours == $_govuk-palette {
+      $corresponding-colour: _govuk-corresponding-brand-colour($colour);
+      @if $corresponding-colour {
+        @return $corresponding-colour;
+      }
+    }
+
+    @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" {
+    @return $colour-variants;
   }
 
-  @if type-of($colour) == "color" {
-    // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside
-    $colour: quote("#{$colour}");
+  @if type-of($colour-variants) != "map" {
+    @error "Colour `#{$colour}` should either be a `map` or `color`, not a `#{type-of($colour-variants)}`";
   }
 
-  @if not map-has-key($govuk-colours, $colour) {
-    @error "Unknown colour `#{$colour}`";
+  $result: map-get($colour-variants, $variant);
+
+  @if not $result {
+    @error "Unknown variant `#{$variant}` for colour `#{$colour}` (available variants: #{map-keys($colour-variants)})";
   }
 
-  @return map-get($govuk-colours, $colour);
+  @return $result;
+}
+
+@function _govuk-corresponding-brand-colour($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-govuk-colour-call: 'govuk-colour("#{$corresponding-colour}", $variant: "#{$corresponding-variant}")';
+
+    @if _should-warn("pre-brand-colour") {
+      @warn _warning-text("pre-brand-colour",
+        "We've updated GOV.UK Frontend's colour palette. Use " +
+        "`#{$corresponding-govuk-colour-call}` instead of " +
+        "`govuk-colour(\"#{$colour}\")`. The `#{$colour}` colour is " +
+        "deprecated and we'll remove it in the next major version."
+      );
+    }
+
+    @return govuk-colour($corresponding-colour, $variant: $corresponding-variant);
+  }
+}
+
+/// Get a functional colour
+///
+/// @param {String|Colour} $colour - Name of the colour from the list of
+///   [functional colours](https://design-system.service.gov.uk/styles/colour/)
+/// @return {String} A reference to the functional colour's custom property
+///   wrapped in a var function, with the functional colour's hex value as a
+///   fallback value.
+///
+/// @example scss - Getting a functional colour
+///   .branded-element {
+///     color: govuk-functional-colour('brand');
+///   }
+///
+/// @example css - Output from getting a functional colour
+///   .branded-element {
+///     /* Assuming the 'brand' colour is hotpink */
+///     color: var(--govuk-brand-colour, hotpink);
+///   }
+///
+/// @throw if `$colour` is not an functional colour of GOV.UK Frontend
+/// @access public
+/// @see $govuk-functional-colours
+@function govuk-functional-colour($colour) {
+  // 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" {
+    $colour: "#{$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)})";
+}
+
+/// Resolves the given reference to a colour in the palette
+///
+/// @param {Map|Colour} $colour-reference - A map with the `name`, and optionally a `variant` for the colour in the palette
+/// @returns {Colour} The colour
+/// @throws if the `name` is present but falsy
+/// @throws if the `variant` is present but falsy
+/// @access private
+@function _govuk-resolve-colour($colour-reference) {
+  // If the reference is already a colour, return the colour
+  @if type-of($colour-reference) == "color" {
+    @return $colour-reference;
+  }
+
+  @if not type-of($colour-reference) == "map" {
+    @error 'Colour reference should be a Sass colour or a Sass map';
+  }
+
+  $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 not $variant or $variant == "" {
+    @error "Colour reference `variant` shouldn't be empty.";
+  }
+
+  @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
-/// @param {Boolean} $websafe - Deprecated. Use $contrast-safe instead.
 /// @param {Boolean} $contrast-safe [true] - By default a version of the colour
 ///   will be returned which has a minimum 4.5:1 contrast ratio when used with
 ///   white, as per the WCAG 2.1 Level AA guidelines. If you want to use the
@@ -54,7 +195,7 @@
 /// @throw if `$organisation` is not a known organisation
 /// @access public
 
-@function govuk-organisation-colour($organisation, $websafe: null, $contrast-safe: true) {
+@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) {
@@ -66,79 +207,24 @@
     @error "Unknown organisation `#{$organisation}`";
   }
 
-  // Output a deprecation warning if the legacy colour palette is being used.
-  // Remove in next major version.
-  $is-legacy: $govuk-colours-organisations == $_govuk-legacy-organisation-colours;
-  @if $is-legacy and _should-warn("legacy-organisation-colours") {
-    @warn _warning-text("legacy-organisation-colours",
-      "We've updated the organisation colour palette. Opt in to the new " +
-      "colours using `$govuk-new-organisation-colours: true`. The old " +
-      "palette is deprecated and we'll remove it in the next major version."
-    );
-  }
-
-  // Output a warning if $websafe is set.
-  @if $websafe and _should-warn("organisation-colour-websafe-param") {
-    @warn _warning-text("organisation-colour-websafe-param",
-      "The `$websafe` parameter of `govuk-organisation-colour` has been " +
-      "renamed to `$contrast-safe`. The old parameter name will be removed in " +
-      "the next major version."
-    );
-  }
-
   $org-colour: map-get($govuk-colours-organisations, $organisation);
 
-  @if map-has-key($org-colour, deprecation-message) and _should-warn("organisation-colours") {
+  // 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") {
     @warn _warning-text(
       "organisation-colours",
-      map-get($org-colour, deprecation-message)
+      map-get($org-colour, "deprecation-message")
     );
   }
 
-  // If the $websafe parameter is being used (it has been explicitly set as true
-  // or false), assume the user hasn't updated to use $contrast-safe yet and map
-  // the old parameter's value onto the new parameter.
-  @if type-of($websafe) != "null" {
-    $contrast-safe: $websafe;
-  }
-
-  // Determine the contrast-safe key to use depending on whether it's the new
-  // palette or the legacy palette
-  $safe-key: if($govuk-new-organisation-colours, "contrast-safe", "colour-websafe");
-
-  @if $contrast-safe and map-has-key($org-colour, $safe-key) {
-    @return map-get($org-colour, $safe-key);
+  @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");
   }
 }
 
-/// Make a colour darker by mixing it with black
-///
-/// @param {Colour} $colour - colour to shade
-/// @param {Number} $percentage - percentage of black to mix with $colour
-/// @return {Colour}
-/// @access public
-
-@function govuk-shade($colour, $percentage) {
-  // Ensure the output is a hex string so that Safari <12 can render the colour
-  // without issues from float values in `rgb()`
-  @return _as-hexadecimal(mix(#000000, $colour, $percentage));
-}
-
-/// Make a colour lighter by mixing it with white
-///
-/// @param {Colour} $colour - colour to tint
-/// @param {Number} $percentage - percentage of white to mix with $colour
-/// @return {Colour}
-/// @access public
-
-@function govuk-tint($colour, $percentage) {
-  // Ensure the output is a hex string so that Safari <12 can render the colour
-  // without issues from float values in `rgb()`
-  @return _as-hexadecimal(mix(govuk-colour("white"), $colour, $percentage));
-}
-
 /// Converts a colour with potential float values for its RGB channels
 /// into hexadecimal notation
 ///

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/govuk/helpers/_colour.scss"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,2CAA2C;AAC3C,8BAA8B;;AAE9B,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,aAAa;AACb,EAAE;AACF,4EAA4E;AAC5E,uBAAuB;AACvB,mEAAmE;AACnE,yEAAyE;AACzE,6EAA6E;AAC7E,4BAA4B;AAC5B,kDAAkD;AAClD,EAAE;AACF,8DAA8D;AAC9D,iBAAiB;;AAEjB;EACE,iDAAiD;EACjD;IACE;;yCAEqC;EACvC;;EAEA;IACE,0EAA0E;IAC1E,4BAA4B;EAC9B;;EAEA;IACE,oCAAoC;EACtC;;EAEA,wCAAwC;AAC1C;;AAEA,+CAA+C;AAC/C,EAAE;AACF,2EAA2E;AAC3E,sEAAsE;AACtE,8EAA8E;AAC9E,6EAA6E;AAC7E,2EAA2E;AAC3E,0EAA0E;AAC1E,0EAA0E;AAC1E,oEAAoE;AACpE,EAAE;AACF,6DAA6D;AAC7D,wDAAwD;AACxD,iBAAiB;;AAEjB;EACE,yEAAyE;EACzE,8CAA8C;EAC9C;IACE,4EAA4E;EAC9E;;EAEA,yCAAyC;EACzC;IACE,gDAAgD;EAClD;;EAEA,0EAA0E;EAC1E,+BAA+B;EAC/B,+EAA+E;EAC/E;IACE;;;;KAIC;EACH;;EAEA,sCAAsC;EACtC;IACE;;;;KAIC;EACH;;EAEA,iEAAiE;;EAEjE;IACE;;;KAGC;EACH;;EAEA,6EAA6E;EAC7E,6EAA6E;EAC7E,mDAAmD;EACnD;IACE,wBAAwB;EAC1B;;EAEA,0EAA0E;EAC1E,+BAA+B;EAC/B,iFAAiF;;EAEjF;IACE,uCAAuC;EACzC,EAAE;IACA,oCAAoC;EACtC;AACF;;AAEA,+CAA+C;AAC/C,EAAE;AACF,4CAA4C;AAC5C,wEAAwE;AACxE,mBAAmB;AACnB,iBAAiB;;AAEjB;EACE,4EAA4E;EAC5E,6CAA6C;EAC7C,2DAA2D;AAC7D;;AAEA,gDAAgD;AAChD,EAAE;AACF,2CAA2C;AAC3C,wEAAwE;AACxE,mBAAmB;AACnB,iBAAiB;;AAEjB;EACE,4EAA4E;EAC5E,6CAA6C;EAC7C,yEAAyE;AAC3E;;AAEA,qEAAqE;AACrE,4BAA4B;AAC5B,EAAE;AACF,8DAA8D;AAC9D,EAAE;AACF,kDAAkD;AAClD,mBAAmB;AACnB,kBAAkB;AAClB;EACE;IACE,eAAe;EACjB;;EAEA,0EAA0E;EAC1E,qDAAqD;EACrD;;;;;GAKC;;EAED,wCAAwC;AAC1C","file":"_colour.scss","sourcesContent":["@import \"../settings/colours-palette\";\n@import \"../settings/colours-organisations\";\n@import \"../settings/warnings\";\n\n////\n/// @group helpers/colour\n////\n\n/// Get colour\n///\n/// @param {String | Colour} $colour - Name of colour from the colour palette\n///   (`$govuk-colours`)\n/// @param {String | Colour | Boolean} $legacy [false] - Deprecated.\n///   The `$legacy` parameter is deprecated and is non-operational, as the\n///   legacy colour palette has been removed. The parameter will be removed in\n///   the next major version.\n/// @return {Colour} Representation of named colour\n///\n/// @throw if `$colour` is not a colour from the colour palette\n/// @access public\n\n@function govuk-colour($colour, $legacy: false) {\n  // Output a warning if $legacy is set to anything.\n  @if $legacy and _should-warn(\"legacy-colour-param\") {\n    @warn _warning-text(\"legacy-colour-param\", \"The `$legacy` parameter of \" +\n    \"`govuk-colour` is deprecated and is non-operational. It will be \" +\n    \"removed in the next major version.\");\n  }\n\n  @if type-of($colour) == \"color\" {\n    // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside\n    $colour: quote(\"#{$colour}\");\n  }\n\n  @if not map-has-key($govuk-colours, $colour) {\n    @error \"Unknown colour `#{$colour}`\";\n  }\n\n  @return map-get($govuk-colours, $colour);\n}\n\n/// Get the colour for a government organisation\n///\n/// @param {String} $organisation - Organisation name, lowercase, hyphenated\n/// @param {Boolean} $websafe - Deprecated. Use $contrast-safe instead.\n/// @param {Boolean} $contrast-safe [true] - By default a version of the colour\n///   will be returned which has a minimum 4.5:1 contrast ratio when used with\n///   white, as per the WCAG 2.1 Level AA guidelines. If you want to use the\n///   non-contrast safe version you can set this to `false` but your should\n///   ensure that you still meets contrast requirements for accessibility -\n///   for example, do not use the non-contrast safe version for text.\n///\n/// @return {Colour} Representation of colour for organisation\n/// @throw if `$organisation` is not a known organisation\n/// @access public\n\n@function govuk-organisation-colour($organisation, $websafe: null, $contrast-safe: true) {\n  // Check if the $organisation exists in the aliases map. If so, change the\n  // value of $organisation to the aliased value.\n  @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {\n    $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);\n  }\n\n  // Check to see if the organisation exists\n  @if not map-has-key($govuk-colours-organisations, $organisation) {\n    @error \"Unknown organisation `#{$organisation}`\";\n  }\n\n  // Output a deprecation warning if the legacy colour palette is being used.\n  // Remove in next major version.\n  $is-legacy: $govuk-colours-organisations == $_govuk-legacy-organisation-colours;\n  @if $is-legacy and _should-warn(\"legacy-organisation-colours\") {\n    @warn _warning-text(\"legacy-organisation-colours\",\n      \"We've updated the organisation colour palette. Opt in to the new \" +\n      \"colours using `$govuk-new-organisation-colours: true`. The old \" +\n      \"palette is deprecated and we'll remove it in the next major version.\"\n    );\n  }\n\n  // Output a warning if $websafe is set.\n  @if $websafe and _should-warn(\"organisation-colour-websafe-param\") {\n    @warn _warning-text(\"organisation-colour-websafe-param\",\n      \"The `$websafe` parameter of `govuk-organisation-colour` has been \" +\n      \"renamed to `$contrast-safe`. The old parameter name will be removed in \" +\n      \"the next major version.\"\n    );\n  }\n\n  $org-colour: map-get($govuk-colours-organisations, $organisation);\n\n  @if map-has-key($org-colour, deprecation-message) and _should-warn(\"organisation-colours\") {\n    @warn _warning-text(\n      \"organisation-colours\",\n      map-get($org-colour, deprecation-message)\n    );\n  }\n\n  // If the $websafe parameter is being used (it has been explicitly set as true\n  // or false), assume the user hasn't updated to use $contrast-safe yet and map\n  // the old parameter's value onto the new parameter.\n  @if type-of($websafe) != \"null\" {\n    $contrast-safe: $websafe;\n  }\n\n  // Determine the contrast-safe key to use depending on whether it's the new\n  // palette or the legacy palette\n  $safe-key: if($govuk-new-organisation-colours, \"contrast-safe\", \"colour-websafe\");\n\n  @if $contrast-safe and map-has-key($org-colour, $safe-key) {\n    @return map-get($org-colour, $safe-key);\n  } @else {\n    @return map-get($org-colour, colour);\n  }\n}\n\n/// Make a colour darker by mixing it with black\n///\n/// @param {Colour} $colour - colour to shade\n/// @param {Number} $percentage - percentage of black to mix with $colour\n/// @return {Colour}\n/// @access public\n\n@function govuk-shade($colour, $percentage) {\n  // Ensure the output is a hex string so that Safari <12 can render the colour\n  // without issues from float values in `rgb()`\n  @return _as-hexadecimal(mix(#000000, $colour, $percentage));\n}\n\n/// Make a colour lighter by mixing it with white\n///\n/// @param {Colour} $colour - colour to tint\n/// @param {Number} $percentage - percentage of white to mix with $colour\n/// @return {Colour}\n/// @access public\n\n@function govuk-tint($colour, $percentage) {\n  // Ensure the output is a hex string so that Safari <12 can render the colour\n  // without issues from float values in `rgb()`\n  @return _as-hexadecimal(mix(govuk-colour(\"white\"), $colour, $percentage));\n}\n\n/// Converts a colour with potential float values for its RGB channels\n/// into hexadecimal notation\n///\n/// This ensures the colour is rendered properly by Safari < 12\n///\n/// @param {Colour} $colour - The colour to convert\n/// @return {Colour}\n/// @access private\n@function _as-hexadecimal($colour) {\n  @if not function-exists(change-color) {\n    @return $colour;\n  }\n\n  // `red`,`green` and `blue` functions are limited to 'legacy' colour spaces\n  // ensuring we don't get floating computations on them\n  $parts: (\n    \"red\": red($colour),\n    \"green\": green($colour),\n    \"blue\": blue($colour),\n    \"alpha\": alpha($colour)\n  );\n\n  @return change-color($colour, $parts...);\n}\n"]}
+{"version":3,"sources":["../../../src/govuk/helpers/_colour.scss"],"names":[],"mappings":"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","file":"_colour.scss","sourcesContent":["@import \"../settings/colours-palette\";\n@import \"../settings/colours-organisations\";\n@import \"../settings/warnings\";\n\n////\n/// @group helpers/colour\n////\n\n/// Get a colour from the palette\n///\n/// Before using this function, check if your use case is covered by a\n/// functional colour. For example, use `govuk-functional-colour(\"link\")` for\n/// links rather than `govuk-colour(\"blue\")`.\n///\n/// @param {String | Colour} $colour - Name of colour from the colour palette\n///   (`$_govuk-palette`)\n/// @param {String | Colour} $variant - Name of the variant from the colour palette\n///   (`$_govuk-palette`)\n/// @return {Colour} Representation of named colour\n///\n/// @example scss - Getting the primary variant of a colour\n///   .my-component {\n///     color: govuk-colour(\"blue\");\n///   }\n///\n/// @example scss - Getting a 50% shade of blue\n///   .my-component {\n///     color: govuk-colour(\"blue\", $variant: \"shade-50\")\n///   }\n///\n/// @throw if `$colour` is not a colour from the colour palette\n/// @throw if `$variant` is not a variant of the `$colour` in the colour palette\n/// @throw if the palette is misformatted and doesn't associate a colour or map to `$colour`\n/// @access public\n\n@function govuk-colour($colour, $variant: primary, $colours: $_govuk-palette) {\n  // Sass parses unquoted colours as colours, so we need to turn them into\n  // strings before looking them up in the colour palette\n  // https://sass-lang.com/documentation/values/strings#unquoted\n  @if type-of($colour) != \"string\" {\n    $colour: \"#{$colour}\";\n  }\n\n  $colour-variants: map-get($colours, $colour);\n\n  @if not $colour-variants {\n    // To ease the transition between the brand palette and old GOV.UK Frontend colours\n    // we'll automatically convert old colour names into their equivalent in the palette\n    @if $colours == $_govuk-palette {\n      $corresponding-colour: _govuk-corresponding-brand-colour($colour);\n      @if $corresponding-colour {\n        @return $corresponding-colour;\n      }\n    }\n\n    @error \"Unknown colour `#{$colour}` (available colours: #{map-keys($colours)})\";\n  }\n\n  // Some colours may not have variants, if that's the case, we can return the colour straight away\n  @if type-of($colour-variants) == \"color\" {\n    @return $colour-variants;\n  }\n\n  @if type-of($colour-variants) != \"map\" {\n    @error \"Colour `#{$colour}` should either be a `map` or `color`, not a `#{type-of($colour-variants)}`\";\n  }\n\n  $result: map-get($colour-variants, $variant);\n\n  @if not $result {\n    @error \"Unknown variant `#{$variant}` for colour `#{$colour}` (available variants: #{map-keys($colour-variants)})\";\n  }\n\n  @return $result;\n}\n\n@function _govuk-corresponding-brand-colour($colour) {\n  $pre-brand-colour: map-get($_govuk-pre-brand-colours, $colour);\n\n  @if $pre-brand-colour {\n    $corresponding-colour: nth($pre-brand-colour, 1);\n    $corresponding-variant: nth($pre-brand-colour, 2);\n\n    $corresponding-govuk-colour-call: 'govuk-colour(\"#{$corresponding-colour}\", $variant: \"#{$corresponding-variant}\")';\n\n    @if _should-warn(\"pre-brand-colour\") {\n      @warn _warning-text(\"pre-brand-colour\",\n        \"We've updated GOV.UK Frontend's colour palette. Use \" +\n        \"`#{$corresponding-govuk-colour-call}` instead of \" +\n        \"`govuk-colour(\\\"#{$colour}\\\")`. The `#{$colour}` colour is \" +\n        \"deprecated and we'll remove it in the next major version.\"\n      );\n    }\n\n    @return govuk-colour($corresponding-colour, $variant: $corresponding-variant);\n  }\n}\n\n/// Get a functional colour\n///\n/// @param {String|Colour} $colour - Name of the colour from the list of\n///   [functional colours](https://design-system.service.gov.uk/styles/colour/)\n/// @return {String} A reference to the functional colour's custom property\n///   wrapped in a var function, with the functional colour's hex value as a\n///   fallback value.\n///\n/// @example scss - Getting a functional colour\n///   .branded-element {\n///     color: govuk-functional-colour('brand');\n///   }\n///\n/// @example css - Output from getting a functional colour\n///   .branded-element {\n///     /* Assuming the 'brand' colour is hotpink */\n///     color: var(--govuk-brand-colour, hotpink);\n///   }\n///\n/// @throw if `$colour` is not an functional colour of GOV.UK Frontend\n/// @access public\n/// @see $govuk-functional-colours\n@function govuk-functional-colour($colour) {\n  // Sass parses unquoted colours as colours, so we need to turn them into\n  // strings before looking them up in the colour palette\n  // https://sass-lang.com/documentation/values/strings#unquoted\n  @if type-of($colour) != \"string\" {\n    $colour: \"#{$colour}\";\n  }\n\n  @if map-has-key($govuk-functional-colours, $colour) {\n    $value: _govuk-resolve-colour(map-get($govuk-functional-colours, $colour));\n\n    @return var(--govuk-#{$colour}-colour, #{$value});\n  }\n\n  @error \"Unknown colour `#{$colour}` (available colours: #{map-keys($govuk-functional-colours)})\";\n}\n\n/// Resolves the given reference to a colour in the palette\n///\n/// @param {Map|Colour} $colour-reference - A map with the `name`, and optionally a `variant` for the colour in the palette\n/// @returns {Colour} The colour\n/// @throws if the `name` is present but falsy\n/// @throws if the `variant` is present but falsy\n/// @access private\n@function _govuk-resolve-colour($colour-reference) {\n  // If the reference is already a colour, return the colour\n  @if type-of($colour-reference) == \"color\" {\n    @return $colour-reference;\n  }\n\n  @if not type-of($colour-reference) == \"map\" {\n    @error 'Colour reference should be a Sass colour or a Sass map';\n  }\n\n  $name: map-get($colour-reference, \"name\");\n  @if not $name or $name == \"\" {\n    @error \"Colour reference `name` shouldn't be empty.\";\n  }\n\n  $variant: \"primary\";\n  @if map-has-key($colour-reference, \"variant\") {\n    $variant: map-get($colour-reference, \"variant\");\n  }\n\n  @if not $variant or $variant == \"\" {\n    @error \"Colour reference `variant` shouldn't be empty.\";\n  }\n\n  @return govuk-colour($name, $variant: $variant);\n}\n\n@function _govuk-define-functional-colours($colours, $defaults) {\n  $existing-colours: map-keys($defaults);\n\n  @each $colour-name, $colour in $colours {\n    @if not index($existing-colours, $colour-name) {\n      @error 'Unknown colour `#{$colour-name}` (available colours: #{$existing-colours})';\n    }\n  }\n\n  @return map-merge($defaults, $colours);\n}\n\n/// Get the colour for a government organisation\n///\n/// @param {String} $organisation - Organisation name, lowercase, hyphenated\n/// @param {Boolean} $contrast-safe [true] - By default a version of the colour\n///   will be returned which has a minimum 4.5:1 contrast ratio when used with\n///   white, as per the WCAG 2.1 Level AA guidelines. If you want to use the\n///   non-contrast safe version you can set this to `false` but your should\n///   ensure that you still meets contrast requirements for accessibility -\n///   for example, do not use the non-contrast safe version for text.\n///\n/// @return {Colour} Representation of colour for organisation\n/// @throw if `$organisation` is not a known organisation\n/// @access public\n\n@function govuk-organisation-colour($organisation, $contrast-safe: true) {\n  // Check if the $organisation exists in the aliases map. If so, change the\n  // value of $organisation to the aliased value.\n  @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {\n    $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);\n  }\n\n  // Check to see if the organisation exists\n  @if not map-has-key($govuk-colours-organisations, $organisation) {\n    @error \"Unknown organisation `#{$organisation}`\";\n  }\n\n  $org-colour: map-get($govuk-colours-organisations, $organisation);\n\n  // If the organisation has a deprecation message associated with it\n  // (e.g. it has ceased to exist) then output a warning.\n  @if map-has-key($org-colour, \"deprecation-message\") and _should-warn(\"organisation-colours\") {\n    @warn _warning-text(\n      \"organisation-colours\",\n      map-get($org-colour, \"deprecation-message\")\n    );\n  }\n\n  @if $contrast-safe and map-has-key($org-colour, \"contrast-safe\") {\n    @return map-get($org-colour, \"contrast-safe\");\n  } @else {\n    @return map-get($org-colour, \"colour\");\n  }\n}\n\n/// Converts a colour with potential float values for its RGB channels\n/// into hexadecimal notation\n///\n/// This ensures the colour is rendered properly by Safari < 12\n///\n/// @param {Colour} $colour - The colour to convert\n/// @return {Colour}\n/// @access private\n@function _as-hexadecimal($colour) {\n  @if not function-exists(change-color) {\n    @return $colour;\n  }\n\n  // `red`,`green` and `blue` functions are limited to 'legacy' colour spaces\n  // ensuring we don't get floating computations on them\n  $parts: (\n    \"red\": red($colour),\n    \"green\": green($colour),\n    \"blue\": blue($colour),\n    \"alpha\": alpha($colour)\n  );\n\n  @return change-color($colour, $parts...);\n}\n"]}

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

@@ -20,11 +20,11 @@
   // transparent outline which will be set to a visible colour.
 
   outline: $govuk-focus-width solid transparent;
-  color: $govuk-focus-text-colour;
-  background-color: $govuk-focus-colour;
+  color: govuk-functional-colour(focus-text);
+  background-color: govuk-functional-colour(focus);
   box-shadow:
-    0 -2px $govuk-focus-colour,
-    0 4px $govuk-focus-text-colour;
+    0 -2px govuk-functional-colour(focus),
+    0 4px govuk-functional-colour(focus-text);
   // When link is focussed, hide the default underline since the
   // box shadow adds the "underline"
   text-decoration: none;
@@ -62,8 +62,8 @@
 @mixin govuk-focused-box {
   outline: $govuk-focus-width solid transparent;
   box-shadow:
-    0 0 0 4px $govuk-focus-colour,
-    0 0 0 8px $govuk-focus-text-colour;
+    0 0 0 4px govuk-functional-colour(focus),
+    0 0 0 8px govuk-functional-colour(focus-text);
 }
 
 /// Focused form input
@@ -79,7 +79,8 @@
 /// @access public
 
 @mixin govuk-focused-form-input {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline: $govuk-focus-width solid;
+  outline-color: govuk-functional-colour(focus);
   // Ensure outline appears outside of the element
   outline-offset: 0;
   // Double the border by adding its width again. Use `box-shadow` for this

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/govuk/helpers/_focused.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;AAC5C,EAAE;AACF,qDAAqD;AACrD,wBAAwB;AACxB,mCAAmC;AACnC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;;EAE5D,6CAA6C;EAC7C,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;EAChC,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB,4EAA4E;EAC5E,0DAA0D;EAC1D,CAAC;EACD,4EAA4E;EAC5E,yEAAyE;EACzE,uEAAuE;EACvE,2BAA2B;EAC3B,CAAC;EACD,gCAAgC;EAChC,6DAA6D;EAC7D;IACE,mCAA2B;YAA3B,2BAA2B;EAC7B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;AACzD,EAAE;AACF,6DAA6D;AAC7D,8BAA8B;AAC9B,kCAAkC;AAClC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6CAA6C;EAC7C;;sCAEoC;AACtC;;AAEA,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,wBAAwB;AACxB,EAAE;AACF,2DAA2D;AAC3D,yBAAyB;AACzB,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,qDAAqD;EACrD,+CAA+C;EAC/C,iBAAiB;EACjB,wEAAwE;EACxE,mEAAmE;EACnE,uEAAuE;EACvE,qEAAqE;EACrE,wDAAwD;EACxD,wDAAwD;AAC1D","file":"_focused.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @example scss - Styling the focus state for a link\n///   .govuk-link:focus {\n///     @include govuk-focused-text;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-text {\n  // When colours are overridden, for example when users have a dark mode,\n  // backgrounds and box-shadows disappear, so we need to ensure there's a\n  // transparent outline which will be set to a visible colour.\n\n  outline: $govuk-focus-width solid transparent;\n  color: $govuk-focus-text-colour;\n  background-color: $govuk-focus-colour;\n  box-shadow:\n    0 -2px $govuk-focus-colour,\n    0 4px $govuk-focus-text-colour;\n  // When link is focussed, hide the default underline since the\n  // box shadow adds the \"underline\"\n  text-decoration: none;\n\n  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state\n  // is missing on links that wrap across multiple lines [1].\n  //\n  // However, text-wrap: balance doesn't play nicely with box-decoration-break:\n  // clone, causing links to re-flow when focused [2]. As text-wrap: balance\n  // wasn't introduced until Chromium 114 we can use it as a way to target\n  // this fix to just 108–111.\n  //\n  // [1]: http://crbug.com/40884971\n  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878\n  @supports not (text-wrap: balance) {\n    box-decoration-break: clone;\n  }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @example scss - Styling the focus state for a linked image\n///   .govuk-link-image:focus {\n///     @include govuk-focused-box;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-box {\n  outline: $govuk-focus-width solid transparent;\n  box-shadow:\n    0 0 0 4px $govuk-focus-colour,\n    0 0 0 8px $govuk-focus-text-colour;\n}\n\n/// Focused form input\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for form inputs.\n///\n/// @example scss - Styling the focus state for a form input\n///   .govuk-input:focus {\n///     @include govuk-focused-form-input;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-form-input {\n  outline: $govuk-focus-width solid $govuk-focus-colour;\n  // Ensure outline appears outside of the element\n  outline-offset: 0;\n  // Double the border by adding its width again. Use `box-shadow` for this\n  // instead of changing `border-width` - this is for consistency with\n  // components such as textarea where we avoid changing `border-width` as\n  // it will change the element size. Also, `outline` cannot be utilised\n  // here as it is already used for the yellow focus state.\n  box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n}\n"]}
+{"version":3,"sources":["../../../src/govuk/helpers/_focused.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;AAC5C,EAAE;AACF,qDAAqD;AACrD,wBAAwB;AACxB,mCAAmC;AACnC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;;EAE5D,6CAA6C;EAC7C,0CAA0C;EAC1C,gDAAgD;EAChD;;6CAE2C;EAC3C,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB,4EAA4E;EAC5E,0DAA0D;EAC1D,CAAC;EACD,4EAA4E;EAC5E,yEAAyE;EACzE,uEAAuE;EACvE,2BAA2B;EAC3B,CAAC;EACD,gCAAgC;EAChC,6DAA6D;EAC7D;IACE,mCAA2B;YAA3B,2BAA2B;EAC7B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;AACzD,EAAE;AACF,6DAA6D;AAC7D,8BAA8B;AAC9B,kCAAkC;AAClC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6CAA6C;EAC7C;;iDAE+C;AACjD;;AAEA,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,wBAAwB;AACxB,EAAE;AACF,2DAA2D;AAC3D,yBAAyB;AACzB,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,iCAAiC;EACjC,6CAA6C;EAC7C,+CAA+C;EAC/C,iBAAiB;EACjB,wEAAwE;EACxE,mEAAmE;EACnE,uEAAuE;EACvE,qEAAqE;EACrE,wDAAwD;EACxD,wDAAwD;AAC1D","file":"_focused.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @example scss - Styling the focus state for a link\n///   .govuk-link:focus {\n///     @include govuk-focused-text;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-text {\n  // When colours are overridden, for example when users have a dark mode,\n  // backgrounds and box-shadows disappear, so we need to ensure there's a\n  // transparent outline which will be set to a visible colour.\n\n  outline: $govuk-focus-width solid transparent;\n  color: govuk-functional-colour(focus-text);\n  background-color: govuk-functional-colour(focus);\n  box-shadow:\n    0 -2px govuk-functional-colour(focus),\n    0 4px govuk-functional-colour(focus-text);\n  // When link is focussed, hide the default underline since the\n  // box shadow adds the \"underline\"\n  text-decoration: none;\n\n  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state\n  // is missing on links that wrap across multiple lines [1].\n  //\n  // However, text-wrap: balance doesn't play nicely with box-decoration-break:\n  // clone, causing links to re-flow when focused [2]. As text-wrap: balance\n  // wasn't introduced until Chromium 114 we can use it as a way to target\n  // this fix to just 108–111.\n  //\n  // [1]: http://crbug.com/40884971\n  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878\n  @supports not (text-wrap: balance) {\n    box-decoration-break: clone;\n  }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @example scss - Styling the focus state for a linked image\n///   .govuk-link-image:focus {\n///     @include govuk-focused-box;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-box {\n  outline: $govuk-focus-width solid transparent;\n  box-shadow:\n    0 0 0 4px govuk-functional-colour(focus),\n    0 0 0 8px govuk-functional-colour(focus-text);\n}\n\n/// Focused form input\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for form inputs.\n///\n/// @example scss - Styling the focus state for a form input\n///   .govuk-input:focus {\n///     @include govuk-focused-form-input;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-form-input {\n  outline: $govuk-focus-width solid;\n  outline-color: govuk-functional-colour(focus);\n  // Ensure outline appears outside of the element\n  outline-offset: 0;\n  // Double the border by adding its width again. Use `box-shadow` for this\n  // instead of changing `border-width` - this is for consistency with\n  // components such as textarea where we avoid changing `border-width` as\n  // it will change the element size. Also, `outline` cannot be utilised\n  // here as it is already used for the yellow focus state.\n  box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n}\n"]}

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

@@ -76,25 +76,25 @@
 
 @mixin govuk-link-style-default {
   &:link {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:visited {
-    color: $govuk-link-visited-colour;
+    color: govuk-functional-colour(link-visited);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:active {
-    color: $govuk-link-active-colour;
+    color: govuk-functional-colour(link-active);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -117,21 +117,21 @@
 @mixin govuk-link-style-error {
   &:link,
   &:visited {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   &:hover {
-    color: scale-color($govuk-error-colour, $lightness: -30%);
+    color: govuk-colour("red", $variant: "shade-50");
   }
 
   &:active {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -154,21 +154,21 @@
 @mixin govuk-link-style-success {
   &:link,
   &:visited {
-    color: $govuk-success-colour;
+    color: govuk-functional-colour(success);
   }
 
   &:hover {
-    color: scale-color($govuk-success-colour, $lightness: -30%);
+    color: govuk-colour("green", $variant: "shade-50");
   }
 
   &:active {
-    color: $govuk-success-colour;
+    color: govuk-functional-colour(success);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -191,18 +191,18 @@
 @mixin govuk-link-style-muted {
   &:link,
   &:visited {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   &:hover,
   &:active {
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -228,14 +228,6 @@
     @include govuk-text-colour;
   }
 
-  // Force a colour change on hover to work around a bug in Safari
-  // https://webkit.org/b/224483
-  &:hover {
-    @if type-of($govuk-text-colour) == color {
-      color: rgba($govuk-text-colour, 0.99);
-    }
-  }
-
   &:active,
   &:focus {
     @include govuk-text-colour;
@@ -264,15 +256,8 @@
     color: govuk-colour("white");
   }
 
-  // Force a colour change on hover to work around a bug in Safari
-  // https://webkit.org/b/224483
-  &:hover,
-  &:active {
-    color: rgba(govuk-colour("white"), 0.99);
-  }
-
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -298,25 +283,25 @@
 
 @mixin govuk-link-style-no-visited-state {
   &:link {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:visited {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:active {
-    color: $govuk-link-active-colour;
+    color: govuk-functional-colour(link-active);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -351,8 +336,7 @@
   @media print {
     &[href^="/"],
     &[href^="http://"],
-    &[href^="https://"]
-    {
+    &[href^="https://"] {
       &::after {
         content: " (" attr(href) ")";
         font-size: 90%;