groundfloor-react-ui 1.2.9 → 1.2.11

package/components/Tooltip/Tooltip.js

@@ -1,581 +0,0 @@
-import PropTypes from 'prop-types';
-import React from "react";
-import { usePopperTooltip } from 'react-popper-tooltip';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-
-/**
- * Primary UI component for user interaction
- */
-const TooltipContainer = styled.div`
- background-color: ${({ theme }) => theme.bgColor};
- border: 1px solid ${({ theme }) => theme.bgColor};
- color: ${({ theme }) => theme.black},
- ${({ inBuiltCss, type, customStylesTPContainer }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tooltip-container']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tooltip-container']) {
-                    tempObj[property] = inBuiltCss['tooltip-container'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPContainer };
-        }
-    }}
- 
-     &[data-popper-placement*='bottom'] .tooltip-arrow {
-         ${({ inBuiltCss, type, customStylesTPAbottom }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-bottom-arrow']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-bottom-arrow']) {
-                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAbottom };
-        }
-    }}
-     }
- 
- &[data-popper-placement*='bottom'] .tooltip-arrow::before {
-    border-color: transparent transparent ${({ theme }) => theme.bgColor} transparent;
-     ${({ inBuiltCss, type, customStylesTPAbottomBefore, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-bottom-arrow-before']) {
-                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-before'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPAbottomBefore ? customStylesTPAbottomBefore : {
-                borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
- }
- 
- &[data-popper-placement*='bottom'] .tooltip-arrow::after {
-    border-color: transparent transparent ${({ theme }) => theme.bgColor} transparent;
-     ${({ inBuiltCss, type, customStylesTPAbottomAfter, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-bottom-arrow-after']) {
-                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-after'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPAbottomAfter ? customStylesTPAbottomAfter : {
-                borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-
-        }
-    }}
- }
- &[data-popper-placement*='top'] .tooltip-arrow {
-     ${({ inBuiltCss, type, customStylesTPAtop }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-top-arrow']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-top-arrow']) {
-                    tempObj[property] = inBuiltCss['tp-cont-top-arrow'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAtop };
-        }
-    }}
- }
- &[data-popper-placement*='top'] .tooltip-arrow::before {
-    border-color: ${({ theme }) => theme.bgColor}  transparent transparent transparent;
-     ${({ inBuiltCss, type, customStylesTPAtopBefore, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-top-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-top-arrow-before']) {
-                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-before'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPAtopBefore ? customStylesTPAtopBefore : {
-                borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
- }
- &[data-popper-placement*='top'] .tooltip-arrow::after {
-    border-color: ${({ theme }) => theme.bgColor}  transparent transparent transparent;
-     ${({ inBuiltCss, type, customStylesTPAtopAfter, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-top-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-top-arrow-after']) {
-                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-after'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-
-            let customStyles = customStylesTPAtopAfter ? customStylesTPAtopAfter : {
-                borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
- }
- &[data-popper-placement*='right'] .tooltip-arrow {
-     ${({ inBuiltCss, type, customStylesTPAright }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-right-arrow']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-right-arrow']) {
-                    tempObj[property] = inBuiltCss['tp-cont-right-arrow'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAright };
-        }
-    }}
- }
- &[data-popper-placement*='right'] .tooltip-arrow::before {
-    border-color: transparent ${({ theme }) => theme.bgColor} transparent transparent;
-     ${({ inBuiltCss, type, customStylesTPArightBefore, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-right-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-right-arrow-before']) {
-                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-before'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPArightBefore ? customStylesTPArightBefore : {
-                borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-
-        }
-    }}
- }
- &[data-popper-placement*='right'] .tooltip-arrow::after {
-    border-color: transparent ${({ theme }) => theme.bgColor} transparent transparent;
-     ${({ inBuiltCss, type, customStylesTPArightAfter, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-right-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-right-arrow-after']) {
-                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-after'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPArightAfter ? customStylesTPArightAfter : {
-                borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
-            }
-            return { ...tempObj, ...customStyles };
-
-        }
-    }}
- }
- &[data-popper-placement*='left'] .tooltip-arrow {
-     ${({ inBuiltCss, type, customStylesTPAleft }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-left-arrow']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-left-arrow']) {
-                    tempObj[property] = inBuiltCss['tp-cont-left-arrow'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAleft };
-        }
-    }}
- }
- &[data-popper-placement*='left'] .tooltip-arrow::before {
-    
-    border-color: transparent transparent transparent ${({ theme }) => theme.bgColor};
-     ${({ inBuiltCss, type, customStylesTPAleftBefore, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-left-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-left-arrow-before']) {
-                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-before'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPAleftBefore ? customStylesTPAleftBefore : {
-                borderColor: `transparent transparent transparent ${theme.primary['primary-1']} `,
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
- }
- &[data-popper-placement*='left'] .tooltip-arrow::after {
-    border-color: transparent transparent transparent ${({ theme }) => theme.bgColor};
-     ${({ inBuiltCss, type, customStylesTPAleftAfter, theme }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tp-cont-left-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tp-cont-left-arrow-after']) {
-                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-after'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            let customStyles = customStylesTPAleftAfter ? customStylesTPAleftAfter : {
-                borderColor: `transparent transparent transparent  ${theme.primary['primary-1']} `,
-            }
-            return { ...tempObj, ...customStyles };
-
-        }
-    }}
- }
- `;
-
-const TooltipArrow = styled.div`
- 
- ${({ inBuiltCss, type, customStylesTPArrow }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tooltip-arrow']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tooltip-arrow']) {
-                    tempObj[property] = inBuiltCss['tooltip-arrow'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPArrow };
-        }
-    }}
- 
- 
- &::before{
-     ${({ inBuiltCss, type, customStylesTPAbefore }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tooltip-arrow-before']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tooltip-arrow-before']) {
-                    tempObj[property] = inBuiltCss['tooltip-arrow-before'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAbefore };
-        }
-    }}
-     }
- 
-     &::after{
-         ${({ inBuiltCss, type, customStylesTPAafter }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss['tooltip-arrow-after']) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss['tooltip-arrow-after']) {
-                    tempObj[property] = inBuiltCss['tooltip-arrow-after'][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAafter };
-        }
-    }}
-         }
- `;
-
-
-const TooltipContent = styled.div`
- 
- background-color: ${({ theme }) => theme.primary['primary-1']};
- ${({ inBuiltCss, defaultTooltipContentStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultTooltipContentStyle);
-    }}
-     // custom styles
-     ${({ customContentStyle }) => customContentStyle}
- `
-
-const Header = styled.div`
- ${({ inBuiltCss, defaultTooltipHeaderStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultTooltipHeaderStyle);
-    }}
-     // custom styles
-     ${({ customHeaderStyle }) => customHeaderStyle}
- `
-
-const Body = styled.div`
- ${({ inBuiltCss, defaultTooltipBodyStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultTooltipBodyStyle);
-    }}
-     // custom styles
-     ${({ customBodyStyle }) => customBodyStyle}
- `
-
-const Footer = styled.div`
- `
-
-export const Tooltip = ({
-    inBuiltCss,
-    contentTrigger,
-    contentTooltip,
-    popperOptionsP,
-    settings,
-    customStylesTPContainer,
-    customStylesTPAbottom,
-    customStylesTPAbottomBefore,
-    customStylesTPAbottomAfter,
-    customStylesTPAtop,
-    customStylesTPAtopBefore,
-    customStylesTPAtopAfter,
-    customStylesTPAright,
-    customStylesTPArightBefore,
-    customStylesTPArightAfter,
-    customStylesTPAleft,
-    customStylesTPAleftBefore,
-    customStylesTPAleftAfter,
-    customStylesTPArrow,
-    customStylesTPAbefore,
-    customStylesTPAafter,
-    customTooltipContentStyle,
-    customContentStyle,
-    customHeaderStyle,
-    customBodyStyle,
-    headerTooltip,
-    footerTooltip,
-    ...props
-}) => {
-
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const popperOptions = {
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 23],
-                },
-            },
-        ],
-        strategy: 'absolute'
-        , ...popperOptionsP
-    }
-
-    const {
-        getArrowProps,
-        getTooltipProps,
-        setTooltipRef,
-        setTriggerRef,
-        visible,
-    } = usePopperTooltip({
-        ...settings
-    }, popperOptions);
-
-    return (
-        <>
-            <div ref={setTriggerRef}
-                style={{ width: 'fit-content', height: 'fit-content', display: 'inline-block' }}
-            >
-                {contentTrigger}
-            </div>
-            {visible && (
-                <TooltipContainer
-                    inBuiltCss={defaultStyles}
-                    theme={activeTheme}
-                    ref={setTooltipRef}
-                    {...getTooltipProps({ className: 'tooltip-container' })}
-                    customStylesTPContainer={customStylesTPContainer}
-                    customStylesTPAbottom={customStylesTPAbottom}
-                    customStylesTPAbottomBefore={customStylesTPAbottomBefore}
-                    customStylesTPAbottomAfter={customStylesTPAbottomAfter}
-                    customStylesTPAtop={customStylesTPAtop}
-                    customStylesTPAtopBefore={customStylesTPAtopBefore}
-                    customStylesTPAtopAfter={customStylesTPAtopAfter}
-                    customStylesTPAright={customStylesTPAright}
-                    customStylesTPArightBefore={customStylesTPArightBefore}
-                    customStylesTPArightAfter={customStylesTPArightAfter}
-                    customStylesTPAleft={customStylesTPAleft}
-                    customStylesTPAleftBefore={customStylesTPAleftBefore}
-                    customStylesTPAleftAfter={customStylesTPAleftAfter}
-                >
-                    <TooltipArrow
-                        inBuiltCss={defaultStyles}
-                        {...getArrowProps({ className: 'tooltip-arrow' })}
-                        customStylesTPArrow={customStylesTPArrow}
-                        customStylesTPAbefore={customStylesTPAbefore}
-                        customStylesTPAafter={customStylesTPAafter}
-                    />
-                    <TooltipContent defaultTooltipContentStyle={'popOver-Content'} theme={activeTheme} inBuiltCss={defaultStyles}
-                        {...props} customContentStyle={customContentStyle}>
-                        <Header defaultTooltipHeaderStyle={'popOver-header'} theme={activeTheme} inBuiltCss={defaultStyles}
-                            {...props} customHeaderStyle={customHeaderStyle}>{headerTooltip}</Header>
-                        <Body defaultTooltipBodyStyle={'popOver-body'} theme={activeTheme} inBuiltCss={defaultStyles}
-                            {...props} customBodyStyle={customBodyStyle}>{contentTooltip}</Body>
-                        <Footer >{footerTooltip}</Footer>
-                    </TooltipContent>
-                </TooltipContainer>
-            )}
-        </>
-    );
-};
-
-Tooltip.propTypes = {
-
-    /**
-     * The element where to attach the tooltip
-     */
-    contentTrigger: PropTypes.any,
-    /**
-     * The header element to put inside the tooltip
-     */
-    headerTooltip: PropTypes.any,
-    /**
-     * The Body element to put inside the tooltip
-     */
-    contentTooltip: PropTypes.any,
-    /**
-     * The footer element to put inside the tooltip
-     */
-    footerTooltip: PropTypes.any,
-    /**
-     * Object to customize the behaviour of the tooltip
-     * For more reference see: 
-     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
-     * https://popper.js.org/docs/v2/tutorial/
-     */
-    popperOptionsP: PropTypes.object,
-    /**
-     * Object to customize the settings of the tooltip
-     * For more reference see: 
-     * https://github.com/mohsinulhaq/react-popper-tooltip#readme
-     * https://popper.js.org/docs/v2/tutorial/
-     */
-    settings: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip container
-     */
-    customHeaderStyle: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip container
-     */
-    customBodyStyle: PropTypes.object,
-
-    /**
-     * Object to pass custom style to the Tooltip container
-     */
-    customStylesTPContainer: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow bottom
-     */
-    customStylesTPAbottom: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow bottom ::before
-     */
-    customStylesTPAbottomBefore: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow bottom ::after
-     */
-    customStylesTPAbottomAfter: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow top
-     */
-    customStylesTPAtop: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow top ::before
-     */
-    customStylesTPAtopBefore: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow top ::after
-     */
-    customStylesTPAtopAfter: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow right
-     */
-    customStylesTPAright: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow right ::before
-     */
-    customStylesTPArightBefore: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow right ::after
-     */
-    customStylesTPArightAfter: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow left
-     */
-    customStylesTPAleft: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow left ::before
-     */
-    customStylesTPAleftBefore: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow left ::after
-     */
-    customStylesTPAleftAfter: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow
-     */
-    customStylesTPArrow: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow ::before
-     */
-    customStylesTPAbefore: PropTypes.object,
-    /**
-     * Object to pass custom style to the Tooltip arrow ::after
-     */
-    customStylesTPAafter: PropTypes.object,
-};
-
-Tooltip.defaultProps = {
-    contentTrigger: <div>Trigger</div>,
-    headerTooltip: 'Lovely tooltip title',
-    contentTooltip: '',
-    footerTooltip: '',
-    customStylesTPContainer: { border: 'none' },
-};

package/components/Tooltip/index.js

@@ -1 +0,0 @@
-export * from './Tooltip';

package/components/Typography/Typography.js

@@ -1,77 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import FontStyles from '../global/FontStyle';
-
-const sizes = {
-    xs: {
-        fontSize: '12px',
-        lineHeight: '120%'
-    },
-    sm: {
-        fontSize: '14px',
-        lineHeight: '120%'
-    },
-    md: {
-        fontSize: '16px',
-        lineHeight: '140%'
-    },
-    lg: {
-        fontSize: '18px',
-        lineHeight: '120%'
-    },
-}
-
-const Box = styled.div`
-    color: ${({ theme, text }) => text ? theme.variant[text] : theme.textColor};
-    // background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
-    font-size: ${({ size }) => sizes[size].fontSize};
-    line-height: ${({ size }) => sizes[size].lineHeight};
-`
-
-export const Typography = ({ size, children, bg, text, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor
-
-    return (
-        <Box
-            theme={activeTheme}
-            bg={bg}
-            text={text}
-            size={size}
-            {...props}
-        >
-            <FontStyles theme={activeTheme} />
-            {children}
-        </Box>
-    );
-};
-
-Typography.propTypes = {
-    /**
-     * How large should the font be?
-     */
-    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-    /**
-     * Text Color variant. primary-1, 2, etc.
-     */
-    text: PropTypes.string,
-    /**
-     * Background Color variant. primary-1, 2, etc.
-     */
-    bg: PropTypes.string,
-    /**
-     * Typography contents
-     */
-    children: PropTypes.any,
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
-};
-
-
-
-Typography.defaultProps = {
-    size: 'md',
-};

package/components/Typography/index.js

@@ -1,2 +0,0 @@
-export * from './Typography';
-

package/components/constants/colors.js

@@ -1,33 +0,0 @@
-
-export const primaryColor = {
-    "primary-1": "#2E56F4",
-    "primary-2": "#081348",
-}
-
-export const uiColor = {
-    "error": "#DD0000",
-    "success": "#00B904 ",
-}
-
-export const neutralColor = {
-    "neutral-1": "#39424D",
-    "neutral-2": "#929EAC",
-    "neutral-3": "#BBC4CF",
-    "neutral-4": "#E2E6F5",
-    "neutral-5": "#F0F3F8",
-}
-
-export const shadeColor = {
-    "insight-purple": "#F8F2FF",
-    "insight-yellow": "#FFFAF2",
-    "error-bg": "#FCF2F2",
-    "selection-bg": "#F2F4FE",
-}
-
-export const graphColor = {
-    "graph-1": "#2E56F4",
-    "graph-2": "#00D7F7",
-    "graph-3": "#8B2DFF",
-    "graph-4": "#FB9A00",
-    "graph-5": "#00B904",
-}