@faststore/ui 3.99.0 → 4.0.0-dev.2

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-navbar] {
   // --------------------------------------------------------
   // Design Tokens for Navbar
@@ -5,34 +7,34 @@
 
   // Default properties
 
-  --fs-navbar-height-mobile                              : 3.5rem;
+  --fs-navbar-height-mobile: 3.5rem;
 
-  --fs-navbar-bkg-color                                  : rgb(255 255 255 / 90%);
+  --fs-navbar-bkg-color: rgb(255 255 255 / 90%);
 
-  --fs-navbar-transition-timing                          : var(--fs-transition-timing);
-  --fs-navbar-transition-function                        : var(--fs-transition-function);
+  --fs-navbar-transition-timing: var(--fs-transition-timing);
+  --fs-navbar-transition-function: var(--fs-transition-function);
 
-  --fs-navbar-box-shadow                                 : 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);
+  --fs-navbar-box-shadow: 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);
 
   // Header
-  --fs-navbar-header-padding                             : 0 var(--fs-spacing-0);
+  --fs-navbar-header-padding: 0 var(--fs-spacing-0);
 
-  --fs-navbar-header-padding-top-notebook                : var(--fs-spacing-1);
-  --fs-navbar-header-padding-bottom-notebook             : var(--fs-navbar-header-padding-top-notebook);
+  --fs-navbar-header-padding-top-notebook: var(--fs-spacing-1);
+  --fs-navbar-header-padding-bottom-notebook: var(--fs-navbar-header-padding-top-notebook);
 
   // Search
-  --fs-navbar-search-button-icon-width-mobile            : var(--fs-spacing-5);
-  --fs-navbar-search-button-icon-height-mobile           : var(--fs-navbar-search-button-icon-width-mobile);
+  --fs-navbar-search-button-icon-width-mobile: var(--fs-spacing-5);
+  --fs-navbar-search-button-icon-height-mobile: var(--fs-navbar-search-button-icon-width-mobile);
 
   // Search Expanded
-  --fs-navbar-search-expanded-input-width                : calc(100% - var(--fs-spacing-7));
+  --fs-navbar-search-expanded-input-width: calc(100% - var(--fs-spacing-7));
 
-  --fs-navbar-search-expanded-button-icon-margin-right   : -4.063rem;
+  --fs-navbar-search-expanded-button-icon-margin-right: -4.063rem;
 
   // Logo
-  --fs-navbar-logo-width                                 : var(--fs-logo-width);
-  --fs-navbar-logo-border-left-width                     : var(--fs-border-width);
-  --fs-navbar-logo-border-left-color                     : var(--fs-border-color-light);
+  --fs-navbar-logo-width: var(--fs-logo-width);
+  --fs-navbar-logo-border-left-width: var(--fs-border-width);
+  --fs-navbar-logo-border-left-color: var(--fs-border-color-light);
 
   // --------------------------------------------------------
   // Structural Styles
@@ -45,12 +47,12 @@
   box-shadow: var(--fs-navbar-box-shadow);
   transition: top var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
 
-  @include media("<notebook") {
+  @include utilities.media("<notebook") {
     height: var(--fs-navbar-height-mobile);
   }
 
   &[data-fs-navbar-scroll="down"] {
-    > [data-fs-navbar-links] {
+    >[data-fs-navbar-links] {
       top: calc(-1 * var(--fs-spacing-3));
       height: 0;
       padding: 0;
@@ -59,7 +61,7 @@
   }
 
   &[data-fs-navbar-scroll="up"] {
-    > [data-fs-navbar-links] {
+    >[data-fs-navbar-links] {
       top: 0;
       opacity: 1;
     }
@@ -69,7 +71,7 @@
     flex: 1 0 100%;
     order: 2;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       display: none;
     }
   }
@@ -82,17 +84,17 @@
     width: 100%;
     height: 100%;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       padding: 0;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: grid;
-      grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr;
+      grid-template-columns: 1fr minmax(auto, 32.5rem) 1fr;
     }
 
     [data-fs-navbar-button-menu] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         display: none;
       }
 
@@ -106,7 +108,7 @@
     justify-content: flex-end;
 
     [data-fs-button-signin-link] + [data-fs-cart-toggle] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         margin-inline-start: var(--fs-spacing-3);
       }
     }
@@ -115,9 +117,23 @@
       display: none;
     }
 
-    @include media(">=notebook") {
+    [data-fs-localization-button] {
+      [data-fs-button-wrapper] [data-fs-button-icon] + span {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--fs-spacing-1);
+        align-items: center;
+      }
+    }
+
+    @include utilities.media(">=notebook") {
       order: 2;
 
+      [data-fs-button] {
+        // TODO: remove this after adding `regular` size to the button
+        --fs-button-height: 40px;
+      }
+
       [data-fs-button-signin-link] {
         display: inline-flex;
       }
@@ -127,7 +143,7 @@
       display: none;
       transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
 
-      @include media("<notebook") {
+      @include utilities.media("<notebook") {
         display: flex;
         flex: 0;
         flex-direction: column;
@@ -139,7 +155,9 @@
           padding: 0;
           border-width: 0;
 
-          &:hover, &:focus, &:focus-visible &:hover:focus-visible {
+          &:hover,
+          &:focus,
+          &:focus-visible &:hover:focus-visible {
             border-width: 0;
             box-shadow: 0 0;
           }
@@ -196,7 +214,7 @@
     align-self: stretch;
     height: 100%;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
       margin-inline: auto 0;
       border-inline-start: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
@@ -205,7 +223,7 @@
     [data-fs-logo] {
       width: var(--fs-navbar-logo-width);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         padding: var(--fs-spacing-2) 0;
       }
     }

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

@@ -13,7 +13,7 @@
 
   // Footer
   --fs-navbar-slider-footer-padding-top         : var(--fs-navbar-slider-header-padding-bottom);
-  --fs-navbar-slider-footer-margin-top          : var(--fs-navbar-slider-header-padding-bottom);
+  --fs-navbar-slider-footer-margin-top          : auto;
 
   // Logo
   --fs-navbar-slider-logo-padding               : 0;
@@ -23,11 +23,13 @@
   // Structural Styles
   // --------------------------------------------------------
 
+  display: flex;
+  flex-direction: column;
   padding: var(--fs-navbar-slider-padding);
 
   [data-fs-navbar-slider-header] {
-    padding: 0;
     height: var(--fs-navbar-slider-header-height);
+    padding: 0;
     padding-bottom: var(--fs-navbar-slider-header-padding-bottom);
   }
 
@@ -45,5 +47,11 @@
       width: fit-content;
       padding-left: 0;
     }
+
+    [data-fs-localization-button] {
+      [data-localization-button-arrow] {
+        display: none;
+      }
+    }
   }
 }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-newsletter] {
   // --------------------------------------------------------
   // Design Tokens for Newsletter
@@ -40,15 +42,14 @@
   border-radius: var(--fs-newsletter-border-radius);
 
   [data-fs-newsletter-form] {
-    padding: var(--fs-newsletter-padding-mobile);
     display: flex;
     flex-direction: column;
     row-gap: var(--fs-spacing-4);
+    padding: var(--fs-newsletter-padding-mobile);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding: var(--fs-newsletter-padding-desktop);
     }
-
   }
 
   [data-fs-newsletter-content] {
@@ -68,9 +69,9 @@
     line-height: 1.5;
     text-align: center;
 
-    @include media(">=notebook") {
-      text-align: left;
+    @include utilities.media(">=notebook") {
       align-content: flex-start;
+      text-align: left;
     }
   }
 
@@ -91,7 +92,7 @@
       height: var(--fs-newsletter-icon-size);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       justify-content: left;
     }
   }
@@ -99,7 +100,7 @@
   [data-fs-newsletter-addendum] {
     text-align: center;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       text-align: left;
     }
   }
@@ -109,7 +110,7 @@
   // --------------------------------------------------------
 
   &:not([data-fs-newsletter="card"]) {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       [data-fs-newsletter-form] {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
@@ -118,8 +119,8 @@
 
       [data-fs-button] {
         width: auto;
-        margin-left: auto;
         min-width: 40%;
+        margin-left: auto;
       }
     }
   }
@@ -139,19 +140,19 @@
   }
 
   &[data-fs-newsletter-color-variant="main"] {
-    background-color: var(--fs-newsletter-main-bkg-color);
     color: var(--fs-newsletter-main-text-color);
+    background-color: var(--fs-newsletter-main-bkg-color);
 
     [data-fs-link="true"] { color: var(--fs-color-link-inverse); }
   }
 
   &[data-fs-newsletter-color-variant="light"] {
-    background-color: var(--fs-newsletter-light-bkg-color);
     color: var(--fs-newsletter-light-text-color);
+    background-color: var(--fs-newsletter-light-bkg-color);
   }
 
   &[data-fs-newsletter-color-variant="accent"] {
-    background-color: var(--fs-newsletter-accent-bkg-color);
     color: var(--fs-newsletter-accent-text-color);
+    background-color: var(--fs-newsletter-accent-bkg-color);
   }
 }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-payment-methods] {
   // --------------------------------------------------------
   // Design Tokens for Payment Methods
@@ -27,13 +29,13 @@
   // --------------------------------------------------------
 
   [data-fs-payment-methods-title] {
-    & > *:first-child {
+    > *:first-child {
       font-size: var(--fs-payment-methods-title-size);
       font-weight: var(--fs-payment-methods-title-weight);
       line-height: var(--fs-payment-methods-title-line-height);
     }
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       text-align: center;
     }
   }
@@ -45,7 +47,7 @@
     justify-content: space-between;
     margin-top: var(--fs-payment-methods-flags-margin-top);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       column-gap: var(--fs-grid-gap-2);
     }
   }
@@ -57,8 +59,8 @@
     width: var(--fs-payment-methods-flag-width);
     height: var(--fs-payment-methods-flag-height);
     overflow: hidden;
+    background-color: var(--fs-payment-methods-flag-bkg-color);
     border: var(--fs-payment-methods-flag-border-width) solid var(--fs-payment-methods-flag-border-color);
     border-radius: var(--fs-payment-methods-flag-border-radius);
-    background-color: var(--fs-payment-methods-flag-bkg-color);
   }
 }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-product-comparison-toolbar] {
   // Design Tokens for Product Comparison Toolbar
   // --------------------------------------------------------
@@ -57,7 +59,7 @@
     color: var(--fs-color-disabled-text);
   }
 
-  @include media("<notebook") {
+  @include utilities.media("<notebook") {
     [data-fs-button] {
       &[data-fs-button-variant="primary"],
       &[data-fs-button-variant="tertiary"] {
@@ -72,7 +74,7 @@
     }
   }
 
-  @include media(">notebook") {
+  @include utilities.media(">notebook") {
     display: flex;
     gap: var(--fs-spacing-2);
     align-items: center;
@@ -176,7 +178,7 @@
         margin-top: var(--fs-spacing-3);
         border-top: var(--fs-border-width) solid var(--fs-border-color-light);
 
-        @include media(">tablet") {
+        @include utilities.media(">tablet") {
           width: 100%;
         }
 
@@ -251,7 +253,7 @@
     }
   }
 
-  @include media(">notebook") {
+  @include utilities.media(">notebook") {
     display: flex;
     flex-direction: column;
     padding: var(--fs-spacing-6) var(--fs-spacing-8);
@@ -341,7 +343,7 @@
 }
 
 [data-fs-product-comparison-dropdown-button] {
-  @include media(">notebook") {
+  @include utilities.media(">notebook") {
     display: none;
   }
 }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-product-details] {
   // --------------------------------------------------------
   // Design Tokens for Product Details
@@ -23,7 +25,7 @@
     flex-direction: column;
     row-gap: var(--fs-product-details-vertical-spacing);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       row-gap: 0;
@@ -40,15 +42,15 @@
     }
 
     [data-fs-product-price] {
-      [data-fs-price-variant="spot"]{
-          margin: 0;
-          font-size: var(--fs-text-size-4);
-          font-weight: var(--fs-text-weight-black);
-          line-height: 1.12;
+      [data-fs-price-variant="spot"] {
+        margin: 0;
+        font-size: var(--fs-text-size-4);
+        font-weight: var(--fs-text-weight-black);
+        line-height: 1.12;
       }
     }
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       padding: var(--fs-spacing-3);
       border: var(--fs-product-details-section-border-width) solid var(--fs-product-details-section-border-color);
 
@@ -57,7 +59,7 @@
       }
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding: var(--fs-product-details-vertical-spacing) var(--fs-spacing-5);
     }
   }
@@ -66,12 +68,12 @@
   [data-fs-product-details-info] {
     background-color: var(--fs-product-details-section-bkg-color);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       grid-column: 8 / span 5;
       height: 100%;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 9 / span 4;
     }
   }
@@ -81,7 +83,7 @@
   // -----------------------------
 
   [data-fs-product-details-title] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       border-bottom: 0;
       border-radius: var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius) 0 0;
     }
@@ -96,7 +98,7 @@
     flex-direction: column;
     row-gap: var(--fs-product-details-vertical-spacing);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       grid-row: span 5;
       row-gap: 0;
       border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
@@ -133,29 +135,29 @@
   // -----------------------------
 
   [data-fs-product-details-gallery] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       grid-row: 1 / span 3;
       grid-column: span 7;
       max-height: 23.75rem;
     }
 
-    @include media(">tablet", "<notebook") {
+    @include utilities.media(">tablet", "<notebook") {
       max-height: 35rem;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       max-height: 33.125rem;
     }
 
     &[data-fs-image-gallery="without-selector"] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         grid-row-end: span 4;
         grid-column: span 8;
       }
     }
 
     &[data-fs-image-gallery="with-selector"] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         grid-row: 1 / span 4;
         grid-column: span 8;
       }
@@ -167,31 +169,31 @@
   // -----------------------------
 
   [data-fs-product-description] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       grid-row: span 10;
       grid-column: span 7;
       margin-top: var(--fs-spacing-7);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: span 8;
     }
   }
 
   [data-fs-product-details-description-content] {
-    font-size: var(--fs-text-size-body);
-    line-height: 1.5;
-   /**
+    /**
     * display: contents allows you to remove an element from the box tree but still keep its contents
     * It doesn't have padding or margin, for example.
-    * 
+    *
     * https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/
-    */  
+    */
     display: contents;
+    font-size: var(--fs-text-size-body);
+    line-height: 1.5;
   }
 
   [data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 2 / 9;
     }
   }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-product-listing] {
   --product-listing-row-height: var(--fs-spacing-6);
 
@@ -9,14 +11,14 @@
   }
 
   [data-fs-product-listing-search-term] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding-bottom: var(--fs-spacing-6);
     }
 
     h1 {
       font-size: var(--fs-text-size-4);
 
-      @include media(">=tablet") { font-size: var(--fs-text-size-5); }
+      @include utilities.media(">=tablet") { font-size: var(--fs-text-size-5); }
 
       span {
         font-weight: var(--fs-text-weight-bold);
@@ -30,11 +32,11 @@
     width: 100%;
     height: 100%;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       padding-inline: 0;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: grid;
       grid-template-rows: var(--product-listing-row-height) auto;
       grid-template-columns: repeat(12, 1fr);
@@ -44,7 +46,7 @@
   }
 
   [data-fs-product-listing-filters] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       position: sticky;
       top: var(--fs-grid-gap-2);
       grid-row: span 2;
@@ -59,15 +61,15 @@
     justify-content: space-between;
     order: 1;
     width: 100%;
-    min-height: rem(68px);
+    min-height: utilities.rem(68px);
     padding: 0 var(--fs-grid-padding);
 
     [data-fs-product-listing-sort-skeleton] {
-      min-width: rem(225px);
+      min-width: utilities.rem(225px);
       min-height: var(--fs-spacing-5);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 6 / span 7;
       justify-content: flex-end;
       order: unset;
@@ -89,15 +91,15 @@
     align-items: center;
     justify-content: center;
     order: 2;
-    min-height: rem(45px);
+    min-height: utilities.rem(45px);
     padding: var(--fs-spacing-2) var(--fs-spacing-3);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       justify-content: space-between;
       background-color: var(--fs-color-neutral-bkg);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 4 /span 2;
       gap: var(--fs-spacing-3);
       justify-content: left;
@@ -109,7 +111,7 @@
     }
 
     [data-fs-product-listing-results-count-skeleton] {
-      min-width: rem(130px);
+      min-width: utilities.rem(130px);
     }
   }
 
@@ -120,18 +122,18 @@
     padding: 0 var(--padding);
     border-top: var(--fs-border-radius-small) solid var(--fs-color-neutral-bkg);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       background-color: var(--fs-color-neutral-bkg);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 4 / span 9;
       order: unset;
       padding: 0;
       background-color: unset;
     }
 
-    [data-fs-product-grid] { min-height: rem(290px); }
+    [data-fs-product-grid] { min-height: utilities.rem(290px); }
 
     [data-fs-product-card] { min-width: 100%; }
   }
@@ -141,7 +143,7 @@
     margin: var(--fs-spacing-1) calc(-1 * var(--padding));
     background-color: var(--fs-color-body-bkg);
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding: 0;
       margin: var(--fs-spacing-6) 0;
 
@@ -163,14 +165,14 @@
     margin-right: calc(-1 * var(--padding));
     margin-left: calc(-1 * var(--padding));
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding: var(--fs-spacing-1) var(--fs-spacing-2);
     }
 
     [data-fs-button] {
       width: 100%;
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         width: fit-content;
       }
     }