govuk_tech_docs 5.2.2 → 6.0.0.beta

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

@@ -1,8 +1,44 @@
+////
+/// @group components/tag
+////
+
+/// Get tag text colour
+/// Almost all tags should use the 50% shade of their colour for their text
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-text-colour($colour) {
+  @return govuk-colour($colour, $variant: "shade-50");
+}
+
+/// Get tag background colour
+/// Almost all tags should use the 80% tint of their colour for their background
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-background-colour($colour) {
+  @return govuk-colour($colour, $variant: "tint-80");
+}
+
+/// Generate colour CSS for tag and tag modifiers
+/// Applies standard rules from the tag colour functions
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @access private
+@mixin _govuk-tag-colours($colour) {
+  color: _govuk-tag-text-colour($colour);
+  background-color: _govuk-tag-background-colour($colour);
+}
+
 @include govuk-exports("govuk/component/tag") {
   $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
 
   .govuk-tag {
     @include govuk-font($size: 19);
+    // Default tag colour is blue
+    @include _govuk-tag-colours("blue");
 
     display: inline-block;
 
@@ -25,8 +61,8 @@
     padding-right: 8px;
     padding-bottom: 3px;
     padding-left: 8px;
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+
+    border-radius: 1px;
     text-decoration: none;
     overflow-wrap: break-word;
 
@@ -43,54 +79,53 @@
     }
   }
 
-  .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey"), 50%);
-    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent
+  // colour rules per modifier
+  .govuk-tag--green {
+    @include _govuk-tag-colours("green");
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("bright-purple"), 50%);
-    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+    @include _govuk-tag-colours("purple");
   }
 
-  .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60%);
-    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+  .govuk-tag--red {
+    @include _govuk-tag-colours("red");
   }
 
-  .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  .govuk-tag--orange {
+    @include _govuk-tag-colours("orange");
   }
 
-  .govuk-tag--light-blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 90%);
+  .govuk-tag--teal {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65%);
-    background-color: govuk-tint(govuk-colour("yellow"), 75%);
+  .govuk-tag--magenta {
+    @include _govuk-tag-colours("magenta");
   }
 
-  .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55%);
-    background-color: govuk-tint(govuk-colour("orange"), 70%);
+  // Yellow uses different colours to ensure it's legible
+  .govuk-tag--yellow {
+    color: govuk-colour("orange", $variant: "shade-50");
+    background-color: govuk-colour("yellow", $variant: "tint-50");
   }
 
-  .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 80%);
-    background-color: govuk-tint(govuk-colour("red"), 75%);
+  // Grey uses different colours to ensure it's legible
+  .govuk-tag--grey {
+    color: govuk-colour("black");
+    background-color: govuk-colour("black", $variant: "tint-80");
   }
 
-  .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 50%);
-    background-color: govuk-tint(govuk-colour("pink"), 85%);
+  // Turquoise and pink are deprecated over teal and magenta respectively
+  // @deprecated
+  .govuk-tag--turquoise {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20%);
-    background-color: govuk-tint(govuk-colour("green"), 80%);
+  // @deprecated
+  .govuk-tag--pink {
+    @include _govuk-tag-colours("magenta");
   }
 }
 

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

@@ -1,7 +1,7 @@
 @import "../tag/index";
 
 @include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-task-list {
     @include govuk-font($size: 19);
@@ -25,11 +25,13 @@
     margin-bottom: 0;
     padding-top: govuk-spacing(2);
     padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
   }
 
   .govuk-task-list__item:first-child {
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid;
+    border-top-color: govuk-functional-colour(border);
   }
 
   // This class is added to the <li> elements where the task name is a link. The
@@ -54,7 +56,7 @@
   }
 
   .govuk-task-list__status--cannot-start-yet {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   // This adds an empty transparent box covering the whole row, including the
@@ -72,7 +74,7 @@
 
   .govuk-task-list__hint {
     margin-top: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 }
 

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

@@ -15,19 +15,14 @@
 
     resize: vertical;
 
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
     border-radius: 0;
+    border-color: govuk-functional-colour(input-border);
 
     -webkit-appearance: none;
 
     &: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 {
@@ -39,10 +34,10 @@
   }
 
   .govuk-textarea--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/warning-text/_index.scss

@@ -19,17 +19,18 @@
     min-height: 35px;
     margin-top: -7px;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-top: -5px;
     }
 
     // When a user customises their colours the background colour will often be
     // removed. Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid $govuk-text-colour;
+    border: 3px solid;
     border-radius: 50%;
+    border-color: govuk-functional-colour(text);
 
-    color: $govuk-body-background-colour;
-    background: $govuk-text-colour;
+    color: govuk-functional-colour(body-background);
+    background: govuk-functional-colour(text);
 
     font-size: 30px;
     line-height: 29px;

data/node_modules/govuk-frontend/dist/govuk/core/_index.scss

@@ -1,4 +1,3 @@
-@import "govuk-frontend-properties";
 @import "links";
 @import "lists";
 @import "typography";

data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss

@@ -38,7 +38,7 @@
   %govuk-list--number > li {
     margin-bottom: 0;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -46,7 +46,7 @@
   %govuk-list--spaced > li {
     margin-bottom: govuk-spacing(2);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_section-break.scss

@@ -40,7 +40,8 @@
   // Visible variant
 
   %govuk-section-break--visible {
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
   }
 
   .govuk-section-break--visible {

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

@@ -66,7 +66,7 @@
 
     margin-bottom: govuk-spacing(1);
 
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   .govuk-caption-l {
@@ -75,9 +75,9 @@
     display: block;
 
     margin-bottom: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: 0;
     }
   }
@@ -87,7 +87,7 @@
 
     display: block;
 
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   // Body (paragraphs)
@@ -128,20 +128,6 @@
     @extend %govuk-body-s;
   }
 
-  // @deprecated
-  %govuk-body-xs {
-    @include govuk-text-colour;
-    @include govuk-font($size: _14);
-
-    margin-top: 0;
-    @include govuk-responsive-margin(4, "bottom");
-  }
-
-  // @deprecated
-  .govuk-body-xs {
-    @extend %govuk-body-xs;
-  }
-
   // Usage aliases
 
   // Using extend to alias means we also inherit any contextual adjustments that
@@ -161,7 +147,7 @@
   %govuk-body-l + %govuk-heading-l {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }
@@ -180,7 +166,7 @@
   %govuk-list + %govuk-heading-s {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_breakpoints.scss

@@ -0,0 +1,17 @@
+@import "../settings/custom-properties";
+@import "../settings/media-queries";
+@import "../tools/exports";
+@import "../tools/px-to-rem";
+
+// CSS custom property for each breakpoint
+@include govuk-exports("govuk/custom-properties/breakpoints") {
+  :root {
+    @if $govuk-output-custom-properties {
+      @each $name, $value in $govuk-breakpoints {
+        --govuk-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_breakpoints.scss.map */

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_frontend-version.scss

@@ -0,0 +1,15 @@
+@import "../tools/exports";
+
+// This custom property is automatically overwritten during builds and
+// releases. It doesn't need to be updated manually.
+//
+// This custom property is always output by base regardless of if
+// `$govuk-output-custom-properties` is true or not to help with checking if
+// multiple stylesheets are outputting the same version
+@include govuk-exports("govuk/custom-properties/frontend-version") {
+  :root {
+    --govuk-frontend-version: "6.0.0";
+  }
+}
+
+/*# sourceMappingURL=_frontend-version.scss.map */

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_functional-colours.scss

@@ -0,0 +1,17 @@
+@import "../settings/custom-properties";
+@import "../settings/colours-functional";
+@import "../tools/exports";
+@import "../helpers/colour";
+
+// CSS custom properties for each functional colour
+@include govuk-exports("govuk/custom-properties/functional-colours") {
+  :root {
+    @if $govuk-output-custom-properties {
+      @each $name, $value in $govuk-functional-colours {
+        --govuk-#{$name}-colour: #{_govuk-resolve-colour($value)};
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_functional-colours.scss.map */

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_index.scss

@@ -0,0 +1,5 @@
+@import "breakpoints";
+@import "frontend-version";
+@import "functional-colours";
+
+/*# sourceMappingURL=_index.scss.map */