@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/cjs/graphql-app-api/queries/ThemePage.generated.js

@@ -1,4 +1,6 @@
-"use strict";const ThemePageDocument=`
+'use strict';
+
+/* eslint-disable */ const ThemePageDocument = `
     query ThemePage($themePageId: ID!, $first: Int, $where: ThemeStyleWhereInput) {
   themePage(id: $themePageId) {
     id
@@ -26,4 +28,6 @@
     }
   }
 }
-    `;exports.ThemePageDocument=ThemePageDocument;
+    `;
+
+exports.ThemePageDocument = ThemePageDocument;

package/dist/cjs/helpers/GlobalEvent.js

@@ -1 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const globalEvent={subscribe(e,t){document.addEventListener(e,e=>t(e.detail))},dispatch(e,t){document.dispatchEvent(new CustomEvent(e,{detail:t}))},remove(e,t){document.removeEventListener(e,t)}};exports.default=globalEvent;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const globalEvent = {
+    subscribe (eventName, callback) {
+        document.addEventListener(eventName, (e)=>callback(e.detail));
+    },
+    dispatch (eventName, detail) {
+        document.dispatchEvent(new CustomEvent(eventName, {
+            detail
+        }));
+    },
+    remove (eventName, callback) {
+        document.removeEventListener(eventName, callback);
+    }
+};
+
+exports.default = globalEvent;

package/dist/cjs/helpers/align.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const convertTextAlignToJustify = (align)=>{
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const result = {};
+    devices.forEach((device)=>{
+        const deviceType = device === 'desktop' ? '' : `${device}:`;
+        result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
+        result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
+        result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
+    });
+    return result;
+};
+
+exports.convertTextAlignToJustify = convertTextAlignToJustify;

package/dist/cjs/helpers/animations.js

@@ -1 +1,222 @@
-"use strict";const EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let r=JSON.parse(JSON.stringify(t)),e=["delay","speed","scale","intensity"];return e.forEach(t=>{if(!r?.[t])return;if("scale"===t){if(!r?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[e,a]=r?.scale?.in??[1,1],[n,i]=r?.scale?.out??[1,1];r[t]={in:[Number(e)/100,Number(a)/100],out:[Number(n)/100,Number(i)/100]};return}let e=Number(r?.[t]);if("delay"===t?r[t]=1e3*e:r[t]=e,!isFinite(e))throw TypeError(`${t} must be a number`)}),r},r=(r,e)=>{let n=t(e),{direction:i,distance:o}=n,l=["left","right"].includes(i??"")?"X":"Y",m=["left","down"].includes(i??"")?"-":"",f=[{opacity:0,transform:`translate${l}(${m}${o??50}%)`},{opacity:1,transform:`translate${l}(0)`}];return s(r,f,{...a(n,500)})},e=(r,e)=>{let n=t(e),i=[{opacity:0},{opacity:1}];return s(r,i,{...a(n,500)})},a=(t,r)=>{let e=t=>t?1.5/t*1e3:r,{loop:a,delay:n,speed:i,easing:o}=t??{},s=e(i),l=n??0,m=a?s+l:s;return{iterations:a?1/0:1,duration:m,delay:l,easing:EASING[o??"linear"]}},n=(r,e)=>{let n=t(e),{scale:i,zoomDirection:o,isFade:l}=n,[m,f]=i.in,[u,c]=i.out,p=[{transform:`scale(${m}, ${m})`,opacity:l?0:1},{transform:`scale(${f??1.2}, ${f??1.2})`,opacity:1}],d=[{transform:`scale(${u}, ${u})`,opacity:l?0:1},{transform:`scale(${c??.8}, ${c??.8})`,opacity:1}],y="in"===o?p:d;return s(r,y,{...a(n,700)})},i=(t,r,e)=>{if(!r)return t;let a=r/e,n=[...t].pop();return[...t,{...n,offset:1-a}]},o=(r,e)=>{let n=t(e),{intensity:i}=n??{},o=[{transform:"translate3d(0, 0, 0)"}],l=[{transform:"translate3d(4px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(4px, 0, 0)"}],m=[];Array.from(Array(i??1).keys()).forEach(()=>{m=[...m,...l]});let f=[{transform:"translate3d(-1px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},...m,{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-1px, 0, 0)"}];return s(r,i?f:o,{...a(n??{},820)})},s=(t,r,e)=>{let a=new KeyframeEffect(t,e.iterations&&1===e.iterations?r:i(r,e?.delay??0,e?.duration??0),{...e});return new Animation(a,document.timeline)};return{zoom:n,shake:o,fade:e,slide:r}};exports.animations=animations;
+'use strict';
+
+const EASING = {
+    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
+    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    linear: 'linear'
+};
+const animations = ()=>{
+    const normalizeOptions = (options)=>{
+        const cloneOptions = JSON.parse(JSON.stringify(options));
+        const numberMember = [
+            'delay',
+            'speed',
+            'scale',
+            'intensity'
+        ];
+        numberMember.forEach((keyName)=>{
+            if (!cloneOptions?.[keyName]) return;
+            if (keyName === 'scale') {
+                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
+                const [i1, i2] = cloneOptions?.scale?.in ?? [
+                    1,
+                    1
+                ];
+                const [o1, o2] = cloneOptions?.scale?.out ?? [
+                    1,
+                    1
+                ];
+                cloneOptions[keyName] = {
+                    in: [
+                        Number(i1) / 100,
+                        Number(i2) / 100
+                    ],
+                    out: [
+                        Number(o1) / 100,
+                        Number(o2) / 100
+                    ]
+                };
+                return;
+            }
+            const num = Number(cloneOptions?.[keyName]);
+            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
+            else cloneOptions[keyName] = num;
+            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
+        });
+        return cloneOptions;
+    };
+    const slide = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { direction, distance } = normalizedOptions;
+        const coordinate = [
+            'left',
+            'right'
+        ].includes(direction ?? '') ? 'X' : 'Y';
+        let isNeg = [
+            'left',
+            'down'
+        ].includes(direction ?? '') ? '-' : '';
+        if (reverse) {
+            isNeg = [
+                'left',
+                'down'
+            ].includes(direction ?? '') ? '' : '-';
+        }
+        const preset = [
+            {
+                opacity: 0,
+                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
+            },
+            {
+                opacity: 1,
+                transform: `translate${coordinate}(0)`
+            }
+        ];
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const fade = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const preset = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const generateOptions = (options, defaultDuration)=>{
+        const convertSpeedToDuration = (speed)=>{
+            if (!speed) return defaultDuration;
+            return 1.5 / speed * 1000;
+        };
+        const { loop, delay, speed, easing } = options ?? {};
+        const duration = convertSpeedToDuration(speed);
+        const actualDelay = delay ?? 0;
+        const actualDuration = loop ? duration + actualDelay : duration;
+        return {
+            iterations: loop ? Infinity : 1,
+            duration: actualDuration,
+            delay: actualDelay,
+            easing: EASING[easing ?? 'linear']
+        };
+    };
+    const zoom = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { scale, zoomDirection, isFade } = normalizedOptions;
+        const [i1, i2] = scale.in;
+        const [o1, o2] = scale.out;
+        const zoomInPreset = [
+            {
+                transform: `scale(${i1}, ${i1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
+                opacity: 1
+            }
+        ];
+        const zoomOutPreset = [
+            {
+                transform: `scale(${o1}, ${o1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
+                opacity: 1
+            }
+        ];
+        let zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        if (reverse) {
+            zoomPreset = zoomDirection === 'in' ? zoomOutPreset : zoomInPreset;
+        }
+        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
+            ...generateOptions(normalizedOptions, 700)
+        });
+    };
+    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
+        if (!delay) return keyframes;
+        const offset = delay / duration;
+        const keyframe = [
+            ...keyframes
+        ].pop();
+        return [
+            ...keyframes,
+            {
+                ...keyframe,
+                offset: 1 - offset
+            }
+        ];
+    };
+    const shake = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { intensity } = normalizedOptions ?? {};
+        const zeroIntensity = [
+            {
+                transform: 'translate3d(0, 0, 0)'
+            }
+        ];
+        const unitIntensity = [
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            }
+        ];
+        let keyframes = [];
+        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
+            keyframes = [
+                ...keyframes,
+                ...unitIntensity
+            ];
+        });
+        const shakePreset = [
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            ...keyframes,
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            }
+        ];
+        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
+            ...generateOptions(normalizedOptions ?? {}, 820)
+        });
+    };
+    const generateAnimationInstance = (target, effectPreset, options)=>{
+        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
+            ...options
+        });
+        return new Animation(effect, document.timeline);
+    };
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+exports.animations = animations;

package/dist/cjs/helpers/background.js

@@ -1 +1,235 @@
-"use strict";var constant=require("./constant.js"),colors=require("./colors.js"),makeStyle=require("./make-style.js");const getStyleBackgroundByDevice=(e,t)=>e?{...getStyleBgColor(e),...t?.ignoreBackgroundImage?{}:{...getStyleBgImage(e,t),...getStyleBgPosition(e),...getStyleBgSize(e),...getStyleBgRepeat(e)},...t?.ignoreBgAttachment?{}:getStyleBgAttachment(e)}:{},getStyleBgColor=e=>{let t={desktop:getBgColorByDevice(e,"desktop"),tablet:getBgColorByDevice(e,"tablet"),mobile:getBgColorByDevice(e,"mobile")};return makeStyle.makeStyleResponsive("bgc",t)},getBgColorByDevice=(e,t)=>getColor(e?.[t]?.color),getColor=e=>e?colors.isColor(e?.toString())?e:`var(--g-c-${e})`:void 0,getStyleBgImage=(e,t)=>{let g={desktop:getBgImageByDevice(e,"desktop",t),tablet:getBgImageByDevice(e,"tablet",t),mobile:getBgImageByDevice(e,"mobile",t)};return makeStyle.makeStyleResponsive("bgi",g)},getBgImageByDevice=(e,t,g)=>{let o=e?.[t]?.type==="video";if(o)return;let i=e?.[t]?.image?.backupFileKey,a=e?.[t]?.image?.storage,l=e?.[t]?.image?.src,r=i,B=l?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp))$/)?.[1];if(B&&B!=i&&(r=B),"FILE_CONTENT"===a&&g?.liquid&&r&&(l=`{{ "${r.replace(".jpeg",".jpg")}" | file_url }}`),("THEME"===a||!a)&&g?.liquid&&r&&(l=`{{ "${r}" | asset_url }}`),"string"==typeof l)return`url(${l})`},getStyleBgPosition=e=>{let t={desktop:getBgPositionByDevice(e,"desktop"),tablet:getBgPositionByDevice(e,"tablet"),mobile:getBgPositionByDevice(e,"mobile")};return makeStyle.makeStyleResponsive("bgp",t)},getBgPositionByDevice=(e,t)=>{let g=e?.[t]?.position;return g&&`${g.x}% ${g.y}%`},getStyleBgSize=e=>{let t={desktop:getBgSizeByDevice(e,"desktop"),tablet:getBgSizeByDevice(e,"tablet"),mobile:getBgSizeByDevice(e,"mobile")};return makeStyle.makeStyleResponsive("bgs",t)},getBgSizeByDevice=(e,t)=>e?.[t]?.size,getStyleBgRepeat=e=>{let t={desktop:getBgRepeatByDevice(e,"desktop"),tablet:getBgRepeatByDevice(e,"tablet"),mobile:getBgRepeatByDevice(e,"mobile")};return makeStyle.makeStyleResponsive("bgr",t)},getBgRepeatByDevice=(e,t)=>e?.[t]?.repeat,getStyleBgAttachment=e=>{let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")};return makeStyle.makeStyleResponsive("bga",t)},getBgAttachmentByDevice=(e,t)=>e?.[t]?.attachment,composeBackgroundCss=e=>`${e?`background-color: ${colors.getSingleColorVariable(e)} !important;`:void 0}`,makeFixedBgAttachment=e=>{if(!e)return;e.tablet=e.tablet?e.tablet:e.desktop,e.mobile=e.mobile?e.mobile:e.tablet;let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")},g={desktop:{...makeFixedBgAttachmentByDevice("desktop",t.desktop)},tablet:{...makeFixedBgAttachmentByDevice("tablet",t.tablet)},mobile:{...makeFixedBgAttachmentByDevice("mobile",t.mobile)}};return{wrapper:{...g.desktop?.wrapper,...g.tablet?.wrapper,...g.mobile?.wrapper},content:{...g.desktop?.content,...g.tablet?.content,...g.mobile?.content}}},makeFixedBgAttachmentByDevice=(e,t)=>{let g=constant.devicesMapping[e]??"";return"fixed"===t?{wrapper:{[`--pos${g}`]:"absolute",[`--top${g}`]:"0",[`--left${g}`]:"0",[`--w${g}`]:"100%",[`--h${g}`]:"100%"},content:{[`--pos${g}`]:"fixed",[`--w${g}`]:"100vw",[`--h${g}`]:"100vh",[`--bga${g}`]:"unset"}}:{wrapper:{[`--pos${g}`]:"absolute"},content:{[`--w${g}`]:"100%",[`--h${g}`]:"100%",[`--pos${g}`]:"absolute",[`--bga${g}`]:t}}},GRADIENT_BGR_KEY="linear-gradient",getGradientBgrStyleForButton=e=>{if(!e)return;let t={};return Object.keys(e).forEach(g=>{e[g]?.startsWith(GRADIENT_BGR_KEY)&&("normal"===g?Object.assign(t,{"--bg":e[g]}):Object.assign(t,{"--hvr-bg":e[g]}))}),t},getGradientBgrStyleByDevice=e=>{if(!e)return;let t={};return["desktop","tablet","mobile"].forEach(g=>{e[g]?.color?.includes(GRADIENT_BGR_KEY)&&Object.assign(t,{[`--bgc${"desktop"!==g?"-"+g:""}`]:"transparent",[`--bgi${"desktop"!==g?"-"+g:""}`]:`${getBgImageByDevice(e,g)||"url()"}, ${e[g]?.color}`})}),t};exports.GRADIENT_BGR_KEY=GRADIENT_BGR_KEY,exports.composeBackgroundCss=composeBackgroundCss,exports.getBgImageByDevice=getBgImageByDevice,exports.getGradientBgrStyleByDevice=getGradientBgrStyleByDevice,exports.getGradientBgrStyleForButton=getGradientBgrStyleForButton,exports.getStyleBackgroundByDevice=getStyleBackgroundByDevice,exports.makeFixedBgAttachment=makeFixedBgAttachment;
+'use strict';
+
+var constant = require('./constant.js');
+var colors = require('./colors.js');
+var makeStyle = require('./make-style.js');
+
+const getStyleBackgroundByDevice = (background, options)=>{
+    if (!background) {
+        return {};
+    }
+    return {
+        ...!options?.ignoreBackgroundColor ? {
+            ...getStyleBgColor(background)
+        } : {},
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImage(background, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
+            ...getStyleBgPosition(background),
+            ...getStyleBgSize(background),
+            ...getStyleBgRepeat(background)
+        } : {},
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
+    };
+};
+const getStyleBgColor = (background)=>{
+    const bgColor = {
+        desktop: getBgColorByDevice(background, 'desktop'),
+        tablet: getBgColorByDevice(background, 'tablet'),
+        mobile: getBgColorByDevice(background, 'mobile')
+    };
+    return makeStyle.makeStyleResponsive('bgc', bgColor);
+};
+const getBgColorByDevice = (background, device)=>{
+    return getColor(background?.[device]?.color);
+};
+const getColor = (color)=>{
+    if (!color) {
+        return;
+    }
+    if (colors.isColor(color?.toString())) {
+        return color;
+    }
+    return `var(--g-c-${color})`;
+};
+const getStyleBgImage = (background, options)=>{
+    const bgImage = {
+        desktop: getBgImageByDevice(background, 'desktop', options),
+        tablet: getBgImageByDevice(background, 'tablet', options),
+        mobile: getBgImageByDevice(background, 'mobile', options)
+    };
+    return makeStyle.makeStyleResponsive('bgi', bgImage);
+};
+const getBgImageByDevice = (background, device, options)=>{
+    const isBgVideo = background?.[device]?.type === 'video';
+    if (isBgVideo) return;
+    const backupFileKey = background?.[device]?.image?.backupFileKey;
+    const storage = background?.[device]?.image?.storage;
+    let imageByDevice = background?.[device]?.image?.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    if (typeof imageByDevice === 'string') {
+        return `url(${imageByDevice})`;
+    }
+};
+const getStyleBgPosition = (background)=>{
+    const bgPosition = {
+        desktop: getBgPositionByDevice(background, 'desktop'),
+        tablet: getBgPositionByDevice(background, 'tablet'),
+        mobile: getBgPositionByDevice(background, 'mobile')
+    };
+    return makeStyle.makeStyleResponsive('bgp', bgPosition);
+};
+const getBgPositionByDevice = (background, device)=>{
+    const positionByDevice = background?.[device]?.position;
+    return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
+};
+const getStyleBgSize = (background)=>{
+    const bgSize = {
+        desktop: getBgSizeByDevice(background, 'desktop'),
+        tablet: getBgSizeByDevice(background, 'tablet'),
+        mobile: getBgSizeByDevice(background, 'mobile')
+    };
+    return makeStyle.makeStyleResponsive('bgs', bgSize);
+};
+const getBgSizeByDevice = (background, device)=>{
+    return background?.[device]?.size;
+};
+const getStyleBgRepeat = (background)=>{
+    const bgRepeat = {
+        desktop: getBgRepeatByDevice(background, 'desktop'),
+        tablet: getBgRepeatByDevice(background, 'tablet'),
+        mobile: getBgRepeatByDevice(background, 'mobile')
+    };
+    return makeStyle.makeStyleResponsive('bgr', bgRepeat);
+};
+const getBgRepeatByDevice = (background, device)=>{
+    return background?.[device]?.repeat;
+};
+const getStyleBgAttachment = (background)=>{
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    return makeStyle.makeStyleResponsive('bga', bgAttachment);
+};
+const getBgAttachmentByDevice = (background, device)=>{
+    return background?.[device]?.attachment;
+};
+const composeBackgroundCss = (backgroundColor)=>{
+    return `${backgroundColor ? `background-color: ${colors.getSingleColorVariable(backgroundColor)};` : undefined}`;
+};
+const makeFixedBgAttachment = (background)=>{
+    if (!background) return;
+    background.tablet = background.tablet ? background.tablet : background.desktop;
+    background.mobile = background.mobile ? background.mobile : background.tablet;
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    const composeFixed = {
+        desktop: {
+            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
+        },
+        tablet: {
+            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
+        },
+        mobile: {
+            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
+        }
+    };
+    return {
+        wrapper: {
+            ...composeFixed.desktop?.wrapper,
+            ...composeFixed.tablet?.wrapper,
+            ...composeFixed.mobile?.wrapper
+        },
+        content: {
+            ...composeFixed.desktop?.content,
+            ...composeFixed.tablet?.content,
+            ...composeFixed.mobile?.content
+        }
+    };
+};
+const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
+    const suffix = constant.devicesMapping[device] ?? '';
+    if (bgAttachment === 'fixed') {
+        return {
+            wrapper: {
+                [`--pos${suffix}`]: 'absolute',
+                [`--top${suffix}`]: '0',
+                [`--left${suffix}`]: '0',
+                [`--w${suffix}`]: '100%',
+                [`--h${suffix}`]: '100%'
+            },
+            content: {
+                [`--pos${suffix}`]: 'fixed',
+                [`--w${suffix}`]: '100vw',
+                [`--h${suffix}`]: '100vh',
+                [`--bga${suffix}`]: 'unset'
+            }
+        };
+    }
+    return {
+        wrapper: {
+            [`--pos${suffix}`]: 'absolute'
+        },
+        content: {
+            [`--w${suffix}`]: '100%',
+            [`--h${suffix}`]: '100%',
+            [`--pos${suffix}`]: 'absolute',
+            [`--bga${suffix}`]: bgAttachment
+        }
+    };
+};
+const GRADIENT_BGR_KEY = 'linear-gradient';
+const getGradientBgrStyleForButton = (backgroundStyle)=>{
+    if (!backgroundStyle) return;
+    const bgrStyle = {};
+    Object.keys(backgroundStyle).forEach((state)=>{
+        if (!backgroundStyle[state]?.startsWith(GRADIENT_BGR_KEY)) return;
+        if (state === 'normal') {
+            Object.assign(bgrStyle, {
+                '--bg': backgroundStyle[state]
+            });
+        } else {
+            Object.assign(bgrStyle, {
+                '--hvr-bg': backgroundStyle[state]
+            });
+        }
+    });
+    return bgrStyle;
+};
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
+    if (!backgroundStyle) return;
+    const bgrStyle = {};
+    [
+        'desktop',
+        'tablet',
+        'mobile'
+    ].forEach((device)=>{
+        if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
+            Object.assign(bgrStyle, {
+                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+            });
+        }
+    });
+    return bgrStyle;
+};
+
+exports.GRADIENT_BGR_KEY = GRADIENT_BGR_KEY;
+exports.composeBackgroundCss = composeBackgroundCss;
+exports.getBgImageByDevice = getBgImageByDevice;
+exports.getGradientBgrStyleByDevice = getGradientBgrStyleByDevice;
+exports.getGradientBgrStyleForButton = getGradientBgrStyleForButton;
+exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
+exports.getStyleBgColor = getStyleBgColor;
+exports.makeFixedBgAttachment = makeFixedBgAttachment;