@manamerge/mana-atomic-ui 1.0.2 → 1.0.3

package/dist/themes/themes/Manamerge.ts

@@ -1,648 +0,0 @@
-// 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;