design_system 0.10.0 → 0.12.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/objects/_main-wrapper.scss

@@ -1,96 +0,0 @@
-@use "../tools" as *;
-
-////
-/// Page wrapper for the grid system
-///
-/// 1. In IE11 the `main` element can be used, but is not recognized  –
-///    meaning it's not defined in IE's default style sheet,
-///    so it uses CSS initial value, which is inline
-///
-/// @group objects
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-///
-/// @example html
-///   <div class="nhsuk-width-container">
-///     <div class="nhsuk-main-wrapper">
-///      <!-- Wrapper for the main content of your page which applies padding
-///           to the top / bottom -->
-///     </div>
-///   </div>
-////
-
-@mixin _nhsuk-main-wrapper {
-  display: block; // [1]
-  padding-top: nhsuk-spacing(4);
-  padding-bottom: nhsuk-spacing(4);
-  @include nhsuk-top-and-bottom;
-
-  @include nhsuk-media-query($from: tablet) {
-    padding-top: nhsuk-spacing(7);
-    padding-bottom: nhsuk-spacing(7);
-  }
-}
-
-/// @deprecated To be removed in v10.0
-
-@mixin govuk-main-wrapper {
-  @include nhsuk-warning(
-    "govuk-main-wrapper",
-    "govuk-main-wrapper is deprecated. Use `.nhsuk-main-wrapper` class instead."
-  );
-  @include _nhsuk-main-wrapper;
-}
-
-@mixin _nhsuk-main-wrapper--l {
-  padding-bottom: nhsuk-spacing(6);
-  padding-top: nhsuk-spacing(6);
-
-  @include nhsuk-media-query($from: tablet) {
-    padding-bottom: nhsuk-spacing(8);
-    padding-top: nhsuk-spacing(8);
-  }
-}
-
-/// @deprecated To be removed in v10.0
-
-@mixin govuk-main-wrapper--l {
-  @include nhsuk-warning(
-    "govuk-main-wrapper--l",
-    "govuk-main-wrapper--l is deprecated. Use `.nhsuk-main-wrapper--l` class instead."
-  );
-  @include _nhsuk-main-wrapper--l;
-}
-
-@mixin _nhsuk-main-wrapper--s {
-  padding-top: nhsuk-spacing(3);
-  padding-bottom: nhsuk-spacing(3);
-
-  @include nhsuk-media-query($from: tablet) {
-    padding-top: nhsuk-spacing(4);
-    padding-bottom: nhsuk-spacing(4);
-  }
-}
-
-/// @deprecated To be removed in v10.0
-
-@mixin govuk-main-wrapper--s {
-  @include nhsuk-warning(
-    "govuk-main-wrapper--s",
-    "govuk-main-wrapper--s is deprecated. Use `.nhsuk-main-wrapper--s` class instead."
-  );
-  @include _nhsuk-main-wrapper--s;
-}
-
-@include nhsuk-exports("nhsuk/core/objects/main-wrapper") {
-  .nhsuk-main-wrapper {
-    @include _nhsuk-main-wrapper;
-  }
-
-  .nhsuk-main-wrapper--l {
-    @include _nhsuk-main-wrapper--l;
-  }
-
-  .nhsuk-main-wrapper--s {
-    @include _nhsuk-main-wrapper--s;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/objects/_width-container.scss

@@ -1,63 +0,0 @@
-@use "../settings" as *;
-@use "../tools" as *;
-
-////
-/// Page width for the grid system
-///
-/// 1. On mobile, add half width gutters
-/// 2. Limit the width of the container to the page width
-/// 3. From desktop, add full width gutters
-/// 4. As soon as the viewport is greater than the width of the page plus the
-///    gutters, just centre the content instead of adding gutters.
-/// 5. Full width container, spanning the entire width of the viewport
-///
-/// @group objects
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-////
-
-@mixin nhsuk-width-container {
-  margin: 0 $nhsuk-gutter-half; // [1]
-
-  max-width: $nhsuk-page-width; // [2]
-
-  @include nhsuk-media-query($from: desktop) {
-    margin: 0 $nhsuk-gutter; // [3]
-  }
-
-  // [4]
-  @include nhsuk-media-query($and: "(min-width: #{($nhsuk-page-width + $nhsuk-gutter * 2)})") {
-    margin: 0 auto;
-  }
-}
-
-/// Page width for the grid system (deprecated)
-///
-/// @alias nhsuk-width-container
-/// @deprecated To be removed in v11.0, replaced by nhsuk-width-container
-
-@mixin govuk-width-container {
-  @include nhsuk-warning(
-    "govuk-width-container",
-    "govuk-width-container is deprecated. Use nhsuk-width-container instead."
-  );
-  @include nhsuk-width-container;
-}
-
-@mixin nhsuk-width-container-fluid {
-  margin: 0 $nhsuk-gutter-half;
-  max-width: 100%; // [5]
-
-  @include nhsuk-media-query($from: desktop) {
-    margin: 0 $nhsuk-gutter; // [3]
-  }
-}
-
-@include nhsuk-exports("nhsuk/core/objects/width-container") {
-  .nhsuk-width-container {
-    @include nhsuk-width-container;
-  }
-
-  .nhsuk-width-container-fluid {
-    @include nhsuk-width-container-fluid;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/settings/_breakpoints.scss

@@ -1,18 +0,0 @@
-////
-/// Breakpoint definitions
-///
-/// @group settings
-////
-
-$nhsuk-breakpoints: (
-  mobile: 320px,
-  tablet: 641px,
-  desktop: 769px,
-  large-desktop: 990px
-) !default;
-
-/// Show active breakpoint in top-right corner.
-///
-/// Only use this during local development.
-
-$nhsuk-show-breakpoints: false !default;

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/settings/_colours.scss

@@ -1,188 +0,0 @@
-@use "sass:color";
-
-////
-/// NHS colour palette
-///
-/// Colours are prefixed with color_ to make them easier to
-/// search for within the code base.
-///
-/// We also prefix them with nhsuk- to prevent clashing with
-/// other colours in existing code bases.
-///
-/// We use the word color, not colour, for variables.
-///
-/// @group settings
-////
-
-// stylelint-disable color-no-hex
-
-$color_nhsuk-blue: #005eb8;
-$color_nhsuk-white: #ffffff;
-$color_nhsuk-black: #212b32;
-$color_nhsuk-green: #007f3b;
-$color_nhsuk-purple: #330072;
-$color_nhsuk-dark-pink: #7c2855;
-$color_nhsuk-red: #d5281b;
-$color_nhsuk-yellow: #ffeb3b;
-
-/// Secondary colours
-
-$color_nhsuk-pale-yellow: #fff9c4;
-$color_nhsuk-warm-yellow: #ffb81c;
-$color_nhsuk-orange: #ed8b00;
-$color_nhsuk-aqua-green: #00a499;
-$color_nhsuk-pink: #ae2573;
-
-/// Greyscale
-
-$color_nhsuk-grey-1: #4c6272;
-$color_nhsuk-grey-2: #768692;
-$color_nhsuk-grey-3: #aeb7bd;
-$color_nhsuk-grey-4: #d8dde0;
-$color_nhsuk-grey-5: #f0f4f5;
-
-// stylelint-enable color-no-hex
-
-/// RGB and alpha values
-///
-/// Used to create drop/box shadows e.g. for search suggestions dropdown
-///
-
-$color_nhsuk-grey-1-rgb: rgb(66, 84, 98);
-$alpha-transparency-50: 0.5;
-
-/// Tint function
-///
-/// @example scss
-///   nhsuk-tint(color, percentage);
-///   nhsuk-tint($color_nhsuk-black, 10%);
-///
-
-@function nhsuk-tint($color, $percentage) {
-  @return color.mix(white, $color, $percentage);
-}
-
-/// Tint function (deprecated)
-///
-/// @alias nhsuk-tint
-/// @deprecated To be removed in v10.0, replaced by nhsuk-tint
-
-@function tint($color, $percentage) {
-  @warn "The `tint` function will be removed in a future release, use `nhsuk-tint` instead.";
-  @return nhsuk-tint($color, $percentage);
-}
-
-/// Shade function
-///
-/// @example scss
-///   nhsuk-shade(color, percentage);
-///   nhsuk-shade($color_nhsuk-blue, 50%);
-///
-
-@function nhsuk-shade($color, $percentage) {
-  @return color.mix(black, $color, $percentage);
-}
-
-/// Shade function (deprecated)
-///
-/// @alias nhsuk-shade
-/// @deprecated To be removed in v10.0, replaced by nhsuk-shade
-
-@function shade($color, $percentage) {
-  @warn "The `shade` function will be removed in a future release, use `nhsuk-shade` instead.";
-  @return nhsuk-shade($color, $percentage);
-}
-
-/// Primary colour variations
-///
-/// 1. used for link :active states
-/// 2. used for .is-active state on main navigation
-/// 3. used for :hover states on main navigation
-/// 4. used for :active states on main navigation
-/// 5. used for primary button and action link icon :hover states
-/// 6. used for primary button and action link icon :active states
-
-$color_tint_nhsuk-black-10: nhsuk-tint($color_nhsuk-black, 10%); // [1]
-
-$color_shade_nhsuk-blue-20: nhsuk-shade($color_nhsuk-blue, 20%); // [2]
-$color_shade_nhsuk-blue-35: nhsuk-shade($color_nhsuk-blue, 35%); // [3]
-$color_shade_nhsuk-blue-50: nhsuk-shade($color_nhsuk-blue, 50%); // [4]
-
-$color_shade_nhsuk-green-35: nhsuk-shade($color_nhsuk-green, 35%); // [5]
-$color_shade_nhsuk-green-50: nhsuk-shade($color_nhsuk-green, 50%); // [6]
-
-$color_transparent_nhsuk-white-20: rgba($color_nhsuk-white, 0.2);
-$color_transparent_nhsuk-blue-50: rgba($color_shade_nhsuk-blue-50, 0.1);
-
-/// Colour aliases
-
-/// Text
-
-$nhsuk-text-color: $color_nhsuk-black;
-$nhsuk-reverse-text-color: $color_nhsuk-white;
-$nhsuk-secondary-text-color: $color_nhsuk-grey-1;
-$nhsuk-print-text-color: $color_nhsuk-black;
-// stylelint-disable-next-line color-no-hex
-$nhsuk-footer-link-text-color: #003087;
-// stylelint-disable-next-line color-no-hex
-$nhsuk-footer-copyright-text-color: #231f20;
-
-/// Links
-
-$nhsuk-link-color: $color_nhsuk-blue;
-$nhsuk-link-hover-color: $color_nhsuk-dark-pink;
-$nhsuk-link-active-color: nhsuk-shade($nhsuk-link-color, 50%);
-$nhsuk-link-visited-color: $color_nhsuk-purple;
-
-/// Focus
-
-$nhsuk-focus-color: $color_nhsuk-yellow;
-$nhsuk-focus-text-color: $color_nhsuk-black;
-
-/// Border
-
-$nhsuk-border-color: $color_nhsuk-grey-4;
-$nhsuk-secondary-border-color: $color_transparent_nhsuk-white-20;
-
-/// Box shadow
-
-$nhsuk-box-shadow: rgba(33, 43, 50, 0.16);
-$nhsuk-box-shadow-color: $color_nhsuk-grey-1-rgb;
-
-/// Forms
-
-$nhsuk-error-color: $color_nhsuk-red;
-$nhsuk-form-border-color: $color_nhsuk-grey-1;
-$nhsuk-form-element-background-color: $color_nhsuk-white;
-
-/// Buttons
-
-$nhsuk-button-color: $color_nhsuk-green;
-$nhsuk-button-text-color: $color_nhsuk-white;
-$nhsuk-button-hover-color: nhsuk-shade($nhsuk-button-color, 20%);
-$nhsuk-button-active-color: nhsuk-shade($nhsuk-button-color, 50%);
-$nhsuk-button-shadow-color: nhsuk-shade($nhsuk-button-color, 50%);
-
-$nhsuk-secondary-button-color: transparent;
-$nhsuk-secondary-button-solid-background-color: $color_nhsuk-white;
-$nhsuk-secondary-button-border-color: $color_nhsuk-blue;
-$nhsuk-secondary-button-text-color: $color_nhsuk-blue;
-$nhsuk-secondary-button-hover-color: nhsuk-tint($nhsuk-secondary-button-border-color, 85%);
-$nhsuk-secondary-button-active-color: nhsuk-tint($nhsuk-secondary-button-border-color, 78%);
-$nhsuk-secondary-button-shadow-color: $nhsuk-secondary-button-border-color;
-
-$nhsuk-reverse-button-color: $color_nhsuk-white;
-$nhsuk-reverse-button-text-color: $color_nhsuk-black;
-$nhsuk-reverse-button-hover-color: nhsuk-shade($nhsuk-reverse-button-color, 15%);
-$nhsuk-reverse-button-active-color: nhsuk-shade($nhsuk-reverse-button-color, 30%);
-$nhsuk-reverse-button-shadow-color: nhsuk-shade($nhsuk-reverse-button-color, 30%);
-
-$nhsuk-warning-button-color: $color_nhsuk-red;
-$nhsuk-warning-button-hover-color: nhsuk-shade($nhsuk-warning-button-color, 20%);
-$nhsuk-warning-button-active-color: nhsuk-shade($nhsuk-warning-button-color, 50%);
-$nhsuk-warning-button-shadow-color: nhsuk-shade($nhsuk-warning-button-color, 50%);
-
-$nhsuk-login-button-color: $color_nhsuk-blue;
-$nhsuk-login-button-hover-color: nhsuk-shade($nhsuk-login-button-color, 20%);
-$nhsuk-login-button-active-color: nhsuk-shade($nhsuk-login-button-color, 50%);
-$nhsuk-login-button-shadow-color: nhsuk-shade($nhsuk-login-button-color, 50%);

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/settings/_globals.scss

@@ -1,82 +0,0 @@
-@use "sass:math";
-
-////
-/// Globals
-///
-/// @group settings
-////
-
-/// Fonts
-///
-/// 1. Fallback fonts if Frutiger fails to load
-
-$nhsuk-font: "Frutiger W01" !default;
-$nhsuk-font-fallback: arial, sans-serif !default; // [1]
-$nhsuk-font-family-print: sans-serif !default;
-$nhsuk-font-bold: 600 !default;
-$nhsuk-font-normal: 400 !default;
-$nhsuk-font-light: $nhsuk-font-normal !default;
-$nhsuk-fonts-path: "https://assets.nhs.uk/fonts/" !default;
-$nhsuk-include-font-face: true !default;
-
-/// Font sizing and spacing
-
-$nhsuk-base-font-size: 16px !default;
-$nhsuk-base-line-height: 24px !default;
-
-/// Icon default sizing
-
-$nhsuk-icon-size: 34px !default;
-
-/// Grid spacing
-
-$nhsuk-page-width: 960px !default;
-$nhsuk-gutter: 32px;
-$nhsuk-gutter-half: math.div($nhsuk-gutter, 2);
-
-/// Map of grid column widths
-
-$nhsuk-grid-widths: (
-  one-quarter: math.percentage(math.div(1, 4)),
-  one-third: math.percentage(math.div(1, 3)),
-  one-half: math.percentage(math.div(1, 2)),
-  two-thirds: math.percentage(math.div(2, 3)),
-  three-quarters: math.percentage(math.div(3, 4)),
-  full: 100%
-) !default;
-
-/// Border sizes
-
-$nhsuk-border-width-inset-text: 8px !default;
-$nhsuk-care-card-triangle-border: 16px !default;
-$nhsuk-hero-content-triangle-border: 16px !default;
-$nhsuk-hero-border: 1px !default;
-$nhsuk-border-table-header-width: 2px !default;
-$nhsuk-border-table-cell-width: 1px !default;
-
-/// Border radius
-
-$nhsuk-border-radius: 4px !default;
-
-/// Box shadow
-
-$nhsuk-box-shadow-spread: 4px !default;
-$nhsuk-box-shadow-blur: 4px !default;
-$nhsuk-box-shadow-link: 4px !default;
-$nhsuk-box-details: 8px !default;
-$nhsuk-box-expander: 4px !default;
-$nhsuk-box-shadow-pagination: 16px !default;
-$nhsuk-box-shadow-link: 4px !default;
-
-/// Header spacing
-
-$nhsuk-header-spacing: 20px;
-
-/// Form elements
-
-$nhsuk-border-width-form-element: 2px !default;
-$nhsuk-border-width-form-element-error: 2px !default;
-$nhsuk-focus-width: 4px !default;
-$nhsuk-border-width: 4px !default;
-$nhsuk-border-width-mobile: 4px !default;
-$nhsuk-border-width-form-group-error: $nhsuk-border-width !default;

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/styles/_icons.scss

@@ -1,105 +0,0 @@
-@use "../settings" as *;
-
-////
-/// Icons
-///
-/// @group styles
-////
-
-/// Default icon size
-
-.nhsuk-icon {
-  height: $nhsuk-icon-size;
-  width: $nhsuk-icon-size;
-}
-
-/// Default icon colours
-
-.nhsuk-icon__search {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__chevron-left {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__chevron-right {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__close {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__cross {
-  fill: $color_nhsuk-red;
-}
-
-.nhsuk-icon__tick {
-  stroke: $color_nhsuk-green;
-}
-
-.nhsuk-icon__arrow-right {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__arrow-left {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__arrow-right-circle {
-  fill: $color_nhsuk-green;
-}
-
-.nhsuk-icon__chevron-down {
-  fill: currentcolor;
-  height: 24px;
-  position: absolute;
-  right: 4px;
-  transform: rotate(90deg);
-  width: 24px;
-}
-
-.nhsuk-icon__chevron-up {
-  fill: $color_nhsuk-blue;
-
-  path {
-    fill: $color_nhsuk-white;
-  }
-}
-
-.nhsuk-icon__emdash {
-  path {
-    fill: $color_nhsuk-grey-3;
-  }
-}
-
-.nhsuk-icon__plus {
-  fill: $color_nhsuk-blue;
-}
-
-.nhsuk-icon__minus {
-  fill: $color_nhsuk-blue;
-}
-
-/// Icon size adjustments
-
-.nhsuk-icon--size-25 {
-  height: $nhsuk-icon-size * 1.25;
-  width: $nhsuk-icon-size * 1.25;
-}
-
-.nhsuk-icon--size-50 {
-  height: $nhsuk-icon-size * 1.5;
-  width: $nhsuk-icon-size * 1.5;
-}
-
-.nhsuk-icon--size-75 {
-  height: $nhsuk-icon-size * 1.75;
-  width: $nhsuk-icon-size * 1.75;
-}
-
-.nhsuk-icon--size-100 {
-  height: $nhsuk-icon-size * 2;
-  width: $nhsuk-icon-size * 2;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/tools/_focused.scss

@@ -1,86 +0,0 @@
-@use "../settings" as *;
-
-////
-/// Focused
-///
-/// @group tools
-////
-
-/// Focused text
-///
-/// Provides an outline to clearly indicate when the target element is focused.
-/// Used for interactive text-based elements.
-
-@mixin nhsuk-focused-text {
-  background-color: $nhsuk-focus-color;
-  box-shadow:
-    0 -2px $nhsuk-focus-color,
-    0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
-  // 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: $nhsuk-focus-width solid transparent;
-
-  // When link is focussed, hide the default underline since the
-  // box shadow adds the "underline"
-  text-decoration: none;
-
-  &,
-  .nhsuk-icon {
-    color: $nhsuk-focus-text-color;
-    fill: $nhsuk-focus-text-color;
-  }
-}
-
-/// Focused input (form elements)
-///
-/// Provides an additional outline and border to clearly indicate when
-/// the target element has focus. Used for interactive input-based elements such
-/// as text inputs.
-
-@mixin nhsuk-focused-input {
-  border: 2px solid $nhsuk-focus-text-color;
-  box-shadow: inset 0 0 0 2px;
-  outline: $nhsuk-focus-width solid $nhsuk-focus-color; // [1]
-  outline-offset: 0;
-}
-
-/// Focused radio input (form element)
-///
-/// Provides an additional outline and border to clearly indicate when
-/// the target element has focus. Used by radios.
-
-@mixin nhsuk-focused-radio {
-  border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
-  box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
-}
-
-/// Focused checkbox input (form element)
-///
-/// Provides an additional outline and border to clearly indicate when
-/// the target element has focus. Used by checkbox.
-
-@mixin nhsuk-focused-checkbox {
-  border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
-  box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
-}
-
-/// Focused button
-///
-/// Provides an additional outline and background to clearly indicate when
-/// the target element has focus. Used for buttons.
-
-@mixin nhsuk-focused-button {
-  background-color: $nhsuk-focus-color;
-  box-shadow: 0 $nhsuk-focus-width 0 0 $nhsuk-focus-text-color;
-  color: $nhsuk-focus-text-color;
-  outline: $nhsuk-focus-width solid transparent; // [1]
-  outline-offset: $nhsuk-focus-width;
-
-  &,
-  .nhsuk-icon {
-    color: $nhsuk-focus-text-color;
-    fill: $nhsuk-focus-text-color;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/tools/_functions.scss

@@ -1,45 +0,0 @@
-@use "sass:math";
-@use "../settings" as *;
-
-////
-/// Functions
-///
-/// @group tools
-////
-
-/// Convert pixels to em
-///
-/// A quick way to convert px into em
-///
-/// @example scss
-///   nhsuk-em(20px, $nhsuk-base-font-size);
-///
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-
-@function nhsuk-em($value, $context-font-size) {
-  @if math.is-unitless($value) {
-    $value: $value * 1px;
-  }
-  @if math.is-unitless($context-font-size) {
-    $context-font-size: $context-font-size * 1px;
-  }
-  @return math.div($value, $context-font-size) * 1em;
-}
-
-/// Convert pixels to rem
-///
-/// A quick way to convert px into rem
-///
-/// @example scss
-///   nhsuk-px-to-rem(20px);
-///
-/// The $nhsuk-base-font-size (defined in settings/_globals.scss)
-/// must be configured to match the font-size of your root (html) element
-
-@function nhsuk-px-to-rem($value) {
-  @if math.is-unitless($value) {
-    $value: $value * 1px;
-  }
-
-  @return math.div($value, $nhsuk-base-font-size) * 1rem;
-}