@manamerge/mana-atomic-ui 1.0.153 → 1.0.155

package/dist/themes/themes/DavidWebTheme.ts

@@ -21,26 +21,7 @@ import cardBanner from "./davidWeb/molecules/cardBanner";
 import accordion from "./manamerge/molecules/accordion";
 import breakerTape from "./davidWeb/molecules/breakerTape";
 
-// 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";
+// Images icons
 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";
@@ -107,6 +88,7 @@ export const DavidWebTheme = {
     heading,
     button,
     text,
+    breakpoints,
     icon,
     headingStyles: heading,
     gradient,
@@ -122,10 +104,7 @@ export const DavidWebTheme = {
     cardBanner,
     accordion,
 
-    // Layouts
-    pint3,
-
-    // Media queries
+    // Breakpoints
     media: {
         tinyMobileUp: `@media only screen and (min-width: ${tinyMobileUp}px)`,
         smallMobileUp: `@media only screen and (min-width: ${smallMobileUp}px)`,
@@ -138,11 +117,46 @@ 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,279 +1,139 @@
-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": {
+    "Heading-h1": {
         mobile: {
             fontSize: "30px",
             lineHeight: "34px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "34px",
             lineHeight: "40px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "36px",
             lineHeight: "40px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     },
-    "Heading-secondary-h2": {
+    "Heading-h2": {
         mobile: {
             fontSize: "24px",
             lineHeight: "30px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "28px",
             lineHeight: "34px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "30px",
             lineHeight: "34px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     },
-    "Heading-secondary-h3": {
+    "Heading-h3": {
         mobile: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "24px",
             lineHeight: "30px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     },
-    "Heading-secondary-h4": {
+    "Heading-h4": {
         mobile: {
             fontSize: "18px",
             lineHeight: "23px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "18px",
             lineHeight: "24px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "20px",
             lineHeight: "25px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     },
-    "Heading-secondary-h5": {
+    "Heading-h5": {
         mobile: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     },
-    "Heading-secondary-h6": {
+    "Heading-h6": {
         mobile: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         tablet: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         },
         desktop: {
             fontSize: "14px",
             lineHeight: "20px",
             fontWeight: 700,
-            color: colors.four.a,
+            color: "#3838aa",
             margin: "0px"
         }
     }

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

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

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

@@ -5,15 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DavidWebStyles = void 0;
 var _styledComponents = require("styled-components");
-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
+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
 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    @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"]);
+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"]);

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

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

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

@@ -7,7 +7,7 @@ const cardSimpleRender = {
         gradientBackground: `radial-gradient(circle at bottom right, rgba(237, 191, 222, 0.9) 5%, pink 10%, transparent 30%)`,
         border: "2px solid rgb(210, 16, 16)",
         borderRadius: "25px",
-        padding: "20px 20px 0 20px",
+        padding: "0px",
         height: "100%",
         maxWidth: "350px",
         minWidth: "200px",
@@ -26,7 +26,8 @@ const cardSimpleRender = {
             variant: "medium"
         },
         atomHeading: {
-            variant: "secondary-h3"
+            variant: "primary",
+            as: "h2"
         },
         atomText: {
             variant: "secondary-regular"

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

@@ -31,8 +31,7 @@ const navigation = {
             },
             focus: {
                 color: "gold",
-                boxShadow: "2px 2px 5px yellow",
-                transform: "translateY(-5px)"
+                boxShadow: "2px 2px 5px yellow"
             },
             hover: {
                 color: "#f00",

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

@@ -2,6 +2,6 @@ import React, { ReactNode } from "react";
 export interface HeadingTypes {
     variant?: string;
     children: ReactNode;
-    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 export declare const Heading: React.FC<HeadingTypes>;