dxw_govuk_frontend_rails 2.13.0 → 3.0.0

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

@@ -17,46 +17,10 @@
   @error "Unknown grid width `#{$key}`";
 }
 
-/// Grid width percentage (alias)
-///
-/// @alias govuk-grid-width
-/// @deprecated To be removed in v3.0, replaced by govuk-grid-width
-@function grid-width($key) {
-  @return govuk-grid-width($key);
-}
-
-/// Generate grid row styles
-///
-/// Creates a grid row class with a standardised margin.
-///
-/// @param {String} $class [govuk-grid-row] CSS class name
-///
-/// @example scss - Default
-///   @include govuk-grid-row;
-///
-/// @example scss - Customising the class name
-///   @include govuk-grid-row("app-grid");
-///
-/// @access public
-/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class
-
-@mixin govuk-grid-row($class: "govuk-grid-row") {
-  .#{$class} {
-    @include govuk-clearfix;
-    margin-right: - ($govuk-gutter-half);
-    margin-left: - ($govuk-gutter-half);
-  }
-}
-
 /// Generate grid column styles
 ///
 /// Creates a grid column with standard gutter between the columns.
 ///
-/// If a `$class` is provided (which is the default, but deprecated behaviour),
-/// the generated rules will be wrapped in a predefined selector in the format
-/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
-/// deprecated and will be removed in v3.0
-///
 /// Grid widths are defined in the `$govuk-grid-widths` map.
 ///
 /// By default the column width changes from 100% to specified width at the
@@ -66,11 +30,10 @@
 /// @param {String} $width [full] name of a grid width from $govuk-grid-widths
 /// @param {String} $float [left] left | right
 /// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
-/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
 ///   .govuk-grid-column-two-thirds {
-///     @include govuk-grid-column(two-thirds, $class: false)
+///     @include govuk-grid-column(two-thirds)
 ///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
@@ -80,28 +43,18 @@
 ///
 /// @example scss - Customising the float direction
 ///   .govuk-grid-column-one-half-right {
-///     @include govuk-grid-column(two-thirds, $float: right, $class: false);
-///   }
-///
-/// @example scss - Customising the class name (deprecated)
-///   @include govuk-grid-column(one-half, $class: "test-column");
+///     @include govuk-grid-column(two-thirds, $float: right);
 ///
 /// @access public
 
-@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
-  @if ($class) {
-    .#{$class}-#{$width} {
-      @include govuk-grid-column($width, $float, $at, $class: false);
-    }
-  } @else {
-    box-sizing: border-box;
-    @if $at != desktop {
-      width: 100%;
-    }
-    padding: 0 $govuk-gutter-half;
-    @include govuk-media-query($from: $at) {
-      width: govuk-grid-width($width);
-      float: $float;
-    }
+@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
+  box-sizing: border-box;
+  @if $at != desktop {
+    width: 100%;
+  }
+  padding: 0 $govuk-gutter-half;
+  @include govuk-media-query($from: $at) {
+    width: govuk-grid-width($width);
+    float: $float;
   }
 }

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

@@ -10,7 +10,10 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
-  @include govuk-focusable-fill;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 /// Default link style mixin
@@ -50,6 +53,17 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
 }
 
 /// Muted style link mixin

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

@@ -17,10 +17,14 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  // If the user is using the default NTA font we need to include the font-face declarations.
-  // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
+  // If the user is using the default GDS Transport font we need to include
+  // the font-face declarations.
+  //
+  // We do not need to include the GDS Transport font-face declarations if
+  // alphagov/govuk_template is being used since nta will already be included by
+  // default.
   @if ($govuk-include-default-font-face) {
-    @include _govuk-font-face-nta;
+    @include _govuk-font-face-gds-transport;
   }
 
   @include govuk-media-query($media-type: print) {
@@ -71,6 +75,7 @@
 /// @return {Number} The line height as either a relative value or unmodified
 ///
 /// @access private
+
 @function _govuk-line-height($line-height, $font-size) {
   @if not unitless($line-height) and unit($line-height) == unit($font-size) {
     $line-height: $line-height / $font-size;
@@ -171,7 +176,20 @@
 
 @mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
   @if $tabular {
-    @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    // if govuk-font-family-tabular is set use $govuk-font-family-tabular
+    @if $govuk-font-family-tabular {
+      @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    } @else {
+      @include govuk-typography-common;
+      -webkit-font-feature-settings: "tnum" 1;
+              font-feature-settings: "tnum" 1;
+
+      @supports(font-variant-numeric: tabular-nums) {
+        -webkit-font-feature-settings: normal;
+                font-feature-settings: normal;
+        font-variant-numeric: tabular-nums;
+      }
+    }
   } @else {
     @include govuk-typography-common;
   }

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

@@ -18,7 +18,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  // 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 iff($important, !important);
   padding: 0 iff($important, !important);
 
@@ -51,7 +52,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  // 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 iff($important, !important);
 
   overflow: hidden iff($important, !important);

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

@@ -12,7 +12,7 @@
 
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width} {
-      @include govuk-grid-column($width, $class: false)
+      @include govuk-grid-column($width)
     }
   }
 
@@ -21,7 +21,7 @@
   // them in the outputted CSS
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width}-from-desktop {
-      @include govuk-grid-column($width, $at: desktop, $class: false)
+      @include govuk-grid-column($width, $at: desktop)
     }
   }
 }

data/vendor/assets/stylesheets/objects/_main-wrapper.scss

@@ -20,6 +20,8 @@
 // </div>
 
 
+/// @deprecated Replace this mixin with more direct references to the [spacing
+/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper {
   // In IE11 the `main` element can be used, but is not recognized  –
   // meaning it's not defined in IE's default style sheet,
@@ -37,7 +39,11 @@
   }
 }
 
-// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links
+/// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase
+/// banners or back links.
+///
+/// @deprecated Replace this mixin with more direct references to the [spacing
+/// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper--l {
   @include govuk-responsive-padding(8, "top");
 }
@@ -47,6 +53,14 @@
     @include govuk-main-wrapper;
   }
 
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
   .govuk-main-wrapper--l {
     @include govuk-main-wrapper--l;
   }

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

@@ -26,12 +26,13 @@ $govuk-text-colour: govuk-colour("black") !default;
 
 /// Canvas background colour
 ///
-/// Used by the footer component and template to give the illusion of a long footer.
+/// Used by the footer component and template to give the illusion of a long
+/// footer.
 ///
 /// @type Colour
 /// @access public
 
-$govuk-canvas-background-colour: govuk-colour("grey-3") !default;
+$govuk-canvas-background-colour: govuk-colour("light-grey", $legacy: "grey-3") !default;
 
 /// Body background colour
 ///
@@ -56,7 +57,7 @@ $govuk-print-text-colour: #000000 !default;
 /// @type Colour
 /// @access public
 
-$govuk-secondary-text-colour: govuk-colour("grey-1") !default;
+$govuk-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1") !default;
 
 /// Focus colour
 ///
@@ -94,7 +95,7 @@ $govuk-error-colour: govuk-colour("red") !default;
 /// @type Colour
 /// @access public
 
-$govuk-border-colour: govuk-colour("grey-2") !default;
+$govuk-border-colour: govuk-colour("mid-grey", $legacy: "grey-2");
 
 /// Input border colour
 ///
@@ -112,7 +113,7 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 /// @type Colour
 /// @access public
 
-$govuk-hover-colour: govuk-colour("grey-3") !default;
+$govuk-hover-colour: govuk-colour("mid-grey", $legacy: "grey-3");
 
 
 // =============================================================================
@@ -131,18 +132,18 @@ $govuk-link-colour: govuk-colour("blue") !default;
 /// @type Colour
 /// @access public
 
-$govuk-link-visited-colour: #4c2c92 !default;
+$govuk-link-visited-colour: govuk-colour("purple", $legacy: #4c2c92) !default;
 
 /// Link hover colour
 ///
 /// @type Colour
 /// @access public
 
-$govuk-link-hover-colour: govuk-colour("light-blue") !default;
+$govuk-link-hover-colour: govuk-colour("dark-blue", $legacy: "light-blue") !default;
 
 /// Active link colour
 ///
 /// @type Colour
 /// @access public
 
-$govuk-link-active-colour: govuk-colour("light-blue") !default;
+$govuk-link-active-colour: govuk-colour("black", $legacy: "light-blue") !default;

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

@@ -1,17 +1,33 @@
+@import "compatibility";
+
 ////
 /// @group settings/colours
 ////
 
-/// Colour palette
+/// Use 'legacy' colour palette
 ///
-/// @type Map
-///
-/// @prop $colour - Representation for the given $colour, where $colour is the
-///   friendly name for the colour (e.g. "red": #ff0000);
+/// Whether or not to use the colour palette from GOV.UK Elements / Frontend
+/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using
+/// components from both places in a single application.
 ///
+/// @type Boolean
 /// @access public
 
-$govuk-colours: (
+$govuk-use-legacy-palette: if((
+    $govuk-compatibility-govukfrontendtoolkit or
+    $govuk-compatibility-govuktemplate or
+    $govuk-compatibility-govukelements
+  ), true, false) !default;
+
+/// Legacy colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-legacy: (
   "purple": #2e358b,
   "light-purple": #6f72af,
   "bright-purple": #912b88,
@@ -34,4 +50,52 @@ $govuk-colours: (
   "grey-3": #dee0e2,
   "grey-4": #f8f8f8,
   "white": #ffffff
+);
+
+/// Modern colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-modern: (
+  "red": #d4351c,
+  "yellow": #ffdd00,
+  "green": #00703c,
+  "blue": #1d70b8,
+  "dark-blue": #003078,
+  "light-blue": #5694ca,
+  "purple": #4c2c92,
+
+  "black": #0b0c0c,
+  "dark-grey": #6f777b,
+  "mid-grey": #b1b4b6,
+  "light-grey": #f3f2f1,
+  "white": #ffffff,
+
+  "light-purple": #6f72af,
+  "bright-purple": #912b88,
+  "pink": #d53880,
+  "light-pink": #f499be,
+  "orange": #f47738,
+  "brown": #b58840,
+  "light-green": #85994b,
+  "turquoise": #28a197
+);
+
+/// Colour palette
+///
+/// @type Map
+///
+/// @prop $colour - Representation for the given $colour, where $colour is the
+///   friendly name for the colour (e.g. "red": #ff0000);
+///
+/// @access public
+
+$govuk-colours: if(
+  $govuk-use-legacy-palette,
+  $_govuk-colour-palette-legacy,
+  $_govuk-colour-palette-modern
 ) !default;

data/vendor/assets/stylesheets/settings/_compatibility.scss

@@ -1,9 +1,17 @@
 ////
-/// Compatibility with legacy repos (govuk_elements, govuk_frontend_tookkit and
-/// govuk_template) settings
+/// 'Compatibility Mode'
 ///
-/// We default these settings to `true` so that if they are missed we opt for a
-/// mild performance hit over a potential broken experience for the end-user.
+/// Enabling these flags improves compatibility if you are using GOV.UK Frontend
+/// in an application that also uses govuk_elements, govuk_frontend_toolkit or
+/// govuk_template (the 'legacy repos').
+///
+/// Enabling any of these settings will, by default:
+///
+/// - switch GOV.UK Frontend to using the same colour palette as the legacy
+///   repos, by setting `$govuk-use-legacy-palette` to true.
+///
+/// - prevent GOV.UK Frontend from using rem for font sizing, by setting
+///   `$govuk-typography-use-rem` to false.
 ///
 /// @group settings/compatibility
 ////
@@ -11,7 +19,8 @@
 
 /// Compatibility Mode: alphagov/govuk_frontend_toolkit
 ///
-/// True if used in a project that also includes alphagov/govuk_frontend_toolkit.
+/// Set this to true if you are also including alphagov/govuk_frontend_toolkit
+/// in your application.
 ///
 /// @type Boolean
 /// @access public
@@ -20,7 +29,16 @@ $govuk-compatibility-govukfrontendtoolkit: false !default;
 
 /// Compatibility Mode: alphagov/govuk_template
 ///
-/// True if used in a project that also includes alphagov/govuk_template.
+/// Enabling this will:
+///
+/// - prevent GOV.UK Frontend from including the New Transport typeface, as
+///   it'll use the version of New Transport included with GOV.UK Template.
+///
+/// - alter some of the CSS outputted by GOV.UK Frontend to 'counter'
+///   specific CSS rules in GOV.UK Template.
+///
+/// Set this to true if you are also including alphagov/govuk_template in your
+/// application.
 ///
 /// @type Boolean
 /// @access public
@@ -29,7 +47,13 @@ $govuk-compatibility-govuktemplate: false !default;
 
 /// Compatibility Mode: alphagov/govuk_elements
 ///
-/// True if used in a project that also includes alphagov/govuk_elements.
+/// Enabling this will:
+///
+/// - alter some of the CSS outputted by GOV.UK Frontend to 'counter'
+///   specific CSS rules in GOV.UK Elements.
+///
+/// Set this to true if you are also including alphagov/govuk_elements in your
+/// application.
 ///
 /// @type Boolean
 /// @access public

data/vendor/assets/stylesheets/settings/_measurements.scss

@@ -63,12 +63,12 @@ $govuk-border-width: 5px !default;
 
 $govuk-border-width-wide: 10px !default;
 
-/// Border width on mobile
+/// Narrow border width
 ///
 /// @type Number
 /// @access public
 
-$govuk-border-width-mobile: 4px !default;
+$govuk-border-width-narrow: 4px !default;
 
 /// Form control border width
 ///

data/vendor/assets/stylesheets/settings/_typography-font-families.scss

@@ -2,11 +2,20 @@
 /// @group settings/typography
 ////
 
-/// List of font families to use if using NTA (the default font 'stack' for
+/// List of font families to use if using GDS Transport (the default font
+/// 'stack' for GOV.UK)
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-gds-transport: "GDS Transport", Arial, sans-serif;
+
+/// List of font families to use if using NTA (old font 'stack' for
 /// GOV.UK)
 ///
 /// @type List
 /// @access public
+/// @deprecated To be removed once support for compatibility mode is dropped
 
 $govuk-font-family-nta: "nta", Arial, sans-serif;
 
@@ -18,5 +27,6 @@ $govuk-font-family-nta: "nta", Arial, sans-serif;
 ///
 /// @type List
 /// @access public
+/// @deprecated To be removed once support for compatibility mode is dropped
 
 $govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;

data/vendor/assets/stylesheets/settings/_typography-font.scss

@@ -1,8 +1,24 @@
+@import "compatibility";
+@import "typography-font-families";
+
 ////
 /// @group settings/typography
 ////
 
+/// Use 'legacy' fonts
+///
+/// Whether or not to use v1 nta font from GOV.UK Elements / Frontend
+/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using
+/// components from both places in a single application.
+///
+/// @type Boolean
+/// @access public
 
+$govuk-use-legacy-font: if((
+    $govuk-compatibility-govukfrontendtoolkit or
+    $govuk-compatibility-govuktemplate or
+    $govuk-compatibility-govukelements
+  ), true, false) !default;
 
 // =========================================================
 // Font families
@@ -13,14 +29,20 @@
 /// @type List
 /// @access public
 
-$govuk-font-family: $govuk-font-family-nta !default;
+$govuk-font-family: if($govuk-use-legacy-font,
+  $govuk-font-family-nta,
+  $govuk-font-family-gds-transport
+) !default;
 
 /// Font families to use when displaying tabular numbers
 ///
 /// @type List
 /// @access public
 
-$govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
+$govuk-font-family-tabular: if($govuk-use-legacy-font,
+  $govuk-font-family-nta-tabular,
+  false
+) !default;
 
 /// Font families to use for print media
 ///
@@ -31,16 +53,14 @@ $govuk-font-family-print: sans-serif !default;
 
 /// Include the default @font-face declarations
 ///
-/// If you have set $govuk-font-family to something other than $govuk-font-family-nta this option is disabled by default.
-///
-/// If you are using $govuk-compatibility-govuktemplate this option is disabled by default.
+/// If you have set $govuk-font-family to something other than
+/// `$govuk-font-family-gds-transport` this option is disabled by default.
 ///
 /// @type Boolean
 /// @access public
 
 $govuk-include-default-font-face: (
-  $govuk-font-family == $govuk-font-family-nta and
-  not($govuk-compatibility-govuktemplate)
+  $govuk-font-family == $govuk-font-family-gds-transport
  ) !default;
 
 // =========================================================

data/vendor/assets/stylesheets/settings/_typography-responsive.scss

@@ -1,17 +1,15 @@
+@import "compatibility";
+
 ////
 /// @group settings/typography
 ////
 
 /// Whether or not to define font sizes in rem, improving accessibility by
-/// allowing users to adjust the base font-size. This is currently off by
-/// default, but will be enabled by default for projects that do not use
-/// alphagov/govuk_template in the next major release.
-///
-/// If this is enabled, you should make sure that $govuk-root-font-size is set
-/// correctly for your project
+/// allowing users to adjust the base font-size. This is enabled by default,
+/// unless any of the compatibility mode settings are enabled.
 ///
-/// If any of the compatibility variables are set, then default
-/// responsive typography to off.
+/// You should make sure that $govuk-root-font-size is set correctly for your
+/// project.
 ///
 /// @type Boolean
 /// @access public
@@ -32,8 +30,9 @@ $govuk-typography-use-rem: if((
 /// should be set to 16px.
 ///
 /// If you are integrating Frontend into an existing project that also uses
-/// alphagov/govuk_template then you should set this to 10px to match the 62.5%
-/// (10px) base font size that govuk_template sets on the <html> element.
+/// alphagov/govuk_template and you wish to enable `$govuk-typography-use-rem`
+/// then you should set this to 10px to match the 62.5% (10px) base font size
+/// that govuk_template sets on the <html> element.
 ///
 /// @type Number
 /// @access public