@nice-digital/nds-core 1.3.3-alpha.0 → 2.0.0-alpha.0

package/scss/settings/_settings-colours-nice.scss

@@ -1,80 +0,0 @@
-////
-/// @group colors
-////
-
-// PRIMARY PALETTE
-
-/// NICE Black. Part of the primary palette.
-/// @since 0.2.0
-$nds-colour-nice-black: #222;
-
-/// NICE White. Part of the primary palette
-/// @since 0.2.0
-$nds-colour-nice-white: #fff;
-
-/// NICE Teal. Part of the primary palette.
-/// First choice of colour for supporting
-/// @since 0.2.0
-$nds-colour-nice-teal: #004650;
-
-// SECONDARY PALETTE
-
-/// Purple. Part of the secondary palette. Purple should be used sparingly and only used as a
-/// panel background to highlight a particular section of content,
-/// in which case font colour must be pure white (NICE White) to make text legible.
-/// @since 0.2.0
-$nds-colour-nice-purple: #451551;
-
-/// Cool Teal. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-cool-teal: #00506a;
-
-/// Rich Black. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-rich-black: #0e0e0e;
-
-/// Dark Grey. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-dark-grey: #393939;
-
-/// Grey 1. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-grey-1: #adadad;
-
-/// Grey 2. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-grey-2: #d6d6d6;
-
-/// Grey 3. Part of the secondary palette.
-/// @since 0.2.0
-$nds-colour-nice-grey-3: #e9e9e9;
-
-// TERTIARY PALETTE
-
-/// Blue 1. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-blue-1: #233746;
-
-/// Blue 2. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-blue-2: #314c60;
-
-/// Blue 3. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-blue-3: #517489;
-
-/// Ice Teal. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-ice-teal: #a2bdc1;
-
-/// Teal 1. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-teal-1: #4f7d83;
-
-/// Teal 2. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-teal-2: #18646e;
-
-/// Teal 3. Part of the tertiary palette.
-/// @since 0.2.0
-$nds-colour-nice-teal-3: #15434a;

package/scss/settings/_settings-colours-semantic.scss

@@ -1,247 +0,0 @@
-////
-/// @group colors
-////
-
-@import 'settings-colours-nice';
-
-/// True black, used for print styles
-/// @since 0.2.0
-$nds-colour-true-black: #000;
-
-/// True white, used for print styles
-/// @since 0.2.0
-$nds-colour-true-white: #fff;
-
-// GLOBAL
-
-/// Page background colour. It's off-white in an attempt to make
-/// text easier to read for those with 'visual stress', 50% of
-/// which happen to be dyslexic (British Dyslexia association), by
-/// reducing contrast. See https://ux.stackexchange.com/a/73918/92081
-/// for a more detailed explanation.
-/// @since 0.2.0
-$nds-colour-body: #f4f4f4;
-
-/// Standard, primary body text colour. Off-black, to slightly reduce
-/// contrast in an attempt to make text easier to read for those with
-/// 'visual stress', see also $nds-colour-body.
-/// @since 0.2.0
-$nds-colour-text: $nds-colour-nice-black;
-
-/// Subtle text colour
-/// @since 0.2.0
-$nds-colour-text-subtle: $nds-colour-nice-grey-1;
-
-/// Inverse body text colour for use on dark background
-/// @since 0.2.2
-$nds-colour-text-inverse: $nds-colour-nice-white;
-
-/// Icons colour
-/// @since 0.2.0
-$nds-colour-icons: $nds-colour-nice-teal;
-
-// LINKS
-
-/// Link text colour
-/// @since 0.2.0
-$nds-colour-link: #005ea5;
-
-/// Link hover colour
-/// @since 0.2.0
-$nds-colour-link-hover: #003761;
-
-/// Link visited colour
-/// @since 0.2.0
-$nds-colour-link-visited: #4c2c92;
-
-/// Link active colour
-/// @since 0.2.0
-$nds-colour-link-active: $nds-colour-text;
-
-/// Link focus text colour
-/// @since 0.2.11
-$nds-colour-link-focus-text: $nds-colour-link;
-
-// INVERSE LINKS
-
-/// Inverse link text colour
-/// @since 0.2.9
-$nds-colour-link-inverse: $nds-colour-text-inverse;
-
-/// Inverse link hover text colour
-/// @since 0.2.9
-$nds-colour-link-inverse-hover: $nds-colour-nice-grey-2;
-
-/// Inverse link visited text colour. Same as normal inverse link colour to ensure minimum 4.5:1 colour contrast across various dark backgrounds.
-/// @since 0.2.9
-$nds-colour-link-inverse-visited: $nds-colour-link-inverse;
-
-/// Inverse link active text colour
-/// @since 0.2.9
-$nds-colour-link-inverse-active: $nds-colour-link-inverse-hover;
-
-/// Inverse link focus text colour
-/// @since 0.2.9
-$nds-colour-link-inverse-focus-text: $nds-colour-link-inverse;
-
-// FOCUS
-
-/// Focus colour
-/// @since 0.2.0
-$nds-colour-focus: #0092a6;
-
-/// Focus colour
-/// @since 0.3.1
-$nds-colour-focus-inverse: $nds-colour-link-inverse;
-
-// CTA BUTTONS
-
-/// CTA button background colour
-/// @since 0.2.2
-$nds-colour-btn-cta: $nds-colour-nice-purple;
-
-/// CTA button hover colour
-/// @since 0.2.2
-$nds-colour-btn-cta-hover: #260b2d;
-
-/// CTA button text colour
-/// @since 0.2.2
-$nds-colour-btn-cta-text: $nds-colour-nice-white;
-
-// PRIMARY BUTTONS
-
-/// Primary button background colour
-/// @since 0.2.2
-$nds-colour-btn-primary: $nds-colour-nice-dark-grey;
-
-/// Primary button hover colour
-/// @since 0.2.2
-$nds-colour-btn-primary-hover: $nds-colour-nice-rich-black;
-
-/// Primary button text colour
-/// @since 0.2.2
-$nds-colour-btn-primary-text: $nds-colour-nice-white;
-
-// SECONDARY BUTTONS
-
-/// Secondary button background colour
-/// @since 0.2.2
-$nds-colour-btn-secondary: #666;
-
-/// Secondary button hover colour
-/// @since 0.2.2
-$nds-colour-btn-secondary-hover: #333;
-
-/// Primary button text colour
-/// @since 0.2.2
-$nds-colour-btn-secondary-text: $nds-colour-nice-white;
-
-// LIGHT BUTTONS
-
-/// Inverse (light) button background colour
-/// @since 0.2.2
-$nds-colour-btn-inverse: $nds-colour-nice-white;
-
-/// Inverse (light) button hover colour
-/// @since 0.2.2
-$nds-colour-btn-inverse-hover: $nds-colour-nice-grey-3;
-
-/// Inverse (light) button text colour
-/// @since 0.2.2
-$nds-colour-btn-inverse-text: $nds-colour-nice-rich-black;
-
-// BACKGROUNDS/BORDERS
-
-/// Borders, separators, rules, keylines etc.
-/// @since 0.2.0
-$nds-colour-border: $nds-colour-nice-grey-1;
-
-/// Focused Borders, separators, rules, keylines etc.
-/// @since 0.4.2
-$nds-colour-border-focus: $nds-colour-nice-blue-3;
-
-// NOTIFICATIONS/BANNERS
-
-/// Agile lifecycle phase banner
-/// @since 0.2.2
-$nds-colour-agile-phase: #009ae9;
-
-/// Discovery agile lifecycle phase
-/// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-discovery: #b8008e;
-
-/// Alpha badges and banners
-/// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-alpha: #d5367f;
-
-/// Beta badges and banners
-/// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-beta: #bd5826;
-
-/// Live badges and banners
-/// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-live: #578137;
-
-/// Error text and border colour
-/// @since 1.7.0
-$nds-colour-error: #b50f23;
-
-/// Error background colour
-/// @since 1.7.0
-$nds-colour-error-background: #f9eced;
-
-/// Caution text and border colour
-/// @since 1.7.0
-$nds-colour-caution: #dc8a07;
-
-/// Caution background colour
-/// @since 1.7.0
-$nds-colour-caution-background: #fbf7f1;
-
-/// Info text and border colour
-/// @since 1.7.0
-$nds-colour-info: #3479d0;
-
-/// Info background colour
-/// @since 1.7.0
-$nds-colour-info-background: #eff4fc;
-
-/// Success text and border colour
-/// @since 1.7.0
-$nds-colour-success: #68c103;
-
-/// Success background colour
-/// @since 1.7.0
-$nds-colour-success-background: #f3faeb;
-
-/// <mark> tag highlighter colour
-/// @since 1.2.4
-$nds-colour-mark: #fff999;
-
-// GUIDANCE TYPES
-
-/// New guidance colour
-/// @since 0.3.0
-$nds-colour-guidance-new: $nds-colour-nice-purple;
-
-/// Updated guidance colour
-/// @since 0.3.0
-$nds-colour-guidance-updated: $nds-colour-nice-blue-3;
-
-/// In consultation guidance colour
-/// @since 0.3.0
-$nds-colour-guidance-consultation: #557021;
-
-// HERO
-
-/// Background colour for the hero component
-/// @since 0.5.2
-$nds-colour-hero-background: $nds-colour-nice-teal-2;
-
-/// Colour for the border in the hero component
-/// @since 0.5.2
-$nds-colour-hero-border: $nds-colour-nice-teal-3;

package/scss/settings/_settings-glyphs.scss

@@ -1,3 +0,0 @@
-/// Whether to output the classes for the UTF-8 glyphs.
-/// @since 0.2.0
-$nds-output-glyph-classes: false !default;

package/scss/settings/_settings-layout.scss

@@ -1,15 +0,0 @@
-////
-/// @group grid
-////
-
-/// The maximum width of the default container, in pixels
-/// @since 0.5.2
-$nds-container-max-width: 1170;
-
-/// The gutter for the default container
-/// @since 1.0.0
-$nds-container-gutter: $nds-spacing-medium;
-
-/// The maximum content width to ensure good readability
-/// @since 1.7.0
-$nds-readable-width: 66ch;

package/scss/settings/_settings-mq.scss

@@ -1,17 +0,0 @@
-// SASS MQ OVERRIDES
-
-// A map of breakpoints (name: px) required for SASS MQ
-$mq-breakpoints: (
-  xs: $nds-breakpoint-xs,
-  sm: $nds-breakpoint-sm,
-  md: $nds-breakpoint-md,
-  lg: $nds-breakpoint-lg,
-  xl: $nds-breakpoint-xl
-);
-
-// Base font size
-$mq-base-font-size: $nds-base-font-size * 1px;
-
-$mq-static-breakpoint: lg;
-
-$mq-responsive: $nds-responsive;

package/scss/settings/_settings-print.scss

@@ -1,5 +0,0 @@
-/// Whether to output a default set of generic print styles for things
-/// like avoiding page breaks after headings etc. If you disabled this,
-/// be sure to add your own print styles.
-/// @since 0.2.0
-$nds-output-default-print-styles: true !default;

package/scss/settings/_settings-spacing.scss

@@ -1,43 +0,0 @@
-////
-/// @group spacing
-////
-
-/// Extra extra small spacing
-/// @since 0.2.0
-$nds-spacing-xx-small: 2;
-
-/// Extra small spacing
-/// @since 0.2.0
-$nds-spacing-x-small: 4;
-
-/// Small spacing
-/// @since 0.2.0
-$nds-spacing-small: 8;
-
-/// Medium spacing
-/// @since 0.2.0
-$nds-spacing-medium: 16;
-
-/// Large spacing
-/// @since 0.2.0
-$nds-spacing-large: 32;
-
-/// Extra large spacing
-/// @since 0.2.0
-$nds-spacing-x-large: 48;
-
-/// Extra extra large spacing
-/// @since 0.2.0
-$nds-spacing-xx-large: 64;
-
-/// A map of spacing values
-/// @since 0.2.15
-$nds-spacings: (
-  xx-small: $nds-spacing-xx-small,
-  x-small: $nds-spacing-x-small,
-  small: $nds-spacing-small,
-  medium: $nds-spacing-medium,
-  large: $nds-spacing-large,
-  x-large: $nds-spacing-x-large,
-  xx-large: $nds-spacing-xx-large
-);

package/scss/settings/_settings.scss

@@ -1,4 +0,0 @@
-@import 'settings-colours-nice', 'settings-colours-semantic',
-  'settings-modular-scale', 'settings-spacing', 'settings-breakpoints',
-  'settings-glyphs', 'settings-layout', 'settings-print', 'settings-typography',
-  'settings-mq';

package/scss/typography/_typography-helpers.scss

@@ -1,148 +0,0 @@
-////
-/// @group Typography
-////
-
-/// Gets a font family from the `$nds-font-families` map, given a name
-/// @param {String} $stack The stack name e.g. sans, serif or mono
-/// @since 0.1.0
-@function nds-get-font-family($stack) {
-  $result: map-get($nds-font-families, $stack);
-  @return unquote($result);
-}
-
-/// Gets a numeric scale
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @since 0.1.0
-@function nds-get-scale-integer($scale) {
-  @if map-has-key($nds-named-font-sizes, $scale) {
-    @return map-get($nds-named-font-sizes, $scale);
-  } @else if is-integer($scale) {
-    @return $scale;
-  }
-
-  @error '`$scale` must either be an integer or exist as a named font size in `$nds-named-font-sizes`';
-}
-
-/// Gets a numeric font size (in px) from a given scale multiplier.
-/// Usually not used directly - the font-size or font mixin is usually used instead.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @return {Number} Numeric font size (in px)
-/// @example
-///   $font-size: nds-get-font-size(2)
-/// @example
-///   $font-size: nds-get-font-size(h1)
-/// @since 0.1.0
-@function nds-get-font-size($scale) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @return map-get($font-map, fs);
-}
-
-/// Gets a numeric line height (in px) from a given scale multiplier.
-/// Usually not used directly - the font-size or font mixin is usually used instead.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @return {Number} Numeric line-height (in px)
-/// @example
-///   $line-height: nds-get-line-height(2)
-/// @example
-///   $line-height: nds-get-line-height(h1)
-/// @since 0.1.0
-@function nds-get-line-height($scale) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @return map-get($font-map, lh);
-}
-
-/// Applies font size and line-height for the given scale.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @param $important {Boolean} Whether to add an important declaration to the CSS rules.
-/// @example
-///   .test {
-///     @include nds-font-size(-2);
-///   }
-/// @example
-///   .test {
-///     @include nds-font-size(h1, true);
-///   }
-/// @since 0.1.0
-@mixin nds-font-size($scale: 0, $important: false) {
-  $font-size: nds-get-font-size($scale);
-  $line-height: nds-get-line-height($scale);
-
-  @if $important {
-    font-size: rem($font-size) !important;
-    line-height: rem($line-height) !important;
-  } @else {
-    font-size: rem($font-size);
-    line-height: rem($line-height);
-  }
-}
-
-/// Nice font: includes font size, line height, and margins.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @param $important {Boolean} Whether to add an important declaration to the CSS rules.
-/// @example
-///   .test {
-///     @include nds-font(3);
-///   }
-/// @example
-///   .test {
-///     @include nds-font(h1, true);
-///   }
-/// @since 0.1.0
-@mixin nds-font($scale, $important: false) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @include nds-font-size($scale, $important);
-
-  @if $important {
-    margin-bottom: rem(map-get($font-map, mb)) !important;
-    margin-top: rem(map-get($font-map, mt)) !important;
-  } @else {
-    margin-bottom: rem(map-get($font-map, mb));
-    margin-top: rem(map-get($font-map, mt));
-  }
-}
-
-/// Default paragraph style
-/// @since 0.5.2
-@mixin nds-p {
-  @include nds-font(p);
-  font-feature-settings: 'kern', 'onum', 'liga';
-  font-weight: normal;
-  max-width: 66ch;
-}
-
-/// Lead paragraph style
-/// @since 0.2.12
-@mixin nds-lead {
-  @include nds-font(lead);
-  font-weight: normal;
-  max-width: 66ch;
-}
-
-/// Base list style
-/// @since 0.1.0
-@mixin nds-list {
-  font-feature-settings: 'kern', 'onum', 'liga';
-  margin-left: rem($nds-spacing-medium);
-  max-width: 66ch;
-  padding: 0;
-}
-
-// TODO: default-error-style probably belongs elsewhere?
-
-/// The highlight style used for elements like inputs and textareas
-/// if there's an error on the field
-/// @param {Boolean} $rounded whether to use box shadow for border (outline can't be styled to have radius corners)
-/// @output default styling for form elements in an errored state
-/// @since 1.0
-@mixin nds-default-error-style($rounded: false) {
-  @if $rounded {
-    box-shadow: 0 0 0 rem($nds-spacing-x-small) $nds-colour-error;
-    outline: $nds-spacing-x-small solid transparent;
-    outline-offset: $nds-spacing-x-small;
-  } @else {
-    outline: rem($nds-spacing-x-small) solid $nds-colour-error;
-  }
-}

package/scss/typography/_typography-links.scss

@@ -1,73 +0,0 @@
-////
-/// @group Typography
-////
-
-/// Default link style for use on a normal (light) background
-/// @since 0.3.1
-@mixin nds-link-default {
-  color: $nds-colour-link;
-  -webkit-tap-highlight-color: rgba($nds-colour-focus, 0.333);
-  text-decoration: underline;
-  text-decoration-skip-ink: auto;
-
-  &:visited {
-    color: $nds-colour-link-visited;
-  }
-
-  &:hover {
-    color: $nds-colour-link-hover;
-    text-decoration-thickness: 0.15rem;
-  }
-
-  &:focus {
-    @include nds-default-focus-style;
-    color: $nds-colour-link-focus-text;
-  }
-
-  &:active {
-    color: $nds-colour-link-active;
-  }
-}
-/// Default links for use on a light background
-/// @require {mixin} link-default
-/// @since 0.5.0
-@mixin nds-links-default {
-  a {
-    @include nds-link-default;
-  }
-}
-
-/// Inverse link style for use on an inverse (dark) background
-/// @since 0.3.1
-@mixin nds-link-inverse {
-  color: $nds-colour-link-inverse;
-  -webkit-tap-highlight-color: rgba($nds-colour-focus, 0.333);
-  text-decoration: underline;
-  text-decoration-skip-ink: auto;
-
-  &:visited {
-    color: $nds-colour-link-inverse-visited;
-  }
-
-  &:hover {
-    color: $nds-colour-link-inverse-hover;
-  }
-
-  &:focus {
-    @include nds-inverse-focus-style;
-    color: $nds-colour-link-inverse-focus-text;
-  }
-
-  &:active {
-    color: $nds-colour-link-inverse-active;
-  }
-}
-
-/// Inverse links for use on a dark background
-/// @require {mixin} link-inverse
-/// @since 0.3.1
-@mixin nds-links-inverse {
-  a {
-    @include nds-link-inverse;
-  }
-}

package/scss/typography/_typography.scss

@@ -1 +0,0 @@
-@import 'typography-helpers', 'typography-links', 'typography-headings';