@manamerge/mana-atomic-ui 1.0.164 → 1.0.165

package/dist/themes/themes/ManamergeTheme.ts

@@ -27,6 +27,9 @@ import pint3 from "./manamerge/layouts/pint3";
 // vSizes
 import fontsizes from "./manamerge/miscellaneous/fontsizes";
 
+// colorPalette
+import colors from "./manamerge/miscellaneous/colorpalette";
+
 // Styling
 // import filterListTheme from "./manamerge/styling/filter-list-theme.css.js";
 // import chatTheme from "./manamerge/styling/chat-theme.css.js";
@@ -144,6 +147,8 @@ export const ManamergeTheme = {
     breakpoints,
     // vSizes
     fontsizes,
+    // colorPalette
+    colors,
 
     pages: {
         vod: {

package/dist/themes/themes/davidWeb/miscellaneous/colorpalette.ts

@@ -1,4 +1,5 @@
 const colors = {
+    transparent: "transparent",
     one: {
         a: "#fff",
         b: "#e0e0e0",
@@ -11,12 +12,12 @@ const colors = {
         i: "#000000"
     },
     two: {
-        a: "#0041FF",
-        b: "#0031CC",
-        c: "#04198C",
-        d: "#050A59",
-        e: "#030733",
-        f: "#02041A"
+        a: "#C6FBA6",
+        b: "#A9E694",
+        c: "#80C3BA",
+        d: "#6FA58E",
+        e: "#5E876B",
+        f: "#4D694C"
     },
     three: {
         a: "#FFD166",

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

@@ -2,8 +2,8 @@ import colors from "../miscellaneous/colorpalette";
 const gradient = {
     "Gradient-primary": {
         orientation: "circle at 100%",
-        primaryColor: colors.three.b,
-        secondaryColor: colors.three.a
+        primaryColor: colors.two.a,
+        secondaryColor: colors.two.c
     },
     "Gradient-secondary": {
         orientation: "closest-side",

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

@@ -1,29 +1,59 @@
+import colors from "../miscellaneous/colorpalette";
+
 const icon = {
-    "Icon-small": {
+    "Icon-xs": {
         size: "16px",
-        color: "red",
-        stroke: "black",
+        color: colors.transparent,
+        fill: colors.three.a,
+        stroke: colors.two.a,
         hover: {
-            stroke: "#ccc",
-            fill: "#ccc"
+            color: colors.transparent,
+            fill: colors.four.a,
+            stroke: colors.two.f
         }
     },
-    "Icon-medium": {
-        size: "22px",
-        color: "#ccc",
-        stroke: "#ccc",
+    "Icon-sm": {
+        size: "24px",
+        fill: colors.three.a,
+        stroke: colors.two.a
+    },
+    "Icon-md": {
+        size: "32px",
+        fill: colors.three.a,
+        stroke: colors.two.a
+    },
+    "Icon-lg": {
+        size: "48px",
+        fill: colors.three.a,
+        stroke: colors.two.a
+    },
+    "Icon-xl": {
+        size: "64px",
+        fill: colors.three.a,
+        stroke: colors.two.a
+    },
+    "Icon-xxl": {
+        size: "96px",
+        fill: colors.three.a,
+        stroke: colors.two.a
+    },
+    "Icon-xxxl": {
+        size: "128px",
+        fill: colors.three.a,
+        stroke: colors.two.a,
         hover: {
-            stroke: "#f00",
-            color: "#f00"
+            opacity: "0.8"
         }
     },
-    "Icon-large": {
-        size: "64px",
-        color: "orange",
-        stroke: "gold",
+    "Icon-xxxxl": {
+        size: "192px",
+        color: colors.transparent,
+        fill: colors.three.a,
+        stroke: colors.two.a,
         hover: {
-            stroke: "#ccc",
-            fill: "#ccc"
+            color: colors.transparent,
+            fill: colors.four.a,
+            stroke: colors.two.f
         }
     }
 };

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

@@ -1,10 +1,12 @@
 import colors from "../miscellaneous/colorpalette";
+import fontsizes from "../miscellaneous/fontsizes";
 
 const Link = {
     "Link-primary-light": {
-        fontSize: "13px",
+        fontSize: fontsizes.xs,
         lineHeight: "18px",
         fontWeight: 300,
+        fontFamily: "ManamergeGilmer",
         color: colors.two.a,
         hover: {
             color: colors.one.b
@@ -14,9 +16,10 @@ const Link = {
         }
     },
     "Link-primary-regular": {
-        fontSize: "15px",
+        fontSize: fontsizes.sm,
         lineHeight: "25px",
         fontWeight: 400,
+        fontFamily: "ManamergeGilmer",
         color: colors.two.a,
         hover: {
             color: colors.one.b
@@ -26,9 +29,10 @@ const Link = {
         }
     },
     "Link-primary-medium": {
-        fontSize: "17px",
+        fontSize: fontsizes.md,
         lineHeight: "28px",
         fontWeight: 500,
+        fontFamily: "ManamergeGilmer",
         color: colors.two.a,
         hover: {
             color: colors.one.b
@@ -38,9 +42,10 @@ const Link = {
         }
     },
     "Link-primary-bold": {
-        fontSize: "17px",
+        fontSize: fontsizes.lg,
         lineHeight: "28px",
         fontWeight: 700,
+        fontFamily: "ManamergeGilmer",
         color: colors.two.a,
         hover: {
             color: colors.one.b
@@ -50,9 +55,10 @@ const Link = {
         }
     },
     "Link-primary-heavy": {
-        fontSize: "17px",
+        fontSize: fontsizes.xl,
         lineHeight: "28px",
         fontWeight: 900,
+        fontFamily: "ManamergeGilmer",
         color: colors.two.a,
         hover: {
             color: colors.one.b
@@ -61,23 +67,11 @@ const Link = {
             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",
+        fontSize: fontsizes.sm,
         lineHeight: "25px",
         fontWeight: 400,
+        fontFamily: "Springwood",
         color: colors.one.b,
         hover: {
             color: colors.two.a
@@ -86,34 +80,12 @@ const Link = {
             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,
+    "Link-secondary-italic": {
+        fontSize: fontsizes.lg,
+        lineHeight: "25px",
+        fontWeight: 400,
+        fontFamily: "Springwood",
+        fontStyle: "italic",
         color: colors.one.b,
         hover: {
             color: colors.two.a

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

@@ -1,4 +1,5 @@
 const colors = {
+    transparent: "transparent",
     one: {
         a: "#fff",
         b: "#e0e0e0",
@@ -11,12 +12,12 @@ const colors = {
         i: "#000000"
     },
     two: {
-        a: "#0041FF",
-        b: "#0031CC",
-        c: "#04198C",
-        d: "#050A59",
-        e: "#030733",
-        f: "#02041A"
+        a: "#C6FBA6",
+        b: "#A9E694",
+        c: "#80C3BA",
+        d: "#6FA58E",
+        e: "#5E876B",
+        f: "#4D694C"
     },
     three: {
         a: "#FFD166",

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

@@ -14,7 +14,7 @@ const accordion = {
         gap: "10px",
         backgroundDescription: "#ccc",
         atomIcon: {
-            variant: "small"
+            variant: "sm"
         },
         atomHeading: {
             variant: "primary-h5",

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

@@ -4,7 +4,7 @@ import vFontSizes from "../miscellaneous/fontsizes";
 const breakerTape = {
     "BreakerTape-primary": {
         icon: {
-            variant: "medium",
+            variant: "md",
             fill: colors.one.g,
             stroke: colors.one.g,
             hover: {

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

@@ -19,7 +19,7 @@ const cardBanner = {
             variant: "primary"
         },
         atomIcon: {
-            variant: "medium",
+            variant: "md",
             stroke: colors.one.i,
             color: colors.one.i
         }

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

@@ -23,7 +23,7 @@ const cardSimpleRender = {
         },
 
         atomIcon: {
-            variant: "medium"
+            variant: "md"
         },
         atomHeading: {
             variant: "primary",

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

@@ -21,7 +21,7 @@ const cardTeaser = {
             margin: " 8px 0"
         },
         icon: {
-            variant: "medium"
+            variant: "md"
         },
         button: {
             variant: "primary"

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

@@ -9,17 +9,16 @@ const footer = {
         padding: "10px",
         gap: "20px",
         text: {
-            variant: "secondary-light",
-            color: "#1cc",
-            hover: {
-                color: "#f00"
-            }
+            variant: "primary-light"
+        },
+        gradient: {
+            color: "primary"
         },
         links: {
-            variant: "secondary-regular"
+            variant: "primary-medium"
         },
         icons: {
-            variant: "medium"
+            variant: "md"
         }
     }
 };

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

@@ -1,14 +1,15 @@
+import colors from "../miscellaneous/colorpalette";
+
 const header = {
     "Header-primary": {
         height: "350px",
-        backgroundColor: "rgba(250, 97, 97, 0.71)",
         justifyContent: "center",
         bannerColor: "lightgray",
         wrapperHeader: {
             alignItems: "center"
         },
         atomIconTop: {
-            variant: "large",
+            variant: "lg",
             stroke: "none",
             fill: "none",
             hover: {
@@ -17,7 +18,7 @@ const header = {
             }
         },
         atomIconDot: {
-            variant: "small",
+            variant: "sm",
             size: "10px",
             fill: "green",
             stroke: "none",
@@ -25,11 +26,16 @@ const header = {
                 stroke: "none"
             }
         },
+        atomTextBanner: {
+            variant: "primary-medium",
+            color: colors.one.h
+        },
         atomHeading: {
-            variant: "secondary-h1"
+            variant: "primary",
+            asTag: "h1"
         },
         atomTextTitle: {
-            variant: "secondary-medium"
+            variant: "primary-medium"
         },
         atomButtonLeft: {
             variant: "primary",
@@ -37,13 +43,13 @@ const header = {
         },
         atomButtonRight: {
             variant: "secondary",
-            flexDirection: "row-reverse"
+            flexDirection: "row"
         },
         atomIconLeft: {
-            variant: "small"
+            variant: "sm"
         },
         atomIconRight: {
-            variant: "small"
+            variant: "sm"
         },
         wrapperTextTitle: {
             alignItems: "center"
@@ -60,7 +66,7 @@ const header = {
         },
 
         atomIconDot: {
-            variant: "small",
+            variant: "sm",
             size: "10px",
             fill: "green",
             stroke: "none",
@@ -68,6 +74,10 @@ const header = {
                 stroke: "none"
             }
         },
+        atomTextBanner: {
+            variant: "primary-medium",
+            color: colors.one.h
+        },
         atomHeading: {
             variant: "primary",
             asTag: "h1"

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

@@ -1,14 +1,17 @@
+import colors from "../miscellaneous/colorpalette";
+
 const navigation = {
     "Navigation-primary": {
-        gap: "30px",
+        gap: "50px",
         background: `linear-gradient(
       180deg,
       rgba(59, 60, 63, 0.6) 0%,
       rgba(38, 38, 38, 0.8) 43.75%
     ),
     rgba(59, 60, 63, 0.8);`,
+        padding: "10px",
         atomIcon: {
-            variant: "medium",
+            variant: "md",
             color: "white",
             focus: {
                 outline: "2px solid darkblue",
@@ -23,25 +26,31 @@ const navigation = {
         },
         atomLink: {
             variant: "primary-bold",
-            color: "#ccc",
+            color: colors.one.b,
             fontWeight: "700",
             currentPath: {
-                color: "green",
-                fontWeight: "900"
+                color: colors.three.a,
+                fontWeight: "700"
             },
             focus: {
-                color: "gold",
-                boxShadow: "2px 2px 5px yellow"
+                color: colors.three.a
             },
             hover: {
-                color: "#f00",
+                color: colors.three.a,
                 transition: "color 0.3s ease"
+            },
+            underline: {
+                bottom: "2px",
+                height: "2px",
+                background: colors.three.a,
+                transformOrigin: "center",
+                transition: "0.35s cubic-bezier(.22,1,.36,1)"
             }
         },
         navLinks: {
             responsive: {
                 largeMobileUp: {
-                    gap: "30px",
+                    gap: "50px",
                     justifyContent: "flex-start", // change here if you want the menu to aligned on the left/center/right
                     margin: "0 30px 0 0"
                 }

package/dist/types/components/Atoms/Icon/Icon.css.d.ts

@@ -2,8 +2,11 @@
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, {
     size?: string | undefined;
     color?: string | undefined;
+    fill?: string | undefined;
     stroke?: string | undefined;
     hoverColor?: string | undefined;
+    hoverFill?: string | undefined;
     hoverStroke?: string | undefined;
+    hoverOpacity?: string | undefined;
     variant: string;
 }>> & string;

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

@@ -2,11 +2,14 @@ import React, { FunctionComponent, SVGProps } from "react";
 export interface IconTypes {
     variant?: string;
     svg: FunctionComponent<SVGProps<SVGSVGElement>>;
-    color?: string;
     size?: string;
+    color?: string;
+    fill?: string;
     stroke?: string;
     hoverColor?: string;
+    hoverFill?: string;
     hoverStroke?: string;
+    hoverOpacity?: string;
     onClick?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
     tabIndex?: number;

package/dist/types/components/Atoms/Icon/Icon.stories.d.ts

@@ -4,6 +4,12 @@ declare const meta: Meta<IconTypes>;
 export default meta;
 type Story = StoryObj<IconTypes>;
 export declare const Combos: Story;
+export declare const Custom: Story;
+export declare const ExtraSmall: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const ExtraExtraLarge: Story;
+export declare const ExtraExtraExtraLarge: Story;
+export declare const ExtraExtraExtraExtraLarge: Story;

package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.stories copy.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CardSimpleRenderTypes } from "./CardSimpleRender";
+declare const meta: Meta<CardSimpleRenderTypes>;
+export default meta;
+type Story = StoryObj<CardSimpleRenderTypes>;
+export declare const Default: Story;
+export declare const Hover: Story;
+export declare const Flex: Story;
+export declare const FlexExtra: Story;
+export declare const Flex2: Story;
+export declare const Isolado: Story;

package/dist/types/components/Molecules/Footer/Footer.css.d.ts

@@ -8,6 +8,9 @@ export declare const FooterNav: import("styled-components/dist/types").IStyledCo
 export declare const IconFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Icon/Icon").IconTypes, import("../../Atoms/Icon/Icon").IconTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Icon/Icon").IconTypes>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGradient: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Gradient/Gradient").GradientTypes, import("../../Atoms/Gradient/Gradient").GradientTypes>, {
+    moleculeVariant: string;
+}>, never>> & string & Omit<import("react").FC<import("../../Atoms/Gradient/Gradient").GradientTypes>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Link/Link").LinkTypes, import("../../Atoms/Link/Link").LinkTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Link/Link").LinkTypes>, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/Molecules/Header/Header.css.d.ts

@@ -16,6 +16,9 @@ export declare const AtomIconTop: import("styled-components/dist/types").IStyled
 export declare const AtomIconDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Icon/Icon").IconTypes, import("../../Atoms/Icon/Icon").IconTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Icon/Icon").IconTypes>, keyof import("react").Component<any, {}, any>>;
+export declare const AtomTextBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Text/Text").TextTypes, import("../../Atoms/Text/Text").TextTypes>, {
+    moleculeVariant: string;
+}>, never>> & string & Omit<import("react").FC<import("../../Atoms/Text/Text").TextTypes>, keyof import("react").Component<any, {}, any>>;
 export declare const AtomHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Heading/Heading").HeadingTypes, import("../../Atoms/Heading/Heading").HeadingTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Heading/Heading").HeadingTypes>, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/Molecules/Navigation/Navigation.d.ts

@@ -8,6 +8,5 @@ export interface NavigationTypes {
         to: string;
     }[];
     onLogoClick?: () => void;
-    onTabClick: (label: string) => void;
 }
 export declare const Navigation: React.FC<NavigationTypes>;