@manamerge/mana-atomic-ui 1.0.155 → 1.0.157

package/dist/themes/themes/DavidWebTheme.ts

@@ -21,7 +21,26 @@ import cardBanner from "./davidWeb/molecules/cardBanner";
 import accordion from "./manamerge/molecules/accordion";
 import breakerTape from "./davidWeb/molecules/breakerTape";
 
-// Images icons
+// Layouts
+import pint3 from "./davidWeb/layouts/pint3";
+
+// vSizes
+import fontsizes from "./davidWeb/miscellaneous/fontsizes";
+
+// Styling
+// import filterListTheme from "./davidWeb/styling/filter-list-theme.css.js";
+// import chatTheme from "./davidWeb/styling/chat-theme.css.js";
+// import notificationsTheme from "./davidWeb/styling/notification-theme.css.js";
+
+// Icons
+// import playIcon from "./davidWeb/images/icons/playbutton.svg";
+// import heartEmoji from "./davidWeb/images/emojis/heart.png";
+// import fireEmoji from "./davidWeb/images/emojis/fire.png";
+// import clapEmoji from "./davidWeb/images/emojis/clap.png";
+// import smileEmoji from "./davidWeb/images/emojis/smile.png";
+// import plusoneEmoji from "./davidWeb/images/emojis/plusone.png";
+// import manamergeprideEmoji from "./davidWeb/images/emojis/manapride.png";
+// import manaEmoji from "./davidWeb/images/emojis/mana.png";
 import notificationArrow from "./davidWeb/images/icons/notificationArrow.svg";
 import navBarLogoDark from "./davidWeb/images/logo/icon-manaconf.svg";
 import navigationBackIcon from "./davidWeb/images/icons/navigation/back.svg";
@@ -88,7 +107,6 @@ export const DavidWebTheme = {
     heading,
     button,
     text,
-    breakpoints,
     icon,
     headingStyles: heading,
     gradient,
@@ -104,7 +122,10 @@ export const DavidWebTheme = {
     cardBanner,
     accordion,
 
-    // Breakpoints
+    // Layouts
+    pint3,
+
+    // Media queries
     media: {
         tinyMobileUp: `@media only screen and (min-width: ${tinyMobileUp}px)`,
         smallMobileUp: `@media only screen and (min-width: ${smallMobileUp}px)`,
@@ -117,46 +138,11 @@ export const DavidWebTheme = {
         largeDesktopUp: `@media only screen and (min-width: ${largeDesktopUp}px)`,
         superLargeDesktopUp: `@media only screen and (min-width: ${superLargeDesktopUp}px)`
     },
+    // breakpoints,
+    breakpoints,
+    // vSizes
+    fontsizes,
 
-    colors: {
-        light: "#212324",
-        white: "#ffffff",
-        grey: "#CCCCCC",
-        accent: "#000",
-        active: "#1D1E23",
-        affirmative: "#AC72F0",
-        affirmativeDark: "#AC72F0",
-        affirmativeAlternate: "#AC72F0",
-        cta: "#AC72F0",
-        dark: "#000",
-        separator: "#76767D",
-        disabledBg: "#212324",
-        disabledText: "#343536",
-        divider: "#0f0",
-        error: "#F25054",
-        errorHoverBack: "#0f0",
-        hover: "#212324",
-        lightBack: "#131414",
-        navigateText: "#0f0",
-        notice: "#69696F",
-        outline: "#00A1F1",
-        primary: "#76767D",
-        primaryDark: "#1D1E23",
-        primaryDarker: "#131414",
-        readMore: "#AC72F0",
-        secondary: "#343536",
-        // secondaryLighter: '#343536',
-        secondaryLighter: "#727274",
-        socialIcon: "transparent",
-        socialIconSecondary: "#1a1",
-        text: "#212324",
-        textAccent: "#fff",
-        textLight: "#FFFFFF",
-        border: "#343536",
-        signedUp: "#f0f",
-        borderError: "#F25054",
-        borderHover: "#343536"
-    },
     pages: {
         vod: {
             top: {

package/dist/themes/themes/davidWeb/atoms/heading.ts

@@ -1,139 +1,279 @@
+import colors from "../miscellaneous/colorpalette";
+
 const heading = {
-    "Heading-h1": {
+    "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: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "34px",
             lineHeight: "40px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "36px",
             lineHeight: "40px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     },
-    "Heading-h2": {
+    "Heading-secondary-h2": {
         mobile: {
             fontSize: "24px",
             lineHeight: "30px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "28px",
             lineHeight: "34px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "30px",
             lineHeight: "34px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     },
-    "Heading-h3": {
+    "Heading-secondary-h3": {
         mobile: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "24px",
             lineHeight: "30px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     },
-    "Heading-h4": {
+    "Heading-secondary-h4": {
         mobile: {
             fontSize: "18px",
             lineHeight: "23px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "18px",
             lineHeight: "24px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     },
-    "Heading-h5": {
+    "Heading-secondary-h5": {
         mobile: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     },
-    "Heading-h6": {
+    "Heading-secondary-h6": {
         mobile: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         tablet: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         },
         desktop: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: "#3838aa",
+            color: colors.four.a,
             margin: "0px"
         }
     }

package/dist/themes/themes/davidWeb/atoms/text.ts

@@ -1,38 +1,64 @@
+import colors from "../miscellaneous/colorpalette";
+import fontsizes from "../miscellaneous/fontsizes";
+
 const text = {
-    "Text-light": {
-        fontSize: "13px",
+    "Text-primary-light": {
+        vFontSize: fontsizes.xs,
         lineHeight: "18px",
         fontWeight: 300,
-        color: "#13021f",
-        margin: "0px"
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
     },
-    "Text-regular": {
-        fontSize: "15px",
+    "Text-primary-regular": {
+        vFontSize: fontsizes.sm,
         lineHeight: "25px",
         fontWeight: 400,
-        color: "#13021f",
-        margin: "0px"
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
     },
-    "Text-medium": {
-        fontSize: "17px",
+    "Text-primary-medium": {
+        vFontSize: fontsizes.md,
         lineHeight: "28px",
         fontWeight: 500,
-        color: "#13021f",
-        margin: "0px"
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
     },
-    "Text-bold": {
-        fontSize: "17px",
+    "Text-primary-bold": {
+        vFontSize: fontsizes.lg,
         lineHeight: "28px",
         fontWeight: 700,
-        color: "#13021f",
-        margin: "0px"
+        vColor: colors.one.b,
+        margin: "0px",
+        fontFamily: "ManamergeGilmer"
     },
-    "Text-heavy": {
-        fontSize: "17px",
+    "Text-primary-heavy": {
+        vFontSize: fontsizes.xl,
         lineHeight: "28px",
         fontWeight: 900,
-        color: "#13021f",
-        margin: "0px"
+        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"
     }
 };
 

package/dist/themes/themes/davidWeb/fonts/index.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DavidWebStyles = void 0;
 var _styledComponents = require("styled-components");
-var _GilmerRegular = _interopRequireDefault(require("./Gilmer-Regular.woff2"));
-var _GilmerBold = _interopRequireDefault(require("./Gilmer-Bold.woff2"));
-var _GilmerHeavy = _interopRequireDefault(require("./Gilmer-Heavy.woff2"));
-var _GilmerLight = _interopRequireDefault(require("./Gilmer-Light.woff2"));
-var _GilmerMedium = _interopRequireDefault(require("./Gilmer-Medium.woff2"));
-var _templateObject; // Fonts
+var _GilmerRegular = _interopRequireDefault(require("./Gilmer/Gilmer-Regular.woff2"));
+var _GilmerBold = _interopRequireDefault(require("./Gilmer/Gilmer-Bold.woff2"));
+var _GilmerHeavy = _interopRequireDefault(require("./Gilmer/Gilmer-Heavy.woff2"));
+var _GilmerLight = _interopRequireDefault(require("./Gilmer/Gilmer-Light.woff2"));
+var _GilmerMedium = _interopRequireDefault(require("./Gilmer/Gilmer-Medium.woff2"));
+var _SpringwoodBrushItalic = _interopRequireDefault(require("./Springwood/SpringwoodBrush-Italic.woff2"));
+var _SpringwoodBrushRegular = _interopRequireDefault(require("./Springwood/SpringwoodBrush-Regular.woff2"));
+var _templateObject; // Fonts Manamerge Gilmer
+// Fonts SpringWood
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var DavidWebStyles = exports.DavidWebStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 300;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 400;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 500;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 700;\n  }\n\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 900;\n  }\n  * {\n    font-family: ManamergeGilmer, sans-serif;\n  }\n"])), _GilmerLight["default"], _GilmerRegular["default"], _GilmerMedium["default"], _GilmerBold["default"], _GilmerHeavy["default"]);
+var DavidWebStyles = exports.DavidWebStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 300;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 400;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 500;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 700;\n  }\n\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 900;\n  }\n    @font-face {\n    font-family: Springwood;\n    src: url(", ") format('woff2');\n    font-style: italic;\n    font-weight: 400;\n  }\n    @font-face {\n    font-family: Springwood;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 400;\n  }\n"])), _GilmerLight["default"], _GilmerRegular["default"], _GilmerMedium["default"], _GilmerBold["default"], _GilmerHeavy["default"], _SpringwoodBrushItalic["default"], _SpringwoodBrushRegular["default"]);

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

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

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

@@ -1,21 +1,17 @@
-import colors from "../miscellaneous/colorpalette";
-import vFontSizes from "../miscellaneous/fontsizes";
-
 const breakerTape = {
     "BreakerTape-primary": {
         icon: {
             variant: "medium",
-            fill: colors.one.g,
-            stroke: colors.one.g,
+            fill: "gold",
+            stroke: "gold",
             hover: {
-                fill: colors.one.g,
-                stroke: colors.one.g
+                stroke: "gold",
+                fill: "gold"
             }
         },
         text: {
-            variant: "primary-medium",
-            color: colors.one.h,
-            fontSize: vFontSizes.sm
+            variant: "secondary-bold",
+            color: "#111"
         },
         tapeContent: {
             alignItems: "center",
@@ -25,7 +21,7 @@ const breakerTape = {
         tapeContainer: {
             width: "100%",
             transform: "rotate(-3deg)",
-            background: `linear-gradient(to right,#c6fba6,#80c3ba)`,
+            background: `linear-gradient(to right,rgb(255, 120, 120),rgb(255, 101, 247))`,
             padding: "10px 0",
             margin: "45px 0 0 0"
         }

package/dist/types/components/Atoms/Text/Text.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
 export interface TextTypes {
-    variant?: string;
+    variant?: "primary-light" | "primary-regular" | "primary-medium" | "primary-bold" | "primary-heavy" | "secondary-regular" | "secondary-italic";
     children?: string;
     htmlFor?: string;
     margin?: string;
-    color?: string;
     lineHeight?: string;
     fontWeight?: string | number;
     tag?: keyof JSX.IntrinsicElements;