@lightspeed/design-system-css 34.0.1 → 35.0.0

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

@@ -12,7 +12,7 @@ table {
 
     th {
       text-align: left;
-      padding: vd-grid-unit(4) vd-grid-unit(10) vd-grid-unit(4);
+      padding: vd-grid-unit(4) vd-grid-unit(10);
     }
 
     tr {
@@ -42,12 +42,15 @@ table {
     &.vd-no-border-b {
       border-bottom: none;
     }
+
     &.vd-no-border-t {
       border-top: none;
     }
+
     &.vd-no-border-l {
       border-left: none;
     }
+
     &.vd-no-border-r {
       border-right: none;
     }
@@ -55,6 +58,7 @@ table {
     &.vd-border-t {
       border-top: 1px solid hs-color(border-neutral-soft);
     }
+
     &.vd-border-b {
       border-bottom: 1px solid hs-color(border-neutral-soft);
     }
@@ -90,9 +94,11 @@ table {
     &.vd-valign-t td {
       vertical-align: top;
     }
+
     &.vd-valign-m td {
       vertical-align: middle;
     }
+
     &.vd-valign-b td {
       vertical-align: bottom;
     }
@@ -126,6 +132,7 @@ table {
       & + tr:not(.vd-expandable) {
         display: none;
       }
+
       &.vd-expandable--expanded + tr {
         display: table-row;
       }
@@ -162,22 +169,27 @@ table {
     &.vd-sml-pad-l {
       padding-left: vd-grid-unit(2);
     }
+
     &.vd-sml-pad-h,
     &.vd-sml-pad-r {
       padding-right: vd-grid-unit(2);
     }
+
     &.vd-no-pad-h,
     &.vd-no-pad-l {
       padding-left: 0;
     }
+
     &.vd-no-pad-h,
     &.vd-no-pad-r {
       padding-right: 0;
     }
+
     &.vd-no-pad-v,
     &.vd-no-pad-b {
       padding-bottom: 0;
     }
+
     &.vd-no-pad-v,
     &.vd-no-pad-t {
       padding-top: 0;
@@ -186,9 +198,11 @@ table {
     &.vd-valign-t {
       vertical-align: top;
     }
+
     &.vd-valign-m {
       vertical-align: middle;
     }
+
     &.vd-valign-b {
       vertical-align: bottom;
     }
@@ -196,6 +210,7 @@ table {
 
   &.vd-table--data {
     border: 1px solid hs-color(border-neutral-soft);
+
     tr {
       background-color: hs-color(bg-neutral-top);
     }
@@ -245,7 +260,7 @@ table {
 
   > thead {
     th {
-      padding: vd-grid-unit(4) vd-grid-unit(4);
+      padding: vd-grid-unit(4);
       background-color: hs-color(bg-neutral-top);
     }
 
@@ -268,7 +283,7 @@ table {
     }
 
     > td {
-      padding: vd-grid-unit(4) vd-grid-unit(4);
+      padding: vd-grid-unit(4);
     }
   }
 
@@ -301,8 +316,7 @@ table {
 
   &.vd-table--report--nested--indented {
     > tbody > tr > td:first-child {
-      padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) +
-        $vd-nested-reporting-table-indent-padding;
+      padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) + $vd-nested-reporting-table-indent-padding;
     }
   }
 }

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

@@ -54,12 +54,12 @@
   color: hs-color(fg-neutral-default);
 
   &.vd-tab--active .vd-tab-button {
-    @include vd-active-tab();
+    @include vd-active-tab;
   }
 
   @include vd-hover-when-supported {
     &:hover:not(.vd-tab--disabled) .vd-tab-button {
-      @include vd-active-tab();
+      @include vd-active-tab;
     }
 
     &:hover:not(.vd-tab--active) .vd-tab-button {
@@ -68,7 +68,7 @@
   }
 
   &.vd-tab--disabled .vd-tab-button {
-    @include disabled();
+    @include disabled;
 
     @include vd-hover-when-supported {
       &:hover {

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

@@ -1,12 +1,15 @@
 .vd-text--secondary {
   color: hs-color(fg-supplementary-default);
 }
+
 .vd-text--success {
   color: hs-color(fg-go-default);
 }
+
 .vd-text--negative {
   color: hs-color(fg-no-default);
 }
+
 .vd-text--disabled {
   color: hs-color(fg-neutral-default);
   opacity: 0.35;

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss

@@ -6,9 +6,7 @@
   left: 0;
   top: 0;
   z-index: $vd-toast-notification-z-index;
-
   display: block;
-
   opacity: 0;
   transform: translateY(-100%);
   transition: transform ease-in-out $vd-time-m, opacity ease-in-out $vd-time-m;
@@ -22,23 +20,19 @@
 
 .vd-toast-notification {
   position: relative;
-
   display: flex;
   align-items: flex-start;
   justify-content: center;
-
   width: calc(100% - #{$vd-toast-notification-offset});
   max-width: vd-grid-unit(170);
   margin: 0 auto;
   padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r
     $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
-
   border-radius: $vd-border-radius;
   box-sizing: border-box;
   color: hs-color(fg-neutral-ondark-default);
   text-align: center;
   font-weight: $vd-font-weight--bold;
-
   transition: opacity ease-in-out $vd-time-m;
   pointer-events: auto;
 }

package/src/vend.ui/styles/global/_non-styles.scss

@@ -11,11 +11,9 @@
 // Global non-style variables, mixins and functions.
 
 @import 'utils/functions';
-
 @import 'viewport/viewport-data';
 @import 'viewport/viewport-ranges';
 @import 'viewport/viewport-media-mixins';
-
 @import 'colour/colour';
 @import 'effects/effects-ns';
 @import 'text/text';

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

@@ -1,5 +1,5 @@
 body {
-  @include vd-reset();
+  @include vd-reset;
 
   padding: 0;
   margin: 0;

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

@@ -13,6 +13,7 @@
   @if ($_vd-colour-theme != _no_arg_provided_) {
     @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
   }
+
   @if (index($helios-theme-available-keys, $_vd-colour-element) != null) {
     @return var(--vd-colour--#{$_vd-colour-element});
   } @else {
@@ -28,6 +29,7 @@
 /// @return {String} - Color as a css variable
 @function hs-color($_hs-color) {
   $_hs-theme: map-get($hs-unified-themes, light);
+
   @if (map-has-key($_hs-theme, $_hs-color)) {
     @return var(#{$hs-css-variables-prefix}#{$_hs-color});
   } @else {
@@ -63,6 +65,7 @@
     $string: unquote('#{$hex}');
   }
   $string: '%23' + $string;
+
   @return $string;
 }
 
@@ -114,8 +117,7 @@
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      vd-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace + vd-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
   }
 
   @return $string;

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

@@ -1,6 +1,7 @@
 // @TODO remove `do` color option. While React components no longer support `do`, we still need to keen the `vd-colour-do` classes that are generated. Consuming apps still reference
 // and use these.
 $_vd-colour-helpers: (do, go, no, supplementary);
+
 @each $key in ($_vd-colour-helpers) {
   .vd-colour-#{$key} {
     color: hs-get-action-color($key, fg);

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

@@ -8,7 +8,6 @@
 // Unified Themes
 @import '@lightspeed/design-system-tokens/scss/unified-theme-light';
 @import '@lightspeed/design-system-tokens/scss/unified-theme-dark';
-
 @import './generate-themes';
 
 $vd-colour-themes: (

package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss

@@ -1 +1 @@
-@include hs-generate-unified-themes();
+@include hs-generate-unified-themes;

package/src/vend.ui/styles/global/colour/themes/_generate-themes.scss

@@ -7,6 +7,7 @@
   @media (prefers-color-scheme: dark) {
     .vd-theme--use-dark-mode {
       color-scheme: dark;
+
       @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
     }
   }
@@ -15,12 +16,14 @@
   :root,
   .vd-theme--light {
     color-scheme: light;
+
     @include vd-generate-theme-values(map-get($vd-colour-themes, light));
   }
 
   // Dark theme
   .vd-theme--dark {
     color-scheme: dark;
+
     @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
   }
 }
@@ -40,7 +43,7 @@
   }
 
   :root {
-    @include generate-spacing-values();
+    @include generate-spacing-values;
   }
 
   // Default theme (light)

package/src/vend.ui/styles/global/colour/themes/_theme-vd-functions.scss

@@ -57,6 +57,7 @@
 /// @return {Map} Only discretionary colors
 @function vd-add-theme-discretionary-only($theme) {
   $_vend-discretionary-theme: ();
+
   @each $key in ($tokens-awaiting-migration) {
     $value: map-get($theme, $key);
     $_vend-discretionary-theme: map-merge(

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

@@ -8,6 +8,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -17,10 +18,12 @@
   0% {
     opacity: 0;
   }
+
   30%,
   70% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

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

@@ -8,7 +8,7 @@
 
 // Helper class implementing the vd-truncate mixin
 .vd-text-truncate {
-  @include vd-truncate();
+  @include vd-truncate;
 }
 
 // Helper class implementing white-space: nowrap

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

@@ -1,10 +1,9 @@
 @use 'sass:math';
-
 @import 'text-definitions';
 
 @mixin font-smoothing {
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -71,7 +70,6 @@
     @include font-smoothing;
     // Resets to ensure <h#> and <p> elements will have the same margins and text colour
     word-break: break-word;
-
     margin: 0;
 
     @each $property, $value in $_vd-requested-type-styles {

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

@@ -31,6 +31,7 @@
   $sass-precision: 5;
 
   $pow: pow(10, $digits);
+
   @return math.div(round($float * $pow), $pow);
 }
 
@@ -66,6 +67,7 @@
   @each $key in $keys {
     $map: map-get($map, $key);
   }
+
   @return $map;
 }
 

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

@@ -6,13 +6,10 @@
 ##{map-get($vd-viewport-identifier-map, 'id')} {
   position: absolute;
   z-index: -1;
-
   top: 0;
   left: 0;
-
   width: 0;
   height: 0;
-
   visibility: hidden;
   overflow: hidden;
 

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

@@ -100,6 +100,7 @@
 
   @if (type-of($_viewport-range-min) == 'string') {
     $_media-min-width: get-viewport-px-width($_viewport-range-min, 'min');
+
     @if ($_media-min-width == null) {
       @error '[vd-viewport-media-min] Specified viewport range does not have a min range value. Use vd-viewport-media-max instead.';
     }
@@ -139,6 +140,7 @@
 
   @if (type-of($_viewport-range-max) == 'string') {
     $_media-max-width: get-viewport-px-width($_viewport-range-max, 'max');
+
     @if ($_media-max-width == null) {
       @error '[vd-viewport-media-max] Specified viewport range does not have a max range value. Use vd-viewport-media-min instead.';
     }