govuk_tech_docs 5.2.2 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss

@@ -16,21 +16,16 @@
     max-width: 100%;
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
+    border-color: govuk-functional-colour(input-border);
 
     // Default user agent colours for selects can have low contrast,
     // and may look disabled (#2435)
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
     background-color: govuk-colour("white");
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // Ensure outline appears outside of the element
-      outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size)
-      // and since `outline` is already used for the yellow focus state.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+      @include govuk-focused-form-input;
     }
 
     &:disabled {
@@ -48,10 +43,10 @@
   }
 
   .govuk-select--error {
-    border-color: $govuk-error-colour;
+    border-color: govuk-functional-colour(error);
 
     &:focus {
-      border-color: $govuk-input-border-colour;
+      border-color: govuk-functional-colour(input-border);
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss

@@ -1,25 +1,16 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: govuk-colour("light-grey");
-  $govuk-service-navigation-border-colour: $govuk-border-colour;
-
-  // We make the link colour a little darker than normal here so that it has
-  // better perceptual contrast with the navigation background.
-  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+  $govuk-service-navigation-text-colour: govuk-functional-colour(surface-text);
+  $govuk-service-navigation-background: govuk-functional-colour(surface-background);
+  $govuk-service-navigation-border-colour: govuk-functional-colour(surface-border);
 
   .govuk-service-navigation {
+    @include govuk-font($size: 19);
     border-bottom-width: 1px;
     border-bottom-style: solid;
-    @include _govuk-rebrand(
-      "border-bottom-color",
-      $from: $govuk-service-navigation-border-colour,
-      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
-    );
-    @include _govuk-rebrand(
-      "background-color",
-      $from: $govuk-service-navigation-background,
-      $to: $_govuk-rebrand-template-background-colour
-    );
+    border-bottom-color: $govuk-service-navigation-border-colour;
+    color: $govuk-service-navigation-text-colour;
+    background-color: $govuk-service-navigation-background;
   }
 
   .govuk-service-navigation__container {
@@ -27,7 +18,7 @@
     flex-direction: column;
     align-items: start;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       flex-wrap: wrap;
     }
@@ -39,26 +30,27 @@
   .govuk-service-navigation__service-name {
     position: relative;
     margin: govuk-spacing(2) 0;
-    border: 0 solid $govuk-service-navigation-link-colour;
 
-    @include govuk-media-query($from: tablet) {
+    // A border matching the link colour is used to mark the active section –
+    // see the `govuk-service-navigation__item--active` class
+    border-width: 0;
+    border-style: solid;
+    border-color: govuk-functional-colour(link);
+
+    @media #{govuk-from-breakpoint(tablet)} {
       // inline-block is used as a fallback for browsers that don't support flexbox
       display: inline-block;
 
       margin-top: 0;
       margin-bottom: 0;
-      padding: govuk-spacing(4) 0;
+      padding: govuk-spacing(3) 0;
 
-      @include _govuk-rebrand {
-        padding: govuk-spacing(3) 0;
-
-        // More magic numbers ahoy:
-        // 29 is the desired height of the element (60), minus top and bottom
-        // padding (2×15), minus bottom border (1); 19 is the font-size at this
-        // point. This gives us the perfect fractional line height to make the
-        // overall component 60px high
-        line-height: (29 / 19);
-      }
+      // More magic numbers ahoy:
+      // 29 is the desired height of the element (60), minus top and bottom
+      // padding (2×15), minus bottom border (1); 19 is the font-size at this
+      // point. This gives us the perfect fractional line height to make the
+      // overall component 60px high
+      line-height: (29 / 19);
 
       &:not(:last-child) {
         @include govuk-responsive-margin(6, $direction: right);
@@ -78,7 +70,7 @@
   }
 
   .govuk-service-navigation__item--active {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       // Negative offset the left margin so we can place a current page indicator
       // to the left without misaligning the list item text.
       margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
@@ -86,12 +78,8 @@
       border-left-width: $govuk-service-navigation-active-link-border-width;
     }
 
-    @include govuk-media-query($from: tablet) {
-      @include _govuk-rebrand(
-        "padding-bottom",
-        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
-        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
-      );
+    @media #{govuk-from-breakpoint(tablet)} {
+      padding-bottom: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width;
       border-bottom-width: $govuk-service-navigation-active-link-border-width;
     }
   }
@@ -100,12 +88,6 @@
     @include govuk-link-common;
     @include govuk-link-style-no-underline;
     @include govuk-link-style-no-visited-state;
-
-    &:not(:hover):not(:focus) {
-      // We set the colour here as we don't want to override the hover or
-      // focus colours
-      color: $govuk-service-navigation-link-colour;
-    }
   }
 
   //
@@ -113,7 +95,7 @@
   //
 
   .govuk-service-navigation__service-name {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // Annoyingly this requires a compound selector in order to overcome the
@@ -139,7 +121,7 @@
     margin: govuk-spacing(2) 0;
     padding: 0;
     border: 0;
-    color: $govuk-service-navigation-link-colour;
+    color: govuk-functional-colour(link);
     background: none;
     word-break: break-all;
     cursor: pointer;
@@ -172,7 +154,6 @@
   }
 
   .govuk-service-navigation__list {
-    @include govuk-font($size: 19);
     margin: 0;
     margin-bottom: govuk-spacing(3);
     padding: 0;
@@ -184,7 +165,7 @@
     //   readers would pointlessly announce.
     // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
     //   all of the links as a run-on sentence.
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 0;
@@ -211,42 +192,40 @@
 
   // Inverted colour scheme style intended for product pages
   .govuk-service-navigation--inverse {
-    @include _govuk-rebrand {
-      // Remove bottom border to add width-container ones
-      border-bottom: none;
+    // Remove bottom border to add width-container ones
+    border-bottom: none;
 
-      // Set colour here so non-link text (service name, slot content) can
-      // use it too.
-      color: govuk-colour("white");
+    // Set colour here so non-link text (service name, slot content) can
+    // use it too.
+    color: govuk-colour("white");
 
-      background-color: $govuk-brand-colour;
+    background-color: govuk-functional-colour(brand);
 
-      .govuk-width-container {
-        border-width: 1px 0;
-        border-style: solid;
-        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
-      }
+    .govuk-width-container {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $govuk-service-navigation-border-colour;
+    }
 
-      // Subtract 1px of space to account for the extra border-top
-      .govuk-service-navigation__container {
-        margin-top: -1px;
-      }
+    // Subtract 1px of space to account for the extra border-top
+    .govuk-service-navigation__container {
+      margin-top: -1px;
+    }
 
-      // Override the 'active' border colour
-      .govuk-service-navigation__item,
-      .govuk-service-navigation__service-name {
-        border-color: govuk-colour("white");
-      }
+    // Override the 'active' border colour
+    .govuk-service-navigation__item,
+    .govuk-service-navigation__service-name {
+      border-color: govuk-colour("white");
+    }
 
-      // Override link styles
-      .govuk-service-navigation__link {
-        @include govuk-link-style-inverse;
-      }
+    // Override link styles
+    .govuk-service-navigation__link {
+      @include govuk-link-style-inverse;
+    }
 
-      // Override mobile menu toggle colour when not focused
-      .govuk-service-navigation__toggle:not(:focus) {
-        color: currentcolor;
-      }
+    // Override mobile menu toggle colour when not focused
+    .govuk-service-navigation__toggle:not(:focus) {
+      color: currentcolor;
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js

@@ -210,9 +210,9 @@
       }
       if (this.mql.matches) {
         this.$menu.removeAttribute('hidden');
-        this.$menuButton.setAttribute('hidden', '');
+        setAttributes(this.$menuButton, attributesForHidingButton);
       } else {
-        this.$menuButton.removeAttribute('hidden');
+        removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
         this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
         if (this.menuIsOpen) {
           this.$menu.removeAttribute('hidden');
@@ -227,6 +227,34 @@
     }
   }
   ServiceNavigation.moduleName = 'govuk-service-navigation';
+  const attributesForHidingButton = {
+    hidden: '',
+    'aria-hidden': 'true'
+  };
+
+  /**
+   * Sets a group of attributes on the given element
+   *
+   * @param {Element} $element - The element to set the attribute on
+   * @param {{[attributeName: string]: string}} attributes - The attributes to set
+   */
+  function setAttributes($element, attributes) {
+    for (const attributeName in attributes) {
+      $element.setAttribute(attributeName, attributes[attributeName]);
+    }
+  }
+
+  /**
+   * Removes a list of attributes from the given element
+   *
+   * @param {Element} $element - The element to remove the attributes from
+   * @param {string[]} attributeNames - The names of the attributes to remove
+   */
+  function removeAttributes($element, attributeNames) {
+    for (const attributeName of attributeNames) {
+      $element.removeAttribute(attributeName);
+    }
+  }
 
   exports.ServiceNavigation = ServiceNavigation;
 

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs

@@ -204,9 +204,9 @@ class ServiceNavigation extends Component {
     }
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden');
-      this.$menuButton.setAttribute('hidden', '');
+      setAttributes(this.$menuButton, attributesForHidingButton);
     } else {
-      this.$menuButton.removeAttribute('hidden');
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
       if (this.menuIsOpen) {
         this.$menu.removeAttribute('hidden');
@@ -221,6 +221,34 @@ class ServiceNavigation extends Component {
   }
 }
 ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+  hidden: '',
+  'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName]);
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName);
+  }
+}
 
 export { ServiceNavigation };
 //# sourceMappingURL=service-navigation.bundle.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs

@@ -63,9 +63,9 @@ class ServiceNavigation extends Component {
     }
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden');
-      this.$menuButton.setAttribute('hidden', '');
+      setAttributes(this.$menuButton, attributesForHidingButton);
     } else {
-      this.$menuButton.removeAttribute('hidden');
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
       if (this.menuIsOpen) {
         this.$menu.removeAttribute('hidden');
@@ -80,6 +80,34 @@ class ServiceNavigation extends Component {
   }
 }
 ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+  hidden: '',
+  'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName]);
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName);
+  }
+}
 
 export { ServiceNavigation };
 //# sourceMappingURL=service-navigation.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss

@@ -20,9 +20,14 @@
     }
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline: $govuk-focus-width solid;
+      outline-color: govuk-functional-colour(focus);
       outline-offset: 0;
-      background-color: $govuk-focus-colour;
+      background-color: govuk-functional-colour(focus);
+
+      @media (forced-colors: active) {
+        outline-offset: (0 - $govuk-focus-width);
+      }
 
       // Undo unwanted changes when global styles are enabled
       @if $govuk-global-styles {

data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss

@@ -2,7 +2,7 @@
   .govuk-summary-list {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
@@ -13,12 +13,13 @@
   }
 
   .govuk-summary-list__row {
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
 
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-row;
     }
   }
@@ -31,7 +32,7 @@
   // Provide an empty 'cell' for rows that don't have actions – otherwise the
   // bottom border is not drawn for that part of the row in some browsers.
   .govuk-summary-list__row--no-actions {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       &::after {
         content: "";
         display: table-cell;
@@ -45,7 +46,7 @@
   .govuk-summary-list__actions {
     margin: 0; // Reset default user agent styles
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-cell;
       padding-top: govuk-spacing(2);
       padding-right: govuk-spacing(4);
@@ -55,7 +56,7 @@
 
   .govuk-summary-list__actions {
     margin-bottom: govuk-spacing(3);
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 20%;
       text-align: right;
     }
@@ -71,13 +72,13 @@
   .govuk-summary-list__key {
     margin-bottom: govuk-spacing(1);
     @include govuk-typography-weight-bold;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 30%;
     }
   }
 
   .govuk-summary-list__value {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }
@@ -101,12 +102,13 @@
     display: inline-block;
   }
 
-  @include govuk-media-query($until: tablet) {
+  @media #{govuk-until-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-right: govuk-spacing(2);
       padding-right: govuk-spacing(2);
-      border-right: 1px solid $govuk-border-colour;
+      border-right: 1px solid;
+      border-right-color: govuk-functional-colour(border);
     }
 
     .govuk-summary-list__actions-list-item:last-child,
@@ -117,7 +119,7 @@
     }
   }
 
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-left: govuk-spacing(2);
@@ -126,7 +128,8 @@
 
     .govuk-summary-list__actions-list-item:not(:first-child),
     .govuk-summary-card__action:not(:first-child) {
-      border-left: 1px solid $govuk-border-colour;
+      border-left: 1px solid;
+      border-left-color: govuk-functional-colour(border);
     }
 
     .govuk-summary-list__actions-list-item:first-child,
@@ -153,7 +156,7 @@
     }
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -167,7 +170,7 @@
     border: 0;
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -179,7 +182,8 @@
   // Additional block for the summary card
   .govuk-summary-card {
     @include govuk-responsive-margin(6, "bottom");
-    border: 1px solid $govuk-border-colour;
+    border: 1px solid;
+    border-color: govuk-functional-colour(border);
   }
 
   .govuk-summary-card__title-wrapper {
@@ -188,9 +192,9 @@
     // Ensures the card header appears separate to the summary list in forced
     // colours mode
     border-bottom: 1px solid transparent;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       justify-content: space-between;
       flex-wrap: nowrap;
@@ -203,7 +207,7 @@
     @include govuk-text-colour;
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -218,7 +222,7 @@
     padding: 0;
     list-style: none;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       justify-content: right;
       text-align: right;
     }
@@ -251,7 +255,7 @@
   .govuk-summary-card__content {
     padding: govuk-spacing(3) govuk-spacing(3) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: govuk-spacing(3) govuk-spacing(4);
     }
 

data/node_modules/govuk-frontend/dist/govuk/components/table/_index.scss

@@ -9,13 +9,11 @@
     border-collapse: collapse;
   }
 
-  @if $govuk-new-typography-scale {
-    // Modifier for tables with a lot of data. Tables with lots of data benefit
-    // from a smaller font size on small screens.
-    .govuk-table--small-text-until-tablet {
-      @include govuk-media-query($until: tablet) {
-        @include govuk-font-size($size: 16);
-      }
+  // Modifier for tables with a lot of data. Tables with lots of data benefit
+  // from a smaller font size on small screens.
+  .govuk-table--small-text-until-tablet {
+    @media #{govuk-until-breakpoint(tablet)} {
+      @include govuk-font-size($size: 16);
     }
   }
 
@@ -26,7 +24,8 @@
   .govuk-table__header,
   .govuk-table__cell {
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
     text-align: left;
     vertical-align: top;
   }

data/node_modules/govuk-frontend/dist/govuk/components/tabs/_index.scss

@@ -46,11 +46,12 @@
 
   // GOV.UK Frontend JavaScript enabled
   .govuk-frontend-supported {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-tabs__list {
         @include govuk-clearfix;
         margin-bottom: 0;
-        border-bottom: 1px solid $govuk-border-colour;
+        border-bottom: 1px solid;
+        border-bottom-color: govuk-functional-colour(border);
       }
 
       .govuk-tabs__title {
@@ -66,7 +67,7 @@
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
         text-align: center;
 
         &::before {
@@ -88,10 +89,11 @@
         padding-bottom: govuk-spacing(3) + $border-width;
         padding-left: govuk-spacing(4) - $border-width;
 
-        border: $border-width solid $govuk-border-colour;
+        border: $border-width solid;
         border-bottom: 0;
+        border-color: govuk-functional-colour(border);
 
-        background-color: $govuk-body-background-colour;
+        background-color: govuk-functional-colour(body-background);
 
         .govuk-tabs__tab {
           text-decoration: none;
@@ -116,8 +118,9 @@
       .govuk-tabs__panel {
         @include govuk-responsive-margin(0, "bottom");
         padding: govuk-spacing(6) govuk-spacing(4);
-        border: 1px solid $govuk-border-colour;
+        border: 1px solid;
         border-top: 0;
+        border-color: govuk-functional-colour(border);
 
         & > :last-child {
           margin-bottom: 0;