@ministryofjustice/frontend 8.0.0-beta.1 → 9.0.0-beta.1

package/moj/components/filter/_filter.scss

@@ -7,7 +7,7 @@
 
 .moj-filter {
   background-color: govuk-colour("white");
-  box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
+  box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
 
   &:focus {
     box-shadow:
@@ -18,7 +18,7 @@
 
 .moj-filter__header {
   padding: govuk-spacing(2) govuk-spacing(4);
-  background-color: govuk-colour("mid-grey");
+  background-color: govuk-colour("black", $variant: "tint-80");
   font-size: 0; // Hide whitespace between elements
   text-align: justify; // Trick to remove the need for floats
 
@@ -101,11 +101,11 @@
 
   &:focus {
     outline: none;
-    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);
   }
 
   // Fix unwanted button padding in Firefox
@@ -129,8 +129,8 @@
 
 .moj-filter__selected {
   padding: govuk-spacing(4);
-  background-color: govuk-colour("light-grey");
-  box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
+  box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
 
   ul:last-of-type {
     margin-bottom: 0; // IE9 +
@@ -183,8 +183,8 @@
   }
 
   &:focus {
-    color: $govuk-focus-text-colour;
-    background-color: $govuk-focus-colour;
+    color: govuk-functional-colour(focus-text);
+    background-color: govuk-functional-colour(focus);
   }
 
   &:hover {
@@ -211,7 +211,7 @@
 .moj-filter__options {
   margin-top: -1px;
   padding: govuk-spacing(4);
-  box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
+  box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
 
   div:last-of-type {
     margin-bottom: 0; // IE9 +

package/moj/components/filter/_filter.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/filter/_filter.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uCAAuC;EACvC,oDAAoD;;EAEpD;IACE;;oCAEgC;EAClC;AACF;;AAEA;EACE,0CAA0C;EAC1C,0CAA0C;EAC1C,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA,YAAY;AACZ;EACE,WAAW;EACX,iBAAiB,EAAE,oDAAoD;;EAEvE;IACE,gBAAgB;IAChB,sBAAsB;IACtB,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,SAAS;IACT,UAAU;IACV,cAAc;IACd,gBAAgB;IAChB,6BAA6B;IAC7B,gBAAgB;IAChB,eAAe,EAAE,wBAAwB;IACzC,wBAAwB;IACxB,6CAA6C;;IAE7C,wCAAwC;IACxC;MACE,UAAU;MACV,SAAS;IACX;;IAEA;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,YAAY;MACZ,gBAAgB,EAAE,6BAA6B;MAC/C,oEAAoE;MACpE,wBAAwB;IAC1B;;IAEA;MACE,8BAA8B;IAChC;EACF;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,2BAA2B;EAC3B,4BAA4B;EAC5B,6BAA6B;EAC7B,eAAe,EAAE,6BAA6B;EAC9C,wBAAwB;EACxB,gBAAgB;EAChB,uBAAuB;;EAEvB;IACE,aAAa;IACb,+BAA+B;IAC/B,qCAAqC;IACrC;;oCAEgC;EAClC;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,kBAAkB;IAClB,SAAS,EAAE,iBAAiB;IAC5B,WAAW;IACX,YAAY;IACZ,8BAA8B;IAC9B,oEAAoE;IACpE,sBAAsB;EACxB;AACF;;AAEA;EACE,yBAAyB;EACzB,4CAA4C;EAC5C,oDAAoD;;EAEpD;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,+BAA+B,EAAE,mCAAmC;EACpE,eAAe;EACf,YAAY;;EAEZ;IACE,qBAAqB;IACrB,8BAA8B;EAChC;AACF;;AAEA;EACE,qBAAqB;EACrB,4BAA4B;EAC5B,yBAAyB;EACzB,uCAAuC;EACvC,4BAA4B;EAC5B,uCAAuC;EACvC,qBAAqB;EACrB,uBAAuB;;EAEvB;;IAEE,4BAA4B;EAC9B;;EAEA;IACE,+BAA+B;IAC/B,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,mEAAmE;IACnE,iBAAiB;IACjB,sBAAsB;EACxB;;EAEA;IACE,yEAAyE;EAC3E;AACF;;AAEA;EACE,gBAAgB;EAChB,yBAAyB;EACzB,oDAAoD;;EAEpD;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF","file":"_filter.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #FILTER\n   ========================================================================== */\n\n.moj-filter {\n  background-color: govuk-colour(\"white\");\n  box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n  &:focus {\n    box-shadow:\n      0 -2px $govuk-focus-colour,\n      0 4px $govuk-focus-text-colour;\n  }\n}\n\n.moj-filter__header {\n  padding: govuk-spacing(2) govuk-spacing(4);\n  background-color: govuk-colour(\"mid-grey\");\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  [class^=\"govuk-heading-\"] {\n    margin-bottom: 0;\n  }\n}\n\n// JavaScript\n.moj-filter__legend {\n  width: 100%;\n  overflow: visible; // Override govuk to allow for focus style to be seen\n\n  button {\n    appearance: none;\n    box-sizing: border-box;\n    display: block;\n    position: relative;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: 0 none;\n    border-radius: 0;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer; // Adam would not approve\n    -webkit-appearance: none;\n    @include govuk-font($size: 24, $weight: bold);\n\n    // Fix unwanted button padding in Firefox\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 50%;\n      right: 0;\n      width: 16px;\n      height: 16px;\n      margin-top: -8px; // Half the height of the icon\n      background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);\n      background-position: 0 0;\n    }\n\n    &[aria-expanded=\"true\"]::after {\n      background-position: 16px 16px;\n    }\n  }\n}\n\n.moj-filter__header-title,\n.moj-filter__header-action {\n  display: inline-block;\n  text-align: left;\n  vertical-align: middle;\n}\n\n.moj-filter__close {\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: 0;\n  // @include govuk-focusable;\n  color: govuk-colour(\"black\");\n  background-color: transparent;\n  cursor: pointer; // I know Adam won’t like this\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font(19);\n\n  &:focus {\n    outline: none;\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  }\n\n  // Fix unwanted button padding in Firefox\n  &::-moz-focus-inner {\n    padding: 0;\n    border: 0;\n  }\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: relative;\n    top: -1px; // Alignment tweak\n    width: 14px;\n    height: 14px;\n    margin-right: govuk-spacing(1);\n    background-image: url(#{$moj-images-path}icon-close-cross-black.svg);\n    vertical-align: middle;\n  }\n}\n\n.moj-filter__selected {\n  padding: govuk-spacing(4);\n  background-color: govuk-colour(\"light-grey\");\n  box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n  ul:last-of-type {\n    margin-bottom: 0; // IE9 +\n  }\n}\n\n.moj-filter__selected-heading {\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-filter__heading-title,\n.moj-filter__heading-action {\n  display: inline-block;\n  text-align: left;\n  vertical-align: middle;\n  @include govuk-font(16);\n}\n\n.moj-filter-tags {\n  margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile\n  padding-left: 0;\n  font-size: 0;\n\n  li {\n    display: inline-block;\n    margin-right: govuk-spacing(2);\n  }\n}\n\n.moj-filter__tag {\n  display: inline-block;\n  margin-top: govuk-spacing(1);\n  padding: govuk-spacing(1);\n  border: 1px solid govuk-colour(\"black\");\n  color: govuk-colour(\"black\");\n  background-color: govuk-colour(\"white\");\n  text-decoration: none;\n  @include govuk-font(16);\n\n  &:link,\n  &:visited {\n    color: govuk-colour(\"black\");\n  }\n\n  &:focus {\n    color: $govuk-focus-text-colour;\n    background-color: $govuk-focus-colour;\n  }\n\n  &:hover {\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"black\");\n  }\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 10px;\n    height: 10px;\n    margin-left: govuk-spacing(1);\n    background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);\n    font-weight: bold;\n    vertical-align: middle;\n  }\n\n  &:hover::after {\n    background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg);\n  }\n}\n\n.moj-filter__options {\n  margin-top: -1px;\n  padding: govuk-spacing(4);\n  box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n  div:last-of-type {\n    margin-bottom: 0; // IE9 +\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/filter/_filter.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uCAAuC;EACvC,sEAAsE;;EAEtE;IACE;;oCAEgC;EAClC;AACF;;AAEA;EACE,0CAA0C;EAC1C,4DAA4D;EAC5D,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA,YAAY;AACZ;EACE,WAAW;EACX,iBAAiB,EAAE,oDAAoD;;EAEvE;IACE,gBAAgB;IAChB,sBAAsB;IACtB,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,SAAS;IACT,UAAU;IACV,cAAc;IACd,gBAAgB;IAChB,6BAA6B;IAC7B,gBAAgB;IAChB,eAAe,EAAE,wBAAwB;IACzC,wBAAwB;IACxB,6CAA6C;;IAE7C,wCAAwC;IACxC;MACE,UAAU;MACV,SAAS;IACX;;IAEA;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,YAAY;MACZ,gBAAgB,EAAE,6BAA6B;MAC/C,oEAAoE;MACpE,wBAAwB;IAC1B;;IAEA;MACE,8BAA8B;IAChC;EACF;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,2BAA2B;EAC3B,4BAA4B;EAC5B,6BAA6B;EAC7B,eAAe,EAAE,6BAA6B;EAC9C,wBAAwB;EACxB,gBAAgB;EAChB,uBAAuB;;EAEvB;IACE,aAAa;IACb,0CAA0C;IAC1C,gDAAgD;IAChD;;+CAE2C;EAC7C;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,kBAAkB;IAClB,SAAS,EAAE,iBAAiB;IAC5B,WAAW;IACX,YAAY;IACZ,8BAA8B;IAC9B,oEAAoE;IACpE,sBAAsB;EACxB;AACF;;AAEA;EACE,yBAAyB;EACzB,4DAA4D;EAC5D,sEAAsE;;EAEtE;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,+BAA+B,EAAE,mCAAmC;EACpE,eAAe;EACf,YAAY;;EAEZ;IACE,qBAAqB;IACrB,8BAA8B;EAChC;AACF;;AAEA;EACE,qBAAqB;EACrB,4BAA4B;EAC5B,yBAAyB;EACzB,uCAAuC;EACvC,4BAA4B;EAC5B,uCAAuC;EACvC,qBAAqB;EACrB,uBAAuB;;EAEvB;;IAEE,4BAA4B;EAC9B;;EAEA;IACE,0CAA0C;IAC1C,gDAAgD;EAClD;;EAEA;IACE,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,mEAAmE;IACnE,iBAAiB;IACjB,sBAAsB;EACxB;;EAEA;IACE,yEAAyE;EAC3E;AACF;;AAEA;EACE,gBAAgB;EAChB,yBAAyB;EACzB,sEAAsE;;EAEtE;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF","file":"_filter.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #FILTER\n   ========================================================================== */\n\n.moj-filter {\n  background-color: govuk-colour(\"white\");\n  box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n  &:focus {\n    box-shadow:\n      0 -2px $govuk-focus-colour,\n      0 4px $govuk-focus-text-colour;\n  }\n}\n\n.moj-filter__header {\n  padding: govuk-spacing(2) govuk-spacing(4);\n  background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  [class^=\"govuk-heading-\"] {\n    margin-bottom: 0;\n  }\n}\n\n// JavaScript\n.moj-filter__legend {\n  width: 100%;\n  overflow: visible; // Override govuk to allow for focus style to be seen\n\n  button {\n    appearance: none;\n    box-sizing: border-box;\n    display: block;\n    position: relative;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: 0 none;\n    border-radius: 0;\n    background-color: transparent;\n    text-align: left;\n    cursor: pointer; // Adam would not approve\n    -webkit-appearance: none;\n    @include govuk-font($size: 24, $weight: bold);\n\n    // Fix unwanted button padding in Firefox\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 50%;\n      right: 0;\n      width: 16px;\n      height: 16px;\n      margin-top: -8px; // Half the height of the icon\n      background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);\n      background-position: 0 0;\n    }\n\n    &[aria-expanded=\"true\"]::after {\n      background-position: 16px 16px;\n    }\n  }\n}\n\n.moj-filter__header-title,\n.moj-filter__header-action {\n  display: inline-block;\n  text-align: left;\n  vertical-align: middle;\n}\n\n.moj-filter__close {\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: 0;\n  // @include govuk-focusable;\n  color: govuk-colour(\"black\");\n  background-color: transparent;\n  cursor: pointer; // I know Adam won’t like this\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font(19);\n\n  &:focus {\n    outline: none;\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  }\n\n  // Fix unwanted button padding in Firefox\n  &::-moz-focus-inner {\n    padding: 0;\n    border: 0;\n  }\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: relative;\n    top: -1px; // Alignment tweak\n    width: 14px;\n    height: 14px;\n    margin-right: govuk-spacing(1);\n    background-image: url(#{$moj-images-path}icon-close-cross-black.svg);\n    vertical-align: middle;\n  }\n}\n\n.moj-filter__selected {\n  padding: govuk-spacing(4);\n  background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n  box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n  ul:last-of-type {\n    margin-bottom: 0; // IE9 +\n  }\n}\n\n.moj-filter__selected-heading {\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-filter__heading-title,\n.moj-filter__heading-action {\n  display: inline-block;\n  text-align: left;\n  vertical-align: middle;\n  @include govuk-font(16);\n}\n\n.moj-filter-tags {\n  margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile\n  padding-left: 0;\n  font-size: 0;\n\n  li {\n    display: inline-block;\n    margin-right: govuk-spacing(2);\n  }\n}\n\n.moj-filter__tag {\n  display: inline-block;\n  margin-top: govuk-spacing(1);\n  padding: govuk-spacing(1);\n  border: 1px solid govuk-colour(\"black\");\n  color: govuk-colour(\"black\");\n  background-color: govuk-colour(\"white\");\n  text-decoration: none;\n  @include govuk-font(16);\n\n  &:link,\n  &:visited {\n    color: govuk-colour(\"black\");\n  }\n\n  &:focus {\n    color: govuk-functional-colour(focus-text);\n    background-color: govuk-functional-colour(focus);\n  }\n\n  &:hover {\n    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"black\");\n  }\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 10px;\n    height: 10px;\n    margin-left: govuk-spacing(1);\n    background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);\n    font-weight: bold;\n    vertical-align: middle;\n  }\n\n  &:hover::after {\n    background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg);\n  }\n}\n\n.moj-filter__options {\n  margin-top: -1px;\n  padding: govuk-spacing(4);\n  box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n  div:last-of-type {\n    margin-bottom: 0; // IE9 +\n  }\n}\n"]}

package/moj/components/header/_header.scss

@@ -83,6 +83,10 @@
     &:hover {
       border-color: transparent;
     }
+
+    @include govuk-media-query($until: tablet) {
+      margin-top: govuk-spacing(1);
+    }
   }
 
   &--service-name {

package/moj/components/header/_header.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/header/_header.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,6BAA6B;EAC7B,6CAA6C;EAC7C,uCAAuC;AACzC;;AAEA;EACE,kBAAkB;EAClB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,WAAW;EACb;AACF;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,YAAY;EACd;AACF;;AAEA;;EAEE,qBAAqB;EACrB,mBAAmB;EACnB,gBAAgB,EAAE,uCAAuC;EACzD,oCAAoC;EACpC,4BAA4B;EAC5B,iBAAiB,EAAE,2CAA2C;EAC9D,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,4BAA4B;IAC5B,qBAAqB;EACvB;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,yBAAyB;IACzB,4BAA4B;EAC9B;;EAEA;IACE,sBAAsB;IACtB,+CAA+C;;IAE/C;MACE,yBAAyB;IAC3B;EACF;;EAEA;IACE,sBAAsB;IACtB,iDAAiD;;IAEjD;MACE,cAAc;IAChB;IACA;MACE,6BAA6B;IAC/B;;IAEA;MACE,yBAAyB;IAC3B;EACF;AACF;;AAEA;EACE,kBAAkB;EAClB,2BAA2B;;EAE3B;IACE,mCAAmC;EACrC;;EAEA;IACE,mBAAmB;IACnB,sBAAsB;EACxB;AACF;AACA,yDAAyD;AACzD;EACE;IACE,yBAAyB;EAC3B;AACF;;AAEA,YAAY;AACZ;EACE,kCAAkC;EAClC,4BAA4B;AAC9B;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;EAC9B,uBAAuB;;EAEvB;IACE,eAAe;EACjB;AACF;;AAEA;EACE,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;IAGE,cAAc;IACd,qBAAqB;EACvB;;EAEA;IACE,sDAAsD;IACtD,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE,qBAAqB;AACvB","file":"_header.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #HEADER\n   ========================================================================== */\n\n.moj-header {\n  padding-top: govuk-spacing(3);\n  border-bottom: 10px solid $govuk-brand-colour;\n  background-color: govuk-colour(\"black\");\n}\n\n.moj-header__container {\n  position: relative;\n  @include moj-width-container;\n  @include govuk-clearfix;\n}\n\n.moj-header__logo {\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: desktop) {\n    float: left;\n  }\n}\n\n.moj-header__logotype-crown {\n  position: relative;\n  top: -4px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__logotype-crest {\n  position: relative;\n  top: -8px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__content {\n  padding-bottom: govuk-spacing(2);\n\n  @include govuk-media-query($from: desktop) {\n    float: right;\n  }\n}\n\n.moj-header__link,\n.moj-header__link > a {\n  display: inline-block;\n  margin-bottom: -1px;\n  overflow: hidden; // Fixes focus gaps in background colour\n  border-bottom: 1px solid transparent;\n  color: govuk-colour(\"white\");\n  line-height: 25px; // Override due to alignment issue in Chrome\n  vertical-align: middle;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: govuk-colour(\"white\");\n    text-decoration: none;\n  }\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  &:focus {\n    border-color: transparent;\n    color: govuk-colour(\"black\");\n  }\n\n  &--organisation-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"bold\");\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n\n  &--service-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"normal\");\n\n    @include govuk-media-query($until: desktop) {\n      display: block;\n    }\n    @include govuk-media-query($from: desktop) {\n      margin-left: govuk-spacing(1);\n    }\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n}\n\n.moj-header__link a {\n  margin-bottom: 1px;\n  vertical-align: text-bottom;\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  @include govuk-media-query($until: desktop) {\n    margin-bottom: -1px;\n    vertical-align: middle;\n  }\n}\n// stylelint-disable-next-line selector-no-qualifying-type\nspan.moj-header__link {\n  &:hover {\n    border-color: transparent;\n  }\n}\n\n// Navigation\n.moj-header__navigation {\n  margin-top: govuk-spacing(1) - 2px;\n  color: govuk-colour(\"white\");\n}\n\n.moj-header__navigation-list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-header__navigation-item {\n  display: inline-block;\n  margin-right: govuk-spacing(4);\n  @include govuk-font(19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-header__navigation-link {\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  &:hover {\n    // stylelint-disable-next-line declaration-no-important\n    text-decoration: underline !important;\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n\n.moj-header__navigation-link[aria-current=\"page\"] {\n  text-decoration: none;\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/header/_header.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,6BAA6B;EAC7B,6CAA6C;EAC7C,uCAAuC;AACzC;;AAEA;EACE,kBAAkB;EAClB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,WAAW;EACb;AACF;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,YAAY;EACd;AACF;;AAEA;;EAEE,qBAAqB;EACrB,mBAAmB;EACnB,gBAAgB,EAAE,uCAAuC;EACzD,oCAAoC;EACpC,4BAA4B;EAC5B,iBAAiB,EAAE,2CAA2C;EAC9D,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,4BAA4B;IAC5B,qBAAqB;EACvB;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,yBAAyB;IACzB,4BAA4B;EAC9B;;EAEA;IACE,sBAAsB;IACtB,+CAA+C;;IAE/C;MACE,yBAAyB;IAC3B;;IAEA;MACE,4BAA4B;IAC9B;EACF;;EAEA;IACE,sBAAsB;IACtB,iDAAiD;;IAEjD;MACE,cAAc;IAChB;IACA;MACE,6BAA6B;IAC/B;;IAEA;MACE,yBAAyB;IAC3B;EACF;AACF;;AAEA;EACE,kBAAkB;EAClB,2BAA2B;;EAE3B;IACE,mCAAmC;EACrC;;EAEA;IACE,mBAAmB;IACnB,sBAAsB;EACxB;AACF;AACA,yDAAyD;AACzD;EACE;IACE,yBAAyB;EAC3B;AACF;;AAEA,YAAY;AACZ;EACE,kCAAkC;EAClC,4BAA4B;AAC9B;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;EAC9B,uBAAuB;;EAEvB;IACE,eAAe;EACjB;AACF;;AAEA;EACE,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;IAGE,cAAc;IACd,qBAAqB;EACvB;;EAEA;IACE,sDAAsD;IACtD,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE,qBAAqB;AACvB","file":"_header.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #HEADER\n   ========================================================================== */\n\n.moj-header {\n  padding-top: govuk-spacing(3);\n  border-bottom: 10px solid $govuk-brand-colour;\n  background-color: govuk-colour(\"black\");\n}\n\n.moj-header__container {\n  position: relative;\n  @include moj-width-container;\n  @include govuk-clearfix;\n}\n\n.moj-header__logo {\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: desktop) {\n    float: left;\n  }\n}\n\n.moj-header__logotype-crown {\n  position: relative;\n  top: -4px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__logotype-crest {\n  position: relative;\n  top: -8px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__content {\n  padding-bottom: govuk-spacing(2);\n\n  @include govuk-media-query($from: desktop) {\n    float: right;\n  }\n}\n\n.moj-header__link,\n.moj-header__link > a {\n  display: inline-block;\n  margin-bottom: -1px;\n  overflow: hidden; // Fixes focus gaps in background colour\n  border-bottom: 1px solid transparent;\n  color: govuk-colour(\"white\");\n  line-height: 25px; // Override due to alignment issue in Chrome\n  vertical-align: middle;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: govuk-colour(\"white\");\n    text-decoration: none;\n  }\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  &:focus {\n    border-color: transparent;\n    color: govuk-colour(\"black\");\n  }\n\n  &--organisation-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"bold\");\n\n    &:hover {\n      border-color: transparent;\n    }\n\n    @include govuk-media-query($until: tablet) {\n      margin-top: govuk-spacing(1);\n    }\n  }\n\n  &--service-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"normal\");\n\n    @include govuk-media-query($until: desktop) {\n      display: block;\n    }\n    @include govuk-media-query($from: desktop) {\n      margin-left: govuk-spacing(1);\n    }\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n}\n\n.moj-header__link a {\n  margin-bottom: 1px;\n  vertical-align: text-bottom;\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  @include govuk-media-query($until: desktop) {\n    margin-bottom: -1px;\n    vertical-align: middle;\n  }\n}\n// stylelint-disable-next-line selector-no-qualifying-type\nspan.moj-header__link {\n  &:hover {\n    border-color: transparent;\n  }\n}\n\n// Navigation\n.moj-header__navigation {\n  margin-top: govuk-spacing(1) - 2px;\n  color: govuk-colour(\"white\");\n}\n\n.moj-header__navigation-list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-header__navigation-item {\n  display: inline-block;\n  margin-right: govuk-spacing(4);\n  @include govuk-font(19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-header__navigation-link {\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  &:hover {\n    // stylelint-disable-next-line declaration-no-important\n    text-decoration: underline !important;\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n\n.moj-header__navigation-link[aria-current=\"page\"] {\n  text-decoration: none;\n}\n"]}

package/moj/components/identity-bar/_identity-bar.scss

@@ -8,15 +8,23 @@
 .moj-identity-bar {
   @include govuk-clearfix;
   padding-top: govuk-spacing(2);
-  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
+  padding-bottom: govuk-spacing(2) - 1px;
+
+  /* Negative by 1px to compensate */
   color: govuk-colour("black");
   background-color: govuk-colour("white");
-  box-shadow: inset 0 -1px 0 0 govuk-colour("mid-grey"); /* Takes up no space */
+  box-shadow: inset 0 -1px 0 0 govuk-colour("black", $variant: "tint-80");
+
+  /* Takes up no space */
 }
 
 .moj-identity-bar__container {
-  font-size: 0; /* Hide whitespace between elements */
-  text-align: justify; /* Trick to remove the need for floats */
+  font-size: 0;
+
+  /* Hide whitespace between elements */
+  text-align: justify;
+
+  /* Trick to remove the need for floats */
   @include moj-width-container;
 
   &::after {
@@ -39,8 +47,12 @@
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
-    padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */
-    padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */
+    padding-top: govuk-spacing(2) + 1px;
+
+    /* Alignment tweaks */
+    padding-bottom: govuk-spacing(2) - 1px;
+
+    /* Alignment tweaks */
     vertical-align: top;
   }
 }

package/moj/components/identity-bar/_identity-bar.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/identity-bar/_identity-bar.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uBAAuB;EACvB,6BAA6B;EAC7B,sCAAsC,EAAE,kCAAkC;EAC1E,4BAA4B;EAC5B,uCAAuC;EACvC,qDAAqD,EAAE,sBAAsB;AAC/E;;AAEA;EACE,YAAY,EAAE,qCAAqC;EACnD,mBAAmB,EAAE,wCAAwC;EAC7D,4BAA4B;;EAE5B;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;EAC9B,6BAA6B;EAC7B,gCAAgC;;EAEhC;IACE,qBAAqB;IACrB,mCAAmC,EAAE,qBAAqB;IAC1D,sCAAsC,EAAE,qBAAqB;IAC7D,mBAAmB;EACrB;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;;EAE9B;IACE,eAAe;EACjB;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_identity-bar.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #IDENTITY BAR\n   ========================================================================== */\n\n.moj-identity-bar {\n  @include govuk-clearfix;\n  padding-top: govuk-spacing(2);\n  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */\n  color: govuk-colour(\"black\");\n  background-color: govuk-colour(\"white\");\n  box-shadow: inset 0 -1px 0 0 govuk-colour(\"mid-grey\"); /* Takes up no space */\n}\n\n.moj-identity-bar__container {\n  font-size: 0; /* Hide whitespace between elements */\n  text-align: justify; /* Trick to remove the need for floats */\n  @include moj-width-container;\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-identity-bar__title {\n  display: inline-block;\n  vertical-align: top;\n  @include govuk-font(16);\n}\n\n.moj-identity-bar__details {\n  margin-right: govuk-spacing(2);\n  padding-top: govuk-spacing(1);\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: tablet) {\n    display: inline-block;\n    padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */\n    padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */\n    vertical-align: top;\n  }\n}\n\n.moj-identity-bar__actions {\n  @include govuk-media-query($from: tablet) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n\n.moj-identity-bar__menu {\n  display: inline-block;\n  margin-right: govuk-spacing(2);\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  .moj-button-menu__toggle-button {\n    margin-bottom: 0;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/identity-bar/_identity-bar.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uBAAuB;EACvB,6BAA6B;EAC7B,sCAAsC;;EAEtC,kCAAkC;EAClC,4BAA4B;EAC5B,uCAAuC;EACvC,uEAAuE;;EAEvE,sBAAsB;AACxB;;AAEA;EACE,YAAY;;EAEZ,qCAAqC;EACrC,mBAAmB;;EAEnB,wCAAwC;EACxC,4BAA4B;;EAE5B;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;EAC9B,6BAA6B;EAC7B,gCAAgC;;EAEhC;IACE,qBAAqB;IACrB,mCAAmC;;IAEnC,qBAAqB;IACrB,sCAAsC;;IAEtC,qBAAqB;IACrB,mBAAmB;EACrB;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;;EAE9B;IACE,eAAe;EACjB;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_identity-bar.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #IDENTITY BAR\n   ========================================================================== */\n\n.moj-identity-bar {\n  @include govuk-clearfix;\n  padding-top: govuk-spacing(2);\n  padding-bottom: govuk-spacing(2) - 1px;\n\n  /* Negative by 1px to compensate */\n  color: govuk-colour(\"black\");\n  background-color: govuk-colour(\"white\");\n  box-shadow: inset 0 -1px 0 0 govuk-colour(\"black\", $variant: \"tint-80\");\n\n  /* Takes up no space */\n}\n\n.moj-identity-bar__container {\n  font-size: 0;\n\n  /* Hide whitespace between elements */\n  text-align: justify;\n\n  /* Trick to remove the need for floats */\n  @include moj-width-container;\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-identity-bar__title {\n  display: inline-block;\n  vertical-align: top;\n  @include govuk-font(16);\n}\n\n.moj-identity-bar__details {\n  margin-right: govuk-spacing(2);\n  padding-top: govuk-spacing(1);\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: tablet) {\n    display: inline-block;\n    padding-top: govuk-spacing(2) + 1px;\n\n    /* Alignment tweaks */\n    padding-bottom: govuk-spacing(2) - 1px;\n\n    /* Alignment tweaks */\n    vertical-align: top;\n  }\n}\n\n.moj-identity-bar__actions {\n  @include govuk-media-query($from: tablet) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n\n.moj-identity-bar__menu {\n  display: inline-block;\n  margin-right: govuk-spacing(2);\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  .moj-button-menu__toggle-button {\n    margin-bottom: 0;\n  }\n}\n"]}

package/moj/components/messages/_messages.scss

@@ -19,7 +19,7 @@
     display: inline-block;
     width: 100%;
     padding: govuk-spacing(3) 0;
-    color: govuk-colour("dark-grey");
+    color: govuk-colour("black", $variant: "tint-25");
     text-align: center;
     @include govuk-font($size: 19, $weight: "bold");
   }
@@ -59,7 +59,7 @@
     margin-left: govuk-spacing(2);
     padding-left: govuk-spacing(5);
     float: left;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
 
     &::after {
       content: "";
@@ -68,7 +68,7 @@
       left: -1.5em;
       width: 1.5em;
       height: 1.5em;
-      border-right: 1em solid govuk-colour("light-grey");
+      border-right: 1em solid govuk-colour("black", $variant: "tint-95");
       border-bottom-right-radius: 1.75em 1.5em;
     }
   }

package/moj/components/messages/_messages.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/messages/_messages.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,sCAAsC;EACtC,uBAAuB;AACzB;;AAEA;EACE,iBAAiB;EACjB,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;;EAElB;IACE,qBAAqB;IACrB,WAAW;IACX,2BAA2B;IAC3B,gCAAgC;IAChC,kBAAkB;IAClB,+CAA+C;EACjD;AACF;;AAEA;EACE,kBAAkB;EAClB,+BAA+B;EAC/B,yBAAyB;EACzB,iCAAiC;;EAEjC;IACE,UAAU;EACZ;;EAEA;IACE,8BAA8B;IAC9B,+BAA+B;IAC/B,YAAY;IACZ,4BAA4B;IAC5B,qCAAqC;IACrC,iBAAiB;;IAEjB;MACE,WAAW;MACX,kBAAkB;MAClB,aAAa;MACb,SAAS;MACT,YAAY;MACZ,aAAa;MACb,0CAA0C;MAC1C,uCAAuC;IACzC;EACF;;EAEA;IACE,6BAA6B;IAC7B,8BAA8B;IAC9B,WAAW;IACX,4CAA4C;;IAE5C;MACE,WAAW;MACX,kBAAkB;MAClB,SAAS;MACT,YAAY;MACZ,YAAY;MACZ,aAAa;MACb,kDAAkD;MAClD,wCAAwC;IAC1C;EACF;AACF;;AAEA;;EAEE,4BAA4B;AAC9B;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE;IACE,4BAA4B;;IAE5B;;MAEE,8CAA8C;IAChD;EACF;AACF;;AAEA;EACE,4BAA4B;;EAE5B;IACE,+CAA+C;EACjD;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_messages.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #MESSAGES\n   ========================================================================== */\n\n.moj-messages-container {\n  border: 1px solid $govuk-border-colour;\n  @include govuk-font(19);\n}\n\n.moj-message-list {\n  min-height: 200px;\n  padding: govuk-spacing(1);\n  overflow-x: hidden;\n  overflow-y: scroll;\n\n  &__date {\n    display: inline-block;\n    width: 100%;\n    padding: govuk-spacing(3) 0;\n    color: govuk-colour(\"dark-grey\");\n    text-align: center;\n    @include govuk-font($size: 19, $weight: \"bold\");\n  }\n}\n\n.moj-message-item {\n  position: relative;\n  margin-bottom: govuk-spacing(1);\n  padding: govuk-spacing(3);\n  border-radius: 0.5em 0.5em 0.75em;\n\n  @include govuk-media-query($from: tablet) {\n    width: 50%;\n  }\n\n  &--sent {\n    margin-right: govuk-spacing(2);\n    padding-right: govuk-spacing(5);\n    float: right;\n    color: govuk-colour(\"white\");\n    background-color: $govuk-brand-colour;\n    text-align: right;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      right: -1.5em;\n      bottom: 0;\n      width: 1.5em;\n      height: 1.5em;\n      border-left: 1em solid $govuk-brand-colour;\n      border-bottom-left-radius: 1.75em 1.5em;\n    }\n  }\n\n  &--received {\n    margin-left: govuk-spacing(2);\n    padding-left: govuk-spacing(5);\n    float: left;\n    background-color: govuk-colour(\"light-grey\");\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: 0;\n      left: -1.5em;\n      width: 1.5em;\n      height: 1.5em;\n      border-right: 1em solid govuk-colour(\"light-grey\");\n      border-bottom-right-radius: 1.75em 1.5em;\n    }\n  }\n}\n\n.moj-message-item a:link,\n.moj-message-item a:visited {\n  color: govuk-colour(\"white\");\n}\n\n.moj-message-item a:focus {\n  color: $govuk-focus-text-colour;\n}\n\n.moj-message-item__text {\n  &--sent table {\n    color: govuk-colour(\"white\");\n\n    & th,\n    & td {\n      border-bottom: 1px solid govuk-colour(\"white\");\n    }\n  }\n}\n\n.moj-message-item__meta {\n  margin-top: govuk-spacing(2);\n\n  &--sender {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n\n  &--timestamp {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/messages/_messages.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,sCAAsC;EACtC,uBAAuB;AACzB;;AAEA;EACE,iBAAiB;EACjB,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;;EAElB;IACE,qBAAqB;IACrB,WAAW;IACX,2BAA2B;IAC3B,iDAAiD;IACjD,kBAAkB;IAClB,+CAA+C;EACjD;AACF;;AAEA;EACE,kBAAkB;EAClB,+BAA+B;EAC/B,yBAAyB;EACzB,iCAAiC;;EAEjC;IACE,UAAU;EACZ;;EAEA;IACE,8BAA8B;IAC9B,+BAA+B;IAC/B,YAAY;IACZ,4BAA4B;IAC5B,qCAAqC;IACrC,iBAAiB;;IAEjB;MACE,WAAW;MACX,kBAAkB;MAClB,aAAa;MACb,SAAS;MACT,YAAY;MACZ,aAAa;MACb,0CAA0C;MAC1C,uCAAuC;IACzC;EACF;;EAEA;IACE,6BAA6B;IAC7B,8BAA8B;IAC9B,WAAW;IACX,4DAA4D;;IAE5D;MACE,WAAW;MACX,kBAAkB;MAClB,SAAS;MACT,YAAY;MACZ,YAAY;MACZ,aAAa;MACb,kEAAkE;MAClE,wCAAwC;IAC1C;EACF;AACF;;AAEA;;EAEE,4BAA4B;AAC9B;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE;IACE,4BAA4B;;IAE5B;;MAEE,8CAA8C;IAChD;EACF;AACF;;AAEA;EACE,4BAA4B;;EAE5B;IACE,+CAA+C;EACjD;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_messages.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #MESSAGES\n   ========================================================================== */\n\n.moj-messages-container {\n  border: 1px solid $govuk-border-colour;\n  @include govuk-font(19);\n}\n\n.moj-message-list {\n  min-height: 200px;\n  padding: govuk-spacing(1);\n  overflow-x: hidden;\n  overflow-y: scroll;\n\n  &__date {\n    display: inline-block;\n    width: 100%;\n    padding: govuk-spacing(3) 0;\n    color: govuk-colour(\"black\", $variant: \"tint-25\");\n    text-align: center;\n    @include govuk-font($size: 19, $weight: \"bold\");\n  }\n}\n\n.moj-message-item {\n  position: relative;\n  margin-bottom: govuk-spacing(1);\n  padding: govuk-spacing(3);\n  border-radius: 0.5em 0.5em 0.75em;\n\n  @include govuk-media-query($from: tablet) {\n    width: 50%;\n  }\n\n  &--sent {\n    margin-right: govuk-spacing(2);\n    padding-right: govuk-spacing(5);\n    float: right;\n    color: govuk-colour(\"white\");\n    background-color: $govuk-brand-colour;\n    text-align: right;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      right: -1.5em;\n      bottom: 0;\n      width: 1.5em;\n      height: 1.5em;\n      border-left: 1em solid $govuk-brand-colour;\n      border-bottom-left-radius: 1.75em 1.5em;\n    }\n  }\n\n  &--received {\n    margin-left: govuk-spacing(2);\n    padding-left: govuk-spacing(5);\n    float: left;\n    background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: 0;\n      left: -1.5em;\n      width: 1.5em;\n      height: 1.5em;\n      border-right: 1em solid govuk-colour(\"black\", $variant: \"tint-95\");\n      border-bottom-right-radius: 1.75em 1.5em;\n    }\n  }\n}\n\n.moj-message-item a:link,\n.moj-message-item a:visited {\n  color: govuk-colour(\"white\");\n}\n\n.moj-message-item a:focus {\n  color: $govuk-focus-text-colour;\n}\n\n.moj-message-item__text {\n  &--sent table {\n    color: govuk-colour(\"white\");\n\n    & th,\n    & td {\n      border-bottom: 1px solid govuk-colour(\"white\");\n    }\n  }\n}\n\n.moj-message-item__meta {\n  margin-top: govuk-spacing(2);\n\n  &--sender {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n\n  &--timestamp {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n}\n"]}

package/moj/components/pagination/_pagination.scss

@@ -1,116 +1,19 @@
 @use "../../vendor/govuk-frontend" as *;
 
-.moj-pagination {
-  // text-align: center;
-
-  @include govuk-media-query($from: desktop) {
-    margin-right: - govuk-spacing(1);
-
-    // Alignment adjustments
-    margin-left: - govuk-spacing(1);
-
-    // Hide whitespace between elements
-    font-size: 0;
-
-    // Trick to remove the need for floats
-    text-align: justify;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      width: 100%;
-    }
-  }
-}
-
-.moj-pagination__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
+.moj-pagination__pagination {
+  margin-bottom: govuk-spacing(2);
 }
 
 .moj-pagination__results {
   margin-top: 0;
-  padding: govuk-spacing(1);
-  @include govuk-font(19);
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-}
-
-.moj-pagination__item {
-  display: inline-block;
-  @include govuk-font(19);
-}
-
-.moj-pagination__item--active,
-.moj-pagination__item--dots {
-  height: 25px;
-  padding: govuk-spacing(1) govuk-spacing(2);
-  font-weight: bold;
-  text-align: center;
-}
-
-.moj-pagination__item--dots {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.moj-pagination__item--prev .moj-pagination__link::before,
-.moj-pagination__item--next .moj-pagination__link::after {
-  content: "";
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  transform: rotate(-45deg);
-  border-style: solid;
-  color: govuk-colour("black");
-  background: transparent;
-}
-
-.moj-pagination__item--prev .moj-pagination__link::before {
-  margin-right: govuk-spacing(1);
-  border-width: 3px 0 0 3px;
-}
-
-.moj-pagination__item--next .moj-pagination__link::after {
-  margin-left: govuk-spacing(1);
-  border-width: 0 3px 3px 0;
-}
-
-.moj-pagination__link {
-  display: block;
-  min-width: 25px;
-  padding: govuk-spacing(1);
+  margin-bottom: govuk-spacing(6);
+  padding-right: govuk-spacing(1);
+  padding-left: govuk-spacing(1);
   text-align: center;
-  @include govuk-link-common;
-  @include govuk-link-style-default;
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-
-  &:link,
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
-  }
+  @include govuk-font(19);
 
-  &:focus {
-    color: govuk-colour("black");
+  @include govuk-media-query($from: tablet) {
+    text-align: left;
   }
 }
 

package/moj/components/pagination/_pagination.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/pagination/_pagination.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;;EAErB;IACE,gCAAgC;;IAEhC,uBAAuB;IACvB,+BAA+B;;IAE/B,kCAAkC;IAClC,YAAY;;IAEZ,qCAAqC;IACrC,mBAAmB;;IAEnB;MACE,WAAW;MACX,qBAAqB;MACrB,WAAW;IACb;EACF;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,aAAa;EACb,yBAAyB;EACzB,uBAAuB;EACvB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,qBAAqB;EACrB,uBAAuB;AACzB;;AAEA;;EAEE,YAAY;EACZ,0CAA0C;EAC1C,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,eAAe;AACjB;;AAEA;;EAEE,WAAW;EACX,qBAAqB;EACrB,WAAW;EACX,YAAY;EAGZ,yBAAyB;EACzB,mBAAmB;EACnB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;EAC9B,yBAAyB;AAC3B;;AAEA;EACE,6BAA6B;EAC7B,yBAAyB;AAC3B;;AAEA;EACE,cAAc;EACd,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,yCAAyC;EAC3C;;EAEA;IACE,4BAA4B;EAC9B;AACF","file":"_pagination.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-pagination {\n  // text-align: center;\n\n  @include govuk-media-query($from: desktop) {\n    margin-right: - govuk-spacing(1);\n\n    // Alignment adjustments\n    margin-left: - govuk-spacing(1);\n\n    // Hide whitespace between elements\n    font-size: 0;\n\n    // Trick to remove the need for floats\n    text-align: justify;\n\n    &::after {\n      content: \"\";\n      display: inline-block;\n      width: 100%;\n    }\n  }\n}\n\n.moj-pagination__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    margin-bottom: 0;\n    vertical-align: middle;\n  }\n}\n\n.moj-pagination__results {\n  margin-top: 0;\n  padding: govuk-spacing(1);\n  @include govuk-font(19);\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    margin-bottom: 0;\n    vertical-align: middle;\n  }\n}\n\n.moj-pagination__item {\n  display: inline-block;\n  @include govuk-font(19);\n}\n\n.moj-pagination__item--active,\n.moj-pagination__item--dots {\n  height: 25px;\n  padding: govuk-spacing(1) govuk-spacing(2);\n  font-weight: bold;\n  text-align: center;\n}\n\n.moj-pagination__item--dots {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before,\n.moj-pagination__item--next .moj-pagination__link::after {\n  content: \"\";\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  -webkit-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  border-style: solid;\n  color: govuk-colour(\"black\");\n  background: transparent;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before {\n  margin-right: govuk-spacing(1);\n  border-width: 3px 0 0 3px;\n}\n\n.moj-pagination__item--next .moj-pagination__link::after {\n  margin-left: govuk-spacing(1);\n  border-width: 0 3px 3px 0;\n}\n\n.moj-pagination__link {\n  display: block;\n  min-width: 25px;\n  padding: govuk-spacing(1);\n  text-align: center;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    text-decoration: none;\n  }\n\n  &:link,\n  &:visited {\n    color: $govuk-link-colour;\n  }\n\n  &:hover {\n    color: govuk-tint($govuk-link-colour, 25);\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/pagination/_pagination.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,kBAAkB;EAClB,uBAAuB;;EAEvB;IACE,gBAAgB;EAClB;AACF","file":"_pagination.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-pagination__pagination {\n  margin-bottom: govuk-spacing(2);\n}\n\n.moj-pagination__results {\n  margin-top: 0;\n  margin-bottom: govuk-spacing(6);\n  padding-right: govuk-spacing(1);\n  padding-left: govuk-spacing(1);\n  text-align: center;\n  @include govuk-font(19);\n\n  @include govuk-media-query($from: tablet) {\n    text-align: left;\n  }\n}\n"]}

package/moj/components/pagination/template.njk

@@ -1,33 +1,60 @@
-<nav class="moj-pagination {{- " " + params.classes if params.classes}}" aria-label="Pagination navigation">
+{% from "govuk/components/pagination/macro.njk" import govukPagination %}
+{% set paginationItems = [] %}
 
-  <ul class="moj-pagination__list">
-    {%- if params.previous %}
-      <li class="moj-pagination__item  moj-pagination__item--prev">
-        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> page</span></a>
-      </li>
-    {% endif -%}
+{% if params.items %}
+  {%- for item in params.items %}
+    {% if item.type === "dots" or item.ellipsis %}
+      {% set paginationItem = {
+       "ellipsis": true
+      } %}
+    {% else %}
+      {% set paginationItem = {
+      "number": item.number if item.number else item.text,
+      "href": item.href,
+      "current": item.current if item.current else item.selected
+      } %}
+    {% endif %}
+    {% set paginationItems = paginationItems.concat(paginationItem) %}
+  {% endfor %}
+{% endif %}
 
-    {%- for item in params.items %}
-      {%- if item.type == "dots" %}
-        <li class="moj-pagination__item moj-pagination__item--dots">…</li>
-      {% else %}
-        {%- if item.selected %}
-          <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page {{ item.text }} of {{ (params.items | last).text }}" aria-current="page">{{ item.text }}</li>
-        {% else %}
-          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}" aria-label="Page {{ item.text }} of {{ (params.items | last).text }}">{{ item.text }}</a></li>
-        {% endif -%}
-      {% endif -%}
-    {% endfor -%}
-
-    {%- if params.next %}
-      <li class="moj-pagination__item  moj-pagination__item--next">
-        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> page</span></a>
-      </li>
-    {% endif -%}
-  </ul>
+<div class="moj-pagination">
+  {% if paginationItems | length > 1 %}
+    {{ govukPagination({
+        items: paginationItems,
+        previous: params.previous,
+        next: params.next,
+        landmarkLabel: params.landmarkLabel,
+        classes: "moj-pagination__pagination " + (params.classes if params.classes),
+        attributes: params.attributes
+      })
+    }}
+  {% endif %}
 
   {%- if params.results %}
-    <p class="moj-pagination__results">Showing <b>{{ params.results.from }}</b> to <b>{{ params.results.to }}</b> of <b>{{params.results.count}}</b> {{ params.results.text | default("results") }}</p>
-  {% endif -%}
+    {% set results_string = '' %}
+    {% set results_term = params.results.text | default("results") %}
 
-</nav>
+    {% if paginationItems | length > 0 %}
+      {% if params.results.pages.current and params.results.pages.count %}
+        {% set results_string = "Page " + params.results.pages.current  + " of " + params.results.pages.count %}
+      {% elif params.results.from and params.results.to  %}
+        {% if params.results.count %}
+          {% set results_string = "Showing " + params.results.from  + " to " + params.results.to + " of " + params.results.count + " total " + results_term %}
+        {% else %}
+          {% set results_string = "Showing " + results_term + " " + params.results.from  + " to " + params.results.to %}
+        {% endif %}
+      {% elif params.results.count %}
+        {% set results_string = params.results.count + " total " + results_term %}
+      {% endif %}
+    {% else %}
+      {% if params.results.count %}
+        {% set results_string = params.results.count + " total " + results_term %}
+      {% endif %}
+    {% endif %}
+
+    {% if results_string != '' %}
+      <p class="moj-pagination__results">{{ results_string }}</p>
+    {% endif %}
+  {% endif -%}
+</div>

package/moj/components/primary-navigation/_primary-navigation.scss

@@ -6,7 +6,7 @@
    ========================================================================== */
 
 .moj-primary-navigation {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
 
 .moj-primary-navigation__container {
@@ -23,6 +23,7 @@
 
 .moj-primary-navigation__nav {
   text-align: left;
+
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     vertical-align: middle;
@@ -64,11 +65,11 @@
 
   &:link,
   &:visited {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:focus {
@@ -91,7 +92,7 @@
 
   &[aria-current] {
     position: relative;
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
     font-weight: bold;
     text-decoration: none;
 
@@ -103,14 +104,14 @@
       left: 0;
       width: 100%;
       height: 5px;
-      background-color: $govuk-link-colour;
+      background-color: govuk-functional-colour(link);
     }
 
     &:hover {
-      color: $govuk-link-hover-colour;
+      color: govuk-functional-colour(link-hover);
 
       &::before {
-        background-color: $govuk-link-hover-colour;
+        background-color: govuk-functional-colour(link-hover);
       }
     }
 

package/moj/components/primary-navigation/_primary-navigation.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/primary-navigation/_primary-navigation.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,4CAA4C;AAC9C;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;EAC1D,4BAA4B;;EAE5B;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;EACE,gBAAgB;EAChB;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,aAAa;EACb,8BAA8B;EAC9B,8BAA8B;;EAE9B;IACE,eAAe;EACjB;AACF;;AAEA;EACE,cAAc;EACd,iBAAiB;EACjB,oBAAoB;EACpB,iBAAiB;EACjB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,kBAAkB,EAAE,0CAA0C;IAC9D,UAAU;IACV,4BAA4B,EAAE,gDAAgD;IAC9E,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,WAAW;IACX,WAAW;IACX,uCAAuC;EACzC;;EAEA;IACE,kBAAkB;IAClB,yBAAyB;IACzB,iBAAiB;IACjB,qBAAqB;;IAErB;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,SAAS;MACT,OAAO;MACP,WAAW;MACX,WAAW;MACX,oCAAoC;IACtC;;IAEA;MACE,+BAA+B;;MAE/B;QACE,0CAA0C;MAC5C;IACF;;IAEA;MACE,kBAAkB,EAAE,0CAA0C;MAC9D,YAAY;MACZ,4BAA4B,EAAE,gDAAgD;;MAE9E;QACE,uCAAuC;MACzC;IACF;EACF;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF","file":"_primary-navigation.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #PRIMARY NAVIGATION\n   ========================================================================== */\n\n.moj-primary-navigation {\n  background-color: govuk-colour(\"light-grey\");\n}\n\n.moj-primary-navigation__container {\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n  @include moj-width-container;\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-primary-navigation__nav {\n  text-align: left;\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n\n.moj-primary-navigation__list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-primary-navigation__item {\n  display: inline-block;\n  margin-top: 0;\n  margin-right: govuk-spacing(4);\n  @include govuk-font($size: 19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-primary-navigation__link {\n  display: block;\n  padding-top: 15px;\n  padding-bottom: 15px;\n  font-weight: bold;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    text-decoration: none;\n  }\n\n  &:link,\n  &:visited {\n    color: $govuk-link-colour;\n  }\n\n  &:hover {\n    color: $govuk-link-hover-colour;\n  }\n\n  &:focus {\n    position: relative; // Ensure focus sits above everything else.\n    z-index: 1;\n    color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n    box-shadow: none;\n  }\n\n  &:focus::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    background-color: govuk-colour(\"black\");\n  }\n\n  &[aria-current] {\n    position: relative;\n    color: $govuk-link-colour;\n    font-weight: bold;\n    text-decoration: none;\n\n    &::before {\n      content: \"\";\n      display: block;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 5px;\n      background-color: $govuk-link-colour;\n    }\n\n    &:hover {\n      color: $govuk-link-hover-colour;\n\n      &::before {\n        background-color: $govuk-link-hover-colour;\n      }\n    }\n\n    &:focus {\n      position: relative; // Ensure focus sits above everything else.\n      border: none;\n      color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n\n      &::before {\n        background-color: govuk-colour(\"black\");\n      }\n    }\n  }\n}\n\n.moj-primary-navigation__search {\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/primary-navigation/_primary-navigation.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,4DAA4D;AAC9D;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;EAC1D,4BAA4B;;EAE5B;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;EACE,gBAAgB;;EAEhB;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,aAAa;EACb,8BAA8B;EAC9B,8BAA8B;;EAE9B;IACE,eAAe;EACjB;AACF;;AAEA;EACE,cAAc;EACd,iBAAiB;EACjB,oBAAoB;EACpB,iBAAiB;EACjB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,oCAAoC;EACtC;;EAEA;IACE,0CAA0C;EAC5C;;EAEA;IACE,kBAAkB,EAAE,0CAA0C;IAC9D,UAAU;IACV,4BAA4B,EAAE,gDAAgD;IAC9E,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,WAAW;IACX,WAAW;IACX,uCAAuC;EACzC;;EAEA;IACE,kBAAkB;IAClB,oCAAoC;IACpC,iBAAiB;IACjB,qBAAqB;;IAErB;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,SAAS;MACT,OAAO;MACP,WAAW;MACX,WAAW;MACX,+CAA+C;IACjD;;IAEA;MACE,0CAA0C;;MAE1C;QACE,qDAAqD;MACvD;IACF;;IAEA;MACE,kBAAkB,EAAE,0CAA0C;MAC9D,YAAY;MACZ,4BAA4B,EAAE,gDAAgD;;MAE9E;QACE,uCAAuC;MACzC;IACF;EACF;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF","file":"_primary-navigation.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #PRIMARY NAVIGATION\n   ========================================================================== */\n\n.moj-primary-navigation {\n  background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n}\n\n.moj-primary-navigation__container {\n  font-size: 0; // Hide whitespace between elements\n  text-align: justify; // Trick to remove the need for floats\n  @include moj-width-container;\n\n  &::after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n}\n\n.moj-primary-navigation__nav {\n  text-align: left;\n\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n\n.moj-primary-navigation__list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-primary-navigation__item {\n  display: inline-block;\n  margin-top: 0;\n  margin-right: govuk-spacing(4);\n  @include govuk-font($size: 19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-primary-navigation__link {\n  display: block;\n  padding-top: 15px;\n  padding-bottom: 15px;\n  font-weight: bold;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    text-decoration: none;\n  }\n\n  &:link,\n  &:visited {\n    color: govuk-functional-colour(link);\n  }\n\n  &:hover {\n    color: govuk-functional-colour(link-hover);\n  }\n\n  &:focus {\n    position: relative; // Ensure focus sits above everything else.\n    z-index: 1;\n    color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n    box-shadow: none;\n  }\n\n  &:focus::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    background-color: govuk-colour(\"black\");\n  }\n\n  &[aria-current] {\n    position: relative;\n    color: govuk-functional-colour(link);\n    font-weight: bold;\n    text-decoration: none;\n\n    &::before {\n      content: \"\";\n      display: block;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 5px;\n      background-color: govuk-functional-colour(link);\n    }\n\n    &:hover {\n      color: govuk-functional-colour(link-hover);\n\n      &::before {\n        background-color: govuk-functional-colour(link-hover);\n      }\n    }\n\n    &:focus {\n      position: relative; // Ensure focus sits above everything else.\n      border: none;\n      color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n\n      &::before {\n        background-color: govuk-colour(\"black\");\n      }\n    }\n  }\n}\n\n.moj-primary-navigation__search {\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    vertical-align: middle;\n  }\n}\n"]}

package/moj/components/search-toggle/_search-toggle.scss

@@ -7,7 +7,7 @@
   padding-bottom: 13px;
   padding-left: 0;
   border: none;
-  color: $govuk-link-colour;
+  color: govuk-functional-colour(link);
   background-color: transparent;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
@@ -32,11 +32,11 @@
     position: relative;
     z-index: 1;
     outline: none;
-    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);
   }
 }
 
@@ -64,7 +64,7 @@
 }
 
 .js-enabled .moj-search-toggle__search {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 
   @include govuk-media-query($from: desktop) {
     position: absolute;

package/moj/components/search-toggle/_search-toggle.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/search-toggle/_search-toggle.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,eAAe;EACf,YAAY;EACZ,yBAAyB;EACzB,6BAA6B;EAC7B,eAAe;EACf,mCAAmC;EACnC,wBAAwB;EACxB,gBAAgB;EAChB,6CAA6C;;EAE7C;IACE,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,kBAAkB;IAClB,sBAAsB;;IAEtB;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,+BAA+B;IAC/B,qCAAqC;IACrC;;oCAEgC;EAClC;AACF;;AAEA;EACE,yBAAyB;;EAEzB;IACE,sDAAsD;IACtD,2BAA2B;IAC3B,sDAAsD;IACtD,0BAA0B;EAC5B;AACF;;AAEA,YAAY;AACZ;EACE;IACE,sDAAsD;IACtD,yBAAyB;EAC3B;AACF;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,4CAA4C;;EAE5C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,EAAE,mBAAmB;IAC9B,YAAY;IACZ,YAAY;IACZ,gBAAgB;EAClB;AACF","file":"_search-toggle.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-search-toggle__button {\n  display: inline-block;\n  padding-top: 12px;\n  padding-right: 0;\n  padding-bottom: 13px;\n  padding-left: 0;\n  border: none;\n  color: $govuk-link-colour;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font($size: 19, $weight: bold);\n\n  &__icon {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    margin-left: govuk-spacing(2);\n    fill: currentcolor;\n    vertical-align: middle;\n\n    @media screen and (forced-colors: active) {\n      fill: windowText;\n    }\n  }\n\n  &:focus {\n    position: relative;\n    z-index: 1;\n    outline: none;\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  }\n}\n\n.moj-search--toggle {\n  padding: govuk-spacing(3);\n\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-right: 0 !important;\n    // stylelint-disable-next-line declaration-no-important\n    padding-left: 0 !important;\n  }\n}\n\n// JS enabled\n.js-enabled .moj-search--toggle {\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-top: 0 !important;\n  }\n}\n\n.js-enabled .moj-search-toggle {\n  position: relative;\n}\n\n.js-enabled .moj-search-toggle__search {\n  background-color: govuk-colour(\"light-grey\");\n\n  @include govuk-media-query($from: desktop) {\n    position: absolute;\n    z-index: 10;\n    top: 50px; // Height of nav bar\n    right: -15px;\n    width: 450px;\n    max-width: 450px;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/search-toggle/_search-toggle.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,eAAe;EACf,YAAY;EACZ,oCAAoC;EACpC,6BAA6B;EAC7B,eAAe;EACf,mCAAmC;EACnC,wBAAwB;EACxB,gBAAgB;EAChB,6CAA6C;;EAE7C;IACE,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,kBAAkB;IAClB,sBAAsB;;IAEtB;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,0CAA0C;IAC1C,gDAAgD;IAChD;;+CAE2C;EAC7C;AACF;;AAEA;EACE,yBAAyB;;EAEzB;IACE,sDAAsD;IACtD,2BAA2B;IAC3B,sDAAsD;IACtD,0BAA0B;EAC5B;AACF;;AAEA,YAAY;AACZ;EACE;IACE,sDAAsD;IACtD,yBAAyB;EAC3B;AACF;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,4DAA4D;;EAE5D;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,EAAE,mBAAmB;IAC9B,YAAY;IACZ,YAAY;IACZ,gBAAgB;EAClB;AACF","file":"_search-toggle.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-search-toggle__button {\n  display: inline-block;\n  padding-top: 12px;\n  padding-right: 0;\n  padding-bottom: 13px;\n  padding-left: 0;\n  border: none;\n  color: govuk-functional-colour(link);\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font($size: 19, $weight: bold);\n\n  &__icon {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    margin-left: govuk-spacing(2);\n    fill: currentcolor;\n    vertical-align: middle;\n\n    @media screen and (forced-colors: active) {\n      fill: windowText;\n    }\n  }\n\n  &:focus {\n    position: relative;\n    z-index: 1;\n    outline: none;\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  }\n}\n\n.moj-search--toggle {\n  padding: govuk-spacing(3);\n\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-right: 0 !important;\n    // stylelint-disable-next-line declaration-no-important\n    padding-left: 0 !important;\n  }\n}\n\n// JS enabled\n.js-enabled .moj-search--toggle {\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-top: 0 !important;\n  }\n}\n\n.js-enabled .moj-search-toggle {\n  position: relative;\n}\n\n.js-enabled .moj-search-toggle__search {\n  background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n\n  @include govuk-media-query($from: desktop) {\n    position: absolute;\n    z-index: 10;\n    top: 50px; // Height of nav bar\n    right: -15px;\n    width: 450px;\n    max-width: 450px;\n  }\n}\n"]}