govuk_publishing_components 21.27.1 → 21.28.0

data/node_modules/axe-core/lib/rules/area-alt.json

@@ -6,6 +6,8 @@
 		"cat.text-alternatives",
 		"wcag2a",
 		"wcag111",
+		"wcag244",
+		"wcag412",
 		"section508",
 		"section508.22.a"
 	],

data/node_modules/axe-core/lib/rules/aria-roles.json

@@ -1,6 +1,7 @@
 {
 	"id": "aria-roles",
 	"selector": "[role]",
+	"matches": "no-empty-role-matches.js",
 	"tags": ["cat.aria", "wcag2a", "wcag412"],
 	"metadata": {
 		"description": "Ensures all elements with a role attribute use a valid value",

data/node_modules/axe-core/lib/rules/color-contrast-matches.js

@@ -10,6 +10,32 @@ if (
 	return false;
 }
 
+// form elements that don't have direct child text nodes need to check that
+// the text indent has not been changed and moved the text away from the
+// control
+const formElements = ['INPUT', 'SELECT', 'TEXTAREA'];
+if (formElements.includes(nodeName)) {
+	const style = window.getComputedStyle(node);
+	const textIndent = parseInt(style.getPropertyValue('text-indent'), 10);
+
+	if (textIndent) {
+		// since we can't get the actual bounding rect of the text node, we'll
+		// use the current nodes bounding rect and adjust by the text-indent to
+		// see if it still overlaps the node
+		let rect = node.getBoundingClientRect();
+		rect = {
+			top: rect.top,
+			bottom: rect.bottom,
+			left: rect.left + textIndent,
+			right: rect.right + textIndent
+		};
+
+		if (!axe.commons.dom.visuallyOverlaps(rect, node)) {
+			return false;
+		}
+	}
+}
+
 if (nodeName === 'INPUT') {
 	return (
 		['hidden', 'range', 'color', 'checkbox', 'radio', 'image'].indexOf(

data/node_modules/axe-core/lib/rules/label-content-name-mismatch-matches.js

@@ -12,7 +12,10 @@ if (!role) {
 	return false;
 }
 
-const isWidgetType = aria.lookupTable.rolesOfType.widget.includes(role);
+const widgetRoles = Object.keys(aria.lookupTable.role).filter(
+	key => aria.lookupTable.role[key].type === `widget`
+);
+const isWidgetType = widgetRoles.includes(role);
 if (!isWidgetType) {
 	return false;
 }

data/node_modules/axe-core/lib/rules/no-empty-role-matches.js

@@ -0,0 +1,9 @@
+if (!virtualNode.hasAttr('role')) {
+	return false;
+}
+
+if (!virtualNode.attr('role').trim()) {
+	return false;
+}
+
+return true;

data/node_modules/axe-core/lib/rules/skip-link-matches.js

@@ -1 +1 @@
-return axe.commons.dom.isSkipLink(node);
+return axe.commons.dom.isSkipLink(node) && axe.commons.dom.isOffscreen(node);

data/node_modules/axe-core/package.json

@@ -15,13 +15,13 @@
   ],
   "_from": "axe-core@>=3.5.0 <4.0.0",
   "_hasShrinkwrap": false,
-  "_id": "axe-core@3.5.1",
+  "_id": "axe-core@3.5.2",
   "_inCache": true,
   "_location": "/axe-core",
   "_nodeVersion": "10.19.0",
   "_npmOperationalInternal": {
     "host": "s3://npm-registry-packages",
-    "tmp": "tmp/axe-core_3.5.1_1581596187900_0.49027183092406457"
+    "tmp": "tmp/axe-core_3.5.2_1583784480390_0.6774198347544202"
   },
   "_npmUser": {
     "name": "npmdeque",
@@ -41,8 +41,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.1.tgz",
-  "_shasum": "d8d5aaef73f003e8b766ea28bb078343f3622201",
+  "_resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.2.tgz",
+  "_shasum": "1946be7a18a05b5d37f18d339989db0d5434ebf6",
   "_shrinkwrap": null,
   "_spec": "axe-core@^3.5.0",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
@@ -132,17 +132,17 @@
   },
   "directories": {},
   "dist": {
-    "integrity": "sha512-mwpDgPwWB+5kMHyLjlxh4w25ClJfqSxi+c6LQ4ix349TdCUctMwJNPTkhPD1qP9SYIjFgjeVpVZWCvK9oBGwCg==",
-    "shasum": "d8d5aaef73f003e8b766ea28bb078343f3622201",
-    "tarball": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.1.tgz",
-    "fileCount": 594,
-    "unpackedSize": 2610611,
-    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRT4cCRA9TVsSAnZWagAA02oP/1NeHgsQyTuxOmBL1bmA\nyMvWsro/yPVNoOeAv5lgATjNhRV0lTTN6DjNiRRpau5pB7accvh7Ai0mLVRs\nv6pGZ9Ob5oB9PL5eJsQlTpF6whPpWyMBbHA8IoyMUnQ2B332XWdsC+PDJiPt\nLJdVsUg/MmU79/fBKAwZnlwQu+/hi/MqYhh96NzLfs5Gf2n6q1GSdoMDdhHc\nnv/93qyApqEsyAGvH57z3FWw1Yrf3v0Tbhkt2Xm15bdRsRlbQgt6dfpYpxcf\nkG1lBxM67y6BpF3ivnyrzZwXCb5ofyyzQBKPgZT1fZ5KsC+x0bBNMV3MBv2P\njnzBpXd0qdhu9E4/MuU7Zbc2YKFHaULKKyoOoOdVm6+aSeLqZYf+fhfZanZJ\nf2a8YW0TDLEfrTkzNMGQ73lLkFkNMSp8UfYvphHdtP2v2MzJu1P48tbTJtPU\n3AwZL9OgdZAaUsTRmShGeCNCaR03mKIfW5Tw87gaFlAeipvuGPz61S3l2B2T\nK75PfNpl31g2yNsXQa7FL/DLPacd1S59HzN5MnScuevPFMkgMGiUSCujryR0\nleZmfVXEFvcVQiT6MgCxKTqV4HfeOvwuUh1NjY6zT+rVLfVFQ4HwE1rADx4U\nij3gEgLLH2OJKxFdIfwRRLJMQlFoL4apJMrsTCOcNy6U0J2n+ZbAX5GoYezr\nV3XB\r\n=KopD\r\n-----END PGP SIGNATURE-----\r\n"
+    "integrity": "sha512-9wBDgdzbn06on6Xt+ay7EM4HV+NBOkeXhjK9DMezD8/qvJKeUTzheGHhM+U1uNaX4OvuIR4BePDStRLF7vyOfg==",
+    "shasum": "1946be7a18a05b5d37f18d339989db0d5434ebf6",
+    "tarball": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.2.tgz",
+    "fileCount": 596,
+    "unpackedSize": 2625684,
+    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZqIhCRA9TVsSAnZWagAAm4UP/3gDM5a8sDi1UnR25S9X\ntTKQWCkU9JQ/TZ3JHGGn9dAhfZX4iM/dUVhzrmFOgM+szoj6dsL3LFsKLWSD\nxzMNNSQb+7DFEmr9dwqDFAEwsEaXBWzASNtSe+/I4HOSj/WC6VrJDMP0jNKz\n+ewrj0p/tSAmQugMP2jzKflC6TwV0LhKSh4+nb9Iq9ZbwuRBx6hYUs4RE6Fd\ndnTI54RW3kiyWyDcunH9zRalSkIS0JQtSmiJYWqBpKcw2te2GpH77ZbJLYNj\nvaIpWJLyuspRUrm+fKwX2Wxt3vNk5nHpUk4Rl/YpLuCcpFeArlSXigN1BVi4\n9I/xtmp7AolP3+xNMEp8FkxdW0hxVQ7lpUOi1d/xvSeISrBgv2MUDY3UzuNY\n6lEKeMrmpLCmre+ajQ6ekzpdZhHnJcr/B4GF8Qo+bJEJScejObxWWk6+DmYT\nubWo749QDmOdbgQ5pRKm8i3/4A7D11MY/vD0TadWyRTw+YX0g5NhDdVESNrl\nco1OvbrbDUHn7mZPdNR33xxF5ctNnNm4kdn+1EDYsaTMIoBcGvVCm3xDW2oy\nE/9VH67/vj2ptBKem87nmUfN2BD0gcv8UXKo7yfNImc3i28ncHxFK5glhinI\nonfuE/LBJVqfAO0VK89rYvbqbph6/S4Sgvj4dxYMDPm3HOnh5rkowqmj2Eps\ntihd\r\n=oY27\r\n-----END PGP SIGNATURE-----\r\n"
   },
   "engines": {
     "node": ">=4"
   },
-  "gitHead": "277142590772e72f54747534eeb0faa27df1df18",
+  "gitHead": "15ff7eb910681dac1745b360fb0e37ef2eb1d435",
   "homepage": "https://www.deque.com/axe/",
   "keywords": [
     "Accessibility",
@@ -218,5 +218,5 @@
     }
   },
   "typings": "axe.d.ts",
-  "version": "3.5.1"
+  "version": "3.5.2"
 }

data/node_modules/axe-core/sri-history.json

@@ -174,5 +174,9 @@
 	"3.5.1": {
 		"axe.js": "sha256-J5+J6tFJyKx7Jyn9xK3rJhAyJCGAPR6kOwzXjpdFbEM=",
 		"axe.min.js": "sha256-wo0QYtgoayRMifoYIHc8Spw5NmeFN4ojGLSqmrUuhX8="
+	},
+	"3.5.2": {
+		"axe.js": "sha256-wf7AYQ0YxwohIAqhYIfQ6y1VDQmP2zbgGhL6mb8a+Eg=",
+		"axe.min.js": "sha256-suutTbfowm19n2znRYpsLOcHOkwv9g+ximjS8TLJ6/8="
 	}
 }

data/node_modules/govuk-frontend/govuk/all.js

@@ -1748,7 +1748,7 @@ Checkboxes.prototype.handleClick = function (event) {
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 
@@ -2026,51 +2026,41 @@ Radios.prototype.handleClick = function (event) {
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 

data/node_modules/govuk-frontend/govuk/components/button/template.njk

@@ -24,7 +24,7 @@
 {#- The SVG needs `focusable="false"` so that Internet Explorer does not
 treat it as an interactive element - without this it will be
 'focusable' when using the keyboard to navigate. #}
-<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
   <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
 </svg>
   {% endset %}

data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json

@@ -59,7 +59,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json

@@ -23,7 +23,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -78,7 +78,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the error message.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js

@@ -692,7 +692,7 @@ if (detect) return
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 

data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json

@@ -41,7 +41,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/footer/template.njk

@@ -54,7 +54,7 @@
         treat it as an interactive element - without this it will be
         'focusable' when using the keyboard to navigate. #}
         <svg
-          role="presentation"
+          aria-hidden="true"
           focusable="false"
           class="govuk-footer__licence-logo"
           xmlns="http://www.w3.org/2000/svg"

data/node_modules/govuk-frontend/govuk/components/header/template.njk

@@ -17,7 +17,7 @@
           treat it as an interactive element - without this it will be
           'focusable' when using the keyboard to navigate. #}
           <svg
-            role="presentation"
+            aria-hidden="true"
             focusable="false"
             class="govuk-header__logotype-crown"
             xmlns="http://www.w3.org/2000/svg"

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -53,7 +53,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json

@@ -17,7 +17,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/select/macro-options.json

@@ -73,7 +73,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

data/node_modules/govuk-frontend/govuk/components/skip-link/macro-options.json

@@ -14,8 +14,8 @@
     {
         "name": "href",
         "type": "string",
-        "required": true,
-        "description": "The value of the skip link href attribute. Defaults to"
+        "required": false,
+        "description": "The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js

@@ -746,51 +746,41 @@ if (detect) return
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 

data/node_modules/govuk-frontend/govuk/components/tabs/template.njk

@@ -24,9 +24,9 @@
   {% for item in params.items %}
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <div class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
         {{ item.panel.html | safe if item.panel.html else item.panel.text }}
-      </section>
+      </div>
     {% endif %}
   {% endfor %}
 </div>

data/node_modules/govuk-frontend/govuk/components/tag/_tag.scss

@@ -38,7 +38,54 @@
     }
   }
 
+  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
   .govuk-tag--inactive {
     background-color: govuk-colour("dark-grey", $legacy: "grey-1");
   }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+
 }