npm - @sc-360-v2/storefront-cms-library - Versions diffs - 0.5.25 → 0.5.26 - Mend

@sc-360-v2/storefront-cms-library 0.5.25 → 0.5.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/brand.scss +136 -93
package/dist/breadcrumbs.scss +827 -827
package/dist/buy-for-tab-container.scss +141 -90
package/dist/category.scss +67 -24
package/dist/container.scss +74 -24
package/dist/grid.scss +169 -119
package/dist/layouter-item.scss +74 -25
package/dist/layouter-pro-item.scss +55 -6
package/dist/layouter-pro.scss +134 -88
package/dist/layouter.scss +67 -24
package/dist/light-box-v2.scss +154 -105
package/dist/line.scss +261 -166
package/dist/marchandiserSets.scss +107 -60
package/dist/mega-menu-container.scss +73 -24
package/dist/mega-menu.scss +25 -3
package/dist/product-image.scss +1 -1
package/dist/product.scss +140 -97
package/dist/productDetails.scss +113 -70
package/dist/repeater-item.scss +69 -24
package/dist/repeater.scss +73 -24
package/dist/section.scss +53 -7
package/dist/stack.scss +171 -129
package/dist/tab-container.scss +139 -89
package/package.json +1 -1

package/dist/grid.scss CHANGED Viewed

@@ -1,119 +1,169 @@
-$activeElementSelector: "[data-has-clicked='true']";
-$elementSelector: "[data-div-type='element']";
-@use "./functions.scss" as *;
-$flex: "flx";
-$grid: "grd";
-$flexRow: "rw";
-$flexRowReverse: "rw-rv";
-$flexColumn: "cln";
-$flexColumnReverse: "cln-rv";
-[data-div-type="grid"] {
-  position: var(--_p-relative);
-  display: var(--_d-grid);
-  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-  // height: 100% !important;
-  box-shadow: var(
-    --_hide-grid-shadow,
-    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
-      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
-  );
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
-  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-  &[data-show-shadow="false"] {
-    --_hide-grid-shadow: none;
-  }
-  &[data-show-border="false"] {
-    --_hide-grid-border: none;
-  }
-  &:is(#{$activeElementSelector}) {
-    &:has(#{$activeElementSelector}#{$elementSelector}) {
-      & > div {
-        &[data-type="wrapper-layer"] {
-          --_sf-gri-wl-vt: visible;
-          --_sf-gri-wl-op: 1;
-          --_sf-gri-wl-dp: block;
-          --_sf-gri-wl-bw: 1px;
-          z-index: 2;
-        }
-      }
-    }
-  }
-  & > div {
-    &[data-type="wrapper-layer"] {
-      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
-      pointer-events: none;
-      visibility: var(--_sf-gri-wl-vt, hidden) !important;
-      opacity: var(--_sf-gri-wl-op, 0) !important;
-      position: var(--_p-absolute) !important;
-      inset: 0 0 0 0;
-      --_sf-pr-wr-ly-br-cl: 25%;
-      border: var(--_sf-gri-wl-bw) solid
-        color-mix(
-          in srgb,
-          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
-          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
-        );
-    }
-    &[data-div-type="cms-grid-wrapper"] {
-      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
-      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
-      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
-      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
-      width: 100%;
-      grid-area: 1/1/2/2 !important;
-      height: 100%;
-      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
-      display: var(--_d-grid);
-      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
-      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
-      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
-      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
-      &:is(.#{$flex} > *) {
-        display: var(--_d-flex) !important;
-        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
-        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
-        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
-        &.#{$flexRow} {
-          flex-direction: row;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexRowReverse} {
-          flex-direction: row-reverse;
-          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumn} {
-          flex-direction: column;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-        &.#{$flexColumnReverse} {
-          flex-direction: column-reverse;
-          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
-          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
-        }
-      }
-    }
-  }
-}
+$activeElementSelector: "[data-has-clicked='true']";
+$elementSelector: "[data-div-type='element']";
+@use "./functions.scss" as *;
+$flex: "flx";
+$grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
+[data-div-type="grid"] {
+  position: var(--_p-relative);
+  display: var(--_d-grid);
+  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+  // height: 100% !important;
+  box-shadow: var(
+    --_hide-grid-shadow,
+    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
+      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
+  );
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
+  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+  &[data-background-type="color"] {
+    & > .wrapper {
+      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+    }
+  }
+  &[data-background-type="gradient"] {
+    --_sf-gri-gradient-angle: calc(#{prepareMediaVariable(--_ctm-gri-dn-gt-ae, 90)} * 1deg);
+    --_sf-gri-gradient-start-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-st-cr, transparent)};
+    --_sf-gri-gradient-start-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-st-pn, 0)} * 1%
+    );
+    --_sf-gri-gradient-end-color: #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-cr, transparent)};
+    --_sf-gri-gradient-end-position: calc(
+      #{prepareMediaVariable(--_ctm-gri-dn-gt-ed-pn, 100)} * 1%
+    );
+    --_sf-gri-gradient-position: #{prepareMediaVariable(--_ctm-gri-dn-gt-pn, center)};
+    &[data-gradient-type="Linear Gradient"] {
+      & > .wrapper {
+        background-image: linear-gradient(
+          var(--_sf-gri-gradient-angle),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
+      }
+    }
+    &[data-gradient-type="Radial Gradient"] {
+      & > .wrapper {
+        background-image: radial-gradient(
+          circle at var(--_sf-gri-gradient-position),
+          var(--_sf-gri-gradient-start-color) var(--_sf-gri-gradient-start-position),
+          var(--_sf-gri-gradient-end-color) var(--_sf-gri-gradient-end-position)
+        );
+      }
+    }
+  }
+  &[data-background-type="image"] {
+    & > .wrapper {
+      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-gri-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+    }
+  }
+  &[data-show-shadow="false"] {
+    --_hide-grid-shadow: none;
+  }
+  &[data-show-border="false"] {
+    --_hide-grid-border: none;
+  }
+  &:is(#{$activeElementSelector}) {
+    &:has(#{$activeElementSelector}#{$elementSelector}) {
+      & > div {
+        &[data-type="wrapper-layer"] {
+          --_sf-gri-wl-vt: visible;
+          --_sf-gri-wl-op: 1;
+          --_sf-gri-wl-dp: block;
+          --_sf-gri-wl-bw: 1px;
+          z-index: 2;
+        }
+      }
+    }
+  }
+  & > div {
+    &[data-type="wrapper-layer"] {
+      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
+      pointer-events: none;
+      visibility: var(--_sf-gri-wl-vt, hidden) !important;
+      opacity: var(--_sf-gri-wl-op, 0) !important;
+      position: var(--_p-absolute) !important;
+      inset: 0 0 0 0;
+      --_sf-pr-wr-ly-br-cl: 25%;
+      border: var(--_sf-gri-wl-bw) solid
+        color-mix(
+          in srgb,
+          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
+          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
+        );
+    }
+    &[data-div-type="cms-grid-wrapper"] {
+      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
+      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
+      // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+      // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
+      width: 100%;
+      grid-area: 1/1/2/2 !important;
+      height: 100%;
+      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
+      display: var(--_d-grid);
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
+      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
+      &:is(.#{$flex} > *) {
+        display: var(--_d-flex) !important;
+        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
+        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
+        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);
+        &.#{$flexRow} {
+          flex-direction: row;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexRowReverse} {
+          flex-direction: row-reverse;
+          align-items: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumn} {
+          flex-direction: column;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+        &.#{$flexColumnReverse} {
+          flex-direction: column-reverse;
+          justify-content: prepareMediaVariable(--_ctm-gri-lt-an-is);
+          align-items: prepareMediaVariable(--_ctm-gri-lt-jy-ct);
+        }
+      }
+    }
+  }
+}

package/dist/layouter-item.scss CHANGED Viewed

@@ -1,5 +1,7 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 [data-div-type="element"] {
   &[data-element-type="layouter-item"] {
     // width: var(--_sf-con-nw-wh);
@@ -10,7 +12,7 @@
     // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
     // width: 100%;
-    // background: var(--_ctm-repe-dn-bd-cr);
+    // background: var(--_ctm-layo-dn-bd-cr);
     & > div {
       &.wrapper {
@@ -18,30 +20,77 @@
         height: 100%;
         padding: var(--_ctm-mob-layo-lt-pg, var(--_ctm-tab-layo-lt-pg, var(--_ctm-layo-lt-pg)));
-        background-color: var(
-          --_ctm-mob-layo-dn-bd-cr,
-          var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
-        );
-        background-image: var(
-          --_ctm-mob-layo-dn-bd-ie,
-          var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
-        );
-        background-attachment: var(
-          --_ctm-mob-layo-dn-bd-at,
-          var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
-        );
-        background-position: var(
-          --_ctm-mob-layo-dn-bd-pn,
-          var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
-        );
-        background-repeat: var(
-          --_ctm-mob-layo-dn-bd-rt,
-          var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
-        );
-        background-size: var(
-          --_ctm-mob-layo-dn-bd-se,
-          var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
-        );
+        &:is([data-background-type="color"] > *).wrapper {
+          background-color: #{prepareMediaVariable(--_ctm-layo-dn-bd-cr)};
+        }
+        &:is([data-background-type="gradient"] > *).wrapper {
+          --_sf-layo-gradient-angle: calc(#{prepareMediaVariable(--_ctm-layo-dn-gt-ae, 90)} * 1deg);
+          --_sf-layo-gradient-start-color: #{prepareMediaVariable(
+              --_ctm-layo-dn-gt-st-cr,
+              transparent
+            )};
+          --_sf-layo-gradient-start-position: calc(
+            #{prepareMediaVariable(--_ctm-layo-dn-gt-st-pn, 0)} * 1%
+          );
+          --_sf-layo-gradient-end-color: #{prepareMediaVariable(
+              --_ctm-layo-dn-gt-ed-cr,
+              transparent
+            )};
+          --_sf-layo-gradient-end-position: calc(
+            #{prepareMediaVariable(--_ctm-layo-dn-gt-ed-pn, 100)} * 1%
+          );
+          --_sf-layo-gradient-position: #{prepareMediaVariable(--_ctm-layo-dn-gt-pn, center)};
+        }
+        &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+          background-image: linear-gradient(
+            var(--_sf-layo-gradient-angle),
+            var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
+            var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
+          );
+        }
+        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+          background-image: radial-gradient(
+            circle at var(--_sf-layo-gradient-position),
+            var(--_sf-layo-gradient-start-color) var(--_sf-layo-gradient-start-position),
+            var(--_sf-layo-gradient-end-color) var(--_sf-layo-gradient-end-position)
+          );
+        }
+        &:is([data-background-type="image"] > *).wrapper {
+          background-image: prepareMediaVariable(--_ctm-layo-dn-bd-ie);
+          background-attachment: prepareMediaVariable(--_ctm-layo-dn-bd-at);
+          background-position: prepareMediaVariable(--_ctm-layo-dn-bd-pn);
+          background-position-y: prepareMediaVariable(--_ctm-layo-dn-bd-pn-y);
+          background-repeat: prepareMediaVariable(--_ctm-layo-dn-bd-rt);
+          background-size: prepareMediaVariable(--_ctm-layo-dn-bd-se);
+        }
+        // background-color: var(
+        //   --_ctm-mob-layo-dn-bd-cr,
+        //   var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
+        // );
+        // background-image: var(
+        //   --_ctm-mob-layo-dn-bd-ie,
+        //   var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
+        // );
+        // background-attachment: var(
+        //   --_ctm-mob-layo-dn-bd-at,
+        //   var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
+        // );
+        // background-position: var(
+        //   --_ctm-mob-layo-dn-bd-pn,
+        //   var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
+        // );
+        // background-repeat: var(
+        //   --_ctm-mob-layo-dn-bd-rt,
+        //   var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
+        // );
+        // background-size: var(
+        //   --_ctm-mob-layo-dn-bd-se,
+        //   var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
+        // );
         border-radius: var(
           --_ctm-mob-layo-dn-br-rs,
           var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs))

package/dist/layouter-pro-item.scss CHANGED Viewed

@@ -27,12 +27,61 @@ $flexColumnReverse: "cln-rv";
         min-height: prepareMediaVariable(--_ctm-layout-lt-mn-ht);
         padding: prepareMediaVariable(--_ctm-layout-lt-pg);
-        background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
-        background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
-        background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
-        background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
-        background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
-        background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
+        &:is([data-background-type="color"] > *).wrapper {
+          background-color: #{prepareMediaVariable(--_ctm-layout-dn-bd-cr)};
+        }
+        &:is([data-background-type="gradient"] > *).wrapper {
+          --_sf-layout-gradient-angle: calc(
+            #{prepareMediaVariable(--_ctm-layout-dn-gt-ae, 90)} * 1deg
+          );
+          --_sf-layout-gradient-start-color: #{prepareMediaVariable(
+              --_ctm-layout-dn-gt-st-cr,
+              transparent
+            )};
+          --_sf-layout-gradient-start-position: calc(
+            #{prepareMediaVariable(--_ctm-layout-dn-gt-st-pn, 0)} * 1%
+          );
+          --_sf-layout-gradient-end-color: #{prepareMediaVariable(
+              --_ctm-layout-dn-gt-ed-cr,
+              transparent
+            )};
+          --_sf-layout-gradient-end-position: calc(
+            #{prepareMediaVariable(--_ctm-layout-dn-gt-ed-pn, 100)} * 1%
+          );
+          --_sf-layout-gradient-position: #{prepareMediaVariable(--_ctm-layout-dn-gt-pn, center)};
+        }
+        &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+          background-image: linear-gradient(
+            var(--_sf-layout-gradient-angle),
+            var(--_sf-layout-gradient-start-color) var(--_sf-layout-gradient-start-position),
+            var(--_sf-layout-gradient-end-color) var(--_sf-layout-gradient-end-position)
+          );
+        }
+        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+          background-image: radial-gradient(
+            circle at var(--_sf-layout-gradient-position),
+            var(--_sf-layout-gradient-start-color) var(--_sf-layout-gradient-start-position),
+            var(--_sf-layout-gradient-end-color) var(--_sf-layout-gradient-end-position)
+          );
+        }
+        &:is([data-background-type="image"] > *).wrapper {
+          background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
+          background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
+          background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
+          background-position-y: prepareMediaVariable(--_ctm-layout-dn-bd-pn-y);
+          background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
+          background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
+        }
+        // background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
+        // background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
+        // background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
+        // background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
+        // background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
+        // background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
         border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
         // flex-direction: column;