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

package/scss/typography/_links.scss

@@ -0,0 +1,78 @@
+@use 'sass:color';
+@use '../colours';
+@use '../focus';
+
+////
+/// @group Typography
+////
+
+/// Default link style for use on a normal (light) background
+/// @since 0.3.1
+@mixin link-default {
+  color: colours.$link;
+  -webkit-tap-highlight-color: color.adjust(colours.$focus, $alpha: -0.666);
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+
+  &:visited {
+    color: colours.$link-visited;
+  }
+
+  &:hover {
+    color: colours.$link-hover;
+    text-decoration-thickness: 0.15rem;
+  }
+
+  &:focus {
+    @include focus.default-focus-style;
+    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
+@mixin links-default {
+  a {
+    @include link-default;
+  }
+}
+
+/// Inverse link style for use on an inverse (dark) background
+/// @since 0.3.1
+@mixin link-inverse {
+  color: colours.$link-inverse;
+  -webkit-tap-highlight-color: color.adjust(colours.$focus, $alpha: -0.666);
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+
+  &:visited {
+    color: colours.$link-inverse-visited;
+  }
+
+  &:hover {
+    color: colours.$link-inverse-hover;
+  }
+
+  &:focus {
+    @include focus.inverse-focus-style;
+    color: colours.$link-inverse-focus;
+  }
+
+  &:active {
+    color: colours.$link-inverse-active;
+  }
+}
+
+/// Inverse links for use on a dark background
+/// @require {mixin} link-inverse
+/// @since 0.3.1
+@mixin links-inverse {
+  a {
+    @include link-inverse;
+  }
+}

package/scss/{settings/_settings-typography.scss → typography/_settings.scss}

@@ -1,26 +1,30 @@
+@use '../media-queries';
+@use '../spacing';
+@use '../modular-scale';
+
 /// Baseline, in pixels
 /// @since 0.2.0
-$nds-baseline: 4 !default;
+$baseline: 4 !default;
 
 /// Base font size, in pixels
 /// @since 0.2.0
-$nds-base-font-size: $nds-baseline * 4 !default;
+$base-font-size: $baseline * 4 !default;
 
 /// Base line height, in pixels
 /// @since 0.2.0
-$nds-base-line-height: $nds-baseline * 6 !default;
+$base-line-height: $baseline * 6 !default;
 
 /// Sans-serif font stack
 /// @since 2.0.0
-$nds-font-family-sans: 'Inter, "Helvetica Neue", Helvetica, Arial, sans-serif' !default;
+$font-family-sans: 'Inter, "Helvetica Neue", Helvetica, Arial, sans-serif' !default;
 
 /// Serif font stack
 /// @since 2.0.0
-$nds-font-family-serif: 'Lora, Georgia, Times, serif' !default;
+$font-family-serif: 'Lora, Georgia, Times, serif' !default;
 
 /// Mono font stack
 /// @since 0.2.0
-$nds-font-family-mono: 'Monaco, Menlo, Consolas, "Courier New", monospace' !default;
+$font-family-mono: 'Monaco, Menlo, Consolas, "Courier New", monospace' !default;
 
 /// The font families in use across NICE.
 /// @prop {Font stack} sans [Inter, Helvetica Neue, Helvetica, Arial, sans-serif] The sans-serif font stack
@@ -28,33 +32,33 @@ $nds-font-family-mono: 'Monaco, Menlo, Consolas, "Courier New", monospace' !defa
 /// @prop {Font stack} mono [Monaco, Menlo, Consolas, "Courier New", monospace] The monospace font stack
 /// @see font-family
 /// @since 0.2.0
-$nds-font-families: (
-  sans: $nds-font-family-sans,
-  serif: $nds-font-family-serif,
-  mono: $nds-font-family-mono
+$font-families: (
+  sans: $font-family-sans,
+  serif: $font-family-serif,
+  mono: $font-family-mono
 ) !default;
 
 /// The modular scale ratio to use for typography
 /// @since 0.2.0
-$nds-type-ratio: nds-get-ratio(fourth) !default;
+$type-ratio: modular-scale.get-ratio(fourth) !default;
 
 /// The minimum root font size, in pixels
 /// @since 0.2.13
-$nds-root-font-size-min: 15;
+$root-font-size-min: 15;
 
-/// The maximum root font size, used from breakpoint `$nds-root-font-size-max-breakpoint`
+/// The maximum root font size, used from breakpoint `$root-font-size-max-breakpoint`
 /// @since 0.2.13
-$nds-root-font-size-max: 18;
+$root-font-size-max: 18;
 
 /// The breakpoint at which the root font size starts changing from minimum
 /// towards maximum.
 /// @since 0.2.13
-$nds-root-font-size-min-breakpoint: $nds-breakpoint-md;
+$root-font-size-min-breakpoint: media-queries.$md;
 
 /// The breakpoint at which the root font size stops changing and is at its maximum
 /// towards maximum.
 /// @since 0.2.13
-$nds-root-font-size-max-breakpoint: $nds-breakpoint-lg;
+$root-font-size-max-breakpoint: media-queries.$lg;
 
 /// A map of named font sizes to their corresponding modular scale factor
 /// @prop {Integer} h1 [5] Heading 1
@@ -66,7 +70,7 @@ $nds-root-font-size-max-breakpoint: $nds-breakpoint-lg;
 /// @prop {Integer} lead [2] Lead
 /// @prop {Integer} p [0] Paragraph
 /// @since 0.1.0
-$nds-named-font-sizes: (
+$named-font-sizes: (
   h1: 5,
   h2: 4,
   h3: 3,
@@ -79,59 +83,59 @@ $nds-named-font-sizes: (
 
 /// Numeric font sizes
 /// @since 0.2.0
-$nds-font-sizes: (
+$font-sizes: (
   -2: (
       fs: 12,
       lh: 18,
-      mb: $nds-spacing-small,
-      mt: $nds-spacing-small
+      mb: spacing.$small,
+      mt: spacing.$small
     ),
   -1: (
       fs: 14,
       lh: 20,
-      mb: $nds-spacing-medium,
-      mt: $nds-spacing-medium
+      mb: spacing.$medium,
+      mt: spacing.$medium
     ),
   0: (
     fs: 16,
     lh: 24,
-    mb: $nds-spacing-medium,
-    mt: $nds-spacing-medium
+    mb: spacing.$medium,
+    mt: spacing.$medium
   ),
   1: (
     fs: 18,
     lh: 24,
-    mb: $nds-spacing-medium,
-    mt: $nds-spacing-medium
+    mb: spacing.$medium,
+    mt: spacing.$large
   ),
   2: (
     fs: 20,
     lh: 28,
-    mb: $nds-spacing-medium,
-    mt: $nds-spacing-medium
+    mb: spacing.$medium,
+    mt: spacing.$large
   ),
   3: (
     fs: 28,
     lh: 32,
-    mb: $nds-spacing-medium,
-    mt: $nds-spacing-large
+    mb: spacing.$medium,
+    mt: spacing.$large
   ),
   4: (
     fs: 36,
     lh: 40,
-    mb: $nds-spacing-medium,
-    mt: $nds-spacing-large
+    mb: spacing.$medium,
+    mt: spacing.$large
   ),
   5: (
     fs: 44,
     lh: 56,
-    mb: $nds-spacing-medium,
+    mb: spacing.$medium,
     mt: 0
   ),
   6: (
     fs: 52,
     lh: 60,
-    mb: $nds-spacing-large,
+    mb: spacing.$large,
     mt: 0
   )
 );

package/scss/{helpers/_helpers-utils.scss → utils/_index.scss}

@@ -1,3 +1,9 @@
+@use 'sass:list';
+@use 'sass:math';
+@use '../typography/settings' as typography-settings;
+
+@forward 'vendor/is';
+
 ////
 /// @group helpers
 ////
@@ -6,29 +12,26 @@
 /// @param {Number} $num The number whose units you wish to strip.
 /// @since 0.2.0
 /// @link https://davidtheclark.github.io/scut/strip-unit.html
-@use "sass:math";
-
-@function nds-strip-unit($num) {
+@function strip-unit($num) {
   @return math.div($num, $num * 0 + 1);
 }
 
 /// Convert pixel-values to em-values.
 /// @param {Number} $pixels - The px-value you wish to convert to ems. No px unit necessary (e.g. 20 is fine, so is 20px). Passing a list will result in a list of em values (see examples).
-/// @param {Number} $base [$nds-base-font-size] - A base-value with which to calculate the em-value
+/// @param {Number} $base [typography.$base-font-size] - A base-value with which to calculate the em-value
 /// @since 0.2.0
 /// @link https://davidtheclark.github.io/scut/em.html
-@function em($pixels, $base: $nds-base-font-size) {
+@function em($pixels, $base: typography-settings.$base-font-size) {
   // $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);
-  $divisor: nds-strip-unit($base) * $multiplier;
-
+  $multiplier: if(math.unit($base) == em, 16, 1);
+  $divisor: strip-unit($base) * $multiplier;
   $em-vals: ();
 
   @each $val in $pixels {
-    $val-in-ems: math.div(nds-strip-unit($val), $divisor) * 1em;
-    $em-vals: append($em-vals, $val-in-ems);
+    $val-in-ems: math.div(strip-unit($val), $divisor) * 1em;
+    $em-vals: list.append($em-vals, $val-in-ems);
   }
 
   @if length($em-vals) == 1 {
@@ -42,20 +45,20 @@
 
 /// Convert pixel-values to rem-values.
 /// @param {Number} $pixels - The px-value you wish to convert to rems. No px unit necessary (e.g. 20 is fine, so is 20px). Passing a list will result in a list of rem values (see examples).
-/// @param {Number} $base [$nds-base-font-size] - A base-value with which to calculate the em-value
+/// @param {Number} $base [typography.$base-font-size] - A base-value with which to calculate the em-value
 /// @since 0.2.0
 /// @link https://davidtheclark.github.io/scut/rem.html
-@function rem($pixels, $base: $nds-base-font-size) {
+@function rem($pixels, $base: typography-settings.$base-font-size) {
   $rem-vals: ();
   @each $val in $pixels {
-    $val-in-rems: math.div(nds-strip-unit($val), $base) * 1rem;
-    $rem-vals: append($rem-vals, $val-in-rems);
+    $val-in-rems: math.div(strip-unit($val), $base) * 1rem;
+    $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;
   }
@@ -71,17 +74,17 @@
 ///   .something {
 ///     color: red;
 
-///     @include nds-when-is(a, button) {
+///     @include when-is(a, button) {
 ///       color: blue;
 ///     }
 ///   }
-@mixin nds-when-is($element-selectors...) {
+@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/{vendor/_vendor-is.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/visibility/_index.scss

@@ -0,0 +1,65 @@
+////
+/// @group visibility
+////
+
+/// Portrait media query
+@mixin portrait {
+  @media screen and (orientation: portrait) {
+    @content;
+  }
+}
+
+/// Landscape media query
+@mixin landscape {
+  @media screen and (orientation: landscape) {
+    @content;
+  }
+}
+
+/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
+@mixin invisible {
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
+}
+
+/// Reverses the CSS output created by the `invisible()` mixin.
+@mixin invisible-off {
+  clip: auto;
+  height: auto;
+  overflow: visible;
+  position: static !important;
+  width: auto;
+}
+
+/// Hide the element when printing
+/// @output the CSS to hide on the print stylesheet
+/// @since 1.0.0
+@mixin hide-print {
+  @media print {
+    display: none !important;
+  }
+}
+
+/// Only show the element when printing (not for other media)
+/// @output the CSS to hide on all media except print
+/// @since 1.0.0
+@mixin show-print {
+  display: none !important;
+  @media print {
+    display: block !important;
+  }
+}
+
+/// Remove an appended link URL
+/// @output removes content attribute
+/// @since 1.0.0
+@mixin remove-appended-print-link {
+  @media print {
+    &:after {
+      content: none !important;
+    }
+  }
+}

package/scss/core.scss

@@ -1,4 +0,0 @@
-@import 'settings/settings', 'vendor/vendor', 'helpers/helpers', 'layout/layout',
-  'typography/typography';
-
-@import '~sass-mq/mq';

package/scss/helpers/_helpers-clearfix.scss

@@ -1,23 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Make an element adapt its height to fit floated children, and clear floats in both directions.
-/// @since 0.1.0
-@mixin nds-clearfix {
-  &:before,
-  &:after {
-    content: ' ';
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-  }
-}
-
-/// Placeholder for clearfix
-/// @since 0.1.0
-%nds-clearfix {
-  @include nds-clearfix;
-}

package/scss/helpers/_helpers-lists.scss

@@ -1,45 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Shortcut for getting the first item from a list
-/// @link http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#selecting-values-from-list
-/// @since 0.1.0
-@function nds-first($list) {
-  @return nth($list, 1);
-}
-
-/// Shortcut for getting the last item from a list
-/// @link http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#selecting-values-from-list
-/// @since 0.1.0
-@function nds-last($list) {
-  @return nth($list, length($list));
-}
-
-/// Returns last index of `$value` in `$list`.
-///
-/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-last-index
-///
-/// @param {List} $list  - list to search
-/// @param {*}    $value - value to be searched for
-///
-/// @example
-/// sl-last-index(a b a, a)
-/// // 3
-///
-/// @example
-/// sl-last-index(a b a, z)
-/// // null
-///
-/// @return {Number | Null}
-///
-/// @since 0.1.0
-@function nds-last-index($list, $value) {
-  @for $i from length($list) through 1 {
-    @if nth($list, $i) == $value {
-      @return $i;
-    }
-  }
-
-  @return null;
-}

package/scss/helpers/_helpers-print.scss

@@ -1,35 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Styles to hide and show under the print media query
-
-/// Hide the element when printing
-/// @output the CSS to hide on the print stylesheet
-/// @since 1.0.0
-@mixin nds-hide-print {
-  @media print {
-    display: none !important;
-  }
-}
-
-///Only show the element when printing (not for other media)
-/// @output the CSS to hide on all media except print
-/// @since 1.0.0
-@mixin nds-show-print {
-  display: none !important;
-  @media print {
-    display: block !important;
-  }
-}
-
-///Remove an appended link URL
-/// @output removes content attribute
-/// @since 1.0.0
-@mixin nds-remove-appended-print-link {
-  @media print {
-    &:after {
-      content: none !important;
-    }
-  }
-}

package/scss/helpers/_helpers-text.scss

@@ -1,21 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Text truncate
-/// Requires inline-block or block for proper styling
-/// @since 0.1.0
-@mixin nds-text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/// Set and element to display as block and align
-/// centrally via auto left/right margins
-/// @since 0.1.0
-@mixin nds-center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}

package/scss/helpers/_helpers-visibility.scss

@@ -1,37 +0,0 @@
-////
-/// @group helpers
-////
-
-//## Mixins
-
-/// Portrait media query
-@mixin nds-portrait {
-  @media screen and (orientation: portrait) {
-    @content;
-  }
-}
-
-/// Landscape media query
-@mixin nds-landscape {
-  @media screen and (orientation: landscape) {
-    @content;
-  }
-}
-
-/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
-@mixin nds-invisible {
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  width: 1px;
-}
-
-/// Reverses the CSS output created by the `invisible()` mixin.
-@mixin nds-invisible-off {
-  clip: auto;
-  height: auto;
-  overflow: visible;
-  position: static !important;
-  width: auto;
-}

package/scss/helpers/_helpers.scss

@@ -1,2 +0,0 @@
-@import 'helpers-utils', 'helpers-clearfix', 'helpers-focus', 'helpers-glyphs',
-  'helpers-lists', 'helpers-text', 'helpers-visibility', 'helpers-print';

package/scss/layout/_layout-container.scss

@@ -1,12 +0,0 @@
-////
-/// @group components
-////
-
-/// Container placeholder.
-/// @since 1.0.0
-@mixin nds-container {
-  margin: auto;
-  max-width: rem($nds-container-max-width);
-  width: 96%; // IE11 support for calc not consistent https://caniuse.com/calc (See "Known issues")
-  width: calc(100% - #{rem($nds-container-gutter * 2)});
-}

package/scss/layout/_layout.scss

@@ -1 +0,0 @@
-@import 'layout-container';

package/scss/settings/_settings-breakpoints.scss

@@ -1,25 +0,0 @@
-/// Extra small break point
-/// @since 0.2.0
-$nds-breakpoint-xs: 400px !default;
-
-/// 'Small' break point. Roughly portrait tablets.
-/// @since 0.2.0
-$nds-breakpoint-sm: 600px !default;
-
-/// 'Medium' break point. Roughly landscape tablets.
-/// @since 0.2.0
-$nds-breakpoint-md: 900px !default;
-
-/// 'Large' break point. Roughly 'dektops'.
-/// @since 0.2.0
-$nds-breakpoint-lg: 1200px !default;
-
-/// 'Extra large' break point for wide screens
-/// @since 0.2.0
-$nds-breakpoint-xl: 1600px !default;
-
-/// Whether the site is responsive. Setting to false will disable
-/// generation of the responsie grid selectors.
-/// True by default.
-/// @since 0.2.0
-$nds-responsive: true !default;