import { Theme } from 'theme-ui'

const config: Theme = {
    colors: {
        text: '#000',
        background: '#fff',
        primary: '#0D84FF',
        danger: '#EC584A',
        warning: '#FF9E0D',
        modes: {
            dark: {
                text: '#fff',
                background: '#000'
            }
        }
    },
    space: [0, '0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem'],
    breakpoints: ['640px', '768px', '992px', '1200px', '1600px'],
    fontSizes: [
        '0.875rem',
        '1rem',
        '1.25rem',
        '1.5rem',
        '1.75rem',
        '2rem',
        '2.5rem',
        '3.5rem',
        '4.5rem',
        '5.5rem',
        '6rem'
    ],
    zIndices: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    fonts: {
        sans:
            '"MI Lan Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif',
        mono: 'Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
    },
    // @ts-ignore
    transition: {
        default: 'all 0.33s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
    },
    // ------------------------------------------------------------------------------------------------
    styles: {
        root: {
            m: 0,
            fontSize: 1,
            fontFamily: 'sans'
        }
    }
}
export default config