govuk_publishing_components 67.0.1 → 68.0.0

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

@@ -67,7 +67,7 @@
       // and make all of thead and tfoot stand out
       thead,
       tfoot {
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
       }
 
       thead th,
@@ -113,7 +113,7 @@
       // total and subtotal rows
       tr.subtotal > *,
       tr.total > * {
-        border-top: 3px solid govuk-colour("mid-grey");
+        border-top: 3px solid govuk-functional-colour("border");
       }
 
       tr.total > *,
@@ -124,7 +124,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");
+        background-color: govuk-colour("black", $variant: "tint-95");
       }
     }
     // stylelint-enable selector-no-qualifying-type

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

@@ -43,8 +43,8 @@
   // Override margins and colors
   .gem-c-heading {
     margin: 0 !important;
-    color: $govuk-print-text-colour !important;
-    border-color: $govuk-print-text-colour !important;
+    color: govuk-functional-colour(print-text) !important;
+    border-color: govuk-functional-colour(print-text) !important;
     padding: 0;
   }
 
@@ -55,7 +55,7 @@
   .gem-c-heading--inverse {
     .gem-c-heading__context,
     .gem-c-heading__text {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
   }
 }

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

@@ -36,7 +36,7 @@
   height: auto;
   width: 100%;
   border: 0;
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
 }
 
 .gem-c-image-card__title {
@@ -74,7 +74,7 @@
 .gem-c-image-card__metadata {
   font-size: govuk-px-to-rem(16px);
   margin: 0 0 calc(govuk-spacing(3) / 2);
-  color: govuk-colour("dark-grey");
+  color: govuk-functional-colour("secondary-text");
   @include govuk-font($size: false);
 
   @include govuk-media-query($from: tablet) {
@@ -101,7 +101,7 @@
   }
 
   .gem-c-image-card__list-item--text {
-    color: govuk-colour("dark-grey");
+    color: govuk-functional-colour("secondary-text");
   }
 
   .gem-c-image-card__list-item-link {

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

@@ -1,6 +1,6 @@
 .gem-c-intervention {
-  background-color: govuk-colour("light-grey");
-  border-left: 10px solid $govuk-success-colour;
+  background-color: govuk-colour("black", $variant: "tint-95");
+  border-left: 10px solid govuk-functional-colour(success);
   @include govuk-text-colour;
   @include govuk-responsive-padding(3);
   @include govuk-responsive-margin(6, "bottom");
@@ -41,7 +41,7 @@
   .gem-c-intervention {
     break-inside: avoid;
     background: none;
-    border-color: $govuk-print-text-colour;
+    border-color: govuk-functional-colour(print-text);
 
     .govuk-body {
       margin: 0;

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

@@ -45,11 +45,11 @@
     background: none;
     padding-left: 0;
     padding-right: 0;
-    border-bottom: 2pt solid $govuk-print-text-colour;
+    border-bottom: 2pt solid govuk-functional-colour(print-text);
 
     &,
     & * {
-      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
     }
   }
 }

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

@@ -21,7 +21,7 @@
     background: none;
     margin: 25mm 0 0;
     padding: 5mm 0 0;
-    border-top: 2pt solid $govuk-print-text-colour;
+    border-top: 2pt solid govuk-functional-colour(print-text);
 
     .govuk-width-container {
       margin: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -45,6 +45,6 @@ $current-indicator-width: 4px;
   @include govuk-font(19, $weight: "bold");
 
   &:not(:focus):hover {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 }

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

@@ -6,21 +6,6 @@
 }
 
 .gem-c-layout-header--search-left {
-  .gem-c-header__menu-button.govuk-header__menu-button {
-    margin-top: - govuk-spacing(7);
-    left: govuk-spacing(3);
-  }
-
-  .gem-c-header__nav-wrapper {
-    position: relative;
-    padding-left: 0;
-  }
-
-  .govuk-header__navigation--end {
-    padding-top: 0;
-    text-align: left;
-  }
-
   .gem-c-header__content {
     position: relative;
     width: 100%;
@@ -28,19 +13,9 @@
   }
 
   @include govuk-media-query($from: desktop) {
-    .govuk-header__navigation-item {
-      padding: 0 0 govuk-spacing(1) 0;
-    }
-
     .gem-c-header__logo {
       margin-top: 0;
     }
-
-    .gem-c-header__content.govuk-header__content {
-      @include govuk-grid-column(two-thirds);
-      padding-left: govuk-spacing(6);
-      padding-right: govuk-spacing(1);
-    }
   }
 }
 
@@ -48,6 +23,17 @@
   @include govuk-media-query($until: "tablet") {
     margin-bottom: govuk-spacing(3);
   }
+
+  &:has(.gem-c-layout-header__signout) {
+    @include govuk-media-query($from: desktop) {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .gem-c-header__logo {
+      width: 75%;
+    }
+  }
 }
 
 .gem-c-header__environment {
@@ -59,22 +45,30 @@
   display: flex;
   flex-wrap: wrap;
   row-gap: govuk-spacing(2);
+}
+
+.gem-c-layout-header__signout {
+  white-space: nowrap;
+  padding-bottom: 15px;
 
-  &:has(+ .gem-c-header__content) {
-    @include govuk-grid-column(three-quarters);
-    padding: govuk-spacing(3) 0 govuk-spacing(2);
+  @include govuk-media-query($from: desktop) {
+    padding: 22px 0 0;
   }
 }
 
-.gem-c-header__content.govuk-header__content {
-  width: auto;
+.gem-c-layout-header__signout-link {
+  @include govuk-link-style-inverse;
+
+  text-decoration: none;
 
-  @include govuk-media-query($from: mobile) {
-    @include govuk-responsive-padding(3, "bottom");
+  &:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-underline-offset: $govuk-link-underline-offset;
   }
 
-  @include govuk-media-query($from: desktop) {
-    float: right;
+  &:focus {
+    @include govuk-focused-text;
   }
 }
 
@@ -86,24 +80,9 @@
   }
 }
 
-.govuk-header__navigation-item--collapsed-menu-only {
-  @include govuk-media-query($from: desktop) {
-    display: none;
-  }
-}
-
-.govuk-header__menu-button.gem-c-header__menu-button {
-  top: govuk-spacing(4);
-  right: 0;
-}
-
-.gem-c-header__nav {
-  clear: both;
-}
-
 @include govuk-media-query($media-type: print) {
   .gem-c-layout-header .govuk-header__container {
-    border-color: $govuk-print-text-colour;
+    border-color: govuk-functional-colour(print-text);
 
     .govuk-grid-column-two-thirds {
       width: auto;
@@ -116,7 +95,7 @@
     }
 
     .gem-c-header__product-name {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
       background: none;
     }
   }

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

@@ -92,8 +92,8 @@ $search-icon-height: 20px;
 
 // stylelint-disable max-nesting-depth
 .gem-c-layout-super-navigation-header {
-  background: $govuk-brand-colour;
-  border-top: 1px solid $govuk-brand-colour;
+  background: govuk-functional-colour(brand);
+  border-top: 1px solid govuk-functional-colour(brand);
   margin-top: -1px;
   position: relative;
 
@@ -107,7 +107,7 @@ $search-icon-height: 20px;
   // the background color is set again on the nav container to ensure the menu buttons are still
   // visible when the text scale is increased
   // related issue: https://github.com/alphagov/govuk_publishing_components/issues/4208
-  background: $govuk-brand-colour;
+  background: govuk-functional-colour(brand);
 
   // add a transparent bottom border for forced-color modes
   @media (forced-colors: active) {
@@ -127,7 +127,7 @@ $search-icon-height: 20px;
   // do not wrap onto a new line when the screen width is 360px ($chevron-breakpoint)
   // govuk-frontend includes spacing to the right of the logo to offset it from the product name
   // as we do not include a product name in the super navigation menu, we can set the right margin to 0
-  .govuk-header__link--homepage {
+  .govuk-header__homepage-link {
     margin-right: 0;
   }
 }
@@ -187,10 +187,10 @@ $search-icon-height: 20px;
 
     &:focus {
       box-shadow: none;
-      color: $govuk-focus-text-colour;
+      color: govuk-functional-colour(focus-text);
 
       &::after {
-        background: $govuk-focus-text-colour;
+        background: govuk-functional-colour(focus-text);
       }
     }
   }
@@ -209,7 +209,7 @@ $search-icon-height: 20px;
 
   &:focus {
     .gem-c-layout-super-navigation-header__navigation-item-link-inner {
-      border-right-color: $govuk-focus-colour;
+      border-right-color: govuk-functional-colour(focus);
     }
   }
 }
@@ -293,7 +293,7 @@ $search-icon-height: 20px;
     }
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      border-right-color: $govuk-focus-colour;
+      border-right-color: govuk-functional-colour(focus);
 
       &::before {
         @include chevron(govuk-colour("black"), true);
@@ -368,7 +368,7 @@ $search-icon-height: 20px;
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
       color: govuk-colour("black");
-      border-right-color: $govuk-focus-colour;
+      border-right-color: govuk-functional-colour(focus);
 
       &::before {
         @include chevron(govuk-colour("black"), true);
@@ -378,19 +378,19 @@ $search-icon-height: 20px;
   }
 
   @include focus-not-focus-visible {
-    background: $govuk-rebrand-template-background-colour;
+    background: $govuk-blue-tint-95;
 
     &::after {
-      background-color: $govuk-link-colour;
+      background-color: govuk-functional-colour(link);
     }
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      color: $govuk-link-colour;
+      color: govuk-functional-colour(link);
       border-right-color: $button-pipe-colour;
 
       @include govuk-media-query($from: $chevron-breakpoint) {
         &::before {
-          @include chevron($govuk-link-colour, true);
+          @include chevron(govuk-functional-colour(link), true);
           @include prefixed-transform($rotate: 225deg, $translateY: 1px);
         }
       }
@@ -430,7 +430,7 @@ $search-icon-height: 20px;
   @include focus-and-focus-visible {
     z-index: 11;
     // these declarations override govuk-focused-text because the compiler prefers @include to be last
-    border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
+    border-color: govuk-functional-colour(focus) !important; // stylelint-disable-line declaration-no-important
     box-shadow: none !important; // stylelint-disable-line declaration-no-important
     @include govuk-focused-text;
 
@@ -475,7 +475,7 @@ $search-icon-height: 20px;
 
     @include focus-and-focus-visible {
       // these declarations override govuk-focused-text because the compiler prefers @include to be last
-      border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
+      border-color: govuk-functional-colour(focus) !important; // stylelint-disable-line declaration-no-important
       box-shadow: none !important; // stylelint-disable-line declaration-no-important
       @include govuk-focused-text;
 
@@ -493,8 +493,8 @@ $search-icon-height: 20px;
     }
 
     @include focus-not-focus-visible {
-      background: $govuk-rebrand-template-background-colour;
-      outline: 1px solid $govuk-rebrand-template-background-colour; // overlap the border of the nav menu so it won't appear when menu open
+      background: $govuk-blue-tint-95;
+      outline: 1px solid $govuk-blue-tint-95; // overlap the border of the nav menu so it won't appear when menu open
 
       color: govuk-colour("blue");
 
@@ -540,7 +540,7 @@ $search-icon-height: 20px;
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
   width: 100%;
   order: 1; // Ensure the dropdown menu appears after the super navigation buttons which have a default order of 0
-  background: $govuk-rebrand-template-background-colour;
+  background: $govuk-blue-tint-95;
   padding-top: govuk-spacing(6);
 
   @include govuk-media-query($from: "desktop") {
@@ -559,8 +559,8 @@ $search-icon-height: 20px;
     top: $navbar-height;
     bottom: 0;
     width: 100%;
-    background: $govuk-rebrand-template-background-colour;
-    box-shadow: 0 1px govuk-colour("mid-grey");
+    background: $govuk-blue-tint-95;
+    box-shadow: 0 1px govuk-colour("black", $variant: "tint-80");
   }
 }
 
@@ -604,7 +604,7 @@ $search-icon-height: 20px;
 // JS available - styling for the "services-and-information" group of links
 .gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
   @include govuk-media-query($until: "desktop") {
-    border-bottom: 1px solid govuk-colour("mid-grey");
+    border-bottom: 1px solid govuk-functional-colour("border");
   }
 
   @include govuk-media-query($from: "desktop") {
@@ -678,7 +678,7 @@ $search-icon-height: 20px;
 @include govuk-media-query($media-type: print) {
   .gem-c-layout-super-navigation-header {
     border-top: 0;
-    border-bottom: 2pt solid $govuk-print-text-colour;
+    border-bottom: 2pt solid govuk-functional-colour(print-text);
     margin: 0 0 5mm;
     background: transparent;
 
@@ -688,7 +688,7 @@ $search-icon-height: 20px;
     }
 
     * {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
 
     .govuk-width-container {

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss

@@ -13,6 +13,6 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-lead-paragraph {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 }

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

@@ -130,13 +130,13 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-metadata {
     break-inside: avoid;
-    color: $govuk-print-text-colour !important;
+    color: govuk-functional-colour(print-text) !important;
     background: none;
     margin-bottom: 5mm;
 
     a,
     a:visited {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss

@@ -32,7 +32,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
   border: 0;
 
   &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
   }
 
   @include govuk-font($size: 19);
@@ -47,7 +47,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
     max-width: calc($govuk-page-width * (2 / 3));
     height: auto;
     margin: $govuk-modal-margin auto;
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid govuk-functional-colour(input-border);
   }
 }
 
@@ -126,7 +126,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
     outline: none;
     box-shadow: none;
     color: govuk-colour("black");
-    background: $govuk-focus-colour;
+    background: govuk-functional-colour(focus);
     @include govuk-focused-text;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -2,7 +2,7 @@
   position: relative;
   padding: 0 0 govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
 
   @include govuk-media-query($from: desktop) {
     // Redefine scrollbars on desktop where these lists are scrollable
@@ -37,7 +37,7 @@
   text-align: left;
   padding: 0;
   cursor: pointer;
-  color: $govuk-link-colour;
+  color: govuk-functional-colour(link);
 
   &:hover {
     text-decoration: underline;
@@ -156,7 +156,7 @@
 
 .gem-c-option-select__selected-counter {
   margin-left: 44px;
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 16, $line-height: 1);
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -65,7 +65,7 @@
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:active {
@@ -77,7 +77,7 @@
     // Using `@include govuk-focused-text;` would obscure the text. Tweaked
     // spacing needed to prevent overlap of the text and the focus state's thick
     // black line.
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-colour, 0 8px $govuk-focus-text-colour;
+    box-shadow: 0 -2px govuk-functional-colour(focus), 0 4px govuk-functional-colour(focus), 0 8px govuk-functional-colour(focus-text);
     text-decoration: none;
   }
 }

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

@@ -3,7 +3,7 @@
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-pagination * {
-    color: $govuk-print-text-colour !important;
+    color: govuk-functional-colour(print-text) !important;
   }
 }
 // stylelint-enable declaration-no-important

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

@@ -3,7 +3,7 @@
 .gem-c-phase-banner--inverse {
   .govuk-phase-banner__content__tag {
     background: govuk-colour("white");
-    color: $govuk-brand-colour;
+    color: govuk-functional-colour(brand);
   }
 
   .govuk-phase-banner__text,
@@ -22,11 +22,11 @@
     &,
     & * {
       background: none !important;
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
 
     .govuk-tag {
-      border: 1pt solid $govuk-print-text-colour;
+      border: 1pt solid govuk-functional-colour(print-text);
     }
   }
 }

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

@@ -27,28 +27,28 @@ $gem-c-print-link-background-height: 18px;
   }
 
   &:hover {
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
   }
 }
 
 .gem-c-print-link__link {
-  box-shadow: inset 0 0 0 1px govuk-colour("dark-grey");
+  box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-25");
 
   &:focus {
     border: 0;
-    box-shadow: 0 $govuk-focus-width $govuk-text-colour;
+    box-shadow: 0 $govuk-focus-width govuk-functional-colour(text);
   }
 }
 
 .gem-c-print-link__button {
-  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;
   margin: govuk-spacing(0);
   @include govuk-font(16);
 
   &:focus {
-    background-color: $govuk-focus-colour;
+    background-color: govuk-functional-colour(focus);
     border-color: transparent;
     @include govuk-focused-text;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_published-dates.scss

@@ -40,7 +40,7 @@
 
 .gem-c-published-dates--history {
   padding-top: govuk-spacing(2);
-  border-top: 1px solid $govuk-border-colour;
+  border-top: 1px solid govuk-functional-colour(border);
 }
 
 .govuk-frontend-supported .gem-c-published-dates .js-hidden {

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

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

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

@@ -13,13 +13,13 @@
 
 .gem-c-reorderable-list__item {
   margin-bottom: govuk-spacing(3);
-  border: 1px solid $govuk-border-colour;
+  border: 1px solid govuk-functional-colour(border);
   padding: govuk-spacing(3);
 }
 
 .gem-c-reorderable-list__item--chosen {
-  background-color: govuk-colour("light-grey");
-  outline: 2px dotted $govuk-border-colour;
+  background-color: govuk-colour("black", $variant: "tint-95");
+  outline: 2px dotted govuk-functional-colour(border);
 }
 
 .gem-c-reorderable-list__item--drag {