Add map of brand colours

[romaricpascal]

Alternative implementation to #6303 for giving access to the brand colours.

Instead of a specialised function for accessing only the brand colours, creates a generic govuk-colour-variant function which could be used on arbitrary maps of colours, not just $govuk-brand-colours. These maps associate colours names either with:

• Sass colours directly
• Maps associating a variant name to a Sass colour

$colours: (
  "blue": (
    "primary": #1d70b8,
    "tint-25": #5694ca,
  ),
  "green": (
    "primary": #11875a,
    "tint-25": #4da583,
  ),
  "red": (
    "primary": #ca3535,
    "tint-25": #d76868,
  ),
  "white": #fff
);

This enables:

• preventing overrides of the whole $govuk-brand-colours by not having to set a !default for the purpose of testing (users can still map-set/map.set on $govuk-brand-colours, and I'm not sure there's much we can do to stop that)
• using the same logic to access both $govuk-colours and $govuk-brand-colours
• opening the door to accessing applied colours through govuk-colour as well (spike coming soon)
• aligning the API with that of the new breakpoints functions, able to receive an arbitrary map of breakpoints

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
index 93f3f109c..51462776b 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
@@ -18,7 +18,7 @@
     @include _govuk-rebrand(
       "background-color",
       $from: $govuk-service-navigation-background,
-      $to: $_govuk-rebrand-template-background-colour
+      $to: govuk-colour("blue", $variant: tint-95)
     );
   }
 
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_colour.scss b/packages/govuk-frontend/dist/govuk/helpers/_colour.scss
index e044d3910..fa18bad0f 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_colour.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_colour.scss
@@ -14,12 +14,14 @@
 ///   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.
+/// @param {String | Colour} $variant - The variant of the colour to look up
+/// @param {Map} $colours - The map of colours to look into
 /// @return {Colour} Representation of named colour
 ///
 /// @throw if `$colour` is not a colour from the colour palette
 /// @access public
 
-@function govuk-colour($colour, $legacy: false) {
+@function govuk-colour($colour, $legacy: false, $variant: null, $colours: null) {
   // 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 " +
@@ -27,16 +29,61 @@
     "removed in the next major version.");
   }
 
-  @if type-of($colour) == "color" {
-    // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside
-    $colour: quote("#{$colour}");
+  @if $colours or $variant {
+    @return govuk-colour-variant($colour, $variant: $variant, $colours: $colours);
   }
 
-  @if not map-has-key($govuk-colours, $colour) {
-    @error "Unknown colour `#{$colour}`";
+  @return govuk-colour-variant($colour, $govuk-colours);
+}
+
+/// Get the $variant of the given $colour among the given $colours
+///
+/// @param {String | Colour} $colour - Name of brand colour from the palette
+///   (`$govuk-colour`)
+/// @param {String } $variant [primary] - Name of the colour variant from the palette
+/// @param {Map} $colours [$govuk-brand-colours] - A map of available colours
+/// @return {Colour} Representation of the variant of the brand colour
+///
+/// @throw if `$variant` is not a variant from the colour
+/// @access private
+@function govuk-colour-variant($colour, $variant: null, $colours: null) {
+  // Handle positional arguments
+  @if type-of($variant) == "map" {
+    $colours: $variant;
+  }
+
+  $variant: $variant or primary;
+  $colours: $colours or $govuk-brand-colours;
+
+  // 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 {
+    @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-variants) != "map" {
+    @error "Colour `#{$colour}` should either be a `map` or `color`, not a `#{type-of($colour-variants)}`";
+  }
+
+  $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;
 }
 
 /// Get the colour for a government organisation
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
index 75ecbe4b4..d3e945cfd 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
@@ -184,12 +184,12 @@ $govuk-link-active-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 95%);
+$_govuk-rebrand-template-background-colour: govuk-colour("blue", $variant: tint-95);
 
 /// Border colour for areas on a light-blue background
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
+$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-colour("blue", $variant: tint-50);
 
 /*# sourceMappingURL=_colours-applied.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-palette.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-palette.scss
index 3714f88eb..56d7182fc 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-palette.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-palette.scss
@@ -34,4 +34,94 @@ $govuk-colours: (
   "turquoise": #28a197
 ) !default;
 
+/// Brand colours
+///
+/// @type Map
+///
+/// @prop $colour.$variant - Representation for the given $variant of $colour, where $colour is the
+///   friendly name for the colour, and $variant the friendly name for the variant
+///   (e.g. `"red": ("primary": #ff0000)`)
+/// @access public
+
+$govuk-brand-colours: (
+  "blue": (
+    "primary": #1d70b8,
+    "tint-25": #5694ca,
+    "tint-50": #8eb8dc,
+    "tint-80": #d2e2f1,
+    "tint-95": #f4f8fb,
+    "shade-50": #0f385c
+  ),
+  "green": (
+    "primary": #11875a,
+    "tint-25": #4da583,
+    "tint-50": #88c3ad,
+    "tint-80": #cfe7de,
+    "tint-95": #f3f9f7,
+    "shade-50": #09442d
+  ),
+  "teal": (
+    "primary": #158187,
+    "tint-25": #50a1a5,
+    "tint-50": #8ac0c3,
+    "tint-80": #d0e6e7,
+    "tint-95": #f3f9f9,
+    "shade-50": #0b4144,
+    "accent": #00ffe0
+  ),
+  "purple": (
+    "primary": #54319f,
+    "tint-25": #7f65b7,
+    "tint-50": #aa98cf,
+    "tint-80": #ddd6ec,
+    "tint-95": #f6f5fa,
+    "shade-50": #2a1950
+  ),
+  "magenta": (
+    "primary": #ca357c,
+    "tint-25": #d7689d,
+    "tint-50": #e59abe,
+    "tint-80": #f4d7e5,
+    "tint-95": #fcf5f8,
+    "shade-50": #651b3e
+  ),
+  "red": (
+    "primary": #ca3535,
+    "tint-25": #d76868,
+    "tint-50": #e59a9a,
+    "tint-80": #f4d7d7,
+    "tint-95": #fcf5f5,
+    "shade-50": #651b1b
+  ),
+  "orange": (
+    "primary": #f47738,
+    "tint-25": #f7996a,
+    "tint-50": #fabb9c,
+    "tint-80": #fde4d7,
+    "tint-95": #fef8f5,
+    "shade-50": #7a3c1c
+  ),
+  "yellow": (
+    "primary": #ffdd00,
+    "tint-25": #ffe640,
+    "tint-50": #ffee80,
+    "tint-80": #fff8cc,
+    "tint-95": #fffdf2,
+    "shade-50": #806f00
+  ),
+  "brown": (
+    "primary": #99704a,
+    "tint-25": #b39477,
+    "tint-50": #ccb8a5,
+    "tint-95": #faf8f6
+  ),
+  "black": (
+    "primary": #0b0c0c,
+    "tint-25": #484949,
+    "tint-50": #858686,
+    "tint-80": #cecece,
+    "tint-95": #f3f3f3
+  )
+);
+
 /*# sourceMappingURL=_colours-palette.scss.map */

---

Action run for 7f504df

[github-actions]

📋 Stats

No changes to any distributed file sizes!

---

Action run for 7f504df