@faststore/ui 3.99.1 → 4.0.0-dev.2

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-filter] {
   // --------------------------------------------------------
   // Design Tokens for Filter
@@ -55,13 +57,13 @@
     font-size: var(--fs-filter-title-text-size);
     line-height: var(--fs-filter-accordion-button-line-height-notebook);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       display: none;
     }
   }
 
   [data-fs-filter-accordion] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       border: var(--fs-filter-accordion-border-width-notebook) solid var(--fs-filter-accordion-border-color-notebook);
       border-radius: var(--fs-filter-accordion-border-radius-notebook);
     }
@@ -74,7 +76,7 @@
         font-weight: var(--fs-filter-accordion-button-text-weight);
         line-height: var(--fs-filter-accordion-button-line-height);
 
-        @include media(">=notebook") {
+        @include utilities.media(">=notebook") {
           padding-right: var(--fs-filter-accordion-button-padding-right-notebook);
           padding-left: var(--fs-filter-accordion-button-padding-left-notebook);
           font-size: var(--fs-filter-accordion-button-text-size-notebook);
@@ -84,7 +86,7 @@
     }
 
     [data-fs-accordion-panel] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         padding-right: var(--fs-filter-accordion-item-panel-padding-right-notebook);
         padding-left: var(--fs-filter-accordion-item-panel-padding-left-notebook);
       }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-filter-skeleton] {
   // --------------------------------------------------------
   // Design Tokens for Filter Skeleton
@@ -24,7 +26,7 @@
 
   margin-top: var(--fs-filter-skeleton-margin-top);
 
-  @include media("<notebook") { display: none; }
+  @include utilities.media("<notebook") { display: none; }
 
   [data-fs-filter-skeleton-text] {
     max-width: var(--fs-filter-skeleton-title-max-width);

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-footer] {
   // --------------------------------------------------------
   // Design Tokens for Footer
@@ -31,7 +33,7 @@
     background-color: var(--fs-footer-bkg-color);
   }
 
-  @include media("<notebook") {
+  @include utilities.media("<notebook") {
     padding-top: 0;
   }
 
@@ -42,7 +44,7 @@
     font-weight: var(--fs-footer-title-weight);
     line-height: var(--fs-footer-title-line-height);
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       text-align: center;
     }
   }
@@ -52,11 +54,11 @@
     position: relative;
     display: flex;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       flex-direction: column;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       column-gap: var(--fs-footer-spacing-horizontal-notebook);
@@ -67,7 +69,7 @@
       content: "";
       border-top: var(--fs-footer-divisor-border-width) solid var(--fs-footer-divisor-border-color);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         grid-column: span 12;
       }
     }
@@ -82,7 +84,7 @@
   }
 
   [data-fs-footer-navigation] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       row-gap: var(--fs-footer-spacing-vertical-notebook);
       padding-bottom: var(--fs-footer-spacing-vertical-notebook);
     }
@@ -91,7 +93,7 @@
   [data-fs-footer-info] {
     position: relative;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -102,7 +104,7 @@
       }
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       row-gap: var(--fs-footer-spacing-vertical-notebook);
       padding-bottom: var(--fs-footer-spacing-vertical-notebook);
     }
@@ -110,7 +112,7 @@
 
   [data-fs-footer-social],
   [data-fs-payment-methods] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: 11 / span 2;
       margin-inline-start: calc(-1 * var(--fs-spacing-3));
     }
@@ -120,7 +122,7 @@
     display: flex;
     flex-direction: column;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       padding: var(--fs-footer-spacing-vertical-mobile) 0 var(--fs-spacing-3);
     }
 
@@ -128,7 +130,7 @@
       display: flex;
       justify-content: center;
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         justify-content: space-between;
       }
 
@@ -144,17 +146,17 @@
   }
 
   [data-fs-payment-methods] {
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       margin: var(--fs-footer-spacing-vertical-mobile) auto;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       order: 3;
     }
   }
 
   [data-fs-icon] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: span 2;
     }
   }
@@ -164,7 +166,7 @@
       white-space: break-spaces;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: span 6;
     }
   }
@@ -181,11 +183,11 @@
       padding-inline-start: 0;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: span 9;
     }
 
-    @include media(">=desktop") {
+    @include utilities.media(">=desktop") {
       grid-column: span 8;
     }
   }
@@ -195,27 +197,27 @@
   // --------------------------------------------------------
 
   &[data-fs-footer-incentives="true"] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       padding-top: 0;
     }
   }
 
   &:not([data-fs-footer-social="true"]) {
     [data-fs-footer-info]::before {
-      @include media("<notebook") {
+      @include utilities.media("<notebook") {
         border-color: transparent;
       }
     }
 
     [data-fs-footer-links] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         grid-column: span 12;
       }
     }
   }
 
   &:not([data-fs-footer-payment-methods="true"]) [data-fs-footer-copyright] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       grid-column: span 10;
     }
   }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-hero] {
   // --------------------------------------------------------
   // Design Tokens for Hero Section
@@ -51,7 +53,7 @@
   flex-direction: column;
   width: 100%;
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     position: relative;
     flex-direction: row-reverse;
     justify-content: flex-end;
@@ -60,7 +62,7 @@
   [data-fs-hero-image] {
     border-radius: var(--fs-hero-image-border-radius);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       position: absolute;
       right: 0;
       width: 50%;
@@ -85,7 +87,7 @@
     gap: var(--fs-spacing-3);
     justify-content: space-between;
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       gap: var(--fs-spacing-1);
       justify-content: flex-start;
     }
@@ -101,23 +103,24 @@
     font-size: var(--fs-hero-subtitle-size);
     line-height: var(--fs-hero-subtitle-line-height);
 
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       margin-top: var(--fs-hero-subtitle-margin-top-tablet);
     }
   }
 
   [data-fs-button] {
     margin-top: var(--fs-spacing-6);
+
     [data-fs-button-wrapper] {
-      min-width: 11.25rem;
       justify-content: space-between;
+      min-width: 11.25rem;
     }
   }
 
   [data-fs-hero-icon] {
-    color: var(--fs-hero-text-color);
-    height: var(--fs-spacing-4);
     width: var(--fs-spacing-4);
+    height: var(--fs-spacing-4);
+    color: var(--fs-hero-text-color);
   }
 
   // --------------------------------------------------------
@@ -125,7 +128,7 @@
   // --------------------------------------------------------
 
   &[data-fs-hero-variant="primary"] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       min-height: var(--fs-hero-primary-image-height-desktop);
     }
 
@@ -134,7 +137,7 @@
     }
 
     [data-fs-hero-heading] {
-      @include media(">=tablet") {
+      @include utilities.media(">=tablet") {
         display: flex;
         align-items: center;
         padding: var(--fs-spacing-9) 0;
@@ -142,19 +145,19 @@
     }
 
     [data-fs-button] {
-      @include media(">=tablet") {
+      @include utilities.media(">=tablet") {
         margin-top: var(--fs-spacing-8);
       }
     }
 
     [data-fs-hero-image] {
-      @include media("<tablet") {
+      @include utilities.media("<tablet") {
         height: var(--fs-hero-primary-image-height-mobile);
       }
     }
 
     [data-fs-hero-info] {
-      @include media(">=tablet") {
+      @include utilities.media(">=tablet") {
         width: 46%;
         padding-right: var(--fs-spacing-9);
       }
@@ -162,7 +165,7 @@
   }
 
   &[data-fs-hero-variant="secondary"] {
-    @include media(">=tablet") {
+    @include utilities.media(">=tablet") {
       min-height: var(--fs-hero-secondary-image-height-desktop);
     }
 
@@ -171,7 +174,7 @@
     }
 
     [data-fs-hero-info] {
-      @include media(">=tablet") {
+      @include utilities.media(">=tablet") {
         width: 42%;
       }
     }
@@ -179,13 +182,13 @@
     [data-fs-hero-heading] {
       padding: var(--fs-spacing-4) 0 var(--fs-spacing-5);
 
-      @include media(">=tablet") {
+      @include utilities.media(">=tablet") {
         padding: var(--fs-spacing-5) 0;
       }
     }
 
     [data-fs-hero-image] {
-      @include media("<tablet") {
+      @include utilities.media("<tablet") {
         height: var(--fs-hero-secondary-image-height-mobile);
       }
     }

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities.scss";
+
 [data-fs-image-gallery] {
   // --------------------------------------------------------
   // Design Tokens for Image Gallery
@@ -53,7 +55,7 @@
   row-gap: var(--fs-image-gallery-gap-mobile);
   width: var(--fs-image-gallery-width);
 
-  @include media(">=tablet") {
+  @include utilities.media(">=tablet") {
     left: 0;
     width: 100%;
 
@@ -63,7 +65,7 @@
     }
   }
 
-  @include media(">=notebook") {
+  @include utilities.media(">=notebook") {
     >[data-fs-image] {
       height: var(--fs-image-gallery-current-height);
     }
@@ -78,9 +80,9 @@
     justify-content: center;
     max-height: var(--fs-image-gallery-selector-max-height);
 
-    @include media("<notebook") { overflow: hidden; }
+    @include utilities.media("<notebook") { overflow: hidden; }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex-direction: column;
       grid-row: 1;
       justify-content: space-between;
@@ -96,13 +98,13 @@
 
     &::-webkit-scrollbar { display: none; }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex-direction: column;
       row-gap: var(--fs-image-gallery-selector-elements-gap-notebook);
-      overflow-y: hidden;
       align-items: center;
       width: 100%;
       padding: var(--fs-image-gallery-selector-elements-padding-notebook);
+      overflow-y: hidden;
     }
   }
 
@@ -114,22 +116,23 @@
       padding: 0;
       overflow: hidden;
       background-color: transparent;
-      border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
       border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
+      border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
       transition: all var(--fs-image-gallery-transition-timing) var(--fs-image-gallery-transition-function);
+
       img {
+        max-width: inherit;
+        height: inherit;
         border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
         object-fit: cover;
-        height: inherit;
-        max-width: inherit;
       }
+
       > span {
         width: 100%;
         height: 100%;
       }
     }
 
-
     &:hover:not([data-fs-image-gallery-selector-thumbnail="selected"]) [data-fs-button-wrapper] {
       border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
     }
@@ -145,10 +148,10 @@
     }
 
     &:focus-visible [data-fs-button-wrapper] {
-      @include focus-ring;
+      @include utilities.focus-ring;
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       width: var(--fs-image-gallery-selector-thumbnail-width-notebook);
       height: var(--fs-image-gallery-selector-thumbnail-height-notebook);
     }
@@ -156,22 +159,23 @@
 
   [data-fs-image-gallery-selector-control] {
     position: absolute;
+    z-index: 1;
     display: flex;
     align-items: center;
-    z-index: 1;
 
     &::after {
-      background: linear-gradient(90deg, var(--fs-image-gallery-selector-control-gradient-bkg-color) 55%, transparent);
-      content: '';
-      width: 100%;
-      height: 100%;
       position: absolute;
       left: 0;
       z-index: -1;
-      @include media(">=notebook") { background: linear-gradient(180deg, var(--fs-image-gallery-selector-control-gradient-bkg-color) 55%, transparent); }
+      width: 100%;
+      height: 100%;
+      content: "";
+      background: linear-gradient(90deg, var(--fs-image-gallery-selector-control-gradient-bkg-color) 55%, transparent);
+
+      @include utilities.media(">=notebook") { background: linear-gradient(180deg, var(--fs-image-gallery-selector-control-gradient-bkg-color) 55%, transparent); }
     }
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       height: 100%;
       padding-left: var(--fs-grid-padding);
 
@@ -185,7 +189,7 @@
       }
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       justify-content: center;
       width: 100%;
 
@@ -196,11 +200,9 @@
         transform: scaleY(-1);
       }
     }
-
   }
 
   [data-fs-image-gallery-selector-control-button] {
-
     [data-fs-button-wrapper] {
       background-color: var(--fs-image-gallery-selector-control-bkg-color);
       border-radius: var(--fs-image-gallery-selector-control-border-radius);
@@ -209,7 +211,7 @@
 
     &:hover [data-fs-button-wrapper] { box-shadow: var(--fs-image-gallery-selector-control-shadow); }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       transform: rotate(90deg);
     }
   }
@@ -219,7 +221,7 @@
   // --------------------------------------------------------
 
   &[data-fs-image-gallery="with-selector"] {
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       display: grid;
       grid-template-columns: repeat(8, 1fr);
       column-gap: var(--fs-image-gallery-gap-notebook);

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

@@ -1,3 +1,5 @@
+@use "../../../styles/base/utilities";
+
 [data-fs-incentives] {
   // --------------------------------------------------------
   // Design Tokens for Incentives
@@ -42,7 +44,7 @@
     overflow-x: auto;
     overflow-y: hidden;
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       justify-content: center;
     }
   }
@@ -53,11 +55,11 @@
     align-items: center;
     justify-content: center;
 
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       row-gap: var(--fs-spacing-0);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       flex-direction: row;
 
       [data-fs-incentive-content] {

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

@@ -0,0 +1,90 @@
+@use "../../../styles/base/utilities";
+
+[data-fs-localization-selector] {
+  // Design Tokens for Localization Selector
+  --fs-localization-selector-max-width                          : 288px;
+
+  // Override Popover design tokens
+  --fs-popover-padding                                          : var(--fs-spacing-3) var(--fs-spacing-4);
+  --fs-popover-margin                                           : 0;
+  --fs-popover-border-radius                                    : var(--fs-border-radius);
+  --fs-popover-bkg-color                                        : var(--fs-color-neutral-0);
+  --fs-popover-indicator-translate                              : 0;
+  --fs-popover-z-index                                          : var(--fs-z-index-high);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--fs-spacing-2);
+  align-items: flex-end;
+  border: var(--fs-border-width) solid var(--fs-border-color);
+
+  @include utilities.media(">=tablet") {
+    max-width: var(--fs-localization-selector-max-width);
+  }
+
+  [data-fs-localization-selector-description] {
+    margin-bottom: var(--fs-spacing-3);
+    font-size: var(--fs-text-size-1);
+    font-weight: var(--fs-text-weight-medium);
+    color: var(--fs-color-neutral-4);
+  }
+
+  [data-fs-select-field] {
+    margin-bottom: var(--fs-spacing-2);
+  }
+
+  [data-fs-popover-indicator],
+  [data-fs-modal-header],
+  [data-fs-popover-header] {
+    display: none;
+  }
+
+  [data-fs-localization-selector-actions] {
+    display: flex;
+    justify-content: end;
+  }
+
+  [data-fs-localization-selector-error] {
+    display: flex;
+    gap: var(--fs-spacing-1);
+    align-items: flex-start;
+    width: 100%;
+    font-size: var(--fs-text-size-1);
+    color: var(--fs-color-danger-text);
+
+    [data-fs-icon] {
+      flex-shrink: 0;
+      color: var(--fs-color-danger-text);
+    }
+  }
+}
+
+[data-fs-localization-selector-mobile] {
+  align-items: flex-start;
+
+  [data-fs-localization-selector-description] {
+    width: 100%;
+  }
+
+  [data-fs-slide-over-header] {
+    width: 100%;
+  }
+
+  [data-fs-localization-selector-body] {
+    padding: 0 var(--fs-spacing-3);
+  }
+
+  [data-fs-localization-selector-title] {
+    font-size: var(--fs-text-size-3);
+    font-weight: var(--fs-text-weight-semibold);
+  }
+
+  [data-fs-localization-selector-footer] {
+    width: 100%;
+    padding: var(--fs-spacing-3);
+
+    [data-fs-button] {
+      width: 100%;
+    }
+  }
+}