govuk_tech_docs 6.3.0.beta → 6.3.0

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

@@ -0,0 +1,135 @@
+////
+/// @group components/tag
+////
+@use "sass:map";
+
+@use "../../base";
+
+/// 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 base.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 base.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);
+}
+
+/// @access private
+@mixin styles {
+  $govuk-tag-max-width: 0.5 * (map.get(base.$govuk-breakpoints, "mobile") or 320px);
+
+  .govuk-tag {
+    @include base.govuk-font($size: 19);
+    // Default tag colour is blue
+    @include _govuk-tag-colours("blue");
+
+    display: inline-block;
+
+    // set a max-width along with overflow-wrap: break-word below for instances
+    // where a tag has a single long word and could overflow its boundaries.
+    // The max-width is necessary as break-word requires a bounding box to base
+    // where to break off of.
+    max-width: $govuk-tag-max-width;
+
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
+    //
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
+    margin-top: -2px;
+    margin-bottom: -3px;
+
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 3px;
+    padding-left: 8px;
+
+    border-radius: 1px;
+    text-decoration: none;
+    overflow-wrap: break-word;
+
+    // When forced colour mode is active, for example to provide high contrast,
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
+    //
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
+    @media screen and (forced-colors: active) {
+      font-weight: bold;
+    }
+  }
+
+  // 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 {
+    @include _govuk-tag-colours("purple");
+  }
+
+  .govuk-tag--red {
+    @include _govuk-tag-colours("red");
+  }
+
+  .govuk-tag--orange {
+    @include _govuk-tag-colours("orange");
+  }
+
+  .govuk-tag--teal {
+    @include _govuk-tag-colours("teal");
+  }
+
+  .govuk-tag--magenta {
+    @include _govuk-tag-colours("magenta");
+  }
+
+  // Yellow uses different colours to ensure it's legible
+  .govuk-tag--yellow {
+    color: base.govuk-colour("orange", $variant: "shade-50");
+    background-color: base.govuk-colour("yellow", $variant: "tint-50");
+  }
+
+  // Grey uses different colours to ensure it's legible
+  .govuk-tag--grey {
+    color: base.govuk-colour("black");
+    background-color: base.govuk-colour("black", $variant: "tint-80");
+  }
+
+  // Turquoise and pink are deprecated over teal and magenta respectively
+  // @deprecated
+  .govuk-tag--turquoise {
+    @include _govuk-tag-colours("teal");
+  }
+
+  // @deprecated
+  .govuk-tag--pink {
+    @include _govuk-tag-colours("magenta");
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/tag/_tag.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("tag");
+
+@import "index";
+

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

@@ -0,0 +1,9 @@
+@use "mixin";
+
+@import "../../base";
+@import "../tag";
+
+@include govuk-exports("govuk/component/task-list") {
+  @include mixin.styles;
+}
+

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

@@ -1,85 +1,7 @@
-@import "../../base";
+@use "../../custom-properties";
 
-@import "../tag/index";
+@use "mixin";
+@use "../tag";
 
-@include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
+@include mixin.styles;
 
-  .govuk-task-list {
-    @include govuk-font($size: 19);
-    margin-top: 0;
-    @include govuk-responsive-margin(6, "bottom");
-    padding: 0;
-    list-style-type: none;
-  }
-
-  // This uses table layout so that the task name and status always appear
-  // side-by-side, with the width of each 'column' being flexible depending upon
-  // the length of the task names and statuses.
-  //
-  // The position is set to 'relative' so than an absolutely-positioned
-  // transparent element box can be added within the link so that the whole row
-  // can be clickable.
-  .govuk-task-list__item {
-    display: table;
-    position: relative;
-    width: 100%;
-    margin-bottom: 0;
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid;
-    border-bottom-color: govuk-functional-colour(border);
-  }
-
-  .govuk-task-list__item:first-child {
-    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
-  // background hover colour is added to help indicate that the whole row is
-  // clickable, rather than just the visible link text.
-  .govuk-task-list__item--with-link:hover {
-    background: $govuk-task-list-hover-colour;
-  }
-
-  .govuk-task-list__name-and-hint {
-    display: table-cell;
-
-    color: govuk-functional-colour(text);
-    vertical-align: top;
-  }
-
-  .govuk-task-list__status {
-    display: table-cell;
-    padding-left: govuk-spacing(2);
-
-    color: govuk-functional-colour(text);
-    text-align: right;
-    vertical-align: top;
-  }
-
-  .govuk-task-list__status--cannot-start-yet {
-    color: govuk-functional-colour(secondary-text);
-  }
-
-  // This adds an empty transparent box covering the whole row, including the
-  // task status and any hint text. Because this is generated within the link
-  // element, this allows the whole area to be clickable.
-  .govuk-task-list__link::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .govuk-task-list__hint {
-    margin-top: govuk-spacing(1);
-    color: govuk-functional-colour(secondary-text);
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,83 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $govuk-task-list-hover-colour: base.govuk-colour("black", $variant: "tint-95");
+
+  .govuk-task-list {
+    @include base.govuk-font($size: 19);
+    margin-top: 0;
+    @include base.govuk-responsive-margin(6, "bottom");
+    padding: 0;
+    list-style-type: none;
+  }
+
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
+  //
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
+  .govuk-task-list__item {
+    display: table;
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: base.govuk-spacing(2);
+    padding-bottom: base.govuk-spacing(2);
+    border-bottom: 1px solid;
+    border-bottom-color: base.govuk-functional-colour(border);
+  }
+
+  .govuk-task-list__item:first-child {
+    border-top: 1px solid;
+    border-top-color: base.govuk-functional-colour(border);
+  }
+
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
+  .govuk-task-list__item--with-link:hover {
+    background: $govuk-task-list-hover-colour;
+  }
+
+  .govuk-task-list__name-and-hint {
+    display: table-cell;
+
+    color: base.govuk-functional-colour(text);
+    vertical-align: top;
+  }
+
+  .govuk-task-list__status {
+    display: table-cell;
+    padding-left: base.govuk-spacing(2);
+
+    color: base.govuk-functional-colour(text);
+    text-align: right;
+    vertical-align: top;
+  }
+
+  .govuk-task-list__status--cannot-start-yet {
+    color: base.govuk-functional-colour(secondary-text);
+  }
+
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
+  .govuk-task-list__link::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .govuk-task-list__hint {
+    margin-top: base.govuk-spacing(1);
+    color: base.govuk-functional-colour(secondary-text);
+  }
+}
+

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

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("task-list");
+
+@import "index";
+

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

@@ -0,0 +1,11 @@
+@use "mixin";
+
+@import "../../base";
+@import "../error-message";
+@import "../hint";
+@import "../label";
+
+@include govuk-exports("govuk/component/textarea") {
+  @include mixin.styles;
+}
+

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

@@ -1,47 +1,9 @@
-@import "../../base";
+@use "../../custom-properties";
 
-@import "../error-message/index";
-@import "../hint/index";
-@import "../label/index";
+@use "mixin";
+@use "../error-message";
+@use "../hint";
+@use "../label";
 
-@include govuk-exports("govuk/component/textarea") {
-  .govuk-textarea {
-    @include govuk-font($size: 19, $line-height: 1.25);
+@include mixin.styles;
 
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    min-height: 40px;
-    @include govuk-responsive-margin(6, "bottom");
-    padding: govuk-spacing(1);
-
-    resize: vertical;
-
-    border: $govuk-border-width-form-element solid;
-    border-radius: 0;
-    border-color: govuk-functional-colour(input-border);
-
-    -webkit-appearance: none;
-
-    &:focus {
-      @include govuk-focused-form-input;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      color: inherit;
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  .govuk-textarea--error {
-    border-color: govuk-functional-colour(error);
-
-    &:focus {
-      border-color: govuk-functional-colour(input-border);
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,43 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-textarea {
+    @include base.govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include base.govuk-responsive-margin(6, "bottom");
+    padding: base.govuk-spacing(1);
+
+    resize: vertical;
+
+    border: base.$govuk-border-width-form-element solid;
+    border-radius: 0;
+    border-color: base.govuk-functional-colour(input-border);
+
+    -webkit-appearance: none;
+
+    &:focus {
+      @include base.govuk-focused-form-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-textarea--error {
+    border-color: base.govuk-functional-colour(error);
+
+    &:focus {
+      border-color: base.govuk-functional-colour(input-border);
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_textarea.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("textarea");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/warning-text") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -1,69 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/warning-text") {
-  .govuk-warning-text {
-    @include govuk-font($size: 19);
-    @include govuk-responsive-margin(6, "bottom");
-    @include govuk-typography-weight-bold;
-    position: relative;
-    padding: govuk-spacing(2) 0;
-  }
+@include mixin.styles;
 
-  .govuk-warning-text__icon {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    position: absolute;
-    left: 0;
-
-    min-width: 35px;
-    min-height: 35px;
-    margin-top: -7px;
-
-    @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;
-    border-radius: 50%;
-    border-color: govuk-functional-colour(text);
-
-    color: govuk-functional-colour(body-background);
-    background: govuk-functional-colour(text);
-
-    font-size: 30px;
-    line-height: 29px;
-
-    text-align: center;
-
-    // Prevent the exclamation mark from being included when the warning text
-    // is copied, for example.
-    -webkit-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-    // Improve rendering in Windows High Contrast Mode (Edge), where a
-    // readability backplate behind the exclamation mark obscures the circle
-    forced-color-adjust: none;
-
-    @media screen and (forced-colors: active) {
-      border-color: windowText;
-      color: windowText;
-      background: transparent;
-    }
-  }
-
-  .govuk-warning-text__text {
-    display: block;
-    padding-left: 45px;
-    color: govuk-functional-colour(text);
-    // While `<strong>` is styled `bold` or `bolder` by user-agents
-    // this can be reset by the app's stylesheet
-    font-weight: inherit;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_mixin.scss

@@ -0,0 +1,69 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-warning-text {
+    @include base.govuk-font($size: 19);
+    @include base.govuk-responsive-margin(6, "bottom");
+    @include base.govuk-typography-weight-bold;
+    position: relative;
+    padding: base.govuk-spacing(2) 0;
+  }
+
+  .govuk-warning-text__icon {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    position: absolute;
+    left: 0;
+
+    min-width: 35px;
+    min-height: 35px;
+    margin-top: -7px;
+
+    @media #{base.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;
+    border-radius: 50%;
+    border-color: base.govuk-functional-colour(text);
+
+    color: base.govuk-functional-colour(body-background);
+    background: base.govuk-functional-colour(text);
+
+    font-size: 30px;
+    line-height: 29px;
+
+    text-align: center;
+
+    // Prevent the exclamation mark from being included when the warning text
+    // is copied, for example.
+    -webkit-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    // Improve rendering in Windows High Contrast Mode (Edge), where a
+    // readability backplate behind the exclamation mark obscures the circle
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      border-color: windowText;
+      color: windowText;
+      background: transparent;
+    }
+  }
+
+  .govuk-warning-text__text {
+    display: block;
+    padding-left: 45px;
+    color: base.govuk-functional-colour(text);
+    // While `<strong>` is styled `bold` or `bolder` by user-agents
+    // this can be reset by the app's stylesheet
+    font-weight: inherit;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_warning-text.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("warning-text");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.import.scss

@@ -0,0 +1,10 @@
+@use "global-styles.mixin" as mixin;
+
+@import "../base";
+@import "links";
+@import "typography";
+
+@include govuk-exports("govuk/core/global-styles") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.mixin.scss

@@ -0,0 +1,19 @@
+@use "../base";
+
+@mixin govuk-global-styles {
+  a {
+    @extend %govuk-link;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+}
+
+/// @access private
+@mixin styles {
+  @if base.$govuk-global-styles == true {
+    @include govuk-global-styles;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.scss

@@ -1,24 +1,7 @@
-@import "../settings/global-styles";
-@import "../tools/exports";
-@import "../helpers/colour";
-@import "../helpers/links";
-@import "links";
-@import "typography";
+@use "../custom-properties";
+@use "links";
+@use "typography";
+@use "global-styles.mixin" as mixin;
 
-@mixin govuk-global-styles {
-  a {
-    @extend %govuk-link;
-  }
+@include mixin.styles;
 
-  p {
-    @extend %govuk-body-m;
-  }
-}
-
-@include govuk-exports("govuk/core/global-styles") {
-  @if $govuk-global-styles == true {
-    @include govuk-global-styles;
-  }
-}
-
-/*# sourceMappingURL=_global-styles.scss.map */

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

@@ -0,0 +1,6 @@
+@import "links";
+@import "lists";
+@import "typography";
+@import "section-break";
+@import "global-styles";
+