@faststore/ui 3.99.1 → 4.0.0-dev.2

package/src/components/molecules/Gift/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-gift] {
   // --------------------------------------------------------
   // Design Tokens for Gift
@@ -35,7 +37,7 @@
   // --------------------------------------------------------
 
   position: relative;
-  margin-top: calc(var(--fs-gift-icon-size)/2);
+  margin-top: calc(var(--fs-gift-icon-size) / 2);
 
   [data-fs-gift-wrapper] {
     display: grid;
@@ -43,9 +45,9 @@
     align-items: flex-start;
     height: var(--fs-gift-height);
     overflow: hidden;
+    background-color: var(--fs-gift-bkg-color);
     border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
     border-radius: var(--fs-gift-border-radius);
-    background-color: var(--fs-gift-bkg-color);
   }
 
   [data-fs-gift-image] {
@@ -71,7 +73,7 @@
     line-height: var(--fs-gift-title-line-height);
     color: var(--fs-gift-title-color);
 
-    @include truncate-title;
+    @include utilities.truncate-title;
   }
 
   [data-fs-gift-product-summary] {

package/src/components/molecules/InputField/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-input-field] {
   // --------------------------------------------------------
   // Design Tokens for Input Field
@@ -51,6 +53,7 @@
 
   [data-fs-input] {
     --fs-input-padding: var(--fs-input-field-padding);
+
     padding: var(--fs-input-field-padding);
     color: var(--fs-input-field-color);
 
@@ -70,7 +73,7 @@
 
     &:not(:placeholder-shown) + label,
     &:focus + label {
-      top: rem(6px);
+      top: utilities.rem(6px);
       left: var(--fs-border-width);
       font-size: var(--fs-input-field-label-size);
     }
@@ -95,7 +98,8 @@
   &[data-fs-input-field-error="true"] {
     [data-fs-input] {
       border-color: var(--fs-input-field-error-border-color);
-      @include input-focus-ring(
+
+      @include utilities.input-focus-ring(
         $outline: #{var(--fs-input-field-error-focus-ring)},
         $border: #{var(--fs-input-field-error-border-color)}
       );
@@ -115,7 +119,7 @@
   }
 
   &[data-fs-input-field-actionable="true"] {
-    min-width: rem(250px);
+    min-width: utilities.rem(250px);
 
     [data-fs-input] { padding-right: var(--fs-spacing-13); }
 

package/src/components/molecules/Modal/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-modal] {
   // --------------------------------------------------------
   // Design Tokens for Modal
@@ -58,7 +60,7 @@
   background-color: var(--fs-modal-background-color);
   border-radius: var(--fs-modal-border-radius);
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     width: var(--fs-modal-width-tablet);
     min-width: var(--fs-modal-min-width-tablet);
   }

package/src/components/molecules/NavbarLinks/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-navbar-links] {
   // --------------------------------------------------------
   // Design Tokens for Navbar Links
@@ -32,10 +34,10 @@
   background-color: var(--fs-navbar-links-bkg-color);
   transition: var(--fs-navbar-links-transition-property) var(--fs-navbar-links-transition-timing) var(--fs-navbar-links-transition-function);
 
-  @include media("<notebook") { padding: 0; }
+  @include utilities.media("<notebook") { padding: 0; }
 
   [data-fs-navbar-links-wrapper] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: flex;
       align-items: center;
     }
@@ -58,19 +60,20 @@
       color: var(--fs-color-text-display);
     }
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       display: none;
     }
   }
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     [data-fs-navbar-links-list] {
       position: relative;
       display: flex;
-      align-items: center;
       column-gap: var(--fs-spacing-3);
+      align-items: center;
       padding-left: var(--fs-navbar-links-list-padding-left-notebook);
       margin-left: var(--fs-navbar-links-list-margin-left-notebook);
+
       &::before {
         position: absolute;
         left: calc(-1 * var(--fs-spacing-1));
@@ -87,7 +90,7 @@
     }
   }
 
-  @include media("<notebook") {
+  @include utilities.media("<notebook") {
     border-top: var(--fs-navbar-links-border-top-width-mobile) solid var(--fs-navbar-links-border-top-color-mobile);
     border-bottom: var(--fs-navbar-links-border-bottom-width-mobile) solid var(--fs-navbar-links-border-bottom-color-mobile);
   }

package/src/components/molecules/PickupPointCard/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-pickup-point-card] {
   // --------------------------------------------------------
   // Design Tokens for Pickup Point Card
@@ -47,7 +49,7 @@
   [data-fs-pickup-point-card-header-title] {
     font-weight: var(--fs-pickup-point-card-header-title-font-weight);
 
-    @include truncate-title(1);
+    @include utilities.truncate-title(1);
   }
 
   [data-fs-pickup-point-card-header-postal-code] {
@@ -76,7 +78,7 @@
     font-size: var(--fs-pickup-point-card-distance-font-size);
 
     > span {
-      @include truncate-title(3);
+      @include utilities.truncate-title(3);
     }
   }
 }

package/src/components/molecules/Popover/styles.scss

@@ -6,7 +6,7 @@
   // Default properties
   --fs-popover-margin                                : 0 var(--fs-spacing-3);
   --fs-popover-padding                               : var(--fs-spacing-3) var(--fs-spacing-4) var(--fs-spacing-4);
-  --fs-popover-padding-inline                         : var(--fs-spacing-4);
+  --fs-popover-padding-inline                        : var(--fs-spacing-4);
   --fs-popover-border-radius                         : var(--fs-border-radius);
   --fs-popover-bkg-color                             : var(--fs-color-body-bkg);
   --fs-popover-box-shadow                            : var(--fs-shadow-darker);

package/src/components/molecules/ProductCard/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-product-card] {
   // --------------------------------------------------------
   // Design Tokens for Product Card
@@ -85,7 +87,7 @@
   transition: var(--fs-product-card-transition-property) var(--fs-product-card-transition-timing) var(--fs-product-card-transition-function);
 
   &:focus-within {
-    @include focus-ring;
+    @include utilities.focus-ring;
 
     background-color: var(--fs-product-card-bkg-color-focus);
   }
@@ -137,7 +139,7 @@
       text-decoration: none;
       outline: none;
 
-      > span { @include truncate-title(1); }
+      > span { @include utilities.truncate-title(1); }
 
       &::after {
         position: absolute;
@@ -164,7 +166,7 @@
     color: var(--fs-product-card-title-color);
     > a { line-height: 1.25; }
 
-    @include truncate-title(var(--fs-product-card-title-max-lines));
+    @include utilities.truncate-title(var(--fs-product-card-title-max-lines));
   }
 
   [data-fs-product-card-prices] {
@@ -247,9 +249,9 @@
       padding-right: var(--fs-product-card-wide-content-padding);
       padding-left: var(--fs-product-card-wide-content-padding);
 
-      [data-fs-link] > span { @include truncate-title(2); }
+      [data-fs-link] > span { @include utilities.truncate-title(2); }
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         flex-direction: row;
         justify-content: space-between;
       }

package/src/components/molecules/ProductTile/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-product-tile-skeleton] {
   // --------------------------------------------------------
   // Design Tokens for Product Tile Skeleton
@@ -25,13 +27,13 @@
   padding: 0;
   overflow: hidden;
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     display: grid;
     grid-auto-rows: 62% auto;
     [data-fs-product-card-image] { height: 100%; }
   }
 
-  @include media(">=notebook") { grid-auto-rows: 80% auto; }
+  @include utilities.media(">=notebook") { grid-auto-rows: 80% auto; }
 
   [data-fs-product-tile-skeleton-content] {
     display: flex;
@@ -40,7 +42,7 @@
     padding: var(--fs-product-tile-skeleton-content-padding);
     background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex-direction: row;
       justify-content: space-between;
       height: 100%;
@@ -65,7 +67,7 @@
 
     [data-fs-skeleton-variant="image"] { border-radius: 0; }
 
-    @include media(">=tablet") { height: 100%; }
+    @include utilities.media(">=tablet") { height: 100%; }
   }
 
   [data-fs-product-tile-skeleton-image],

package/src/components/molecules/ProductTitle/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-product-title] {
   // --------------------------------------------------------
   // Design Tokens for Product Title
@@ -20,14 +22,14 @@
 
   [data-fs-product-title-header] {
     display: flex;
-    justify-content: space-between;
-    max-width: 42ch;
     flex-wrap: wrap;
-    column-gap: var(--fs-product-title-column-gap);
     row-gap: var(--fs-product-title-row-gap);
+    column-gap: var(--fs-product-title-column-gap);
+    justify-content: space-between;
+    max-width: 42ch;
 
     // Title prop
-    & > *:first-child {
+    > *:first-child {
       font-size: var(--fs-product-title-text-size);
       font-weight: var(--fs-product-title-text-weight);
       line-height: var(--fs-product-title-line-height);
@@ -35,7 +37,7 @@
 
     [data-fs-badge] { white-space: nowrap; }
 
-    @include media(">=tablet", "<notebook") {
+    @include utilities.media(">=tablet", "<notebook") {
       flex-direction: column;
       row-gap: var(--fs-product-title-row-gap);
     }
@@ -43,8 +45,8 @@
 
   [data-fs-product-title-addendum] {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     margin-top: var(--fs-product-title-row-gap);
     font-size: var(--fs-product-title-addendum-size);
     line-height: var(--fs-product-title-addendum-line-height);

package/src/components/molecules/SearchDropdown/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-search-dropdown] {
   // --------------------------------------------------------
   // Design Tokens for Search Dropdown
@@ -36,12 +38,12 @@
   background-color: var(--fs-search-dropdown-bkg-color);
   &:empty { display: none; }
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     top: var(--fs-search-dropdown-position-top-tablet);
     left: var(--fs-search-dropdown-position-left-tablet);
   }
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     top: var(--fs-search-dropdown-position-top-desktop);
     left: 0;
     width: var(--fs-search-dropdown-width-desktop);

package/src/components/molecules/SearchInputField/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-search-input-field-wrapper] {
   position: relative;
   display: inline-flex;
@@ -39,11 +41,9 @@
   width: 100%;
   height: var(--fs-search-input-field-height-mobile);
 
-  @include input-focus-ring;
+  @include utilities.input-focus-ring;
 
-  @include media(">=notebook") {
-    height: var(--fs-search-input-field-height-desktop);
-  }
+  @include utilities.media(">=notebook") { height: var(--fs-search-input-field-height-desktop); }
 
   [data-fs-search-input-field-actions] {
     position: relative;
@@ -52,7 +52,7 @@
     gap: 0;
     align-items: center;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       position: absolute;
       min-height: var(--fs-search-input-field-button-min-height);
       inset-inline-end: 0;
@@ -69,13 +69,11 @@
       border var(--fs-search-input-field-transition-timing)
       var(--fs-search-input-field-transition-function);
 
-    @include media("<notebook") {
-      border: 0;
-    }
+    @include utilities.media("<notebook") { border: 0; }
   }
 
   [data-fs-icon-button][data-fs-button-variant] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       min-height: var(--fs-search-input-field-button-min-height);
       padding-top: var(--fs-search-input-field-button-padding-top-desktop);
       padding-bottom:
@@ -106,7 +104,7 @@
   &[data-fs-search-input-field] [data-fs-search-input-field-upload-button] {
     right: 2.5rem;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       right: 3rem;
     }
   }

package/src/components/molecules/SearchProducts/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-search-products] {
   // --------------------------------------------------------
   // Design Tokens for Search Products
@@ -111,7 +113,7 @@
     text-decoration: none;
     outline: none;
 
-    @include truncate-title;
+    @include utilities.truncate-title;
   }
 
   [data-fs-search-product-item-prices] {
@@ -153,7 +155,7 @@
   [data-fs-search-product-item-control-actions-desktop] {
     display: none;
 
-    @include media(">tablet") {
+    @include utilities.media(">tablet") {
       display: block;
     }
   }
@@ -161,7 +163,7 @@
   [data-fs-search-product-item-control-actions-mobile] {
     display: block;
 
-    @include media(">tablet") {
+    @include utilities.media(">tablet") {
       display: none;
     }
   }

package/src/components/molecules/SkuSelector/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 @mixin sku-selector-focus-ring {
   @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
     @supports (-webkit-appearance:none) {
@@ -6,7 +8,7 @@
         border-color: var(--fs-border-color-active);
         border-width: var(--fs-border-width-thick);
 
-        @include focus-ring;
+        @include utilities.focus-ring;
       }
     }
   }
@@ -15,7 +17,7 @@
     border-color: var(--fs-border-color-active);
     border-width: var(--fs-border-width-thick);
 
-    @include focus-ring;
+    @include utilities.focus-ring;
   }
 }
 
@@ -62,7 +64,6 @@
   --fs-sku-selector-color-height                 : var(--fs-sku-selector-color-width);
   --fs-sku-selector-color-border-radius          : var(--fs-sku-selector-image-border-radius);
 
-
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
@@ -80,8 +81,8 @@
   [data-fs-sku-selector-list] {
     display: flex;
     flex-wrap: wrap;
-    column-gap: var(--fs-spacing-1);
     row-gap: var(--fs-spacing-1);
+    column-gap: var(--fs-spacing-1);
   }
 
   [data-fs-sku-selector-option] {
@@ -91,9 +92,9 @@
 
     [data-fs-sku-selector-option-link] {
       position: absolute;
+      z-index: 1;
       width: 100%;
       height: 100%;
-      z-index: 1;
     }
 
     span {
@@ -101,14 +102,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      overflow: hidden;
       width: 100%;
       height: 100%;
+      overflow: hidden;
       border: var(--fs-border-width) solid var(--fs-sku-selector-option-border-color);
       border-radius: var(--fs-sku-selector-option-border-radius);
       box-shadow: 0;
       transition: box-shadow var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function), background-color var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
-
     }
 
     @include sku-selector-focus-ring;
@@ -135,8 +135,8 @@
       > span {
         overflow: hidden;
         color: var(--fs-sku-selector-option-disabled-color);
-        border-color: var(--fs-sku-selector-option-disabled-border-color);
         pointer-events: none;
+        border-color: var(--fs-sku-selector-option-disabled-border-color);
 
         [data-fs-sku-selector-option-image] { opacity: .7; }
 
@@ -161,10 +161,10 @@
     [data-fs-sku-selector-option-color] {
       width: var(--fs-sku-selector-color-width);
       height: var(--fs-sku-selector-color-height);
+      background-color: var(--data-fs-sku-selector-option-color-bkg-color);
       border-radius: var(--fs-sku-selector-color-border-radius);
       transition: transform var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
       transform-origin: center center;
-      background-color: var(--data-fs-sku-selector-option-color-bkg-color);
     }
 
     [data-fs-sku-selector-option] {

package/src/components/molecules/TextareaField/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-textarea-field] {
   // --------------------------------------------------------
   // Design Tokens for Input Field
@@ -100,14 +102,14 @@
     &:focus + label {
       top: var(--fs-border-width);
       left: var(--fs-textarea-field-label-left);
-      padding-top: rem(6px);
+      padding-top: utilities.rem(6px);
       font-size: var(--fs-textarea-field-label-size);
       white-space: nowrap;
     }
 
     &:focus + label {
       top: var(--fs-border-width-thick);
-      padding-top: calc(rem(6px) - var(--fs-border-width));
+      padding-top: calc(utilities.rem(6px) - var(--fs-border-width));
     }
 
     &:disabled + label {
@@ -124,7 +126,7 @@
     [data-fs-textarea] {
       border-color: var(--fs-textarea-field-error-border-color);
 
-      @include input-focus-ring(
+      @include utilities.input-focus-ring(
         $outline: #{var(--fs-textarea-field-error-focus-ring)},
         $border: #{var(--fs-textarea-field-error-border-color)}
       );

package/src/components/molecules/Toast/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-toast] {
   // --------------------------------------------------------
   // Design Tokens for Toast
@@ -63,17 +65,17 @@
   transition: var(--fs-toast-transition-property) var(--fs-toast-transition-timing) var(--fs-toast-transition-function);
   transform: translate3d(0, 0, 0);
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     top: var(--fs-toast-top-tablet);
     inset-inline-end: var(--fs-spacing-4);
-    max-width: rem(398px);
+    max-width: utilities.rem(398px);
   }
 
   &[data-fs-toast-visible="true"] {
     opacity: 1;
     transform: translate3d(0, 50%, 0);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       transform: translate3d(0, 10%, 0);
     }
   }

package/src/components/molecules/Toggle/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-toggle] {
   // --------------------------------------------------------
   // Design Tokens for Toggle
@@ -63,7 +65,7 @@
   overflow: visible;
 
   input {
-    @include focus-ring-visible;
+    @include utilities.focus-ring-visible;
 
     position: absolute;
     z-index: 1;

package/src/components/organisms/BannerNewsletter/styles.scss

@@ -1,8 +1,10 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-banner-text-newsletter] {
 
   > section > [data-fs-content] { width: 100%; }
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: var(--fs-grid-gap-3);

package/src/components/organisms/BannerText/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-banner-text] {
   // --------------------------------------------------------
   // Design Tokens for Banner Text
@@ -53,7 +55,8 @@
     justify-content: center;
     height: 100%;
     padding: var(--fs-banner-text-padding-mobile);
-    @include media(">=notebook") {
+
+    @include utilities.media(">=notebook") {
       padding: var(--fs-banner-text-padding-desktop);
     }
   }
@@ -73,7 +76,7 @@
       font-weight: var(--fs-banner-text-title-weight);
       line-height: var(--fs-banner-text-title-line-height);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         display: block;
         font-size: var(--fs-banner-text-primary-title-size);
       }
@@ -87,7 +90,7 @@
       font-weight: var(--fs-banner-text-title-weight);
       line-height: var(--fs-banner-text-title-line-height);
 
-      @include media(">=notebook") { display: block; }
+      @include utilities.media(">=notebook") { display: block; }
     }
 
     p {

package/src/components/organisms/EmptyState/styles.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-empty-state] {
   // --------------------------------------------------------
   // Design Tokens for EmptyState
@@ -23,14 +25,14 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--fs-spacing-3);
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: var(--fs-empty-state-height);
   min-height: var(--fs-empty-state-min-height);
   padding: var(--fs-empty-state-padding);
   background-color: var(--fs-empty-state-bkg-color);
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     align-items: center;
   }