govuk_publishing_components 67.0.1 → 68.0.0

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss

@@ -1,8 +1,44 @@
+////
+/// @group components/tag
+////
+
+/// Get tag text colour
+/// Almost all tags should use the 50% shade of their colour for their text
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-text-colour($colour) {
+  @return govuk-colour($colour, $variant: "shade-50");
+}
+
+/// Get tag background colour
+/// Almost all tags should use the 80% tint of their colour for their background
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-background-colour($colour) {
+  @return govuk-colour($colour, $variant: "tint-80");
+}
+
+/// Generate colour CSS for tag and tag modifiers
+/// Applies standard rules from the tag colour functions
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @access private
+@mixin _govuk-tag-colours($colour) {
+  color: _govuk-tag-text-colour($colour);
+  background-color: _govuk-tag-background-colour($colour);
+}
+
 @include govuk-exports("govuk/component/tag") {
   $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
 
   .govuk-tag {
     @include govuk-font($size: 19);
+    // Default tag colour is blue
+    @include _govuk-tag-colours("blue");
 
     display: inline-block;
 
@@ -25,8 +61,8 @@
     padding-right: 8px;
     padding-bottom: 3px;
     padding-left: 8px;
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+
+    border-radius: 1px;
     text-decoration: none;
     overflow-wrap: break-word;
 
@@ -43,54 +79,53 @@
     }
   }
 
-  .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey"), 50%);
-    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent
+  // colour rules per modifier
+  .govuk-tag--green {
+    @include _govuk-tag-colours("green");
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("bright-purple"), 50%);
-    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+    @include _govuk-tag-colours("purple");
   }
 
-  .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60%);
-    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+  .govuk-tag--red {
+    @include _govuk-tag-colours("red");
   }
 
-  .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  .govuk-tag--orange {
+    @include _govuk-tag-colours("orange");
   }
 
-  .govuk-tag--light-blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 90%);
+  .govuk-tag--teal {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65%);
-    background-color: govuk-tint(govuk-colour("yellow"), 75%);
+  .govuk-tag--magenta {
+    @include _govuk-tag-colours("magenta");
   }
 
-  .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55%);
-    background-color: govuk-tint(govuk-colour("orange"), 70%);
+  // Yellow uses different colours to ensure it's legible
+  .govuk-tag--yellow {
+    color: govuk-colour("orange", $variant: "shade-50");
+    background-color: govuk-colour("yellow", $variant: "tint-50");
   }
 
-  .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 80%);
-    background-color: govuk-tint(govuk-colour("red"), 75%);
+  // Grey uses different colours to ensure it's legible
+  .govuk-tag--grey {
+    color: govuk-colour("black");
+    background-color: govuk-colour("black", $variant: "tint-80");
   }
 
-  .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 50%);
-    background-color: govuk-tint(govuk-colour("pink"), 85%);
+  // Turquoise and pink are deprecated over teal and magenta respectively
+  // @deprecated
+  .govuk-tag--turquoise {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20%);
-    background-color: govuk-tint(govuk-colour("green"), 80%);
+  // @deprecated
+  .govuk-tag--pink {
+    @include _govuk-tag-colours("magenta");
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA;EACE,qHAAqH;;EAErH;IACE,8BAA8B;;IAE9B,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,0EAA0E;IAC1E,2EAA2E;IAC3E,sDAAsD;IACtD,CAAC;IACD,2EAA2E;IAC3E,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,6CAA6C;IAC7C,uDAAuD;IACvD,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,0EAA0E;IAC1E,yEAAyE;IACzE,eAAe;IACf,CAAC;IACD,qEAAqE;IACrE,yEAAyE;IACzE,WAAW;IACX;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,sDAAsD;IACtD,gEAAgE;EAClE;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,4CAA4C;IAC5C,sDAAsD;EACxD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,8CAA8C;IAC9C,wDAAwD;EAC1D;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/tag\") {\n  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, \"mobile\"), map-get($govuk-breakpoints, \"mobile\") / 2, 160px);\n\n  .govuk-tag {\n    @include govuk-font($size: 19);\n\n    display: inline-block;\n\n    // set a max-width along with overflow-wrap: break-word below for instances\n    // where a tag has a single long word and could overflow its boundaries.\n    // The max-width is necessary as break-word requires a bounding box to base\n    // where to break off of.\n    max-width: $govuk-tag-max-width;\n\n    // These negative margins make sure that the tag component doesn’t increase\n    // the size of its container. Otherwise, for example, a table row containing\n    // a tag will be taller than one containing plain text.\n    //\n    // The negative margin added to the top and bottom matches the extra padding\n    // added.\n    margin-top: -2px;\n    margin-bottom: -3px;\n\n    padding-top: 2px;\n    padding-right: 8px;\n    padding-bottom: 3px;\n    padding-left: 8px;\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n    text-decoration: none;\n    overflow-wrap: break-word;\n\n    // When forced colour mode is active, for example to provide high contrast,\n    // the background colour of the tag is the same as the rest of the page. To\n    // ensure that the tag is perceived as separate from any surround text, it\n    // is made bold.\n    //\n    // Transparent outlines are no longer added, as they make the Tag look\n    // indistinguishable from a button – but the tag is not interactive in the\n    // same way.\n    @media screen and (forced-colors: active) {\n      font-weight: bold;\n    }\n  }\n\n  .govuk-tag--grey {\n    color: govuk-shade(govuk-colour(\"dark-grey\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"dark-grey\"), 85%);\n  }\n\n  .govuk-tag--purple {\n    color: govuk-shade(govuk-colour(\"bright-purple\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"bright-purple\"), 85%);\n  }\n\n  .govuk-tag--turquoise {\n    color: govuk-shade(govuk-colour(\"turquoise\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"turquoise\"), 80%);\n  }\n\n  .govuk-tag--blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n  }\n\n  .govuk-tag--light-blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 90%);\n  }\n\n  .govuk-tag--yellow {\n    color: govuk-shade(govuk-colour(\"yellow\"), 65%);\n    background-color: govuk-tint(govuk-colour(\"yellow\"), 75%);\n  }\n\n  .govuk-tag--orange {\n    color: govuk-shade(govuk-colour(\"orange\"), 55%);\n    background-color: govuk-tint(govuk-colour(\"orange\"), 70%);\n  }\n\n  .govuk-tag--red {\n    color: govuk-shade(govuk-colour(\"red\"), 80%);\n    background-color: govuk-tint(govuk-colour(\"red\"), 75%);\n  }\n\n  .govuk-tag--pink {\n    color: govuk-shade(govuk-colour(\"pink\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"pink\"), 85%);\n  }\n\n  .govuk-tag--green {\n    color: govuk-shade(govuk-colour(\"green\"), 20%);\n    background-color: govuk-tint(govuk-colour(\"green\"), 80%);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,sBAAsB;AACtB,0EAA0E;AAC1E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,mDAAmD;AACrD;;AAEA,4BAA4B;AAC5B,+EAA+E;AAC/E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,kDAAkD;AACpD;;AAEA,gDAAgD;AAChD,uDAAuD;AACvD,EAAE;AACF,mEAAmE;AACnE,kBAAkB;AAClB;EACE,sCAAsC;EACtC,uDAAuD;AACzD;;AAEA;EACE,qHAAqH;;EAErH;IACE,8BAA8B;IAC9B,4BAA4B;IAC5B,mCAAmC;;IAEnC,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,0EAA0E;IAC1E,2EAA2E;IAC3E,sDAAsD;IACtD,CAAC;IACD,2EAA2E;IAC3E,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;;IAEjB,kBAAkB;IAClB,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,0EAA0E;IAC1E,yEAAyE;IACzE,eAAe;IACf,CAAC;IACD,qEAAqE;IACrE,yEAAyE;IACzE,WAAW;IACX;MACE,iBAAiB;IACnB;EACF;;EAEA,6EAA6E;EAC7E,2BAA2B;EAC3B;IACE,oCAAoC;EACtC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,kCAAkC;EACpC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,sCAAsC;EACxC;;EAEA,sDAAsD;EACtD;IACE,mDAAmD;IACnD,6DAA6D;EAC/D;;EAEA,oDAAoD;EACpD;IACE,4BAA4B;IAC5B,4DAA4D;EAC9D;;EAEA,sEAAsE;EACtE,aAAa;EACb;IACE,mCAAmC;EACrC;;EAEA,aAAa;EACb;IACE,sCAAsC;EACxC;AACF","file":"_index.scss","sourcesContent":["////\n/// @group components/tag\n////\n\n/// Get tag text colour\n/// Almost all tags should use the 50% shade of their colour for their text\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-text-colour($colour) {\n  @return govuk-colour($colour, $variant: \"shade-50\");\n}\n\n/// Get tag background colour\n/// Almost all tags should use the 80% tint of their colour for their background\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-background-colour($colour) {\n  @return govuk-colour($colour, $variant: \"tint-80\");\n}\n\n/// Generate colour CSS for tag and tag modifiers\n/// Applies standard rules from the tag colour functions\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @access private\n@mixin _govuk-tag-colours($colour) {\n  color: _govuk-tag-text-colour($colour);\n  background-color: _govuk-tag-background-colour($colour);\n}\n\n@include govuk-exports(\"govuk/component/tag\") {\n  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, \"mobile\"), map-get($govuk-breakpoints, \"mobile\") / 2, 160px);\n\n  .govuk-tag {\n    @include govuk-font($size: 19);\n    // Default tag colour is blue\n    @include _govuk-tag-colours(\"blue\");\n\n    display: inline-block;\n\n    // set a max-width along with overflow-wrap: break-word below for instances\n    // where a tag has a single long word and could overflow its boundaries.\n    // The max-width is necessary as break-word requires a bounding box to base\n    // where to break off of.\n    max-width: $govuk-tag-max-width;\n\n    // These negative margins make sure that the tag component doesn’t increase\n    // the size of its container. Otherwise, for example, a table row containing\n    // a tag will be taller than one containing plain text.\n    //\n    // The negative margin added to the top and bottom matches the extra padding\n    // added.\n    margin-top: -2px;\n    margin-bottom: -3px;\n\n    padding-top: 2px;\n    padding-right: 8px;\n    padding-bottom: 3px;\n    padding-left: 8px;\n\n    border-radius: 1px;\n    text-decoration: none;\n    overflow-wrap: break-word;\n\n    // When forced colour mode is active, for example to provide high contrast,\n    // the background colour of the tag is the same as the rest of the page. To\n    // ensure that the tag is perceived as separate from any surround text, it\n    // is made bold.\n    //\n    // Transparent outlines are no longer added, as they make the Tag look\n    // indistinguishable from a button – but the tag is not interactive in the\n    // same way.\n    @media screen and (forced-colors: active) {\n      font-weight: bold;\n    }\n  }\n\n  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent\n  // colour rules per modifier\n  .govuk-tag--green {\n    @include _govuk-tag-colours(\"green\");\n  }\n\n  .govuk-tag--purple {\n    @include _govuk-tag-colours(\"purple\");\n  }\n\n  .govuk-tag--red {\n    @include _govuk-tag-colours(\"red\");\n  }\n\n  .govuk-tag--orange {\n    @include _govuk-tag-colours(\"orange\");\n  }\n\n  .govuk-tag--teal {\n    @include _govuk-tag-colours(\"teal\");\n  }\n\n  .govuk-tag--magenta {\n    @include _govuk-tag-colours(\"magenta\");\n  }\n\n  // Yellow uses different colours to ensure it's legible\n  .govuk-tag--yellow {\n    color: govuk-colour(\"orange\", $variant: \"shade-50\");\n    background-color: govuk-colour(\"yellow\", $variant: \"tint-50\");\n  }\n\n  // Grey uses different colours to ensure it's legible\n  .govuk-tag--grey {\n    color: govuk-colour(\"black\");\n    background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n  }\n\n  // Turquoise and pink are deprecated over teal and magenta respectively\n  // @deprecated\n  .govuk-tag--turquoise {\n    @include _govuk-tag-colours(\"teal\");\n  }\n\n  // @deprecated\n  .govuk-tag--pink {\n    @include _govuk-tag-colours(\"magenta\");\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/tag/fixtures.json

@@ -24,29 +24,17 @@
             "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
         },
-        {
-            "name": "light blue",
-            "options": {
-                "text": "Light blue",
-                "classes": "govuk-tag--light-blue"
-            },
-            "hidden": false,
-            "description": "",
-            "pageTemplateOptions": {},
-            "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--light-blue\">\n  Light blue\n</strong>"
-        },
         {
             "name": "turquoise",
             "options": {
-                "text": "Turquoise",
-                "classes": "govuk-tag--turquoise"
+                "text": "Teal",
+                "classes": "govuk-tag--teal"
             },
             "hidden": false,
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
+            "html": "<strong class=\"govuk-tag govuk-tag--teal\">\n  Teal\n</strong>"
         },
         {
             "name": "green",
@@ -75,14 +63,14 @@
         {
             "name": "pink",
             "options": {
-                "text": "Pink",
-                "classes": "govuk-tag--pink"
+                "text": "Magenta",
+                "classes": "govuk-tag--magenta"
             },
             "hidden": false,
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
+            "html": "<strong class=\"govuk-tag govuk-tag--magenta\">\n  Magenta\n</strong>"
         },
         {
             "name": "red",

data/node_modules/govuk-frontend/dist/govuk/components/tag/template-pink.html

@@ -1,3 +1,3 @@
-<strong class="govuk-tag govuk-tag--pink">
-  Pink
+<strong class="govuk-tag govuk-tag--magenta">
+  Magenta
 </strong>

data/node_modules/govuk-frontend/dist/govuk/components/tag/template-turquoise.html

@@ -1,3 +1,3 @@
-<strong class="govuk-tag govuk-tag--turquoise">
-  Turquoise
+<strong class="govuk-tag govuk-tag--teal">
+  Teal
 </strong>

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -1,7 +1,7 @@
 @import "../tag/index";
 
 @include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-task-list {
     @include govuk-font($size: 19);
@@ -25,11 +25,13 @@
     margin-bottom: 0;
     padding-top: govuk-spacing(2);
     padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
   }
 
   .govuk-task-list__item:first-child {
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid;
+    border-top-color: govuk-functional-colour(border);
   }
 
   // This class is added to the <li> elements where the task name is a link. The
@@ -54,7 +56,7 @@
   }
 
   .govuk-task-list__status--cannot-start-yet {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   // This adds an empty transparent box covering the whole row, including the
@@ -72,7 +74,7 @@
 
   .govuk-task-list__hint {
     margin-top: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yDAAyD;;EAEzD;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uEAAuE;EACvE,6EAA6E;EAC7E,4CAA4C;EAC5C,CAAC;EACD,oEAAoE;EACpE,4EAA4E;EAC5E,mBAAmB;EACnB;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;EACrC;;EAEA,0EAA0E;EAC1E,0EAA0E;EAC1E,sDAAsD;EACtD;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"light-grey\");\n\n  .govuk-task-list {\n    @include govuk-font($size: 19);\n    margin-top: 0;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: 0;\n    list-style-type: none;\n  }\n\n  // This uses table layout so that the task name and status always appear\n  // side-by-side, with the width of each 'column' being flexible depending upon\n  // the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned\n  // transparent element box can be added within the link so that the whole row\n  // can be clickable.\n  .govuk-task-list__item {\n    display: table;\n    position: relative;\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(2);\n    padding-bottom: govuk-spacing(2);\n    border-bottom: 1px solid $govuk-border-colour;\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid $govuk-border-colour;\n  }\n\n  // This class is added to the <li> elements where the task name is a link. The\n  // background hover colour is added to help indicate that the whole row is\n  // clickable, rather than just the visible link text.\n  .govuk-task-list__item--with-link:hover {\n    background: $govuk-task-list-hover-colour;\n  }\n\n  .govuk-task-list__name-and-hint {\n    display: table-cell;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n    text-align: right;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: $govuk-secondary-text-colour;\n  }\n\n  // This adds an empty transparent box covering the whole row, including the\n  // task status and any hint text. Because this is generated within the link\n  // element, this allows the whole area to be clickable.\n  .govuk-task-list__link::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .govuk-task-list__hint {\n    margin-top: govuk-spacing(1);\n    color: $govuk-secondary-text-colour;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yEAAyE;;EAEzE;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uEAAuE;EACvE,6EAA6E;EAC7E,4CAA4C;EAC5C,CAAC;EACD,oEAAoE;EACpE,4EAA4E;EAC5E,mBAAmB;EACnB;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,wBAAwB;IACxB,oDAAoD;EACtD;;EAEA;IACE,qBAAqB;IACrB,iDAAiD;EACnD;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,8CAA8C;EAChD;;EAEA,0EAA0E;EAC1E,0EAA0E;EAC1E,sDAAsD;EACtD;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,8CAA8C;EAChD;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"black\", $variant: \"tint-95\");\n\n  .govuk-task-list {\n    @include govuk-font($size: 19);\n    margin-top: 0;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: 0;\n    list-style-type: none;\n  }\n\n  // This uses table layout so that the task name and status always appear\n  // side-by-side, with the width of each 'column' being flexible depending upon\n  // the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned\n  // transparent element box can be added within the link so that the whole row\n  // can be clickable.\n  .govuk-task-list__item {\n    display: table;\n    position: relative;\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(2);\n    padding-bottom: govuk-spacing(2);\n    border-bottom: 1px solid;\n    border-bottom-color: govuk-functional-colour(border);\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid;\n    border-top-color: govuk-functional-colour(border);\n  }\n\n  // This class is added to the <li> elements where the task name is a link. The\n  // background hover colour is added to help indicate that the whole row is\n  // clickable, rather than just the visible link text.\n  .govuk-task-list__item--with-link:hover {\n    background: $govuk-task-list-hover-colour;\n  }\n\n  .govuk-task-list__name-and-hint {\n    display: table-cell;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n    text-align: right;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: govuk-functional-colour(secondary-text);\n  }\n\n  // This adds an empty transparent box covering the whole row, including the\n  // task status and any hint text. Because this is generated within the link\n  // element, this allows the whole area to be clickable.\n  .govuk-task-list__link::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .govuk-task-list__hint {\n    margin-top: govuk-spacing(1);\n    color: govuk-functional-colour(secondary-text);\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/task-list/fixtures.json

@@ -113,7 +113,7 @@
                         "status": {
                             "tag": {
                                 "text": "Not started",
-                                "classes": "govuk-tag--light-blue"
+                                "classes": "govuk-tag--teal"
                             }
                         }
                     },
@@ -128,7 +128,7 @@
                         "status": {
                             "tag": {
                                 "text": "Review",
-                                "classes": "govuk-tag--pink"
+                                "classes": "govuk-tag--magenta"
                             }
                         }
                     },
@@ -174,7 +174,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": true,
-            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">\n        Business plan\n      </a>\n      <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Review\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Charitable status\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Error\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        Payment\n      </div>\n      <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n        It will cost between £15 and £75\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--teal\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">\n        Business plan\n      </a>\n      <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--magenta\">\n        Review\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Charitable status\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Error\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        Payment\n      </div>\n      <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n        It will cost between £15 and £75\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "with all possible colours",
@@ -230,8 +230,8 @@
                         "href": "#",
                         "status": {
                             "tag": {
-                                "text": "Light blue",
-                                "classes": "govuk-tag--light-blue"
+                                "text": "Teal",
+                                "classes": "govuk-tag--teal"
                             }
                         }
                     },
@@ -240,18 +240,6 @@
                             "text": "Task F"
                         },
                         "href": "#",
-                        "status": {
-                            "tag": {
-                                "text": "Turquoise",
-                                "classes": "govuk-tag--turquoise"
-                            }
-                        }
-                    },
-                    {
-                        "title": {
-                            "text": "Task G"
-                        },
-                        "href": "#",
                         "status": {
                             "tag": {
                                 "text": "Green",
@@ -261,7 +249,7 @@
                     },
                     {
                         "title": {
-                            "text": "Task H"
+                            "text": "Task G"
                         },
                         "href": "#",
                         "status": {
@@ -273,19 +261,19 @@
                     },
                     {
                         "title": {
-                            "text": "Task I"
+                            "text": "Task H"
                         },
                         "href": "#",
                         "status": {
                             "tag": {
-                                "text": "Pink",
-                                "classes": "govuk-tag--pink"
+                                "text": "Magenta",
+                                "classes": "govuk-tag--magenta"
                             }
                         }
                     },
                     {
                         "title": {
-                            "text": "Task J"
+                            "text": "Task I"
                         },
                         "href": "#",
                         "status": {
@@ -297,7 +285,7 @@
                     },
                     {
                         "title": {
-                            "text": "Task K"
+                            "text": "Task J"
                         },
                         "href": "#",
                         "status": {
@@ -309,7 +297,7 @@
                     },
                     {
                         "title": {
-                            "text": "Task L"
+                            "text": "Task K"
                         },
                         "href": "#",
                         "status": {
@@ -325,7 +313,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n      Secondary text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task C\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--grey\">\n        Grey\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Task D\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Task E\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Light blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task F\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      <strong class=\"govuk-tag govuk-tag--turquoise\">\n        Turquoise\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">\n        Task G\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n      <strong class=\"govuk-tag govuk-tag--green\">\n        Green\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">\n        Task H\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n      <strong class=\"govuk-tag govuk-tag--purple\">\n        Purple\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">\n        Task I\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Pink\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">\n        Task J\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Red\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">\n        Task K\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n      <strong class=\"govuk-tag govuk-tag--orange\">\n        Orange\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">\n        Task L\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n      <strong class=\"govuk-tag govuk-tag--yellow\">\n        Yellow\n      </strong>\n    </div>\n  </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n      Secondary text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task C\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--grey\">\n        Grey\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Task D\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Task E\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--teal\">\n        Teal\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task F\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      <strong class=\"govuk-tag govuk-tag--green\">\n        Green\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">\n        Task G\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n      <strong class=\"govuk-tag govuk-tag--purple\">\n        Purple\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">\n        Task H\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n      <strong class=\"govuk-tag govuk-tag--magenta\">\n        Magenta\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">\n        Task I\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Red\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">\n        Task J\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n      <strong class=\"govuk-tag govuk-tag--orange\">\n        Orange\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">\n        Task K\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n      <strong class=\"govuk-tag govuk-tag--yellow\">\n        Yellow\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "with very long single word tags",

data/node_modules/govuk-frontend/dist/govuk/components/task-list/template-with-all-possible-colours.html

@@ -51,8 +51,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-5-status">
-      <strong class="govuk-tag govuk-tag--light-blue">
-        Light blue
+      <strong class="govuk-tag govuk-tag--teal">
+        Teal
       </strong>
     </div>
   </li>
@@ -63,8 +63,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-6-status">
-      <strong class="govuk-tag govuk-tag--turquoise">
-        Turquoise
+      <strong class="govuk-tag govuk-tag--green">
+        Green
       </strong>
     </div>
   </li>
@@ -75,8 +75,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-7-status">
-      <strong class="govuk-tag govuk-tag--green">
-        Green
+      <strong class="govuk-tag govuk-tag--purple">
+        Purple
       </strong>
     </div>
   </li>
@@ -87,8 +87,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-8-status">
-      <strong class="govuk-tag govuk-tag--purple">
-        Purple
+      <strong class="govuk-tag govuk-tag--magenta">
+        Magenta
       </strong>
     </div>
   </li>
@@ -99,8 +99,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-9-status">
-      <strong class="govuk-tag govuk-tag--pink">
-        Pink
+      <strong class="govuk-tag govuk-tag--red">
+        Red
       </strong>
     </div>
   </li>
@@ -111,8 +111,8 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-10-status">
-      <strong class="govuk-tag govuk-tag--red">
-        Red
+      <strong class="govuk-tag govuk-tag--orange">
+        Orange
       </strong>
     </div>
   </li>
@@ -123,18 +123,6 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-11-status">
-      <strong class="govuk-tag govuk-tag--orange">
-        Orange
-      </strong>
-    </div>
-  </li>
-  <li class="govuk-task-list__item govuk-task-list__item--with-link">
-    <div class="govuk-task-list__name-and-hint">
-      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-12-status">
-        Task L
-      </a>
-    </div>
-    <div class="govuk-task-list__status" id="task-list-12-status">
       <strong class="govuk-tag govuk-tag--yellow">
         Yellow
       </strong>

data/node_modules/govuk-frontend/dist/govuk/components/task-list/template-with-hint-text-and-additional-states.html

@@ -17,7 +17,7 @@
       </a>
     </div>
     <div class="govuk-task-list__status" id="task-list-2-status">
-      <strong class="govuk-tag govuk-tag--light-blue">
+      <strong class="govuk-tag govuk-tag--teal">
         Not started
       </strong>
     </div>
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="govuk-task-list__status" id="task-list-3-status">
-      <strong class="govuk-tag govuk-tag--pink">
+      <strong class="govuk-tag govuk-tag--magenta">
         Review
       </strong>
     </div>

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss

@@ -15,8 +15,9 @@
 
     resize: vertical;
 
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
     border-radius: 0;
+    border-color: govuk-functional-colour(input-border);
 
     -webkit-appearance: none;
 
@@ -33,10 +34,10 @@
   }
 
   .govuk-textarea--error {
-    border-color: $govuk-error-colour;
+    border-color: govuk-functional-colour(error);
 
     &:focus {
-      border-color: $govuk-input-border-colour;
+      border-color: govuk-functional-colour(input-border);
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/textarea/_index.scss"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE;IACE,kDAAkD;;IAElD,sBAAsB;IACtB,cAAc;IACd,WAAW;IACX,gBAAgB;IAChB,6CAA6C;IAC7C,yBAAyB;;IAEzB,gBAAgB;;IAEhB,yEAAyE;IACzE,gBAAgB;;IAEhB,wBAAwB;;IAExB;MACE,iCAAiC;IACnC;;IAEA;MACE,YAAY;MACZ,cAAc;MACd,6BAA6B;MAC7B,mBAAmB;IACrB;EACF;;EAEA;IACE,iCAAiC;;IAEjC;MACE,wCAAwC;IAC1C;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/textarea\") {\n  .govuk-textarea {\n    @include govuk-font($size: 19, $line-height: 1.25);\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-height: 40px;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: govuk-spacing(1);\n\n    resize: vertical;\n\n    border: $govuk-border-width-form-element solid $govuk-input-border-colour;\n    border-radius: 0;\n\n    -webkit-appearance: none;\n\n    &:focus {\n      @include govuk-focused-form-input;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      color: inherit;\n      background-color: transparent;\n      cursor: not-allowed;\n    }\n  }\n\n  .govuk-textarea--error {\n    border-color: $govuk-error-colour;\n\n    &:focus {\n      border-color: $govuk-input-border-colour;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/textarea/_index.scss"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE;IACE,kDAAkD;;IAElD,sBAAsB;IACtB,cAAc;IACd,WAAW;IACX,gBAAgB;IAChB,6CAA6C;IAC7C,yBAAyB;;IAEzB,gBAAgB;;IAEhB,8CAA8C;IAC9C,gBAAgB;IAChB,mDAAmD;;IAEnD,wBAAwB;;IAExB;MACE,iCAAiC;IACnC;;IAEA;MACE,YAAY;MACZ,cAAc;MACd,6BAA6B;MAC7B,mBAAmB;IACrB;EACF;;EAEA;IACE,4CAA4C;;IAE5C;MACE,mDAAmD;IACrD;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/textarea\") {\n  .govuk-textarea {\n    @include govuk-font($size: 19, $line-height: 1.25);\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-height: 40px;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: govuk-spacing(1);\n\n    resize: vertical;\n\n    border: $govuk-border-width-form-element solid;\n    border-radius: 0;\n    border-color: govuk-functional-colour(input-border);\n\n    -webkit-appearance: none;\n\n    &:focus {\n      @include govuk-focused-form-input;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      color: inherit;\n      background-color: transparent;\n      cursor: not-allowed;\n    }\n  }\n\n  .govuk-textarea--error {\n    border-color: govuk-functional-colour(error);\n\n    &:focus {\n      border-color: govuk-functional-colour(input-border);\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -25,11 +25,12 @@
 
     // When a user customises their colours the background colour will often be
     // removed. Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid $govuk-text-colour;
+    border: 3px solid;
     border-radius: 50%;
+    border-color: govuk-functional-colour(text);
 
-    color: $govuk-body-background-colour;
-    background: $govuk-text-colour;
+    color: govuk-functional-colour(body-background);
+    background: govuk-functional-colour(text);
 
     font-size: 30px;
     line-height: 29px;

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/warning-text/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,6CAA6C;IAC7C,qCAAqC;IACrC,kBAAkB;IAClB,2BAA2B;EAC7B;;EAEA;IACE,sBAAsB;;IAEtB,qBAAqB;;IAErB,kBAAkB;IAClB,OAAO;;IAEP,eAAe;IACf,gBAAgB;IAChB,gBAAgB;;IAEhB;MACE,gBAAgB;IAClB;;IAEA,0EAA0E;IAC1E,yEAAyE;IACzE,oCAAoC;IACpC,kBAAkB;;IAElB,oCAAoC;IACpC,8BAA8B;;IAE9B,eAAe;IACf,iBAAiB;;IAEjB,kBAAkB;;IAElB,wEAAwE;IACxE,yBAAyB;IACzB,yBAAiB;QAAjB,qBAAiB;YAAjB,iBAAiB;;IAEjB,iEAAiE;IACjE,uEAAuE;IACvE,yBAAyB;;IAEzB;MACE,wBAAwB;MACxB,iBAAiB;MACjB,uBAAuB;IACzB;EACF;;EAEA;IACE,0BAA0B;IAC1B,cAAc;IACd,kBAAkB;IAClB,8DAA8D;IAC9D,2CAA2C;IAC3C,oBAAoB;EACtB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/warning-text\") {\n  .govuk-warning-text {\n    @include govuk-font($size: 19);\n    @include govuk-responsive-margin(6, \"bottom\");\n    @include govuk-typography-weight-bold;\n    position: relative;\n    padding: govuk-spacing(2) 0;\n  }\n\n  .govuk-warning-text__icon {\n    box-sizing: border-box;\n\n    display: inline-block;\n\n    position: absolute;\n    left: 0;\n\n    min-width: 35px;\n    min-height: 35px;\n    margin-top: -7px;\n\n    @media #{govuk-from-breakpoint(tablet)} {\n      margin-top: -5px;\n    }\n\n    // When a user customises their colours the background colour will often be\n    // removed. Adding a border to the component keeps it's shape as a circle.\n    border: 3px solid $govuk-text-colour;\n    border-radius: 50%;\n\n    color: $govuk-body-background-colour;\n    background: $govuk-text-colour;\n\n    font-size: 30px;\n    line-height: 29px;\n\n    text-align: center;\n\n    // Prevent the exclamation mark from being included when the warning text\n    // is copied, for example.\n    user-select: none;\n\n    // Improve rendering in Windows High Contrast Mode (Edge), where a\n    // readability backplate behind the exclamation mark obscures the circle\n    forced-color-adjust: none;\n\n    @media screen and (forced-colors: active) {\n      border-color: windowText;\n      color: windowText;\n      background: transparent;\n    }\n  }\n\n  .govuk-warning-text__text {\n    @include govuk-text-colour;\n    display: block;\n    padding-left: 45px;\n    // While `<strong>` is styled `bold` or `bolder` by user-agents\n    // this can be reset by the app's stylesheet\n    font-weight: inherit;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/warning-text/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,6CAA6C;IAC7C,qCAAqC;IACrC,kBAAkB;IAClB,2BAA2B;EAC7B;;EAEA;IACE,sBAAsB;;IAEtB,qBAAqB;;IAErB,kBAAkB;IAClB,OAAO;;IAEP,eAAe;IACf,gBAAgB;IAChB,gBAAgB;;IAEhB;MACE,gBAAgB;IAClB;;IAEA,0EAA0E;IAC1E,yEAAyE;IACzE,iBAAiB;IACjB,kBAAkB;IAClB,2CAA2C;;IAE3C,+CAA+C;IAC/C,yCAAyC;;IAEzC,eAAe;IACf,iBAAiB;;IAEjB,kBAAkB;;IAElB,wEAAwE;IACxE,yBAAyB;IACzB,yBAAiB;QAAjB,qBAAiB;YAAjB,iBAAiB;;IAEjB,iEAAiE;IACjE,uEAAuE;IACvE,yBAAyB;;IAEzB;MACE,wBAAwB;MACxB,iBAAiB;MACjB,uBAAuB;IACzB;EACF;;EAEA;IACE,0BAA0B;IAC1B,cAAc;IACd,kBAAkB;IAClB,8DAA8D;IAC9D,2CAA2C;IAC3C,oBAAoB;EACtB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/warning-text\") {\n  .govuk-warning-text {\n    @include govuk-font($size: 19);\n    @include govuk-responsive-margin(6, \"bottom\");\n    @include govuk-typography-weight-bold;\n    position: relative;\n    padding: govuk-spacing(2) 0;\n  }\n\n  .govuk-warning-text__icon {\n    box-sizing: border-box;\n\n    display: inline-block;\n\n    position: absolute;\n    left: 0;\n\n    min-width: 35px;\n    min-height: 35px;\n    margin-top: -7px;\n\n    @media #{govuk-from-breakpoint(tablet)} {\n      margin-top: -5px;\n    }\n\n    // When a user customises their colours the background colour will often be\n    // removed. Adding a border to the component keeps it's shape as a circle.\n    border: 3px solid;\n    border-radius: 50%;\n    border-color: govuk-functional-colour(text);\n\n    color: govuk-functional-colour(body-background);\n    background: govuk-functional-colour(text);\n\n    font-size: 30px;\n    line-height: 29px;\n\n    text-align: center;\n\n    // Prevent the exclamation mark from being included when the warning text\n    // is copied, for example.\n    user-select: none;\n\n    // Improve rendering in Windows High Contrast Mode (Edge), where a\n    // readability backplate behind the exclamation mark obscures the circle\n    forced-color-adjust: none;\n\n    @media screen and (forced-colors: active) {\n      border-color: windowText;\n      color: windowText;\n      background: transparent;\n    }\n  }\n\n  .govuk-warning-text__text {\n    @include govuk-text-colour;\n    display: block;\n    padding-left: 45px;\n    // While `<strong>` is styled `bold` or `bolder` by user-agents\n    // this can be reset by the app's stylesheet\n    font-weight: inherit;\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/core/_index.scss

@@ -1,4 +1,3 @@
-@import "govuk-frontend-properties";
 @import "links";
 @import "lists";
 @import "typography";