defra_ruby_template 5.4.1 → 5.11.0

data/vendor/assets/stylesheets/helpers/_colour.scss

@@ -42,25 +42,72 @@
 /// Get the colour for a government organisation
 ///
 /// @param {String} $organisation - Organisation name, lowercase, hyphenated
-/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
-///   colour will be returned which meets contrast requirements . If you want to
-///   use the non-websafe version you can set this to `false` but your should
-///   ensure that you still meets contrast requirements for accessibility - for
-///   example, do not use the non-websafe version for text.
+/// @param {Boolean} $websafe - Deprecated. Use $contrast-safe instead.
+/// @param {Boolean} $contrast-safe [true] - By default a version of the colour
+///   will be returned which has a minimum 4.5:1 contrast ratio when used with
+///   white, as per the WCAG 2.1 Level AA guidelines. If you want to use the
+///   non-contrast safe version you can set this to `false` but your should
+///   ensure that you still meets contrast requirements for accessibility -
+///   for example, do not use the non-contrast safe version for text.
 ///
 /// @return {Colour} Representation of colour for organisation
 /// @throw if `$organisation` is not a known organisation
 /// @access public
 
-@function govuk-organisation-colour($organisation, $websafe: true) {
+@function govuk-organisation-colour($organisation, $websafe: null, $contrast-safe: true) {
+  // Check if the $organisation exists in the aliases map. If so, change the
+  // value of $organisation to the aliased value.
+  @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {
+    $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);
+  }
+
+  // Check to see if the organisation exists
   @if not map-has-key($govuk-colours-organisations, $organisation) {
     @error "Unknown organisation `#{$organisation}`";
   }
 
+  // Output a deprecation warning if the legacy colour palette is being used.
+  // Remove in next major version.
+  $is-legacy: $govuk-colours-organisations == $_govuk-legacy-organisation-colours;
+  @if $is-legacy and _should-warn("legacy-organisation-colours") {
+    @warn _warning-text("legacy-organisation-colours",
+      "We've updated the organisation colour palette. Opt in to the new " +
+      "colours using `$govuk-new-organisation-colours: true`. The old " +
+      "palette is deprecated and we'll remove it in the next major version."
+    );
+  }
+
+  // Output a warning if $websafe is set.
+  @if $websafe and _should-warn("organisation-colour-websafe-param") {
+    @warn _warning-text("organisation-colour-websafe-param",
+      "The `$websafe` parameter of `govuk-organisation-colour` has been " +
+      "renamed to `$contrast-safe`. The old parameter name will be removed in " +
+      "the next major version."
+    );
+  }
+
   $org-colour: map-get($govuk-colours-organisations, $organisation);
 
-  @if $websafe and map-has-key($org-colour, colour-websafe) {
-    @return map-get($org-colour, colour-websafe);
+  @if map-has-key($org-colour, deprecation-message) and _should-warn("organisation-colours") {
+    @warn _warning-text(
+      "organisation-colours",
+      map-get($org-colour, deprecation-message)
+    );
+  }
+
+  // If the $websafe parameter is being used (it has been explicitly set as true
+  // or false), assume the user hasn't updated to use $contrast-safe yet and map
+  // the old parameter's value onto the new parameter.
+  @if type-of($websafe) != "null" {
+    $contrast-safe: $websafe;
+  }
+
+  // Determine the contrast-safe key to use depending on whether it's the new
+  // palette or the legacy palette
+  $safe-key: if($govuk-new-organisation-colours, "contrast-safe", "colour-websafe");
+
+  @if $contrast-safe and map-has-key($org-colour, $safe-key) {
+    @return map-get($org-colour, $safe-key);
   } @else {
     @return map-get($org-colour, colour);
   }

data/vendor/assets/stylesheets/helpers/_focused.scss

@@ -24,10 +24,20 @@
   // box shadow adds the "underline"
   text-decoration: none;
 
-  // When a focused box is broken by e.g. a line break, ensure that the
-  // box-shadow is applied to each fragment independently.
-  -webkit-box-decoration-break: clone;
-          box-decoration-break: clone;
+  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state
+  // is missing on links that wrap across multiple lines [1].
+  //
+  // However, text-wrap: balance doesn't play nicely with box-decoration-break:
+  // clone, causing links to re-flow when focused [2]. As text-wrap: balance
+  // wasn't introduced until Chromium 114 we can use it as a way to target
+  // this fix to just 108–111.
+  //
+  // [1]: http://crbug.com/40884971
+  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878
+  @supports not (text-wrap: balance) {
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+  }
 }
 
 /// Focused box

data/vendor/assets/stylesheets/helpers/_grid.scss

@@ -37,7 +37,7 @@
 ///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   .govuk-grid-column-one-half-at-desktop {
+///   .govuk-grid-column-one-half-from-desktop {
 ///     @include govuk-grid-column(one-half, $at: desktop);
 ///   }
 ///

data/vendor/assets/stylesheets/helpers/_links.scss

@@ -229,7 +229,7 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover {
     @if type-of($govuk-text-colour) == color {
       color: rgba($govuk-text-colour, 0.99);
@@ -265,7 +265,7 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover,
   &:active {
     color: rgba(govuk-colour("white"), 0.99);

data/vendor/assets/stylesheets/helpers/_shape-arrow.scss

@@ -54,7 +54,7 @@
     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
             clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
 
-    border-width: 0 $perpendicular $height $perpendicular;
+    border-width: 0 $perpendicular $height;
     border-bottom-color: inherit; // 2
   } @else if $direction == "right" {
     -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);

data/vendor/assets/stylesheets/helpers/_typography.scss

@@ -79,6 +79,23 @@
   font-variant-numeric: tabular-nums if($important, !important, null);
 }
 
+/// Word break helper
+///
+/// Forcibly breaks long words that lack spaces, such as email addresses,
+/// across multiple lines when they wouldn't otherwise fit.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally used to create override classes.
+/// @access public
+
+@mixin govuk-text-break-word($important: false) {
+  // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
+  word-wrap: break-word if($important, !important, null);
+
+  // All other browsers support `overflow-wrap`
+  overflow-wrap: break-word if($important, !important, null);
+}
+
 /// Convert line-heights specified in pixels into a relative value, unless
 /// they are already unit-less (and thus already treated as relative values)
 /// or the units do not match the units used for the font size.
@@ -173,7 +190,7 @@
   // No match? Try with string type (e.g. $size: "16" not 16)
   @if not $font-map {
     @each $font-size in map-keys($govuk-typography-scale) {
-      @if not $font-map and #{$font-size} == #{$size} {
+      @if not $font-map and "#{$font-size}" == "#{$size}" {
         $font-map: map-get($govuk-typography-scale, $font-size);
       }
     }

data/vendor/assets/stylesheets/helpers/_visually-hidden.scss

@@ -2,7 +2,7 @@
 /// @group helpers/accessibility
 ////
 
-/// Hide an element visually, but have it available for screen readers
+/// Helper function containing the common code for the following two mixins
 ///
 /// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 ///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
@@ -11,23 +11,11 @@
 ///
 /// @param {Boolean} $important [true] - Whether to mark as `!important`
 ///
-/// @access public
+/// @access private
 
-@mixin govuk-visually-hidden($important: true) {
+@mixin _govuk-visually-hide-content($important: true) {
   position: absolute if($important, !important, null);
 
-  // Absolute positioning has the unintended consequence of removing any
-  // whitespace surrounding visually hidden text from the accessibility tree.
-  // Insert a space character before and after visually hidden text to separate
-  // it from any visible text surrounding it.
-  &::before {
-    content: "\00a0";
-  }
-
-  &::after {
-    content: "\00a0";
-  }
-
   width: 1px if($important, !important, null);
   height: 1px if($important, !important, null);
   // If margin is set to a negative value it can cause text to be announced in
@@ -36,6 +24,8 @@
   padding: 0 if($important, !important, null);
 
   overflow: hidden if($important, !important, null);
+
+  // `clip` is needed for IE11 support
   clip: rect(0 0 0 0) if($important, !important, null);
   -webkit-clip-path: inset(50%) if($important, !important, null);
           clip-path: inset(50%) if($important, !important, null);
@@ -55,62 +45,40 @@
           user-select: none;
 }
 
-/// Hide an element visually, but have it available for screen readers whilst
-/// allowing the element to be focused when navigated to via the keyboard (e.g.
-/// for the skip link)
-///
-/// This is slightly less opinionated about borders and padding to make it
-/// easier to style the focussed element.
+/// Hide an element visually, but have it available for screen readers
 ///
 /// @param {Boolean} $important [true] - Whether to mark as `!important`
 ///
 /// @access public
 
-@mixin govuk-visually-hidden-focusable($important: true) {
-  position: absolute if($important, !important, null);
-
-  width: 1px if($important, !important, null);
-  height: 1px if($important, !important, null);
-  // If margin is set to a negative value it can cause text to be announced in
-  // the wrong order in VoiceOver for OSX
-  margin: 0 if($important, !important, null);
-
-  overflow: hidden if($important, !important, null);
-  clip: rect(0 0 0 0) if($important, !important, null);
-  -webkit-clip-path: inset(50%) if($important, !important, null);
-          clip-path: inset(50%) if($important, !important, null);
-
-  // For long content, line feeds are not interpreted as spaces and small width
-  // causes content to wrap 1 word per line:
-  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-  white-space: nowrap if($important, !important, null);
-
-  // Prevent users from selecting or copying visually-hidden text. This prevents
-  // a user unintentionally copying more text than they intended and needing to
-  // manually trim it down again.
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-
-  &:active,
-  &:focus {
-    position: static if($important, !important, null);
+@mixin govuk-visually-hidden($important: true) {
+  @include _govuk-visually-hide-content($important: $important);
 
-    width: auto if($important, !important, null);
-    height: auto if($important, !important, null);
-    margin: inherit if($important, !important, null);
+  // Absolute positioning has the unintended consequence of removing any
+  // whitespace surrounding visually hidden text from the accessibility tree.
+  // Insert a space character before and after visually hidden text to separate
+  // it from any visible text surrounding it.
+  &::before {
+    content: "\00a0";
+  }
 
-    overflow: visible if($important, !important, null);
-    clip: auto if($important, !important, null);
-    -webkit-clip-path: none if($important, !important, null);
-            clip-path: none if($important, !important, null);
+  &::after {
+    content: "\00a0";
+  }
+}
 
-    white-space: inherit if($important, !important, null);
+/// Hide an element visually, but have it available for screen readers whilst
+/// allowing the element to be focused when navigated to via the keyboard (e.g.
+/// for the skip link)
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
 
-    // Allow the text to be selectable now it's visible
-    -webkit-user-select: text;
-        -ms-user-select: text;
-            user-select: text;
+@mixin govuk-visually-hidden-focusable($important: true) {
+  // IE 11 doesn't support the combined `:not(:active, :focus)` syntax.
+  &:not(:active):not(:focus) {
+    @include _govuk-visually-hide-content($important: $important);
   }
 }
 

data/vendor/assets/stylesheets/objects/_template.scss

@@ -5,7 +5,11 @@
   .govuk-template {
     // Set the overall page background colour to the same colour as used by the
     // footer to give the illusion of a long footer.
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      background-color,
+      $from: $govuk-template-background-colour,
+      $to: $_govuk-rebrand-template-background-colour
+    );
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.

data/vendor/assets/stylesheets/overrides/_typography.scss

@@ -28,11 +28,15 @@
     @include govuk-typography-weight-bold($important: true);
   }
 
-  // Tabular numbers
+  // Typography helpers
 
   .govuk-\!-font-tabular-numbers {
     @include govuk-font-tabular-numbers($important: true);
   }
+
+  .govuk-\!-text-break-word {
+    @include govuk-text-break-word($important: true);
+  }
 }
 
 /*# sourceMappingURL=_typography.scss.map */

data/vendor/assets/stylesheets/settings/_colours-applied.scss

@@ -29,9 +29,31 @@ $govuk-text-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access public
-
+/// @deprecated "$govuk-canvas-background-colour has been deprecated and will be removed in the next major
+/// version. Use `$govuk-template-background-colour` if you want to change the background of
+/// the `<html>` element and background colour of elements that need to match for visual
+/// continuity.
 $govuk-canvas-background-colour: govuk-colour("light-grey") !default;
 
+// Output a deprecation warning if $govuk-canvas-background-colour is being overridden
+// Remove in next major version.
+@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
+  @include _warning(
+    "$govuk-canvas-background-colour",
+    "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
+  );
+}
+
+/// Template background colour
+///
+/// Used by components that want to give the illusion of extending
+/// the template background (such as the footer and cookie banner).
+///
+/// @type Colour
+/// @access public
+
+$govuk-template-background-colour: govuk-colour("light-grey") !default;
+
 /// Body background colour
 ///
 /// @type Colour
@@ -154,4 +176,20 @@ $govuk-link-hover-colour: govuk-colour("dark-blue") !default;
 
 $govuk-link-active-colour: govuk-colour("black") !default;
 
+// =============================================================================
+// Brand refresh
+// =============================================================================
+
+/// Updated template background colour
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-template-background-colour: #f4f8fb; // Blue tint 95%
+
+/// Border colour for areas on a light-blue background
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-border-colour-on-blue-tint-95: #8eb8dc; // Blue tint 50%
+
 /*# sourceMappingURL=_colours-applied.scss.map */