@lightspeed/design-system-css 1.2.0 → 2.0.0

package/src/vend.ui/styles/global/_base-mixins.scss

@@ -1,7 +1,7 @@
 // Base mixins.
 
 // Reset container defaults
-@mixin vd-reset () {
+@mixin vd-reset() {
   @include font-smoothing;
 
   font-family: $vd-font-lato;
@@ -9,4 +9,3 @@
   line-height: normal;
   color: vd-colour(text);
 }
-

package/src/vend.ui/styles/global/_grid.scss

@@ -1,7 +1,7 @@
 // =================================== Responsive Grid =================================== //
 
 // Grid Settings
-@use "sass:math";
+@use 'sass:math';
 
 $vd-grid-columns: 12 !default;
 $vd-grid-block-max: 8 !default;
@@ -15,7 +15,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-grid-columns ($breakpoint) {
+@mixin vd-grid-columns($breakpoint) {
   @for $i from 1 through $vd-grid-columns {
     $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
 
@@ -33,7 +33,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-grid-block-columns ($breakpoint) {
+@mixin vd-grid-block-columns($breakpoint) {
   @for $i from 1 through $vd-grid-block-max {
     .vd-g-#{$breakpoint}-up-#{$i} {
       flex-wrap: wrap;
@@ -54,7 +54,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-build-grid-columns ($breakpoint) {
+@mixin vd-build-grid-columns($breakpoint) {
   @include vd-grid-columns($breakpoint);
   @include vd-grid-block-columns($breakpoint);
 }
@@ -63,7 +63,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @mixin vd-build-grid.
 //
-@mixin vd-build-grid () {
+@mixin vd-build-grid() {
   .vd-g-row {
     max-width: $vd-section-wrap-max-width;
     margin-left: auto;

package/src/vend.ui/styles/global/_layout.scss

@@ -1,10 +1,10 @@
 // Layout Spacing; @todo this should be renamed - it has nothing to do with the grid.
 $vd-grid-unit: 4px;
 
-@function vd-grid-unit ($times:1) {
+@function vd-grid-unit($times: 1) {
   @return $vd-grid-unit * $times;
 }
 
-@function vd-grid-gutter ($times:1) {
+@function vd-grid-gutter($times: 1) {
   @return vd-grid-unit(4) * $times;
 }

package/src/vend.ui/styles/global/_normalise.scss

@@ -11,6 +11,13 @@ a:link {
 }
 
 // Enables fast-tap optimisation in iOS Safari when page is zoomed
-a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
+a,
+button,
+input,
+textarea,
+select,
+details,
+[ng-click],
+.vd-fast-tap {
   touch-action: manipulation;
 }

package/src/vend.ui/styles/global/_z-index.scss

@@ -3,15 +3,11 @@
 // Any content with an explicit position
 $vd-z-index-content-base: 100 !default;
 
-
-
 // ===================================     [200] Navigation     ===================================================== //
 
 // Top navigation, side navigation and level 2 actions (fixed action bars)
 $vd-z-index-navigation-base: $vd-z-index-content-base * 2 !default;
 
-
-
 // ===================================     [300] Popovers     ======================================================= //
 
 // Search results, drop downs, selects, tooltips, date pickers, etc
@@ -19,8 +15,6 @@ $vd-z-index-popover-base: $vd-z-index-content-base * 3 !default;
 
 $vd-popover-z-index: $vd-z-index-popover-base !default;
 
-
-
 // ===================================     [400] Modals     ========================================================= //
 
 // Splashes, dialogs, etc
@@ -30,8 +24,6 @@ $vd-modals-z-index: $vd-z-index-modal-base + 10 !default; // 410
 
 $vd-popover-inside-modal-z-index: $vd-modals-z-index + 10 !default; // 420
 
-
-
 // ===================================     [500] Toasts     ========================================================= //
 
 // Toast notifications etc

package/src/vend.ui/styles/global/colour/_base.scss

@@ -75,15 +75,6 @@ $vd-colour-charcoal-110: #242e34;
 $vd-colour-black: #000;
 $vd-colour-white: #fff;
 
-// @Depreacted use the theme based swatches instead
-$vd-colour-golden-sand: #f2c17b;
-$vd-colour-gothic: #678e98;
-$vd-colour-lavender-purple: #aa88b5;
-$vd-colour-new-york-pink: #d77173;
-$vd-colour-shuttle-gray: #62676f;
-$vd-colour-sinbad: #99c8d4;
-$vd-colour-tacao: #f49b8c;
-
 // Navigation
 $vd-nav-item-colours: (
   // Old nav colours; @todo once all apps are on a version of vend.ui which include the new nav colours, navago should
@@ -94,11 +85,15 @@ $vd-nav-item-colours: (
   shakespeare: #56bad6,
 
   // New nav colours (these actually match those used by Design)
-  downy: #70b8d3,       // Should replace `shakespeare`
-  fern: #65b479,        // Should replace `ocean-green`
+  downy: #70b8d3,
+  // Should replace `shakespeare`
+  fern: #65b479,
+  // Should replace `ocean-green`
   fiord: #4b576e,
-  rob-roy: #ebc381,     // Should replace `rajah`
-  terracotta: #e57d66,  // Should replace `carnation`
+  rob-roy: #ebc381,
+  // Should replace `rajah`
+  terracotta: #e57d66,
+  // Should replace `carnation`
   wistera: #965fb0
 );
 

package/src/vend.ui/styles/global/colour/_colour-functions.scss

@@ -28,11 +28,7 @@
 /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
 /// @return {Colour<String>} - The highlighted colour
 @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
-  @return mix(
-    vd-colour($_vd-primary-element),
-    vd-colour($_vd-secondary-element),
-    10
-  );
+  @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
 }
 
 /// Generating a solid border for permitted border types (currently either keyline or framing)
@@ -41,11 +37,7 @@
 /// @param {String} $_vd-border-type - The border type, either keyline or framing
 /// @param {Unit} [$_vd-border-width=1px] - The width of the border
 /// @param {String} [$_vd-border-style=solid] - The style of the border
-@function vd-border(
-  $_vd-border-type,
-  $_vd-border-width: 1px,
-  $_vd-border-style: solid
-) {
+@function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
   @if (null != index($vd-border-types, $_vd-border-type)) {
     @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
   } @else {

package/src/vend.ui/styles/global/colour/_colour.scss

@@ -1,5 +1,5 @@
-@import "colour-functions";
+@import 'colour-functions';
 
 // @todo Remove these imports once theme functions and mixins have been introduced
-@import "base";
-@import "./themes/colour-themes";
+@import 'base';
+@import './themes/colour-themes';

package/src/vend.ui/styles/global/effects/_effects-ns.scss

@@ -1,13 +1,13 @@
-$vd-time-s: .2s !default;
-$vd-time-m: .5s !default;
-$vd-time-l: .8s !default;
+$vd-time-s: 0.2s !default;
+$vd-time-m: 0.5s !default;
+$vd-time-l: 0.8s !default;
 $vd-time-xl: 1s !default;
 
 @mixin vd-slow-rotate {
   animation: vd-rotate $vd-time-xl ease-in-out infinite;
 }
 
-@mixin vd-fade-in ($time: $vd-time-m) {
+@mixin vd-fade-in($time: $vd-time-m) {
   animation: vd-fade-in $time ease-in-out;
   animation-fill-mode: forwards;
 }

package/src/vend.ui/styles/global/effects/_effects.scss

@@ -5,30 +5,40 @@
 }
 
 @keyframes vd-fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes vd-flash {
-  0% {opacity: 0;}
-  30%, 70% {opacity: 1;}
-  100% {opacity: 0;}
+  0% {
+    opacity: 0;
+  }
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .vd-fade-out {
   animation-duration: 1.5s;
   animation-name: vd-flash;
-  animation-fill-mode:forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes vd-blink-highlight {
-  20%, 
+  20%,
   70% {
-      background-color: vd-colour(go-highlight);
+    background-color: vd-colour(go-highlight);
   }
 }
 
-
 @keyframes vd-shake {
   10%,
   90% {

package/src/vend.ui/styles/global/spacing/_spacing-functions.scss

@@ -3,9 +3,9 @@
 /// @function vd-spacer
 /// @param {Number} $_vd-multiplier - The number of times to multiply the spacing unit.
 /// @return {Unit<px>} - The calculated spacing value.
-@function vd-spacer ($_vd-multiplier:1) {
+@function vd-spacer($_vd-multiplier: 1) {
   @if ($_vd-multiplier > $vd-spacing-max-multiplier) {
-    @error('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
+    @error ('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
   } @else {
     @return $vd-spacing-unit * $_vd-multiplier;
   }

package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss

@@ -6,15 +6,11 @@
       $_vd-spacing_value: $i * $vd-spacing-unit;
 
       @if $_vd-position_value == a {
-        .vd-#{nth($_vd-spacing_type, 1)
-          + nth($_vd-position_value, 1)
-          + $i} {
+        .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
           #{nth($_vd-spacing_type, 2)}: $_vd-spacing_value !important;
         }
       } @else {
-        .vd-#{nth($_vd-spacing_type, 1)
-          + nth($_vd-position_value, 1)
-          + $i} {
+        .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
           #{nth($_vd-spacing_type, 2)}-#{nth($_vd-position_value, 2)}: $_vd-spacing_value !important;
         }
       }

package/src/vend.ui/styles/global/text/_base.scss

@@ -2,5 +2,5 @@ $vd-font-weight--regular: 400;
 $vd-font-weight--bold: 700;
 $vd-font-weight--ultra-bold: 900;
 
-$vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;  // stylelint-disable-line value-keyword-case
+$vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; // stylelint-disable-line value-keyword-case
 $vd-font-primary: $vd-font-lato !default;

package/src/vend.ui/styles/global/text/_text-definitions.scss

@@ -2,64 +2,64 @@ $_vd-text-definitions: (
   grand: (
     size: 48,
     leading: 56,
-    font-weight: 700
+    font-weight: 700,
   ),
   hero: (
     size: 32,
     leading: 48,
-    font-weight: 700
+    font-weight: 700,
   ),
   heading: (
     size: 24,
     leading: 32,
-    font-weight: 700
+    font-weight: 700,
   ),
   sub-heading: (
     size: 18,
     leading: 24,
-    font-weight: 700
+    font-weight: 700,
   ),
   intro: (
     size: 18,
     leading: 24,
-    font-weight: 400
+    font-weight: 400,
   ),
   signpost: (
     size: 15,
     leading: 20,
     font-weight: 900,
     tracking: 1.5,
-    casing: uppercase
+    casing: uppercase,
   ),
   label: (
     size: 15,
     leading: 20,
-    font-weight: 700
+    font-weight: 700,
   ),
   body: (
     size: 15,
     leading: 20,
-    font-weight: 400
+    font-weight: 400,
   ),
   supplementary: (
     size: 12,
     leading: 15,
-    font-weight: 400
+    font-weight: 400,
   ),
   mini-signpost: (
     size: 10,
     leading: 12,
     font-weight: 900,
-    casing: uppercase
+    casing: uppercase,
   ),
   mini-copy: (
     size: 10,
     leading: 12,
-    font-weight: 400
+    font-weight: 400,
   ),
   button: (
     size: 15,
     leading: 18,
-    font-weight: 700
-  )
+    font-weight: 700,
+  ),
 );

package/src/vend.ui/styles/global/text/_text-mixins.scss

@@ -1,6 +1,6 @@
-@use "sass:math";
+@use 'sass:math';
 
-@import "text-definitions";
+@import 'text-definitions';
 
 @mixin font-smoothing {
   font-synthesis: none;
@@ -10,7 +10,7 @@
 }
 
 // Heading Reset - Ensure correct styling continue for H<1..6>'s
-@mixin vd-heading-reset ($color: vd-colour(text)) {
+@mixin vd-heading-reset($color: vd-colour(text)) {
   word-break: break-word;
   font-weight: $vd-font-weight--bold;
   margin: 0;
@@ -19,12 +19,12 @@
 
 // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
 // required font size.
-@mixin vd-line-height ($leading, $font-size) {
-  line-height: math.div($leading, $font-size)
+@mixin vd-line-height($leading, $font-size) {
+  line-height: math.div($leading, $font-size);
 }
 
 // Intro
-@mixin vd-text-intro () {
+@mixin vd-text-intro() {
   @include vd-text(intro);
 }
 
@@ -43,7 +43,7 @@
 ///
 /// @mixin vd-text-clamp
 ///
-@mixin vd-text-clamp ($lines: 2) {
+@mixin vd-text-clamp($lines: 2) {
   // Autoprefixer removes out-of-date vendor prefixes
   // These old prefixes below are required for line clamping to work.
   // Use autoprefixer control comments so these rules are ignored
@@ -63,7 +63,7 @@
 ///
 /// @param {String} $name - The required text; e.g. grand, heading, body
 ///
-@mixin vd-text ($name, $color: text) {
+@mixin vd-text($name, $color: text) {
   @if (map-has-key($_vd-text-definitions, $name)) {
     $_vd-requested-type-styles: map-get($_vd-text-definitions, $name);
     $_size: map-get($_vd-requested-type-styles, 'size');
@@ -77,21 +77,13 @@
     @each $property, $value in $_vd-requested-type-styles {
       @if ($property == 'leading') {
         @include vd-line-height($value, $_size);
-      }
-
-      @else if ($property == 'casing') {
+      } @else if ($property == 'casing') {
         text-transform: $value;
-      }
-
-      @else if ($property == 'tracking') {
+      } @else if ($property == 'tracking') {
         letter-spacing: $value * 0.1 * 1em;
-      }
-
-      @else if ($property == 'size') {
+      } @else if ($property == 'size') {
         font-size: $value * 1px;
-      }
-
-      @else {
+      } @else {
         #{$property}: $value;
       }
     }
@@ -117,9 +109,9 @@
 /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
 /// @return {Number} - The font size of the requested requested text definition.
 ///
-@function vd-text-size ($_vd-text-name) {
+@function vd-text-size($_vd-text-name) {
   @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
-    @return map-deep-get($_vd-text-definitions, $_vd-text-name,size) * 1px;
+    @return map-deep-get($_vd-text-definitions, $_vd-text-name, size) * 1px;
   } @else {
     @error "[text-functions] The specified text definition  (#{$_vd-text-name}) does not exist.";
     @return null;
@@ -133,7 +125,7 @@
 /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
 /// @return {Number} - The font weight of the requested text definition.
 ///
-@function vd-text-weight ($_vd-text-name) {
+@function vd-text-weight($_vd-text-name) {
   @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
     @return map-deep-get($_vd-text-definitions, $_vd-text-name, font-weight);
   } @else {

package/src/vend.ui/styles/global/text/_text.scss

@@ -1,3 +1,3 @@
 // Text Module Non-styles
-@import "base";
-@import "text-mixins";
+@import 'base';
+@import 'text-mixins';

package/src/vend.ui/styles/global/utils/_functions.scss

@@ -3,9 +3,9 @@
 /// @function vd-px-unit
 /// @param {Number} $_value - Number to add 'px'
 /// @return {Number} - Number with px unit
-@use "sass:math";
+@use 'sass:math';
 
-@function vd-px-unit ($_value) {
+@function vd-px-unit($_value) {
   @return $_value * 1px;
 }
 

package/src/vend.ui/styles/global/viewport/_viewport-data.scss

@@ -1,37 +1,37 @@
 $vd-viewport: (
-  "identifier": (
-    "id": "vd-viewport-identifier",
-    "pseudoElement": "before",
-    "IEContentProp": "vd-content"
+  'identifier': (
+    'id': 'vd-viewport-identifier',
+    'pseudoElement': 'before',
+    'IEContentProp': 'vd-content',
   ),
-  "ranges": (
-    "xsmall": (
-      "range": (
-        "max": 480
-      )
+  'ranges': (
+    'xsmall': (
+      'range': (
+        'max': 480,
+      ),
     ),
-    "small": (
-      "range": (
-        "min": 481,
-        "max": 768
-      )
+    'small': (
+      'range': (
+        'min': 481,
+        'max': 768,
+      ),
     ),
-    "medium": (
-      "range": (
-        "min": 769,
-        "max": 1000
-      )
+    'medium': (
+      'range': (
+        'min': 769,
+        'max': 1000,
+      ),
     ),
-    "large": (
-      "range": (
-        "min": 1001,
-        "max": 1200
-      )
+    'large': (
+      'range': (
+        'min': 1001,
+        'max': 1200,
+      ),
     ),
-    "xlarge": (
-      "range": (
-        "min": 1201
-      )
-    )
-  )
+    'xlarge': (
+      'range': (
+        'min': 1201,
+      ),
+    ),
+  ),
 );

package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss

@@ -24,7 +24,7 @@
   @each $_vd-viewport in map-keys($vd-viewport-ranges-map) {
     $_vd-viewport-content: quote($_vd-viewport);
 
-    @include vd-viewport-media-only ($_vd-viewport) {
+    @include vd-viewport-media-only($_vd-viewport) {
       &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
         content: $_vd-viewport-content;
       }