govuk_publishing_components 39.2.5 → 40.0.0

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/Function/prototype/bind.js

@@ -0,0 +1,253 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+	(factory());
+}(this, (function () { 'use strict';
+
+	// @ts-nocheck
+	(function (undefined) {
+
+	// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
+	var detect = (
+	  // In IE8, defineProperty could only act on DOM elements, so full support
+	  // for the feature requires the ability to set a property on an arbitrary object
+	  'defineProperty' in Object && (function() {
+	  	try {
+	  		var a = {};
+	  		Object.defineProperty(a, 'test', {value:42});
+	  		return true;
+	  	} catch(e) {
+	  		return false
+	  	}
+	  }())
+	);
+
+	if (detect) return
+
+	(function (nativeDefineProperty) {
+
+		var supportsAccessors = Object.prototype.hasOwnProperty('__defineGetter__');
+		var ERR_ACCESSORS_NOT_SUPPORTED = 'Getters & setters cannot be defined on this javascript engine';
+		var ERR_VALUE_ACCESSORS = 'A property cannot both have accessors and be writable or have a value';
+
+		Object.defineProperty = function defineProperty(object, property, descriptor) {
+
+			// Where native support exists, assume it
+			if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
+				return nativeDefineProperty(object, property, descriptor);
+			}
+
+			if (object === null || !(object instanceof Object || typeof object === 'object')) {
+				throw new TypeError('Object.defineProperty called on non-object');
+			}
+
+			if (!(descriptor instanceof Object)) {
+				throw new TypeError('Property description must be an object');
+			}
+
+			var propertyString = String(property);
+			var hasValueOrWritable = 'value' in descriptor || 'writable' in descriptor;
+			var getterType = 'get' in descriptor && typeof descriptor.get;
+			var setterType = 'set' in descriptor && typeof descriptor.set;
+
+			// handle descriptor.get
+			if (getterType) {
+				if (getterType !== 'function') {
+					throw new TypeError('Getter must be a function');
+				}
+				if (!supportsAccessors) {
+					throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+				}
+				if (hasValueOrWritable) {
+					throw new TypeError(ERR_VALUE_ACCESSORS);
+				}
+				Object.__defineGetter__.call(object, propertyString, descriptor.get);
+			} else {
+				object[propertyString] = descriptor.value;
+			}
+
+			// handle descriptor.set
+			if (setterType) {
+				if (setterType !== 'function') {
+					throw new TypeError('Setter must be a function');
+				}
+				if (!supportsAccessors) {
+					throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+				}
+				if (hasValueOrWritable) {
+					throw new TypeError(ERR_VALUE_ACCESSORS);
+				}
+				Object.__defineSetter__.call(object, propertyString, descriptor.set);
+			}
+
+			// OK to define value unconditionally - if a getter has been specified as well, an error would be thrown above
+			if ('value' in descriptor) {
+				object[propertyString] = descriptor.value;
+			}
+
+			return object;
+		};
+	}(Object.defineProperty));
+	})
+	.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+	// @ts-nocheck
+
+	(function(undefined) {
+	  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
+	  var detect = 'bind' in Function.prototype;
+
+	  if (detect) return
+
+	  Object.defineProperty(Function.prototype, 'bind', {
+	      value: function bind(that) { // .length is 1
+	          // add necessary es5-shim utilities
+	          var $Array = Array;
+	          var $Object = Object;
+	          var ObjectPrototype = $Object.prototype;
+	          var ArrayPrototype = $Array.prototype;
+	          var Empty = function Empty() {};
+	          var to_string = ObjectPrototype.toString;
+	          var hasToStringTag = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
+	          var isCallable; /* inlined from https://npmjs.com/is-callable */ var fnToStr = Function.prototype.toString, tryFunctionObject = function tryFunctionObject(value) { try { fnToStr.call(value); return true; } catch (e) { return false; } }, fnClass = '[object Function]', genClass = '[object GeneratorFunction]'; isCallable = function isCallable(value) { if (typeof value !== 'function') { return false; } if (hasToStringTag) { return tryFunctionObject(value); } var strClass = to_string.call(value); return strClass === fnClass || strClass === genClass; };
+	          var array_slice = ArrayPrototype.slice;
+	          var array_concat = ArrayPrototype.concat;
+	          var array_push = ArrayPrototype.push;
+	          var max = Math.max;
+	          // /add necessary es5-shim utilities
+
+	          // 1. Let Target be the this value.
+	          var target = this;
+	          // 2. If IsCallable(Target) is false, throw a TypeError exception.
+	          if (!isCallable(target)) {
+	              throw new TypeError('Function.prototype.bind called on incompatible ' + target);
+	          }
+	          // 3. Let A be a new (possibly empty) internal list of all of the
+	          //   argument values provided after thisArg (arg1, arg2 etc), in order.
+	          // XXX slicedArgs will stand in for "A" if used
+	          var args = array_slice.call(arguments, 1); // for normal call
+	          // 4. Let F be a new native ECMAScript object.
+	          // 11. Set the [[Prototype]] internal property of F to the standard
+	          //   built-in Function prototype object as specified in 15.3.3.1.
+	          // 12. Set the [[Call]] internal property of F as described in
+	          //   15.3.4.5.1.
+	          // 13. Set the [[Construct]] internal property of F as described in
+	          //   15.3.4.5.2.
+	          // 14. Set the [[HasInstance]] internal property of F as described in
+	          //   15.3.4.5.3.
+	          var bound;
+	          var binder = function () {
+
+	              if (this instanceof bound) {
+	                  // 15.3.4.5.2 [[Construct]]
+	                  // When the [[Construct]] internal method of a function object,
+	                  // F that was created using the bind function is called with a
+	                  // list of arguments ExtraArgs, the following steps are taken:
+	                  // 1. Let target be the value of F's [[TargetFunction]]
+	                  //   internal property.
+	                  // 2. If target has no [[Construct]] internal method, a
+	                  //   TypeError exception is thrown.
+	                  // 3. Let boundArgs be the value of F's [[BoundArgs]] internal
+	                  //   property.
+	                  // 4. Let args be a new list containing the same values as the
+	                  //   list boundArgs in the same order followed by the same
+	                  //   values as the list ExtraArgs in the same order.
+	                  // 5. Return the result of calling the [[Construct]] internal
+	                  //   method of target providing args as the arguments.
+
+	                  var result = target.apply(
+	                      this,
+	                      array_concat.call(args, array_slice.call(arguments))
+	                  );
+	                  if ($Object(result) === result) {
+	                      return result;
+	                  }
+	                  return this;
+
+	              } else {
+	                  // 15.3.4.5.1 [[Call]]
+	                  // When the [[Call]] internal method of a function object, F,
+	                  // which was created using the bind function is called with a
+	                  // this value and a list of arguments ExtraArgs, the following
+	                  // steps are taken:
+	                  // 1. Let boundArgs be the value of F's [[BoundArgs]] internal
+	                  //   property.
+	                  // 2. Let boundThis be the value of F's [[BoundThis]] internal
+	                  //   property.
+	                  // 3. Let target be the value of F's [[TargetFunction]] internal
+	                  //   property.
+	                  // 4. Let args be a new list containing the same values as the
+	                  //   list boundArgs in the same order followed by the same
+	                  //   values as the list ExtraArgs in the same order.
+	                  // 5. Return the result of calling the [[Call]] internal method
+	                  //   of target providing boundThis as the this value and
+	                  //   providing args as the arguments.
+
+	                  // equiv: target.call(this, ...boundArgs, ...args)
+	                  return target.apply(
+	                      that,
+	                      array_concat.call(args, array_slice.call(arguments))
+	                  );
+
+	              }
+
+	          };
+
+	          // 15. If the [[Class]] internal property of Target is "Function", then
+	          //     a. Let L be the length property of Target minus the length of A.
+	          //     b. Set the length own property of F to either 0 or L, whichever is
+	          //       larger.
+	          // 16. Else set the length own property of F to 0.
+
+	          var boundLength = max(0, target.length - args.length);
+
+	          // 17. Set the attributes of the length own property of F to the values
+	          //   specified in 15.3.5.1.
+	          var boundArgs = [];
+	          for (var i = 0; i < boundLength; i++) {
+	              array_push.call(boundArgs, '$' + i);
+	          }
+
+	          // XXX Build a dynamic function with desired amount of arguments is the only
+	          // way to set the length property of a function.
+	          // In environments where Content Security Policies enabled (Chrome extensions,
+	          // for ex.) all use of eval or Function costructor throws an exception.
+	          // However in all of these environments Function.prototype.bind exists
+	          // and so this code will never be executed.
+	          bound = Function('binder', 'return function (' + boundArgs.join(',') + '){ return binder.apply(this, arguments); }')(binder);
+
+	          if (target.prototype) {
+	              Empty.prototype = target.prototype;
+	              bound.prototype = new Empty();
+	              // Clean up dangling references.
+	              Empty.prototype = null;
+	          }
+
+	          // TODO
+	          // 18. Set the [[Extensible]] internal property of F to true.
+
+	          // TODO
+	          // 19. Let thrower be the [[ThrowTypeError]] function Object (13.2.3).
+	          // 20. Call the [[DefineOwnProperty]] internal method of F with
+	          //   arguments "caller", PropertyDescriptor {[[Get]]: thrower, [[Set]]:
+	          //   thrower, [[Enumerable]]: false, [[Configurable]]: false}, and
+	          //   false.
+	          // 21. Call the [[DefineOwnProperty]] internal method of F with
+	          //   arguments "arguments", PropertyDescriptor {[[Get]]: thrower,
+	          //   [[Set]]: thrower, [[Enumerable]]: false, [[Configurable]]: false},
+	          //   and false.
+
+	          // TODO
+	          // NOTE Function objects created using Function.prototype.bind do not
+	          // have a prototype property or the [[Code]], [[FormalParameters]], and
+	          // [[Scope]] internal properties.
+	          // XXX can't delete prototype in pure-js.
+
+	          // 22. Return F.
+	          return bound;
+	      }
+	  });
+	})
+	.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+})));

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/Object/defineProperty.js

@@ -0,0 +1,94 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+	(factory());
+}(this, (function () { 'use strict';
+
+	// @ts-nocheck
+	(function (undefined) {
+
+	// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
+	var detect = (
+	  // In IE8, defineProperty could only act on DOM elements, so full support
+	  // for the feature requires the ability to set a property on an arbitrary object
+	  'defineProperty' in Object && (function() {
+	  	try {
+	  		var a = {};
+	  		Object.defineProperty(a, 'test', {value:42});
+	  		return true;
+	  	} catch(e) {
+	  		return false
+	  	}
+	  }())
+	);
+
+	if (detect) return
+
+	(function (nativeDefineProperty) {
+
+		var supportsAccessors = Object.prototype.hasOwnProperty('__defineGetter__');
+		var ERR_ACCESSORS_NOT_SUPPORTED = 'Getters & setters cannot be defined on this javascript engine';
+		var ERR_VALUE_ACCESSORS = 'A property cannot both have accessors and be writable or have a value';
+
+		Object.defineProperty = function defineProperty(object, property, descriptor) {
+
+			// Where native support exists, assume it
+			if (nativeDefineProperty && (object === window || object === document || object === Element.prototype || object instanceof Element)) {
+				return nativeDefineProperty(object, property, descriptor);
+			}
+
+			if (object === null || !(object instanceof Object || typeof object === 'object')) {
+				throw new TypeError('Object.defineProperty called on non-object');
+			}
+
+			if (!(descriptor instanceof Object)) {
+				throw new TypeError('Property description must be an object');
+			}
+
+			var propertyString = String(property);
+			var hasValueOrWritable = 'value' in descriptor || 'writable' in descriptor;
+			var getterType = 'get' in descriptor && typeof descriptor.get;
+			var setterType = 'set' in descriptor && typeof descriptor.set;
+
+			// handle descriptor.get
+			if (getterType) {
+				if (getterType !== 'function') {
+					throw new TypeError('Getter must be a function');
+				}
+				if (!supportsAccessors) {
+					throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+				}
+				if (hasValueOrWritable) {
+					throw new TypeError(ERR_VALUE_ACCESSORS);
+				}
+				Object.__defineGetter__.call(object, propertyString, descriptor.get);
+			} else {
+				object[propertyString] = descriptor.value;
+			}
+
+			// handle descriptor.set
+			if (setterType) {
+				if (setterType !== 'function') {
+					throw new TypeError('Setter must be a function');
+				}
+				if (!supportsAccessors) {
+					throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED);
+				}
+				if (hasValueOrWritable) {
+					throw new TypeError(ERR_VALUE_ACCESSORS);
+				}
+				Object.__defineSetter__.call(object, propertyString, descriptor.set);
+			}
+
+			// OK to define value unconditionally - if a getter has been specified as well, an error would be thrown above
+			if ('value' in descriptor) {
+				object[propertyString] = descriptor.value;
+			}
+
+			return object;
+		};
+	}(Object.defineProperty));
+	})
+	.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+})));

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/String/prototype/trim.js

@@ -0,0 +1,22 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+    typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+    (factory());
+}(this, (function () { 'use strict';
+
+    // @ts-nocheck
+    (function (undefined) {
+
+        // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
+        var detect = ('trim' in String.prototype);
+
+        if (detect) return
+
+        // Polyfill from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
+        String.prototype.trim = function () {
+            return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+        };
+
+    }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+})));

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/Window.js

@@ -0,0 +1,28 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
+	(factory());
+}(this, (function () { 'use strict';
+
+	// @ts-nocheck
+	(function (undefined) {
+
+	// Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
+	var detect = ('Window' in this);
+
+	if (detect) return
+
+	if ((typeof WorkerGlobalScope === "undefined") && (typeof importScripts !== "function")) {
+		(function (global) {
+			if (global.constructor) {
+				global.Window = global.constructor;
+			} else {
+				(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
+			}
+		}(this));
+	}
+
+	})
+	.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+})));

data/app/assets/stylesheets/component_guide/application.scss

@@ -1,8 +1,5 @@
 // This file contains the styles for the Component Guide.
 
-// feature flag for accessible link styles
-$govuk-new-link-styles: true;
-
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 
@@ -270,7 +267,7 @@ html {
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 
-$code-00: scale-color(govuk-colour("light-grey", $legacy: "grey-4"), $lightness: 50%); // Default Background
+$code-00: scale-color(govuk-colour("light-grey"), $lightness: 50%); // Default Background
 $code-01: #f5f5f5; // Lighter Background (Unused)
 $code-02: #bfc1c3; // Selection Background
 $code-03: darken($govuk-secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -1,9 +1,6 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
-// feature flag for accessible link styles
-$govuk-new-link-styles: true;
-
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

data/app/assets/stylesheets/govuk_publishing_components/_individual_component_support.scss

@@ -1,5 +1,3 @@
-$govuk-new-link-styles: true;
-
 // This flag stops the font from being included in this components's
 // stylesheet - the font is being served by Static across all of GOV.UK, so is
 // not needed here.

data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss

@@ -7,7 +7,7 @@ $thumbnail-background: govuk-colour("white");
 $thumbnail-border-colour: rgba(11, 12, 12, .1);
 $thumbnail-shadow-colour: rgba(11, 12, 12, .4);
 $thumbnail-shadow-width: 0 2px 2px;
-$thumbnail-icon-border-colour: govuk-colour("mid-grey", $legacy: "grey-3");
+$thumbnail-icon-border-colour: govuk-colour("mid-grey");
 
 .gem-c-attachment {
   @include govuk-font(19);

data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss

@@ -2,11 +2,12 @@
 @import "govuk/components/checkboxes/checkboxes";
 
 .govuk-checkboxes--nested {
-  margin-left: -(govuk-spacing(4) + 2px); // 22px
+  width: 100%;
+  margin-left: govuk-spacing(4);
   box-sizing: border-box;
   border-left-style: solid;
   border-left-width: 4px;
-  border-color: govuk-colour("mid-grey", $legacy: "grey-2");
+  border-color: govuk-colour("mid-grey");
   margin-top: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
   padding: govuk-spacing(2) govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -27,7 +27,7 @@
 .gem-c-contextual-sidebar__cta {
   border-top: 2px solid $govuk-brand-colour;
   margin-bottom: govuk-spacing(6);
-  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+  background-color: govuk-colour("light-grey");
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -53,7 +53,7 @@
 }
 
 .gem-c-document-list__item-context {
-  color: govuk-colour("dark-grey", $legacy: "grey-1");
+  color: govuk-colour("dark-grey");
 }
 
 .gem-c-document-list__item-description {
@@ -93,7 +93,7 @@
 }
 
 .gem-c-document-list__item--highlight {
-  border: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+  border: 1px solid govuk-colour("mid-grey");
   padding: govuk-spacing(6);
   margin-bottom: govuk-spacing(6);
 

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -77,7 +77,7 @@
       // and make all of thead and tfoot stand out
       thead,
       tfoot {
-        background-color: govuk-colour("light-grey", $legacy: "grey-3");
+        background-color: govuk-colour("light-grey");
       }
 
       thead th,
@@ -122,7 +122,7 @@
       // total and subtotal rows
       tr.subtotal > *,
       tr.total > * {
-        border-top: 3px solid govuk-colour("mid-grey", $legacy: "grey-2");
+        border-top: 3px solid govuk-colour("mid-grey");
       }
 
       tr.total > *,
@@ -133,7 +133,7 @@
       // the total is usually in the tfoot, so already has that background colour
       // but when it's used inside the tbody, it should also be highlighted
       tr.total {
-        background-color: govuk-colour("light-grey", $legacy: "grey-3");
+        background-color: govuk-colour("light-grey");
       }
     }
     // stylelint-enable selector-no-qualifying-type

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -187,7 +187,7 @@
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
   margin: 0 0 calc(govuk-spacing(3) / 2);
-  color: govuk-colour("dark-grey", $legacy: "grey-1");
+  color: govuk-colour("dark-grey");
 
   @include govuk-media-query($from: tablet) {
     margin-bottom: 0;
@@ -213,7 +213,7 @@
   }
 
   .gem-c-image-card__list-item--text {
-    color: govuk-colour("dark-grey", $legacy: "grey-1");
+    color: govuk-colour("dark-grey");
   }
 
   .gem-c-image-card__list-item-link {

data/app/assets/stylesheets/govuk_publishing_components/components/_intervention.scss

@@ -4,7 +4,7 @@
   @include govuk-text-colour;
   @include govuk-responsive-padding(3);
   @include govuk-responsive-margin(6, "bottom");
-  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+  background-color: govuk-colour("light-grey");
   border-left: 10px solid $govuk-success-colour;
 
   .govuk-body:last-of-type {

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -5,7 +5,7 @@
 @import "govuk/components/tag/tag";
 
 .gem-c-layout-header--production .govuk-header__container {
-  border-bottom-color: govuk-colour("red", $legacy: "bright-red");
+  border-bottom-color: govuk-colour("red");
 }
 
 .gem-c-layout-header--integration .govuk-header__container,
@@ -18,7 +18,7 @@
 }
 
 .gem-c-layout-header--development .govuk-header__container {
-  border-bottom-color: govuk-colour("dark-grey", $legacy: "grey-1");
+  border-bottom-color: govuk-colour("dark-grey");
 }
 
 .gem-c-layout-header--no-bottom-border,
@@ -103,12 +103,9 @@
   }
 }
 
-.gem-c-header__logotype {
-  vertical-align: middle;
-}
-
 .gem-c-header__product-name {
   display: none;
+  margin-top: govuk-spacing(-1);
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
@@ -119,12 +116,14 @@
 .gem-c-environment-tag {
   padding: 2px 5px 0;
   margin-left: 3px;
+  margin-top: govuk-spacing(-2);
   vertical-align: middle;
   @include govuk-font($size: 16, $weight: "bold");
 }
 
 .gem-c-environment-tag--production {
-  background-color: govuk-colour("red", $legacy: "bright-red");
+  background-color: govuk-colour("red");
+  color: govuk-colour("white");
 }
 
 .gem-c-environment-tag--example {
@@ -132,7 +131,8 @@
 }
 
 .gem-c-environment-tag--development {
-  background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+  background-color: govuk-colour("dark-grey");
+  color: govuk-colour("white");
 }
 
 .gem-c-environment-tag--staging,

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -123,6 +123,7 @@ $after-button-padding-left: govuk-spacing(4);
 .gem-c-layout-super-navigation-header__header-logo {
   display: inline-block;
   height: govuk-spacing(6);
+  line-height: 1;
   padding-bottom: govuk-spacing(2);
   padding-top: govuk-spacing(2);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -14,7 +14,7 @@
 
 .gem-c-related-navigation__sub-heading {
   @include govuk-font(16);
-  border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+  border-top: 1px solid govuk-colour("mid-grey");
   margin: 0;
   padding-top: govuk-spacing(3);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss

@@ -6,7 +6,7 @@
 
   position: relative;
   padding: 10px;
-  background: govuk-colour("light-grey", $legacy: "grey-4");
+  background: govuk-colour("light-grey");
   border-bottom: solid 1px govuk-colour("blue");
   margin-top: govuk-spacing(3);