govuk_tech_docs 5.2.2 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/objects/_main-wrapper.scss

@@ -30,7 +30,7 @@
     padding-top: govuk-spacing(4);
     padding-bottom: govuk-spacing(4);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // This spacing is manually adjusted to replicate the margin of
       // govuk-heading-xl (50px) minus the spacing of back link and
       // breadcrumbs (10px)

data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss

@@ -5,11 +5,7 @@
   .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.
-    @include _govuk-rebrand(
-      background-color,
-      $from: $govuk-template-background-colour,
-      $to: $_govuk-rebrand-template-background-colour
-    );
+    background-color: govuk-functional-colour(template-background);
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
@@ -39,7 +35,7 @@
 
     // Force the scrollbar to always display in IE, to prevent horizontal page
     // jumps as content height changes (e.g. autocomplete results open).
-    @include govuk-media-query($media-type: screen) {
+    @media screen {
       overflow-y: scroll;
     }
   }
@@ -50,7 +46,7 @@
     // own containers.
     margin: 0;
     // Set the overall body of the page back to the typical background colour.
-    background-color: $govuk-body-background-colour;
+    background-color: govuk-functional-colour(body-background);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/objects/_width-container.scss

@@ -37,7 +37,7 @@
   }
 
   // On tablet, add full width gutters
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     margin-right: $govuk-gutter;
     margin-left: $govuk-gutter;
 
@@ -55,7 +55,7 @@
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+  @media (min-width: #{($width + $govuk-gutter * 2)}) {
     margin-right: auto;
     margin-left: auto;
 

data/node_modules/govuk-frontend/dist/govuk/overrides/_display.scss

@@ -16,7 +16,7 @@
     display: none !important;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     .govuk-\!-display-none-print {
       display: none !important;
     }

data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss

@@ -3,8 +3,6 @@
 
   // Generate typography override classes for each responsive font map in the
   // typography scale eg .govuk-\!-font-size-80
-  //
-  // govuk-!-font-size-14 is deprecated
   @each $size, $font-map in $govuk-typography-scale {
     .govuk-\!-font-size-#{$size} {
       $font-map: map-get($govuk-typography-scale, $size);

data/node_modules/govuk-frontend/dist/govuk/overrides/_width.scss

@@ -7,7 +7,7 @@
   .govuk-\!-width-three-quarters {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 75% !important;
     }
   }
@@ -15,7 +15,7 @@
   .govuk-\!-width-two-thirds {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 66.66% !important;
     }
   }
@@ -23,7 +23,7 @@
   .govuk-\!-width-one-half {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 50% !important;
     }
   }
@@ -31,7 +31,7 @@
   .govuk-\!-width-one-third {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 33.33% !important;
     }
   }
@@ -39,7 +39,7 @@
   .govuk-\!-width-one-quarter {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 25% !important;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-applied.scss

@@ -2,194 +2,9 @@
 /// @group settings/colours
 ////
 
-@import "../helpers/colour";
+@warn "The '_colours-applied' file is deprecated. Please import '_colours-functional' instead. "
+  + "See https://github.com/alphagov/govuk-frontend/releases/tag/v6.0.0 for more details.";
 
-// =========================================================
-// Generic
-// =========================================================
-
-/// Brand colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-brand-colour: govuk-colour("blue") !default;
-
-/// Text colour
-///
-/// @type Colour
-/// @access public
-
-$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.
-///
-/// @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
-/// @access public
-
-$govuk-body-background-colour: govuk-colour("white") !default;
-
-/// Text colour for print media
-///
-/// Use 'true black' to avoid printers using colour ink to print body text
-///
-/// @type Colour
-/// @access public
-
-$govuk-print-text-colour: #000000 !default;
-
-/// Secondary text colour
-///
-/// Used in for example 'muted' text and help text.
-///
-/// @type Colour
-/// @access public
-
-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
-
-/// Focus colour
-///
-/// Used for outline (and background, where appropriate) when interactive
-/// elements (links, form controls) have keyboard focus.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-colour: govuk-colour("yellow") !default;
-
-/// Focused text colour
-///
-/// Ensure that the contrast between the text and background colour passes
-/// WCAG Level AA contrast requirements.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-text-colour: govuk-colour("black") !default;
-
-/// Error colour
-///
-/// Used to highlight error messages and form controls in an error state
-///
-/// @type Colour
-/// @access public
-
-$govuk-error-colour: govuk-colour("red") !default;
-
-/// Success colour
-///
-/// Used to highlight success messages and banners
-///
-/// @type Colour
-/// @access public
-
-$govuk-success-colour: govuk-colour("green") !default;
-
-/// Border colour
-///
-/// Used in for example borders, separators, rules and keylines.
-///
-/// @type Colour
-/// @access public
-
-$govuk-border-colour: govuk-colour("mid-grey") !default;
-
-/// Input border colour
-///
-/// Used for form inputs and controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-input-border-colour: govuk-colour("black") !default;
-
-/// Input hover colour
-///
-/// Used for hover states on form controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
-
-// =============================================================================
-// Links
-// =============================================================================
-
-/// Link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-colour: govuk-colour("blue") !default;
-
-/// Visited link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-visited-colour: govuk-colour("purple") !default;
-
-/// Link hover colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
-
-/// Active link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-active-colour: govuk-colour("black") !default;
-
-// =============================================================================
-// Brand refresh
-// =============================================================================
-
-/// Updated template background colour
-///
-/// @type Colour
-/// @access private
-$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 95%);
-
-/// Border colour for areas on a light-blue background
-///
-/// @type Colour
-/// @access private
-$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
+@import "./colours-functional";
 
 /*# sourceMappingURL=_colours-applied.scss.map */

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-functional.scss

@@ -0,0 +1,366 @@
+////
+/// @group settings/colours
+////
+
+@import "../helpers/colour";
+
+/// Default definitions of the functional colours
+///
+/// @type Map
+///
+/// @see {variable} $govuk-functional-colours
+///
+/// @access public
+$govuk-default-functional-colours: (
+  (
+    "brand": (
+      name: "blue"
+    ),
+    "text": (
+      name: "black"
+    ),
+    // The background colour of the template. This is intended to be the same
+    // as `surface-background` for the purposes of making the Footer and Cookie
+    // banner components merge seamlessly with the template.
+    "template-background": (
+        name: "blue",
+        variant: "tint-95"
+      ),
+    "body-background": (
+      name: "white"
+    ),
+    // Use 'true black' to avoid printers using colour ink to print body text
+    "print-text": #000000,
+    // Used in for example 'muted' text and help text.
+    "secondary-text": (
+        name: "black",
+        variant: "tint-25"
+      ),
+    // Used for outline (and background, where appropriate) when interactive
+    // elements (links, form controls) have keyboard focus.
+    "focus": (
+        name: "yellow"
+      ),
+    // Ensure that the contrast between the text and background colour passes
+    // WCAG Level AA contrast requirements.
+    "focus-text": (
+        name: "black"
+      ),
+    // Used to highlight error messages and form controls in an error state
+    "error": (
+        name: "red"
+      ),
+    // Used to highlight success messages and banners
+    "success": (
+        name: "green"
+      ),
+    // Used in for example borders, separators, rules and keylines.
+    "border": (
+        name: "black",
+        variant: "tint-80"
+      ),
+    // Used for form inputs and controls
+    "input-border": (
+        name: "black"
+      ),
+    // Used for hover states on form controls
+    "hover": (
+        name: "black",
+        variant: "tint-80"
+      ),
+    // Standard links (on white)
+    "link": (
+        name: "blue",
+        variant: "shade-10"
+      ),
+    "link-visited": (
+      name: "purple"
+    ),
+    "link-hover": (
+      name: "blue",
+      variant: "shade-50"
+    ),
+    "link-active": (
+      name: "black"
+    ),
+    // 'Surfaces' are our name for components that have different colour
+    // palettes to typical page content. This is the generic surface.
+    "surface-background": (
+        name: "blue",
+        variant: "tint-95"
+      ),
+    "surface-text": (
+      name: "black"
+    ),
+    "surface-border": (
+      name: "blue",
+      variant: "tint-50"
+    )
+  )
+);
+
+/// Functional colours for the GOV.UK palette.
+///
+/// Each functional colour is represented by a name (for example `'brand'`) to
+/// which the map associates either:
+///
+///   - a Sass colour (like `#1d70b8`)
+///   - a Sass map with a `name` and an optional `variant` properties, referring
+///     to one of the colours in the colour palette (like `(name: 'blue',
+///     variant: 'primary')`). `variant` defaults to `'primary'` if omitted.
+///
+/// Use the `govuk-functional-colour` function to access these colours.
+///
+/// Customise functional colours by defining $govuk-functional-colours with a
+/// map of the colours that you want to change before importing GOV.UK Frontend.
+/// These will then be merged with the default colours. You can only redefine
+/// existing colours.
+///
+/// @example scss – Redefining functional colours by setting them before import
+///
+///   // These will be merged with the default functional colours
+///   $govuk-functional-colours: (
+///     // set the 'brand' colour to the 'primary' variant of 'purple'
+///     brand: (name: 'purple'),
+///     // set the 'template-background' colour to the 'tint-95' variant of 'purple'
+///     template-background: (name: 'purple', variant: 'tint-95'),
+///     // set the 'text' colour to an arbitrary colour `#221133`
+///     text: #221133
+///   );
+///
+/// @see {function} govuk-functional-colour
+///
+/// @type Map
+///
+/// @access public
+$govuk-functional-colours: $govuk-default-functional-colours !default;
+$govuk-functional-colours: _govuk-define-functional-colours(
+  $govuk-functional-colours,
+  $defaults: $govuk-default-functional-colours
+);
+
+// =============================================================================
+// Legacy variables
+//
+// To help migrate to `govuk-functional-colour`, we're keeping the variables
+// which were previously storing the functional colours. This should reduce
+// breakage as teams upgrade
+// =============================================================================
+
+// Because the file may be imported multiple times, subsequent imports will see
+// the legacy variable and warn when they shouldn't so we need to track those
+$_govuk-deprecated-applied-colour-variables: () !default;
+
+/// Warn if a given legacy applied colour variable is set
+///
+/// @param {String} Name of variable to check
+/// @access private
+@mixin _warn-if-applied-colour-variable-set($functional-colour-name) {
+  @if not index($_govuk-deprecated-applied-colour-variables, $functional-colour-name) {
+    @if variable-exists("govuk-#{$functional-colour-name}-colour") {
+      $deprecation-message: "Setting \`$govuk-#{$functional-colour-name}-colour\` no longer has any effect. Use \`$govuk-functional-colours: (#{$functional-colour-name}: <NEW_COLOUR_VALUE>);\` instead.";
+
+      @include _warning("applied-colour-variables", $deprecation-message);
+    }
+
+    $_govuk-deprecated-applied-colour-variables: append(
+      $_govuk-deprecated-applied-colour-variables,
+      $functional-colour-name
+    ) !global;
+  }
+}
+
+@include _warn-if-applied-colour-variable-set(brand);
+/// Brand colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(brand)`.
+$govuk-brand-colour: govuk-functional-colour(brand);
+
+@include _warn-if-applied-colour-variable-set(text);
+/// Text colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(text)`.
+$govuk-text-colour: govuk-functional-colour(text);
+
+@include _warn-if-applied-colour-variable-set(template-background);
+/// 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
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(template-background)`.
+$govuk-template-background-colour: govuk-functional-colour(template-background);
+
+@include _warn-if-applied-colour-variable-set(body-background);
+/// Body background colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(body-background)`.
+$govuk-body-background-colour: govuk-functional-colour(body-background);
+
+@include _warn-if-applied-colour-variable-set(print-text);
+/// Text colour for print media
+///
+/// Use 'true black' to avoid printers using colour ink to print body text
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(print-text)`.
+$govuk-print-text-colour: govuk-functional-colour(print-text);
+
+@include _warn-if-applied-colour-variable-set(secondary-text);
+/// Secondary text colour
+///
+/// Used in for example 'muted' text and help text.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(secondary-text)`.
+$govuk-secondary-text-colour: govuk-functional-colour(secondary-text);
+
+@include _warn-if-applied-colour-variable-set(focus);
+/// Focus colour
+///
+/// Used for outline (and background, where appropriate) when interactive
+/// elements (links, form controls) have keyboard focus.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(focus)`.
+$govuk-focus-colour: govuk-functional-colour(focus);
+
+@include _warn-if-applied-colour-variable-set(focus-text);
+/// Focused text colour
+///
+/// Ensure that the contrast between the text and background colour passes
+/// WCAG Level AA contrast requirements.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(focus-text)`.
+$govuk-focus-text-colour: govuk-functional-colour(focus-text);
+
+@include _warn-if-applied-colour-variable-set(error);
+/// Error colour
+///
+/// Used to highlight error messages and form controls in an error state
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(error)`.
+$govuk-error-colour: govuk-functional-colour(error);
+
+@include _warn-if-applied-colour-variable-set(success);
+/// Success colour
+///
+/// Used to highlight success messages and banners
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(error)`.
+$govuk-success-colour: govuk-functional-colour(success);
+
+@include _warn-if-applied-colour-variable-set(border);
+/// Border colour
+///
+/// Used in for example borders, separators, rules and keylines.
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(border)`.
+$govuk-border-colour: govuk-functional-colour(border);
+
+@include _warn-if-applied-colour-variable-set(input-border);
+/// Input border colour
+///
+/// Used for form inputs and controls
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(input-border)`.
+$govuk-input-border-colour: govuk-functional-colour(input-border);
+
+@include _warn-if-applied-colour-variable-set(hover);
+/// Input hover colour
+///
+/// Used for hover states on form controls
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(hover)`.
+$govuk-hover-colour: govuk-functional-colour(hover);
+
+@include _warn-if-applied-colour-variable-set(link);
+/// Link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link)`.
+$govuk-link-colour: govuk-functional-colour(link);
+
+@include _warn-if-applied-colour-variable-set(link-visited);
+/// Visited link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-visited)`.
+$govuk-link-visited-colour: govuk-functional-colour(link-visited);
+
+@include _warn-if-applied-colour-variable-set(link-hover);
+/// Link hover colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-hover)`.
+$govuk-link-hover-colour: govuk-functional-colour(link-hover);
+
+@include _warn-if-applied-colour-variable-set(link-active);
+/// Active link colour
+///
+/// @type Colour
+/// @access public
+/// @deprecated
+///   Variables for applied colours are deprecated. Please use the `govuk-functional-colour`
+///   function instead: `govuk-functional-colour(link-active)`.
+$govuk-link-active-colour: govuk-functional-colour(link-active);
+
+/*# sourceMappingURL=_colours-functional.scss.map */