govuk_publishing_components 67.0.1 → 68.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss

@@ -26,7 +26,7 @@ $large-input-size: 50px;
   padding: 0;
   overflow-x: hidden;
   background-color: govuk-colour("white");
-  border: 1px solid $govuk-border-colour;
+  border: 1px solid govuk-functional-colour(border);
   border-top: 0;
 
   @include enhance-autocomplete-menu-width($input-size);
@@ -75,21 +75,21 @@ $large-input-size: 50px;
 .gem-c-search-with-autocomplete__option--focused,
 .gem-c-search-with-autocomplete__option:hover,
 .gem-c-search-with-autocomplete__option:focus-visible {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
   outline: none;
 
   @include govuk-link-decoration;
   @include govuk-link-hover-decoration;
 
   .gem-c-search-with-autocomplete__suggestion-icon {
-    background-color: $govuk-text-colour;
+    background-color: govuk-functional-colour(text);
   }
 }
 
 // Styling specifically _only_ for keyboard focus
 .gem-c-search-with-autocomplete__option:focus-visible {
   .gem-c-search-with-autocomplete__suggestion-text {
-    background-color: $govuk-focus-colour;
+    background-color: govuk-functional-colour(focus);
   }
 }
 
@@ -98,7 +98,7 @@ $large-input-size: 50px;
   align-items: center;
   margin: 0 govuk-spacing(3);
   padding: govuk-spacing(1) 0;
-  border-bottom: 1px solid govuk-colour("mid-grey");
+  border-bottom: 1px solid govuk-functional-colour("border");
 }
 
 .gem-c-search-with-autocomplete__option:last-child .gem-c-search-with-autocomplete__option-wrapper {
@@ -112,7 +112,7 @@ $large-input-size: 50px;
   flex: none;
   mask-image: url("govuk_publishing_components/icon-autocomplete-search-suggestion.svg");
   -webkit-mask-image: url("govuk_publishing_components/icon-autocomplete-search-suggestion.svg");
-  background-color: $govuk-secondary-text-colour;
+  background-color: govuk-functional-colour(secondary-text);
 }
 
 .gem-c-search-with-autocomplete__suggestion-text {
@@ -138,7 +138,7 @@ $large-input-size: 50px;
 // Fix top border styling on "borderless" search input when rendered on a GOV.UK blue background
 .gem-c-search-with-autocomplete.gem-c-search-with-autocomplete--on-govuk-blue {
   .gem-c-search-with-autocomplete__menu {
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid govuk-functional-colour(border);
   }
 }
 

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

@@ -31,7 +31,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
 
 .gem-c-search__label {
   display: block;
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
   cursor: text;
   text-overflow: ellipsis;
   height: 90%;
@@ -52,19 +52,19 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
     max-width: 68%;
     padding-left: govuk-spacing(3);
     z-index: 1;
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
     background: govuk-colour("white");
   }
 
   // match label colour with the label component colour
   // when javascript is enabled and inline_label option  is set to false
   .govuk-frontend-supported .gem-c-search--separate-label & {
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
   }
 }
 
 @mixin gem-c-search-input-focus {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-functional-colour(focus);
   // Ensure outline appears outside of the element
   outline-offset: 0;
   // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
@@ -77,7 +77,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
   width: 100%;
   height: govuk-em(40, 19);
   padding: govuk-em(6, 19);
-  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+  border: $govuk-border-width-form-element solid govuk-functional-colour(input-border);
   background: govuk-colour("white");
   border-radius: 0; // otherwise iphones apply an automatic border radius
   box-sizing: border-box;
@@ -137,7 +137,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
 
   &:focus {
     z-index: 2;
-    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
     // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
     // Also, `outline` cannot be utilised
     // here as it is already used for the yellow focus state.
@@ -195,7 +195,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
 
   .govuk-frontend-supported & {
     .gem-c-search__label {
-      color: $govuk-secondary-text-colour;
+      color: govuk-functional-colour(secondary-text);
     }
   }
 }
@@ -206,7 +206,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
     color: govuk-colour("white");
 
     &:hover {
-      background-color: color.adjust(govuk-colour("blue"), $lightness: 5%);
+      background-color: govuk-colour("blue", $variant: "shade-25");
     }
   }
 

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

@@ -3,7 +3,7 @@
   @include govuk-responsive-margin(6, "bottom");
 
   @include govuk-media-query($from: tablet) {
-    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+    box-shadow: inset 0 -1px 0 govuk-functional-colour(border);
     display: flex;
   }
 }
@@ -22,7 +22,7 @@
 }
 
 .gem-c-secondary-navigation__list-item {
-  box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  box-shadow: inset 0 -1px 0 govuk-functional-colour(border);
 
   @include govuk-media-query($from: tablet) {
     display: flex;
@@ -56,11 +56,11 @@
   }
 
   .gem-c-secondary-navigation__list-item-link:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   .gem-c-secondary-navigation__list-item-link:focus {
-    border-color: $govuk-focus-text-colour;
+    border-color: govuk-functional-colour(focus-text);
     border-left-color: transparent;
     position: relative;
     @include govuk-focused-text;
@@ -75,11 +75,11 @@
   .gem-c-secondary-navigation__list-item-link:link,
   .gem-c-secondary-navigation__list-item-link:visited {
     border-color: govuk-colour("blue");
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
   }
 
   .gem-c-secondary-navigation__list-item-link:focus {
-    border-color: $govuk-focus-text-colour;
+    border-color: govuk-functional-colour(focus-text);
     border-left-color: transparent;
     @include govuk-focused-text;
 

data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss

@@ -46,20 +46,20 @@ $choices-button-dimension: 12px !default;
 
   .choices[data-type*="select-multiple"] .choices__button,
   .choices[data-type*="text"] .choices__button {
-    border-color: govuk-colour("mid-grey");
-    border-right: 1px solid govuk-colour("mid-grey");
+    border-color: govuk-functional-colour("border");
+    border-right: 1px solid govuk-functional-colour("border");
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) govuk-spacing(2);
     margin-right: 0;
 
     &:hover {
-      background-color: govuk-colour("mid-grey");
-      border-color: govuk-colour("dark-grey");
-      box-shadow: 0 $govuk-border-width-form-element 0 govuk-colour("dark-grey");
+      background-color: govuk-colour("black", $variant: "tint-80");
+      border-color: govuk-colour("black", $variant: "tint-25");
+      box-shadow: 0 $govuk-border-width-form-element 0 govuk-colour("black", $variant: "tint-25");
     }
 
     &:focus {
-      background-color: $govuk-focus-colour;
-      box-shadow: 0 $govuk-border-width-form-element 0 $govuk-focus-text-colour;
+      background-color: govuk-functional-colour(focus);
+      box-shadow: 0 $govuk-border-width-form-element 0 govuk-functional-colour(focus-text);
     }
   }
 
@@ -84,7 +84,7 @@ $choices-button-dimension: 12px !default;
   }
 
   &.govuk-form-group--error .choices:not(.is-active):not(.is-focused):not(.is-open) .choices__inner {
-    border-color: $govuk-error-colour;
+    border-color: govuk-functional-colour(error);
   }
 
   .choices.is-focused,
@@ -99,7 +99,7 @@ $choices-button-dimension: 12px !default;
 
   .choices.is-focused .choices__inner,
   .choices.is-open .choices__inner {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
     // Ensure outline appears outside of the element
     outline-offset: 0;
     // Double the border by adding its width again. Use `box-shadow` to do
@@ -113,7 +113,7 @@ $choices-button-dimension: 12px !default;
 
     &:not(:empty) {
       margin-block-start: 6px;
-      border-block-start: 1px solid $govuk-border-colour;
+      border-block-start: 1px solid govuk-functional-colour(border);
       padding-block-end: 5px;
     }
   }
@@ -124,10 +124,10 @@ $choices-button-dimension: 12px !default;
     border: 0;
     padding: 0 0 0 govuk-spacing(2);
     margin: govuk-spacing(2) govuk-spacing(2) 0 0;
-    background-color: govuk-colour("light-grey");
-    box-shadow: 0 $govuk-border-width-form-element 0 govuk-colour("mid-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
+    box-shadow: 0 $govuk-border-width-form-element 0 govuk-functional-colour("border");
     line-height: 1;
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
 
     .is-disabled & {
       opacity: 0.5;
@@ -149,7 +149,7 @@ $choices-button-dimension: 12px !default;
   .choices__list--dropdown .choices__item,
   .choices__list[aria-expanded] .choices__item {
     position: relative;
-    border-bottom: 1px solid govuk-colour("mid-grey");
+    border-bottom: 1px solid govuk-functional-colour("border");
 
     &:last-child {
       border-bottom: 0;
@@ -168,7 +168,7 @@ $choices-button-dimension: 12px !default;
     @include govuk-typography-weight-bold;
     color: govuk-colour("black"); // Choices.js doesn't use a variable for this color for some reason :(
     padding: govuk-spacing(6) govuk-spacing(2) govuk-spacing(2);
-    border-bottom: 1px solid govuk-colour("mid-grey");
+    border-bottom: 1px solid govuk-functional-colour("border");
     cursor: default;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -128,7 +128,7 @@ $column-width: 9.5em;
 
 .gem-c-share-links--square-icons {
   .gem-c-share-links__link-icon {
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     color: govuk-colour("black");
     padding: govuk-spacing(2);
   }
@@ -138,7 +138,7 @@ $column-width: 9.5em;
   }
 
   .gem-c-share-links__link:focus {
-    box-shadow: 0 0 $govuk-focus-colour, 0 4px govuk-colour("black");
+    box-shadow: 0 0 govuk-functional-colour(focus), 0 4px govuk-colour("black");
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_signup-link.scss

@@ -21,8 +21,8 @@
 
 .gem-c-signup-link--with-background-and-border {
   padding: govuk-spacing(6);
-  background-color: govuk-colour("light-grey");
-  border: 1px solid $govuk-border-colour;
+  background-color: govuk-colour("black", $variant: "tint-95");
+  border: 1px solid govuk-functional-colour(border);
 }
 
 .gem-c-signup-link--link-only .gem-c-signup-link__link {

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -1,8 +1,8 @@
 .gem-c-single-page-notification-button__submit {
   padding: govuk-spacing(2);
   margin: govuk-spacing(0);
-  border: 1px solid govuk-colour("dark-grey");
-  color: $govuk-link-colour;
+  border: 1px solid govuk-colour("black", $variant: "tint-25");
+  color: govuk-functional-colour(link);
   cursor: pointer;
   background: none;
   @include govuk-font(16);
@@ -13,12 +13,12 @@
   }
 
   &:hover {
-    background-color: govuk-colour("light-grey");
-    color: $govuk-link-hover-colour;
+    background-color: govuk-colour("black", $variant: "tint-95");
+    color: govuk-functional-colour(link-hover);
 
     &:focus {
-      color: $govuk-text-colour;
-      box-shadow: 0 $govuk-focus-width $govuk-text-colour;
+      color: govuk-functional-colour(text);
+      box-shadow: 0 $govuk-focus-width govuk-functional-colour(text);
     }
   }
 }

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

@@ -1,7 +1,7 @@
 .gem-c-step-nav-header {
   position: relative;
   padding: 10px;
-  background: govuk-colour("light-grey");
+  background: govuk-colour("black", $variant: "tint-95");
   border-bottom: solid 1px govuk-colour("blue");
   margin-top: govuk-spacing(3);
   @include govuk-font(24, $weight: bold);
@@ -21,7 +21,7 @@
   .gem-c-step-nav-header {
     padding: 0 0 govuk-spacing(4) 0;
     background: none;
-    border-color: $govuk-print-text-colour;
+    border-color: govuk-functional-colour(print-text);
   }
 
   .gem-c-step-nav-header__part-of {

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

@@ -46,6 +46,6 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-step-nav-related {
     background: none;
-    border-color: $govuk-print-text-colour;
+    border-color: govuk-functional-colour(print-text);
   }
 }

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

@@ -1,7 +1,7 @@
 $stroke-width: 1px;
 $number-circle-size: 30px;
 $number-circle-size-large: 35px;
-$top-border: solid 1px govuk-colour("mid-grey");
+$top-border: solid 1px govuk-functional-colour("border");
 
 @mixin step-nav-vertical-line($line-style: solid) {
   content: "";
@@ -9,7 +9,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
   z-index: 2;
   width: 0;
   height: 100%;
-  border-left: $line-style $stroke-width govuk-colour("mid-grey");
+  border-left: $line-style $stroke-width govuk-functional-colour("border");
   background: govuk-colour("white");
 }
 
@@ -112,14 +112,14 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__button {
-  color: $govuk-link-colour;
+  color: govuk-functional-colour(link);
   cursor: pointer;
   background: none;
   border: 0;
   margin: 0;
 
   &:hover {
-    background: govuk-colour("light-grey");
+    background: govuk-colour("black", $variant: "tint-95");
     // Chevron icon interaction states
     .gem-c-step-nav__chevron {
       color: govuk-colour("black");
@@ -127,11 +127,11 @@ $top-border: solid 1px govuk-colour("mid-grey");
     }
 
     .gem-c-step-nav__chevron::after {
-      color: govuk-colour("light-grey");
+      color: govuk-colour("black", $variant: "tint-95");
     }
 
     .gem-c-step-nav__button-text {
-      color: $govuk-text-colour;
+      color: govuk-functional-colour(text);
     }
   }
 
@@ -144,7 +144,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
     }
 
     .gem-c-step-nav__chevron::after {
-      color: $govuk-focus-colour;
+      color: govuk-functional-colour(focus);
     }
 
     .gem-c-step-nav____title-text-focus,
@@ -261,7 +261,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
     margin-left: calc($number-circle-size / 4);
     width: calc($number-circle-size / 2);
     height: 0;
-    border-bottom: solid $stroke-width govuk-colour("mid-grey");
+    border-bottom: solid $stroke-width govuk-functional-colour("border");
   }
 
   &::after {
@@ -319,7 +319,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
 }
 
 .gem-c-step-nav__circle--number {
-  border: solid $stroke-width govuk-colour("mid-grey");
+  border: solid $stroke-width govuk-functional-colour("border");
   @include step-nav-font(16, $weight: bold, $line-height: 29px);
 
   .gem-c-step-nav--large & {
@@ -404,7 +404,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
 
 .gem-c-step-nav__toggle-link {
   display: block;
-  color: $govuk-link-colour;
+  color: govuk-functional-colour(link);
   text-transform: capitalize;
   padding-bottom: govuk-spacing(6);
   @include step-nav-font(15, $line-height: 1.2);
@@ -530,7 +530,7 @@ $top-border: solid 1px govuk-colour("mid-grey");
 .gem-c-step-nav__context {
   display: inline-block;
   font-weight: normal;
-  color: govuk-colour("dark-grey");
+  color: govuk-functional-colour("secondary-text");
 
   &::before {
     content: " \2013\00a0"; // dash followed by  

data/app/assets/stylesheets/govuk_publishing_components/components/_sub-navigation-menu.scss

@@ -1,11 +1,11 @@
 .gem-c-sub-navigation-menu {
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
   @include govuk-font(19);
 }
 
 .gem-c-sub-navigation-menu__button-container {
-  background-color: govuk-colour("light-grey");
-  border-bottom: 1px solid govuk-colour("mid-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
+  border-bottom: 1px solid govuk-functional-colour("border");
 }
 
 .gem-c-sub-navigation-menu__button-container--collapsed {
@@ -21,7 +21,7 @@
   padding-right: govuk-spacing(3);
   // Invisible border so the width of the collapsed button is the same as the expanded one.
   border-left: 1px solid rgba(0, 0, 0, 0);
-  border-right: 1px solid govuk-colour("light-grey");
+  border-right: 1px solid govuk-colour("black", $variant: "tint-95");
   cursor: pointer;
   position: relative;
   @include govuk-font(19);
@@ -59,11 +59,11 @@
 }
 
 .gem-c-sub-navigation-menu__button[aria-expanded="true"] {
-  border-color: govuk-colour("mid-grey");
+  border-color: govuk-functional-colour("border");
   background-color: govuk-colour("white");
 
   @include govuk-media-query($until: tablet) {
-    border-left: 1px solid govuk-colour("light-grey"); // Hide left border on mobile while preserving button width.
+    border-left: 1px solid govuk-colour("black", $variant: "tint-95"); // Hide left border on mobile while preserving button width.
   }
 
   // Expanded arrow icon
@@ -73,8 +73,8 @@
 }
 
 .gem-c-sub-navigation-menu__button[aria-expanded="true"]:focus {
-  background-color: $govuk-focus-colour;
-  border-color: $govuk-focus-colour;
+  background-color: govuk-functional-colour(focus);
+  border-color: govuk-functional-colour(focus);
 }
 
 // Adds a white border at the bottom of the button when the button is expanded.
@@ -98,7 +98,7 @@
 }
 
 .gem-c-sub-navigation-menu__button:hover::before {
-  border-color: govuk-colour("dark-blue");
+  border-color: govuk-colour("blue", $variant: "shade-50");
 }
 
 .gem-c-sub-navigation-menu__nav-container {

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -66,11 +66,11 @@
   }
 
   &:not(.brand__color) {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:visited,
@@ -80,8 +80,8 @@
   }
 
   &:focus {
-    color: $govuk-focus-text-colour;
-    border: 1px solid $govuk-focus-colour;
+    color: govuk-functional-colour(focus-text);
+    border: 1px solid govuk-functional-colour(focus);
     outline: 3px solid transparent;
   }
 
@@ -94,7 +94,7 @@
 .gem-c-subscription-links__feed-box {
   padding: govuk-spacing(3);
   margin-bottom: govuk-spacing(3);
-  background: govuk-colour("light-grey");
+  background: govuk-colour("black", $variant: "tint-95");
 
   .govuk-frontend-supported &.js-hidden {
     display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -5,14 +5,14 @@
   .gem-c-success-alert {
     break-inside: avoid;
     background: none;
-    border-color: $govuk-print-text-colour;
+    border-color: govuk-functional-colour(print-text);
 
     * {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
 
     .govuk-notification-banner__header {
-      border-bottom: 1pt solid $govuk-print-text-colour;
+      border-bottom: 1pt solid govuk-functional-colour(print-text);
     }
 
     .govuk-notification-banner__title {

data/app/assets/stylesheets/govuk_publishing_components/components/_summary-banner.scss

@@ -1,6 +1,6 @@
 .gem-c-summary-banner {
   direction: ltr;
-  background: $govuk-brand-colour;
+  background: govuk-functional-colour(brand);
   color: govuk-colour("white");
   padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(3);
   clear: both;

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

@@ -1,19 +1,19 @@
 @import "govuk/components/table/table";
 
 $table-border-width: 1px;
-$table-border-colour: govuk-colour("mid-grey");
+$table-border-colour: govuk-functional-colour("border");
 $table-header-border-width: 2px;
-$table-header-background-colour: govuk-colour("light-grey");
+$table-header-background-colour: govuk-colour("black", $variant: "tint-95");
 $sort-link-active-colour: govuk-colour("white");
 $sort-link-arrow-size: 14px;
 $sort-link-arrow-size-small: 8px;
 $sort-link-arrow-spacing: calc($sort-link-arrow-size / 2);
-$table-row-hover-background-colour: rgba(43, 140, 196, .2);
-$table-row-even-background-colour: govuk-colour("light-grey");
+$table-row-hover-background-colour: govuk-colour("blue", $variant: "tint-80");
+$table-row-even-background-colour: govuk-colour("black", $variant: "tint-95");
 
 .govuk-table__cell:empty,
 .govuk-table__cell--empty {
-  color: $govuk-secondary-text-colour;
+  color: govuk-functional-colour(secondary-text);
 }
 
 .govuk-table--sortable {
@@ -35,7 +35,7 @@ $table-row-even-background-colour: govuk-colour("light-grey");
       display: inline-block;
       position: relative;
       padding-right: $sort-link-arrow-size;
-      color: $govuk-link-colour;
+      color: govuk-functional-colour(link);
       text-decoration: none;
       @include govuk-link-style-no-visited-state;
     }
@@ -63,7 +63,7 @@ $table-row-even-background-colour: govuk-colour("light-grey");
 
   .govuk-table__header--active {
     color: $sort-link-active-colour;
-    background: $govuk-link-colour;
+    background: govuk-functional-colour(link);
 
     .app-table__sort-link {
       padding-right: govuk-spacing(4);
@@ -76,7 +76,7 @@ $table-row-even-background-colour: govuk-colour("light-grey");
       }
 
       &:focus {
-        color: $govuk-focus-text-colour;
+        color: govuk-functional-colour(focus-text);
       }
     }
 
@@ -109,6 +109,11 @@ $table-row-even-background-colour: govuk-colour("light-grey");
   .govuk-table__row {
     &:hover {
       background-color: $table-row-hover-background-colour;
+
+      .govuk-table__cell:empty,
+      .govuk-table__cell--empty {
+        color: govuk-functional-colour(text);
+      }
     }
 
     &:nth-child(even) {
@@ -139,13 +144,13 @@ $table-row-even-background-colour: govuk-colour("light-grey");
     outline: none;
 
     * {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
       background: none !important;
     }
 
     .govuk-table__header,
     .govuk-table__cell {
-      border-bottom: 1px solid $govuk-print-text-colour !important;
+      border-bottom: 1px solid govuk-functional-colour(print-text) !important;
     }
 
     .govuk-table__header {

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

@@ -6,7 +6,7 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-tag.govuk-tag {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
     background: none;
     border: 2px solid govuk-colour("black");
   }