govuk_publishing_components 67.1.0 → 68.1.0

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");
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -1,6 +1,6 @@
 .gem-c-translation-nav {
   margin-bottom: govuk-spacing(6);
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid govuk-functional-colour(border);
   @include govuk-text-colour;
   @include govuk-font(16);
 }
@@ -17,14 +17,14 @@
   padding-left: govuk-spacing(2);
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  border-right: 1px solid $govuk-border-colour;
+  border-right: 1px solid govuk-functional-colour(border);
   height: 16px;
 
   .direction-rtl & {
     direction: rtl;
     float: right;
     text-align: start;
-    border-left: 1px solid $govuk-border-colour;
+    border-left: 1px solid govuk-functional-colour(border);
     border-right: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss

@@ -18,16 +18,16 @@
 }
 
 .gem-c-warning-text__text--highlight {
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
 }
 
 @include govuk-media-query($media-type: print) {
   .gem-c-warning-text * {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 
   .govuk-warning-text__icon {
     background: none;
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
   }
 }

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

@@ -39,14 +39,14 @@
         width: $thumbnail-width;
         height: 140px;
         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);
+        box-shadow: 0 2px 2px govuk-colour("black", $variant: "tint-50"), 0 0 0 5px govuk-functional-colour("border");
 
         @include high-contrast-outline;
       }
 
       svg {
-        fill: govuk-colour("mid-grey");
-        stroke: govuk-colour("mid-grey");
+        fill: govuk-colour("black", $variant: "tint-50");
+        stroke: govuk-colour("black", $variant: "tint-50");
       }
 
       @include govuk-media-query($media-type: print) {
@@ -127,7 +127,7 @@
         a,
         a:link,
         a:link:visited {
-          color: $govuk-print-text-colour !important;
+          color: govuk-functional-colour(print-text) !important;
 
           &::after {
             display: block;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

@@ -10,13 +10,13 @@
 .gem-c-govspeak {
   .call-to-action {
     margin: 0 0 govuk-spacing(4) 0;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     padding: govuk-spacing(6);
     padding-bottom: govuk-spacing(2);
 
     @include govuk-media-query($media-type: print) {
       background: none;
-      border: 1pt solid $govuk-border-colour;
+      border: 1pt solid govuk-functional-colour(border);
       padding: govuk-spacing(3);
       margin: govuk-spacing(3) 0;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss

@@ -12,7 +12,7 @@
   // .address is used by the `$A` markdown pattern
   .address,
   .contact {
-    border-left: 1px solid govuk-colour("mid-grey");
+    border-left: 1px solid govuk-functional-colour("border");
     padding-left: govuk-spacing(3);
     margin: 0 0 govuk-spacing(6) 0;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss

@@ -8,7 +8,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .example {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss

@@ -14,7 +14,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .footnotes {
-    border-top: 1px solid govuk-colour("mid-grey");
+    border-top: 1px solid govuk-functional-colour("border");
     margin: 0 0 govuk-spacing(4) 0;
     padding-top: govuk-spacing(4);
     overflow-wrap: break-word;
@@ -28,12 +28,12 @@
     }
 
     li:target {
-      background: govuk-colour("light-grey");
-      border-bottom: solid 3px $govuk-border-colour;
+      background: govuk-colour("black", $variant: "tint-95");
+      border-bottom: solid 3px govuk-functional-colour(border);
     }
 
     @include govuk-media-query($media-type: print) {
-      border-top: 1px solid $govuk-text-colour;
+      border-top: 1px solid govuk-functional-colour(text);
 
       a[role="doc-backlink"] {
         display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -48,7 +48,7 @@ $highlight-answer-color: govuk-colour("white");
 
       &,
       & * {
-        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/govspeak/_images.scss

@@ -32,7 +32,7 @@
 
     figcaption p {
       margin: govuk-spacing(2) 0 0 0;
-      color: $govuk-secondary-text-colour;
+      color: govuk-functional-colour(secondary-text);
       @include govuk-font(19);
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -9,7 +9,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .info-notice {
-    border-left: 10px solid govuk-colour("mid-grey");
+    border-left: 10px solid govuk-functional-colour("border");
     padding: govuk-spacing(4) 0 0.1234px govuk-spacing(4); // non-zero padding on bottom keeps margin of last element inside parent, simulating padding
     margin: 0 0 govuk-spacing(4) 0;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss

@@ -35,8 +35,8 @@
   position: relative;
   padding: govuk-spacing(6);
   padding-bottom: govuk-spacing(8);
-  background: govuk-colour("light-grey");
-  border: solid 2px $govuk-border-colour;
+  background: govuk-colour("black", $variant: "tint-95");
+  border: solid 2px govuk-functional-colour(border);
 }
 
 .gem-c-govspeak__youtube-placeholder-text {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss

@@ -3,7 +3,7 @@
 .gem-c-govspeak {
   .place {
     margin: 0 0 govuk-spacing(4) 0;
-    border-bottom: solid 1px govuk-colour("mid-grey");
+    border-bottom: solid 1px govuk-functional-colour("border");
     padding-bottom: 1.5em;
 
     .address {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -25,7 +25,7 @@
     td {
       vertical-align: top;
       padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-      border-bottom: 1px solid govuk-colour("mid-grey");
+      border-bottom: 1px solid govuk-functional-colour("border");
 
       &:last-child {
         padding: govuk-spacing(2) 0 govuk-spacing(2) 0;
@@ -34,7 +34,7 @@
 
     th {
       text-align: left;
-      color: $govuk-text-colour;
+      color: govuk-functional-colour(text);
       @include govuk-font($size: 19, $weight: bold);
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -94,10 +94,10 @@
   }
 
   @include govuk-media-query($media-type: print) {
-    color: $govuk-print-text-colour;
+    color: govuk-functional-colour(print-text);
 
     a:link {
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,7 +34,7 @@
 
       &::before {
         background-color: govuk-colour("white");
-        color: $govuk-print-text-colour;
+        color: govuk-functional-colour(print-text);
       }
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -19,3 +19,11 @@
     border-color: #16eeee;
   }
 }
+
+// This can be removed once the organisation is added to govuk-frontend
+.brand--department-for-business-innovation-science-trade {
+  &.brand__border-color,
+  .brand__border-color {
+    border-color: #ff4328;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_colours.scss

@@ -1,14 +1,12 @@
-$gem-secondary-button-colour: #00823b;
-$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
+$gem-secondary-button-colour: govuk-colour("green", $variant: "shade-25");
+$gem-secondary-button-hover-colour: govuk-colour("green", $variant: "shade-50");
 $gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey");
+$gem-secondary-button-hover-background-colour: govuk-colour("black", $variant: "tint-95");
 
-$gem-quiet-button-colour: govuk-colour("dark-grey");
-$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
+$gem-quiet-button-colour: govuk-functional-colour("secondary-text");
+$gem-quiet-button-hover-colour: govuk-colour("black");
+$gem-quiet-button-hover-background-colour: govuk-colour("black", $variant: "tint-80");
 
-// Brand refresh
-$govuk-blue-tint-95: govuk-tint($govuk-brand-colour, 95%);
-$govuk-blue-tint-80: govuk-tint(govuk-colour("blue"), 80%);
-$govuk-blue-tint-50: govuk-tint(govuk-colour("blue"), 50%);
-
-$govuk-rebrand-template-background-colour: $govuk-blue-tint-95;
+$govuk-blue-tint-95: govuk-colour("blue", $variant: "tint-95");
+$govuk-blue-tint-80: govuk-colour("blue", $variant: "tint-80");
+$govuk-blue-tint-50: govuk-colour("blue", $variant: "tint-50");

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -63,7 +63,7 @@
     }
 
     @include govuk-media-query($media-type: print) {
-      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
     }
   }
 
@@ -115,12 +115,12 @@
   hr {
     margin-top: govuk-spacing(6) - 1px;
     margin-bottom: govuk-spacing(6);
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid govuk-functional-colour(border);
   }
 
   code {
     padding: 0 5px;
     color: #d13118;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_link.scss

@@ -2,16 +2,16 @@
   @include govuk-font(19);
 
   &:link {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   &:visited,
   &:hover,
   &:active {
-    color: darken($govuk-error-colour, 5%);
+    color: govuk-colour("red", $variant: "shade-25");
   }
 
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/lib/_print_support.scss

@@ -57,7 +57,7 @@
     &,
     &:link,
     &:visited {
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
 
     &::after {
@@ -65,7 +65,7 @@
       margin: 1mm auto;
       font-size: 12pt;
       font-weight: normal;
-      color: $govuk-print-text-colour !important;
+      color: govuk-functional-colour(print-text) !important;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/settings/_custom-properties.scss

@@ -0,0 +1,9 @@
+// Default the `govuk-output-custom-properties` flag to false to prevent custom properties
+// being output multiple times.
+// Entry points such as `all-components.scss` and `specific-components` override this
+// value when they need to include custom properties (for example, the component guide
+// or application stylesheets where there is only a single stylesheet).
+// Direct imports of base (e.g. secondary stylesheets) keep the default value of `false`,
+// rather than using the GOV.UK Frontend default of `true`.
+
+$govuk-output-custom-properties: false !default;

data/app/assets/stylesheets/govuk_publishing_components/settings/_index.scss

@@ -1,4 +1,3 @@
 @import "app-font-url";
 @import "app-image-url";
-@import "colours";
-@import "typography";
+@import "custom-properties";

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

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

data/app/views/govuk_publishing_components/components/_glance_metric.html.erb

@@ -30,6 +30,6 @@
         <% end %>
     <% end %>
     </span>
-    <p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
+    <p class="gem-c-glance-metric__context govuk-body-s"><%= context %></p>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/_layout_for_admin.html.erb

@@ -8,7 +8,7 @@
 %>
 
 <!DOCTYPE html>
-<html lang="en" class="govuk-template govuk-template--rebranded">
+<html lang="en" class="govuk-template">
   <head>
     <meta charset="utf-8">
     <title><%= browser_title %> - GOV.UK <%= product_name %></title>

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -32,7 +32,7 @@
   body_css_classes << body_classes if body_classes
 -%>
 <!DOCTYPE html>
-<html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
+<html class="govuk-template" lang="<%= html_lang %>">
   <head>
     <meta charset="utf-8">
     <%= tag.title title, lang: title_lang %>

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -6,50 +6,28 @@
   navigation_items ||= []
   product_name ||= nil
   remove_bottom_border ||= false
-  deprecated_navigation ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border || navigation_items
-  component_helper.add_data_attribute({ module: "govuk-header" })
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>
-  <% if !deprecated_navigation %>
-    <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
-      <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-        environment:,
-        logo_link:,
-        product_name:,
-        signout_link:,
-      } %>
-    </div>
-    <% if navigation_items.any? %>
-      <%= render "govuk_publishing_components/components/service_navigation", {
-        navigation_items:,
-        navigation_aria_label:,
-        full_width:,
-      } %>
-    <% end %>
-  <% else %>
-    <div class="govuk-header__container <%= width_class %>">
-      <div class="govuk-grid-row">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-            environment:,
-            logo_link:,
-            product_name:,
-            deprecated_navigation: true,
-          } %>
-        </div>
-        <% if navigation_items.any? %>
-          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
-          </div>
-        <% end %>
-      </div>
-    </div>
+  <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
+    <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+      environment:,
+      logo_link:,
+      product_name:,
+      signout_link:,
+    } %>
+  </div>
+  <% if navigation_items.any? %>
+    <%= render "govuk_publishing_components/components/service_navigation", {
+      navigation_items:,
+      navigation_aria_label:,
+      full_width:,
+    } %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -30,7 +30,7 @@
   header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
   header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--homepage" if homepage
 
-  header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
+  header_link_classes = %w(govuk-header__homepage-link)
 
   dropdown_menu_classes = %w(gem-c-layout-super-navigation-header__navigation-dropdown-menu)
 

data/app/views/govuk_publishing_components/components/_tag.html.erb

@@ -8,7 +8,7 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-tag gem-c-tag")
 
-  colours = %w[grey green turquoise blue light-blue purple pink red orange yellow]
+  colours = %w[grey green teal blue purple magenta red orange yellow]
   colour ||= nil
   component_helper.add_class("govuk-tag--#{colour}") if colours.include?(colour)
 %>

data/app/views/govuk_publishing_components/components/docs/layout_header.yml

@@ -58,21 +58,6 @@ examples:
         href: "item-4"
       - text: Logout
         href: "item-5"
-  with_deprecated_navigation:
-    description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
-    data:
-      environment: production
-      deprecated_navigation: true
-      navigation_items:
-      - text: Mainstream browse
-        href: "item-1"
-        active: true
-      - text: Step by steps
-        href: "item-2"
-      - text: Jonathan Doe
-        href: "item-3"
-      - text: Logout
-        href: "item-4"
   with_product_name_and_navigation:
     data:
       product_name: Component Guide 999.9.9

data/app/views/govuk_publishing_components/components/docs/tag.yml

@@ -23,26 +23,22 @@ examples:
     data:
       text: Hello world!
       colour: green
-  turquoise:
+  teal:
     data:
       text: Hello world!
-      colour: turquoise
+      colour: teal
   blue:
     data:
       text: Hello world!
       colour: blue
-  light_blue:
-    data:
-      text: Hello world!
-      colour: light-blue
   purple:
     data:
       text: Hello world!
       colour: purple
-  pink:
+  magenta:
     data:
       text: Hello world!
-      colour: pink
+      colour: magenta
   red:
     data:
       text: Hello world!