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

package/scss/typography/_helpers.scss

@@ -0,0 +1,171 @@
+@use "settings" as typography-settings;
+@use "../spacing";
+@use "../colours";
+@use "../utils";
+
+////
+/// @group Typography
+////
+
+/// Gets a font family from the `$font-families` map, given a name
+/// @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);
+  @return unquote($result);
+}
+
+/// Gets a numeric scale
+/// @param $scale {Integer|Name} The integer ratio or named font-size.
+/// @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);
+  } @else if is-integer($scale) {
+    @return $scale;
+  }
+
+  @error '`$scale` must either be an integer or exist as a named font size in `$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: get-font-size(2)
+/// @example
+///   $font-size: get-font-size(h1)
+/// @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);
+}
+
+/// 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: get-line-height(2)
+/// @example
+///   $line-height: get-line-height(h1)
+/// @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);
+}
+
+/// 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 font-size(-2);
+///   }
+/// @example
+///   .test {
+///     @include font-size(h1, true);
+///   }
+/// @since 0.1.0
+@mixin font-size($scale: 0, $important: false) {
+  $font-size: get-font-size($scale);
+  $line-height: get-line-height($scale);
+
+  @if $important {
+    font-size: utils.rem($font-size) !important;
+    line-height: utils.rem($line-height) !important;
+  } @else {
+    font-size: utils.rem($font-size);
+    line-height: utils.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 font(3);
+///   }
+/// @example
+///   .test {
+///     @include font(h1, true);
+///   }
+/// @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);
+  @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;
+  } @else {
+    margin-bottom: utils.rem(map-get($font-map, mb));
+    margin-top: utils.rem(map-get($font-map, mt));
+  }
+}
+
+/// Default paragraph style
+/// @since 0.5.2
+@mixin p {
+  @include font(p);
+  font-feature-settings: 'kern', 'onum', 'liga';
+  font-weight: normal;
+  max-width: 66ch;
+}
+
+/// Lead paragraph style
+/// @since 0.2.12
+@mixin lead {
+  @include font(lead);
+  font-weight: normal;
+  max-width: 66ch;
+}
+
+/// Base list style
+/// @since 0.1.0
+@mixin list {
+  font-feature-settings: 'kern', 'onum', 'liga';
+  margin-left: utils.rem(spacing.$medium);
+  max-width: 66ch;
+  padding: 0;
+}
+
+/// Text truncate
+/// Requires inline-block or block for proper styling
+/// @since 0.1.0
+@mixin 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 center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// 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 default-error-style($rounded: false) {
+  @if $rounded {
+    box-shadow: 0 0 0 utils.rem(spacing.$x-small) colours.$error;
+    outline: spacing.$x-small solid transparent;
+    outline-offset: spacing.$x-small;
+  } @else {
+    outline: utils.rem(spacing.$x-small) solid colours.$error;
+  }
+}

package/scss/typography/_index.scss

@@ -0,0 +1,4 @@
+@forward 'settings';
+@forward 'helpers';
+@forward 'links';
+@forward 'headings';

package/scss/typography/_links.scss

@@ -0,0 +1,76 @@
+@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: rgba(colours.$focus, 0.333);
+  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-text;
+  }
+
+  &: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: rgba(colours.$focus, 0.333);
+  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-text;
+  }
+
+  &: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,60 +1,64 @@
+@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 0.2.0
-$nds-font-family-sans: '"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif' !default;
+/// @since 2.0.0
+$font-family-sans: 'Inter, "Helvetica Neue", Helvetica, Arial, sans-serif' !default;
 
 /// Serif font stack
-/// @since 0.2.0
-$nds-font-family-serif: 'Georgia, "Times New Roman", Times, serif' !default;
+/// @since 2.0.0
+$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 [Lato, Helvetica Neue, Helvetica, Arial, sans-serif] The sans-serif font stack
-/// @prop {Font stack} serif [Georgia, "Times New Roman", Times, serif] The serif font stack
+/// @prop {Font stack} sans [Inter, Helvetica Neue, Helvetica, Arial, sans-serif] The sans-serif font stack
+/// @prop {Font stack} serif [Lora, Georgia, Times, serif] The serif font stack
 /// @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:math";
+@use "../typography/settings" as typography-settings;
+
+@forward "vendor/is";
+@forward "vendor/math";
+
 ////
 /// @group helpers
 ////
@@ -6,28 +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;
+  $divisor: strip-unit($base) * $multiplier;
 
   $em-vals: ();
 
   @each $val in $pixels {
-    $val-in-ems: math.div(nds-strip-unit($val), $divisor) * 1em;
+    $val-in-ems: math.div(strip-unit($val), $divisor) * 1em;
     $em-vals: append($em-vals, $val-in-ems);
   }
 
@@ -42,13 +46,13 @@
 
 /// 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;
+    $val-in-rems: math.div(strip-unit($val), $base) * 1rem;
     $rem-vals: append($rem-vals, $val-in-rems);
   }
 
@@ -71,11 +75,11 @@
 ///   .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 + &);

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;
-    }
-  }
-}