@lightspeed/design-system-css 34.0.1 → 35.0.0

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

@@ -9,9 +9,9 @@ $vd-autocomplete-filter-icon-margin: 14px;
 .vd-autocomplete-filter {
   display: block;
 
-  @include vd-input-error-selectors() {
+  @include vd-input-error-selectors {
     vd-autocomplete-multi {
-      @include vd-input-error-styles();
+      @include vd-input-error-styles;
     }
   }
 }
@@ -53,7 +53,8 @@ $vd-autocomplete-filter-icon-margin: 14px;
 }
 
 .vd-autocomplete-select-placeholder {
-  @include vd-input-states();
+  @include vd-input-states;
+
   border-right: $vd-input-border-width * 0.5 solid hs-color(border-neutral-soft);
   border-radius: $vd-autocomplete-filter-select-border-radius;
   padding: $vd-autocomplete-filter-select-padding;

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

@@ -6,7 +6,6 @@
   border-radius: $vd-card-border-radius;
   width: $vd-avatar-size;
   height: $vd-avatar-size;
-
   flex: 1;
   display: flex;
   justify-content: center;
@@ -23,7 +22,8 @@
   }
 
   &.vd-avatar--deleted-image {
-    @include disabled();
+    @include disabled;
+
     background-color: hs-color(bg-no-default);
   }
 

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

@@ -1,4 +1,8 @@
 .vd-avatar-multi {
+  display: grid;
+  grid-template-columns: repeat(2, $vd-avatar-multi-tile-size);
+  grid-column-gap: $vd-avatar-multi-size-gap;
+  row-gap: $vd-avatar-multi-size-gap;
   width: $vd-avatar-multi-size;
   height: $vd-avatar-multi-size;
 }
@@ -12,6 +16,15 @@
   background-color: hs-color(bg-neutral-edge);
   position: relative;
 
+  &:only-child {
+    grid-area: 2 span / 2 span;
+  }
+
+  // Three tiles
+  &:first-child:nth-last-child(3) {
+    grid-area: 2 span;
+  }
+
   // Ensure placeholder backgrounds are the same size regardless of tile size
   &[vd-lazy-load*='placeholder.svg'] {
     background-size: $vd-avatar-multi-tile-placeholder-size;
@@ -31,40 +44,3 @@
   transform: translateY(-50%);
 }
 
-// Grid
-@supports (display: grid) {
-  .vd-avatar-multi {
-    display: grid;
-    grid-template-columns: repeat(2, $vd-avatar-multi-tile-size);
-    grid-column-gap: $vd-avatar-multi-size-gap;
-    row-gap: $vd-avatar-multi-size-gap;
-  }
-
-  // Only one tile
-  .vd-avatar-multi-tile {
-    &:only-child {
-      grid-area: 2 span / 2 span;
-    }
-
-    // Three tiles
-    &:first-child:nth-last-child(3) {
-      grid-area: 2 span;
-    }
-  }
-}
-
-// Flexbox fallback
-@supports not (display: grid) {
-  .vd-avatar-multi {
-    display: flex;
-    flex-wrap: wrap;
-    width: $vd-avatar-multi-size;
-    height: $vd-avatar-multi-size;
-  }
-
-  .vd-avatar-multi-tile {
-    flex: 1 1 50%;
-    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

@@ -26,7 +26,8 @@
   // INTERACTIVE STYLES
 
   &.vd-id-badge--interactive-selection {
-    @include vd-card();
+    @include vd-card;
+
     cursor: pointer;
 
     .vd-id-badge__image {
@@ -134,6 +135,7 @@
   flex: 1;
   word-break: break-word;
   color: hs-color(fg-neutral-default);
+
   @include vd-text(body);
 }
 

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

@@ -14,24 +14,6 @@
   align-self: stretch;
   position: relative;
   backdrop-filter: brightness(0.9);
-
-  @supports not (backdrop-filter: brightness(0.9)) {
-    &::before {
-      content: '';
-      background: $vd-colour-black;
-      filter: opacity(0.1);
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 0;
-    }
-
-    .vd-feedback-content {
-      z-index: 1;
-    }
-  }
 }
 
 .vd-banner-wrapper,
@@ -63,9 +45,11 @@
 .vd-banner--activation {
   @include vd-banner(hs-color(bg-supplementary-default));
 }
+
 .vd-banner--negative {
   @include vd-banner(hs-color(bg-no-default));
 }
+
 .vd-banner--success {
   @include vd-banner(hs-color(bg-success-default));
 }

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

@@ -9,7 +9,7 @@
   &.disabled {
     cursor: not-allowed;
 
-    @include disabled();
+    @include disabled;
   }
 }
 
@@ -48,6 +48,7 @@
   @include vd-hover-when-supported {
     &:hover {
       color: hs-color(fg-neutral-ondark-default);
+
       @if ($_vd-use-default-hover) {
         background-color: hs-get-action-color($_vd-colour-name, bg);
       } @else {
@@ -60,6 +61,7 @@
   &.vd-btn--active {
     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);
   }
 

package/src/vend.ui/components/vd-btn/vd-btn-panel.scss

@@ -22,19 +22,20 @@
   padding: vd-grid-unit(3) vd-grid-unit(5);
   position: relative;
   text-align: center;
-
   transition-property: background, color, border, box-shadow;
-  transition: all $vd-time-s;
+  transition-duration: $vd-time-s;
 
-  @include vd-btn-disabled();
+  @include vd-btn-disabled;
 
   &:focus {
     border-color: hs-color(border-go-default);
+
     @include vd-btn-shadow(go);
   }
 
   &:hover {
     border-color: hs-color(bg-go-soft);
+
     @include vd-btn-shadow(go);
   }
 
@@ -51,6 +52,7 @@
   &:focus,
   &:hover {
     border-color: hs-color(bg-go-soft);
+
     @include vd-btn-shadow(do);
   }
 

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

@@ -12,7 +12,6 @@
   padding: $vd-btn-padding;
   position: relative;
   text-align: center;
-
   transition-property: background, color, border, box-shadow;
   transition-duration: $vd-time-s;
 
@@ -20,7 +19,7 @@
     outline: none;
   }
 
-  @include vd-btn-disabled();
+  @include vd-btn-disabled;
 }
 
 // Disable click events for anchors using button classes
@@ -69,6 +68,7 @@ a.vd-btn {
 
 .vd-btn--jumbo {
   @include vd-text(sub-heading);
+
   padding: vd-grid-unit(4) vd-grid-unit(8);
 }
 

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

@@ -1,7 +1,7 @@
 .vd-card {
-  @include vd-card();
+  @include vd-card;
 
   &.vd-card--active {
-    @include vd-shadow();
+    @include vd-shadow;
   }
 }

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

@@ -16,22 +16,27 @@ vd-carousel {
   from {
     transform: translateX(100%);
   }
+
   to {
     transform: translateX(0);
   }
 }
+
 @keyframes vd-slide-out-left {
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(-200%);
   }
 }
+
 @keyframes vd-slide-right {
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(0);
   }
@@ -43,7 +48,6 @@ vd-carousel-frame {
   order: 2;
   visibility: hidden;
   max-width: 100%;
-
   animation-duration: 0.5s;
   animation-timing-function: ease-in-out;
 }

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

@@ -2,9 +2,11 @@
   0% {
     clip-path: rect(0 0 0 0);
   }
+
   25% {
     clip-path: rect(0 100% 0 0);
   }
+
   50% {
     clip-path: rect(0 100% 100% 0);
   }
@@ -20,6 +22,7 @@
   &:first-child {
     margin-left: 0;
   }
+
   &:last-child {
     margin-right: 0;
   }
@@ -68,6 +71,7 @@
 
 .vd-checkbox-description {
   @include vd-text(supplementary);
+
   margin-top: vd-grid-unit(1);
   margin-left: $vd-checkbox-length + $vd-checkbox-spacing;
 }
@@ -82,11 +86,11 @@
   height: $vd-checkbox-length;
   width: $vd-checkbox-length;
   background-color: hs-color(bg-neutral-top);
-  border: 1px solid hs-color(border-neutral-strong);
+  border: 2px solid hs-color(border-neutral-strong);
   border-radius: $vd-border-radius;
   box-sizing: border-box;
 
-  &:after {
+  &::after {
     content: '';
     box-sizing: content-box;
     display: block;
@@ -98,14 +102,14 @@
     transform-origin: left top;
     height: $vd-checkbox-tick-height;
     width: $vd-checkbox-tick-width;
-    top: 11px;
-    left: 2px;
+    top: 10px;
+    left: 1px;
     opacity: 0;
     transition: opacity $vd-time-s;
   }
 }
 
-.vd-checkbox-input:hover + .vd-checkbox-tick:after {
+.vd-checkbox-input:hover + .vd-checkbox-tick::after {
   opacity: 1;
 }
 
@@ -119,7 +123,7 @@
   background-color: hs-color(bg-go-default);
   border-color: hs-color(bg-go-default);
 
-  &:after {
+  &::after {
     opacity: 1;
     animation: vd-checkbox-checked $vd-time-l;
     border-color: hs-color(fg-neutral-ondark-default);
@@ -134,7 +138,7 @@
   cursor: not-allowed;
   filter: grayscale(100%);
 
-  &:hover:not(:checked) + .vd-checkbox-tick:after {
+  &:hover:not(:checked) + .vd-checkbox-tick::after {
     opacity: 0;
   }
 
@@ -153,7 +157,7 @@
   border: 2px solid hs-color(bg-go-default);
 }
 
-.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
+.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick::after {
   background-color: hs-color(bg-go-default);
   border: none;
   top: 9px;

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

@@ -50,7 +50,7 @@ $vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0
   box-sizing: initial;
 }
 
-@mixin next-prev-arrow-common--disabled {
+@mixin disabled-next-prev-arrow-common {
   border-right: $vd-datepicker-next-prev-arrow-border-disabled;
   border-top: $vd-datepicker-next-prev-arrow-border-disabled;
 }

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

@@ -16,6 +16,7 @@
 
 .vd-datepicker-range-no-end-disabled {
   @include disabled;
+
   pointer-events: none;
 }
 
@@ -46,6 +47,7 @@
   .vd-datepicker-time-input-containter {
     width: 100px;
     margin-left: -2px;
+
     .react-datepicker__tab-loop {
       // Hide ReactDatePicker default time picker, only use the input box to change start/end time.
       display: none;
@@ -94,6 +96,7 @@
 .vd-datepicker,
 .vd-datepicker-range {
   @include vd-reset;
+
   font-size: $vd-datepicker-font-size;
 
   table,
@@ -119,7 +122,7 @@
   .pika-table {
     margin-top: $vd-datepicker-table-spacing * 2;
 
-    tbody:before {
+    tbody::before {
       content: ' ';
       display: block;
       margin-top: $vd-datepicker-table-spacing;
@@ -156,14 +159,16 @@
       visibility: hidden;
 
       &:nth-child(even) {
-        &:before {
+        &::before {
           @include vd-datepicker-select-arrow-common;
+
           border-bottom: $vd-datepicker-select-arrow-border;
           right: $vd-datepicker-select-icon-position-right-even;
         }
 
-        &:after {
+        &::after {
           @include vd-datepicker-select-arrow-common;
+
           border-top: $vd-datepicker-select-arrow-border;
           top: $vd-datepicker-select-icon-position-top;
           right: $vd-datepicker-select-icon-position-right-even;
@@ -171,14 +176,16 @@
       }
 
       &:nth-child(odd) {
-        &:before {
+        &::before {
           @include vd-datepicker-select-arrow-common;
+
           border-bottom: $vd-datepicker-select-arrow-border;
           right: $vd-datepicker-select-icon-position-right-odd;
         }
 
-        &:after {
+        &::after {
           @include vd-datepicker-select-arrow-common;
+
           border-top: $vd-datepicker-select-arrow-border;
           top: $vd-datepicker-select-icon-position-top;
           right: $vd-datepicker-select-icon-position-right-odd;
@@ -188,18 +195,21 @@
 
     .pika-select {
       @include vd-select;
+
       padding-right: 12px;
       visibility: visible;
     }
 
     .pika-select-month {
       @include vd-datepicker-select-common;
+
       width: 110px;
       left: $vd-datepicker-select-horizontal-positioning;
     }
 
     .pika-select-year {
       @include vd-datepicker-select-common;
+
       width: 72px;
       right: $vd-datepicker-select-horizontal-positioning;
     }
@@ -216,14 +226,15 @@
       visibility: hidden;
       cursor: pointer;
 
-      &:before {
+      &::before {
         @include next-prev-arrow-common;
+
         transform: rotate(225deg);
       }
 
       &.is-disabled {
-        &:before {
-          @include next-prev-arrow-common--disabled;
+        &::before {
+          @include disabled-next-prev-arrow-common;
         }
       }
     }
@@ -234,14 +245,15 @@
       visibility: hidden;
       cursor: pointer;
 
-      &:before {
+      &::before {
         @include next-prev-arrow-common;
+
         transform: rotate(45deg);
       }
 
       &.is-disabled {
-        &:before {
-          @include next-prev-arrow-common--disabled;
+        &::before {
+          @include disabled-next-prev-arrow-common;
         }
       }
     }

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

@@ -23,7 +23,6 @@
   // This element creates an invisible mask to position the dialog modal. Disable click events so they can fall through
   // to the overlay.
   pointer-events: none;
-
   display: flex;
   align-items: center;
 
@@ -67,15 +66,12 @@
   box-sizing: border-box;
   margin: 0 auto;
   padding: var(--vd-dialog-spacing);
-
   background: hs-color(bg-neutral-top);
   border-radius: $vd-border-radius;
   display: flex;
   flex-direction: column;
-
   min-height: $vd-dialog-container-min-height;
   max-height: calc(95vh - #{$vd-dialog-container-top-offset});
-
   width: calc(90% - #{$vd-dialog-close-width});
   // Enables default click events for the container child elements
   pointer-events: auto;
@@ -93,9 +89,7 @@
   @include vd-viewport-media-max(xsmall) {
     max-height: none;
     height: calc(100% - #{$vd-dialog-container-top-offset});
-
     border-radius: 0;
-
     margin-left: 0;
     margin-right: 0;
   }
@@ -114,7 +108,6 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-
   margin-bottom: var(--vd-dialog-spacing);
 }
 
@@ -188,33 +181,4 @@
   @include vd-viewport-media-max(xsmall) {
     text-align: center;
   }
-}
-
-// Fallback to base padding if browser doesn't support CSS variables
-@supports (not (--a: 0)) {
-  .vd-dialog .vd-dialog-banner {
-    margin: -(#{$vd-section-padding-h-med});
-    margin-bottom: $vd-section-padding-h-med;
-
-    .vd-banner-wrapper {
-      padding: $vd-section-padding-v-med $vd-section-padding-h-med;
-    }
-  }
-
-  .vd-dialog-container {
-    padding: $vd-section-padding-h-med;
-  }
-
-  .vd-dialog-header {
-    margin-bottom: $vd-section-padding-h-med;
-  }
-
-  .vd-dialog-content {
-    margin: 0 - (#{$vd-section-padding-h-med});
-    padding: 0 $vd-section-padding-h-med;
-
-    + .vd-dialog-actions {
-      margin-top: $vd-section-padding-h-med;
-    }
-  }
-}
+}

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

@@ -10,7 +10,6 @@ vd-dott,
   display: inline-block;
   width: $vd-dott-diameter;
   height: $vd-dott-diameter;
-
   will-change: transform;
   animation: vd-rotate 3s infinite linear;
   outline: 1px solid transparent; // Fix for Chrome

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

@@ -7,9 +7,9 @@
 }
 
 .vd-dropdown-input-container {
-  @include vd-input-error-selectors() {
+  @include vd-input-error-selectors {
     .vd-dropdown-input {
-      @include vd-input-error-styles();
+      @include vd-input-error-styles;
     }
   }
 }

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

@@ -26,6 +26,7 @@
 
 .vd-label {
   @include vd-text(label);
+
   display: inline-block;
   margin-bottom: vd-spacer(1);
 }

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

@@ -6,6 +6,7 @@
 .vd-flex--row {
   flex-direction: row;
 }
+
 .vd-flex--column {
   flex-direction: column;
 }
@@ -17,15 +18,19 @@
 .vd-flex--justify-start {
   justify-content: flex-start;
 }
+
 .vd-flex--justify-end {
   justify-content: flex-end;
 }
+
 .vd-flex--justify-between {
   justify-content: space-between;
 }
+
 .vd-flex--justify-around {
   justify-content: space-around;
 }
+
 .vd-flex--justify-center {
   justify-content: center;
 }
@@ -33,15 +38,19 @@
 .vd-flex--align-start {
   align-items: flex-start;
 }
+
 .vd-flex--align-end {
   align-items: flex-end;
 }
+
 .vd-flex--align-baseline {
   align-items: baseline;
 }
+
 .vd-flex--align-center {
   align-items: center;
 }
+
 .vd-flex--align-stretch {
   align-items: stretch;
 }

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

@@ -1,4 +1,4 @@
-@include vd-build-grid();
+@include vd-build-grid;
 
 // Large gutter; @todo deprecate since it has inconsistent vertical spacing
 .vd-g-row--gutter-l {

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

@@ -10,17 +10,18 @@ $vd-hero-aux-content-margin: vd-grid-unit(3) !default;
 $vd-hero-aux-headline-max-width: 90% !default;
 $vd-hero-aux-content-max-width: 90% !default;
 $vd-hero-aux-hr-width: 80px !default;
-$vd-hero-aux-width: 33.33333% !default;
+$vd-hero-aux-width: 33.3333% !default;
 
 // Hero Auxiliary Headline
 @mixin vd-text-hero-aux-headline() {
   @include vd-text(intro);
+
   font-weight: $vd-font-weight--bold;
 }
 
 // Hero Headline
 @mixin vd-text-hero-headline() {
-  @include vd-heading-reset();
+  @include vd-heading-reset;
   @include vd-line-height(42, 35);
   @include font-smoothing;