design_system 0.7.0

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_measurements.scss

@@ -0,0 +1,105 @@
+////
+/// @group settings/layout
+////
+
+// =========================================================
+// Page layout
+// =========================================================
+
+/// Width of main container
+///
+/// @type Number
+/// @access public
+
+$govuk-page-width: 960px !default;
+
+/// Map of grid column widths
+///
+/// @type Map
+/// @access public
+
+$govuk-grid-widths: (
+  one-quarter: (
+    100% / 4
+  ),
+  one-third: (
+    100% / 3
+  ),
+  one-half: (
+    100% / 2
+  ),
+  two-thirds: (
+    200% / 3
+  ),
+  three-quarters: (
+    300% / 4
+  ),
+  full: 100%
+) !default;
+
+/// Width of gutter between grid columns
+///
+/// @type Number
+/// @access public
+
+$govuk-gutter: 30px !default;
+
+/// Width of half the gutter between grid columns
+///
+/// @type Number
+/// @access public
+
+$govuk-gutter-half: $govuk-gutter / 2;
+
+// =========================================================
+// Borders
+// =========================================================
+
+/// Standard border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width: 5px !default;
+
+/// Wide border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-wide: 10px !default;
+
+/// Narrow border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-narrow: 4px !default;
+
+/// Form control border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-element: 2px !default;
+
+/// Form group border width when in error state
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-group-error: $govuk-border-width !default;
+
+/// Border width of focus outline
+///
+/// @type Number
+/// @access public
+
+$govuk-focus-width: 3px !default;
+
+/// Hover width for form controls with a hover state
+///
+/// @type Number
+/// @access public
+
+$govuk-hover-width: 10px !default;

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_media-queries.scss

@@ -0,0 +1,23 @@
+////
+/// @group settings/layout
+////
+
+/// Breakpoint definitions
+///
+/// @type Map
+/// @access public
+
+$govuk-breakpoints: (
+  mobile: 320px,
+  tablet: 641px,
+  desktop: 769px
+) !default;
+
+/// Show active breakpoint in top-right corner.
+///
+/// Only use this during local development.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-show-breakpoints: false !default;

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_spacing.scss

@@ -0,0 +1,76 @@
+////
+/// @group settings/spacing
+////
+
+/// Single point spacing variables. Access using `govuk-spacing()`
+/// (see `helpers/spacing`).
+///
+/// @type Map
+/// @access private
+
+$govuk-spacing-points: (
+  0: 0,
+  1: 5px,
+  2: 10px,
+  3: 15px,
+  4: 20px,
+  5: 25px,
+  6: 30px,
+  7: 40px,
+  8: 50px,
+  9: 60px
+) !default;
+
+/// Responsive spacing maps
+///
+/// These definitions are used to generate responsive spacing that adapts
+/// according to the breakpoints (see 'helpers/spacing'). These maps should be
+/// used wherever possible to standardise responsive spacing.
+///
+/// You can define different behaviour on tablet and desktop. The 'null'
+/// breakpoint is for mobile.
+///
+/// Access responsive spacing with `govuk-responsive-margin` or
+/// `govuk-responsive-padding` mixins (see `helpers/spacing`).
+///
+/// @type Map
+/// @access private
+
+$govuk-spacing-responsive-scale: (
+  0: (
+    null: 0
+  ),
+  1: (
+    null: 5px
+  ),
+  2: (
+    null: 10px
+  ),
+  3: (
+    null: 15px
+  ),
+  4: (
+    null: 15px,
+    tablet: 20px
+  ),
+  5: (
+    null: 15px,
+    tablet: 25px
+  ),
+  6: (
+    null: 20px,
+    tablet: 30px
+  ),
+  7: (
+    null: 25px,
+    tablet: 40px
+  ),
+  8: (
+    null: 30px,
+    tablet: 50px
+  ),
+  9: (
+    null: 40px,
+    tablet: 60px
+  )
+) !default;

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_typography-font.scss

@@ -0,0 +1,50 @@
+////
+/// @group settings/typography
+////
+
+// =========================================================
+// Font families
+// =========================================================
+
+/// Font families to use for all typography on screen media
+///
+/// @type List
+/// @access public
+
+$govuk-font-family: "GDS Transport", arial, sans-serif !default;
+
+/// Font families to use for print media
+///
+/// We recommend that you use system fonts when printing. This will avoid issues
+/// with some printer drivers and operating systems.
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-print: sans-serif !default;
+
+/// Include the default @font-face declarations
+///
+/// Defaults to true if "GDS Transport" appears in the $govuk-font-family
+/// setting.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-include-default-font-face: if(index($govuk-font-family, "GDS Transport"), true, false) !default;
+
+// =========================================================
+// Font weights
+// =========================================================
+
+/// Font weight for regular typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-regular: 400 !default;
+
+/// Font weight for bold typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-bold: 700 !default;

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_typography-responsive.scss

@@ -0,0 +1,315 @@
+////
+/// @group settings/typography
+////
+
+/// Root font size
+///
+/// This is used to calculate rem sizes for the typography, and should match the
+/// _effective_ font-size of your root (or html) element.
+///
+/// Ideally you should not be setting the font-size on the html or root element
+/// in order to allow it to scale with user-preference, in which case this
+/// should be set to 16px.
+///
+/// @type Number
+/// @access public
+
+$govuk-root-font-size: 16px !default;
+
+/// Feature flag for new typography scale
+///
+/// When set to true, $govuk-typography-scale will use the new font map instead
+/// of the current/old one as well as apply changes in components to account
+/// for the updated scale.
+///
+/// Should be removed in 6.0.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-new-typography-scale: false !default;
+
+/// The font map for the old typography scale
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access private
+
+$_govuk-typography-scale-legacy: (
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 24px,
+      line-height: 25px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    null: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 19px,
+      line-height: 25px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    null: (
+      font-size: 14px,
+      line-height: 16px
+    ),
+    tablet: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    null: (
+      font-size: 12px,
+      line-height: 15px
+    ),
+    tablet: (
+      font-size: 14px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    ),
+    deprecation: (
+      key: "govuk-typography-scale-14",
+      message: "14 on the type scale is deprecated and will be removed as " +
+        "a possible option in the next major version."
+    )
+  )
+);
+
+/// The font map for the new typography scale
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access private
+
+$_govuk-typography-scale-modern: (
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    // Made same as 24 on mobile (consider deprecating this size)
+    null: (
+        font-size: 21px,
+        line-height: 25px
+      ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    // Bump up mobile size from 18/20 to 21/25
+    null: (
+        font-size: 21px,
+        line-height: 25px
+      ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    // Stay at 19/25 at all sizes
+    null: (
+        font-size: 19px,
+        line-height: 25px
+      ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    // Stay at 16/20 at all sizes
+    null: (
+        font-size: 16px,
+        line-height: 20px
+      ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    // Stay at 14/20 at all sizes (consider deprecating this size)
+    null: (
+        font-size: 14px,
+        line-height: 20px
+      ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    ),
+    deprecation: (
+      key: "govuk-typography-scale-14",
+      message: "14 on the type scale is deprecated and will be removed as " +
+        "a possible option in the next major version."
+    )
+  )
+);
+
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// Line-heights will automatically be converted from pixel measurements into
+/// relative values. For example, with a font-size of 16px and a line-height of
+/// 24px, the line-height will be converted to 1.5 before output.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
+
+$govuk-typography-scale: if(
+  $govuk-new-typography-scale,
+  $_govuk-typography-scale-modern,
+  $_govuk-typography-scale-legacy
+) !default;

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_warnings.scss

@@ -0,0 +1,76 @@
+////
+/// @group settings/warnings
+////
+
+/// Suppressed warnings map
+///
+/// This map is used to determine which deprecation warnings to **not** show
+/// to users when compiling sass. This is in place for codebases that do not
+/// have the necessary capacity to upgrade and remove the deprecation,
+/// particularly if the deprecation is significant. For example, the removal of
+/// mixins and functions that were previously available to users of Frontend.
+///
+/// You can add to this map and define which warnings to suppress by appending to
+/// it using the warning key, found in the warning message. For example:
+///
+/// @example scss:
+///   // warning message:
+///   //  $foobar is no longer supported. To silence this warning, update
+///   //  $govuk-suppressed-warnings with key: "foobar"
+///   $govuk-suppressed-warnings: (
+///     foobar
+///   );
+///
+/// @type List
+/// @access public
+
+$govuk-suppressed-warnings: () !default;
+
+/// Warnings
+///
+/// Acts as a wrapper for the built in `@warn` sass function
+///
+/// We use this instead of using `@warn` for 3 reasons:
+///
+/// - To check if a warning is being suppressed through `$govuk-suppressed-warnings`,
+/// in which case we don't call `@warn` and printing the warning to the user
+/// - To format the passed warning `$message` with the warning key at the end
+/// - To prevent duplicate warnings by adding the passed `$key` to
+/// `$govuk-suppressed-warnings` after `@warn` is called to ensure it only runs
+/// once per sass compilation (unless $silence-further-warnings is false)
+///
+/// @param {String} $key - The key to be checked against `$govuk-suppressed-warnings`
+/// and then passed to it to prevent multiple of the same warning.
+/// @param {String} $message - The message to use when calling `@warn`
+/// @param {Boolean} $silence-further-warnings - Whether to silence future
+/// warnings that use the same $key
+/// @access private
+
+@mixin _warning($key, $message, $silence-further-warnings: true) {
+  @if _should-warn($key) {
+    @warn _warning-text($key, $message);
+
+    @if $silence-further-warnings {
+      $govuk-suppressed-warnings: append($govuk-suppressed-warnings, $key) !global;
+    }
+  }
+}
+
+/// Check whether a key is present in the suppressed warnings list.
+///
+/// @param {String} $key - The key to be checked against `$govuk-suppressed-warnings`.
+/// @access private
+
+@function _should-warn($key) {
+  @return index($govuk-suppressed-warnings, $key) == null;
+}
+
+/// Format a warning by appending information on how to suppress it.
+///
+/// @param {String} $key - The key needed to suppress the warning.
+/// @param {String} $message - The warning text.
+/// @access private
+
+@function _warning-text($key, $message) {
+  @return $message + " To silence this warning, update $govuk-suppressed-warnings " + 'with key: "#{$key}"';
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/tools/_all.scss

@@ -0,0 +1,8 @@
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/tools/all' is deprecated. Update your import statement to import 'govuk/tools/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/tools/_exports.scss

@@ -0,0 +1,33 @@
+////
+/// @group tools
+////
+
+/// List of modules which have already been exported
+///
+/// @type List
+/// @access private
+
+$_govuk-imported-modules: () !default;
+
+/// Export module
+///
+/// Ensure that the modules of CSS that we define throughout Frontend are only
+/// included in the generated CSS once, no matter how many times they are
+/// imported across the individual components.
+///
+/// @param {String} $name - Name of module - must be unique within the codebase
+/// @content The passed content will only be outputted if a module of the same
+///   $name has not already been outputted
+/// @access public
+
+@mixin govuk-exports($name) {
+  // If the mixin is not in the list of modules already exported...
+  @if not index($_govuk-imported-modules, $name) {
+    // ... then add it to the list
+    $_govuk-imported-modules: append($_govuk-imported-modules, $name) !global;
+    // ... and output the CSS for that module
+    @content;
+  }
+  // The next time exports is called for the module of the same name, it will be
+  // found in the list and so nothing will be outputted.
+}