@lightspeed/design-system-css 1.1.2 → 1.3.0

package/package.json

@@ -1,34 +1 @@
-{
-  "name": "@lightspeed/design-system-css",
-  "version": "1.1.2",
-  "description": "Lightspeed's Design System in CSS",
-  "author": "Lightspeed Commerce Inc.",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "main": "dist/index.css",
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "scripts": {
-    "prebuild": "rm -rf dist",
-    "build": "yarn lint && yarn build:css && yarn build:retrocompatibility",
-    "build:css": "sass --load-path=../../node_modules -q src/index.scss:dist/index.css",
-    "build:retrocompatibility": "cp dist/index.css dist/vend-styles.css",
-    "build:watch": "yarn lint && yarn build:css --watch",
-    "test": "true",
-    "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
-  },
-  "dependencies": {
-    "@lightspeed/design-system-tokens": "^1.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^16.11.2",
-    "sass": "~1.45.2",
-    "stylelint": "^13.5.0",
-    "stylelint-scss": "^3.17.2",
-    "ts-node": "^10.3.1"
-  }
-}
+{"name":"@lightspeed/design-system-css","version":"1.3.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}

package/src/images-ui/images-ui-ns.scss

@@ -1 +1 @@
-$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/'
+$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/';

package/src/vend-stylelint/use-colour-function.js

@@ -1,23 +1,26 @@
-const stylelint = require('stylelint')
-const ruleName = 'vend/use-colour-function'
+/* eslint-disable func-names */
+const stylelint = require('stylelint');
 
-const message = '[VEND] Use the vd-colour SASS function when defining a colour.'
+const ruleName = 'vend/use-colour-function';
+
+const message = '[VEND] Use the vd-colour SASS function when defining a colour.';
 const messages = stylelint.utils.ruleMessages(ruleName, {
   expected() {
-    return message
+    return message;
   },
-})
+});
 
-module.exports = stylelint.createPlugin(ruleName, function(enabled) {
+module.exports = stylelint.createPlugin(ruleName, function (enabled) {
   if (!enabled) {
-    return
+    return;
   }
 
   // Matches hex, 'rgb', (not -rgb, ignores vend sass functions and values that are prefixed with -) and hsl colours; 'named' colours are
   // prohibited via the `color-named` rule
-  const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/
+  const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/;
 
-  return function(root, result) {
+  // eslint-disable-next-line consistent-return
+  return function (root, result) {
     // Ensure no named colours are used
     stylelint.utils.checkAgainstRule(
       {
@@ -25,7 +28,7 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
         ruleSettings: ['never'],
         root,
       },
-      warning => {
+      (warning) => {
         stylelint.utils.report({
           message,
           ruleName,
@@ -33,16 +36,16 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
           node: warning.node,
           line: warning.line,
           column: warning.column,
-        })
+        });
       }
-    )
+    );
 
-    root.walkDecls(function(decl) {
-      const { value, prop } = decl
-      const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER)
+    root.walkDecls(function (decl) {
+      const { value, prop } = decl;
+      const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER);
 
       if (!isUnsupportedColourValue) {
-        return
+        return;
       }
 
       stylelint.utils.report({
@@ -51,10 +54,10 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
         message: messages.expected(`${prop}, ${value}`),
         node: decl,
         word: value,
-      })
-    })
-  }
-})
+      });
+    });
+  };
+});
 
-module.exports.ruleName = ruleName
-module.exports.messages = messages
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;

package/src/vend-styles/components/BarChart/BarChart.scss

@@ -1,9 +1,9 @@
 /* stylelint-disable vend/use-colour-function */
-$bar-chart-background-fill: #F2F2F2;
-$bar-chart-primary-text-color: #76A27B;
+$bar-chart-background-fill: #f2f2f2;
+$bar-chart-primary-text-color: #76a27b;
 $bar-chart-secondary-text-color: #959595;
-$chart-fill: #009D12;
-$chart-line: #009D12;
+$chart-fill: #009d12;
+$chart-line: #009d12;
 /* stylelint-enable vend/use-colour-function */
 
 $bar-chart-primary-text-size: 14px;
@@ -12,7 +12,7 @@ $bar-chart-secondary-text-size: 13px;
 .vd-bar-chart-container {
   font-size: 11px;
 
-  .y.axis .domain{
+  .y.axis .domain {
     stroke: none;
     display: none;
   }
@@ -21,20 +21,20 @@ $bar-chart-secondary-text-size: 13px;
     display: none;
   }
 
-  .y.axis text{
+  .y.axis text {
     font-size: $bar-chart-primary-text-size;
     fill: $bar-chart-primary-text-color;
   }
 
-  .bar{
+  .bar {
     fill: $chart-fill;
     opacity: 0.15;
   }
-  .top{
+  .top {
     fill: $chart-line;
   }
 
-  .bar-label{
+  .bar-label {
     font-size: $bar-chart-secondary-text-size;
     fill: $bar-chart-secondary-text-color;
   }

package/src/vend-styles/components/CodeInput/CodeInput.scss

@@ -22,4 +22,3 @@
     margin-right: vd-grid-unit(3);
   }
 }
-

package/src/vend-styles/components/DatePicker/DatePicker.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 @import '../../../vend.ui/styles/global/non-styles';
 @import './DatePicker-ns';
@@ -213,19 +213,11 @@
 }
 
 .react-datepicker__day--range-start {
-  background-image: linear-gradient(
-    to right,
-    transparent 50%,
-    $vd-datepicker-range-colour 50%
-  );
+  background-image: linear-gradient(to right, transparent 50%, $vd-datepicker-range-colour 50%);
 }
 
 .react-datepicker__day--range-end {
-  background-image: linear-gradient(
-    to right,
-    $vd-datepicker-range-colour 50%,
-    transparent 50%
-  );
+  background-image: linear-gradient(to right, $vd-datepicker-range-colour 50%, transparent 50%);
 }
 
 // If the start and end date are the same, don't show the gradient

package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss

@@ -21,7 +21,7 @@ $vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
 
 // Mixins
 @mixin next-prev-arrow-common {
-  content: " ";
+  content: ' ';
   visibility: visible;
   position: absolute;
   width: $vd-datepicker-next-prev-button-icon-size;

package/src/vend-styles/components/LineChart/LineChart.scss

@@ -3,13 +3,14 @@
 /* stylelint-disable vend/use-colour-function */
 // Should review at some point if it is possible to replace this with a standard colour
 // or if we need to add this to standard colour
-$chart-fill: #009D12;
+$chart-fill: #009d12;
 $chart-bg: #fafafa;
 /* stylelint-enable vend/use-colour-function */
 
-
 .vd-line-graph-container {
-  .vd-grid.vd-y, .vd-axis.vd-y, .vd-axis.vd-x {
+  .vd-grid.vd-y,
+  .vd-axis.vd-y,
+  .vd-axis.vd-x {
     .domain {
       display: none;
     }
@@ -22,7 +23,7 @@ $chart-bg: #fafafa;
   }
 
   .vd-grid.vd-grid-filled {
-    stroke-dasharray: 4,2;
+    stroke-dasharray: 4, 2;
   }
 
   .vd-grid-background {

package/src/vend-styles/components/Modal/Modal.scss

@@ -19,13 +19,13 @@
     outline: none;
   }
 
-  @include vd-viewport-media-max (small) {
+  @include vd-viewport-media-max(small) {
     max-width: none;
     width: 100%;
     margin-top: $vd-dialog-container-top-offset;
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     max-height: none;
     height: calc(100% - #{$vd-dialog-container-top-offset});
 
@@ -43,7 +43,7 @@
 }
 
 @each $_vd-modal-size in $vd-modal-sizes {
-  @include vd-viewport-media-min ($vd-breakpoint-medium) {
+  @include vd-viewport-media-min($vd-breakpoint-medium) {
     .vd-modal--size-#{nth($_vd-modal-size, 1)} {
       max-width: nth($_vd-modal-size, 2);
     }
@@ -57,7 +57,7 @@
   min-height: $vd-dialog-container-min-height;
   max-height: calc(95vh - #{$vd-dialog-container-top-offset});
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     max-height: 95%;
   }
 
@@ -65,7 +65,10 @@
     width: 100%;
   }
 
-  .vd-breadcrumb, .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content, .vd-dialog-actions {
+  .vd-breadcrumb,
+  .vd-dialog-header,
+  .vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content,
+  .vd-dialog-actions {
     margin-left: var(--vd-dialog-spacing);
     margin-right: var(--vd-dialog-spacing);
 
@@ -74,12 +77,14 @@
     }
 
     &:last-child {
-      margin-bottom: var(--vd-dialog-spacing)
+      margin-bottom: var(--vd-dialog-spacing);
     }
   }
 
   .vd-breadcrumb {
-    & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
+    & + .vd-dialog-header,
+    & + .vd-modal-content,
+    & + .vd-dialog-actions {
       margin-top: vd-grid-unit(4);
     }
   }
@@ -97,7 +102,9 @@
 .vd-modal-banner {
   width: 100%;
 
-  & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
+  & + .vd-dialog-header,
+  & + .vd-modal-content,
+  & + .vd-dialog-actions {
     margin-top: var(--vd-dialog-spacing);
   }
 }
@@ -105,11 +112,14 @@
 .vd-modal-sidebar {
   display: none;
 
-  & + .vd-breadcrumb, & + .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content, & + .vd-dialog-actions {
+  & + .vd-breadcrumb,
+  & + .vd-dialog-header,
+  .vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content,
+  & + .vd-dialog-actions {
     margin-top: var(--vd-dialog-spacing);
   }
 
-  @include vd-viewport-media-min ($vd-breakpoint-medium) {
+  @include vd-viewport-media-min($vd-breakpoint-medium) {
     display: block;
     width: $vd-modal-sidebar-size;
     position: absolute;
@@ -117,14 +127,17 @@
     bottom: 0;
     left: 0;
 
-    & ~ .vd-breadcrumb, & ~ .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content, & ~ .vd-dialog-actions {
+    & ~ .vd-breadcrumb,
+    & ~ .vd-dialog-header,
+    .vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content,
+    & ~ .vd-dialog-actions {
       margin-left: $vd-modal-sidebar-size;
       padding-left: var(--vd-dialog-spacing);
     }
 
     & ~ .vd-modal-banner {
       margin-left: $vd-modal-sidebar-size;
-      width: calc(100% - #{$vd-modal-sidebar-size})
+      width: calc(100% - #{$vd-modal-sidebar-size});
     }
   }
 }

package/src/vend-styles/components/Modal/_Modal-ns.scss

@@ -1,6 +1,11 @@
-$vd-modal-sizes: ((small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px) (large 1000px));
+$vd-modal-sizes: (
+  (small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px)
+    (large 1000px)
+);
 
-$vd-modal-mobile-sizes: ((small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px));
+$vd-modal-mobile-sizes: (
+  (small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px)
+);
 
 $vd-modal-sidebar-size: 280px;
 

package/src/vend-styles/components/PromotionModal/PromotionModal.scss

@@ -15,7 +15,7 @@
     padding: 0 var(--vd-dialog-spacing) var(--vd-dialog-spacing);
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     -webkit-overflow-scrolling: touch;
   }
 }

package/src/vend-styles/components/TableList/TableList.scss

@@ -81,7 +81,8 @@
   padding-left: 6px;
 
   // Adjacent cell always has the same spacing
-  + .vd-table-list-cell, + .vd-table-list-head-cell {
+  + .vd-table-list-cell,
+  + .vd-table-list-head-cell {
     padding-left: 0;
   }
 
@@ -164,6 +165,9 @@
 // -----------------------------------------------------------------
 .vd-table-list-row {
   border-bottom: vd-border(framing);
+  &.vd-table-list-row--active {
+    background-color: vd-colour(go-highlight);
+  }
 }
 
 // TABLE ROWS - EXPANDABLE ROW

package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss

@@ -17,12 +17,7 @@
   height: 100%;
   color: vd-colour(box);
   background: vd-colour(box)
-    linear-gradient(
-      to left,
-      vd-colour(box) 50%,
-      $vd-upsell-background-colour 50%
-    )
-    no-repeat;
+    linear-gradient(to left, vd-colour(box) 50%, $vd-upsell-background-colour 50%) no-repeat;
 }
 
 .vd-upsell-primary-background-inner {

package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss

@@ -1,5 +1,5 @@
-@import "../../../../styles/global/_non-styles";
-@import "./vd-flex-ns";
+@import '../../../../styles/global/_non-styles';
+@import './vd-flex-ns';
 
 .vd-flex--settings-explanation {
   min-width: $vd-settings-explanation-width;
@@ -19,15 +19,21 @@
   margin-left: 85px !important;
 }
 
-.vd-flex--container       { flex: 0 0 auto; }
-.vd-flex--fieldset-row    { flex-direction: row; }
+.vd-flex--container {
+  flex: 0 0 auto;
+}
+.vd-flex--fieldset-row {
+  flex-direction: row;
+}
 
 @include vd-viewport-media-max(small) {
   .vd-flex--responsive-column {
     flex-basis: auto;
     margin: 0 0 $vd-section-padding-v 0;
 
-    &:last-child { margin-bottom: 0; }
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .vd-flex--settings-explanation {
@@ -37,11 +43,13 @@
   }
 
   .vd-flex--settings,
-  .vd-flex--row { flex-direction: column; }
+  .vd-flex--row {
+    flex-direction: column;
+  }
 }
 
 @include vd-viewport-media-max(xsmall) {
-  .vd-flex--fieldset-row  {
+  .vd-flex--fieldset-row {
     flex-direction: column;
   }
 }

package/src/vend.ui/behaviours/vd-align/vd-align.scss

@@ -1,3 +1,9 @@
-.vd-align-left   { text-align: left !important;   }
-.vd-align-center { text-align: center !important; }
-.vd-align-right  { text-align: right !important;  }
+.vd-align-left {
+  text-align: left !important;
+}
+.vd-align-center {
+  text-align: center !important;
+}
+.vd-align-right {
+  text-align: right !important;
+}

package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-type-no-unknown
 $vd-autocomplete-filter-select-border-radius: $vd-border-radius 0 0 $vd-border-radius;
 $vd-autocomplete-filter-select-padding: 12px;
 $vd-autocomplete-filter-selector-container-width: 130px;
@@ -8,8 +9,8 @@ $vd-autocomplete-filter-icon-margin: 14px;
 .vd-autocomplete-filter {
   display: block;
 
-  @include vd-input-error-selectors () {
-    vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
+  @include vd-input-error-selectors() {
+    vd-autocomplete-multi {
       @include vd-input-error-styles();
     }
   }
@@ -35,7 +36,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
     border-left: vd-border(framing, $vd-input-border-width * 0.5);
   }
 
-  vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
+  vd-autocomplete-multi {
     width: 100%;
     transition: none;
   }

package/src/vend.ui/components/vd-avatar/vd-avatar.scss

@@ -49,30 +49,30 @@
   }
 
   &.vd-avatar--initials-1 {
-    background-color: vd-colour(new-york-pink);
+    background-color: vd-colour(farout-pink);
   }
 
   &.vd-avatar--initials-2 {
-    background-color: vd-colour(tacao);
+    background-color: vd-colour(mars);
   }
 
   &.vd-avatar--initials-3 {
-    background-color: vd-colour(golden-sand);
+    background-color: vd-colour(solar);
   }
 
   &.vd-avatar--initials-4 {
-    background-color: vd-colour(gothic);
+    background-color: vd-colour(galaxy);
   }
 
   &.vd-avatar--initials-5 {
-    background-color: vd-colour(sinbad);
+    background-color: vd-colour(neptune);
   }
 
   &.vd-avatar--initials-6 {
-    background-color: vd-colour(lavender-purple);
+    background-color: vd-colour(deep-purple);
   }
 
   &.vd-avatar--initials-7 {
-    background-color: vd-colour(shuttle-gray);
+    background-color: vd-colour(shuttle-grey);
   }
 }

package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss

@@ -13,7 +13,7 @@
   position: relative;
 
   // Ensure placeholder backgrounds are the same size regardless of tile size
-  &[vd-lazy-load*="placeholder.svg"] {
+  &[vd-lazy-load*='placeholder.svg'] {
     background-size: $vd-avatar-multi-tile-placeholder-size;
   }
 }

package/src/vend.ui/components/vd-badges/vd-badges.scss

@@ -1 +1 @@
-@import "./vd-id-badge/vd-id-badge";
+@import './vd-id-badge/vd-id-badge';

package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss

@@ -33,7 +33,9 @@
       border-radius: 0;
     }
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       outline: none;
       background-color: vd-colour(go-highlight);
     }
@@ -70,7 +72,9 @@
       text-decoration: underline;
     }
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       outline: none;
 
       .vd-id-badge__header-title {
@@ -79,7 +83,7 @@
     }
   }
 
-// SIZING ADJUSTMENTS
+  // SIZING ADJUSTMENTS
 
   &.vd-id-badge--x-small {
     .vd-id-badge__content {

package/src/vend.ui/components/vd-banner/vd-banner-ns.scss

@@ -1,4 +1,8 @@
-@mixin vd-banner($primary-colour, $text-colour: vd-colour(text-action), $anchor-colour: vd-colour(text-action)) {
+@mixin vd-banner(
+  $primary-colour,
+  $text-colour: vd-colour(text-action),
+  $anchor-colour: vd-colour(text-action)
+) {
   background-color: $primary-colour;
   color: $text-colour;
   border: none;

package/src/vend.ui/components/vd-banner/vd-banner.scss

@@ -39,7 +39,7 @@
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 
   // Fallback to base padding if browser doesn't support CSS variables
-  @supports ( not (--a: 0)) {
+  @supports (not (--a: 0)) {
     padding: $vd-section-padding-v $vd-section-padding-h;
   }
 }
@@ -66,10 +66,14 @@
 
 .vd-banner--info,
 .vd-banner--activation {
-  @include vd-banner(vd-colour(supplementary))
+  @include vd-banner(vd-colour(supplementary));
+}
+.vd-banner--negative {
+  @include vd-banner(vd-colour(no));
+}
+.vd-banner--success {
+  @include vd-banner(vd-colour(success));
 }
-.vd-banner--negative { @include vd-banner(vd-colour(no)) }
-.vd-banner--success  { @include vd-banner(vd-colour(success)) }
 
 @include vd-viewport-media-max(medium) {
   .vd-banner-wrapper,

package/src/vend.ui/components/vd-bg/vd-bg.scss

@@ -1,4 +1,4 @@
 .vd-bg--upsell {
   background: vd-colour(background)
-    url("#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg");
+    url('#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg');
 }