@manamerge/mana-atomic-ui 1.0.43 → 1.0.45

package/dist/themes/manamerge/atoms/divider.js

@@ -0,0 +1,25 @@
+import colors from "../miscellaneous/colorpalette";
+const divider = {
+    "Divider-primary": {
+        color: colors.one.b,
+        height: "1px",
+        width: "100%",
+        borderRadius: "0px",
+        margin: "0 auto"
+    },
+    "Divider-secondary": {
+        color: colors.one.h,
+        height: "5px",
+        width: "75%",
+        borderRadius: "50px",
+        margin: "50px auto"
+    },
+    "Divider-tertiary": {
+        color: colors.three.a,
+        height: "20px",
+        width: "50%",
+        borderRadius: "3px",
+        margin: "50px auto"
+    }
+};
+export default divider;

package/dist/themes/manamerge/atoms/gradient.js

@@ -0,0 +1,19 @@
+import colors from "../miscellaneous/colorpalette";
+const gradient = {
+    "Gradient-primary": {
+        orientation: "circle at 100%",
+        primaryColor: colors.three.b,
+        secondaryColor: colors.three.a
+    },
+    "Gradient-secondary": {
+        orientation: "closest-side",
+        primaryColor: colors.two.a,
+        secondaryColor: colors.two.b
+    },
+    "Gradient-tertiary": {
+        orientation: "farthest-corner at 40px 40px",
+        primaryColor: colors.three.a,
+        secondaryColor: colors.four.a
+    }
+};
+export default gradient;

package/dist/themes/manamerge/atoms/heading.js

@@ -0,0 +1,280 @@
+import colors from "../miscellaneous/colorpalette";
+const heading = {
+    "Heading-primary-h1": {
+        mobile: {
+            fontSize: "30px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "34px",
+            lineHeight: "40px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "36px",
+            lineHeight: "40px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-primary-h2": {
+        mobile: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "28px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "30px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-primary-h3": {
+        mobile: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-primary-h4": {
+        mobile: {
+            fontSize: "18px",
+            lineHeight: "23px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "18px",
+            lineHeight: "24px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-primary-h5": {
+        mobile: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-primary-h6": {
+        mobile: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.one.b,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h1": {
+        mobile: {
+            fontSize: "30px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "34px",
+            lineHeight: "40px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "36px",
+            lineHeight: "40px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h2": {
+        mobile: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "28px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "30px",
+            lineHeight: "34px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h3": {
+        mobile: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "24px",
+            lineHeight: "30px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h4": {
+        mobile: {
+            fontSize: "18px",
+            lineHeight: "23px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "18px",
+            lineHeight: "24px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "20px",
+            lineHeight: "25px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h5": {
+        mobile: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "16px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    },
+    "Heading-secondary-h6": {
+        mobile: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        tablet: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        },
+        desktop: {
+            fontSize: "14px",
+            lineHeight: "20px",
+            fontWeight: 700,
+            color: colors.four.a,
+            margin: "0px"
+        }
+    }
+};
+export default heading;

package/dist/themes/manamerge/atoms/icon.js

@@ -0,0 +1,30 @@
+const icon = {
+    "Icon-small": {
+        size: "16px",
+        color: "red",
+        stroke: "black",
+        hover: {
+            stroke: "#ccc",
+            fill: "#ccc"
+        }
+    },
+    "Icon-medium": {
+        size: "22px",
+        color: "#ccc",
+        stroke: "#ccc",
+        hover: {
+            stroke: "#f00",
+            color: "#f00"
+        }
+    },
+    "Icon-large": {
+        size: "64px",
+        color: "orange",
+        stroke: "gold",
+        hover: {
+            stroke: "#ccc",
+            fill: "#ccc"
+        }
+    }
+};
+export default icon;

package/dist/themes/manamerge/atoms/link.js

@@ -0,0 +1,124 @@
+import colors from "../miscellaneous/colorpalette";
+const Link = {
+    "Link-primary-light": {
+        fontSize: "13px",
+        lineHeight: "18px",
+        fontWeight: 300,
+        color: colors.two.a,
+        hover: {
+            color: colors.one.b
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-primary-regular": {
+        fontSize: "15px",
+        lineHeight: "25px",
+        fontWeight: 400,
+        color: colors.two.a,
+        hover: {
+            color: colors.one.b
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-primary-medium": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 500,
+        color: colors.two.a,
+        hover: {
+            color: colors.one.b
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-primary-bold": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 700,
+        color: colors.two.a,
+        hover: {
+            color: colors.one.b
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-primary-heavy": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 900,
+        color: colors.two.a,
+        hover: {
+            color: colors.one.b
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-secondary-light": {
+        fontSize: "13px",
+        lineHeight: "18px",
+        fontWeight: 300,
+        color: colors.one.b,
+        hover: {
+            color: colors.two.a
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-secondary-regular": {
+        fontSize: "15px",
+        lineHeight: "25px",
+        fontWeight: 400,
+        color: colors.one.b,
+        hover: {
+            color: colors.two.a
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-secondary-medium": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 500,
+        color: colors.one.b,
+        hover: {
+            color: colors.two.a
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-secondary-bold": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 700,
+        color: colors.one.b,
+        hover: {
+            color: colors.two.a
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    },
+    "Link-secondary-heavy": {
+        fontSize: "17px",
+        lineHeight: "28px",
+        fontWeight: 900,
+        color: colors.one.b,
+        hover: {
+            color: colors.two.a
+        },
+        disabled: {
+            color: colors.one.e
+        }
+    }
+};
+export default Link;

package/dist/themes/manamerge/atoms/text.js

@@ -0,0 +1,62 @@
+import colors from "../miscellaneous/colorpalette";
+import fontsizes from "../miscellaneous/fontsizes";
+const text = {
+    "Text-primary-light": {
+        vFontSize: fontsizes.xs,
+        lineHeight: "18px",
+        fontWeight: 300,
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
+    },
+    "Text-primary-regular": {
+        vFontSize: fontsizes.sm,
+        lineHeight: "25px",
+        fontWeight: 400,
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
+    },
+    "Text-primary-medium": {
+        vFontSize: fontsizes.md,
+        lineHeight: "28px",
+        fontWeight: 500,
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
+    },
+    "Text-primary-bold": {
+        vFontSize: fontsizes.lg,
+        lineHeight: "28px",
+        fontWeight: 700,
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
+    },
+    "Text-primary-heavy": {
+        vFontSize: fontsizes.xl,
+        lineHeight: "28px",
+        fontWeight: 900,
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
+    },
+    "Text-secondary-regular": {
+        vFontSize: fontsizes.sm,
+        lineHeight: "25px",
+        fontWeight: 400,
+        vColor: colors.one.h,
+        margin: "0px",
+        fontFamily: "Springwood"
+    },
+    "Text-secondary-italic": {
+        vFontSize: fontsizes.lg,
+        lineHeight: "25px",
+        fontWeight: 400,
+        fontStyle: "italic",
+        vColor: colors.one.h,
+        margin: "0px",
+        fontFamily: "Springwood"
+    }
+};
+export default text;

package/dist/themes/manamerge/layouts/pint3.js

@@ -0,0 +1,13 @@
+const pint3 = {
+    "Pint3-primary": {
+        gap: "25px",
+        height: "500px",
+        maxWidth: "1100px",
+        column: {
+            gap: "15px",
+            minWidth: "200px",
+            maxWidth: "500px"
+        }
+    }
+};
+export default pint3;

package/dist/themes/manamerge/miscellaneous/breakpoints.js

@@ -0,0 +1,14 @@
+// Normally we only use 3 or 4 breakpoints for project...
+const breakpoints = {
+    tinyMobileUp: 320,
+    smallMobileUp: 375,
+    mobileUp: 414,
+    mobileLandscapeUp: 568,
+    largeMobileUp: 767,
+    tabletPortraitUp: 992,
+    tabletLandscapeUp: 1024,
+    desktopUp: 1200,
+    largeDesktopUp: 1279,
+    superLargeDesktopUp: 1400
+};
+export default breakpoints;

package/dist/themes/manamerge/miscellaneous/colorpalette.js

@@ -0,0 +1,31 @@
+const colors = {
+    one: {
+        a: "#fff",
+        b: "#e0e0e0",
+        c: "#c0c0c0",
+        d: "#a0a0a0",
+        e: "#808080",
+        f: "#606060",
+        g: "#404040",
+        h: "#202020",
+        i: "#000000"
+    },
+    two: {
+        a: "#0041FF",
+        b: "#0031CC",
+        c: "#04198C",
+        d: "#050A59",
+        e: "#030733",
+        f: "#02041A"
+    },
+    three: {
+        a: "#FFD166",
+        b: "#BF9B30",
+        c: "#A66D03"
+    },
+    four: {
+        a: "#FF1A1A",
+        b: "#590E0E"
+    }
+};
+export default colors;

package/dist/themes/manamerge/miscellaneous/fontsizes.js

@@ -0,0 +1,11 @@
+const fontsizes = {
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "18px",
+    xl: "20px",
+    xxl: "24px",
+    xxxl: "30px",
+    xxxxl: "36px"
+};
+export default fontsizes;

package/dist/themes/manamerge/molecules/accordion.js

@@ -0,0 +1,29 @@
+const accordion = {
+    "Accordion-primary": {
+        width: "100%",
+        borderRadius: "8px",
+        backgroundTitle: "#2a2a2a",
+        paddingTitle: "16px",
+        hover: {
+            background: "#3a3a3a"
+        },
+        focusVisible: {
+            outline: "#0078d4 2px solid",
+            outlineOffset: "1px"
+        },
+        gap: "10px",
+        backgroundDescription: "#ccc",
+        atomIcon: {
+            variant: "small"
+        },
+        atomHeading: {
+            variant: "primary-h5",
+            color: "white"
+        },
+        atomText: {
+            variant: "secondary-light",
+            padding: "16px"
+        }
+    }
+};
+export default accordion;

package/dist/themes/manamerge/molecules/breakerTape.js

@@ -0,0 +1,30 @@
+const breakerTape = {
+    "BreakerTape-primary": {
+        icon: {
+            variant: "medium",
+            fill: "gold",
+            stroke: "gold",
+            hover: {
+                stroke: "gold",
+                fill: "gold"
+            }
+        },
+        text: {
+            variant: "secondary-bold",
+            color: "#111"
+        },
+        tapeContent: {
+            alignItems: "center",
+            gap: "40px",
+            slowness: "35s"
+        },
+        tapeContainer: {
+            width: "100%",
+            transform: "rotate(-3deg)",
+            background: `linear-gradient(to right,rgb(255, 120, 120),rgb(255, 101, 247))`,
+            padding: "10px 0",
+            margin: "45px 0 0 0"
+        }
+    }
+};
+export default breakerTape;

package/dist/themes/manamerge/molecules/cardBanner.js

@@ -0,0 +1,26 @@
+import colors from "../miscellaneous/colorpalette";
+const cardBanner = {
+    "CardBanner-primary": {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        background: `linear-gradient(to right, #ff7e5f, #feb47b)`,
+        border: "2px solid rgb(210, 16, 16)",
+        borderRadius: "25px",
+        padding: "20px",
+        atomHeading: {
+            variant: "secondary-h3"
+        },
+        atomText: {
+            variant: "secondary-regular"
+        },
+        atomButton: {
+            variant: "primary"
+        },
+        atomIcon: {
+            variant: "medium",
+            stroke: colors.one.i,
+            color: colors.one.i
+        }
+    }
+};
+export default cardBanner;