design_system 0.7.0

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_colour.scss

@@ -0,0 +1,165 @@
+@import "../settings/colours-palette";
+@import "../settings/colours-organisations";
+@import "../settings/warnings";
+
+////
+/// @group helpers/colour
+////
+
+/// Get colour
+///
+/// @param {String | Colour} $colour - Name of colour from the colour palette
+///   (`$govuk-colours`)
+/// @param {String | Colour | Boolean} $legacy [false] - Deprecated.
+///   The `$legacy` parameter is deprecated and is non-operational, as the
+///   legacy colour palette has been removed. The parameter will be removed in
+///   the next major version.
+/// @return {Colour} Representation of named colour
+///
+/// @throw if `$colour` is not a colour from the colour palette
+/// @access public
+
+@function govuk-colour($colour, $legacy: false) {
+  // Output a warning if $legacy is set to anything.
+  @if $legacy and _should-warn("legacy-colour-param") {
+    @warn _warning-text("legacy-colour-param", "The `$legacy` parameter of " +
+    "`govuk-colour` is deprecated and is non-operational. It will be " +
+    "removed in the next major version.");
+  }
+
+  @if type-of($colour) == "color" {
+    // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside
+    $colour: quote("#{$colour}");
+  }
+
+  @if not map-has-key($govuk-colours, $colour) {
+    @error "Unknown colour `#{$colour}`";
+  }
+
+  @return map-get($govuk-colours, $colour);
+}
+
+/// Get the colour for a government organisation
+///
+/// @param {String} $organisation - Organisation name, lowercase, hyphenated
+/// @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: 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 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);
+  }
+}
+
+/// Make a colour darker by mixing it with black
+///
+/// @param {Colour} $colour - colour to shade
+/// @param {Number} $percentage - percentage of black to mix with $colour
+/// @return {Colour}
+/// @access public
+
+@function govuk-shade($colour, $percentage) {
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return _as-hexadecimal(mix(#000000, $colour, $percentage));
+}
+
+/// Make a colour lighter by mixing it with white
+///
+/// @param {Colour} $colour - colour to tint
+/// @param {Number} $percentage - percentage of white to mix with $colour
+/// @return {Colour}
+/// @access public
+
+@function govuk-tint($colour, $percentage) {
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return _as-hexadecimal(mix(govuk-colour("white"), $colour, $percentage));
+}
+
+/// Converts a colour with potential float values for its RGB channels
+/// into hexadecimal notation
+///
+/// This ensures the colour is rendered properly by Safari < 12
+///
+/// @param {Colour} $colour - The colour to convert
+/// @return {Colour}
+/// @access private
+@function _as-hexadecimal($colour) {
+  @if not function-exists(change-color) {
+    @return $colour;
+  }
+
+  // `red`,`green` and `blue` functions are limited to 'legacy' colour spaces
+  // ensuring we don't get floating computations on them
+  $parts: (
+    "red": red($colour),
+    "green": green($colour),
+    "blue": blue($colour),
+    "alpha": alpha($colour)
+  );
+
+  @return change-color($colour, $parts...);
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_device-pixels.scss

@@ -0,0 +1,36 @@
+////
+/// @group helpers
+////
+
+/// Media query for retina images (device-pixel-ratio)
+///
+/// @param {Number} $ratio [2] - Device pixel ratio
+/// @content Passed content will be outputted within the media query
+///
+/// @example scss - Providing a @2x image for screens that support it
+///   background-image: govuk-image-url("my-image.png");
+///
+///   @include govuk-device-pixel-ratio {
+///     background-image: govuk-image-url("my-image-2x.png");
+///   }
+///
+/// @example scss - Using a custom ratio
+///   background-image: govuk-image-url("my-image.png");
+///
+///   @include govuk-device-pixel-ratio {
+///     background-image: govuk-image-url("my-image-2x.png");
+///   }
+///
+///   @include govuk-device-pixel-ratio(3) {
+///     background-image: govuk-image-url("my-image-3x.png");
+///   }
+///
+/// @access public
+
+@mixin govuk-device-pixel-ratio($ratio: 2) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+    only screen and (min-resolution: #{($ratio * 96)}dpi),
+    only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_focused.scss

@@ -0,0 +1,57 @@
+////
+/// @group helpers/accessibility
+////
+
+/// Focused text
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for interactive text-based elements.
+///
+/// @access public
+
+@mixin govuk-focused-text {
+  // When colours are overridden, for example when users have a dark mode,
+  // backgrounds and box-shadows disappear, so we need to ensure there's a
+  // transparent outline which will be set to a visible colour.
+
+  outline: $govuk-focus-width solid transparent;
+  color: $govuk-focus-text-colour;
+  background-color: $govuk-focus-colour;
+  box-shadow:
+    0 -2px $govuk-focus-colour,
+    0 4px $govuk-focus-text-colour;
+  // When link is focussed, hide the default underline since the
+  // box shadow adds the "underline"
+  text-decoration: none;
+
+  // 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
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Unlike govuk-focused-text, which only draws an underline below the element,
+/// govuk-focused-box draws an outline around all sides of the element.
+/// Best used for non-text content contained within links.
+///
+/// @access public
+
+@mixin govuk-focused-box {
+  outline: $govuk-focus-width solid transparent;
+  box-shadow:
+    0 0 0 4px $govuk-focus-colour,
+    0 0 0 8px $govuk-focus-text-colour;
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_font-faces.scss

@@ -0,0 +1,39 @@
+////
+/// @group helpers
+////
+
+@import "../tools/exports";
+
+/// Font Face - GDS Transport
+///
+/// Outputs the font-face declaration for GDS Transport at the root of the CSS document
+/// the first time it is called.
+///
+/// @access private
+
+@mixin _govuk-font-face-gds-transport {
+  @include govuk-exports("govuk/helpers/font-faces") {
+    @at-root {
+      /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */
+      @font-face {
+        font-family: "GDS Transport";
+        font-style: normal;
+        font-weight: normal;
+        src:
+          govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
+          govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
+        font-display: fallback;
+      }
+
+      @font-face {
+        font-family: "GDS Transport";
+        font-style: normal;
+        font-weight: bold;
+        src:
+          govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
+          govuk-font-url("bold-affa96571d-v2.woff") format("woff");
+        font-display: fallback;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_grid.scss

@@ -0,0 +1,61 @@
+////
+/// @group helpers/layout
+////
+
+/// Grid width percentage
+///
+/// @param {String} $key - Name of grid width (e.g. two-thirds)
+/// @return {Number} Percentage width
+/// @throw if `$key` is not a valid grid width
+/// @access public
+
+@function govuk-grid-width($key) {
+  @if map-has-key($govuk-grid-widths, $key) {
+    @return map-get($govuk-grid-widths, $key);
+  }
+
+  @error "Unknown grid width `#{$key}`";
+}
+
+/// Generate grid column styles
+///
+/// Creates a grid column with standard gutter between the columns.
+///
+/// Grid widths are defined in the `$govuk-grid-widths` map.
+///
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @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
+///
+/// @example scss - Default
+///   .govuk-grid-column-two-thirds {
+///     @include govuk-grid-column(two-thirds)
+///   }
+///
+/// @example scss - Customising the breakpoint where width percentage is applied
+///   .govuk-grid-column-one-half-from-desktop {
+///     @include govuk-grid-column(one-half, $at: desktop);
+///   }
+///
+/// @example scss - Customising the float direction
+///   .govuk-grid-column-one-half-right {
+///     @include govuk-grid-column(two-thirds, $float: right);
+///   }
+///
+/// @access public
+
+@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/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_index.scss

@@ -0,0 +1,12 @@
+@import "clearfix";
+@import "colour";
+@import "device-pixels";
+@import "focused";
+@import "font-faces";
+@import "grid";
+@import "links";
+@import "media-queries";
+@import "shape-arrow";
+@import "spacing";
+@import "typography";
+@import "visually-hidden";