@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

package/dist/embroider-template-1.scss

@@ -80,11 +80,17 @@ $previewMainOuput: ".output__ele__v1";
           display: var(--_d-flex);
           align-items: flex-start;
           justify-content: center;
-          --_perc-1: 20%;
+          // --_perc-1: 20%;
+          // background: color-mix(
+          //   in srgb,
+          //   #000 calc(100% - var(--_perc-1, 0%)),
+          //   transparent var(--_perc-1, 0%)
+          // );
+          --_alpha: 85%;
           background: color-mix(
             in srgb,
-            #000 calc(100% - var(--_perc-1, 0%)),
-            transparent var(--_perc-1, 0%)
+            #000 calc(100% - var(--_alpha)),
+            transparent var(--_alpha)
           );
           padding: 8px;
           border-radius: 6px;
@@ -93,8 +99,11 @@ $previewMainOuput: ".output__ele__v1";
           row-gap: 6px;
 
           & > .emb__preview__title {
-            color: color-mix(in srgb, #fff 70%, transparent 30%);
+            // color: color-mix(in srgb, #fff 70%, transparent 30%);
+            --_alpha: 15%;
+            color: color-mix(in srgb, #000 calc(100% - var(--_alpha)), transparent var(--_alpha));
             font-size: 14px;
+            font-weight: 600;
           }
 
           & > #{$previewMainWrapper} {
@@ -229,7 +238,7 @@ $previewMainOuput: ".output__ele__v1";
 
         // Data Settings Wrapper
 
-        & > #{$tmpDsWrapper} {
+        #{$tmpDsWrapper} {
           display: var(--_d-flex);
           flex-direction: column;
           row-gap: 16px;

package/dist/embroidery.scss

@@ -1,7 +1,8 @@
 @use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
-@use "./embroider-template-1.scss" as *;
+// @use "./embroider-template-1.scss" as *;
+@use "./embroider-template-1-v2.scss" as *;
 
 $mainWrapper: ".emb__main__wrapper";
 $libraryWrapper: ".emb__library__wrapper";
@@ -182,8 +183,30 @@ $apiLoader: '[data-spinner-state="loading"]';
 
       // Playground
       & > #{$mainWrapper} {
+        &.v2 {
+          position: var(--_p-fixed);
+          inset: 0 0 0 0;
+          z-index: calc(99999 + 25);
+          --_alpha: 40%;
+          background: color-mix(
+            in srgb,
+            var(--_base-black) calc(100% - var(--_alpha)),
+            transparent var(--_alpha)
+          );
+        }
         & > #{$libraryWrapper} {
-          @include EmbroideryTemplate1Styles();
+          &:is(.v2 *) {
+            position: var(--_p-absolute);
+            background: var(--_white-v2);
+            border-radius: 8px;
+            width: min(960px, 95%);
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            // min-height: 250px;
+            height: calc(100dvh - (2 * (24px)));
+          }
+          @include EmbroideryTemplate1StylesV2();
         }
       }
     }

package/dist/filters.scss

@@ -87,7 +87,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         --_ctm-mob-dn-fs-wt-br-rs,
         var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
       );
-      @mixin flex($justifyItems: flex-start, $alignItems: flex-start) {
+      @mixin flex($justifyItems: flex-start, $alignItems: center) {
         display: var(--_d-flex);
         justify-content: $justifyItems;
         align-items: $alignItems;
@@ -108,6 +108,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &.divider_filter {
             border-bottom: 1px solid var(--_gray-300);
           }
+          &:last-child {
+            border-bottom: none !important;
+          }
           .filter__Header {
             display: flex;
             justify-content: space-between;
@@ -314,7 +317,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               .selected_item {
                 display: flex;
                 gap: 8px;
-                border: 1px solid var(--_gray-200);
+                border: 1px solid var(--_thm-cs-be-se-3);
                 border-radius: 30px;
                 padding: 6px 12px;
                 align-items: center;
@@ -650,13 +653,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: 16px;
                 }
               }
+              .rotate_0 {
+                transform: rotate(0);
+              }
+              .rotate_180 {
+                transform: rotate(180deg);
+              }
             }
             .filter__search {
               display: flex;
               align-items: center;
-              padding: 6px 10px;
-              border: 1px solid var(--_gray-300);
-              border-radius: 6px;
+              // padding: 6px 10px;
+              padding: var(
+                --_sf-hr-sd-im-pg,
+                var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)))
+              );
+              // border: 1px solid var(--_gray-300);
+              border-color: var(
+                --_sf-hr-br-cr,
+                var(
+                  --_ctm-mob-dn-sh-br-br-cr,
+                  var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
+                )
+              );
+              border-style: var(
+                --_sf-hr-br-st,
+                var(
+                  --_ctm-mob-dn-sh-br-br-se,
+                  var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
+                )
+              );
+              border-width: var(
+                --_sf-hr-br-wh,
+                var(
+                  --_ctm-mob-dn-sh-br-br-wh,
+                  var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
+                )
+              );
+              // border-radius: 6px;
+              border-radius: prepareMediaVariable(--_ctm-dn-sh-br-br-rs);
               width: 100%;
 
               button {
@@ -667,13 +702,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
               input[type="text"] {
-                padding-inline: 10px;
+                padding-left: 6px;
               }
             }
           }
 
           ul {
-            margin-top: 15px;
+            margin-top: 10px;
             &:not(:last-child) {
               border-bottom: 1px solid var(--_gray-300);
             }
@@ -712,14 +747,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: 16px;
                 border-radius: 50%;
                 object-fit: cover;
-                border: 1px solid var(--_gray-300);
+                border: 1px solid var(--_thm-cs-be-se-3);
               }
 
               .color-circle {
                 width: 16px;
                 height: 16px;
                 border-radius: 50%;
-                border: 1px solid var(--_gray-300);
+                border: 1px solid var(--_thm-cs-be-se-3);
               }
 
               a {
@@ -1066,7 +1101,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             .selected_item {
               display: flex;
               gap: 8px;
-              border: 1px solid var(--_gray-200);
+              border: 1px solid var(--_thm-cs-be-se-3);
               border-radius: 30px;
               padding: 6px 12px;
               align-items: center;
@@ -1273,14 +1308,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           width: 15px;
           height: 15px;
           border-radius: 50%;
-          border: 1px solid var(--_gray-200);
+          border: 1px solid var(--_thm-cs-be-se-3);
           object-fit: "cover";
           display: "block";
         }
         .color {
           width: 15px;
           height: 15px;
-          border: 1px solid var(--_gray-200);
+          border: 1px solid var(--_thm-cs-be-se-3);
           border-radius: 50%;
         }
 
@@ -2162,7 +2197,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       input[type="number"] {
         width: 90px;
         padding: 10px;
-        border: 1px solid #ccc;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         text-align: center;
       }
@@ -2174,7 +2209,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 12px;
         color: #555;
         // background-color: #fff;
-        border: 1px solid #ddd;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         white-space: nowrap;
         padding-inline: 15px;
@@ -2252,7 +2287,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       .price-range-max-input {
         width: 100%;
         padding: 8px;
-        border: 1px solid #d1d5db;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 4px;
         text-align: center;
         font-size: 14px;