Theming

Polymath UI is using Styled Components theming capabilities.

Every spacing and typography styles should follow the scales provided in the theme.

Default theme

Components are designed based on the following theme:

{
    "breakpoints": {
        "sm": 0,
        "md": "42.5em",
        "lg": "64em",
        "xl": "80em"
    },
    "fontSizes": {
        "0": "0.75rem",
        "1": "0.875rem",
        "2": "1rem",
        "3": "1.125rem",
        "4": "1.25rem",
        "5": "1.5rem",
        "6": "1.75rem",
        "7": "2rem",
        "8": "2.25rem",
        "9": "2.625rem",
        "baseText": "0.875rem"
    },
    "fontFamilies": {
        "baseText": "'Overpass', sans-serif"
    },
    "lineHeights": {
        "none": 1,
        "tight": 1.15,
        "normal": 1.5,
        "loose": 2
    },
    "fontWeights": {
        "light": 200,
        "normal": 300,
        "bold": 500,
        "strong": 600
    },
    "space": {
        "0": "0",
        "1": "5px",
        "2": "10px",
        "3": "16px",
        "4": "23px",
        "5": "30px",
        "6": "48px",
        "7": "80px",
        "8": "120px",
        "s": "10px",
        "m": "16px",
        "l": "30px",
        "xl": "48px",
        "xxl": "80px",
        "xxxl": "120px",
        "gridGap": "23px"
    },
    "zIndexes": {
        "header": 80,
        "sidebar": 100
    },
    "colors": {
        "baseText": "#5A6872",
        "highlightText": "#152935",
        "primary": "#252D6B",
        "secondary": "#5596E6",
        "placeholder": "#5A6872",
        "gray": [
            "#F5F7FA",
            "#EBF0F7",
            "#8C9BA5",
            "#5A6872"
        ],
        "blue": [
            "#5596E6",
            "#3D70B2",
            "#252D6B"
        ],
        "greyBlue": [
            "#b5ddfc",
            "#416d95"
        ],
        "green": [
            "#00AA5E",
            "#0B6B40"
        ],
        "red": [
            "#e0182d"
        ],
        "inactive": "#8F9BA4",
        "idle": "#5596E6",
        "alert": "#e0182d",
        "warning": "#EFC100",
        "success": "#00AA5E"
    },
    "shadows": {
        "0": "",
        "1": "0 2px 6px 0 rgba(0, 0, 0, 0.1)",
        "2": "0 8px 24px 0 rgba(0, 0, 0, 0.1)"
    },
    "headings": {
        "h1": {
            "color": "#252D6B",
            "fontSize": "2.25rem",
            "fontWeight": 500
        },
        "h2": {
            "color": "#252D6B",
            "fontSize": "1.75rem",
            "fontWeight": 500
        },
        "h3": {
            "color": "#152935",
            "fontSize": "1.25rem",
            "fontWeight": 500
        },
        "h4": {
            "color": "#5A6872",
            "fontSize": "1.25rem",
            "fontWeight": 300
        }
    },
    "buttons": {
        "primary": {
            "backgroundColor": "#252D6B",
            "borderColor": "transparent",
            "color": "#fff",
            "&:hover": {
                "backgroundColor": "rgba(37,45,107,0.8)"
            }
        },
        "secondary": {
            "backgroundColor": "transparent",
            "borderColor": "#252D6B",
            "color": "#252D6B",
            "&:hover": {
                "color": "#fff",
                "backgroundColor": "#252D6B"
            }
        },
        "ghost": {
            "backgroundColor": "transparent",
            "borderColor": "transparent",
            "color": "currentColor",
            "&:hover": {
                "color": "#fff",
                "backgroundColor": "#5596E6"
            }
        },
        "ghostSecondary": {
            "backgroundColor": "transparent",
            "borderColor": "transparent",
            "color": "currentColor",
            "padding": 0,
            "&:hover": {
                "backgroundColor": "transparent",
                "color": "currentColor",
                "opacity": 0.5
            },
            "&:disabled": {
                "opacity": 1
            }
        },
        "raw": "\n  padding: 0;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n  border: none;\n"
    },
    "links": {
        "color": "#5596E6",
        "&:hover, &:focus": {
            "color": "#1b62ba"
        }
    },
    "transitions": {
        "hover": {
            "ms": 150
        },
        "modal": {
            "ms": 200
        }
    },
    "maxWidth": "1600px",
    "inputs": {
        "height": "2.5rem",
        "backgroundColor": "#EBF0F7"
    },
    "header": {
        "height": "48px"
    },
    "sidebar": {
        "width": "64px"
    },
    "footer": {
        "height": "48px"
    },
    "tokens": {
        "ETH": {
            "color": "#724396",
            "backgroundColor": "#EED3FE"
        },
        "DAI": {
            "color": "#FEBE44",
            "backgroundColor": "#FFEFC4"
        },
        "POLY": {
            "color": "#3C6586",
            "backgroundColor": "#C1E6FE"
        },
        "ERC20": {
            "color": "#007B66",
            "backgroundColor": "#A7FAE6"
        }
    }
}