@lightspeed/design-system-css 1.2.0 → 2.0.0

package/dist/vend-styles.css

@@ -32,13 +32,13 @@
     --vd-colour--keyline: #37353A;
     --vd-colour--framing-inverse: #E7E5E8;
     --vd-colour--keyline-inverse: #C9C7CA;
-    --vd-colour--golden-sand: #E6B03D;
-    --vd-colour--tacao: #ED6B44;
-    --vd-colour--new-york-pink: #DE3CEC;
-    --vd-colour--gothic: #A02FB6;
-    --vd-colour--lavender-purple: #501897;
-    --vd-colour--sinbad: #6952F6;
-    --vd-colour--shuttle-gray: #5D5D5D;
+    --vd-colour--solar: #E6B03D;
+    --vd-colour--mars: #ED6B44;
+    --vd-colour--farout-pink: #DE3CEC;
+    --vd-colour--galaxy: #A02FB6;
+    --vd-colour--deep-purple: #501897;
+    --vd-colour--neptune: #6952F6;
+    --vd-colour--shuttle-grey: #5D5D5D;
     --vd-colour--nav-top: #0B0B0B;
     --vd-colour--nav-top-rgb: 11, 11, 11;
     --vd-colour--nav-side-tabs: #27252A;
@@ -93,13 +93,13 @@
   --vd-colour--keyline: #C9C7CA;
   --vd-colour--framing-inverse: #27252A;
   --vd-colour--keyline-inverse: #37353A;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #E7E5E8;
@@ -153,13 +153,13 @@
   --vd-colour--keyline: #37353A;
   --vd-colour--framing-inverse: #E7E5E8;
   --vd-colour--keyline-inverse: #C9C7CA;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #27252A;
@@ -198,7 +198,14 @@ a:link {
   text-decoration: none;
 }
 
-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;
 }
 
@@ -1234,7 +1241,8 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   display: flex;
   align-items: center;
 }
-.vd-select-group > .vd-select, .vd-select-group .vd-select-container {
+.vd-select-group > .vd-select,
+.vd-select-group .vd-select-container {
   width: auto;
 }
 .vd-select-group .vd-input {
@@ -1242,13 +1250,16 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   margin-right: 0;
   flex: 1;
 }
-.vd-select-group .vd-input, .vd-select-group .vd-select {
+.vd-select-group .vd-input,
+.vd-select-group .vd-select {
   position: relative;
 }
-.vd-select-group .vd-input:focus, .vd-select-group .vd-select:focus {
+.vd-select-group .vd-input:focus,
+.vd-select-group .vd-select:focus {
   z-index: 103;
 }
-.vd-select-group .vd-input:not(:first-child), .vd-select-group .vd-select:not(:first-child) {
+.vd-select-group .vd-input:not(:first-child),
+.vd-select-group .vd-select:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -2px;
@@ -1260,12 +1271,15 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.vd-select-group .vd-input:not(:last-child), .vd-select-group .vd-select:not(:last-child),
+.vd-select-group .vd-input:not(:last-child),
+.vd-select-group .vd-select:not(:last-child),
 .vd-select-group .vd-select-container:not(:last-child) .vd-select {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.vd-select-group .vd-input.vd-error, .vd-select-group .vd-select.vd-error, .vd-select-group .vd-select-container:not(:last-child).vd-error {
+.vd-select-group .vd-input.vd-error,
+.vd-select-group .vd-select.vd-error,
+.vd-select-group .vd-select-container:not(:last-child).vd-error {
   z-index: 102;
 }
 
@@ -1640,25 +1654,25 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   font-weight: 700;
 }
 .vd-avatar--initials.vd-avatar--initials-1 {
-  background-color: var(--vd-colour--new-york-pink);
+  background-color: var(--vd-colour--farout-pink);
 }
 .vd-avatar--initials.vd-avatar--initials-2 {
-  background-color: var(--vd-colour--tacao);
+  background-color: var(--vd-colour--mars);
 }
 .vd-avatar--initials.vd-avatar--initials-3 {
-  background-color: var(--vd-colour--golden-sand);
+  background-color: var(--vd-colour--solar);
 }
 .vd-avatar--initials.vd-avatar--initials-4 {
-  background-color: var(--vd-colour--gothic);
+  background-color: var(--vd-colour--galaxy);
 }
 .vd-avatar--initials.vd-avatar--initials-5 {
-  background-color: var(--vd-colour--sinbad);
+  background-color: var(--vd-colour--neptune);
 }
 .vd-avatar--initials.vd-avatar--initials-6 {
-  background-color: var(--vd-colour--lavender-purple);
+  background-color: var(--vd-colour--deep-purple);
 }
 .vd-avatar--initials.vd-avatar--initials-7 {
-  background-color: var(--vd-colour--shuttle-gray);
+  background-color: var(--vd-colour--shuttle-grey);
 }
 
 .vd-avatar-multi {
@@ -2261,7 +2275,8 @@ a.vd-btn.disabled {
 /* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
   up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
   consistently triggered. */
-.vd-btn:disabled:hover > .vd-btn-hover-assist, .vd-tab-button:disabled:hover > .vd-btn-hover-assist {
+.vd-btn:disabled:hover > .vd-btn-hover-assist,
+.vd-tab-button:disabled:hover > .vd-btn-hover-assist {
   position: absolute;
   top: 0;
   right: 0;
@@ -2274,9 +2289,6 @@ a.vd-btn.disabled {
   background-color: var(--vd-colour--box);
   border-radius: 5px;
 }
-.vd-card + .vd-card {
-  margin-left: 5px;
-}
 .vd-card.vd-card--active {
   position: relative;
 }
@@ -2674,7 +2686,15 @@ vd-carousel-frame {
   color: var(--vd-colour--text);
   font-size: 15px;
 }
-.vd-datepicker table, .vd-datepicker caption, .vd-datepicker tbody, .vd-datepicker tfoot, .vd-datepicker thead, .vd-datepicker tr, .vd-datepicker th, .vd-datepicker td, .vd-datepicker abbr,
+.vd-datepicker table,
+.vd-datepicker caption,
+.vd-datepicker tbody,
+.vd-datepicker tfoot,
+.vd-datepicker thead,
+.vd-datepicker tr,
+.vd-datepicker th,
+.vd-datepicker td,
+.vd-datepicker abbr,
 .vd-datepicker-range table,
 .vd-datepicker-range caption,
 .vd-datepicker-range tbody,
@@ -3001,10 +3021,12 @@ vd-carousel-frame {
   border: none;
 }
 
-.vd-datepicker-range-no-end .is-startrange .pika-button, .vd-datepicker-range-no-end .is-endrange .pika-button {
+.vd-datepicker-range-no-end .is-startrange .pika-button,
+.vd-datepicker-range-no-end .is-endrange .pika-button {
   border: none;
 }
-.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button, .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
   background: var(--vd-colour--do-highlight);
   color: var(--vd-colour--text);
   font-weight: normal;
@@ -3346,7 +3368,8 @@ vd-carousel-frame {
   }
 }
 
-vd-dott, .vd-dott {
+vd-dott,
+.vd-dott {
   display: inline-block;
   width: 32px;
   height: 32px;
@@ -4891,42 +4914,55 @@ vd-dott, .vd-dott {
     --vd-section-padding-v: 16px;
   }
 }
-vd-section, .vd-section {
+vd-section,
+.vd-section {
   display: block;
   position: relative;
   font-size: 15px;
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section .vd-section-wrap, .vd-section .vd-section-wrap {
+vd-section .vd-section-wrap,
+.vd-section .vd-section-wrap {
   display: block;
   margin: 0 auto;
   max-width: 1100px;
 }
-vd-section .vd-section-container, .vd-section .vd-section-container {
+vd-section .vd-section-container,
+.vd-section .vd-section-container {
   margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
   padding: var(--vd-section-padding-v) 0;
 }
 @supports not (--a: 0) {
-  vd-section, .vd-section {
+  vd-section,
+.vd-section {
     padding: 24px 48px;
   }
-  vd-section .vd-section-container, .vd-section .vd-section-container {
+  vd-section .vd-section-container,
+.vd-section .vd-section-container {
     margin: -24px -48px;
     padding: 24px 48px;
   }
-  vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+  vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
     padding: 24px 0;
   }
 }
 
-.vd-section--secondary, .vd-section--secondary .vd-section-container {
+.vd-section--secondary,
+.vd-section--secondary .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 
-.vd-section--tertiary, .vd-section--tertiary .vd-section-container {
+.vd-section--tertiary,
+.vd-section--tertiary .vd-section-container {
   background-color: var(--vd-colour--box);
 }
 
@@ -4966,7 +5002,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   opacity: 0;
 }
 
-.vd-section--action-bar, .vd-section--action-bar .vd-section-container {
+.vd-section--action-bar,
+.vd-section--action-bar .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 .vd-section--action-bar .vd-section-wrap {
@@ -5354,7 +5391,9 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   font-size: 12px;
   font-weight: 700;
 }
-.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
   display: none;
 }
 .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
@@ -5382,7 +5421,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
 .vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
   display: none;
 }
-.vd-sidebar.vd-sidebar--new .vd-sidebar-expander, .vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
+.vd-sidebar.vd-sidebar--new .vd-sidebar-expander,
+.vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
   display: block !important;
 }
 
@@ -5796,46 +5836,66 @@ table {
 .vd-table td {
   vertical-align: middle;
 }
-.vd-table td, .vd-table th {
+.vd-table td,
+.vd-table th {
   padding: 20px 40px;
   position: relative;
   white-space: normal;
   word-break: break-word;
 }
-.vd-table td.vd-tight, .vd-table th.vd-tight {
+.vd-table td.vd-tight,
+.vd-table th.vd-tight {
   white-space: nowrap;
   width: 1%;
 }
-.vd-table td.vd-truncate, .vd-table td.vd-truncate *, .vd-table th.vd-truncate, .vd-table th.vd-truncate * {
+.vd-table td.vd-truncate,
+.vd-table td.vd-truncate *,
+.vd-table th.vd-truncate,
+.vd-table th.vd-truncate * {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-l {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-l {
   padding-left: 8px;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-r {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-r {
   padding-right: 8px;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-l {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-l {
   padding-left: 0;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-r {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-r {
   padding-right: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-b {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-b {
   padding-bottom: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-t {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-t {
   padding-top: 0;
 }
-.vd-table td.vd-valign-t, .vd-table th.vd-valign-t {
+.vd-table td.vd-valign-t,
+.vd-table th.vd-valign-t {
   vertical-align: top;
 }
-.vd-table td.vd-valign-m, .vd-table th.vd-valign-m {
+.vd-table td.vd-valign-m,
+.vd-table th.vd-valign-m {
   vertical-align: middle;
 }
-.vd-table td.vd-valign-b, .vd-table th.vd-valign-b {
+.vd-table td.vd-valign-b,
+.vd-table th.vd-valign-b {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
@@ -7329,21 +7389,21 @@ td.vd-hide-print {
 }
 .vd-bar-chart-container .y.axis text {
   font-size: 14px;
-  fill: #76A27B;
+  fill: #76a27b;
 }
 .vd-bar-chart-container .bar {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.15;
 }
 .vd-bar-chart-container .top {
-  fill: #009D12;
+  fill: #009d12;
 }
 .vd-bar-chart-container .bar-label {
   font-size: 13px;
   fill: #959595;
 }
 .vd-bar-chart-container .bar-chart-background {
-  fill: #F2F2F2;
+  fill: #f2f2f2;
 }
 
 .vd-currency-input-container {
@@ -7678,10 +7738,14 @@ td.vd-hide-print {
 
 /* stylelint-disable vend/use-colour-function */
 /* stylelint-enable vend/use-colour-function */
-.vd-line-graph-container .vd-grid.vd-y .domain, .vd-line-graph-container .vd-axis.vd-y .domain, .vd-line-graph-container .vd-axis.vd-x .domain {
+.vd-line-graph-container .vd-grid.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-x .domain {
   display: none;
 }
-.vd-line-graph-container .vd-grid.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-x .tick line {
+.vd-line-graph-container .vd-grid.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-x .tick line {
   stroke: var(--vd-colour--framing);
   stroke-width: 1px;
   fill: transparent;
@@ -7704,10 +7768,10 @@ td.vd-hide-print {
 .vd-line-graph-container .vd-line-with-fill {
   fill: transparent;
   stroke-width: 2px;
-  stroke: #009D12;
+  stroke: #009d12;
 }
 .vd-line-graph-container .vd-line-fill {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.1;
   stroke-width: 0;
 }
@@ -7717,7 +7781,7 @@ td.vd-hide-print {
   stroke-width: 2px;
 }
 .vd-line-graph-container .vd-plot-point-with-fill {
-  fill: #009D12;
+  fill: #009d12;
   stroke: #fff;
 }
 .vd-line-graph-container .vd-plot-point-hidden {
@@ -7851,14 +7915,20 @@ td.vd-hide-print {
 .vd-modal-inner-container > .vd-g-row {
   width: 100%;
 }
-.vd-modal-inner-container .vd-breadcrumb, .vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content, .vd-modal-inner-container .vd-dialog-actions {
+.vd-modal-inner-container .vd-breadcrumb,
+.vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content,
+.vd-modal-inner-container .vd-dialog-actions {
   margin-left: var(--vd-dialog-spacing);
   margin-right: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:first-child, .vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child, .vd-modal-inner-container .vd-dialog-actions:first-child {
+.vd-modal-inner-container .vd-breadcrumb:first-child,
+.vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child,
+.vd-modal-inner-container .vd-dialog-actions:first-child {
   margin-top: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:last-child, .vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child, .vd-modal-inner-container .vd-dialog-actions:last-child {
+.vd-modal-inner-container .vd-breadcrumb:last-child,
+.vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child,
+.vd-modal-inner-container .vd-dialog-actions:last-child {
   margin-bottom: var(--vd-dialog-spacing);
 }
 .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-header, .vd-modal-inner-container .vd-breadcrumb + .vd-modal-content, .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-actions {
@@ -7992,7 +8062,8 @@ td.vd-hide-print {
   padding-right: 0;
   padding-left: 6px;
 }
-.vd-table-list-cell--toggle + .vd-table-list-cell, .vd-table-list-cell--toggle + .vd-table-list-head-cell {
+.vd-table-list-cell--toggle + .vd-table-list-cell,
+.vd-table-list-cell--toggle + .vd-table-list-head-cell {
   padding-left: 0;
 }
 .vd-table-list-cell--toggle .vd-table-list-toggle-icon {

package/package.json

@@ -1,34 +1 @@
-{
-  "name": "@lightspeed/design-system-css",
-  "version": "1.2.0",
-  "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",
-    "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":"2.0.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);
   }
 }
-