@manamerge/mana-atomic-ui 1.0.21 → 1.0.22

package/dist/themes/themes/davidWeb.ts

@@ -0,0 +1,648 @@
+// Breakpoints
+import breakpoints from "./manamerge/miscellaneous/breakpoints";
+
+// Atoms
+import text from "./manamerge/atoms/text";
+import link from "./manamerge/atoms/link";
+import heading from "./manamerge/atoms/heading";
+import button from "./manamerge/atoms/button";
+import checkbox from "./manamerge/atoms/checkbox";
+import icon from "./manamerge/atoms/icon";
+import gradient from "./manamerge/atoms/gradient";
+import divider from "./manamerge/atoms/divider";
+
+// Molecules
+import header from "./manamerge/molecules/header";
+import navigation from "./manamerge/molecules/navigation";
+import footer from "./manamerge/molecules/footer";
+import cardTeaser from "./manamerge/molecules/cardTeaser";
+import cardSimpleRender from "./manamerge/molecules/cardSimpleRender";
+import cardBanner from "./manamerge/molecules/cardBanner";
+
+// Styling
+// import filterListTheme from "./manamerge/styling/filter-list-theme.css.js";
+// import chatTheme from "./manamerge/styling/chat-theme.css.js";
+// import notificationsTheme from "./manamerge/styling/notification-theme.css.js";
+
+// Icons
+// import playIcon from "./manamerge/images/icons/playbutton.svg";
+// import heartEmoji from "./manamerge/images/emojis/heart.png";
+// import fireEmoji from "./manamerge/images/emojis/fire.png";
+// import clapEmoji from "./manamerge/images/emojis/clap.png";
+// import smileEmoji from "./manamerge/images/emojis/smile.png";
+// import plusoneEmoji from "./manamerge/images/emojis/plusone.png";
+// import manamergeprideEmoji from "./manamerge/images/emojis/manapride.png";
+// import manaEmoji from "./manamerge/images/emojis/mana.png";
+import notificationArrow from "./manamerge/images/icons/notificationArrow.svg";
+
+import navBarLogoDark from "./manamerge/images/logo/icon-manaconf.svg";
+import navigationBackIcon from "./manamerge/images/icons/navigation/back.svg";
+import navigationForwardIcon from "./manamerge/images/icons/navigation/forward.svg";
+import closeIcon from "./manamerge/images/icons/close.svg";
+import deleteIcon from "./manamerge/images/icons/delete.svg";
+import calendarIcon from "./manamerge/images/icons/calendar.svg";
+import addToCalendarIcon from "./manamerge/images/icons/addToCalendarIcon.svg";
+import trashIcon from "./manamerge/images/icons/trash.svg";
+import plusIcon from "./manamerge/images/icons/plus.svg";
+import addedIcon from "./manamerge/images/icons/added.svg";
+import arrowDown from "./manamerge/images/icons/arrow-down.svg";
+import infoIcon from "./manamerge/images/icons/info.svg";
+import SectionLogoIcon from "./manamerge/images/icons/sectionlogo.svg";
+import selectBoxIconArrow from "./manamerge/images/icons/selectBox/arrow-down.svg";
+import selectBoxIconArrowLight from "./manamerge/images/icons/selectBox/arrow-down-light.svg";
+
+// Images
+import defaultAvatar from "./manamerge/images/misc/terraform.svg";
+
+// Social icons
+import linkedin_lightgrey from "./manamerge/social/lightgrey/linkedin.svg";
+import facebook_lightgrey from "./manamerge/social/lightgrey/facebook.svg";
+import github_lightgrey from "./manamerge/social/lightgrey/github.svg";
+import instagram_lightgrey from "./manamerge/social/lightgrey/instagram.svg";
+import twitter_lightgrey from "./manamerge/social/lightgrey/twitter.svg";
+import website_lightgrey from "./manamerge/social/lightgrey/website.svg";
+import youtube_lightgrey from "./manamerge/social/lightgrey/youtube.svg";
+
+import linkedin_white from "./manamerge/social/white/linkedin.svg";
+import facebook_white from "./manamerge/social/white/facebook.svg";
+import github_white from "./manamerge/social/white/github.svg";
+import instagram_white from "./manamerge/social/white/instagram.svg";
+import twitter_white from "./manamerge/social/white/twitter.svg";
+import website_white from "./manamerge/social/white/website.svg";
+import breakerTape from "./manamerge/molecules/breakerTape";
+
+// const customEmojis = [
+//     heartEmoji,
+//     fireEmoji,
+//     manaEmoji,
+//     smileEmoji,
+//     manamergeprideEmoji,
+//     clapEmoji,
+//     plusoneEmoji
+// ];
+
+const {
+    tinyMobileUp,
+    smallMobileUp,
+    mobileUp,
+    mobileLandscapeUp,
+    largeMobileUp,
+    tabletPortraitUp,
+    tabletLandscapeUp,
+    desktopUp,
+    largeDesktopUp,
+    superLargeDesktopUp
+} = breakpoints;
+
+export const manamergeTheme = {
+    // Atoms
+    link,
+    heading,
+    button,
+    text,
+    breakpoints,
+    icon,
+    headingStyles: heading,
+    gradient,
+    divider,
+
+    // Molecules
+    header,
+    navigation,
+    footer,
+    cardTeaser,
+    breakerTape,
+    cardSimpleRender,
+    cardBanner,
+
+    // Breakpoints
+    media: {
+        tinyMobileUp: `@media only screen and (min-width: ${tinyMobileUp}px)`,
+        smallMobileUp: `@media only screen and (min-width: ${smallMobileUp}px)`,
+        mobileUp: `@media only screen and (min-width: ${mobileUp}px)`,
+        mobileLandscapeUp: `@media only screen and (min-width: ${mobileLandscapeUp}px)`,
+        largeMobileUp: `@media only screen and (min-width: ${largeMobileUp}px)`,
+        tabletPortraitUp: `@media only screen and (min-width: ${tabletPortraitUp}px)`,
+        tabletLandscapeUp: `@media only screen and (min-width: ${tabletLandscapeUp}px)`,
+        desktopUp: `@media only screen and (min-width: ${desktopUp}px)`,
+        largeDesktopUp: `@media only screen and (min-width: ${largeDesktopUp}px)`,
+        superLargeDesktopUp: `@media only screen and (min-width: ${superLargeDesktopUp}px)`
+    },
+
+    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: {
+                text: "#f2f3f3",
+                desktop: `#131414`,
+                tablet: `#131414`,
+                mobile: `#131414`
+            },
+            main: {
+                background: "#000000",
+                text: "#f2f3f3",
+                columns: 3,
+                gap: {
+                    mobile: "32px",
+                    tablet: "21px",
+                    desktop: "48px 32px"
+                }
+            }
+        },
+        meetups: {}
+    },
+    components: {
+        meetupCard: {
+            backgroundColor: "#000",
+            typeColor: "#fff",
+            dateColor: "#9d9d9e",
+            titleColor: "#fff",
+            descriptionColor: "#f2f2f3",
+            buttonVariant: "dark",
+            reversedButtons: true,
+            fullTextColor: "#BFBFC0",
+            fullBackground: "#727274"
+        },
+        textArea: {
+            default: "#fff",
+            active: "#fff",
+            hover: "#BFBFC0",
+            disabledText: "#BFBFC0"
+        },
+        qnAList: {
+            buttonVariant: "secondary",
+            titleColor: "#fff",
+            textColor: "#F2F2F3",
+            disabledBackground: `linear-gradient(
+          180deg,
+          rgba(59, 60, 63, 0.6) 0%,
+          rgba(38, 38, 38, 0.8) 43.75%
+        ),
+        rgba(59, 60, 63, 0.8);`
+        },
+        qnACard: {
+            voteButtonIcon: true,
+            background: "#000",
+            textColor: "#F2F2F3",
+            footerFlexDirection: "row-reverse",
+            buttonVariant: "dark",
+            scrollbar: {
+                width: "2px"
+            },
+            scrollbarThumb: {
+                background: "#858687"
+            },
+            scrollbarTrack: {
+                boxShadow: "inset 0 0 5px #373942",
+                borderRadius: "10px"
+            }
+        },
+        toolTip: {
+            textColor: "#dbdbdc",
+            toolTipTextColor: "#fff",
+            toolTipBackgroundColor: "#343536",
+            textTransform: "uppercase"
+        },
+        formLabel: {
+            labelColor: "#fff",
+            requiredStarColor: "#fff"
+        },
+        selectBox: {
+            textColor: "#FFF",
+            selectedTextColor: "#FFF",
+            disabledText: "#76767D",
+            backgroundColor: "#131414",
+            hover: "#212324",
+            width: "20px",
+            height: "20px",
+            topOpen: "14px",
+            topClosed: "14px",
+            right: "15px",
+            selectBoxIconArrow: selectBoxIconArrow,
+            selectBoxIconArrowLight: selectBoxIconArrowLight,
+            borderColor: "#343536",
+            errorBorderColor: "#F25054"
+        },
+        modal: {
+            top: {
+                text: "#fff",
+                background: "#131414",
+                titleColor: "#fff",
+                mobileAlignCenter: true
+            },
+            bottom: {
+                text: "#fff",
+                background: "#131414"
+            },
+            greyText: "#9194A0",
+            selectedItem: "#00ACFF",
+            topBarColor: "#343536",
+            closeButtonMargin: "12px",
+            closeButtonColor: { desktop: "#fff", mobile: "#fff" },
+            categoryVariant: "dark"
+        },
+        notificationToast: {
+            background: "#fff",
+            footerLinkColor: "#3A9EF8",
+            closeButtonColor: { desktop: "#000", mobile: "#000" }
+        },
+        modalPlayer: {
+            closeButtonColor: { desktop: "#000", mobile: "#fff" }
+        },
+        modalSpeaker: {
+            nameHeadingVariant: "h1",
+            isJobTitleHeading: true,
+            aboutMeHeadingVariant: "h1",
+            textVariant: "large",
+            avatarSize: "large",
+            socialIconSpacing: "large",
+            hasMoreSpace: true,
+            socialIconColor: "white",
+            jobCompanySeperateLines: false
+        },
+        modalQuestion: {
+            padding: "0px 200px",
+            margin: "0 -70px",
+            buttonFullWidth: true,
+            questionLength: 250
+        },
+        modalQuestionSent: {
+            padding: "0px 200px",
+            margin: "0 -70px",
+            buttonFullWidth: true
+        },
+        modalShareHug: {
+            padding: "0px 200px",
+            margin: "0 -70px",
+            headingMargin: "0px 0 24px",
+            paddingModal: "56px 80px 140px"
+        },
+        modalVodDetail: {
+            topTitle: true,
+            title: {
+                textColor: "#fff",
+                background: "#131414",
+                categoryColor: "#76767D",
+                centered: true,
+                hasMoreSpace: true
+            },
+            description: {
+                headingVariant: "h1",
+                textVariant: "large"
+            },
+            speakers: {
+                headingVariant: "h1",
+                textColor: "#1D1E1F",
+                background: "#fff",
+                jobTitleColor: "#343536",
+                jobTitleSpacing: true,
+                socialIconColor: "lightgrey",
+                horizontalRulerColor: "#BFBFC0",
+                isJobTitleHeading: false,
+                avatarSize: "medium",
+                direction: "horizontal",
+                mobileAlignCenter: false,
+                mobileAvatarFullWidth: true
+            }
+        },
+        vodTop: {
+            titleHeadingVariant: "h3",
+            isLight: false,
+            showCategories: true,
+            showViewAllVideos: true,
+            hasMoreSpace: true
+        },
+        vodOverview: {
+            categoryVariant: "dark",
+            useCheckboxes: true,
+            titleHeadingVariant: "h3",
+            showCategories: true,
+            showFilter: true,
+            marginLeftWhenMobile: "auto"
+        },
+        vodDetail: {
+            topTitleColor: "#9194a0",
+            dateTimeColor: "#b6b8c2"
+        },
+        partnerOverview: {
+            showFilter: false,
+            showPromoOverview: false,
+            promoOverviewColor: "#FFF"
+        },
+        videoThumb: {
+            hoverEffect: "brighten",
+            titleColor: "#fff"
+        },
+        LiveThumb: {
+            textColor: "#fff"
+        },
+        schedule: {
+            background: "#131414",
+            textColor: "#fff",
+            trackTitleColor: "#fff",
+            timeLineTextColor: "#fff",
+            rowDividerColor: "#1D1E23",
+            dayColor: "#9d9d9e",
+            dayActiveColor: "#fff",
+            dayBorderColor: "#76767d",
+            trackColor: "#9D9D9E",
+            trackActiveColor: "#fff"
+        },
+        sessionCard: {
+            background: "#212324",
+            backgroundHover: "#292b2c",
+            categoryVariant: "light",
+            categoryTextColor: "#9D9D9E",
+            dateColor: "#f2f2f3",
+            titleColor: "#fff",
+            speakerColor: "#f2f3f3",
+            progressBarBackground: "#DC477D",
+            progressBar: "#343536",
+            heading: {
+                fontSize: "18px",
+                lineHeight: "24px"
+            },
+            processingTextColor: "#BDBEC2"
+        },
+        navigation: {
+            textColor: "#FFF",
+            backgroundColor: "#000",
+            navLink: "#76767D",
+            profileDropdown: {
+                textColor: "#FFF",
+                backgroundColor: "#131414",
+                backgroundColorHover: "#212324"
+            }
+        },
+        faqToggle: {
+            textColor: "#FFF"
+        },
+        filter: {
+            textColor: "#F2F2F3",
+            background: "#000"
+        },
+        subMenu: {
+            textColor: "#FFF",
+            backgroundColor: "#000",
+            navLink: "#76767D"
+        },
+        trackFilter: {
+            textColor: "#DCDDE0",
+            navLink: "#9D9D9E"
+        },
+        scheduleSubMenu: {
+            backgroundColor: "#000"
+        },
+        sidePanel: {
+            textColor: "#fff",
+            background: "#000",
+            width: "590px",
+            backdropFilter: "none"
+        },
+        dateTime: {
+            useSuffixedDay: true
+        },
+        meetupSignups: {
+            textColor: "#727274",
+            textColorLastPic: "#fff",
+            pictureBackground: "#343536",
+            backgroundColor: "#000"
+        },
+        sessionQnA: {
+            textColor: "#fff",
+            background: "#212324"
+        }
+    },
+    socialIcons: {
+        lightgrey: {
+            linkedin: linkedin_lightgrey,
+            facebook: facebook_lightgrey,
+            github: github_lightgrey,
+            instagram: instagram_lightgrey,
+            twitter: twitter_lightgrey,
+            website: website_lightgrey,
+            youtube: youtube_lightgrey
+        },
+        white: {
+            linkedin: linkedin_white,
+            facebook: facebook_white,
+            github: github_white,
+            instagram: instagram_white,
+            twitter: twitter_white,
+            website: website_white
+        }
+    },
+    fonts: {
+        default: "ManamergeGilmer, sans-serif"
+    },
+    borderRadius: {
+        button: "0",
+        input: "0",
+        countdown: "20px"
+    },
+    checkbox,
+    combination: {
+        light: {},
+        dark: {},
+        pulldown: {},
+        selected: {
+            background: "#131414",
+            text: "#ffffff"
+        },
+        error: {
+            text: "#F25054",
+            background: "#131414"
+        },
+        success: {},
+        header: {
+            text: "#f2f3f3",
+            background: "#131414",
+            orientation: "horizontal"
+        },
+        shade: {},
+        hover: {},
+        recommended: {}
+    },
+    sponsorMeeting: {
+        descriptionBackground: "#F3F3F3",
+        descriptionText: "#4E5054"
+    },
+    menu: {
+        light: {
+            background: "#FFFFFF",
+            text: "#333"
+        },
+        dark: {
+            background: "#333",
+            text: "#ffffff"
+        },
+        mobile: {
+            background: "#000",
+            text: "#FFFFFF",
+            textActive: "#FFFFFF"
+        }
+    },
+    background: {
+        default: "#f4f4f4"
+    },
+
+    category: {
+        textLight: "#000",
+        textDark: "#000",
+        light: "#FFF",
+        dark: "#76767D",
+        hover: "#000",
+        active: "#000",
+        gap: "16px"
+    },
+    rowBackground: {
+        default: {
+            text: "inherit",
+            desktop: "transparent",
+            tablet: "transparent",
+            mobile: "transparent"
+        },
+        light: {
+            text: "#333",
+            desktop: "#FFF",
+            tablet: "#FFF",
+            mobile: "#FFF"
+        },
+        image1: {
+            text: "#FFF",
+            desktop: `#131414`,
+            tablet: `#131414`,
+            mobile: `#131414`
+        }
+    },
+    images: {
+        navBarLogoDark,
+        footerLogo: {}
+    },
+    ratingPopup: {
+        lowRating: "#ff0000",
+        mediumRating: "#FECB00",
+        highRating: "#427D00",
+        backgroundHover: "#EBEBEB",
+        ratingText: "#4A4D4E"
+    },
+    icons: {
+        arrowDown,
+        // play: playIcon,
+        navigationBack: navigationBackIcon,
+        navigationForward: navigationForwardIcon,
+        close: closeIcon,
+        delete: deleteIcon,
+        calendar: calendarIcon,
+        addToCalendar: addToCalendarIcon,
+        remove: trashIcon,
+        plus: plusIcon,
+        added: addedIcon,
+        info: infoIcon,
+        sectionLogoIcon: SectionLogoIcon,
+        defaultAvatar,
+        notificationArrow
+    },
+    iconColors: {
+        dark: "#212324",
+        noColor: "#131414;"
+    },
+    hero: {},
+    // header: {
+    //     headerVariant: "h3",
+    //     textVariant: "medium",
+    //     buttonHeader: "secondary",
+    //     headerButtonPosition: "right"
+    // },
+    pagination: {
+        buttonVariant: "icon-right",
+        iconRight: "rightArrow",
+        iconLeft: "leftArrow"
+    },
+    meetup: {
+        buttonVariant: "secondary-grey"
+    },
+    player_cta: {},
+    profile: {
+        card: {}
+    },
+    notifications: {
+        toast: {
+            buttonVariant: "secondary-borderless"
+        },
+        // notificationsTheme,
+        textColor: "#BDBEC2",
+        descriptionFontSize: "15px",
+        background: "#131414"
+    },
+    chat: {
+        // chatTheme,
+        // customEmojis,
+        pickerInline: true,
+        inputChat: {
+            background: "#212324",
+            border: "#212324"
+        },
+        chatList: {
+            scrollbar: {
+                width: "2px"
+            },
+            scrollbarThumb: {
+                background: "#858687"
+            },
+            scrollbarTrack: {
+                boxShadow: "inset 0 0 5px #373942",
+                borderRadius: "10px"
+            }
+        }
+    },
+    // filterListTheme,
+    partners: {},
+
+    maxWidth: "2600px",
+    navigationFontSize: "15px",
+    vodRowMaxHight: "800px",
+    inputField: {
+        height: "52px"
+    }
+};
+
+export default manamergeTheme;