@lightspeed/design-system-css 27.2.1 → 29.0.0

package/package.json

@@ -1 +1 @@
-{"name":"@lightspeed/design-system-css","version":"27.2.1","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":"^27.2.1"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
+{"name":"@lightspeed/design-system-css","version":"29.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":"^29.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}

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

@@ -75,7 +75,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    background-color: vd-colour(box);
+    background-color: hs-color(bg-neutral-top);
     padding-top: 8px;
     height: auto;
   }
@@ -104,11 +104,11 @@
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background-color: vd-colour(keyline);
+      background-color: hs-color(border-neutral-strong);
     }
   }
 
   .vd-carousel-paginator-indicator--active::before {
-    background-color: vd-colour(do);
+    background-color: hs-color(bg-go-default);
   }
 }

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

@@ -49,10 +49,10 @@
 // -----------------------------------------------------------------
 .vd-datatable-row {
   &:nth-child(odd) {
-    background-color: vd-colour(background);
+    background-color: hs-color(bg-neutral-backdrop);
   }
   &:nth-child(even) {
-    background-color: vd-colour(box);
+    background-color: hs-color(bg-neutral-top);
   }
 }
 
@@ -63,7 +63,7 @@
 
   &:nth-child(odd),
   &:nth-child(even) {
-    background-color: vd-colour(box);
+    background-color: hs-color(bg-neutral-top);
   }
 }
 
@@ -72,7 +72,7 @@
 
   &:nth-child(odd),
   &:nth-child(even) {
-    background-color: vd-colour(framing);
+    background-color: hs-color(border-neutral-soft);
   }
 }
 
@@ -81,7 +81,7 @@
 .vd-datatable-row--footer {
   &:nth-child(odd),
   &:nth-child(even) {
-    background-color: vd-colour(framing);
+    background-color: hs-color(border-neutral-soft);
   }
 }
 
@@ -93,7 +93,7 @@
   }
 
   .vd-datatable-foot.vd-sticky--stuck & {
-    border-bottom-color: vd-colour(keyline);
+    border-bottom-color: hs-color(border-neutral-strong);
     border-radius: 0;
   }
 }
@@ -109,7 +109,7 @@
     left: 0;
     width: 100%;
     height: 30px;
-    box-shadow: inset 0 -30px 40px -48px vd-colour(shadow);
+    box-shadow: inset 0 -30px 40px -48px hs-color(overlay-dark-default);
   }
 }
 

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

@@ -182,8 +182,8 @@
 .react-datepicker__day--range-end,
 .react-datepicker__day--selected {
   .vd-datepicker-day-button {
-    background: vd-colour(do);
-    color: vd-colour(box);
+    background: hs-color(bg-go-default);
+    color: hs-color(bg-neutral-top);
     font-weight: $vd-font-weight--bold;
     border: none;
   }
@@ -191,7 +191,7 @@
 
 .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
   .vd-datepicker-day-button:hover {
-    background: vd-rgba(vd-colour(do-rgb), 0.35);
+    background: vd-rgba(hs-color(bg-go-default-rgb), 0.35);
   }
 }
 
@@ -202,7 +202,7 @@
 
 // Highlight today
 .react-datepicker__day--today {
-  color: vd-colour(do);
+  color: hs-color(fg-go-default);
   font-weight: $vd-font-weight--bold;
 }
 

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

@@ -1,13 +1,13 @@
 // Date picker general
 $vd-datepicker-font-size: 15px;
-$vd-datepicker-button-colour: vd-colour(do);
+$vd-datepicker-button-colour: hs-color(fg-go-default);
 $vd-datepicker-padding: 24px;
-$vd-datepicker-background: vd-colour(box);
+$vd-datepicker-background: hs-color(bg-neutral-top);
 $vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
 
 // Grid
 $vd-datepicker-day-spacing: 10px;
-$vd-datepicker-range-colour: vd-colour(do-highlight);
+$vd-datepicker-range-colour: hs-color(bg-go-highlight-default);
 
 // Button
 $vd-datepicker-button-radius: 50%;
@@ -16,8 +16,8 @@ $vd-datepicker-button-size: 30px;
 // Button next / prev
 $vd-datepicker-next-prev-button-width: 26px;
 $vd-datepicker-next-prev-button-icon-size: 7px;
-$vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
-$vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
+$vd-datepicker-next-prev-arrow-border-enabled: 3px solid hs-color(fg-neutral-default);
+$vd-datepicker-next-prev-arrow-border-disabled: 3px solid hs-color(border-neutral-soft);
 
 // Date range picker granularity input
 $vd-datepicker-range-granularity-input-width: 153px;

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

@@ -16,7 +16,7 @@ $chart-bg: #fafafa;
     }
 
     .tick line {
-      stroke: vd-colour(framing);
+      stroke: hs-color(border-neutral-soft);
       stroke-width: 1px;
       fill: transparent;
     }
@@ -32,13 +32,13 @@ $chart-bg: #fafafa;
   }
 
   .vd-grid-zero-tick {
-    stroke: vd-colour(keyline);
+    stroke: hs-color(border-neutral-strong);
   }
 
   .vd-line {
     fill: transparent;
     stroke-width: 2px;
-    stroke: vd-colour(keyline);
+    stroke: hs-color(border-neutral-strong);
   }
 
   .vd-line-with-fill {
@@ -54,8 +54,8 @@ $chart-bg: #fafafa;
   }
 
   .vd-plot-point {
-    fill: vd-colour(do);
-    stroke: vd-colour(box);
+    fill: hs-color(fg-go-default);
+    stroke: hs-color(bg-neutral-top);
     stroke-width: 2px;
   }
 
@@ -71,7 +71,7 @@ $chart-bg: #fafafa;
 
   .vd-line-wrapper-main {
     .vd-line {
-      stroke: vd-colour(supplementary);
+      stroke: hs-color(bg-supplementary-default);
     }
   }
 
@@ -84,12 +84,12 @@ $chart-bg: #fafafa;
 
   .vd-line-label {
     @include vd-text(mini-signpost);
-    fill: vd-colour(keyline);
+    fill: hs-color(border-neutral-strong);
   }
   .vd-axis {
     .tick text {
       @include vd-text(mini-copy);
-      fill: vd-colour(text);
+      fill: hs-color(fg-neutral-default);
     }
   }
 }

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

@@ -7,7 +7,7 @@
   margin: 0 auto;
   padding: 0;
 
-  background: vd-colour(box);
+  background: hs-color(bg-neutral-top);
   border-radius: $vd-border-radius;
 
   width: calc(90% - #{$vd-dialog-close-width});

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

@@ -9,13 +9,13 @@
   height: 10px;
   width: 100%;
   border-radius: 5px;
-  background-color: vd-colour(framing);
+  background-color: hs-color(border-neutral-soft);
   overflow: hidden;
 }
 
 .vs-progress-bar {
   height: 100%;
   width: 0%;
-  background-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
   transition: width 0.6s ease;
 }

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

@@ -24,7 +24,7 @@
   display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
-  box-shadow: inset 0 -1px vd-colour(keyline);
+  box-shadow: inset 0 -1px hs-color(border-neutral-strong);
 }
 
 .pm-products-search-open {

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

@@ -11,7 +11,7 @@
   display: flex;
   padding-top: 6px;
   padding-bottom: 6px;
-  border-bottom: 1px solid vd-colour(keyline);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
   justify-content: space-between;
   align-items: center;
   min-height: 60px;
@@ -93,7 +93,7 @@
 }
 
 .vd-table-list-toggle-icon {
-  color: vd-colour(supplementary);
+  color: hs-color(bg-supplementary-default);
   transition: transform 50ms ease-in-out 0s;
   width: 16px;
   height: 16px;
@@ -170,7 +170,7 @@
 .vd-table-list-row {
   border-bottom: 1px solid hs-color(border-neutral-soft);
   &.vd-table-list-row--active {
-    background-color: vd-colour(go-highlight);
+    background-color: hs-color(bg-go-highlight-default);
   }
 }
 
@@ -179,14 +179,14 @@
 .vd-table-list-row--expandable {
   &:hover {
     cursor: pointer;
-    background-color: vd-colour(go-highlight);
+    background-color: hs-color(bg-go-highlight-default);
   }
 }
 
 // TABLE ROWS - EXPANDED ROW
 // -----------------------------------------------------------------
 .vd-table-list-row--expanded {
-  background: vd-colour(box);
+  background: hs-color(bg-neutral-top);
   box-shadow: $vd-table-list-expanded-shadow;
 
   .vd-table-list-cell:first-child {
@@ -202,8 +202,8 @@
 // TABLE ROWS - ACTIONS ROW (FOR THINGS SUCH AS HIGHLIGHTING ITEMS SELECTED)
 // -----------------------------------------------------------------
 .vd-table-list-row--actions {
-  background-color: vd-colour(framing);
-  border-bottom: 1px solid vd-colour(keyline);
+  background-color: hs-color(border-neutral-soft);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
 }
 
 // TABLE ROWS - EXPANDED ROW CONTENT
@@ -212,7 +212,7 @@
   display: none; // @todo Perhaps not required
 
   > .vd-table-list-cell {
-    background: vd-colour(box);
+    background: hs-color(bg-neutral-top);
     padding: 0;
 
     &:first-child {
@@ -236,7 +236,7 @@
 // TABLE ROWS - HEADER ROW
 // -----------------------------------------------------------------
 .vd-table-list-row--header {
-  border-bottom-color: vd-colour(keyline);
+  border-bottom-color: hs-color(border-neutral-strong);
 }
 
 // TABLE ROWS - EXPANDED ROW INNARDS

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

@@ -11,5 +11,5 @@
   }
 }
 
-$vd-table-list-expanded-shadow: 0 10px 12px -2px vd-colour(shadow);
+$vd-table-list-expanded-shadow: 0 10px 12px -2px hs-color(overlay-dark-default);
 $vd-table-list-max-height-for-vcentering: 50px;

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

@@ -12,9 +12,9 @@
   position: absolute;
   width: 100%;
   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;
+  color: hs-color(bg-neutral-top);
+  background: hs-color(bg-neutral-top)
+    linear-gradient(to left, hs-color(bg-neutral-top) 50%, $vd-upsell-background-colour 50%) no-repeat;
 }
 
 .vd-upsell-primary-background-inner {
@@ -28,7 +28,7 @@
 
 .vd-upsell-primary-upper {
   position: relative;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
 }
 
 .vd-upsell-primary-background svg {

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

@@ -12,7 +12,7 @@
     bottom: 0;
     margin: auto;
     .vd-video-play-button {
-      background-color: vd-colour(background);
+      background-color: hs-color(bg-neutral-backdrop);
       width: 80px;
       height: 80px;
       border-radius: 50%;
@@ -21,10 +21,10 @@
       }
     }
     .vd-video-play-button:hover {
-      background-color: vd-colour(supplementary);
+      background-color: hs-color(bg-supplementary-default);
     }
     .vd-video-play-button:active {
-      background-color: vd-colour(supplementary);
+      background-color: hs-color(bg-supplementary-default);
     }
   }
   .vd-video-thumbnail-image {

package/src/vend-styles/utilities/sticky.scss

@@ -10,7 +10,7 @@
 
   &.vd-sticky--stuck {
     box-shadow: 0 $vd-sticky-shadow-x $vd-sticky-shadow-blur $vd-sticky-shadow-spread
-      vd-colour(shadow);
+      hs-color(overlay-dark-default);
   }
 }
 
@@ -19,7 +19,7 @@
 
   &.vd-sticky--stuck {
     box-shadow: 0 (-$vd-sticky-shadow-x) $vd-sticky-shadow-blur $vd-sticky-shadow-spread
-      vd-colour(shadow);
+      hs-color(overlay-dark-default);
   }
 }
 

package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss

@@ -1,3 +1,3 @@
-$vd-action-bar-background-colour: vd-colour(framing);
+$vd-action-bar-background-colour: hs-color(border-neutral-soft);
 $vd-action-bar--inline-padding: vd-grid-unit(2) vd-grid-unit(6);
 $vd-action-bar--min-height: 45px;

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

@@ -17,7 +17,7 @@
   top: 1px;
   left: 1px;
   opacity: 1;
-  color: vd-colour(supplementary--text);
+  color: hs-color(fg-supplementary-default);
   pointer-events: none;
   user-select: none;
   text-align: left;

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

@@ -66,7 +66,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
   z-index: 1;
   margin-left: $vd-autocomplete-filter-icon-margin;
   margin-top: $vd-autocomplete-filter-icon-margin;
-  color: vd-colour(supplementary);
+  color: hs-color(bg-supplementary-default);
 }
 
 .vd-autocomplete-filter-button-label {

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

@@ -1,5 +1,5 @@
 .vd-avatar {
-  background-color: vd-colour(framing);
+  background-color: hs-color(border-neutral-soft);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -24,11 +24,11 @@
 
   &.vd-avatar--deleted-image {
     @include disabled();
-    background-color: vd-colour(no);
+    background-color: hs-color(bg-no-default);
   }
 
   .deleted-state-icon {
-    color: vd-colour(box);
+    color: hs-color(bg-neutral-top);
   }
 }
 
@@ -37,7 +37,7 @@
 
   word-wrap: normal;
   word-break: normal;
-  color: vd-colour(text-action);
+  color: hs-color(fg-neutral-ondark-default);
   text-align: center;
 
   &.vd-avatar--x-small {

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

@@ -9,7 +9,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
-  background-color: vd-colour(framing);
+  background-color: hs-color(border-neutral-soft);
   position: relative;
 
   // Ensure placeholder backgrounds are the same size regardless of tile size
@@ -19,7 +19,7 @@
 }
 
 .vd-avatar-multi-tile--remainder {
-  background-color: vd-colour(keyline);
+  background-color: hs-color(border-neutral-strong);
 }
 
 .vd-avatar-multi-count {
@@ -64,7 +64,7 @@
 
   .vd-avatar-multi-tile {
     flex: 1 1 50%;
-    border: ($vd-avatar-multi-size-gap * 0.5) solid vd-colour(box);
+    border: ($vd-avatar-multi-size-gap * 0.5) solid hs-color(bg-neutral-top);
     border-radius: 5px;
   }
 }

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

@@ -37,12 +37,12 @@
     &:active,
     &:focus {
       outline: none;
-      background-color: vd-colour(go-highlight);
+      background-color: hs-color(bg-go-highlight-default);
     }
   }
 
   &.vd-id-badge--current {
-    border-color: vd-colour(do);
+    border-color: hs-color(fg-go-default);
   }
 
   &.vd-id-badge--small {
@@ -78,7 +78,7 @@
       outline: none;
 
       .vd-id-badge__header-title {
-        color: vd-colour(go);
+        color: hs-color(fg-go-default);
       }
     }
   }
@@ -133,7 +133,7 @@
   justify-content: center;
   flex: 1;
   word-break: break-word;
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   @include vd-text(body);
 }
 
@@ -146,7 +146,7 @@
 }
 
 .vd-id-badge__image {
-  background-color: vd-colour(framing);
+  background-color: hs-color(border-neutral-soft);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;

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

@@ -1,7 +1,7 @@
 @mixin vd-banner(
   $primary-colour,
-  $text-colour: vd-colour(text-action),
-  $anchor-colour: vd-colour(text-action)
+  $text-colour: hs-color(fg-neutral-ondark-default),
+  $anchor-colour: hs-color(fg-neutral-ondark-default)
 ) {
   background-color: $primary-colour;
   color: $text-colour;

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

@@ -66,13 +66,13 @@
 
 .vd-banner--info,
 .vd-banner--activation {
-  @include vd-banner(vd-colour(supplementary));
+  @include vd-banner(hs-color(bg-supplementary-default));
 }
 .vd-banner--negative {
-  @include vd-banner(vd-colour(no));
+  @include vd-banner(hs-color(fg-no-default));
 }
 .vd-banner--success {
-  @include vd-banner(vd-colour(success));
+  @include vd-banner(hs-color(fg-success-default));
 }
 
 @include vd-viewport-media-max(medium) {

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

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

package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss

@@ -21,7 +21,7 @@
 //
 @mixin vd-btn-shadow($_vd-colour-name) {
   box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread
-    vd-rgba(vd-colour(#{$_vd-colour-name}-rgb), $vd-opacity);
+    vd-rgba(hs-get-action-color(#{$_vd-colour-name}-rgb, bg), $vd-opacity);
 }
 
 // Applies a box shadow with an outline in the provided primary colour.
@@ -31,9 +31,9 @@
 // @param {String} $_vd-colour-name - the button colour to use for the outline.
 //
 @mixin vd-btn-outline-shadow($_vd-colour-name) {
-  $_vd-requested-color: vd-colour(#{$_vd-colour-name}-rgb);
+  $_vd-requested-color: hs-get-action-color(#{$_vd-colour-name}-rgb, bg);
 
-  box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(vd-colour(box-rgb), 0.8),
+  box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top), 0.8),
     0 0 $vd-shadow-blur #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, $vd-opacity),
     0 0 0 #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, 0.6);
 }
@@ -47,19 +47,19 @@
 @mixin vd-btn-states($_vd-colour-name, $_vd-use-default-hover: false) {
   @include vd-hover-when-supported {
     &:hover {
-      color: vd-colour(text-action);
+      color: hs-color(fg-neutral-ondark-default);
       @if ($_vd-use-default-hover) {
-        background-color: vd-colour(#{$_vd-colour-name});
+        background-color: hs-get-action-color($_vd-colour-name, bg);
       } @else {
-        background-color: vd-colour(#{$_vd-colour-name}-lighter);
+        background-color: hs-get-action-color(#{$_vd-colour-name}-lighter, bg);
       }
     }
   }
 
   &:active,
   &.vd-btn--active {
-    color: vd-colour(text-action);
-    background-color: vd-colour(#{$_vd-colour-name}-darker);
+    color: hs-color(fg-neutral-ondark-default);
+    background-color: hs-get-action-color(#{$_vd-colour-name}-darker, bg);
     @include vd-btn-shadow($_vd-colour-name);
   }
 
@@ -77,8 +77,8 @@
 // @param {String} $_vd-colour-name - the button colour.
 //
 @mixin vd-btn($_vd-colour-name) {
-  background-color: vd-colour($_vd-colour-name);
-  color: vd-colour(text-action);
+  background-color: hs-get-action-color($_vd-colour-name, bg);
+  color: hs-color(fg-neutral-ondark-default);
 
   @include vd-btn-states($_vd-colour-name);
 }
@@ -94,7 +94,7 @@
 //
 @mixin vd-btn-text($_vd-colour-name) {
   background-color: transparent;
-  color: vd-colour($_vd-colour-name);
+  color: hs-get-action-color($_vd-colour-name, fg);
 
   @include vd-btn-states($_vd-colour-name, true);
 }
@@ -112,9 +112,9 @@
 
   // Button icons with a "go" category have different colour when resting
   @if ($_vd-colour-name == go) {
-    color: vd-colour($_vd-colour-name);
+    color: hs-get-action-color($_vd-colour-name, fg);
   } @else {
-    color: vd-colour(supplementary);
+    color: hs-color(fg-supplementary-default);
   }
 
   @include vd-btn-states($_vd-colour-name, true);

package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss

@@ -1,5 +1,7 @@
 $vd-btn-group-margin: vd-grid-unit(1);
 $vd-btn-stroke-width: 1px !default;
+// @TODO remove `do` color option. While React components no longer support `do`, we still need to keen the `vd-btn--do**` classes that are generated. Consuming apps still reference
+// and use these - including VEND.UI.
 $vd-btn-categories: (do, supplementary, no, go);
 $vd-btn-icon-font-size: 18px;
 $vd-btn-padding: vd-grid-unit(3) vd-grid-unit(5);