@nice-digital/nds-core 1.3.5-alpha.0 → 2.0.2-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-core",
-	"version": "1.3.5-alpha.0",
+	"version": "2.0.2-alpha.0",
 	"description": "Core code for the NICE Design System",
 	"author": "Ian Routledge <ian.routledge@nice.org.uk>",
 	"contributors": [
@@ -33,7 +33,7 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/icons": "^3.0.2-alpha.0",
+		"@nice-digital/icons": "^4.0.0-alpha.0",
 		"prop-types": "^15.7.2",
 		"sass-mq": "^6.0.0"
 	},
@@ -44,5 +44,5 @@
 	"devDependencies": {
 		"@babel/cli": "^7.5.0"
 	},
-	"gitHead": "0ddae81edebd757a52ca6a2838610049a83acebd"
+	"gitHead": "04839cc13ae0a0fbd0baeefff5996943285dafab"
 }

package/scss/colours/_index.scss

@@ -1,2 +1 @@
-@forward "nice-brand";
-@forward "semantic";
+@forward 'tokens/alias';

package/scss/colours/tokens/_alias.scss

@@ -0,0 +1,163 @@
+@use 'global';
+
+// Text, links, focus
+$text: global.$nice-black;
+$text-inverse: global.$white;
+$link: global.$custom-blue-1;
+$link-hover: global.$custom-blue-2;
+$link-visited: global.$custom-purple-1;
+$link-active: global.$nice-black;
+$link-focus: global.$custom-blue-1;
+$link-inverse: global.$white;
+$link-inverse-hover: global.$custom-grey-2;
+$link-inverse-visited: global.$white;
+$link-inverse-active: global.$custom-grey-2;
+$link-inverse-focus: global.$white;
+$code-background: global.$custom-grey-4;
+$mark: global.$custom-yellow-highlight;
+$focus: global.$custom-teal;
+$focus-inverse: global.$white;
+$text-print: global.$black;
+
+// Buttons
+$btn-cta: global.$yellow;
+$btn-cta-hover: global.$custom-yellow-shade;
+$btn-cta-text: global.$nice-black;
+$btn-cta-border: global.$white;
+$btn-primary: global.$black-tint-1;
+$btn-primary-hover: global.$nice-black;
+$btn-primary-text: global.$white;
+$btn-secondary: global.$custom-grey-3;
+$btn-secondary-hover: global.$black-tint-1;
+$btn-secondary-text: global.$white;
+$btn-inverse: global.$white;
+$btn-inverse-hover: global.$custom-grey-2;
+$btn-inverse-text: global.$nice-black;
+
+// Borders
+$border: global.$custom-grey-1;
+$border-selected: global.$nice-teal;
+
+// Status
+$error: global.$custom-red-1;
+$error-background: global.$custom-red-1-tint;
+$info: global.$custom-blue-3;
+$info-background: global.$custom-blue-3-tint;
+$caution: global.$custom-orange-1;
+$caution-background: global.$custom-orange-1-tint;
+$success: global.$custom-green-1;
+$success-background: global.$custom-green-1-tint;
+
+// Fills
+$fill-page-background: global.$nice-cream-tint-1;
+
+// Forms
+$form-group-hint: global.$black-tint-1;
+$checkbox: global.$nice-black;
+$checkbox-hint: global.$black-tint-1;
+$radio: global.$nice-black;
+$radio-hint: global.$black-tint-1;
+
+// Components...
+
+// A-Z list
+$a-z-list-heading-background: global.$white;
+
+// Action banner
+$action-banner-default-background: global.$nice-blue;
+$action-banner-default-border: global.$nice-black;
+$action-banner-subtle-background: global.$nice-cream;
+$action-banner-subtle-border: global.$nice-cream;
+
+// Alphabet
+$alphabet-letter-background: global.$white;
+$alphabet-letter-span: global.$black-tint-1;
+
+// Card
+$card-author: global.$black-tint-1;
+$card-metadata: global.$black-tint-1;
+
+// Callout
+$callout-background: global.$white;
+
+// Column list
+$column-list-boxed-background: global.$white;
+
+// Enhanced pagination
+$enhanced-pagination-current-item-background: global.$custom-grey-2;
+$enhanced-pagination-link-hover-background: global.$white;
+
+// Filters
+$filter-panel-background: global.$custom-grey-4;
+$filter-panel-heading-button-background: global.$custom-grey-2;
+$filter-group-heading-background: global.$custom-grey-2;
+$filter-group-heading-button-background: global.$custom-grey-2;
+$filter-group-heading-button-background-hover: global.$custom-grey-1;
+$filter-option-background: global.$white;
+$filter-option-border: global.$custom-grey-2;
+$filter-option-hover: global.$custom-grey-4;
+$filter-option-hover-border: global.$custom-grey-1;
+$filter-option-text-before-background: global.$white;
+$filter-option-text-before-border: global.$black-tint-1;
+$filter-input-controls-border: global.$custom-grey-2;
+
+// Full bleed
+$full-bleed-background: global.$white;
+$full-bleed-light-background: global.$nice-teal;
+$full-bleed-light-text: global.$white;
+
+// Hero
+$hero-background: global.$nice-blue-tint-1;
+$hero-border: global.$nice-blue-tint-2;
+
+// Horizontal nav
+$horizontal-nav-list-border: global.$nice-black;
+$horizontal-nav-current-link-background: global.$custom-grey-4;
+$horizontal-nav-current-link-border: global.$nice-black;
+$horizontal-nav-current-link: global.$nice-black;
+$horizontal-nav-active-link-mobile: global.$white;
+$horizontal-nav-active-link-mobile-background: global.$nice-teal;
+
+// Icons
+$icons: global.$nice-teal;
+
+// Panels
+$panel-default-background: global.$nice-cream;
+$panel-default-border: global.$custom-grey-2;
+$panel-impact-background: global.$nice-blue;
+$panel-impact-border: global.$nice-blue;
+$panel-impact-alt-background-1: global.$nice-blue;
+$panel-impact-alt-background-2: global.$nice-blue-tint-1;
+$panel-primary-background: global.$white;
+$panel-primary-border: global.$nice-teal-tint-2;
+$panel-inverse-background: global.$black-tint-1;
+
+// Quote
+$quote-left-border: global.$nice-teal;
+
+// Stacked nav
+$stacked-nav-background: global.$white;
+$stacked-nav-active-hint: global.$white;
+$stacked-nav-current-link: global.$custom-grey-4;
+$stacked-nav-current-link-background: global.$nice-teal;
+$stacked-nav-current-link-active: global.$white;
+$stacked-nav-link-hover: global.$custom-grey-2;
+
+// Tables
+$table-heading: global.$white;
+$table-row-odd: global.$nice-cream-tint-1;
+$table-row-even: global.$nice-cream-3;
+
+// Tabs
+$tab-btn-selected: global.$custom-grey-4;
+$tab-pane: global.$custom-grey-4;
+$tab-content: global.$custom-grey-4;
+
+// Tags
+$tag-background: global.$black-tint-1;
+$tag-outline: global.$black-tint-1;
+$tag-outline-background: global.$custom-grey-4;
+$tag-remove: global.$nice-teal;
+$tag-remove-hover-after: global.$nice-black;
+$tag-anchor: global.$white;
+$tag-print: global.$black;

package/scss/colours/tokens/_global.scss

@@ -0,0 +1,47 @@
+// Global tokens - do not reference these directly, use alias tokens instead!
+
+// Primary palette
+$nice-teal: #228096;
+$nice-cream: #f7f4f1;
+$nice-blue: #00436c;
+$white: #fff;
+$black: #000;
+$nice-black: #0e0e0e;
+
+// Secondary palette
+$yellow: #ead054;
+
+// Tertiary palette
+$nice-teal-tint-1: #59a0b0;
+$nice-teal-tint-2: #91c0cb;
+$nice-teal-tint-3: #c8e0e6;
+$nice-blue-tint-1: #407291;
+$nice-blue-tint-2: #80a1b5;
+$nice-blue-tint-3: #bfd0da;
+$nice-cream-1: #ded5ca;
+$nice-cream-2: #e6e0d7;
+$nice-cream-3: #eeeae4;
+$nice-cream-tint-1: #fbfaf8;
+$black-tint-1: #404040;
+$black-tint-2: #808080;
+$black-tint-3: #bfbfbf;
+
+// Custom palette
+$custom-grey-1: #adadad;
+$custom-grey-2: #d6d6d6;
+$custom-grey-3: #666;
+$custom-grey-4: #e9e9e9;
+$custom-blue-1: #005ea5;
+$custom-blue-2: #003761;
+$custom-blue-3: #3479d0;
+$custom-blue-3-tint: #eff4fc;
+$custom-purple-1: #4c2c92;
+$custom-red-1: #b50f23;
+$custom-red-1-tint: #f9eced;
+$custom-orange-1: #dc8a07;
+$custom-orange-1-tint: #fbf7f1;
+$custom-green-1: #68c103;
+$custom-green-1-tint: #f3faeb;
+$custom-yellow-shade: #d6ba32;
+$custom-yellow-highlight: #fff999;
+$custom-teal: #0092a6;

package/scss/focus/_index.scss

@@ -1,6 +1,6 @@
-@use "../spacing";
-@use "../colours";
-@use "../utils";
+@use '../spacing';
+@use '../colours';
+@use '../utils';
 
 ////
 /// @group helpers

package/scss/glyphs/_index.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 ////
 /// @group helpers
 ////
@@ -10,6 +12,7 @@
 /// @prop {String} bullet [2022] Bullet (•)
 /// @prop {String} copyright [00a9] Copyright symbol (©)
 /// @prop {String} greater-than [003e] Greater than symbol (>)
+/// @prop {String} heavy-multiplication-x [2716] Heavy multiplication x (✖)
 /// @prop {String} hyphen-minus [002d] Hyphen minus (-)
 /// @prop {String} left-double-quotation-mark [201C] Left double quotation mark (“)
 /// @prop {String} less-than [003c] Less than symbol (<)
@@ -21,6 +24,7 @@ $glyphs: (
   bullet: '2022',
   copyright: '00a9',
   greater-than: '003e',
+  heavy-multiplication-x: '2716',
   hyphen-minus: '002d',
   left-double-quotation-mark: '201C',
   less-than: '003c',
@@ -49,8 +53,8 @@ $glyphs: (
   $codes: '';
 
   @each $name in $names {
-    @if map-has-key($glyphs, $name) {
-      $code: map-get($glyphs, $name);
+    @if map.has-key($glyphs, $name) {
+      $code: map.get($glyphs, $name);
       $codes: $codes + '\\#{$code}';
     } @else {
       @error 'Glyph with name #{$name} could not be found in the $glyphs map';

package/scss/layout/_index.scss

@@ -1,5 +1,5 @@
-@use "../spacing";
-@use "../utils";
+@use '../spacing';
+@use '../utils';
 
 /// The maximum width of the default container, in pixels
 /// @since 0.5.2
@@ -19,7 +19,7 @@ $readable-width: 66ch;
   margin: auto;
   max-width: utils.rem($container-max-width);
   width: 96%; // IE11 support for calc not consistent https://caniuse.com/calc (See "Known issues")
-  width: calc(100% - #{rem($container-gutter * 2)});
+  width: calc(100% - #{utils.rem($container-gutter * 2)});
 }
 
 /// Make an element adapt its height to fit floated children, and clear floats in both directions.
@@ -38,6 +38,6 @@ $readable-width: 66ch;
 
 /// Placeholder for clearfix
 /// @since 0.1.0
-%nds-clearfix {
+%clearfix {
   @include clearfix;
 }

package/scss/modular-scale/_index.scss

@@ -1,4 +1,6 @@
-@use "sass:math";
+@use 'sass:math';
+
+// stylelint-disable number-max-precision
 
 /// Modular scale values
 /// @link http://www.modularscale.com/

package/scss/typography/_headings.scss

@@ -1,4 +1,4 @@
-@use "helpers";
+@use 'helpers';
 
 ////
 /// @group Typography
@@ -12,10 +12,7 @@
   clear: both;
   font-family: helpers.get-font-family(serif);
   font-weight: 600;
-  // Letter spacing and text shadow to mimic 900 weight, see https://github.com/nice-digital/nice-design-system/issues/240
-  letter-spacing: 0.5px;
   max-width: 66ch;
-  text-shadow: 1.5px 0 0 currentColor;
 }
 
 /// Secondary heading. Used for h2 tag but can be used directly
@@ -57,6 +54,7 @@
 @mixin h5 {
   @include helpers.font(h5);
   clear: both;
+  font-family: helpers.get-font-family(sans);
   font-weight: 700;
   max-width: 66ch;
 }
@@ -67,6 +65,7 @@
 @mixin h6 {
   @include helpers.font(h6);
   clear: both;
+  font-family: helpers.get-font-family(sans);
   font-weight: 700;
   max-width: 66ch;
 }

package/scss/typography/_helpers.scss

@@ -1,7 +1,8 @@
-@use "settings" as typography-settings;
-@use "../spacing";
-@use "../colours";
-@use "../utils";
+@use 'sass:map';
+@use 'settings' as typography-settings;
+@use '../spacing';
+@use '../colours';
+@use '../utils';
 
 ////
 /// @group Typography
@@ -11,7 +12,7 @@
 /// @param {String} $stack The stack name e.g. sans, serif or mono
 /// @since 0.1.0
 @function get-font-family($stack) {
-  $result: map-get(typography-settings.$font-families, $stack);
+  $result: map.get(typography-settings.$font-families, $stack);
   @return unquote($result);
 }
 
@@ -20,7 +21,7 @@
 /// @since 0.1.0
 @function get-scale-integer($scale) {
   @if map-has-key(typography-settings.$named-font-sizes, $scale) {
-    @return map-get(typography-settings.$named-font-sizes, $scale);
+    @return map.get(typography-settings.$named-font-sizes, $scale);
   } @else if is-integer($scale) {
     @return $scale;
   }
@@ -39,8 +40,8 @@
 /// @since 0.1.0
 @function get-font-size($scale) {
   $scale-integer: get-scale-integer($scale);
-  $font-map: map-get(typography-settings.$font-sizes, $scale-integer);
-  @return map-get($font-map, fs);
+  $font-map: map.get(typography-settings.$font-sizes, $scale-integer);
+  @return map.get($font-map, fs);
 }
 
 /// Gets a numeric line height (in px) from a given scale multiplier.
@@ -54,8 +55,8 @@
 /// @since 0.1.0
 @function get-line-height($scale) {
   $scale-integer: get-scale-integer($scale);
-  $font-map: map-get(typography-settings.$font-sizes, $scale-integer);
-  @return map-get($font-map, lh);
+  $font-map: map.get(typography-settings.$font-sizes, $scale-integer);
+  @return map.get($font-map, lh);
 }
 
 /// Applies font size and line-height for the given scale.
@@ -97,15 +98,15 @@
 /// @since 0.1.0
 @mixin font($scale, $important: false) {
   $scale-integer: get-scale-integer($scale);
-  $font-map: map-get(typography-settings.$font-sizes, $scale-integer);
+  $font-map: map.get(typography-settings.$font-sizes, $scale-integer);
   @include font-size($scale, $important);
 
   @if $important {
-    margin-bottom: utils.rem(map-get($font-map, mb)) !important;
-    margin-top: utils.rem(map-get($font-map, mt)) !important;
+    margin-bottom: utils.rem(map.get($font-map, mb)) !important;
+    margin-top: utils.rem(map.get($font-map, mt)) !important;
   } @else {
-    margin-bottom: utils.rem(map-get($font-map, mb));
-    margin-top: utils.rem(map-get($font-map, mt));
+    margin-bottom: utils.rem(map.get($font-map, mb));
+    margin-top: utils.rem(map.get($font-map, mt));
   }
 }
 

package/scss/typography/_links.scss

@@ -1,5 +1,6 @@
-@use "../colours";
-@use "../focus";
+@use 'sass:color';
+@use '../colours';
+@use '../focus';
 
 ////
 /// @group Typography
@@ -9,7 +10,7 @@
 /// @since 0.3.1
 @mixin link-default {
   color: colours.$link;
-  -webkit-tap-highlight-color: rgba(colours.$focus, 0.333);
+  -webkit-tap-highlight-color: color.adjust(colours.$focus, $alpha: -0.666);
   text-decoration: underline;
   text-decoration-skip-ink: auto;
 
@@ -24,13 +25,14 @@
 
   &:focus {
     @include focus.default-focus-style;
-    color: colours.$link-focus-text;
+    color: colours.$link-focus;
   }
 
   &:active {
     color: colours.$link-active;
   }
 }
+
 /// Default links for use on a light background
 /// @require {mixin} link-default
 /// @since 0.5.0
@@ -44,7 +46,7 @@
 /// @since 0.3.1
 @mixin link-inverse {
   color: colours.$link-inverse;
-  -webkit-tap-highlight-color: rgba(colours.$focus, 0.333);
+  -webkit-tap-highlight-color: color.adjust(colours.$focus, $alpha: -0.666);
   text-decoration: underline;
   text-decoration-skip-ink: auto;
 
@@ -58,7 +60,7 @@
 
   &:focus {
     @include focus.inverse-focus-style;
-    color: colours.$link-inverse-focus-text;
+    color: colours.$link-inverse-focus;
   }
 
   &:active {

package/scss/utils/_index.scss

@@ -1,8 +1,8 @@
-@use "sass:math";
-@use "../typography/settings" as typography-settings;
+@use 'sass:list';
+@use 'sass:math';
+@use '../typography/settings' as typography-settings;
 
-@forward "vendor/is";
-@forward "vendor/math";
+@forward 'vendor/is';
 
 ////
 /// @group helpers
@@ -25,14 +25,13 @@
   // $base could be in em or px (no unit = px).
   // Adjust accordingly to create a $divisor that
   // serves as context for $pixels.
-  $multiplier: if(unit($base) == em, 16, 1);
+  $multiplier: if(math.unit($base) == em, 16, 1);
   $divisor: strip-unit($base) * $multiplier;
-
   $em-vals: ();
 
   @each $val in $pixels {
     $val-in-ems: math.div(strip-unit($val), $divisor) * 1em;
-    $em-vals: append($em-vals, $val-in-ems);
+    $em-vals: list.append($em-vals, $val-in-ems);
   }
 
   @if length($em-vals) == 1 {
@@ -53,13 +52,13 @@
   $rem-vals: ();
   @each $val in $pixels {
     $val-in-rems: math.div(strip-unit($val), $base) * 1rem;
-    $rem-vals: append($rem-vals, $val-in-rems);
+    $rem-vals: list.append($rem-vals, $val-in-rems);
   }
 
   @if length($rem-vals) == 1 {
     // return a single value instead of a list,
     // so it can be used in calculations
-    @return nth($rem-vals, 1);
+    @return list.nth($rem-vals, 1);
   } @else {
     @return $rem-vals;
   }
@@ -82,10 +81,10 @@
 @mixin when-is($element-selectors...) {
   $selectors: ();
   @each $element-selector in $element-selectors {
-    $selectors: append($selectors, $element-selector + &);
+    $selectors: list.append($selectors, $element-selector + &);
   }
 
-  @at-root #{zip($selectors)} {
+  @at-root #{list.zip($selectors)} {
     @content;
   }
 }

package/scss/utils/vendor/_is.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // See https://gist.github.com/HugoGiraudel/2933ef053ae0bf70ad8b
 // ----
 // Sass (v3.4.9)
@@ -9,7 +11,7 @@
 }
 
 @function is-time($value) {
-  @return is-number($value) and index('ms' 's', unit($value)) != null;
+  @return is-number($value) and index('ms' 's', math.unit($value)) != null;
 }
 
 @function is-duration($value) {
@@ -17,11 +19,11 @@
 }
 
 @function is-angle($value) {
-  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
+  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', math.unit($value)) != null;
 }
 
 @function is-frequency($value) {
-  @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
+  @return is-number($value) and index('Hz' 'kHz', math.unit($value)) != null;
 }
 
 @function is-integer($value) {
@@ -29,11 +31,11 @@
 }
 
 @function is-relative-length($value) {
-  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
+  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', math.unit($value)) != null;
 }
 
 @function is-absolute-length($value) {
-  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
+  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', math.unit($value)) != null;
 }
 
 @function is-percentage($value) {
@@ -45,7 +47,7 @@
 }
 
 @function is-resolution($value) {
-  @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
+  @return is-number($value) and index('dpi' 'dpcm' 'dppx', math.unit($value)) != null;
 }
 
 @function is-position($value) {

package/scss/colours/_nice-brand.scss

@@ -1,80 +0,0 @@
-////
-/// @group colors
-////
-
-// PRIMARY PALETTE
-
-/// NICE Black. Part of the primary palette.
-/// @since 0.2.0
-$nice-black: #222;
-
-/// NICE White. Part of the primary palette
-/// @since 0.2.0
-$nice-white: #fff;
-
-/// NICE Teal. Part of the primary palette.
-/// First choice of colour for supporting
-/// @since 0.2.0
-$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
-$nice-purple: #451551;
-
-/// Cool Teal. Part of the secondary palette.
-/// @since 0.2.0
-$nice-cool-teal: #00506a;
-
-/// Rich Black. Part of the secondary palette.
-/// @since 0.2.0
-$nice-rich-black: #0e0e0e;
-
-/// Dark Grey. Part of the secondary palette.
-/// @since 0.2.0
-$nice-dark-grey: #393939;
-
-/// Grey 1. Part of the secondary palette.
-/// @since 0.2.0
-$nice-grey-1: #adadad;
-
-/// Grey 2. Part of the secondary palette.
-/// @since 0.2.0
-$nice-grey-2: #d6d6d6;
-
-/// Grey 3. Part of the secondary palette.
-/// @since 0.2.0
-$nice-grey-3: #e9e9e9;
-
-// TERTIARY PALETTE
-
-/// Blue 1. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-blue-1: #233746;
-
-/// Blue 2. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-blue-2: #314c60;
-
-/// Blue 3. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-blue-3: #517489;
-
-/// Ice Teal. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-ice-teal: #a2bdc1;
-
-/// Teal 1. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-teal-1: #4f7d83;
-
-/// Teal 2. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-teal-2: #18646e;
-
-/// Teal 3. Part of the tertiary palette.
-/// @since 0.2.0
-$nice-teal-3: #15434a;

package/scss/colours/_semantic.scss

@@ -1,247 +0,0 @@
-////
-/// @group colors
-////
-
-@use 'nice-brand';
-
-/// True black, used for print styles
-/// @since 0.2.0
-$true-black: #000;
-
-/// True white, used for print styles
-/// @since 0.2.0
-$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
-$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 $body.
-/// @since 0.2.0
-$text: nice-brand.$nice-black;
-
-/// Subtle text colour
-/// @since 0.2.0
-$text-subtle: nice-brand.$nice-grey-1;
-
-/// Inverse body text colour for use on dark background
-/// @since 0.2.2
-$text-inverse: nice-brand.$nice-white;
-
-/// Icons colour
-/// @since 0.2.0
-$icons: nice-brand.$nice-teal;
-
-// LINKS
-
-/// Link text colour
-/// @since 0.2.0
-$link: #005ea5;
-
-/// Link hover colour
-/// @since 0.2.0
-$link-hover: #003761;
-
-/// Link visited colour
-/// @since 0.2.0
-$link-visited: #4c2c92;
-
-/// Link active colour
-/// @since 0.2.0
-$link-active: $text;
-
-/// Link focus text colour
-/// @since 0.2.11
-$link-focus-text: $link;
-
-// INVERSE LINKS
-
-/// Inverse link text colour
-/// @since 0.2.9
-$link-inverse: $text-inverse;
-
-/// Inverse link hover text colour
-/// @since 0.2.9
-$link-inverse-hover: nice-brand.$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
-$link-inverse-visited: $link-inverse;
-
-/// Inverse link active text colour
-/// @since 0.2.9
-$link-inverse-active: $link-inverse-hover;
-
-/// Inverse link focus text colour
-/// @since 0.2.9
-$link-inverse-focus-text: $link-inverse;
-
-// FOCUS
-
-/// Focus colour
-/// @since 0.2.0
-$focus: #0092a6;
-
-/// Focus colour
-/// @since 0.3.1
-$focus-inverse: $link-inverse;
-
-// CTA BUTTONS
-
-/// CTA button background colour
-/// @since 0.2.2
-$btn-cta: nice-brand.$nice-purple;
-
-/// CTA button hover colour
-/// @since 0.2.2
-$btn-cta-hover: #260b2d;
-
-/// CTA button text colour
-/// @since 0.2.2
-$btn-cta-text: nice-brand.$nice-white;
-
-// PRIMARY BUTTONS
-
-/// Primary button background colour
-/// @since 0.2.2
-$btn-primary: nice-brand.$nice-dark-grey;
-
-/// Primary button hover colour
-/// @since 0.2.2
-$btn-primary-hover: nice-brand.$nice-rich-black;
-
-/// Primary button text colour
-/// @since 0.2.2
-$btn-primary-text: nice-brand.$nice-white;
-
-// SECONDARY BUTTONS
-
-/// Secondary button background colour
-/// @since 0.2.2
-$btn-secondary: #666;
-
-/// Secondary button hover colour
-/// @since 0.2.2
-$btn-secondary-hover: #333;
-
-/// Primary button text colour
-/// @since 0.2.2
-$btn-secondary-text: nice-brand.$nice-white;
-
-// LIGHT BUTTONS
-
-/// Inverse (light) button background colour
-/// @since 0.2.2
-$btn-inverse: nice-brand.$nice-white;
-
-/// Inverse (light) button hover colour
-/// @since 0.2.2
-$btn-inverse-hover: nice-brand.$nice-grey-3;
-
-/// Inverse (light) button text colour
-/// @since 0.2.2
-$btn-inverse-text: nice-brand.$nice-rich-black;
-
-// BACKGROUNDS/BORDERS
-
-/// Borders, separators, rules, keylines etc.
-/// @since 0.2.0
-$border: nice-brand.$nice-grey-1;
-
-/// Focused Borders, separators, rules, keylines etc.
-/// @since 0.4.2
-$border-focus: nice-brand.$nice-blue-3;
-
-// NOTIFICATIONS/BANNERS
-
-/// Agile lifecycle phase banner
-/// @since 0.2.2
-$agile-phase: #009ae9;
-
-/// Discovery agile lifecycle phase
-/// @since 0.2.0
-/// @deprecated Use $agile-phase instead
-$discovery: #b8008e;
-
-/// Alpha badges and banners
-/// @since 0.2.0
-/// @deprecated Use $agile-phase instead
-$alpha: #d5367f;
-
-/// Beta badges and banners
-/// @since 0.2.0
-/// @deprecated Use $agile-phase instead
-$beta: #bd5826;
-
-/// Live badges and banners
-/// @since 0.2.0
-/// @deprecated Use $agile-phase instead
-$live: #578137;
-
-/// Error text and border colour
-/// @since 1.7.0
-$error: #b50f23;
-
-/// Error background colour
-/// @since 1.7.0
-$error-background: #f9eced;
-
-/// Caution text and border colour
-/// @since 1.7.0
-$caution: #dc8a07;
-
-/// Caution background colour
-/// @since 1.7.0
-$caution-background: #fbf7f1;
-
-/// Info text and border colour
-/// @since 1.7.0
-$info: #3479d0;
-
-/// Info background colour
-/// @since 1.7.0
-$info-background: #eff4fc;
-
-/// Success text and border colour
-/// @since 1.7.0
-$success: #68c103;
-
-/// Success background colour
-/// @since 1.7.0
-$success-background: #f3faeb;
-
-/// <mark> tag highlighter colour
-/// @since 1.2.4
-$mark: #fff999;
-
-// GUIDANCE TYPES
-
-/// New guidance colour
-/// @since 0.3.0
-$guidance-new: nice-brand.$nice-purple;
-
-/// Updated guidance colour
-/// @since 0.3.0
-$guidance-updated: nice-brand.$nice-blue-3;
-
-/// In consultation guidance colour
-/// @since 0.3.0
-$guidance-consultation: #557021;
-
-// HERO
-
-/// Background colour for the hero component
-/// @since 0.5.2
-$hero-background: nice-brand.$nice-teal-2;
-
-/// Colour for the border in the hero component
-/// @since 0.5.2
-$hero-border: nice-brand.$nice-teal-3;

package/scss/settings/_settings-colour-alias-tokens.scss

@@ -1,53 +0,0 @@
-// Text, links
-$nds-colour-text: $global-nice-black;
-$nds-colour-text-inverse: $global-white;
-$nds-colour-link: $global-custom-blue-1;
-$nds-colour-link-hover: $global-custom-blue-2;
-$nds-colour-link-visited: $global-custom-purple-1;
-$nds-colour-link-active: $global-nice-black;
-$nds-colour-link-inverse: $global-white;
-$nds-colour-link-inverse-hover: $global-custom-grey-2;
-$nds-colour-link-inverse-visited: $global-white;
-$nds-colour-link-inverse-active: $global-custom-grey-2;
-$nds-colour-link-focus: $global-custom-blue-1;
-$nds-colour-link-focus-inverse: $global-white;
-
-// Buttons
-$nds-colour-btn-cta: $global-yellow;
-$nds-colour-btn-cta-hover: $global-custom-yellow-shade;
-$nds-colour-btn-cta-text: $global-nice-black;
-$nds-colour-btn-primary: $global-black-tint-1;
-$nds-colour-btn-primary-hover: $global-nice-black;
-$nds-colour-btn-primary-text: $global-white;
-$nds-colour-btn-secondary: $global-custom-grey-3;
-$nds-colour-btn-secondary-hover: $global-black-tint-1;
-$nds-colour-btn-secondary-text: $global-white;
-$nds-colour-btn-inverse: $global-white;
-$nds-colour-btn-inverse-hover: $global-custom-grey-2;
-$nds-colour-btn-inverse-text: $global-nice-black;
-
-// Borders
-$nds-colour-border: $global-custom-grey-1;
-$nds-colour-border-selected: $global-nice-teal;
-
-// Status
-$nds-colour-status-error: $global-custom-red-1;
-$nds-colour-status-error-background: $global-custom-red-1-tint;
-$nds-colour-status-info: $global-custom-blue-3;
-$nds-colour-status-info-background: $global-custom-blue-3-tint;
-$nds-colour-status-caution: $global-custom-orange-1;
-$nds-colour-status-caution-background: $global-custom-orange-1-tint;
-$nds-colour-status-success: $global-custom-green-1;
-$nds-colour-status-success-background: $global-custom-green-1-tint;
-
-// Forms
-// $nds-colour-input: ;
-// $nds-colour-textarea: ;
-// $nds-colour-checkbox: ;
-// $nds-colour-checkbox-active: ;
-// $nds-colour-radio: ;
-// $nds-colour-radio-active: ;
-// $nds-colour-nav-bar-background: ;
-// $nds-colour-nav-bar-selected-background: ;
-
-// Components...

package/scss/settings/_settings-colour-global-tokens.scss

@@ -1,44 +0,0 @@
-// Global tokens - do not reference these directly, use alias tokens instead!
-
-// Primary palette
-$global-nice-teal: #228096;
-$global-nice-cream: #f7f4f1;
-$global-nice-blue: #00436c;
-$global-white: #fff;
-$global-black: #000;
-$global-nice-black: #0e0e0e;
-
-// Secondary palette
-$global-yellow: #ead054;
-
-// Tertiary palette
-$global-nice-teal-tint-1: #59a0b0;
-$global-nice-teal-tint-2: #91c0cb;
-$global-nice-teal-tint-3: #c8e0e6;
-$global-nice-blue-tint-1: #407291;
-$global-nice-blue-tint-2: #80a1b5;
-$global-nice-blue-tint-3: #bfd0da;
-$global-nice-cream-1: #ded5ca;
-$global-nice-cream-2: #e6e0d7;
-$global-nice-cream-3: #eeeae4;
-$global-nice-cream-tint-1: #fbfaf8;
-$global-black-tint-1: #404040;
-$global-black-tint-2: #808080;
-$global-black-tint-3: #bfbfbf;
-
-// Custom palette
-$global-custom-grey-1: #adadad;
-$global-custom-grey-2: #d6d6d6;
-$global-custom-grey-3: #666;
-$global-custom-blue-1: #005ea5;
-$global-custom-blue-2: #003761;
-$global-custom-blue-3: #3479d0;
-$global-custom-blue-3-tint: #eff4fc;
-$global-custom-purple-1: #4c2c92;
-$global-custom-red-1: #b50f23;
-$global-custom-red-1-tint: #f9eced;
-$global-custom-orange-1: #dc8a07;
-$global-custom-orange-1-tint: #fbf7f1;
-$global-custom-green-1: #68c103;
-$global-custom-green-1-tint: #f3faeb;
-$global-custom-yellow-shade: #d6ba32;

package/scss/utils/vendor/_math.scss

@@ -1,79 +0,0 @@
-@use "sass:math";
-
-@function power ($x, $n) {
-    $ret: 1;
-
-    @if $n > 0 {
-        @for $i from 1 through $n {
-            $ret: $ret * $x;
-        }
-    } @else {
-        @for $i from $n to 0 {
-            $ret: math.div($ret, $x);
-        }
-    }
-
-    @return $ret;
-}
-
-@function factorial ($x) {
-    $ret: 1;
-
-    @if $x > 0 {
-        @while $x > 0 {
-            $ret: $ret * $x;
-
-            $x: $x - 1;
-        }
-    }
-
-    @return $ret;
-}
-
-@function sin ($x) {
-    $ret: 0;
-
-    @for $n from 0 to 25 {
-        $ret: $ret + math.div(power(-1, $n) * power($x, 2 * $n + 1), factorial(2 * $n + 1));
-    }
-
-    @return $ret;
-}
-
-@function cos ($x) {
-    $ret: 0;
-
-    @for $n from 0 to 25 {
-        $ret: $ret + math.div(power(-1, $n) * power($x, 2 * $n), factorial(2 * $n));
-    }
-
-    @return $ret;
-}
-
-@function exp ($x) {
-    $ret: 0;
-
-    @for $n from 0 to 25 {
-        $ret: $ret + math.div(power($x, $n), factorial($n));
-    }
-
-    @return $ret;
-}
-
-@function ln($x) {
-    $ret: 0;
-    $n: 1;
-    $dx: .001;
-
-    @while $n <= $x {
-        $ret: $ret + math.div($dx, $n);
-
-        $n: $n + $dx;
-    }
-
-    @return $ret;
-}
-
-@function sqrt($x) {
-    @return exp(0.5 * ln($x));
-}