govuk_publishing_components 67.1.0 → 68.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a12344674cf0cfd1049d50b15532e6d0f01031c754ac5d1331621917a2ccd695
-  data.tar.gz: 16356b2c3df1aefc42d7eeb114c0fb6180c102e680c5f271b8cb955caf51f8da
+  metadata.gz: 4043c16d81a4d408586ba023e10b20c95351be88e3149f3068f768265eee4431
+  data.tar.gz: df3b994d054d385990f6cdb7fe23676d35f15ac398cb5c7c9ef7d840f15930ee
 SHA512:
-  metadata.gz: c84332e25080f8ca2998712a619160a5045a8bc15104f2c5f4373f9b1cd51fea0b092a2a5587f06e538a6d32d7f6f7e551363293feb806fa86f32c7713e31811
-  data.tar.gz: 5917c52f8b7ceb1ab7ba69a4fae8782624cac4e18027e661fe795dc7bd4662563a028a9dd1d82a0b940ccfb1e66c1124a952991e6cb5050d0386559cdf432ca9
+  metadata.gz: 908961ea90462179429522aefc6224a35786c5dd630de3a289e9ca952a216d5bd9556b65871ab4f81af074a037af660dc2760eb93558ca2a6a538ac8a1a633a6
+  data.tar.gz: 3c22900fb4473fcbc267f3ad9a8fe8aab5fe645c9ddb61b835eab2652f6d2492341a992371461f3066599c6a748f0f9c1a3914b19c3c8b281b7218823ddd46c6

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -1,6 +1,6 @@
 // Pre-compile image and font assets from here and govuk-frontend
 //= link_tree ../images
-//= link_tree ../../../node_modules/govuk-frontend/dist/govuk/assets/rebrand/images
+//= link_tree ../../../node_modules/govuk-frontend/dist/govuk/assets/images
 //= link_tree ../../../node_modules/govuk-frontend/dist/govuk/assets/fonts
 
 // Create asset files of each of the files in these directory

data/app/assets/javascripts/govuk_publishing_components/lib/filter-list.js

@@ -3,13 +3,24 @@
 
   function FilterList (module) {
     this.module = module
-    this.items = this.module.querySelectorAll('[data-filter-item]')
+    this.items = document.querySelectorAll('[data-filter-item]')
     this.labelText = this.module.getAttribute('data-filter-label') || 'Filter list'
+    this.resultsFound = this.items.length
+    this.resultsId = 'filter-results-count'
+
+    window.GOVUK.vars = window.GOVUK.vars || {}
   }
 
   FilterList.prototype.init = function () {
-    if (this.items.length) {
+    if (window.GOVUK.vars.filterStarted) {
+      return
+    }
+
+    if (this.resultsFound) {
       this.appendFilterInput()
+      this.resultsElement = document.getElementById(this.resultsId)
+      this.updateResultsCount()
+      window.GOVUK.vars.filterStarted = true
     }
   }
 
@@ -23,13 +34,19 @@
     formLabel.textContent = this.labelText
 
     const formInput = document.createElement('input')
-    formInput.classList.add('gem-c-input', 'govuk-input')
+    formInput.classList.add('gem-c-input', 'govuk-input', 'govuk-!-margin-bottom-1')
     formInput.id = 'filterInput'
     formInput.name = 'name'
     formInput.spellcheck = false
     formInput.type = 'text'
+    formInput.setAttribute('aria-describedby', this.resultsId)
+
+    const results = document.createElement('div')
+    results.classList.add('govuk-hint')
+    results.id = this.resultsId
+    results.setAttribute('aria-live', 'polite')
 
-    form.append(formLabel, formInput)
+    form.append(formLabel, formInput, results)
 
     this.module.prepend(form)
     const input = form.querySelector('.govuk-input')
@@ -50,6 +67,14 @@
         item.classList.add('govuk-!-display-none')
       }
     }
+    this.updateResultsCount()
+  }
+
+  FilterList.prototype.updateResultsCount = function () {
+    const count = Array.from(this.items).filter((item) => !item.classList.contains('govuk-!-display-none')).length
+    const text = count === 1 ? `${count} result found` : `${count === 0 ? 'No' : count} results found`
+
+    this.resultsElement.innerHTML = count !== this.resultsFound ? text : ''
   }
 
   Modules.FilterList = FilterList

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

@@ -12,7 +12,7 @@ $gem-guide-border-width: 1px;
 }
 
 .component-violation {
-  border: 3px solid $govuk-error-colour;
+  border: 3px solid govuk-functional-colour(error);
   margin: 0 0 govuk-spacing(6);
   padding: govuk-spacing(6);
   @include govuk-text-colour;
@@ -24,7 +24,7 @@ $gem-guide-border-width: 1px;
 
   .component-violation__link {
     display: block;
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
     margin: govuk-spacing(3) 0;
     @include govuk-font($size: 19, $weight: bold);
   }
@@ -37,14 +37,14 @@ $gem-guide-border-width: 1px;
   font-family: Consolas, Monaco, "Andale Mono", monospace;
   font-size: 16px;
   line-height: 1.5;
-  border: $gem-guide-border-width solid $govuk-border-colour;
+  border: $gem-guide-border-width solid govuk-functional-colour(border);
 
   &[contenteditable]:hover {
     cursor: text;
   }
 
   &[contenteditable]:focus {
-    outline: 3px solid $govuk-focus-colour;
+    outline: 3px solid govuk-functional-colour(focus);
   }
 
   > pre {
@@ -69,7 +69,7 @@ $gem-guide-border-width: 1px;
 
 .component-guide-preview {
   padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
-  border: $gem-guide-border-width solid $govuk-border-colour;
+  border: $gem-guide-border-width solid govuk-functional-colour(border);
   position: relative;
   margin-bottom: govuk-spacing(8);
 
@@ -222,12 +222,12 @@ html {
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 
-$code-00: color.scale(govuk-colour("light-grey"), $lightness: 50%); // Default Background
+$code-00: color.scale(govuk-colour("black", $variant: "tint-95"), $lightness: 50%); // Default Background
 $code-01: #f5f5f5; // Lighter Background (Unused)
 $code-02: #bfc1c3; // Selection Background
-$code-03: color.adjust($govuk-secondary-text-colour, $lightness: -2%); // Comments, Invisibles, Line Highlighting
+$code-03: govuk-functional-colour(secondary-text); // Comments, Invisibles, Line Highlighting
 $code-04: #e8e8e8; // Dark Foreground (Unused)
-$code-05: $govuk-text-colour; // Default Foreground, Caret, Delimiters, Operators
+$code-05: govuk-functional-colour(text); // Default Foreground, Caret, Delimiters, Operators
 $code-06: #ffffff; // Light Foreground (Unused)
 $code-07: #ffffff; // Light Background (Unused)
 
@@ -491,8 +491,8 @@ $code-delete-bg: #fadddd;
   border: 0;
   margin-left: -(govuk-spacing(3));
   margin-right: -(govuk-spacing(3));
-  border-top: solid 1px $govuk-border-colour;
-  border-bottom: solid 1px $govuk-border-colour;
+  border-top: solid 1px govuk-functional-colour(border);
+  border-bottom: solid 1px govuk-functional-colour(border);
 
   @include govuk-media-query($from: tablet) {
     margin-left: -(govuk-spacing(6));
@@ -543,8 +543,8 @@ $code-delete-bg: #fadddd;
         bottom: -1px;
         width: calc((100cqw - 960px) / 2);
         box-sizing: border-box;
-        border-top: solid 1px $govuk-border-colour;
-        border-bottom: solid 1px $govuk-border-colour;
+        border-top: solid 1px govuk-functional-colour(border);
+        border-bottom: solid 1px govuk-functional-colour(border);
       }
 
       &::before {
@@ -557,9 +557,3 @@ $code-delete-bg: #fadddd;
     }
   }
 }
-
-// Note: This is a temporary override to ensure the background color on component preview
-// pages remains white, this can be removed once the --rebrand flag is removed from govuk-frontend
-.govuk-template--rebranded {
-  background: #ffffff;
-}

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -1,3 +1,5 @@
+$govuk-output-custom-properties: true;
+
 @import "base";
 
 @import "govuk/core/index";

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

@@ -23,7 +23,11 @@
   width: 28px;
 
   .gem-c-action-link__icon__circle {
-    fill: #eeefef;
+    fill: $govuk-blue-tint-80;
+
+    .gem-c-action-link--inverse & {
+      fill: govuk-colour("white");
+    }
 
     @media (forced-colors: active) {
       fill: LinkText;
@@ -83,7 +87,7 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-action-link {
     * {
-      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+      color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
     }
 
     .gem-c-action-link__icon {

data/app/assets/stylesheets/govuk_publishing_components/components/_app-promo-banner.scss

@@ -1,8 +1,8 @@
 .gem-c-app-promo-banner {
   display: none;
   padding: govuk-spacing(5) 0;
-  border-top: 4px solid $govuk-brand-colour;
-  background-color: $govuk-rebrand-template-background-colour;
+  border-top: 4px solid govuk-functional-colour(brand);
+  background-color: $govuk-blue-tint-95;
   @include govuk-text-colour;
 }
 
@@ -46,7 +46,7 @@
 .gem-c-app-promo-banner__close-button {
   border: 0;
   padding: 0;
-  color: govuk-tint(govuk-colour("black"), 25%);
+  color: govuk-functional-colour("secondary-text");
   background: none;
   flex: 0 0 24px;
   height: 24px;

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

@@ -6,7 +6,7 @@
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-attachment-link .govuk-link {
-    color: $govuk-print-text-colour !important;
+    color: govuk-functional-colour(print-text) !important;
 
     &::after {
       font-size: inherit;

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

@@ -23,9 +23,9 @@ $thumbnail-border-width: 5px;
   max-width: calc($thumbnail-width / 1.5);
   height: calc($thumbnail-height / 1.5);
   background: govuk-colour("white");
-  box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4), 0 0 0 5px color.adjust(govuk-colour("black"), $alpha: -0.9);
-  fill: govuk-colour("mid-grey");
-  stroke: govuk-colour("mid-grey");
+  box-shadow: 0 2px 2px govuk-colour("black", $variant: "tint-50"), 0 0 0 5px govuk-functional-colour("border");
+  fill: govuk-colour("black", $variant: "tint-50");
+  stroke: govuk-colour("black", $variant: "tint-50");
 
   @include govuk-media-query($from: tablet) {
     max-width: $thumbnail-width;
@@ -56,7 +56,7 @@ $thumbnail-border-width: 5px;
 
 .gem-c-attachment__metadata {
   margin: 0 0 govuk-spacing(3);
-  color: $govuk-secondary-text-colour;
+  color: govuk-functional-colour(secondary-text);
   @include govuk-font($size: 19);
   @include govuk-text-break-word;
 
@@ -92,7 +92,7 @@ $thumbnail-border-width: 5px;
   }
 
   .gem-c-attachment__metadata {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 
   .gem-c-attachment__metadata,

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

@@ -1,7 +1,7 @@
 @import "govuk/components/breadcrumbs/breadcrumbs";
 
 .gem-c-breadcrumbs--border-bottom {
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
   padding-bottom: govuk-spacing(1);
 
   &.govuk-breadcrumbs--collapse-on-mobile {

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

@@ -92,7 +92,7 @@
   &:hover {
     border-color: $gem-quiet-button-hover-colour;
     color: $gem-quiet-button-hover-colour;
-    background-color: $gem-secondary-button-hover-background-colour;
+    background-color: $gem-quiet-button-hover-background-colour;
     text-decoration: none;
   }
 
@@ -107,7 +107,7 @@
     display: inline-block;
     padding: govuk-spacing(1);
     border: solid 1px govuk-colour("black");
-    color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+    color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
     text-decoration: none;
 
     &::after {

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

@@ -35,7 +35,7 @@
 }
 
 .gem-c-cards__heading--underline + .gem-c-cards__list {
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
 
   .gem-c-cards__list-item {
     &:first-child {
@@ -144,7 +144,7 @@
 }
 
 .gem-c-cards__list-item {
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
   padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
 }
 
@@ -180,8 +180,8 @@
     $dimension: 7px;
     $width: 3px;
 
-    border-right: $width solid $govuk-brand-colour;
-    border-top: $width solid $govuk-brand-colour;
+    border-right: $width solid govuk-functional-colour(brand);
+    border-top: $width solid govuk-functional-colour(brand);
     content: "";
     display: block;
     height: $dimension;
@@ -195,13 +195,13 @@
 
   &:hover {
     &::before {
-      border-color: $govuk-link-hover-colour;
+      border-color: govuk-functional-colour(link-hover);
     }
   }
 
   &:focus {
     &::before {
-      border-color: $govuk-focus-text-colour;
+      border-color: govuk-functional-colour(focus-text);
     }
   }
 }

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

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   border-left-style: solid;
   border-left-width: 4px;
-  border-color: govuk-colour("mid-grey");
+  border-color: govuk-functional-colour("border");
   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/_contents-list-with-body.scss

@@ -53,7 +53,7 @@
 }
 
 .gem-c-contents-list-with-body__link-wrapper.gem-c-contents-list-with-body__sticky-element--stuck-to-window {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
   bottom: -1px; // 'Fix' for anomalous 1px margin which sporadically appears below this element.
   left: 0;
   margin: 0;

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

@@ -35,13 +35,13 @@
 
 .gem-c-contextual-guidance__guidance {
   padding-left: govuk-spacing(3);
-  border-left: 4px solid $govuk-focus-colour;
+  border-left: 4px solid govuk-functional-colour(focus);
   background: govuk-colour("white");
 
   @include govuk-media-query($from: tablet) {
     padding-top: govuk-spacing(5);
     padding-left: 0;
-    border-top: 5px solid $govuk-focus-colour;
+    border-top: 5px solid govuk-functional-colour(focus);
     border-left: 0;
   }
 }

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

@@ -1,11 +1,11 @@
 .gem-c-contextual-sidebar__related-links {
-  border-top: 2px solid $govuk-brand-colour;
+  border-top: 2px solid govuk-functional-colour(brand);
 }
 
 .gem-c-contextual-sidebar__heading {
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 
 .gem-c-contextual-sidebar__list {
@@ -24,9 +24,9 @@
 }
 
 .gem-c-contextual-sidebar__cta {
-  border-top: 2px solid $govuk-brand-colour;
+  border-top: 2px solid govuk-functional-colour(brand);
   margin-bottom: govuk-spacing(6);
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
   display: block;
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss

@@ -8,7 +8,7 @@ $toggle-border-height: 3px;
 .gem-c-rebranded-one-login-header {
   color: govuk-colour("white");
   position: relative;
-  background: $govuk-brand-colour;
+  background: govuk-functional-colour(brand);
   @include govuk-font($size: 16);
 }
 
@@ -66,7 +66,7 @@ $toggle-border-height: 3px;
     &:focus {
       // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
       // This is to stop the logo getting cut off by the box shadow when focused on above a product name
-      box-shadow: 0 0 $govuk-focus-colour;
+      box-shadow: 0 0 govuk-functional-colour(focus);
     }
   }
 
@@ -122,7 +122,7 @@ $toggle-border-height: 3px;
   }
 
   &:not(:focus) {
-    background-color: $govuk-brand-colour;
+    background-color: govuk-functional-colour(brand);
   }
 }
 
@@ -177,7 +177,7 @@ $toggle-border-height: 3px;
 
         &::after {
           display: block;
-          background-color: $govuk-focus-text-colour;
+          background-color: govuk-functional-colour(focus-text);
         }
       }
     }
@@ -188,10 +188,10 @@ $toggle-border-height: 3px;
     &:link:visited,
     &:visited:link,
     &:visited:visited {
-      color: $govuk-brand-colour;
+      color: govuk-functional-colour(brand);
 
       &:focus {
-        color: $govuk-focus-text-colour;
+        color: govuk-functional-colour(focus-text);
       }
     }
   }
@@ -222,7 +222,7 @@ $toggle-border-height: 3px;
 
   @include govuk-media-query($until: tablet) {
     background-color: govuk-colour("white");
-    color: $govuk-brand-colour;
+    color: govuk-functional-colour(brand);
     margin-right: -(govuk-spacing(3));
     margin-left: -(govuk-spacing(3));
     padding: 0 govuk-spacing(3);
@@ -259,7 +259,7 @@ $toggle-border-height: 3px;
     padding: govuk-spacing(3) 0;
 
     &:not(:last-child) {
-      border-bottom: 1px solid govuk-colour("mid-grey");
+      border-bottom: 1px solid govuk-functional-colour("border");
     }
   }
 }
@@ -289,8 +289,8 @@ $toggle-border-height: 3px;
   @include govuk-font($size: 16, $weight: bold);
 
   @mixin toggle-button-focus {
-    color: $govuk-focus-text-colour;
-    background-color: $govuk-focus-colour;
+    color: govuk-functional-colour(focus-text);
+    background-color: govuk-functional-colour(focus);
     outline: 3px solid transparent;
   }
 
@@ -313,7 +313,7 @@ $toggle-border-height: 3px;
 
   &.gem-c-rebranded-cross-service-header__toggle--open {
     background-color: govuk-colour("white");
-    color: $govuk-brand-colour;
+    color: govuk-functional-colour(brand);
   }
 }
 
@@ -364,15 +364,15 @@ $toggle-border-height: 3px;
 
     .gem-c-rebranded-cross-service-header__toggle--open &,
     .gem-c-rebranded-cross-service-header__toggle--open:hover & {
-      background-color: $govuk-brand-colour;
+      background-color: govuk-functional-colour(brand);
     }
 
     .gem-c-rebranded-cross-service-header__toggle:focus &,
     .gem-c-rebranded-cross-service-header__toggle:focus-visible & {
-      background-color: $govuk-focus-text-colour;
+      background-color: govuk-functional-colour(focus-text);
 
       &:hover {
-        background-color: $govuk-focus-text-colour;
+        background-color: govuk-functional-colour(focus-text);
       }
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss

@@ -1,5 +1,5 @@
 .gem-c-devolved-nations {
-  background: govuk-colour("light-grey");
+  background: govuk-colour("black", $variant: "tint-95");
   margin-bottom: govuk-spacing(3);
   padding: govuk-spacing(3);
 
@@ -11,11 +11,11 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-devolved-nations {
-    border: 2pt solid $govuk-print-text-colour;
+    border: 2pt solid govuk-functional-colour(print-text);
     margin: 0 0 5mm;
 
     * {
-      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+      color: govuk-functional-colour(print-text) !important; // stylelint-disable-line declaration-no-important
     }
 
     .govuk-list li {

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

@@ -8,7 +8,7 @@
 .gem-c-document-list__item {
   margin-top: govuk-spacing(5);
   padding-top: govuk-spacing(2);
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
   list-style: none;
 
   &:first-child {
@@ -50,7 +50,7 @@
 }
 
 .gem-c-document-list__item-context {
-  color: govuk-colour("dark-grey");
+  color: govuk-functional-colour("secondary-text");
 }
 
 .gem-c-document-list__item-description {
@@ -84,7 +84,7 @@
 
   & { // stylelint-disable-line no-duplicate-selectors
     // overriding govuk-text-colour mixin
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   .direction-rtl & {
@@ -94,7 +94,7 @@
 }
 
 .gem-c-document-list__item--highlight {
-  border: 1px solid govuk-colour("mid-grey");
+  border: 1px solid govuk-functional-colour("border");
   padding: govuk-spacing(6);
   margin-bottom: govuk-spacing(6);
 
@@ -137,7 +137,7 @@
     left: 0;
     width: govuk-spacing(3);
     overflow: hidden;
-    border-top: solid 1px $govuk-text-colour;
+    border-top: solid 1px govuk-functional-colour(text);
     transform: translate(0, 0.5em);
   }
 
@@ -172,7 +172,7 @@
     break-inside: avoid;
 
     * {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
   }
 

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

@@ -1,5 +1,5 @@
 .gem-c-emergency-banner {
-  background-color: govuk-colour("mid-grey");
+  background-color: govuk-colour("black", $variant: "tint-80");
   color: govuk-colour("white");
   margin-top: 2px;
   padding: govuk-spacing(3) 0;
@@ -52,14 +52,11 @@
 }
 
 .gem-c-emergency-banner--national-emergency {
-  // Not using govuk-colour("red") aka #d4351c as that's a slightly different red.
-  background-color: #b10e1e;
+  background-color: govuk-colour("red", $variant: "shade-25");
 }
 
 .gem-c-emergency-banner--local-emergency {
-  // Not using govuk-colour("turquoise") for background colour as
-  // the contrast was too low with white text
-  background-color: #00847d;
+  background-color: govuk-colour("teal", $variant: "shade-25");
 }
 
 @include govuk-media-query($media-type: print) {

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

@@ -1,7 +1,7 @@
 .gem-c-error-alert {
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
   padding: govuk-spacing(3);
-  border: $govuk-border-width-narrow solid $govuk-error-colour;
+  border: $govuk-border-width-narrow solid govuk-functional-colour(error);
   @include govuk-responsive-margin(8, "bottom");
 
   @include govuk-media-query($from: tablet) {
@@ -32,5 +32,5 @@
 }
 
 .gem-c-error-alert:focus {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-functional-colour(focus);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss

@@ -1,6 +1,6 @@
 @import "govuk/components/error-summary/error-summary";
 
 .gem-c-error-summary__list-item {
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
   @include govuk-font($size: 19, $weight: bold);
 }